JavaScript Kodlarını HTML Sayfalarına Nasıl Ekleriz?
JavaScript kodlarını HTML sayfalarına eklemek için üç farklı yöntem kullanılmaktadır. Bakınız:
- Inline (Satır içi) JavaScript
- Internal (Dahili) JavaScript
- Harici (External) JavaScript Dosyası
Satır içi JavaScript Eklemek (Inline JavaScript)
“Inline JavaScript” denilen şey doğrudan HTML etiketlerine gömülen JavaScript kodlarıdır. Böylesi bir JavaScript kodu genelde “olay dinleyicileri” olarak çevirebileceğimiz “event listeners”lar için kullanılır. Örneğin, bir düğmeye tıklandığında bir işlemi tetiklemek istediğinizde bu yöntem oldukça kullanışlı olabilir.
Diyelim ki web sayfanızda bir “Beğen” butonu eklediniz ve kullanıcı bu butona tıkladığında teşekkür mesajı göstermek istiyorsunuz. İşte bunu “inline JavaScript” ile şu şekilde yapabilirsiniz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript Örneği</title>
</head>
<body>
<!-- Kullanıcı bir düğmeye tıkladığında bir mesaj göstermek için -->
<h1>Inline JavaScript Örneği</h1>
<p>Aşağıdaki butona tıkladığınızda teşekkür mesajı alacaksınız:</p>
<!-- Inline JavaScript kullanımı -->
<button onclick="showMessage()">Tıkla ve Mesaj Göster</button>
<!-- Javascript fonksiyonu -->
<script>
// Kullanıcı düğmeye tıkladığında çalışacak olan fonksiyon
function showMessage() {
alert('Teşekkürler! Mesajınızı aldık.');
}
</script>
</body>
</html>
Yukarıdaki kodumuz, basit bir olay dinleyicisi olan onclick özelliği ile bir JavaScript fonksiyonunu çağırıyor. Kullanıcı, butona tıkladığında onclick tetikleniyor ve showMessage() adlı bir fonksiyon devreye giriyor. Bu fonksiyon, tarayıcıda bir uyarı (alert) kutusu açarak kullanıcıya “Teşekkürler! Mesajınızı aldık.” mesajını gösteriyor.
Butona işlevliğini kazandıran fonksiyon tanımı fark edeceğiniz üzere <script> etiketi içinde yer alıyor. Bu etiket, HTML belgesine JavaScript kodu eklemek için kullanılır. Kodun bu şekilde yerleştirilmesi, HTML ve JavaScript’in aynı dosyada birlikte çalışmasını sağlar. Ancak, bu yaklaşım genellikle basit ve küçük uygulamalar için tercih edilmelidir. Daha büyük projelerde, JavaScript kodlarının ayrı dosyalarda tutulması önerilir.
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 kendine has avantajları ve kullanım senaryoları vardır. Sırayla inceleyelim:
1. <head> etiketleri arasında <script> etiketini eklemek:
HTML belgesinin <head> bölümünde <script> etiketini kullanmak, JavaScript kodlarını belgenin başında tanımlamaya olanak tanır. Bu yöntem, JavaScript kodlarını HTML’den ayrı bir şekilde organize etmek veya belirli özelliklerin sayfa yüklenmeden önce tanımlanmasını sağlamak için kullanılır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript in Head</title>
<!-- JavaScript kodu <head> bölümünde tanımlanıyor -->
<script>
function greetUser() {
console.log("Sayfa yüklenmeden önce bu mesaj konsola yazıldı!");
}
greetUser(); // JavaScript fonksiyonunu çağırıyoruz
</script>
</head>
<body>
<h1>JavaScript Başlıkta</h1>
<p>Bu sayfanın konsolunda bir mesaj görebilirsiniz.</p>
</body>
</html>
Bu örnekte, <head> bölümüne eklenen <script> etiketiyle JavaScript kodları tanımlanmış ve bir fonksiyon oluşturulmuş. Fonksiyonun amacı, sayfa yüklenmeden önce tarayıcı konsoluna bir mesaj yazdırmak. greetUser() adlı fonksiyon, konsola “Sayfa yüklenmeden önce bu mesaj konsola yazıldı!” mesajını yazıyor. Bu çağrı, <head> bölümünde olduğu için, tarayıcı önce bu kodu çalıştırıyor ve ardından HTML içeriğini yüklemeye devam ediyor. Bu yaklaşım, genellikle sayfanın yüklenmesi öncesinde çalışması gereken kısa ve hızlı işlemler için tercih edilir.
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ı ilgili script yüklenene kadar bekletilir. Bu durum, sayfanın daha yavaş görünmesine ve haliyle kullanıcı deneyiminin olumsuz etkilenmesine neden olur. Bu sorunu çözmek için defer ve async özelliklerni kullanabilirsiniz.
Kısaca iki kullanıma değineyim: JavaScript’te defer özelliği, birden fazla JavaScript dosyasını HTML belgesi tamamen yüklendikten sonra, dosyaların HTML içinde tanımlandıkları sıraya göre çalıştırır. Bu, özellikle bir dosyanın diğerine bağımlı olduğu durumlarda çakışmaları önlemek için oldukça kullanışlıdır. Örneğin, script1.js içinde tanımlanan bir fonksiyonun script2.js tarafından kullanılması gerekiyorsa, defer sayesinde bu sıranın korunması sağlanır.
Ancak bu özellik yalnızca sıralamayı garanti eder; eğer JavaScript dosyalarının içerikleri birbiriyle tutarsız şekilde yazılmışsa veya beklenmeyen bir bağımlılık durumu varsa, çakışmalar yine de ortaya çıkabilir. Bu yüzden, defer kullandığınızda dosyaların içeriğinin ve birbirleriyle olan ilişkilerinin doğru bir şekilde yönetildiğinden emin olmanız önemlidir. Ayrıca, defer özelliği “script“lerin HTML ile birlikte yüklenmesini sağlar, böylece tarayıcı bir yandan HTML’yi işlerken bir yandan da JavaScript dosyalarını indirir ve performansı artırır.
Ancak şunu da net bir şekilde belirtmek istiyorum: Tarayıcı, defer ile işaretlenmiş script dosyalarını, HTML belgesi ile birlikte paralel olarak indirir ancak dosyayı HTML tamamen yüklendikten sonra ve sıralı bir şekilde çalıştırır. Bu, tarayıcının önce HTML içeriğini tam olarak işleyip görüntülemesine olanak tanır ve JavaScript’in sayfa yüklenme süresini engellememesini sağlar.
Öte yandan, async özelliği bu tür bir sıralama sağlamaz. Script dosyaları yüklenir yüklenmez çalıştırıldığı için, birbirleriyle etkileşimde olan dosyalarda çakışma yaşanabilir. Bu yüzden, bağımsız çalışan dosyalar için async, etkileşimdeki dosyalar için ise defer kullanımı önerilir.
<!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 Örnek</title>
<!-- Defer script'ler (birbirine bağımlı) -->
<script defer src="library.js"></script> <!-- Kütüphane dosyası -->
<script defer src="utilities.js"></script> <!-- Kütüphaneye bağımlı yardımcı fonksiyonlar -->
<script defer src="main.js"></script> <!-- Kullanıcı ile etkileşim için ana script -->
<!-- Async script (bağımsız çalışır, örneğin Google Analytics gibi) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script async>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
</head>
<body>
<h1>Defer ve Async Kullanımı</h1>
<p>Bu sayfada defer ve async özelliklerinin farkını görebilirsiniz.</p>
</body>
</html>
Yukarıdaki örneğimizde, üç adet defer özelliğine sahip script dosyası ve bir adet async özellikli script bulunmaktadır. İlk olarak library.js dosyası, diğer script’lerin temel aldığı kütüphane fonksiyonlarını içerir. Bu dosyanın yüklenmesinden sonra, kütüphaneyi kullanarak ek fonksiyonlar sağlayan utilities.js devreye girer. Son olarak, main.js dosyası, kullanıcıyla etkileşim için gerekli olan ana JavaScript kodlarını çalıştırır. defer sayesinde bu dosyalar, HTML tamamen yüklendikten sonra tanımlandıkları sıraya göre çalıştırılır. Böylece sıralama garanti edilir ve bağımlı duyduğu JavaScript dosyasının henüz yüklenmemesi gibi bir sorun yaşamaz, çakışma olmaz.
Bunun yanında, sayfada bağımsız bir işlem gerçekleştiren Google Analytics kodu için async özelliği kullanılmıştır. async, script’in paralel olarak yüklenmesini ve yüklendiği anda çalışmasını sağlar. Bu, Google Analytics gibi diğer script dosyalarından bağımsız çalışan ve sıralamaya ihtiyaç duymayan kodlar için idealdir. Bu yapı, hem performansı optimize eder hem de bağımlı ve bağımsız script’lerin sorunsuz bir şekilde çalışmasını sağlar.
Eğer bir <script> etiketi sayfanın başında, yani <head> kısmında kullanılırsa tarayıcı bu “script“i indirmeye ve çalıştırmaya başlar. Ancak, bu sırada HTML’nin geri kalanı işlenemez. Yani JavaScript kodu tamamlanana kadar tarayıcı HTML yükleme işlemini durdurur. Bu durum, sayfanın içeriğinin kullanıcıya geç gösterilmesine neden olabilir.
Bu problemi çözmek için genellikle <script> etiketini sayfanın sonuna -yani </body> etiketinin hemen öncesine- ekleriz. Bunun nedeni, tarayıcının önce HTML’yi tamamen yüklemesi ve kullanıcıya içeriği göstermesi, ardından JavaScript kodunu yükleyip çalıştırmasıdır. Böylece sayfa daha hızlı görünür hale gelir ve kullanıcı deneyimi iyileşir.
2. <body> etiketleri arasında <script> kodu eklemek:
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.) “script”ler 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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Script Sayfanın Sonunda</title>
</head>
<body>
<h1>Merhaba!</h1>
<p>Sayfa içeriği yüklenmiştir.</p>
<!-- Script dosyası burada çağrılıyor -->
<script src="script.js"></script>
</body>
</html>
Bu yaklaşımda, <script> etiketini sayfanın sonunda, </body> etiketinin hemen öncesine yerleştirmek, sayfanın içeriğinin kullanıcı tarafından daha hızlı görünmesini sağlar. Tarayıcı, önce HTML’yi tamamen yükler ve sayfa elemanlarını kullanıcıya gösterir. JavaScript kodu, HTML tamamen yüklendikten sonra çağrıldığı için, tarayıcı herhangi bir bekleme yaşamadan HTML işleme sürecine devam eder. Bu yöntem, özellikle kullanıcı deneyimini geliştirmek için yaygın olarak tercih edilir.
Bu yaklaşımda JavaScript kodu, HTML belgesi yüklenip DOM yapısı hazır hale geldikten sonra çalıştığı için, JavaScript’in sayfa elemanlarıyla sorunsuz bir şekilde etkileşim kurmasını sağlar. Örneğin, bir butona tıklama işlemi ya da bir form alanına erişim gibi işlemler için, DOM’un tam olarak yüklenmesi gereklidir. “Script“‘ sayfa sonunda çağırmak, bu sürecin otomatik olarak tamamlanmasını sağlar ve kodlar çalıştırıldığında tüm elemanlara erişilebilir durumda olur.
Bu yöntem, daha basit ve geleneksel bir uygulama olmasına rağmen, modern alternatiflerde defer özelliğiyle aynı avantaj sağlanabilir. Yine de, eski yöntemleri anlamak ve gerektiğinde kullanabilmek, basit projelerde kolaylık sağlayacağı için göstermek istedim.
Harici JavaScript Eklemek (External JavaScript)
JavaScript kodlarını direkt olarak HTML içerisine gömmek yerine, ayrı bir .js uzantılı dosyada tutarak HTML dosyasına eklemek, “harici JavaScript” kullanımı olarak adlandırılır. Bu yöntem, aşağıdaki nedenlerle yaygın olarak tercih edilir:
- Kodun Daha Düzenli ve Okunabilir Olması: HTML ve JavaScript’in ayrı dosyalarda tutulması, kodun daha temiz ve yönetilebilir olmasını sağlar.
- Tekrar Kullanılabilirlik: Harici JavaScript dosyaları, birden fazla HTML sayfasında kolayca kullanılabilir. Böylece aynı kodun farklı dosyalara kopyalanmasına gerek kalmaz.
- Bakım Kolaylığı: JavaScript kodunu güncellemek gerektiğinde, sadece harici dosyada değişiklik yapmak yeterli olacaktır.
- Performans İyileştirmesi: Tarayıcılar, harici JavaScript dosyalarını önbelleğe aldığından kullanıcının tarayıcısı aynı dosyayı birden fazla kez indirmek zorunda kalmaz. Eh, bu da yükleme sürelerini kısaltacaktır.
- Büyük Projelerde Yönetim Avantajı: Büyük projelerde farklı işlevler için ayrı JavaScript dosyaları oluşturulabilir. Bu da haliyle kodun modüler hale gelmesini sağlar ve ekip çalışmasını kolaylaştırır.
Örneğin, aşağıdaki gibi bir JavaScript kodunu örnek.js adında bir dosyaya ekledik diyelim:
function showMessage() {
alert('Harici JavaScript dosyasından gelen mesaj!');
}Biz bu JavaScript dosyasını ilgili HTML dökümanımıza aşağıdaki gibi ekleriz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harici JavaScript</title>
<script src="örnek.js" defer></script>
</head>
<body>
<h1>Harici JavaScript Kullanımı</h1>
<button onclick="showMessage()">Mesaj Göster</button>
</body>
</html>
Bu HTML belgesinde, harici bir JavaScript dosyası (örnek.js) kullanılarak bir buton tıklama olayı tanımlanmıştır. <head> kısmında <script src="örnek.js" defer></script> etiketiyle örnek.js dosyası sayfaya dahil edilmiştir. defer özelliği, bu dosyanın HTML tamamen yüklendikten sonra çalışmasını sağlar. Sayfa içeriğinde bir başlık ve bir buton bulunur. Kullanıcı, butona tıkladığında, onclick="showMessage()" çalıştırılır. Bu ise harici JavaScript dosyasındaki showMessage adlı fonksiyonu çağırır ve ekranda bir mesaj gösterir.
Harici JavaScript kullanımı, özellikle büyük projelerde veya aynı JavaScript kodlarının birden fazla sayfada kullanılacağı durumlarda tercih edilen bir yöntemdir. Bu yaklaşım, JavaScript kodlarının ayrı bir .js dosyasında saklanmasını ve bu dosyanın HTML’ye bağlanmasını içerir. Böylece HTML ve JavaScript kodları ayrı tutulur, bu da kodun daha düzenli, okunabilir ve yönetilebilir olmasını sağlar. Harici JavaScript dosyaları bir kez indirildikten sonra tarayıcı tarafından önbelleğe alınır, bu da yükleme sürelerini kısaltarak performansı artırır. Ayrıca, harici dosyadaki bir değişiklik, dosyayı kullanan tüm HTML sayfalarını otomatik olarak etkiler, bu da bakım kolaylığı sağlar. Özellikle büyük projelerde, farklı işlevler için ayrı JavaScript dosyaları oluşturulabilir ve bu modüler yapı, kod organizasyonunu daha verimli hale getirir.