Başlangıç > Dökümanlar > Javascript’te İleri Teknikler (Zihni ÖĞMEN)

Javascript’te İleri Teknikler (Zihni ÖĞMEN)

Merhaba,

Bu dersimizde birçoğunuzun bilmediği javascript tekniklerini öğreneceğiz.

İlk olarak fonksiyon tanımla ve prototiplerden başlayabiliriz.
Bildiğimiz üzre javascript’te fonsiyonlar şu şekilde tanımlanır …

function fonkisyonIsmi() { // fonksiyon olduğunu belirtmemiz ve ismini tanımlama
//fonksiyon içeriği
}

Yukarıda gördüğümüz fonksiyonu ismini yazıp operatörleri koyarak çağırabilirsiniz.

Örn : fonksiyonIsmi();

Ancak bazen programlamanız üzerinde fonksiyon içerisinde fonksiyonlara
değişkenlere ihtiyaç duyabilirsiniz. Örneğin:

divIslem() fonskiyonu sizin için bir div’i hem gizleyecek hemde görünteleyebilecektir.

Bunu normal fonksiyon tanımlamayla şöyle yaparsınız ;

function divIslem(divId,gizleAc){
  if(gizleAc == true){
    document.getElementById(divId).style.display = 'none';
  },
   else{
       document.getElementById(divId).style.display = '';
   }
}

Daha sonra çağırırken divIslem(‘div1’,true) diyerek gizleyebilir false diyerek görünür hale getirebilirsiniz.

Ancak prototip sahibi fonksiyonlarla bu işlemi daha kullanılabilir ve geniş bir hale getirebilirsiniz. Örnek :

var divIslem = function(divId){
    // burada gördüğümüz fonksiyon tanımlama aslında yukarıda gördüğünüzün neredeyse aynısıdır.Ancak bir fonksiyona prototip atamak istiyorsak yazımını en temel şekliye yapmak zorundayız ki bu yazım en temel yazımdır.
}

//prototip yazımı 

divIslem.prototype.Gizle = function (){
//gördüğünüz üzre prototype yazdıktan sonra yine bir isim yazdım ve yukarıdaki tanımlamanın aynısını yaptım."divIslem.prototype" kısmı burada bize bu fonksiyonun divIslem değişkenine ait olduğunu gösterir.
   //aslında yukarıda yaptığımız tanımlama bir class(sınıf) oluşturmakla aynı mantığa sahipti.Sadece bir sınıf birden fazla fonksiyon'a , değişkene sahip olabilir.

}

Yukarıdaki fonksiyonu şu şekilde çağırabilirsiniz :

var is = new divIslem('div1');
is.Gizle();

//Gördüğünüz gibi yukarıda variable(değişken) tanımlamasını yapmış olmamıza rağmen burada tamamen yeni isimli bir variable tanımladık ve 'new' komutu kullandık.Daha öncede söylediğim gibi yukarıdaki yazım bir class(sınıf) gibi davranır ve sonsuz defa oluşturulabilir. New(Yeni) komutu ardından gelen class'dan yeni bir tane oluşturmak için kullanılır. Ve artık sınıfımız üzerindeki tüm fonksiyonları yeni değişkene atadığından prototiplerin hepsi yeni variable ismi üzerinden çağrılacaktır.

Prototip olarak oluşturabileceğiniz fonksiyonun sınırlaması yoktur. Örneğin :

var divIslem = function(divId){

}

divIslem.prototype.Gizle = function (){
    alert(divId);
}
divIslem.prototype.Ac = function (){
}

divIslem.prototype.Uzunluk = function (){
}

Yukarıdaki örneğe dikkat ederseniz Gizle() fonksiyonunun içersine divId değişkenini alert etmesi için komut verdik. Ancak bu komut bize ‘undefined’ değerini döndürecektir. Çünkü her ne kadar prototip de olsa eğer siz fonksiyona prototiplerin kullanabileceği bir değer vermiyorsanız onlar ait oldukları sınıfın değişkenlerine erişemezler. Bunu sağlamak için :

var divIslem = function(divId){
     this.divAdi = divId;   /// Burada kullanılan 'this' ibaresi divIslem sınıfını anlatmaktadır. var divAdi = divId demekle aynı şeyi yapmış olduk ancak tek farkı artık prototiplerimiz de bu değişkeni kulllanabilecektir.
}

divIslem.prototype.Gizle = function (){
    alert(this.divAdi);// Dikkat ederseniz tekrar this ibaresi kullandım çünkü eğer bu ibareyi kullanmazsanız divAdi değişkenin sadece Gizle () fonksiyonu içerisinde arayacak ve 'var divAdi = 'falanfilan' gibi tanımlama olmadığı için yine 'undefined' yazısını verecektri.
}
divIslem.prototype.Ac = function (){
}

divIslem.prototype.Uzunluk = function (gelenBirsey){

  // burada göstermek istediğim eğer isterseniz prototype'lerin altında tanımladığınz fonksiyonlarda da argüman kullanabilirsiniz.
}

this ibaresini kullandıktan sonra tanımladığınız her değişken o sınıf oluşturulduğunda boş bir belleğe yazılır ve sadece o sınıfı oluşturan değişken’e aittir.

 

Eğer .net ile uğraşmışlığınız varsa class’ları iyi tanıyor olmanız gerekir. Ancak bilmeyenler için sınıflar hakkında küçük bir bilgi vereyim:

Sınıflar
Sınıflar içerlerinde metodlar ve değişkenler barındırabilen Nesneye Yönelik Programlama (Object Oritented Programming) için geliştirilmiş programlama teknikleridir diyebiliriz.

Barındırılan bu metodların bazıları static bazıları ise non-static (dynamic)tir.

Peki nedir bu statik ve dinamik neseneler?
Statik nesneler o sınıfa ait nesne yaratılmak gerekmeksizin erişim sağlanabilen nesnelerdir. Örn :

var  musteri  = new MusteriBilgisi();  
musteri.musteriIsmi("2323");   // bu dinamik bir sınıfa aittir ve burada yaptığımız şey sınıfa nesne oluşturmaktır.

Daha detaylı açıklamak gerekirse daha önceden tanımlanmış MusteriBilgisi adlı bir sınıfımız varmış (Ders-1 de tanımladık). Ve biz musteri adlı değişkenimize(nesnemize) bu sınıftan bir tane oluşturması için komut vermişiz. Artık oluşturulan yeni sınıf yeni bir nesne ismine sahip olduğu için sınıfa bağlı metodlar da bu nesnenin statik öğeleriymiş gibi çağrılacaktır.

Statik metodlarda ise yazım şu şekildedir:

Var musteri = MusteriBilgi.musteriIsmi("121212");

Görebileceğiniz üzre “new” komutunu kullanmadık. Çünkü yukarıda da bahsettiğim üzere statik metodlar yeni nesne oluşumuna gerek duymazlar.

Ancak statik metod sahibi sınıflar ders-1’de gördüğümüz şekilde tanımlanmazlar.Statik metod sahibi sınıf tanımlama şekli şudur :

Var MusteriBilgi = {
	musteriIsmi : function(gelenId){
	alert(gelenId);
}
}

Dikkat ederseniz sınıfa ait yeni bir fonksiyon tanımlarken çok değişik bir yazım kullandık.

fonksiyonismi : function ( argüman ) {
}

Ders-1’de hatırlayacağınız üzre sınıflar kendilerine ait değişkenlere sahip olabilirler. Statik değişkenler şu şekilde yazılır ve kullanılırlar.

Var MusteriBilgi = {
	degiskenIsmi :  "değişkenİçeriği",  // Önemli bir nokta : degiskenimizi tanımladıktan sonra normalde kullandığımız javascript'e satır atlamasını söyleyen karakter  ";" budur ancak statik sınıflarda satır atlamak daha doğrusu yeni bir nesne tanımlamak için "," karakteri kullanılır.
	musteriIsmi : function(gelenId){
	alert(degiskenIsmi); // Ders-1 deki konunun aynısı burada da geçerlidir.Bu alan size "undefined" yazısı veya hata döndürür. Doğru yazım şu şekildedir :
	alert(this.degiskenIsmi) // this ibaresi kullanılmak zorundadır çünkü çağrılacak olan nesne her ne ise bu sınıfa aittir ve burada (this) ibaresi bu sınıfı tanımlayan objedir.
}
}

Statik değişkenler dinamik değişkenlere yakın oranda kullanışlıdırlar.

Örneğin :

var bilgiler = {

	sayfaGenisligi : function (){
		var gen = 0;
		if(!window.innerWidth){
			gen = document.body.clientWidth;
		}
		else{
			gen = document.body.clientWidth;
		}

		return gen;
	},

	sayfaYuksekligi : function (){
		var yuk = 0;
		if(!window.innerHeight){
			yuk = document.body.clientHeight;
		}
		else{
			yuk = document.body.clientHeight;
		}

		return yuk;
	}

}
var  genislik = bilgiler.sayfaGenisligi();
var yukseklik = bilgiler.sayfaYuksekligi();

gibi bir kodlama kullanalarak bütün hem daha sonra hatırlamanız için sorun yaratmazsınız hem de birçok satırdan kendinizi kurtarmış olursunuz.

 

Bu dersimizde Eval, typeof ve instanceof nesnelerini inceleyelim.

Eval nesnesi :
Eval nesneleri javascript’in nesneye yönelik programlaması açısından büyük önem taşırlar. Eval nesnesinin en basit açıklaması şudur:

Eval bir öntanımlı bir fonksiyondur ve üzerine argümanla gönderilen nesneyi tüm sayfada arar ve karşılık bulduğunda nesnenin tipine göre işlem yapar.

Böyle söyleyince hiçbirşey anlaşılmıyor biliyorum o yüzden bir örnekle gösterelim :

function  cagrilacak( deger  ){
} 
// bir fonksiyon tanımladık.
eval('cagrilacak("sad")');
// Gördüğünüz gibi eval fonksiyonunun argümanına çağrılacak olan fonksiyonumuzu bir string(yazi) olarak yazdık.Ancak eval bizim için onu sayfada araştıracak ve daha önceden ona karşılık gelen 'cagrilacak' fonksiyonunun tanımlı olduğunu görecektir.

Bir nêvi eval fonksiyonu bizim için içersine yazılan argümanı bir javascript nesnesine dönüştürüyor diyebiliriz.

Peki nerede kullanabiliriz bu eval nesnesini?

Aslında bu tamamen sizin yaratıcılığınıza kalmış bir olay ancak kısa bir örnek vermek gerekirse ; normalde window.onload nesnesinin karşısına yazılan bir fonksiyonun onload event’ine atandığını biliyoruz. Ancak window.onload’a atanan yeni fonksiyon diğer önceden atananların hepsini geçersiz kılar. Bunun önüne geçmek için basit bir statik sınıf ve eval kullanarak bir script oluşturalım.

var  wonload = new Array(); // burada biriktireceğimiz onload eventine ait fonksiyon isimleri için bir variable oluşturduk.
var  Olay = {
   	loadEkle : function ( gelenFunk ){
		wonload[wonload.length] = gelenFunk; // array nesnesine yeni bir string ekliyoruz
		window.onload = function () { // window.onload eventimizi yeniden tanımlıyoruz
			for(var t = 0 ; t < wonload.length ; t++){
			eval(wonload[t]);  // wonload içersinde bulunan her stringi function'a dönüştürüp çağırmasını istiyoruz.
}
}
}
}

//kullanımı

Olay.loadEkle("acildi");

typeof nesnesi
Typeof nesnesi belirtilen nesnenin türünü yansıtır. Belirtilen nesnenin ne olduğu fark etmez ister bir string, ister bir int, date, function, HTML kontrolü olsun typeof bu nesnenin türünü bize döndürecektir. typeof’un kullanımı oldukça basittir:

typeof (nesne) şeklinde yazılır ve karşılığında size String bir değer döndürür.

Peki sayfa içerisinde nasıl kullanılabilir?

Tekrar söyleyeyim bu tamamen sizin yaratıcılığınıza kalmış ancak ben örnek olsun diye yukarıdaki nesneye küçük ( ama gerekli ) bir eklenti yapacağım.

Dikkat ederseniz window.onload eventimizin karşısına yazdığımız fonksiyonun içersine:

eval(wonload[t]);

komtunu verdik. Ve demiştikki eval bizim için tanımlı olan nesneyi bulacaktır yani illa fonksiyon olacak diye bir şart yok.Ancak biz sadece fonksiyon istiyorsak o zaman tip kontrolü yapmanın sırası gelmiş demektir. O kısma şunları ekliyoruz :

if(  typeof ( eval( wonload[t] )   )  == ?function?){
	eval(wonload[t]);
}

Artık typeof fonksiyonumuz sayesinde eval (wonload[t]) karşılığında dönen nesnenin türü eğer function değilse bir işlem yapmamasını söyledik.

instanceof nesnesi
instanceof nesnesi bir nesnenin belirtilen diğer nesnenin elemanı olup olmadığını kontrol eder.

instanceof nesnesi Boolean(bool) dediğimiz true/false değerini döndürür.

Örneğin :

var  modul = function () {
}

var kont = new modul();

if( kont   instanceof   modul){ // burası true ise ile aynı yazımdır
	//kont nesnemiz eğer modul nesnemize bağlı bir nesneyse ( ki yeni dynamic bir sınıf oluşturuludğunda sınıf tüm özelliklerini bu nesneye yükler) bu kısım geçerli olacaktır.
}

Bunu nerede kullanabileceğiniz konusunda şu an kafamda bir şey oluşturamadım . Ancak işinize yarayacağından eminim..

Reklamlar
  1. Henüz yorum yapılmamış.
  1. No trackbacks yet.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: