Html Sayfasına Javascript kodları ekleme
1- Satır içi JavaScript Eklemek (Inline JavaScript):
JavaScript kodlarını bizzat HTML elementlerin içine ekleyebiliriz. Aşağıdaki satır içi JavaSript kodu örneği mevcuttur birlikte incileyelim.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="alert('Hello JavaScript')">
<h1>Merhaba JavaScript!</h1>
<p>body elementine yazılan onload niteliği (attribute) ile JavaScript kodları satır içi (inline element) olarak HTML dökümanlarına eklenebilir.</p>
<a href="#" onclick="alert(this)">Click Me</a>
</body>
</html>Yukarıdaki kod bizzat body elementinin başlangıç etiketinnin içine yazılan onload niteliği (attribute) ile JavaScript kodunun satır içi (inline element) olarak HTML dökümanlarına eklenişi gösterilmiştir. Benzer şekilde a elementi içerisindeki onclick niteliğine eklenmiş JavaScript kodunu da görebilirsiniz.
Ancak belirtmek gerekir ki JavaScript kodlarını satır içi olarak HTML dökümanlarına eklemek tercih edilen bir yöntem değildir. Modüler olmamasının yanı sıra hata ayıklaması (debugging) zor olduğu için benimsenen bir yöntem değildir. Bu yüzden mümkünse bu yöntemi uygulamaktan kaçının.2-Dahili JavaScript Eklemek (Internal JavaScript)
Dahili JavaScript, HTML belgesinin head bölümü içinde yer alan bir "script" etiketi aracılığıyla JavaScript kodunu belgeye dahil etmek için kullanılan bir tekniktir. Bu, bir HTML belgesindeki tüm öğeler tarafından kullanılabilecek genel JavaScript kodu içermek için kullanışlıdır.
Örneğin, aşağıdaki kodda, "script" etiketi aracılığıyla dahili JavaScript kullanılarak bir HTML sayfasına genel bir "alert" kutusu eklendi:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dahili JavaScript Örneği</title>
<script>
alert("Merhaba Dünya!");
</script>
</head>
<body>
<p>Bu bir paragraf.</p>
</body>
</html>Bu örnekte, "script" etiketi başlık bölümünde bulunur ve "alert" işlevi, HTML sayfası yüklendiğinde çağrılır. Dahili JavaScript, HTML belgesindeki kodun karmaşıklığını azaltmak için kullanışlı bir tekniktir, ancak aynı zamanda kod tekrarını da beraberinde getirebilir.
Dahili JavaScript, HTML belgesindeki JavaScript kodunu yönetmek için bir yöntemdir, ancak genellikle daha büyük uygulamalar için harici bir JavaScript dosyası kullanmak daha iyi bir uygulama yöntemidir. Bu, JavaScript kodunun ayrı dosyalarda saklanmasını ve yönetilmesini sağlar ve kodun bakımını ve güncellemesini daha kolay hale getirir.
3-Harici JavaScript Eklemek (External JavaScript)
Harici JavaScript, bir HTML belgesindeki JavaScript kodunu harici bir dosyada saklamak ve belgeye "script" etiketi aracılığıyla bağlantı kurmak için kullanılan bir tekniktir. Bu, bir web sitesindeki tüm sayfaların aynı JavaScript kodunu kullanmasını sağlamak için kullanışlıdır.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Harici JavaScript Örneği</title>
<script src="myScript.js"></script>
</head>
<body>
<p>Bu bir paragraf.</p>
</body>
</html>Veya
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Bu bir paragraf.</p>
<script src="lib/script.js"></script>
</body>
</html>Bu örneklerde, "script" etiketi başlık bölümünde bulunur ve "src" özelliği, harici bir JavaScript dosyasının bağlantısını belirtir. "myScript.js" dosyası, belgeye "script" etiketi aracılığıyla bağlanır ve belgede kullanılabilir hale gelir.
Bilgilendirmeler:
Bilgilendirmeler:
Genel olarak en basit JavaScript kodları doğrudan HTML dökümanları içerisine yazılır. Ancak daha karmaşık görevler yapılması için yazılan JavaScript kodları harici dosyalara yazılır JavaScript dosyalarının ayrı dosyalarda taşınmasının bir diğer güzel yanı ise tarayıcıların bu dosyaları indirip ön belleğe almasıdır. Catche olarak adlandırılan bu yapı ile kod dosyaları sadece bir defa indirilecektir. Eğer ilgili kod dosyaları değişmediyse daha sonraki sayfa gösterimleri için tarayıcının tekrar indirmesine gerek kalmayacaktır. Bu da ilgili web sayfasının veri trafiğinin daha az olmasını sağlayacak ve daha hızlı yüklenecektir. JavaScript kodlarının HTML dökümanları içindeki konumu oldukça önemlidir. Head etiketi içerisine yazılan kodlar ilk olarak çalışacağı için herhangi bir aksilik yaşamamak adına CSS kodlarını head etiketi içerisine linkleriz. Ancak JavaScript’te tam tersi bir durum gözlemlenmektedir. Zira henüz var olmayan, yani tarayıcı HTML dökümanını satır satır okurken henüz karşılaşmadığı bir HTML elementiyle karşılaştığında, ilgili element için JavaScript ile yapılan manipülasyon başarısız olacaktır.Bu nedenle script etiketlerini </body> kapanış etiketinden hemen önce, en sonda olacak şekilde koymak doğru bir yaklaşım olacaktır.
Bunun bir diğer yararı ise sayfa yüklenme hızını azaltacaktır. Böylece web sitelerini hızlandıracaktır. Ayrıca kod okunabilirliği ve bakımı kolaylaşacaktır.
