JavaScript Kodlarını HTML Sayfalarına Eklemek
JavaScript kodlarını HTML sayfalarına eklemek için çeşitli yöntemler bulunmaktadır. Bu yöntemlerden bazıları kimi zaman hiç tercih edilmezken belli durumlara göre bazı yöntemlerin tercih edilmesi ise kaçınılmazdır.
JavaScript kodlarını HTML sayfalarına eklemek için kullanılan yöntemler aşağıdaki gibidir:
- Inline (Satır içi) JavaScript
- Script Etiketi (Internal) İçerisinde Gömülü Kod
- Harici (External) JavaScript Dosyası
Satır içi JavaScript Eklemek (Inline JavaScript)
Inline JavaScript, doğrudan HTML etiketlerine gömülen JavaScript kodudur. Genellikle olay dinleyicileri (event listeners) için kullanılır. Örneğin, bir butona tıklanma olayı eklemek istediğinizde bu yöntemi kullanabilirsiniz. Bu yöntemin avantajı, hızlı ve kolay olmasıdır; ancak karmaşık kodların yazılması önerilmez.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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.
Dahili JavaScript Eklemek (Internal JavaScript)
JavaScript kodlarını HTML dökümanlarına eklemek için bizzat <script> </script> etiketlerinden yararlanılır. Bu <script> etiketleri HTML dökümanlarına iki konumda eklenebilir. Her iki konumun da kendi avantajları ve kullanım senaryoları vardır.
<head>etiketleri arasında<script>kodu eklemek:
HTML dökümanının <head> bölümünde script etiketini kullanmak, dökümanın başında JavaScript kodlarını tanımlamak için bir yöntemdir.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Örnek Sayfa</title> <script src="script.js"></script> </head> <body> <!-- Sayfa içeriği --> </body> </html> |
Eğer <script> etiketinizi <head> bölümüne eklerseniz, bu script sayfa yüklenirken çalıştırılır. Ancak bu yöntemin önemli bir dezavantajı vardır: Eğer script dosyanız büyükse veya internet bağlantısı yavaşsa, sayfanın geri kalan kısımlarının yüklenmesi script yüklenene kadar bekletilir. Bu da haliyle, kullanıcının sayfayı daha yavaş görmesine sebep olacağından kullanıcı deneyimini zedeler. Bu sorunu çözmek için genellikle “defer” özelliğinden faydalanılır:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Örnek Sayfa</title> <script src="script.js" defer></script> </head> <body> <!-- Sayfa içeriği --> </body> </html> |
“Defer” özelliği, script’in sayfa yüklenene kadar çalıştırılmamasını sağlar. Yani, sayfa tamamen yüklendikten sonra script çalıştırılır.
Bu şekilde, kullanıcı sayfanın içeriğini hemen görüntüleyebilir ve JavaScript kodu sayfa tamamen yüklendikten sonra çalışır. Ancak, genel olarak sayfa yüklenme hızını ve kullanıcı deneyimini optimize etmek için, <script> etiketini sayfanın sonunda, yani </body> etiketi öncesinde eklemek daha yaygın bir uygulamadır.
<body>etiketleri arasında<script>kodu eklemek:
HTML belgesinde, <script> etiketini <body> bölümüne, özellikle </body> etiketi hemen öncesine eklemek, genellikle web geliştiricileri tarafından tercih edilen bir yaklaşımdır. Bunun temel nedeni, sayfanın içeriğinin kullanıcının tarayıcısında daha hızlı bir şekilde görüntülenmesini sağlamaktır.
Bu yaklaşımın avantajı şudur: Tarayıcı, HTML belgesini yukarıdan aşağıya doğru sırayla işler. Sayfanın içeriği (metin, resimler, videolar vb.) scriptler yüklenmeden önce görüntülenir. Bu da, kullanıcının sayfada belirtilen içeriği hemen görmesini sağlar, böylece sayfanın tamamen yüklenmesini beklemek zorunda kalmazlar.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Örnek Sayfa</title> </head> <body> <!-- Sayfa içeriği --> <script src="script.js"></script> </body> </html> |
Bu yaklaşım özellikle büyük JavaScript dosyaları için faydalıdır. Script dosyasının boyutu ne kadar büyükse, sayfanın tamamen yüklenmesi o kadar uzun sürer. Eğer script dosyası <head> bölümünde tanımlanırsa, sayfanın geri kalan kısmının yüklenmesi script dosyası yüklenene kadar bekletilir. Ancak script dosyasını </body> etiketi öncesine eklerseniz, kullanıcı sayfanın içeriğini görebilir ve script dosyası arka planda yüklenirken sayfanın diğer kısımlarıyla etkileşimde bulunabilir.
Sonuç olarak, <script> etiketini <body> etiketleri arasında, özellikle sayfanın sonunda kullanmak, kullanıcılara daha hızlı bir web deneyimi sunar. Bu nedenle bu yaklaşım, modern web tasarım ve geliştirme pratiklerinde yaygın olarak önerilmektedir.
Harici JavaScript Eklemek (External JavaScript)
Bir web sayfasında JavaScript kodlarını direkt olarak HTML içerisine gömme yerine, bu kodları ayrı bir .js (örnek.js) uzantılı dosyada tutarak HTML dosyasına eklemek, “harici JavaScript” kullanımı olarak adlandırılır. Bu yöntem, özellikle büyük projelerde veya birden fazla sayfa aynı JavaScript kodlarını kullanacaksa tercih edilir.
Eğer “functions.js” adında bir JavaScript dosyanız varsa, bu dosyayı HTML belgenize aşağıdaki şekilde ekleyebilirsiniz:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Örnek Sayfa</title> </head> <body> <!-- Sayfa içeriği --> <script src="functions.js"></script> </body> </html> |
Burada, <script> etiketi ile src özelliğini kullanarak harici JavaScript dosyanın yolunu belirtiyoruz. Bu sayede “functions.js” dosyasındaki tüm fonksiyonlar ve değişkenler HTML belgesi içerisinde kullanılabilir hale gelir.
Genel olarak, harici bir JavaScript dosyası eklerken, dosyanın sayfanın sonunda, yani </body> etiketi öncesinde eklenmesi önerilir. Böylece sayfa içeriği tarayıcı tarafından daha hızlı yüklenir ve kullanıcı herhangi bir gecikme yaşamaz.
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ı azaltacak ve bu da web sitelerini hızlandıracak olmasıdır. Ayrıca kod okunabilirliği ve bakımı kolaylaşacaktır.