JavaScript’i Çalıştırma – Tarayıcı konsolu, iç ve dış dosya kullanımı

Peki, JavaScript kodlarımızı nasıl çalıştıracağız? İşte bugünkü konumuz tam olarak bu! JavaScript’i Çalıştırma – Tarayıcı konsolu, iç ve dış dosya kullanımı - JS Nasıl çalıştırılır. - Html de JS kullanımı - Dahili kodlama - Harici Kodlama

Bu derse başlamak veya ilerlemenizi kaydetmek için lütfen giriş yapın veya kayıt olun.

Ders İçeriği

İlk JavaScript Kodunuzu Çalıştırma

JavaScript kodunu çalıştırmanın en kolay yollarından biri, tarayıcı konsolunu kullanmaktır. Hemen deneyelim:

Tarayıcı Konsolunu Açma

  • Chrome/Edge: F12 tuşuna basın veya sağ tıklayıp "İncele" seçeneğini seçin, ardından "Console" sekmesine tıklayın
  • Firefox: F12 tuşuna basın veya sağ tıklayıp "Öğeyi İncele" seçeneğini seçin, ardından "Console" sekmesine tıklayın
  • Safari: Önce Geliştirici Menüsünü etkinleştirin (Tercihler > Gelişmiş > "Menü çubuğunda Geliştir menüsünü göster"), ardından Geliştir > JavaScript Konsolunu Göster'i seçin

Basit JavaScript Komutları

Konsol açıldıktan sonra, aşağıdaki komutları yazıp Enter tuşuna basarak çalıştırabilirsiniz:

Tarayıcı Konsolu
// Konsola mesaj yazdırma
console.log("Merhaba, Dünya!");

// Basit bir matematik işlemi
console.log(5 + 10);

// Bir değişken tanımlama ve kullanma
let isim = "JavaScript";
console.log("Merhaba, " + isim + "!");

// Bir uyarı mesajı gösterme
alert("Bu bir uyarı mesajıdır!");

HTML Sayfasına JavaScript Ekleme Yöntemleri

JavaScript kodunu HTML sayfasına eklemek için üç farklı yöntem vardır:

1. Satır İçi (Inline) JavaScript

HTML elementlerinin olay özniteliklerinde doğrudan JavaScript kodu yazabilirsiniz:

HTML
<button onclick="alert('Butona tıklandı!')">Bana Tıkla</button>

2. Dahili (Internal) JavaScript

HTML belgesinin içinde <script> etiketi kullanarak JavaScript kodu yazabilirsiniz:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Dahili JavaScript Örneği</title>
</head>
<body>
    <h1 id="baslik">Merhaba, Dünya!</h1>
    <button id="degistir">Metni Değiştir</button>
    
    <script>
        // Butona tıklandığında başlık metnini değiştir
        document.getElementById("degistir").onclick = function() {
            document.getElementById("baslik").textContent = "JavaScript ile Değiştirildi!";
        };
    </script>
</body>
</html>

3. Harici (External) JavaScript

JavaScript kodunu ayrı bir .js dosyasında yazıp HTML belgesine dahil edebilirsiniz:

HTML (index.html)
<!DOCTYPE html>
<html>
<head>
    <title>Harici JavaScript Örneği</title>
    <!-- Harici JavaScript dosyasını dahil etme -->
    <script src="script.js"></script>
</head>
<body>
    <h1 id="baslik">Merhaba, Dünya!</h1>
    <button id="degistir">Metni Değiştir</button>
</body>
</html>
JavaScript (script.js)
// Sayfa yüklendiğinde çalışacak kod
window.onload = function() {
    // Butona tıklandığında başlık metnini değiştir
    document.getElementById("degistir").onclick = function() {
        document.getElementById("baslik").textContent = "JavaScript ile Değiştirildi!";
    };
};

İpucu: Harici JavaScript dosyaları kullanmak, aşağıdaki avantajları sağlar:

  • HTML ve JavaScript kodunu ayrı tutarak daha düzenli bir kod yapısı oluşturur
  • Tarayıcı, JavaScript dosyasını önbelleğe alarak sayfanın daha hızlı yüklenmesini sağlar
  • Aynı JavaScript dosyasını birden fazla HTML sayfasında kullanabilirsiniz

Script Etiketinin Yerleşimi

JavaScript kodunun yerleşimi önemlidir. Genellikle iki yaklaşım vardır:

  1. <head> içinde: Sayfa yüklenmeden önce JavaScript kodu yüklenir, ancak DOM elementlerine erişmek için ek kontroller gerekebilir.
  2. <body> sonunda: Tüm HTML içeriği yüklendikten sonra JavaScript kodu yüklenir, böylece DOM elementlerine doğrudan erişilebilir.

Uyarı: JavaScript kodu, HTML belgesinde kendisinden önce tanımlanan elementlere erişebilir, ancak kendisinden sonra tanımlanan elementlere doğrudan erişemez. Bu nedenle, genellikle JavaScript kodunu <body> etiketinin sonuna yerleştirmek veya window.onload olayını kullanmak iyi bir uygulamadır.

Bu derste şunları öğrendik:

  • Tarayıcı konsolunu kullanarak basit JavaScript kodları çalıştırabilirsiniz
  • HTML sayfasına JavaScript eklemek için satır içi, dahili ve harici olmak üzere üç farklı yöntem vardır

Bir sonraki derste, JavaScript'te değişkenler ve veri tipleri konusunu inceleyeceğiz.

JavaScript'e Giriş Değişkenler ve Veri Türleri