kodaman.org

Web sayfaları geliştiren tüm heskesin bildiği gibi, projelerimizde inline (yani sayfa içinde) çeşitli scriptler yazabileceğimiz gibi, scriptleri (yani çalışan program parçacıklarını) bir başka dosya (veya dosyalar) içinde tutup ön sayfalara referans kodlarıyla dahil ederek, html kodlarımızda sadeliği (ve iş bölümünde kolaylığı) arttırmış oluyoruz.

Aşağıda yapacağımız çalışma için bize jQuery isimli javascript kütüphanesi gerekmektedir. Çünkü bu kütüphane AJAX işlemlerini kolay bir şekilde halledebiliyor. Gelin şimdi bu kütüphaneyi standart yollardan sayfamıza dahil edilecek örneği verelim. Böylece hem istemci taraflı tasarıma yeni başlamış arkadaşlarımıza include (dahil etme) için örnek oluşturalım hem de normal yollardan bir scriptin ne şekilde sayfaya dahil edildiğine yeniden bakmış olalım. Bu şekilde aşağılarda anlatacağımız gibi standardın dışına çıkarak web sayfalarımıza başka yollardan script dosyalarını dinamik bir şekilde yüklediğimizde meydana getirdiğimiz farklılığı gözler önüne sermiş olacağız.

Mesela artık bir düğmeye tıkladıktan sonra, istediğimiz bir script dosyasını sunucudan yükletebileceğiz! Ama normal yollardan include işlemi aşağıdaki gibi yapılır ve sayfamız yüklendiği anda referans edilen script gerekli yerden talep edilip o da yüklenir. Yani bir düğmeye tıklayayım da sonra scriptler gelsin (ya da benim özel bir scriptim var onu ben istediğim gibi yükleyebileyim) şansınız html'de yok!

1

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

Şimdi de dinamik yüklenen bir script örneği verelim.

1
2
3
4
5
6
7

<script>
$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});
</script>

Bu kodun çalışabilmesi için jQuery'nin son sürümünü web sitesinden indirmiş olmanız ve ilk verdiğimiz kod ile sayfanıza dahil etmiş olmanız gerekiyor.

• jQuery'nin ajax sınıfına eriÅŸtik ve GET metoduyla bir dosya isteÄŸinde bulunduk
• url kısmına yüklemek istediÄŸimiz javascript dosyasının adresini yazdık
• dataType kısmında ise jQuery'e dedik ki; "biz bir dosya istedik ama bak bu istediÄŸimiz dosya bir javascript dosyasıdır. İçeriÄŸinde çalışabilir programcıklar bulunmaktadır. Bu yüzden bu dosyamıza özel ihtimam göster. Gerekeni yap!"

Hepsi bu kadar. Peki bu "gerekeni yap" ne demek oluyor? javascriptte güzel bir fonksiyon bulunuyor. Bu fonksiyon tarayıcı (browser) içine gömülmüş, hazır olarak gelmektedir. ismi "eval". Bir örnek verelim ve çalışma mantığını anlayalım.

1
2
3
4

<script>
var yazi = "alert('deneme 1 2 3')";
eval(yazi);
</script>

Hemen altında ise yazi değişkenini eval fonksiyonundan geçirdiğimiz anda artık alert("deneme 1 2 3") ifadesi bir program koduna döüştürüldü ve çalıştırıldı (execute işlemi).

jQuery'nin de yaptığı eval fonksiyonun cilalayıp kullanmaktı aslında. Önce AJAX ile script sunucudan alındı, sonra alınan metinsel ifadeler (string) eval'den geçirildi.

Mesela bir script dosyasının yüklenmesini ziyaretçinin bir düğmeye basmasına bağlamanız artık mümkün. Diyelim ki web sayfanızda id parametresi "secim" olan bir düğme bulunsun;

1
2
3
4
5
6
7
8
9

<script>
$("#secim").click(function(){
  $.ajax({
    type: "GET",
    url: "test.js",
    dataType: "script"
  });
});
</script>

Umuyorum ki faydalı bilgiler vermiş olduk. Güzel projelerde kullanmanız dileğiyle...

1. jQuery ile Kolay AJAX Uygulamaları Üretin
2. jQuery ile Çeşitli Efektleri Kullanın
3. Nesne Yönelimli Javascript Uygulamaları
4. JSON TekniÄŸi ve Javascript ile iliÅŸkisi..
5. javascript ile Sinema Tarzında Efekt Yapalım
6. JavaScript ile Animasyon Ãœretme TekniÄŸi