jquery göster / gizle (show/hide) menü yapımı

jquery göster / gizle (show/hide) menü yapımı

Javascript derslerimiz bittiğine göre artık biraz daha ileri gidip hazır kütüphane ve frameworklere değinebiliriz


jquery ile basit bir şekilde göster gizle veya aç kapa şeklinde
menü, tab vb. gibi çalışabilecek basit bir jquery uylamasını nasıl yapabileceğiniz hakkında
işinize yarayabilece örnek bir uygulama geliştirelim
bu kod parçası çok basit olacak amacı size bu olayın mantığı anlamanızı sağlamak.
bu uygulamada jquery'nin show ve hide vede css fonksiyonlarından faydalanacağız.

Uygulama içerisinde yorum satırları arasında gerekli açıklamalar mevcutur, umaraım yardımcı olur.

// jquery başlar...
$(function(){

//tetikleyecek olana elemanımıza click olunduğunda duruma göre gösterilecek veyahut gösterilemeyecek
//siz isterseniz bunu click değil hover vb. şekillerde de kulanabilirsiniz.
$("#tetikleyecekEleman").click(function(){

//gösterilecek veya gösterilmeyecek olan elemanının o anki cssdeki display durumunu alalım
var durum = $("#gosterilecekVeyaGizlenecekEleman").css("display");

//eğer eleman none yani gizli ise
if(durum == 'none') {
//elmanın gizli durumunu iptal edip görünür hale getirelim
$("#gosterilecekVeyaGizlenecekEleman").show();
} else {
//zaten görünür halde ise gizli hale getirelim.
$("#gosterilecekVeyaGizlenecekEleman").hide();
}

});

});
// jquery bitter

html için herhnagi bir kod eklemesinde bulunmadım, ki zaten bu seviyede bir yazılımcının
verilen kodlara bağlı olarak kendi html kodlarını cıkartabilir.
Yinede kısaca örnek vermek gerekirse

<span id="tetikleyecekEleman">AÇ / KAPAT</span>
<div id="gosterilecekVeyaGizlenecekEleman"> Gösterilecek yada gösterilmeyecek olan içerik burada olacak </div>

span yada div yerine siz istediğiniz html elemanını kulanabilirsiniz burada dikkat etmeniz gereken id değerleridir

Internet Explorer ve eval() İstisnası

Internet Explorer ve eval() İstisnası


"Caller" Internet Explorer, Mozilla gibi popüler tarayıcıların desteklediği, aslında standart dışı bir özelliktir.Fakat Internet Explorer "eval()" komut
bloğunda çalıştırılan fonksiyonlar için de caller değerini "null" döndürmektedir.Kontroller yapılırken bu durumu dikkate almak gerekir.


Bir sonraki yazı: Bölüm Sonu Pratikleri ...

Caller

Javascript Caller Fonksiyonu 

Fonksiyonların nasıl çağrıldığını anlamak için, alt özellikleri olan "caller" kontrol edilir, eğer herhangi bir fonksiyon içinde çağrılmadıysa, "null"
değerini döndürür.Bu özellik "fonksiyonAdı.caller" biçiminde kullanılır:

>>> var merhaba = function(){

return merhaba.caller;

}

>>> merhaba()

null

>>> (function(){ return merhaba() })()

(function(){ return merhaba() })()

 Örnekte, "merhaba" adında, kendisini çağıran fonksiyonu döndüren bir fonksiyon oluşturduk.Global blokta çağırdığımız satırda "null" değer
dönerken, diğerinde fonksiyonun kendisi döndü.
Örnek olarak, yazdığımız fonksiyonun başka bir fonksiyon içinden çağrılmasını engelleyebiliriz;

>>> var merhaba = function(){

if(merhaba.caller!=null)

return "Bu fonksiyona başka bir fonksiyonun içinden erişemezsiniz."

return "Merhaba!"

 Dizi konusu gibi, ileride detaylıca inceleyeceğimiz konulardan biri de koşullar.Yukarıdaki örneğin ilk iki satırında, "merhaba.caller" değerini kontrol
ettik ve eğer "null" değilse, yani bir başka fonksiyonun içinden çağrı yapıldıysa, "Merhaba" yerine uyarı metni döndürdük."return" komutu verildikten
sonra yorumcunun fonksiyondan çıktığını hatırlayalım.

Bir sonraki yazı: Internet Explorer ve eval() İstisnası ...

Prototype ve Browser Nesneleri

Prototype ve Browser Nesneleri

Javascript'in disable olmadığı durumları saymazsak, browserlar her HTML belgesinde javascript komutlarının çalışmasını sağlayan bir zemin
oluşturur.String,Number,Function,Array,Object nesneleri browser sözettiğimiz çekirdekte yer alan nesnelerden birkaçıdır.
Yazdığımız her sayı Number objesinden, her yazı String objesinden türer.Ve tahmin edeceğiniz gibi, bu değerlerin methodları, çekirdekteki
nesnelere bağlıdır.String nesnesinin methodlarından birini deneyelim:

>>> String

String()

>>> String.prototype.replace

replace()

 String nesnesinin prototype objesindeki replace fonksiyonuna erişip kontrol ettik.Şimdi de oluşturacağımız string değerinde replace methodunun
kullanımını inceleyelim:

>>> "Merhaba Dünya".replace

replace()

ECMAScript standartını kullanan dillerden biri de Actionscript'tir.Bu dil de String,Number gibi objeler oluşturur fakat geliştiricinin bu nesneleri
değiştirmesi kısıtlanmıştır. Neyse ki javascript için böyle bir durum söz konusu değil, browser nesnelerini dilediğimiz gibi değiştirebilmekteyiz.Örnek
olarak Number objesine bir method ekleyelim:

>>> Number.prototype.topla = function(sayiDegeri){

return this+SayiDegeri

}

Number nesnesinin iskeletine "topla" adında bir fonksiyon ekledik.Böylece, tüm sayılar için pratik bir toplama methodu yaratmış olduk, deneyelim:

>>> (4).topla(8)

12

>>> 4.0.topla(8)

Aklınıza şu soru gelmiş olmalı: Peki ondalık hanelerin nokta işaretleriyle methodlarınki karışmaz mı? Evet karışır.Bunun için sayılar parantez içine
alınır, veya ondalık hanesinden sonra method yazılır.
Örnekte gördüğünüz gibi, Number sınıfından türeyen sayı değerlerinin altında topla methodu kendiliğinden gelmektedir.
Küçük bir ipucu: prototype Obje tipindedir yani Object sınıfından türemiştir.Şimdi browser'ımızı heyecanlandıracak birkaç deneme yapalım:

>>> Object.prototype.deneme = "foo bar"

>>> "".deneme

"foo bar"

Örnekte, Object sınıfının iskeletine bir ekleme yaptık ve böylece Object sıfından türemiş olan tüm iskeletlere değişikliği uyguladık.Yani, deneme
fonksiyonu tüm iskeletlere eklendi.Bir sonraki satırda oluşturduğumuz string değeri kontrol ettik ve bu durumu doğruladık.
Protype'lar hakkında genel bilgi sahibi oldunuz.Obje türlerini inceledikten sonra prototype'lara tekrar dönüp deney yapmanızda fayda var.

Bir sonraki yazı: Caller 

Prototype

Prototype nedir ?
prototip, ilk örnek, asıl örnek, orijinal

javascript'de objelere yeni değişkenler ve metodlar ekleyeme yarar. object oriented javascript'in temelini oluşturur bu terim. aynı zamanda prototype adıyla (prototype javascript framework) sonrasında gelen jquery, yui gibi yeni nesil javascript kütüphanelerinin öncülüğünü yapan bir araç vardır. daha hızlı javascript yazılması sağlar. daha hızlı yazılmasını javascriptteki uzun uzun yazılan ve çok kullanılan css selection özelliklerini $() gibi fonksiyonlara indirerek ve kullanılabilecek her yerde json kullanarak sağlar.

Prototype'ı bir binanın iskeletine benzetebiliriz, hatta bu benzetmeye tahmin ediyorum birkaç yüz dökümanda daha rastlayabilirsiniz çünkü
prototype benzetmeden daha öte, fonksiyonların iskeletidir.

Prototype değerlerinin tipi objedir.Yani bir objeyi alıp, bir fonksiyonun iskeleti olarak kullanmak mümkündür.Tabii bunun tam tersi durum da

sözkonusu.


Fonksiyonların klonlanarak objeye dönüştürülmesini anlatırken bir detayı atlamıştık; objenin özellikleri fonksiyonun tanımlandığı blokta olmak
zorunda değil.Oluşturduğumuz fonksiyonun iskeletine ulaşabilir ve çeşitli eklemeler yapabiliriz.Şimdi adım adım bir fonksiyon yazalım ve konsolun
döndürdüğü değerleri yorumlayalım:

>>> var kisi = function(adsoyad,yas,dogumyeri){

this.adsoyad = adsoyad;

this.yas = yas;

this.dogumyeri = dogumyeri;

}

>>> kisi.prototype

Object: There are no properties to show for this object.

Örnekte kisi adında bir fonksiyon oluşturup içine adsoyad,yas,dogumyeri özelliklerini yazdık.Ardındaki satırda prototype'ı incelediğimizde, boş bir
objenin döndüğünü görüyoruz.Bu durumdan şunu çıkarmalıyız, iskeletin inşası prototype objesi dışında yapılamaz.Veya şöyle özetleyelim,
fonksiyonun içinde iskelet oluşturamayız.

>>> kisi.prototype.meslek = null;

Yukaridaki örnekte prototype objesinin altında bir alan açarak, kisi fonksiyonuna meslek adında bir özellik ekledik.

>>> kisi.prototype

Object: (meslek = null)

>>> selcuk = new kisi("selçuk koçulu",48,"mardin");

>>> selcuk.meslek

null

 Bu örnekteyse selcuk adında bir obje oluşturduk ve meslek özelliğini sorguladık.Dönen sonucun null -bu bizim belirlediğimiz bir varsayılan
değerdi- olduğunu görüyoruz.
Buradaki problem, iskelete sonradan eklenen meslek özelliğini constructor'a nasıl dahil edeceğimiz.Bu iş için constructor'ın yeniden yazılması
kaçınılmazdır;

>>> var kisi = function(adsoyad,yas,dogumyeri,meslek){

this.adsoyad = adsoyad;

this.yas = yas;

this.dogumyeri = dogumyeri;

this.meslek = meslek;

}

>>> fikretkizilok = new kisi("fikret kızılok","60","İstanbul","Müzisyen");

>>> fikretkizilok.meslek

"müzisyen"

Bu örnekte dikkat etmemiz gereken, kisi fonksiyonunun eski iskeleti devralması.Peki bu durumda henüz tanımlanmamış fonksiyonların iskeleti
oluşturulabilir mi? Evet, oluşturulabilir.
Bunu denemek için yeni bir fonksiyon yazalım:

>>> kargo.prototype.alan = null;

>>> kargo.prototype.gonderen = null;

>>> kargo.prototype.kargoicerigi = null;

>>> function kargo(alan,gonderen,kargoicerigi){

this.alan = alan;

this.gonderen = gonderen;

this.kargoicerigi = kargoicerigi;

}

>>> kargo.prototype.ucret

0

Görüldüğü gibi, undefined değeri olan bir tanıtıcı altında iskelet oluşturduk ve ardından bu tanıtıcıya fonksiyon değeri verdik.Son satırda ise,
tanıtıcı değer almadan oluşturduğumuz iskeletin çalışır durumda olduğunu onayladık.Biraz önce yazdığımız kisi nesnesinden de faydalanarak
kargo'nun kullanımına bir örnek verelim:

>>> var azerkoculu = new kisi("azer koçulu",20,"kaş","web geliştirici");

>>> var billgates = new kisi("bill gates",53,"seattle","işadamı");

>>> var yeniKargo = new kargo(azerkoculu,billgates,"mozilla stickers");

...

Bir sonraki yazı Prototype ve Browser Nesneleri

 

Call ile kalıtım

Kalıtım ilişkileri kurmak için apply'den daha çok tercih edilen methoddur.Mantık olarak pek farklılık yok, istenen objeye "scope" ve argümanlar
gönderiliyor:

>>> var kisi = function(adsoyad,yas,dogumyeri){

this.adsoyad = adsoyad;

this.yas = yas;

this.dogumyeri = dogumyeri;

}

>>> var oyuncu = function(adsoyad,yas,dogumyeri,takim,skor){

this.takim = takim;

this.skor = skor;

kisi.call(this,adsoyad,yas,dogumyeri);

}

>>> var kemal = new oyuncu("kemal akın",15,"antalya","maviler",3);

>>> var ege = new oyuncu("ege akın",10,"izmir","kırmızılar",2);

>>> kemal.takim

maviler

>>> ege.dogumyeri

izmir

Örnekte gördüğünüz gibi, apply ile temel farklılık call methodunun argümanları serbest biçimde göndermemizi sağlaması.

...

Bir sonraki yazı Prototype

Apply

Apply

apply Javascript'in isviçre çakisidir.Bu özellik sayesinde, fonksiyonlar birbirlerinin yapilarinin üstüne insa edilebilir ve bunun saymakla bitmez faydalarindan biri, modern object oriented dillerinin kalitim özelligini bize saglamasidir.Örnegin, kimlik bilgileri içeren "kisi" objesi üzerine, skor ve benzeri bilgileri içeren "oyuncu" objesi olusturalim:

>>> var kisi = function(adsoyad,yas,dogumyeri){ this.adsoyad = adsoyad;

this.yas = yas; this.dogumyeri = dogumyeri;

}

>>>var arda = new kisi("Arda Koçulu",17,"Kars");

>>>arda.dogumyeri

"Kars"

Kisi objesini inceleyelim; bir fonksiyon olusturduk ve argüman tünelinden gelen üç veriyi bu fonksiyona alt deger olarak atadik.Ardindaki satirda "arda" degerini "new" operatörüyle yeni bir kisi olarak tanimladik.Kisi objesini olusturdugumuza göre, oyuncu objesine de geçebiliriz:

>>> var oyuncu = function(adsoyad,yas,dogumyeri,takim,skor){ this.takim = takim;

this.skor = skor; kisi.apply(this,arguments);

}

>>>var kemal = new oyuncu("kemal akin",15,"antalya","maviler",3);

>>>var ege = new oyuncu("ege akin",10,"izmir","kirmizilar",2);

>>>kemal.takim

maviler

>>> ege.dogumyeri izmir

Oyuncu adinda bir nesne olusturduk, argüman tünelinden bekledigimiz degerleri taniticilarina tanimladiktan sonra, takim ve skor alt degerlerini atadik.Ardindan gelen satirda ise, kisi objesinin apply methodunu çalistirdik ve "this","arguments" argümanlarini gönderdik. "this" argümani, kisi objesinin hangi fonksiyon tarafindan çagrildigini göndermek için kullanilir.arguments Argümaniysa, apply methoduyla çagrilan fonksiyonun argüman tünelinden bekledigi argümanlari göndermemizi saglar."arguments" degeri, oyuncu fonksiyonuna gelen degerleri içerdiginden, "oyuncu"

fonksiyonuna gelen tüm argümanlar "kisi" fonksiyonuna gönderililir.

Call

call fonksiyonu tipki apply gibi, fonksiyonlari kendi belirledigimiz etki alani ve argümanlarla çalistirmamizi saglar.Bir problemin çözümünü anlatarak örnek yapalim, javascript arguments dizisinin alt methodlarini kullanmamiza olanak tanimaz.Deneyelim;

>>> (function(){

alert(arguments.slice); // undefined deger döner })("merhaba","dünya");

Parantez bloklari içindeki fonksiyonumuza iki metinsel deger gönderdik.Fonksiyondaysa, gelen argüman listesinin slice methodunu kontrol ediyoruz ve tanimlanmamis oldugunu görüyoruz.

Simdi bu problemin çözümünü inceleyelim:

>>> (function(){

alert(Array.prototype.slice.call(arguments,1) // dönen deger: ["dünya"] })("merhaba","dünya");

slice Methodunun islevi o kadar önemli degil, diziler konusunda inceliyoruz.Burada dikkat etmeniz gereken, prototipteki fonksiyon kaynagina ulasmamiz ve bu fonksiyonu call methodu ile çagirmamiz.call nesnesine gönderdigimiz argümanlardan birincisi etki alanini belirliyor, digeri ise slice methodunun argüman tünelinden bekledigi ilk deger. Gördügünüz gibi, call methodu applyden farkli olarak argümanlari topluca liste olarak almiyor, ilk argümani etki alani degeri kabul edip diger bütün argümanlari çalistirdigi fonksiyona aktariyor.

...  

bir sonraki yazı Call ile kalitim