Herkese tekrardan merhabalar, keyifleriniz yerindedir umarım. Keyifler yerindeyse bugün biraz daha bilgimizi genişleterek keyiflenme zamanımız geldi demektir :)Burada yazdığım ilk Jquery dökümanı bu olacak. İlk başta Jquery’nin ne şekillerde kullanıldığını yazacağım. Daha sonra Jquery ile birkaç tane örnek uygulama yapacağım. Bu dökümanı daha net anlayabilmek için html ve css bilginizin de olması gerekiyor.Elimizde bulunması gereken Jquery dosyasını Jquery Resmi Sitesi‘nden temin edebilirsiniz. Her şey hazırsa başlıyoruz…Başlangıç :
Jqueryi ana olarak 2 şekilde kullanabiliyorsunuz :# jQuery( expression, context )
# $( expression, context )
“$” ve “jQuery” aynı anlama gelmektedir. $yi jqueryden çıkarmak ve ya farklı bir ad takmak isterseniz :
şeklinde de kullanabilirsiniz. Burada “jQuery.noConflict()” metodu “$” ın kullanımını kaldırıyor( Diğer frameworklerle çakışmasın diye) ve “var j =” ilede jquery’nin değerini j ye atıyoruz. Aynı zamanda
kodları da aynı sonucu verecektir.Kullanımı :
Jquery’nin kullanımı Javascriptten daha basit, daha hızlı ve daha geniş kapsamlıdır. Bu yüzden bu framework’ü projenize eklemeniz demek javascriptle yazılan kodlardan kâr elde etmek demek.Üsttede bahsettiğim gibi bir kullanımla kısaca dökümanımızın içeriğine girelim :
“).hide().fadeIn(“slow”);
});
Jquery’nin ilk çekirdek konusu sayfa yüklenmesidir. Yukarıdaki kodumuzda sayfa yüklendiğinde “body” nesnemizi seçtik ve içerisine
kodunu ekledik.Tam Kod olan şu kodlarla sayfamızı açtığımızda, sayfamızın sağ üst köşesinde bir yazının opacity’sinin artarak gözüktüğünü göreceksiniz :
Şu anlık 3 tane metod gördük. Bunlar :# $(document).ready()# $(seçici).hide()# $(seçici).fadeIn()Bunlardan son 2 tanesini açıklayayım :
seçici ile verdiğiniz class, id ya da tag’ın görünürlüğünü kapatır.
seçici ile verdiğiniz class, id ya da tag’ın görünürlüğünü verdiğiniz milisaniye( örn. 1500 ) ya da yazısal değere göre( “slow”, “fast”, “def” ) görünürlüğünü yavaş yavaş arttırır.Buraya kadar denemişseniz ve anlamışsanız, tebrikler sizde jQuery‘i kısa sürede öğrenebilecek kabiliyet var 🙂 Anlamayanlar ise asla üzülmesin, anlayana kadar tekrar edin, 5-6 tekrar sonrasında halen anlamamışsanız yanlış yerden başlamışsınız ya da yanlış yerden devam ediyorsunuz demektir.
Yazımıza kaldığımız yerden devam edelim :
– Tamam, sayfa yüklendiğinde bir tane divi görünür yaptık ama, bu ne işimize yarayacak ki?
– Çok haklısınız. Bu örnek bu şekilde kullanıldığında henüz herhangi bir işe yaramıyor. Fakat az sonra yapacaklarımızla ne kadar işe yaradığını sizde göreceksiniz 🙂
Şimdi konumuza karar verelim.Benim canım bugün bir slideshow gösterisi hazırlamak istedi. Hazır bir kaç tane profesyonel yaptığım var fakat burda basit bir sistemden başlamamız gerekiyor. Ama bu yazıyı okumuşsanız kesinlikle o slideshowu geliştirebileceksiniz demektir.
Yavaş yavaş başlayalım öyleyse :Projemizin ilk başta tasarımını( planlamasını ) yapalım :
Planlama
Planlamaya bir kaç kod hatırlatma :
* Thumblara event çalıştırıldığında ne yapılacağını gösteren kodları ekleyebilme olanağımız olsun.* Resmin “alt” özelliğini büyük resmin gösterileceği alanın altında opacitysi düşük bir alanda gösterebilme şansımız olsun ( kapatabilme ve açabilme olanağımızda olursa kullanıcıya daha da cezbedici olacaktır. )
* Otomatik resim değiştirme özelliği olsun. Bunu da callback ile yapalım ki, yazılımcı otomatik değiştirme anında ileri mi gerimi, yoksa son resme mi gitmek istediğini belirleyebilsin.O zaman hemen html ve css kodlarımızı hazır hale getirelim :
Css Kodlarımız :
Html Kodumuz :
Kodlarımız hazır olduğuna göre sonuca bir gözatalım :
Slideshow – Gözatma 1
Slideshow – Gözatma 2
Sonuçlar gördüğünüze benzer sonuçlarda, bu kısmımızı başarıyla gerçekleştirdik demektir. Yazının başında da dediğim gibi sizi html ve css biliyor farz ediyorum. Şimdi sıra geldi kodlama kısmına :Kodlamada kullanacağımız bazı olayları kısaca açıklamam gerekiyor :# Javascriptte class nedir?# Callback nedir? Nasıl yapılır?# setTimeout nedir? Nerelerde ve Nasıl Kullanılır?Hemen kısaca başlıyoruz :1. Javascriptte class nedir?
Javascriptin içsel yapısı genel olarak fonksiyon ve variable( değer )’lerden ibarettir. Php, asp dillerindeki gibi javascriptte class tanımlaması “class ClassName” şeklinde yapılmaz. Aşağıdaki şekil bir classtır ve kullanımı da kodun alt kısmındadır. Dikkatli inceleyiniz :
” sonuc);
Sonucumuz “deneme :-: içerik” ve alt satırda “deneme2 :-: kireçi” şeklinde oluyorsa, bu örneğimizi doğru yaptınız demektir.Kısaca classlar bu şekilde oluşur. Javascriptte class fonksiyondur.2. Callback nedir? Nasıl yapılır?
Callback : fonksiyona gönderilen argüman adını fonksiyon olarak çalıştırmaya denir.Örnek :
şeklinde işler. callback fonksiyonunun argümanına bir fonksiyon yolladınız. Bu fonksiyonun içine gönderilen “b” adlı argümanı aldınız ve yazdırdınız. Çıktısı : “deneme” olacaktır.Örnek 2 :
İşleyişi diğer örnekle tamamen aynıdır. callback’in içine gönderilirken fonksiyonunun isminin sonuna () işaretlerinin konulmadığına dikkat edin. () konulduğu anda o kod çalıştırılmak istenir ve argüman olduğu için hata ortaya çıkarır. Bunun da sonucu “deneme” olacaktır.3. setTimeout nedir? Nerelerde ve Nasıl Kullanılır?
İlk başta setInterval ile setTimeout arasındaki farkı söyleyelim.( Çok karıştırılıyor. )
setTimeout a verdiğiniz kod süre sonunda sadece 1 kere tekrarlanır.
Fakat setInterval e verdiğiniz kod süre sonunda tekrarlanır ve tekrardan süre işlemeye başlar. Yani durdurmadığınız sürece sonsuza dek tekrar eder. Bunun için slideshow gibi işlerde kontrolü setTimeoutla daha rahat sağlarız.
Peki bu setTimeout ne işe yarıyor?
Diyelim ki “fonksy” adında bir fonksiyonumuz var. Bu fonksiyonu biz sayfa açıldıktan 5 saniye sonra çalıştırmak istiyoruz. Bu fonksiyon çalıştığında bir ekran oluşturuyor ve bu ekranın içerisinde “Merhaba Dünya” yazıyor.
Hemen koda dökelim :
şeklinde olacaktır.setTimeout 2 adet parametre alıyor. Bunların ilkinde süre sonunda çalıştırılmasını istediğiniz kodları yazıyorsunuz. İkincisinde ise kaç milisaniye sonra bu işlemin gerçekleşeceğini yazıyorsunuz.Yukarıdaki kodda Sayfa yüklendikten 5 saniye sonra “fonksy()” kodunu çalıştırdık.Her şey tamamsa geldik Jquery’le alakalı olan slideshow kısmına. Keyifler yerindedir umarım. İsterseniz 5 dakikalık bir molaya gidip gelin. Çünkü işin sürükleyici kısmı başlamak üzere =)
Slideshowu adım adım nasıl yapacağız :
1. Sınıfımız oluşturulacak. Büyük resim ve küçük resimlerin bulunduğu yerleri alacak.
2. Bunlar alındıktan sonra küçük resimler gözüksün mü?, Otomatik çalışsın mı, kaç sn aralıklı olsun gibi soruların cevapları alınacak.
3. Butonlar tanıtılacak( İleri, Geri, İlk, Son vs. )
4. Butonlara eventler tanıtılacak( onclick, onmouseover vs. )
5. Her ayar yapıldıktan sonra kodumuz çalıştırılacak.
Planlamamızı yapığımıza göre artık kodlamamıza geçebiliriz.İlk olarak SlideShow adındaki classımızı oluşturalım :
Daha sonra gerekli içerikleri ekleyelim :
Gerekli içerikleri girdik. Şimdi bir “resim” adında bir sınıf oluşturalım. Bu sınıf liste_resimler içerisinde 2. bir array dizini oluşturmamızı engelleyecek.
Buna Olculendir adında bir metod ekleyelim( Daha sonra dive göre width/height oranını koruyarak, div içerisine yerleştirmemize olanak sağlayacak. )
Evet, artık resmimizi divimizin boyutlarına göre oranlayabiliyoruz. Bu sayede yerleştirme de bir sorunumuz kalmıyor. Şimdi Slideshow’un “Calis” metodunu yazmaya başlayalım.Not : Bu metod bütün ilk yükleme işlemlerini yapıp slideshow gösterisini çalışır hale getirecektir.
