javaScript shorthand (kısaltmalar)

javascript'de programlama yazmanın en kötü yanı uzun kod adlarını ezberleme ve bunları tekrar tekrar yazmak hem yorucu hemde zaman alıcıdır. Biz bu makalede bu uzun kod adlarını kısaltarak javaScript'de proğramlama yazmayı kısa ve eğlenceli hale getireceğiz. Tabiki bazı basit işlemler için JQuery kütüphanesi gibi koca kütüphaneyi indirmek ve siteye uyarlamak bazen işimize gelmiyebilir; Çünkü koca kütüphanenin yüklenmesi zaman aldığı için websitemizde yavaşlamalar olabilir. Ayrıca JQuery gibi kütüphanelerin seçicileri çok yavaş çalışmakta biz ise burda sadece method isimlerini değiştirerek hızdan feregat etmeyeceğiz. Javascript'de en çok uğraştığımız bir HTML öğesi seçmek için uğraşıyoruz önce bu seçicileri(getElementById,queryselector gibi....) kısaltarak işe başlayacağız

querySelector() methodun Kısaltılması



var $ = function( x ) { 

return document.querySelector( x );

};

Kullanımı:


$("#test") // id="test" böyle seçebiliriz.

 $("#test").style.color="darkgreen";

ÇIKTI:

JQuery gibi kütüphane yükleyecekseniz $() ismi genelde birçok kütüphane kullanıyor, burdaki fonksiyonla çakışabilir herhangi bir isim verebilirsiniz (sec() gibi...)

querySelectorAll() methodun Kısaltması



var $$ = function( x ) { 

 return document.querySelectorAll( x );

 };

Kullanımı:


$$(".test") //class="test" böyle seçeriz.

$$(".test")[0].style.color="blue";

getElementById() Methodun Kısaltılması


var id= function( x ) { 

 return document.getElementById( x );

 };

Kullanımı:


id("test") //id="test" böyle seçeriz.

id("test").style.color="blue";

getElementsByTagName() methodun Kısaltması



var tag = function( x ) { 

return document.getElementsByTagName( x );

 };

Kullanımı:


tag("p") //paragrafları böyle seçeriz.

tag("p")[0].style.color="blue";

addEventListener() Methodun Kısaltılması

addEventListener() Methodu on ismi ile kısaltacağız yukarıdaki seçicileri Şöyle kullanabiliriz.


$("#test").addEventListener()

Yukardaki addEventListener() methodun kısaltılmış şeklini oluşturduğumuz seçiçilerle kullanamayız.


$("test").on{} // typeerror

Yukardaki ifadeyi zicirleme method özellik vermediğimiz için yeni bir seciçi ile addEventListener() methodun kısasını yazacağız.


var select = function (x){

    this.Node = document.querySelector( x );

    return this;
}
var on = function (c,fonk, capture){

  this.Node.addEventListener(c,fonk,capture);
  
  return this;
}
var off = function (c,fonk, capture){

  this.Node.removeEventListener(c,fonk,capture);
  
  return this;
}

NOT: on fonksiyonun içinde artık seçiciyi this olarak kullanacaksınız.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

2592

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.