Turning gears are the logo of co-scripts

Sayfamızdaki herhangi bir metnin rengini belirlenen aralıklarla iki renk arasında değiştirerek yanıp sönme etkisi yaratır. .color özelliği taşıyan her elemente uygulanabilir.

Orjinal fonksiyon google closure ile derlenerek (sadeleştirilerek) kullanıma sunulmuştur. GoogleClosure online derleyicisine şu adresten ulaşabilirsiniz.

function yanSon(a,b,c,d){var e=document.getElementById(a);e.style.color=e.style.color==b?c:b;a=window.setTimeout("yanSon('"+a+"','"+b+"','"+c+"',"+d+")",d)};

Fonksiyonun çağırılması body'nin onload olayına yada sayfada en sonda bir yere doğrudan fonksiyon adı eklenerek yapılabilir.

yanSon('bizimElement','white','black',800);
//birinci parametre elementin id'si, ikinci ilk renk, üçüncü ikinci renk, dördüncü parametre
//ise fonksiyonun (renk değişiminin) hangi milisaniyede birkez tekrarlanacağını gösteren değer

Bu mini kodu da istediğiniz gibi kullanabilirsiniz.

co-scripts tag image googleclosureclosuresettimeoutyanson functionstyle.color
ID:210 | Okunma:1922


 

Ajax web sayfalarında sunucudan veri çekebilmek için kullandığımız, temelde tek bir objeye dayalı bir teknik. Ancak ajaxtan daha orjinal olan her versiyonda yetenekleri artan javascript. Uygulamalardaki taleplerimiz arttıkça daha derin javascript bilgisine ihtiyaç duyuyoruz. 

Bu yazıda ajax kullanarak closure ile veri çekme ve ilgili fonksiyona devretme üzerine bir örnek vereceğim. Web uygulamamızda bir tetikleyici bir fonksiyonu çağırır ve herşey başlar.Örneğimizde: yeniSiteEkle() fonksiyonu çağrılıyor. Örnekteki parametreler kendilerini açıklıyorlar.

function goster(gelenVeri){alert(gelenVeri.cevapMetin);}

function yeniSiteEkle()
{
var listeTasiyici = nY('listetasiyiciSpan');
var url = 'jobs.asp?job=test';
var target = 'durum';
ajax_job(url,target,imgJob,goster);
}

Tabi daha önce yazılan ajax içeren fonksiyonda şu şekilde:

function ajax_job(sorgulanacakUrl,geciciMesajHedefNesnesi,geciciMesaj,isleyiciFonksiyon)
{
	var gM = document.getElementById(geciciMesajHedefNesnesi);
    gM.innerHTML = geciciMesaj;
    // doğal XMLHttpRequest nesnesi kontrolü, yoksa Activex (windows) üzerinden gidilecek
    if (window.XMLHttpRequest){req = new XMLHttpRequest();}else if(window.ActiveXObject){req = new ActiveXObject("Microsoft.XMLHTTP");}
        if (req)
			{
            req.onreadystatechange = function(){var dondurulenler = evetOldu(); isleyiciFonksiyon(dondurulenler); gM.innerHTML='' }
            req.open("GET", sorgulanacakUrl, true);
            req.send();
			}
 }    

function evetOldu() {
	var durumKod,durumMetin,cevapMetin;
    // Eğer req yüklendiyse
    if (req.readyState == 4) {
        // req durumu "OK" ise kodu 200
        if (req.status == 200) {
			return {durumKod:req.status, durumMetin: req.statusText, cevapMetin:req.responseText}
        } else {
			return {durumKod:req.status, durumMetin: req.statusText, cevapMetin:req.responseText}
        }
    }
}

Burada ajax gerekli requesti yaptıktan sonra dönen veriyi kendi fonksiyonuna bir parametre olarak gelen fonksiyona parametre olarak veriyor. Bunu yaparken veriyi hazırlayan fonksiyon değişkenleri fonksiyon adından üretilecek bir değişkenin (nesnenin) özellikleri olarak gönderiliyor.

Geriye sadece çağrılan fonksiyonda bu özellikleri kullanmak kalıyor. Closure, method, callback gibi kavramları daha basit örneklerle daha sonra anlatırız, ancak bu örnek ajax ile çağıran fonksiyonlar arasında geri dönük bir bağ kurarak kontrolleri ajax çağrısı yapan fonksiyonun içinde yapmaktan bizi kurtarıyor, böylece farklı uygulamalarda sadece çağrı yapıp sonucu döndüren bu fonksiyonu tekrar tekrar kullanabiliriz. Sunucu isteği sırasında işlemin yapıldığına dair hedef taşıyıcı (span yada div vb.) içine gönderilen img tagıda çağrı bittiğinde kaldırılıyor. Böylece sonuç ve işlem yapılıyor imgeleri farklı yerlere koyulabiliyor. Closure ve callback en sıkı jquery tarafından kullanılıyor.

co-scripts tag image ajaxcallbackclosuremethodactivexobjectxmlhttprequest
ID:202 | Okunma:1882