Javascript Nedir?

Javascript web de kullanılan bir programlama (betik) dilidir. Web tarayıcıları üzerinde çalışırlar ki tarayıcı haricinde herhangi bir yorumlayıcıya ihtiyaç duymazlar. sitelerde kullanılan nesnelerin ve verilerin dinamik (hareketli) hale getirilmesinde faydalanılan bir dildir.

Bu yazımda sizlere javascriptin ne olduğunu, sayfaya nasıl eklendiğini ve ilk javascript kodumuzu nasıl yazacağımızı anlatacağım.

Burada hemen bir konuyu açalım. İsminden dolayı çoğu kişi javascripti java dilinin bir parçası sanıyor. Ama ikisinin isim benzerliği dışında pek bir alakası yok, tamamen farklı dillerdir.

tarayıcıda çalışmak ne demek?

php gibi diller sunucuda çalışır ve sonucu html olarak tarayıcıya gönderir. javascript ise sayfa kullanıcının bilgisayarına geldikten sonra tarayıcının içinde çalışır. İşte bu yüzden sayfayı yenilemeden sayfadaki bir yazıyı değiştirebiliyor, bir kutuyu gizleyip gösterebiliyor yada formu göndermeden önce alanların dolu olup olmadığını kontrol edebiliyoruz.

javascript sayfaya nasıl eklenir?

javascript kodlarını iki şekilde sayfaya ekleyebiliriz. birincisi sayfanın içinde script etiketleri arasına yazmak,

<script>
alert("Merhaba");
</script>

ikincisi ise kodları .js uzantılı ayrı bir dosyaya yazıp bu dosyayı sayfaya dahil etmek.

<script src="kodlarim.js"></script>

css de olduğu gibi burada da ayrı dosya kullanmak daha mantıklı çünkü aynı kodları birden fazla sayfada kullanabiliyorsunuz. script etiketini de genelde body etiketi kapanmadan hemen önce yazıyoruz ki sayfadaki etiketler yüklenmeden javascript çalışmaya başlamasın.

ilk javascript kodumuz

Şimdi butona her tıkladığımızda kaç kez tıklandığını ekrana yazan küçük bir örnek yapalım.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>ilk javascript kodum</title>
</head>
<body>

<p id="yazi">Butona henüz tıklanmadı.</p>
<button onclick="tikla()">Tıkla</button>

<script>
var sayac = 0;

function tikla() {
    sayac++;
    document.getElementById("yazi").innerHTML = "Butona " + sayac + " kez tıklandı.";
}
</script>

</body>
</html>

kodların açıklamasını yapacak olursak,

sayfada id değeri yazi olan bir paragraf ve bir buton var. butonun onclick özelliğine tikla() yazdık, yani butona tıklandığında tikla() fonksiyonu çalışacak. script etiketi içinde önce sayac isimli bir değişken tanımladık ve değerini 0 yaptık. tikla() fonksiyonu her çalıştığında sayac++ ile değişkenin değerini bir arttırıyor, document.getElementById("yazi") ile de paragrafı bulup içindeki yazıyı değiştiriyor.

dosyayı kaydedip tarayıcıda açın ve butona birkaç kez tıklayın. Sayfa hiç yenilenmeden yazının değiştiğini göreceksiniz. İşte javascriptin bize sağladığı şey tam olarak bu.

javascript konsolu

Yazdığınız kodları denemek için ayrıca bir dosya oluşturmanıza da gerek yok. Tarayıcıda F12 tuşuna basıp açılan pencerede Console sekmesine geçin. Buraya javascript kodu yazıp Enter'a bastığınızda kod hemen çalışır.

console.log("Merhaba");

Kodunuz çalışmıyorsa da ilk bakacağınız yer burası olsun. Sayfa size hiçbir şey söylemez ama konsolda hatanın ne olduğunu ve hangi satırda olduğunu yazan kırmızı bir mesaj görürsünüz.

javascriptin html ve css ile birlikte nasıl çalıştığını merak ediyorsanız Html, CSS ve Javascript kavramları ve birbirleri ile ilişkileri yazıma göz atabilirsiniz.