JavaScript Hello World Örneği
Published: 2024-01-16 07:45:54

Bu eğitim, JavaScript kodunu bir HTML sayfasına nasıl yerleştireceğinizi göstererek JavaScript'i kullanmaya başlamanıza yardımcı olur.

Bir HTML sayfasına JavaScript eklemek için `<script>` öğesini kullanırsınız. `<script>` öğesini bir HTML sayfasında kullanmanın iki yolu vardır:

- JavaScript kodunu doğrudan HTML sayfasına gömün.
- Harici bir JavaScript kod dosyasına başvurun.

## JavaScript kodunu bir HTML sayfasına yerleştirme

JavaScript kodunun doğrudan `<script>` öğesinin içine yerleştirilmesi önerilmez ve yalnızca kavram kanıtı veya test amacıyla kullanılmalıdır.

`<script>` elementindeki JavaScript kodu yukarıdan aşağıya doğru yorumlanır. Örneğin:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script>
        alert('Hello, World!');
    </script>
</head>
<body>
</body>
</html>
```
`<script>` elementi içinde, `alert()` funciton'ı ile `Hello World!` yazdırabiliriz.

## Harici bir JavaScript dosyası ekleyin

Harici bir dosyadan JavaScript eklemek için:

- Öncelikle app.js gibi uzantısı `.js` olan bir dosya oluşturun ve bunu `js` dizinine yerleştirin. JavaScript dosyasını `js` dizinine yerleştirmenin gerekli olmadığını ancak bunun iyi bir uygulama olarak kabul edildiğini unutmayın.
- Daha sonra, `<script>` öğesinin src özelliğindeki JavaScript kaynak kod dosyasının URL'sini kullanın.

Aşağıda `app.js` dosyasının içeriği gösterilmektedir:

```
alert('Hello, World!');
```

Aşağıda `helloworld.html` dosyasının içeriği görüntülenir:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script src="js/app.js"></script>
</head>
<body>

</body>
</html>
```

`helloworld.html` dosyasını web tarayıcısında başlatırsanız, `Hello World!` İletisini görürsünüz.

Uzak bir sunucudan bir JavaScript dosyası yükleyebileceğinizi unutmayın. Bu, sayfa yükleme hızını artırmak için içerik dağıtım ağı (CDN) gibi çeşitli alanlardan JavaScript sunmanıza olanak tanır.

Bir sayfada birden fazla JavaScript dosyanız olduğunda, JavaScript motoru, dosyaları göründükleri sıraya göre yorumlar. Örneğin:

```
<script src="js/service.js"></script>
<script src="js/app.js"></script>
```
Bu örnekte, JavaScript motoru `service.js` ve `app.js` dosyalarını sırayla yorumlayacaktır. `app.js` dosyasına geçmeden önce öncelikle `service.js` dosyasının yorumlanmasını tamamlar.

Birçok harici JavaScript dosyası içeren bir sayfa için oluşturma aşamasında boş sayfa görüntülenebilir.

Bunu önlemek için JavaScript dosyasını bu örnekte gösterildiği gibi `</body>` etiketinin hemen önüne eklersiniz:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
</head>
<body>
 
   <!-- end of page content here-->
   <script src="js/service.js"></script>
   <script src="js/app.js"></script>
</body>
</html>
```
## async ve defer Özellikleri

Tarayıcının JavaScript dosyalarını yükleme ve yürütme biçimini değiştirmek için `<script>` öğesinin iki özelliğinden birini kullanırsınız: `async` ve `defer`. Bu öznitelikler yalnızca harici komut dosyası dosyalarında etkili olur.

**async Özelliği**

Async özelliği, web tarayıcısına JavaScript dosyasını eşzamansız olarak yürütmesi talimatını verir. Ancak komut dosyalarının göründükleri sırayla yürütüleceğini garanti etmez. Örneğin:

```
<script async src="service.js"></script>
<script async src="app.js"></script>
```
`app.js` dosyası, `service.js` dosyasından önce yürütülebilir. Bu nedenle aralarında herhangi bir bağımlılık olmadığından emin olmalısınız.

**defer Özelliği**

`defer` özelliği, web tarayıcısından, HTML belgesi ayrıştırıldıktan sonra komut dosyasını yürütmesini ister.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript defer demonstration</title>
    <script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>
```
`<script>` öğesini `<head>` bölümüne yerleştirmemize rağmen, komut dosyası çalışmaya başlamak için tarayıcının kapanış `</html>` etiketini almasını bekleyecektir.

## Özet

- Bir HTML sayfasına JavaScript dosyası eklemek için `<script>` öğesini kullanın.
- `<script>` öğesinin `async` özelliği, web tarayıcısına JavaScript dosyasını paralel olarak getirmesi ve ardından JavaScript dosyası kullanılabilir hale gelir gelmez onu ayrıştırıp yürütmesi talimatını verir.
- `<script>` öğesinin `defer` özelliği, web tarayıcısının, belge ayrıştırıldıktan sonra JavaScript dosyasını yürütmesine olanak tanır.

[Github JS Eğitimleri](https://github.com/haktantekin/javascript-tutorial/tree/main)

[Linkedin](https://www.linkedin.com/in/haktantekin/)

[Kaynak](https://www.javascripttutorial.net/web-development-tools/)