JavaScript Hello World Örneği

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

Kaynak