Eğer web tasarımı ile ilgileniyorsanız javascript kütüphanelerini duymuş ve hatta kullanmışsınızdır. Jquery, prototype, mootools ve dojo bunların en meşhur olanlarıdır. Bu kütüphaneler ile çok güzel ve gelişmiş js yazılımları yapabileceğimiz gibi javascript işlemlerinde bize bir çok kolaylık sağlamaktadırlar. Ancak birçok kişi, sadece bir kaç div’i açıp kapatmak için 100-150Kb’lık kütüphaneleri sayfalarına ekleyerek, sadece performans kaybına uğramaktadır. Javasript bilgimiz çok ileri seviyede olamasa bile, basit işlemlerimizi kapsayacak bir kütüphane yazmak en fazla yarım saatimizi alacaktır. Tabii ki biz geliştikçe paralel olarak kütüphanemizde gelişecektir.

Şimdi kendi ihtiyaçlarımız doğrultusunda basit bir js kütüphanesi yazmaya başlayalım.

Kütüphanemizdeki en temel öğe doğal olarak bir DOM referansı olan document.getElementById‘dır. Bir çok js işleminde ihtiyaç duyduğumuz bu referansa en kolay ve akılda kalıcı şekilde nasıl ulaşabiliriz? PHP ve Js Kütüphanesi kullananlarımızın alışkın olduğu $ ile ulaşalım. O zaman kütüphanemizin ilk fonksiyonunu yazalım ;

function $(id)//buradada parametre olarak idyi kullanıyoruz
{
      return document.getElementById(id);
}


Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Birinci fonksiyonumuzu oluşturduk. Bu fonksiyonu kullandıkça çok seveceğinize eminim. Çünkü işlerimizi çok kolaylaştırıyor.

İkinci fonksiyonumuz olan $v, id’sini verdiğimiz bir tag’ın (input,select,textarea tagları) value’sunu döndürecek bize.

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Burada dikkat çekmek istediğim bir nokta var. Bu fonksiyon ile tagların sadece değerlerini alabiliyoruz. Yani bir inputun değerini değiştirmek için şu kodu yazarsak çalışmayacaktır :

$v('id') = 'yenideğer';

Bu işlemi gören bir fonksiyonu, az önce yazdığımız $ fonksiyonundan türetebiliriz :

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Üçüncü fonksiyonumuz olan $cssC, önceki fonksiyonlara göre daha komplike bir yapıya sahip olacak. Bu fonksiyonumuza 3 parametre yollayarak istediğimiz HTML etiketi üzerinde CSS değişikliklerini gerçekleştireceğiz. Bu fonksiyonumuzda paramaetre sayımız fazla olduğu için öncelikle parametrelerimizi açıklayalım ;

id : Üzerinde değişiklik yapmak istediğimiz etiketimizin tanımlayıcı değeri.
tag : Etiketimizin üzerinde değişiklik yapmak istediğimiz CSS etiketini temsil ediyor.
yenideger : CSS etiketinin alacağı yeni değeri temsil ediyor.

Fonksiyonumuz aşağıdaki gibi ;

function $cssC(id,tag,yenideger)
{
satir = '$(id).style.'+tag+' = yenideger'; //fonksiyonumuzu satir adlı bir degisken atıyoruz
eval(satir); //eval ile satir değişkenini çalıştırıyoruz ve fonksiyonumuz görevini yerine getiriyoruz
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Başlangıç olarak 3 fonksiyon tanımlamış bulunmaktayız. Bir sonraki yazımızda fonksiyonlarımızı biraz daha komplike hala getirerek devam etmek dileğiyle.

Benzer Yazılar