YZM 3215 İleri Web Programlama

Transkript

1 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

2 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

3 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

4 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.

5 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

6 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ış

7 jquery GİRİŞ 7

8 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

9 jquery Top 100K Sites 9

10 jquery Top 100K Sites 10

11 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

12 jquery (devam ) jquery Ana Kısımları: Selektörler DOM güncelleştirme DOM tarama Animasyon efektleri AJAX işlemeleri UI aletleri 12

13 jquery (devam ) İndirme Özel kopyası, web sitesinden sunulduğu, ( jquery CDN <script src="//code.jquery.com/jquery min.js"></script> Google CDN <script src=" </script> Microsoft CDN <script src=" </script> 13

14 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

15 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

16 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

17 jquery Temelleri (devam ) ÖRNEK 1: Aşağıdaki kodları test edelim $("a").click(function () { $(this).hide(); }); $("p").hide(); $("#test").hide(); 17

18 jquery Temelleri (devam ) ÖRNEK 1: 18

19 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

20 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

21 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

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. 22

23 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

24 jquery Selektörleri(devam ) ÖRNEK 3: İçerisinde Gizli kelimesi geçen paragraf elemanlarını gizleyen buton işlevini gerçekleştirelim. 24

25 jquery Selektörleri(devam ) ÖRNEK 3: İçerisinde Gizli kelimesi geçen paragraf elemanlarını gizleyen buton işlevini gerçekleştirelim. 25

26 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

27 jquery Olaylar (devam ) ÖRNEK 4: Bir <p> elemanı için click(), dblclick(), mouseenter(), mouseleave() olaylarını tanımlayınız. 27

28 jquery Olaylar (devam ) ÖRNEK 4: Bir <p> elemanı için click(), dblclick(), mouseenter(), mouseleave() olaylarını tanımlayınız. 28

29 jquery Komut Zincirleme jquery komutlarının sonucu tipik olarak aynı jquery nesnesidir. Bu nedenle jquery komutları tipik olarak zincirlenebilir (chaining). 29

30 jquery Komut Zincirleme ÖRNEK 5: Bir <p> elemanı için click(), dblclick(), mouseenter(), mouseleave() olaylarını zincirleme olarak tanımlayınız. 30

31 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

32 jquery DOM Get ÖRNEK 6: Bir <p> elemanı içerisindeki hem text hem de html bilgisini ekrana gösteriniz. 32

33 jquery DOM Get ÖRNEK 6: Bir <p> elemanı içerisindeki hem text hem de html bilgisini ekrana gösteriniz. 33

34 jquery DOM Set ÖRNEK 7: İki adet <p> elemanından ilkinin text içeriğini ikincisinin html içeriğini değiştiriniz. 34

35 jquery DOM Set ÖRNEK 7: İki adet <p> elemanından ilkinin text içeriğini ikincisinin html içeriğini değiştiriniz. 35

36 Yararlanılan Kaynaklar Ders Notları, Yrd. Doç. Dr. Yuriy Mishchenko 36

37 İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ 37