YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1
BÖLÜM - 2 Javascript Çerçeveleri ve jquery Giriş Bu bölümde; Javascript çerçeveleri Jquery I. Bölüm o jquery Temelleri o Selektörler o Komut Zincirleme o DOM Okuma ve Yazma ile ilgili konular anlatılacaktır. 2
Javascript Çerçeveleri Javascript çerçeveleri, RIA (Rich Internet Application) geliştirmede kullanılan ve temel Javascript DOM işleri için daha kolay veya fonksiyonel yöntemleri sunan javascript kütüphaneleridir. Javascript çerçeveleri HTML veya Javascript DOM'dan ayrı bir teknoloji değillerdir. Javascript çerçeveleri, HTML, CSS ve Javascript DOM araçları, RIA geliştirme için daha mantıklı, kolay ve kullanılabilir yapıda oluştururlar. Bu yapıları kullanarak tipik RIA geliştirme hızlandırılabilir
Javascript Çerçeveleri (devam ) Javascript çerçeveleri genellikle bir javascript kütüphanesi olarak geliştirilip tek veya birkaç.js dosyası olarak yayınlanırlar. Javascript çerçevesinden yararlanmak için, İlgili js dosyası web sayfanız ile birlikte sunucunuzdan indirilebilir veya Javascript çerçevesinin HTML script tagındaki "src" komutunu kullanarak direkt olarak bağlanabilir.
Javascript Çerçeveleri (devam ) Javascript çerçeveleri tipik olarak standart javascript DOM işleri için farklı araçlar sunar: DOM taranması ve DOM'da navigasyon DOM hiyerarşi güncelleştirilmesi Javascript olay işlemleri ve animasyon AJAX iletişim Nesne tabanlı programlama (OOP) ile ilgili işler
Javascript Çerçeveleri (devam ) jquery jquery en popüler js-çerçevelerinden biridir Temiz dil yapıları, kolay DOM taranması, efektif olay işlem ve animasyon araçları ve AJAX; standart UI kütüphanesi (jquery.ui) Web uygulama hızlandıran araç koleksiyonu MooTools OOP tabanlı programlamaya odaklayan js platformu Zengin modüller, nesne ve nesne devralma araçları Javascript için OOP odaklı web uygulama geliştirme çerçevesi Prototype OOP tabanlı programlamaya odaklayan js platformu Zengin nesneler ve nesne devralma araçları Genişletilmiş DOM, standart DOM elemanlarına yeni metotlar tanımlanmış
jquery GİRİŞ 7
jquery Cross-platform javascript kütüphanesidir. 2006'da John Resig tarafından tasarlanmıştır. Şu anda en popüler js çerçevesi 8
jquery Top 100K Sites https://www.similartech.com/categories/javascript 9
jquery Top 100K Sites https://www.similartech.com/categories/javascript 10
jquery (devam ) jquery Özellikleri: Kolay DOM elemanlarının taranması DOMda navigasyon ve DOM elemanları güncelleştirme CSS selektörler kullanarak DOM taranması DOM olay işleme Animasyon AJAX JSON analizi Plug-in'leri kullanarak genişletilmesi Çarpaz tarayıcı uyumluluk Standart UI kütüphanesi 11
jquery (devam ) jquery Ana Kısımları: Selektörler DOM güncelleştirme DOM tarama Animasyon efektleri AJAX işlemeleri UI aletleri 12
jquery (devam ) İndirme Özel kopyası, web sitesinden sunulduğu, (http://jquery.com/download/) jquery CDN <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> Google CDN <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> Microsoft CDN <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.0.min.js"> </script> 13
jquery Temelleri Tipik jquery komutunun yapısı aşağıdaki gibidir: $(selectör).eylem(parametreler) o $ jquery ye erişim işareti o Selektör HTML DOM elemanlarının altkümesini belirtilen bir ifade o Eylem ilgili DOM elemanlarının üzerinde yapılacak işlem 14
jquery Temelleri (devam ) Bazı jquery örnekleri: $(this).hide() aktif elemanı saklar. $("p").hide() tüm <p> elemanlarını saklar. $(".test").hide() sınıfı="test" olan tüm elemanları saklar. $("#test").hide() id = "test" olan tüm elemanları saklar. 15
jquery Temelleri (devam ) Document Ready: Dokümanın yüklendiğini garanti eder. $(document).ready(function(){ 1 // jquery Metotları buraya... }); $(function(){ 2 // jquery Metotları buraya... }); 16
jquery Temelleri (devam ) ÖRNEK 1: Aşağıdaki kodları test edelim $("a").click(function () { $(this).hide(); }); $("p").hide(); $("#test").hide(); 17
jquery Temelleri (devam ) ÖRNEK 1: 18
jquery Selektörleri jquery Selektörleri: $("a"), CSS tag selektörü (tüm ilgili taglar) $(".blue"), CSS sınıf selektörü (tüm "class=blue" elemanları) $("#menu"), CSS id selektörü ("id=menü" elemanı) $("a.blue"), CSS tag+sınıf selektörü (tüm "class=blue" alan "a" elemanları) $("ul li a"), CSS iç-içe selektörleri (bir ul içindeki bir li elemanının içinde olan a elemanları) CSS hierarşi selektörleri $("p:first-child") ana elemanının ilk çocuğu olan p elemanları $("a:first-of-type") ana elemanının a çocuk-elemanları arasında ilk olan çocuk a elemanı $("a:last-child") - ana elemanının son çocuğu olan p elemanları 19
jquery Selektörleri(devam ) Özel Selektörler: $("*"), tüm elemanlar $(this), şuanki eleman (olay işlemcileri içinde kullanılır) $("tr:even"), bir tabloda çift satırlar $("tr:odd"), bir tabloda tek satırlar $("p:contains('hello')"), 'Hello' metni içeren p elemanları $("li:has(.altmenu)"),.altmenu elemanı içeren li elemanları $("p:hidden"), saklanmış p elemanları $(":input"), tüm "input" elemanları (form) $(":button"), tüm "button" ve "input button" elemanları (form) $(":checkbox"), tüm "checkbox" elemanları (form) $(":selected"), tüm tıklanmış select veya radiobutton elemanları (form) $(":checked"), tüm tıklanmış checkbox elemanları (form) $(":enabled"), tüm "enabled" elemanları (form) 20
jquery Selektörleri(devam ) Özel Selektörler: $("[href]"), href özelliğini tanımlayan elemanlar $("a[href='değer']"), href='değer' alan a elemanları $("[href$='.jpg']"), '.jpg' ile biten href özelliğini alan elemanlar $("[title ='yarın']"), 'yarın'e eşit veya 'yarın-' ile başlayan "title" özelliğini alan elemanlar $("[title^='bugun']"), 'bugun' ile başlayan title özelliğini alan elemanlar $("[title*='hello']"), 'hello' metni içeren title özelliğini alan elemanlar 21
jquery Selektörleri(devam ) ÖRNEK 2: Id leri btn1 ve btn2 olan butonlar <p> etiketli elemanları saklama ve gösterme işlevlerini gerçekleştireceklerdir. 22
jquery Selektörleri(devam ) ÖRNEK 2: Id leri btn1 ve btn2 olan butonlar <p> etiketli elemanları saklama ve gösterme işlevlerini gerçekleştireceklerdir. 23
jquery Selektörleri(devam ) ÖRNEK 3: İçerisinde Gizli kelimesi geçen paragraf elemanlarını gizleyen buton işlevini gerçekleştirelim. 24
jquery Selektörleri(devam ) ÖRNEK 3: İçerisinde Gizli kelimesi geçen paragraf elemanlarını gizleyen buton işlevini gerçekleştirelim. 25
jquery Olaylar Site ziyaretçisinin web sitesinde yaptığı tüm aksiyonlara olay (event) denir. Mouse Events Keyboard Events Form Events Document click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 26
jquery Olaylar (devam ) ÖRNEK 4: Bir <p> elemanı için click(), dblclick(), mouseenter(), mouseleave() olaylarını tanımlayınız. 27
jquery Olaylar (devam ) ÖRNEK 4: Bir <p> elemanı için click(), dblclick(), mouseenter(), mouseleave() olaylarını tanımlayınız. 28
jquery Komut Zincirleme jquery komutlarının sonucu tipik olarak aynı jquery nesnesidir. Bu nedenle jquery komutları tipik olarak zincirlenebilir (chaining). 29
jquery Komut Zincirleme ÖRNEK 5: Bir <p> elemanı için click(), dblclick(), mouseenter(), mouseleave() olaylarını zincirleme olarak tanımlayınız. 30
jquery DOM Get ve Set DOM okuma ve yazma işlemleri için 4 tane basit ancak kullanışlı komut bulunmaktadır. 1. $(selektör).text(""): Elemanın metni elde etmek veya değiştirmek 2. $(selektör).html(""): Elemanın html'i elde etmek veya değiştirmek 3. $(selektör).val(""): Elemanın value özelliğini elde etmek veya değiştirmek 4. $(selektör).attr(isim): Elemanın "isim"li özelliğini elde etmek veya değiştirmek 31
jquery DOM Get ÖRNEK 6: Bir <p> elemanı içerisindeki hem text hem de html bilgisini ekrana gösteriniz. 32
jquery DOM Get ÖRNEK 6: Bir <p> elemanı içerisindeki hem text hem de html bilgisini ekrana gösteriniz. 33
jquery DOM Set ÖRNEK 7: İki adet <p> elemanından ilkinin text içeriğini ikincisinin html içeriğini değiştiriniz. 34
jquery DOM Set ÖRNEK 7: İki adet <p> elemanından ilkinin text içeriğini ikincisinin html içeriğini değiştiriniz. 35
Yararlanılan Kaynaklar http://www.w3c.org http://www.w3schools.com/jquery Ders Notları, Yrd. Doç. Dr. Yuriy Mishchenko 36
İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ drdenizkilinc@gmail.com deniz.kilinc@cbu.edu.tr 37