yzm 3215 İleri web programlama...javascript Çerçeveleri ve jquery giriş 2 bu bölümde;...

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ş

2

Bu bölümde;

Javascript çerçeveleri

Jquery I. Bölümo jQuery Temelleri

o Selektörler

o Komut Zincirleme

o DOM Okuma ve Yazma

ile ilgili konular anlatılacaktır.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

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ılabilirCelal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

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



– 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İŞ

7Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

jQuery

–Cross-platform javascript kütüphanesidir.

– 2006'da John Resig tarafından tasarlanmıştır.

– Şu anda en popüler js çerçevesi


jQuery – Top 100K Sites

9

https://www.similartech.com/categories/javascript


jQuery – Top 100K Sites

10

https://www.similartech.com/categories/javascript


• 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 (devam…)


http://jquery.com/download/

jQuery Temelleri

• Tipik jQuery komutunun yapısı aşağıdaki

gibidir:

$(selectör).eylem(parametreler)

o$ jQuery’ye erişim işareti

oSelektör HTML DOM elemanlarının altkümesini

belirtilen bir ifade

oEylem ilgili DOM elemanlarının üzerinde

yapılacak işlem


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.



• Document Ready: Dokümanın yüklendiğini

garanti eder.


$(document).ready(function(){

// jQuery Metotları buraya...

});

$(function(){

// jQuery Metotları buraya...

});

1

2

……………………………………………………


• ÖRNEK 1: Aşağıdaki kodları test edelim


$("a").click(function () { $(this).hide(); });

$("p").hide();

$("#test").hide();


• ÖRNEK 1:


• 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


• Ö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



• ÖRNEK 2: Id’leri btn1 ve btn2 olan butonlar

<p> etiketli elemanları saklama ve gösterme

işlevlerini gerçekleştireceklerdir.

22



• ÖRNEK 2: Id’leri btn1 ve btn2 olan butonlar

<p> etiketli elemanları saklama ve gösterme

işlevlerini gerçekleştireceklerdir.

23


• ÖRNEK 3: İçerisinde ‘Gizli’ kelimesi geçen

paragraf elemanlarını gizleyen buton işlevini

gerçekleştirelim.

24



• ÖRNEK 3: İçerisinde ‘Gizli’ kelimesi geçen

paragraf elemanlarını gizleyen buton işlevini

gerçekleştirelim.

25



• Site ziyaretçisinin web sitesinde yaptığı tüm

aksiyonlara olay (event) denir.

26

jQuery Olaylar

Mouse Events Keyboard Events Form Events Document

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload


• Ö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 Olaylar (devam…)

• 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 Komut Zincirleme


• 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 ve Set


• ÖRNEK 6: Bir <p> elemanı içerisindeki hem text

hem de html bilgisini ekrana gösteriniz.


jQuery DOM Get

• ÖRNEK 7: İki adet <p> elemanından ilkinin text

içeriğini ikincisinin html içeriğini değiştiriniz.


jQuery DOM Set

Yararlanılan Kaynaklar

36

• http://www.w3c.org

• http://www.w3schools.com/jquery

• Ders Notları, Yrd. Doç. Dr. Yuriy Mishchenko


http://www.w3c.org/

http://www.w3schools.com/jquery

37

İYİ ÇALIŞMALAR…

Yrd. Doç. Dr. Deniz KILINÇ

[email protected]

[email protected]


mailto:[email protected]

mailto:[email protected]

yzm 3215 İleri web programlama...javascript Çerçeveleri ve jquery giriş 2 bu bölümde;...

Documents