JavaScript Nedir? Tarayıcıda İlk Kodunuzu Yazın

JavaScript, web sayfalarına etkileşim kazandıran programlama dilidir. HTML yapıyı, CSS görünümü belirler; JavaScript ise sayfanın davranışını yönetir. Bir düğmeye basınca menünün açılması, formdaki hataların anında gösterilmesi ya da sayfa yenilenmeden verinin güncellenmesi JavaScript ile yapılır. Java ile yalnızca ad benzerliği vardır, iki ayrı dildir.

JavaScript Nerede Çalışır?

Tarayıcılar JavaScript’i doğrudan çalıştırır, yani ayrıca bir kurulum gerekmez. Node.js ile sunucu tarafında da kullanılabilir. Bu yazıda tarayıcı tarafına odaklanıyoruz.

İlk Kodunuz

Tarayıcıda herhangi bir sayfada F12 tuşuna basın ve Konsol (Console) sekmesini açın. Şunu yazıp Enter’a basın:

console.log("Merhaba Dünya");

Konsolda yazıyı görürsünüz. console.log() hata ayıklamada en çok kullanılan komuttur.

Sayfaya JavaScript Eklemek

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JS Deneme</title>
</head>
<body>
    <button id="dugme">Tıkla</button>
    <p id="mesaj"></p>

    <script>
        document.getElementById("dugme").addEventListener("click", function () {
            document.getElementById("mesaj").textContent = "Düğmeye tıkladınız!";
        });
    </script>
</body>
</html>

Kodun anlamı şöyledir: getElementById ile id değeri belirli öğe seçilir. addEventListener ile o öğeye bir olay dinleyicisi eklenir. Düğmeye tıklanınca (click) fonksiyon çalışır ve paragrafın metni değişir. HTML sayfasındaki öğelere bu şekilde erişmeye DOM (Document Object Model) üzerinden erişim denir.

Değişkenler

Modern JavaScript’te iki ana tanım yöntemi vardır:

let sayac = 0;
const site = "yunuskaytan.com";

• let sonradan değeri değişebilen değişkenler içindir.
• const değeri değişmeyecek sabitler içindir.

Eski kodlarda var görebilirsiniz ancak yeni yazılan kodlarda genellikle tercih edilmez.

Veri Türleri

let metin = "Merhaba";
let sayi = 42;
let dogruMu = true;
let liste = ["elma", "armut", "kiraz"];
let kisi = { ad: "Yunus", yas: 30 };

Fonksiyonlar

function topla(a, b) {
    return a + b;
}

console.log(topla(3, 4));

Bu kod 7 yazar. Aynı işi kısaca ok fonksiyonu ile de yazabilirsiniz:

const topla = (a, b) => a + b;

Koşul ve Döngü

let puan = 72;

if (puan >= 50) {
    console.log("Geçtiniz");
} else {
    console.log("Kaldınız");
}

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Sık Yapılan Hatalar

• == ile === karıştırmak. === hem değeri hem türü karşılaştırır ve genellikle tercih edilmelidir.
• Script’i, seçmeye çalıştığı öğeden önce yüklemek. Bu durumda öğe henüz bulunmadığı için hata alırsınız. <script> etiketini body sonuna koymak bunu çözer.
• Konsoldaki kırmızı hata mesajlarını okumamak. Mesaj çoğu zaman satır numarasını da söyler.

Sonraki Adımlar

Sırasıyla diziler ve nesneler, DOM işlemleri, olaylar, form doğrulama, fetch ile veri çekme ve sonra Node.js konularına geçebilirsiniz.