JavaScript nedir?

Ders 04: JavaScript Nedir? Web Sayfasında Nasıl Kullanılır?

CSS Eğitim & Dersler HTML Programlama

Tekrar merhabalar, 4. video dersimiz ile birlikteyiz.
Bugünkü dersimizde JavaScript’i tanıyacağız. Nerede, neden kullanılır, ne işe yarar, belli başlı kullanım örnekleri gibi konular üzerine konuşacağız.

Tüm bunlara değinmeden önce kısaca JavaScript dilini tanımakta fayda var.

JavaScript’i Netscape firması geliştirdi ve ilk adı LiveScript idi. Sonrasında geçirdiği evrimlerle adı JavaScript oldu.

Bu isim meşhur bir yanılgıya sebep olmaktadır. Bu yanılgıya sebebiyet vermemek için baştan uyarmakta fayda var ki: JavaScript dilinin JAVA programlama dili ile ilgisi yoktur, JAVA’nın alt kolu falan da değildir !

Tabanı C diline dayanmaktadır. Bu yüzden söz dizimleri ve betik yazımları C diline benzemektedir.

İstemci (client/klaynt) taraflıdır. Yani sitede bulunan bir JavaScript kod parçacığı ya da dosyası bilgisayarınıza ulaştıktan sonra tarayıcı tarafından yorumlanır ve yapılacak işlemler ya da eylemler sıralanır.

Ancak burada bir parantez açmakta fayda var. JavaScript Runtime dediğimiz platformun gelişmesiyle sunucu taraflı olarak da JavaScript kullanılmaya başlamıştır. En bilinen JavaScript Runtime Node.js tabanlı sistemlerdir. Bu sistemlere geçen meşhur şirketlere PayPal ve LinkedIn örnek verilebilir.
Günümüzde sunucu taraflı JavaScript kullanımı ile 20 kat daha hızlı çalışan sistemlerden bahsedilmektedir.

Biz burada JavaScript’in istemci taraflı -yani tarayıcıyı ilgilendiren kısmı- üzerinde duracağız.

JavaScript cookie işlemleri dışında dosya yazma ya da okuma gibi işler için kullanılmaz. Bilgisayara yönelik eylemlerden uzaktır. Sayfa içi işlemlerin
hızlanması, görsellerin animasyonlarla zenginleştirilmesi, web olayları diye tabir edilen tıklama, değiştirme, fokuslama, ayrılma ve daha birçok event hakkında kontrol ve denetim sağlar. Örneğin bir web butonuna basıldığında hangi işlemlerin tetikleneceği JavaScript click olayı ile takip edilebilirken, bir yazı kutusuna/ yazı alanına (text input) yazı girmek üzere tıklandığında fokus olayı devreye girer. “Focus event” gerçekleştiğinde yapılacak işlemleri yine JavaScript ile belirleriz.

Web sayfası içerisinde kullanımı <head> …..</head> etiketleri arasına yazılabileceği gibi, zamanla gelişim süreciyle <body>….. </body> etiketleri arasına da <script> …. </script> etiket bloğu ile gömülerek gerçekleşmektedir.
Ya da sadece <script> etiket bloğuna src (soörs/source-kaynak) parametresi ile JS uzantılı JavaScript dosyamızın yolunu belirtmek suretiyle de kullanabiliriz.
Genelde kod düzeni açısından bu ikinci yöntem, yani kaynak belirterek JavaScript’i dışarıdan çağırma yolu tercih edilir.

Her iki şekilde de kullanımını örneklerle açıklayacağız.

Öncelikle JavaScript ders takibini yaparken bilgisayardan uygulamalı şekilde çalışmanızı ve F12 tuşu ile Google Chrome ya da Internet Explorer gibi tarayıcılardan geliştirme araçlarını açmanızı tavsiye ederim.
Geliştirme araçları sekmelerinden olan konsol (console) bize JavaScript yazımında bir takım kolaylıklar sağlayacaktır. Konsol penceresinde olası hataları görebileceğimiz gibi console.log() fonksiyonu ile yazdıracağımız bilgileri takip etmemiz de kolay olacaktır.

Konsoldan önceki sekmede (Elements) DOM nesnelerini görüp inceleyebiliriz.
HTML etiket ağacında alt alta sıralanmış olan her bir etiket DOM nesnesi olarak adlandırılır. Yani ilgili web dokümanı içerisinde yer alan her nesne DOM nesnesidir.
JavaScript ile DOM nesnelerine müdahale edilebilir, içeriği değiştirilebilir.
Kodlarımıza gelirsek … Önce çalışmalarımızı kaydettiğimiz dizine javascript.html adında bir dosya oluşturalım.

javascript.html dosyası içeriği:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript İlk Çalışmamız</title>
    <script src="js/jstest.js"></script>
</head>

<body>
    <button id="butonum">TIKLAYIN</button><br>
    <div id="sonucgoster">Sonuç burada görünecek</div>
    <div id="yasdurumu" style="color:brown; font-weight: bold;"></div>
</body>

</html>

9. satırda görüldüğü gibi jstest.js adında bir javascript dosyamız olacak ve bu dosya js/ dizininde olacak. O yüzden çalışma alanımızda Visual Studio Code editörümüzün soldaki panelin üst butonlarından js isimli bir klasör (new folder) oluşturalım.
Ardından bu js klasörüne sağ tuşla tıklayıp New File yolu ile yeni bir dosya oluşturalım ve adını jstest.js şeklinde verelim.
İçerisine aşağıdaki kodları kopyalayalım.

jstest.js dosyası içeriği:

window.onload = function () {
    // alert("Pencere içeriği yüklendi");
    var btn = document.getElementById("butonum");

    btn.onclick = function () {
        console.log("Butona tıklandı");
        var snc = document.getElementById("sonucgoster");
        snc.style.color = 'red';
        snc.innerHTML = 'Butona tıkladınız !';

        var yas = 18;
        if (yas < 18) {
            console.log("Reşit değilsiniz");
        } else {
            console.log("Tebrikler! Ehliyet alabilirsiniz.");
        }


    }

    for (i = 0; i < 10; i++) {
        console.log("Şimdiki sayımız: " + i);
    }
}

Şimdi yukarıdaki kodlarda bulunanları incelemeye alalım.

window.onload şeklinde bir olayımız (event) var. Bu event, pencere yüklendiği zaman gerçekleşmesini istediğimiz işlemleri tanımlamamızda kullanılır.
Kodlar içerisinde çalışmasını istemediğimiz kısımların başına çift slash koyarız. Bu yüzden “pencere içeriği yüklendi” yazan satırdaki sayfa bildirimi çalışmayacaktır.

var btn = document.getElementById(“butonum”); buradaki “var” sözcüğü variable kelimesinden gelir ve “değişken” anlamını taşır. Bu değişene dokümanımızdaki butonum kimlikli (ID’li) nesneyi atadık. Bundan sonra btn elemanını kullanarak butonum kimlikli eleman üzerinde istediğimiz değişiklikleri yapabileceğiz.

btn.onclick = function () { kısmı ile “butonum kimlikli nesneye tıklayınca” yani click olayı gerçekleşince yapılmasını istediğimiz eylemleri sıralamaya başladık. Buton tıklandığında çalışacak olan console.log(“Butona tıklandı”); ile konsolumuza “Butona tıklandı” yazısı gelecek.

Yine başka bir elemanımız olan “sonucgoster” kimlikli div’i yönetmek için aşağıdaki kodları yazdık.

var snc = document.getElementById("sonucgoster");
        snc.style.color = 'red';
        snc.innerHTML = 'Butona tıkladınız !';

Önce elemanı buldurup snc adlı bir değişkene atadık. İkinci satırda (normalde siyah olan) yazı rengini kırmızıya çevirmesini ve bu div içerisine “Butona tıkladınız !” yazısının getirilmesini istedik.

Yine butona tıklandığında çalışmak üzere aşağıdaki kodları yazdık:

var yas = 18;
        if (yas < 18) {
            console.log("Reşit değilsiniz");
        } else {
            console.log("Tebrikler! Ehliyet alabilirsiniz.");
        }

Burada yas (yaş) adında bir değişken (variable) tanımladık ve değerini 18 olarak verdik. Ve bir şarta göre konsola yazı yazılmasını istedik. Eğer girilen yaş 18’den küçük ise konsola “Reşit değilsiniz” yazısını, aksi halde (18 veya daha büyük ise) konsola bir tebrik mesajı yazmasını sağladık. Bizim yas değişkenimiz 18 olduğu için konsolumuza tebrik mesajı düşecektir.

Artık butonun onclick olayından çıkarak, window.onload içerisine girdik ve şunları yazdık:

for (i = 0; i < 10; i++) {
        console.log("Şimdiki sayımız: " + i);
    }

Burada for döngüsü kullandık ve dedik ki:
Bir değişken ata, adı “i” olsun. i sıfırdan başlasın, 10 sayısıdan küçük olmak şartıyla birer birer artırılsın. Konsola da ilgili sayı yazılsın. Bu durumda konsolumuzdan aşağıdaki gibi bir çıktı edindik:

Şimdiki sayımız: 0
Şimdiki sayımız: 1
Şimdiki sayımız: 2
Şimdiki sayımız: 3
Şimdiki sayımız: 4
Şimdiki sayımız: 5
Şimdiki sayımız: 6
Şimdiki sayımız: 7
Şimdiki sayımız: 8
Şimdiki sayımız: 9

Bu şekilde for döngüsüne de el atmış olduk. Video içerisinde bazı çalışmayacak javascript betikleri de yazdık ve peşin olarak neden çalışmayacağını anlattık. Bunun için özetle şunu diyebiliriz ki: Ya sayfanın yüklenme sıralamasına dikkat ederek Javascript kullanacağız ya da window.onload gibi event kullanımıyla tüm yükleme tamamlandığında nesneler üzerinde işlem yapacağız. Aksi halde tanımsızlık (undefined), tip hatası (TypeError) gibi hatalar almamız kaçınılmazdır.

Bu derslik de bu kadar. Sonraki derste görüşmek üzere !

Sorularınız varsa aşağıdaki Disqus yorum bölümüne bırakabilirsiniz. Facebook, Google, Twittter gibi hesaplarınızdan giriş yaparak, ekstra bir üyelik gerektirmeden yorumlarınızı ya da sorularınızı ekleyebilirsiniz.