Yeni Başlayanlar için HTML’e JavaScript Ekleme

Giriş

Bu yazıda HTML dosyalarına JavaScript eklemenin üç temel yolunu öğreneceğiz:

<head> içinde doğrudan eklemek,
<body> içinde eklemek,
Harici bir .js dosyasına bağlanmak.

Sadece nasıl ekleneceğini değil, aynı zamanda neden farklı yöntemler tercih edildiğini de konuşacağız. Performans üzerinde nasıl etkiler yarattığını, tarayıcı önbelleklemenin önemini ve modern defer ile async gibi özelliklerin farkını göreceğiz.

Beraber adım adım ilerleyeceğiz, böylece hem tekniği hem de mantığını anlamış olacağız.

Teoriyi pratikle birleştirmek için bu rehberde gerçek hayattan örnekler de olacak.
Mesela bir karanlık mod butonu yapmayı ya da bir formun doğrulamasını adım adım göreceğiz.

Son kısımda ise temiz, bakımı kolay kod yazmak için temel en iyi uygulamaları öğreneceğiz. Ayrıca kullandığınız tarayıcının geliştirici konsolunu da kullanarak yeni başlayanların sıkça yaptığı hataları nasıl çözeceğimizi anlatan küçük bir rehberimiz olacak.

Böylece hem teoriyi kavramış hem de yapacağınız ilk web projelerine güvenle başlayacak donanıma sahip olmuş olacağız.

Önemli Noktalar

JavaScript eklemenin en iyi yolu, harici bir .js dosyası kullanmaktır. Bu sayede düzenleme, bakım ve tekrar kullanım çok daha kolay olur.
<script> etiketini <head> içinde kullanmak performans açısından yapabilceğiniz en kötü seçenektir çünkü sayfanın yüklenmesini engeller ve kullanıcıya boş bir ekran gösterir.
Harici script dosyalarında defer özelliğini kullanmak, günümüzde önerilen en modern ve performanslı yaklaşımdır.
Harici JavaScript dosyaları tarayıcı önbelleği sayesinde hız kazandırır; inline (sayfa içine yazılan) scriptlerde bu avantaj yoktur.
Tek bir .js dosyası birden fazla sayfada kullanılabilir, bu da güncellemeleri ve bakımı çok daha verimli hale getirir.
JavaScript hatalarını çözmek için en önemli araç tarayıcıdaki Geliştirici Konsolu’dur. F12 tuşuna basarak Geliştirici Konsolu açabiliriz.

Kısacası, işimizi kolaylaştırmak ve performansı artırmak için harici dosyaları tercih edip defer kullanmak en mantıklı yol.

Yöntem 1: `<head>` İçine Script Ekleme

JavaScript kodunu HTML belgesine eklemek için özel bir HTML etiketi olan <script> kullanılır. Bu etiket, yazdığınız JavaScript kodunu sarmalar. <script> etiketi ister <head> bölümünde ister <body> bölümünde kullanılabilir. Bu, kodun ne zaman çalışmasını istediğinize bağlıdır.

Genel olarak <head> içinde kodu tutmak, onu sayfanın asıl içeriğinden ayırarak daha düzenli bir yapı sağlar.

Şimdi örnek olarak, tarayıcı başlığı “Bugünün Tarihi” olan basit bir HTML belgesine bakalım:

<!DOCTYPE html>
<html lang="tr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bugünün Tarihi</title>
</head>
 
<body>
</body>
 
</html>

Bir uyarı (alert) oluşturmak için <title> etiketinin hemen altına bir <script> etiketi ekleyip JavaScript kodumuzu yazabiliriz. Aşağıdaki örnekte olduğu gibi:

<!DOCTYPE html>
<html lang="tr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bugünün Tarihi</title>
    <script>
        let d = new Date();
        alert("Bugünün tarihi: " + d);
    </script>
</head>
 
<body>
</body>
 
</html>

Script’i <head> içine koymak, tarayıcıya şunu yapmasını söyler: önce JavaScript’i çalıştır, sonra <body> içindeki içeriği oluşturmaya başla.

Bu yüzden sayfa yüklenmeden önce uyarı mesajı çıkar; kullanıcı içeriği görmeden script çalışmış olur.

JS ile Uyarı Ekranı

Yöntem 2: `<body>` İçine Script Ekleme

<script> etiketi aynı zamanda <body> bölümünde de kullanılabilir. Burada yer aldığında, HTML tarayıcısı tam o noktaya geldiğinde durur ve script’i çalıştırır.

Bu yöntem, sayfada hemen bir HTML öğesini bulup değiştirmesi gereken JavaScript kodları için tercih edilir.

Yaygın bir en iyi uygulama, script’leri kapanış </body> etiketinden hemen önce eklemektir.
Böyle yapıldığında sayfadaki tüm HTML öğeleri tarayıcı tarafından işlenmiş olur ve DOM içinde hazır hale gelir.

Ayrıca bu yöntem sayfanın performansını da artırır: Tarayıcı önce metin ve görselleri gösterir, kullanıcı sayfa içeriğini görür; JavaScript kodu ise sonradan çalışır. Böylece içerik, JavaScript’in çalışmasını beklemeden ekrana gelir.

Şimdi bu yöntemi kullanarak tarihi doğrudan HTML gövdesine yani <body> kısmına yazdıralım.

<!DOCTYPE html>
<html lang="tr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bugünün Tarihi</title>
</head>
 
<body>
  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Bugünün tarihi: " + d + "</h1>";
  </script>
</body>
 
</html>

Yukarıdaki HTML belgesi bir web tarayıcısında çalıştırıldığında, çıktısı aşağıdakine benzer olacaktır:

JS ile Ekrana Tarih Yazımı

Küçük script’ler veya yalnızca tek bir sayfada çalışacak kodlar HTML dosyası içinde yazılabilir ve genelde sorun çıkarmaz.
Ama script büyüdükçe ya da birçok sayfada kullanılacak hale geldikçe, kodu doğrudan HTML’e gömmek çok verimsiz olmaktadır. Hem okunması zorlaşır hem de yönetmek güçleşir.

Bir sonraki bölümde, ayrı bir JavaScript dosyasını HTML belgesine nasıl ekleyebileceğimizi göreceğiz.

Yöntem 3: Ayrı Bir JavaScript Dosyasıyla Çalışmak

Daha büyük script’ler veya birden fazla sayfada kullanılacak kodlar için en etkili ve profesyonel yöntem, JavaScript’i .js uzantılı ayrı bir dosyaya koymaktır.

Daha sonra bu dosyayı HTML belgesine <script> etiketi ve src (source) özelliği ile bağlayabilirsiniz.

Bu yöntemin öne çıkan artıları şunlardır:

Görevlerin Ayrılması: HTML yapıyı kurar, CSS görünümü ayarlar, JavaScript ise sayfayı etkileşimli hale getirir. Hepsinin ayrı dosyalarda olması projeyi düzenli ve anlaşılır kılar.
Tekrar Kullanım ve Kolay Güncelleme: Örneğin site-scripts.js adında bir dosyayı sitenizdeki tüm sayfalara bağlayabilirsiniz. Değişiklik yapmanız gerektiğinde sadece bu dosyayı düzenlemeniz yeterli olur.
Tarayıcı Önbelleği: Kullanıcı sitenizi ilk kez ziyaret ettiğinde .js dosyası indirilir. Daha sonraki ziyaretlerde tarayıcı aynı dosyayı önbellekten çağırır. Bu da sayfaların çok daha hızlı yüklenmesini sağlar.

Bir JavaScript dosyasını HTML belgesine nasıl bağlayacağımızı göstermek için küçük bir web projesi oluşturalım.

Bu projede:

js/ klasörünün içinde script.js,
css/ klasörünün içinde style.css,
Projenin ana dizininde ise index.html olacak.

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

Şimdi tarihi bir <h1> başlığı olarak gösterecek JavaScript kodumuzu script.js dosyasına taşıyalım:

let d = new Date();
document.body.innerHTML = "<h1>Bugünün tarihi: " + d + "</h1>";

Şimdi de style.css dosyasını düzenleyelim. Arka plana bir renk verelim ve <h1> başlığına biraz stil ekleyelim:

body {
    background-color: #0affda;
}
 
h1 {
    color: #070202;
    font-family: Arial, Helvetica, sans-serif;
}

Son olarak hem script dosyamızı hem de stil dosyamızı index.html içinden bağlayabiliriz.

CSS için <head> bölümünde <link> etiketi kullanırız.
JavaScript için ise <body> içinde src özelliğine sahip bir <script> etiketi ekleriz.

<html lang="tr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bugünün Tarihi</title>
    <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
    <script src="js/script.js"></script>
</body>
 
</html>

Artık JavaScript ve CSS dosyalarını eklediğimize göre projemiz çok daha düzenli hale geldi.
index.html sayfasını tarayıcıda açtığımızda, güncel tarihi gösteren ve stillendirilmiş bir sayfa görmemiz gerekiyor. Çıktı aşağıdakine benzer olacaktır:

JS ile Ekrana Tarih Yazımı

Gerçek Hayatta Kullanılan Kodlar

Şimdiye kadar öğrendiklerimizi biraz da günlük kullanım üzerinden pekiştirelim.
Birkaç gerçek hayattan örneğe göz atmaya ne dersiniz?

1. Basit Karanlık Mod Geçişi

Neredeyse tüm modern web siteleri ve uygulamalar artık karanlık mod özelliği sunuyor.
Bunu JavaScript ile bir CSS sınıfını açıp kapatarak kolayca yapabiliriz.

HTML:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Karanlık Mod</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <button id="theme-toggle">Karanlık Modu Aç/Kapat</button>
    <h1 id="title">Başlık</h1>
    <p>"Rabisu Docs"a Hoşgeldiniz...</p>
    <script src="js/script.js"></script>
</body>

</html>

CSS:

/* Bu sınıf JavaScript tarafından eklenecek veya kaldırılacak */
.dark-mode {
    background-color: #222;
    color: #eee;
}

JavaScript:

const toggleButton = document.getElementById('theme-toggle');

toggleButton.addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
});

JavaScript önce butonu ID değeriyle bulur.
Ardından bir event listener ekleyerek tıklamayı bekler.

Butona tıklandığında classList.toggle('dark-mode') çalışır:

Eğer <body> elementinde .dark-mode sınıfı yoksa, JavaScript onu ekler.
Eğer zaten varsa, JavaScript onu kaldırır.

Tarayıcı da bu sınıfa bağlı CSS stillerini anında uygular.

Sizde kendi web sitenizde kullanarak modern bir görünüm katabilirsiniz.

2. Temel Form Doğrulama

Web sitelerinde kullanıcıların formları doğru şekilde doldurması gerekir.
JavaScript sayesinde bu kontrolü sayfa yenilenmeden anında yapabiliriz.

HTML:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form Doğrulama</title>
</head>

<body>
    <form id="contact-form">
        <label for="email">E-posta:</label>
        <input type="text" id="email" placeholder="[email protected]">
        <button type="submit">Abone Ol</button>
        <p id="error-message" style="color: red;"></p>
    </form>
    <script src="js/script.js"></script>
</body>

</html>

JavaScript:

const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');

contactForm.addEventListener('submit', function(event) {
    if (!emailInput.value.includes('@')) {
        event.preventDefault(); 
        
        errorMessage.textContent = 'Please enter a valid email address.';
    } else {
        errorMessage.textContent = '';
    }
});

Script, form üzerindeki submit (gönderme) olayını dinler.
Kullanıcı “Abone Ol” butonuna tıkladığında fonksiyon çalışır.

İlk olarak, e-posta alanındaki metinde @ işareti olup olmadığını kontrol eder.
Eğer yoksa, event.preventDefault() kullanılarak formun normal şekilde gönderilmesi engellenir ve kullanıcıya bir hata mesajı gösterilir.
Eğer @ işareti varsa, hiçbir engelleme yapılmaz ve form normal şekilde gönderilir.

En İyi Uygulamalar

HTML dosyalarınızda JavaScript kullanırken dikkat etmeniz gereken bazı temel kurallar ve püf noktaları:

JavaScript’i Harici Dosyada Tutun: Kodunuzu doğrudan HTML içine yazmak yerine her zaman .js dosyasına koyun ve <script src="..."></script> ile bağlayın. Bu sayede kodunuz daha düzenli olur, bakımı kolaylaşır ve tarayıcı dosyayı önbelleğe alarak sayfanın daha hızlı yüklenmesini sağlar.
Script’leri <body> Sonuna defer ile Ekleyin: En iyi kullanıcı deneyimi için <script> etiketlerini kapanış </body> etiketinden hemen önce koyun ve defer özelliğini ekleyin. Böylece içerik hızlıca yüklenir ve JavaScript sayfanın görünmesini engellemez.
Okunabilir Kod Yazın: Değişken ve fonksiyonlarınıza açıklayıcı isimler verin (örneğin calculateTotalPrice yerine calc yazmayın). Ayrıca yorum satırlarını (//) “kodun neden yazıldığını” açıklamak için kullanın, “ne yaptığını” değil.
Kendini Tekrarlama (DRY): Aynı kodu birden fazla yerde yazıyorsanız, onu bir fonksiyon içine alın. Böylece gerektiğinde sadece fonksiyonu çağırırsınız; hem kodunuz kısalır hem de güncellemesi kolaylaşır.

Yaygın Sorunlar ve Çözüm Yöntemleri

Script’in çalışmadığında sakın endişelenme! Tarayıcının Geliştirici Araçları en büyük yardımcın olacak.

Klavyeden F12 tuşuna bas (veya sayfaya sağ tıklayıp İncele seç).
Açılan pencerede Console (Konsol) sekmesine tıkla.

Çoğu hata burada kırmızı olarak görünecektir.

1- Hata: Cannot read properties of null veya is not defined

Anlamı: JavaScript, henüz yüklenmemiş bir HTML öğesine erişmeye çalışıyor.
Çözüm: Çoğu zaman bu hata <script> etiketinizin <head> içinde olmasından ya da <body> içinde çok yukarıda yer almasından kaynaklanır.
Script’i <body> kapanış etiketinden hemen önce taşıyın ve defer özelliğini ekleyin.

2- Hata: Uncaught SyntaxError

Anlamı: Kodunuzda bir yazım hatası (typo) var.
Çözüm: Konsol genelde size satır numarasını gösterir. O satırda parantez (), süslü parantez {}, tırnak "" ya da benzeri eksiklik/hataları dikkatlice kontrol edin.

3- Sorun: Script çalışmıyor, Konsol’da hata görünmüyor.

Anlamı: HTML dosyanız büyük ihtimalle .js dosyanızı bulamıyor.
Çözüm: Geliştirici Araçları’ndaki Network (Ağ) sekmesini kontrol edin. Eğer script dosyanız 404 hatasıyla listeleniyorsa, src özelliğindeki dosya yolunuz yanlış demektir. Yazımınızı ve klasör yapınızı tekrar kontrol edin (örneğin: <script src="js/script.js"></script>).

4- Sorun: Kod çalışıyor ama beklediğim sonucu vermiyor.

Anlamı: Bu bir mantık hatasıdır. Sözdizimi (syntax) doğru olsa bile adımlar yanlış olabilir.
Çözüm: Hata ayıklamak için console.log() kullanın. Kodunuzun farklı noktalarına koyarak değişkenlerin değerlerini yazdırın. Böylece mantığı adım adım takip edebilir ve nerede yanlış gittiğini görebilirsiniz.

let userRole = 'guest';
console.log('Kontrol öncesi kullanıcı rolü:', userRole); // Değerin ne olduğunu gör

if (userIsAdmin) {
  userRole = 'admin';
}

Sonuç

Bu rehberde JavaScript’i web dosyalarımıza nasıl ekleyebileceğimizi öğrendik.
Script’i doğrudan HTML içinde yazmak ile harici bir .js dosyası kullanmak arasındaki farkları gördük.

Sonuç olarak, harici .js dosyası kullanmanın çok daha avantajlı olduğunu söyleyebiliriz. Çünkü:

defer ile render-blocking sorununu önler,
tarayıcı önbelleği sayesinde performansı artırır,
kodun bakımını kolaylaştırır.

Ayrıca gerçek hayattan örneklerle (karanlık mod, form doğrulama gibi) öğrendiklerimizi pekiştirdik.
Sık karşılaşılan hataları ise Geliştirici Konsolu üzerinden nasıl çözeceğimizi gördük.

Tebrikler, artık verimli, etkileşimli ve profesyonel seviyede web uygulamaları geliştirmek için gerekli temele sahipsiniz.

Giriş​

Önemli Noktalar​

Yöntem 1: <head> İçine Script Ekleme​

Yöntem 2: <body> İçine Script Ekleme​

Yöntem 3: Ayrı Bir JavaScript Dosyasıyla Çalışmak​

Gerçek Hayatta Kullanılan Kodlar​

1. Basit Karanlık Mod Geçişi​

2. Temel Form Doğrulama​

En İyi Uygulamalar​

Yaygın Sorunlar ve Çözüm Yöntemleri​

Sonuç​