Web geliştirmeye adım attığınızda, JavaScript’in gücünü kullanmak istediğinizde karşınıza çıkan ilk adımlardan biri, HTML’deki <script> etiketini anlamak olacaktır. Bu etiket, sayfanıza JavaScript kodu eklemenin anahtarını size sunar.
1. Temel Kullanım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Etiketi Örneği</title>
</head>
<body>
<h1>Merhaba, Dünya!</h1>
<!-- JavaScript Kodunu Eklemek için Script Etiketi -->
<script>
// JavaScript kodunuzu buraya yazabilirsiniz.
alert("Merhaba, JavaScript!");
</script>
</body>
</html>
2. Harici Dosya Bağlantısı:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harici Script Örneği</title>
<!-- Harici JavaScript Dosyasını Bağlamak -->
<script src="script.js" defer></script>
</head>
<body>
<h1>Harici Script Kullanımı</h1>
</body>
</html>
script.jsdosyası:
// script.js dosyası içinde JavaScript kodları
alert("Merhaba, Harici Script!");
3. Defer ve Async Kullanımı:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer ve Async Kullanımı</title>
<!-- Defer Kullanımı -->
<script defer>
alert("Bu kod defer ile yükleniyor.");
</script>
<!-- Async Kullanımı -->
<script async>
alert("Bu kod async ile yükleniyor.");
</script>
</head>
<body>
<h1>Defer ve Async Kullanımı</h1>
</body>
</html>
Defer Özelliği:
deferözelliği,<script>etiketi içinde kullanılarak, tarayıcının sayfa yüklenirken betik dosyalarını arka planda indirmesini ve ardından sırayla çalıştırmasını sağlar.<script>etiketi içindedeferözelliği kullanıldığında, tarayıcı betik dosyalarını indirirken sayfa yüklemesine devam eder. Betik dosyaları sırayla indirildikten sonra, sayfa tamamen yüklendiğinde sırayla çalıştırılır.- Bu özellik, genellikle sayfa içindeki betik dosyalarının sıralı olarak yüklenmesini ve çalıştırılmasını sağlamak için kullanılır.
async Özelliği:
asyncözelliği,<script>etiketi içinde kullanılarak, tarayıcının betik dosyasını asenkron bir şekilde indirmesini ve indirme işlemi tamamlandığında hemen çalıştırmasını sağlar.<script>etiketi içindeasyncözelliği kullanıldığında, betik dosyası sayfa yüklenmesini beklemeden indirilir ve indirme tamamlandığında hemen çalıştırılır. Bu nedenle, betik dosyalarının sıralı çalışmasını garantilemez.- Genellikle sayfa içindeki bağımsız betik dosyalarını yüklemek ve çalıştırmak için kullanılır.
Hangisini Kullanmalı?
- Eğer betik dosyalarının sıralı olarak çalıştırılması önemliyse ve bir dosya diğerini beklemeliyse,
deferkullanmak mantıklıdır. - Eğer betik dosyaları birbirinden bağımsızsa ve hemen çalıştırılabilecek durumdaysa,
asynckullanmak daha uygundur. deferveasyncaynı anda kullanılamaz. İki özellik bir arada kullanıldığında,asyncözelliği yoksayılır ve betik dosyası asenkron olarak indirilir ve hemen çalıştırılır.
*
Bu örnekler, <script> etiketinin temel kullanımlarını ve özelliklerini gösterir. JavaScript kodunu sayfanıza eklemek için bu etiketi kullanarak, web sayfalarınızı interaktif hale getirebilir ve dinamik içerikler ekleyebilirsiniz.