Javascript’te İleri Konular

Bu ünitede Javascript dili ile yapılabilecek ileri düzey işlemler için gerekli konular ele alınmıştır. Bunlar metin (string) işlemler, döngüler, fonksiyonlar, olaylar, DOM hiyerarşisi ve Window nesnesinin özellikleridir.

Metin İşlemleri

Metin tür değerler (string) karakter dizileri şeklinde hafızada tutulur. Metinlerin her bir karakterine o karakterin indis numarası ile ulaşılabilir. İndis numarası 0'dan başlar. Metnin karakter sayısı ise length özelliği ile elde dilir. Bunun dışında metin üzerinde yapılacabilecek işlemler hazır fonksiyonlar ile yapılr.

Döngü Komutları

Döngüler aynı işlemin birden fazla yapılması gerektiğinde komutların blok halinde yazılıp döngü komutu ile kaç kez tekrarlanmasının belirlendiği yapılardır. For, while ve do-while olmak üzere 3 farklı döngü komutu ile işlemler yapılabilir. Dizilerin elemanlarına ulaşmak için genellikler for döngüsü kullanılır.

Fonksiyonlar

Fonksiyonlar, birbiri ile ilgili olduğu düşünülen komutların gruplanarak tek bir komut benzeri yapılar içerisinde saklanmasını sağlayan yapılardır. Fonksiyonlar öncelikle tanımlanır. Tanımlamada fonksiyon ismi ve istenirse parametreleri yazılır. Küme parantezleri içerisisinde ise çalıştırılmak istenen komutlar yazılır. Fonksiyonlar bu yolla tanımlandıkları yerde ve zamanda değil, daha sonra çağırıldıkları zaman çalışır. Çağırılırken fonksiyon adı ve varsa parameterleri (argümanı) yazılır.

Eğer fonksiyon işlem sonucunda bir değer üretip bunu çağırıldığı noktaya geri döndürmek üzere tanımlanırsa, fonksiyon bloğu içinde bu değer return kelimesi ile yazılmalıdır.

Fonksiyonlar ya çağırıldıkları zaman, ya bir olay gerçekleştiğinde, ya da özel biçimde tanımlanarak tanımlandıkları anda çalışabilirler.

Parametreler fonksiyon içinde dğişirse bu çağırçağırıldıkları yere yansımaz. Dizi veya nesne türündeki parametreler ise buna istisna olarak fonksiyn içinde değişrlerse çağırıldıkları yerde de değişir.

Olaylar

Tüm HTML etiketlerinin kullanıcının bir takım hareketlerini veya sayfanın yüklenme zzamanı algılayıp cevap verebileceği olayları (events) vardır. Bu olaylar farklı etiketler için farklı sayıda ve isimdedir. Bu olaylara eğer bir Javascript komutu ya da fonksiyonu yazılırsa, olay gerçekleştiğinde bu komut ya da fonksiyon çalıştırılır.

En çok kullanılan olaylar onclick, onmouseover, onload olaylarıdır .

DOM ile Programlama

HTML sayfaları yüklendiğinde, tarayıcılar sayfadaki tüm elemanları (HTML etiketlerini) document ismindeki bir nesnenin alt nesneleri olarak belirler. Bu hiyerarşi sayesinde HTML sayfasındaki tüm etiketlerin içeriği, özellikleri, CSS stilleri ve alt etiketleri değiştirilebilir. Bu hiyerarşik yapıya Document Object Model (DOM) denir.

DOM ile Elemanlara Erişim

Tarayıcı tarafından yaratılan ilk nesne document nesnesidir. HTML sayfasındaki diğer etiketler (elemanlar) bu nesnenin alt elemanları olarak hafızada tutulur. Bu hiyerarşide herhangi bir etikete erişmek istenirse öncelikle o etiketin “id” özelliğine bir isim verilmeli, sonrasında document.getElementById() metodu ile o elemana erişim sağlanabilir.

GetElementById() metodu ile erişilen elemanın kendine has özellik ve metotları vardır. Bu metot ve özelliker Javascript ile değiştirilebilir.

InnerHTML ve InnerText Özellikleri

Bir HTML elemanının açılış ve kapanış etiketlerinin arasına yeni HTML etiketleri eklemek isterseniz ya da var olan HTML etiketlerini değiştirmek isterseniz, innerHTML özelliğini kullanınız. Öte taraftan eğer bir HTML elemanının açılış ve kapanış etiketleri arasına metin eklemek ya da var olan metni değiştirmek isterseniz, innerText özelliğini kullanınız.

DOM Elemanlarının Özellik ve Stillerini Değiştirmek

HTML etiketlerinin özellik ( attribute ) ve stil öğelerini ( style ) Javascript ile aşağıdaki gibi değiştirebilirseniz. document.getElementById("resim").style.border="1px solid black"; document.getElementById("resim").className="kucukResimSinifi";

Window Nesnesi

Tarayıcı ve var olan web sayfası hakkında bilgi almak, kullanıcıya tarayıcı içersinde mesajlar vermek ve kimi zamanda kullanıcıdan kısa bilgiler almak için window nesnesinin alt nesneleri ve metotları kullanılır.

Window.open() metodu ile aılır pencereler açılabilir.