Html İçine Js Ekleme

Günümüzde web sitelerinin dinamik ve etkileşimli olması, kullanıcı deneyimini arttırmak için oldukça önemlidir. Bu da web sayfalarında JavaScript (JS) kullanımının giderek artmasını sağlamaktadır. Peki, HTML içine JS nasıl eklenir? İşte bu makalede size bu konuda adım adım rehberlik edeceğim.

Öncelikle, JS kodunuzun bulunduğu bir dosya oluşturmanız gerekmektedir. Bunun için bir metin editörü kullanabilirsiniz. Ancak, daha düzenli bir yapı olması için genellikle “.js” uzantılı bir dosya oluşturulur ve bu dosya her sayfanızda dahil edilir.

HTML içine JS eklemek için ise “<script>” etiketini kullanmalısınız. Bu etiket, JS kodunuzun başladığını ve bittiğini belirtir. Örneğin, aşağıdaki örnekte JS kodunun içine “console.log(‘Merhaba Dünya!’);” yazılmıştır:


<script>
console.log('Merhaba Dünya!');
</script>


JS kodunun uzun olması durumunda, daha düzenli bir yapı oluşturmak için “src” özelliğini kullanabilirsiniz. Bu özelliği kullanarak, daha önceden oluşturduğunuz “.js” dosyasını dahil edebilirsiniz. Örneğin:


<script src="script.js"></script>


Yukarıdaki örnek, “script.js” dosyasını dahil edecektir.

İsteğe bağlı olarak, JS kodunuza “defer” veya “async” özelliğini ekleyebilirsiniz. Bu özellikler, JS kodunun sayfanın yüklenmesi sırasında veya sonrasında çalıştırılmasını sağlar. Örneğin:


<script src="script.js" defer></script>


Yukarıdaki örnek, JS kodunun sayfa yüklenirken yüklenmesini ve çalıştırılmasını sağlayacaktır. Bu da sayfanın daha hızlı yüklenmesini sağlar.

Son olarak, JS kodunuzu HTML içerisinde bir olaya bağlamak isterseniz “onclick“, “onmouseover” gibi olay özelliklerini kullanabilirsiniz. Örneğin:


<button onclick="myFunction()">Tıkla</button>


Yukarıdaki örnek, “Tıkla” butonuna tıklandığında “myFunction” adlı bir fonksiyonun çağrılmasını sağlayacaktır.

Artık HTML içine JS nasıl ekleyeceğinizi biliyorsunuz. Bu sayede web sitenizi daha işlevsel ve etkileşimli hale getirebilirsiniz. Unutmayın, JS kodlarınızı daima güncel ve optimizasyonlu tutun, bu sayede daha iyi bir kullanıcı deneyimi sağlayabilirsiniz.