Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

IT504 Javascript çerçeveleri

Benzer bir sunumlar


... konulu sunumlar: "IT504 Javascript çerçeveleri"— Sunum transkripti:

1 IT504 Javascript çerçeveleri
Yrd. Doç. Dr. Yuriy Mishchenko

2 Javascript çerçeveleri nedir?
Javascript çerçeveleri, RIA geliştirmede kullanılan ve temel Javascript DOM işleri için daha kolay veya komforlu yöntemleri sunan javascript kütüphaneleri

3 Javascript çerçeveleri nedir?
Javascript çerçeveleri HTML veya Javascript DOM'dan ayrı bir teknolojiler değil Javascript çerçeveleri temel olarak HTML, CSS veya Javascript DOM araçları tarafından çözülebilir işleri çözmekte

4 Javascript çerçeveleri nedir?
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şturur Bu yapıları kullanarak tipik RIA geliştirme hızlandırılabilir

5 Javascript çerçeveleri nedir?
Javascript çerçeveleri genellikle bir javascript kütüphane olarak geliştirilip tek veya birkaç .js dosya olarak yayınlanır Javascript çerçevesinden yararlanmak için, ya ilgili js dosyası web sayfanız ile birlikte sunucunuzdan indirilebilir veya genellikle javascript çerçevenin yazarısının web sitesinden HTML script tagındaki "src" komutunu kullanarak direkt olarak bağlanabilir

6 Javascript çerçevesi kullanım örneği
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>

If you click on me, I will disappear.

Click me away!

Click me too!

http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

7 En önemli javascript çerçeveleri
jQuery MooTools Prototype YUI DOJO ...

8 jQuery kod örneği <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $('#btnSlideUp').click(function() { $('#slideMe').slideUp('slow'); }); $('#btnSlideDown').click(function() { $('#slideMe').slideUp(); }); $('#btnSlideToggle').click(function() { $('#slideMe').slideToggle('fast'); }); </script> </head> <body> <div id="slideMe"> Kayan metin kutusu!!! </div> <input type="button" id="btnSlideUp" value="Slide Up"> <input type="button" id="btnSlideDown" value="Slide Down"> <input type="button" id="btnSlideToggle" value="Slide Toggle"> </body> </html>

Kayan metin kutusu!!!
http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

9 Prototype Kod örneği <!DOCTYPE html> <html> <head> <script src="js/prototype.js"></script> <style> div { padding: 10px; margin: 5px; border: 1px solid black; width: 75%; } </style> <script> document.observe('dom:loaded', function() { $$('ol#meyveliste li').each(function(elmt) { elmt.observe('click', function(ev) { var listitem = ev.target; var aboveitems = listitem.previousSiblings(); if (aboveitems.length > 0) { var itemtext = aboveitems[0].innerHTML; aboveitems[0].innerHTML = listitem.innerHTML; listitem.innerHTML = itemtext; } }); </script> </head> <body> <ol id="meyveliste"><li>Elma</li><li>Armut</li><li>Muz</li></ol> </body> </html>

  1. Elma
  2. Armut
  3. Muz
http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

10 MootTools Kod örneği <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <script src="js/mootools.js" type="text/javascript"></script> <script> window.addEvent('domready', function() { $('mainnav').getElements('li a').each( function(item){ if ( !item.hasClass('clicked') ) { item.setStyle('opacity',0.01).addEvent('mouseenter', function() {this.fade(1)}).addEvent('mouseleave', function(){this.fade(0.01)}); } }) </script> </head> <body> <ul id="mainnav"> <li><a href="/" >home</a></li> <li><a href="#">products</a></li> <li><a href="#">contact</a></li></ul> </body> </html>

http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

11 Javascript çerçeveleri nedir?
Javascript çerçeveleri tipik olarak standart javascript DOM işleri için farklı araçlar sunar DOM taranması ve DOM'da navigasyon DOM hierarşi güncelleştirilmesi Javascript olay işlemleri ve animasyon AJAX iletişim Nesne tabanlı programlama (OOP) ile ilgili işler

12 Javascript çerçeveleri nedir?
jQuery jQuery en popüler js-çerçevelerinden biridir Temiz dil yapıları, kolay DOM taranması, iyi olay işlem ve animasyon araçları ve AJAX; standart UI kütüphanesi (jquery.ui) Web uygulama hızlandıran araç kolleksiyonu 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 Zengin nesneler ve nesne devralma araçları Genişletilmiş DOM, standart DOM elemanlarına yeni metotlar tanımlanmış

13 jQuery Cross-platform javascript kütüphanesi
2006'da John Resig tarafından tasarımlanmış Şu anda en popüler js çerçevesi, İnternette var olan web sitelerinin %75'inde kullanılmakta (http://www.similartech.com/categories/javascript)

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

15 jQuery jQuery ana kısımları: Animasyon efektleri DOM tarama
DOM güncelleştirme AJAX işlemeleri UI aletleri

16 jQuery temelleri İndirme
Özel kopyası, web sitesinden sunulduğu, (http://jquery.com/download/) jQuery CDN <script src="//code.jquery.com/jquery min.js"></script> <script src="//code.jquery.com/jquery-migrate 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 min.js"> </script> Google CDN Microsoft CDN http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

17 jQuery temelleri Tipik jquery komutunun yapısı:
$(selectör).eylem(parametreler) Selektör, DOM elemanlarının altkümesini belirtilen bir ifade Eylem, ilgili DOM elemanlarının üzerinde yapılacak işlem Bu ölçüde, jQuery temel tasarım kavramı ve dil yapıların odak noktası, farklı ve esnek DOM elemanlarının kümeleri üzerinde işlem yapılması dır

18 jQuery temelleri jQuery selektörleri, DOM hierarşisinde elemanları bulup elde etmek için kullanılır; jQuery selektörleri: metin satır şeklindedir CSS selektör notasyonu ile uyumludur Özel jQuery selektörleri de vardır

19 jQuery temelleri 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 düzen selektörleri $("div + p") – div yanında olan p elemanları $(".altemenu ~ a") - .altmenu elemanlarının kardeş olan a elemanları CSS hierarşi selektörleri $(".menu > a") - .menu elemanlarının direkt çocuğu olan a elemanları $("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ı $("p:last-of-type") – ana elemanının a çocuk-elemanları arasında son olan çocuk a elemanı $("div:nth-child(2)")- ana elemanının 2. çocuğu olan div elemanı $("a:nth-type(2)")- ana elemanının a çocuk-elemanları arasında 2. olan çocuk a elemanı $("ul li:first-child") – ilk olan ul li çocuklar

20 jQuery temelleri ö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)

21 jQuery temelleri ö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' kelimesi içeren title özelliğini alan elemanlar $("[title*='hello']"), 'hello' metni içeren title özelliğini alan elemanlar

22 jQuery olaylarla çalışma örneği
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); $("p").dblclick(function(){ $(this).hide(); }); $("#p1").mouseenter(function(){ alert("p1 e girdiniz!"); }); $("#p1").mouseleave(function(){ alert("p1 den ayrildiniz"); }); $("#p1").mousedown(function(){ alert("p1 de mousedown!"); }); $("#p1").mouseup(function(){ alert("p1 de mouseup!"); }); }); </head> <body> <p>Tıkandığımda saklanacağım!</p> <p id="p1">Ben de!</p> </body> </html>

23 jQuery DOMda navigasyon
özel selektörler: $(selektör).parent(), elemanın ana elemanları $(selektör).parents(), elemanın tüm yukarıda olan elemanlar (DOM köküne kadar) $(selektör).parentsUntil(selektör), belirli elemana kadar tüm yukarıdaki ana elemanları

24 jQuery DOMda navigasyon
özel selektörler: $(selektör).children(), elemanın direkt çocukları $(selektör).children(selektör), elemanın belirli tipten direkt çocukları $(selektör).find(selektör), elemanın belirli tipten tüm alttaki çocukları

25 jQuery DOMda navigasyon
özel selektörler: $(selektör).siblings(), elemanın kardeşleri $(selektör).siblings(selektör), elemanın belirli tipten kardeşleri $(selektör).next(), elemanın sonraki kardeş $(selektör).nextAll(), elemanın tüm sonraki kardeşler $(selektör).nextUntil(selektör), bir elemana kadar elemanın tüm sonraki kardeşler $(selektör).prev(), $(selektör).prevAll(), $(selektör).prevUntil(selektör), benzer şekilde

26 jQuery DOMda navigasyon
özel selektörler: $(selektör).first(), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin ilk elemanı $(selektör).last(), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin son elemanı $(selektör).eq(index), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin belirli indexte olan elemanı $(selektör).filter(selektör), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin altkümesi $(selektör).not(selektör), filter'nin tersi

27 jQuery DOMda navigasyon
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div p").first().css("background-color","yellow"); }); </head> <body> <p>Ilk paragraf.</p> <div> <p>divde ilk paragraf.</p> <!– bu tek arka plani rengi sari olacak --> <p>divde son paragraf.</p> </div><br> <p>başka divde ilk paragraf.</p> <p>başka divde son paragraf.</p> </div> </body> </html>

28 jQuery DOMda navigasyon
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color","red"); }); </head> <body> <h1>Merhaba</h1> <p>Ben Donald Duck'im.</p> <p class="intro">Ben Duckburg'de yasiyorum.</p> <!– bunlar kirmizi olacak --> <p class="intro">Ben Duckburg'i seviyorum.</p> <!– bunlar kirmizi olacak --> <p>Mickey Fare benim en iyi arkadasim!</p> </body> </html>

29 jQuery komutlarının zincirlenmesi
jQuery komutlarının sonucu tipik olarak aynı jQuery nesnesidir; bu nedenle jQuery komutları tipik olarak zincirlenebilir

30 jQuery komutlarının zincirlenmesi
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color","red"); }); </head> <body> <h1>Merhaba</h1> <p>Ben Donald Duck'im.</p> <p class="intro">Ben Duckburg'de yasiyorum.</p> <!– bunlar kirmizi olacak --> <p class="intro">Ben Duckburg'i seviyorum.</p> <!– bunlar kirmizi olacak --> <p>Mickey Fare benim en iyi arkadasim!</p> </body> </html>

31 jQuery komutlarının zincirlenmesi
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){$(this).hide();}).dblclick(function(){$(this).hide();}); $("#p1").mouseenter(function(){alert("p1 e girdiniz!");} ).mouseleave(function(){alert("p1 den ayrildiniz");} ).mousedown(function(){alert("p1 de mousedown!");}).mouseup(function(){alert("p1 de mouseup!");}); }); </head> <body> <p>Tıkandığımda saklanacağım!</p> <p id="p1">Ben de!</p> </body> </html>

32 jQuery DOMu güncelletirme
DOM güncelleştirme komutları: $(selektör).text(), elemanın metni elde etmek veya değiştirmek $(selektör).html(), elemanın html'i elde etmek veya değiştirmek $(selektör).val(), elemanın value özelliğini elde etmek veya değiştirmek $(selektör).attr(isim), elemanın "isim"li özelliğini elde etmek veya değiştirmek

33 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); </head> <body> <p id="test1">Bu bir paragraf.</p> <p id="test2">Bu baska bir paragraf.</p> <p>Input field: <input type="text" id="test3" value="Mickey Fare"></p> <button id="btn1">Metin değiştir</button> <button id="btn2">HTML değiştir</button> <button id="btn3">Value değiştir</button> </body> </html>

34 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#but1").click(function(){ $("#w3s").attr("href","http://www.w3schools.com/jquery"); }); $("#but2").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" }); </head> <body> <p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button id=but1>href değiştir</button> <button id=but2>href ve title değiştir</button> </body> </html>

35 jQuery DOMu güncelletirme
DOM güncelleştirme komutları: $(selektör).append(), elemanın sonuna yeni html ekle $(selektör).prepend(), elemanın başına yeni html ekle $(selektör).after(), elemanın sonrasına yeni html $(selektör).before(), elemanın öncesine yeni html ekle

36 jQuery DOMu güncelletirme
DOM güncelleştirme komutları: $(selektör).remove(), elemanı sil $(selektör).empty(), elemanın çocuklarını sil $(selektör).remove(filtre), belirli elemanlar sil

37 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <style> .italic {font-style:italic;}</style> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); </head> <body> <p>Bu bir paragraf</p> <!-- bu silinmeyecek --> <p class="italic">Bu italik paragraf</p> <!-- bunlar silinecek --> <button>italik paragrafları sil</button> </body> </html>

38 jQuery DOMu güncelletirme
DOM güncelleştirme komutları: $(selektör).css(), elemanın stili değiştir $(selektör).addClass(), elemanlara yeni sınıflar ekle $(selektör).removeClass(), elemanlardan belirli sınıflar sil

39 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Background color = " + $("p").css("background-color")); }); </head> <body> <p style="background-color:#ff0000">Paragraf</p> <button>Rengi goster</button> </body> </html>

40 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button:first-of-type").click(function(){ $("p").first().css("background-color","yellow"); }); $("button:nth-of-type(2)").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); </head> <body> <p style="background-color:#ff0000"> Paragraf </p> <p style="background-color:#00ff00"> Paragraf </p> <p style="background-color:#0000ff"> Paragraf </p> <button>bir rengi degistir</button> <button>tum renkler ve fontlar degistir</button> </body> </html>

41 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button:first-of-type").click(function(){ $("p").first().css("background-color","yellow"); }); $("button:nth-of-type(2)").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); </head> <body> <p style="background-color:#ff0000"> Paragraf </p> <p style="background-color:#00ff00"> Paragraf </p> <p style="background-color:#0000ff"> Paragraf </p> <button>bir rengi degistir</button> <button>tum renkler ve fontlar degistir</button> </body> </html>

42 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").eq(0).click(function(){ $("p").first().css("background-color","yellow"); }); $("button").eq(1).click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); </head> <body> <p style="background-color:#ff0000"> Paragraf </p> <p style="background-color:#00ff00"> Paragraf </p> <p style="background-color:#0000ff"> Paragraf </p> <button>bir rengi degistir</button> <button>tum renkler ve fontlar degistir</button> </body> </html>

43 jQuery DOMu güncelletirme
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); <style type="text/css"> .important {font-weight:bold; font-size:xx-large;} .blue { color:blue; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>Paragraph 1</p> <p>Paragraph 2</p> <div>Önemli metin!</div> <button>Işle</button> </body> </html>

44 jQuery DOMu güncelletirme
DOM güncelleştirme komutları (boyutları) $(selektör).width() $(selektör).height() $(selektör).innerWidth() $(selektör).innerHeight() $(selektör).outerWidth() $(selektör).outerHeight()

45 jQuery Animasyon jQuery saklama komutları
$(selektör).hide(hız,callback-fonksiyonu), sakla $(selektör).show(hız,callback-fonksiyonu), göster $(selektör).toggle(hız,callback-fonksiyonu), sakla/göster Callback-fonksiyonu, komut gerçekleştikten sonra çağırılacak fonksiyonun ismi (zorunlu değil)

46 jQuery Animasyon jQuery saklama komutları
$(selektör).fadeIn(hız,callback-fonksiyonu) $(selektör).fadeOut(hız,callback-fonksiyonu) $(selektör).fadeToggle(hız,callback-fonksiyonu) $(selektör).fadeTo(hız,opacity,callback-fonksiyonu)

47 jQuery Animasyon jQuery saklama komutları
$(selektör).slideDown(hız,callback-fonksiyonu) $(selektör).slideUp(hız,callback-fonksiyonu) $(selektör).slideToggle(hız,callback-fonksiyonu)

48 jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); </head> <body> <button>Toggle</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>

49 jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").fadeToggle(1000); }); </head> <body> <button>Toggle</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>

50 jQuery Animasyon http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); <style type="text/css"> #panel,#flip {padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;} #panel {padding:50px;display:none;} </style> </head> <body> <div id="flip">Kaydır paneli</div> <div id="panel">Hello world!</div> </body> </html>

51 jQuery Animasyon İleri animasyon, $(selektör).animate(parametreler,hız,callback-fonksiyonu) komutu kullanarak gerçekleştirilebilir

52 jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); </head> <body> <button>Calistir</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body> </html>

53 jQuery Animasyon http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); //sırayla calisacak animasyon }); </head> <body> <button>Calistir</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>

54 jQuery Animasyon İleri animasyon, $(selektör).stop(stopAll,goToEnd) komutu animasyon durdurmak için kullanılır stopAll ("true/false") parametresi, tek veya tüm animasyonların durdurulması belirtiyor goToEnd ("true/false"), animasyonun son haline götürülmesi belirten parametredir

55 jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle(5000); }); $("#stop").click(function(){ $("#panel").stop(); <style type="text/css"> #panel,#flip {padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;} #panel {padding:50px; display:none;} </style> </head> <body> <button id="stop">Kayma durdur</button> <div id="flip">Paneli kaydırınız</div> <div id="panel">Hello world!</div> </body> </html>

56 jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000,function(){ $("#p1").css("color","black"); }); }); //zincirlenme, komutlar sırayla çalışacak, // ayrıca animasyon sonunda rengi siyaha değiştirecek callback-fonksiyonu da var </head> <body> <p id="p1">jQuery cok eglenceli!!</p> <button>tikla beni</button> </body> </html>

57 jQuery AJAX jQuery kullanarak AJAX isteklri $(selektör).load(), $.get() ve $.post() komutlarını kullanarak gerçekleştirilir $(selector).load(URL,data,callback) jQuery load komutu, AJAX isteğin cevabı $(selector) elemanına direkt olarak yazıyor Callback fonksiyonu varsa, veri aldıktan sonra çağırılacak fonksiyondur

58 jQuery AJAX http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); </head> <body> <div id="div1"><h2>jQuery AJAX bunu degistiricek</h2></div> <button>Veri indir</button> </body> </html>

59 jQuery AJAX <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt");}); }); </head> <body> <div id="div1"><h2>jQuery AJAX bunu degistiricek</h2></div> <button>Veri indir</button> </body> </html>

60 jQuery AJAX jQuery $.get(), AJAX get isteği göndermek için kullanılır
$.get(URL,callback) jQuery $.post(), AJAX get isteği göndermek için kullanılır $.post(URL,data,callback) $.get ve $.post komutları sunucunun cevabını işletmez, cevabın gösterilmesi gerekirse callback-fonksiyonu olarak kullanılmalı

61 jQuery AJAX http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("demo_test_post.asp", { name:"Yuriy", city:"Mersin" }, function(data,status){ $("p").html("Veri: " + data + "\nStatus: " + status); }); </head> <body> <button>HTTP POST istegi gonder ve sonucu goster</button> <p>Bekleniyor...</p> <!-- << "Data: Dear Yuriy. Hope you live well in Mersin. Status: success" --> </body> </html>

62 jQuery noConflict() komutu
jQuery'nin çök önemli bir özelliği, diğer js çerçeveleri ile birlikte çalışabilmesi dir Eğer diğer js çerçevesi (örneğin MooTools) $ sembolümü kullanmaktaysa, jQuery $.noConflict() komutu jQuery'nin $ sembolüne bağlantısından vazgeçiyor Bu durumda jQuery hala kullanılabilir, $ sembolü yerinde jQuery nesnesinin açık olarak kullanılmalı, "jQuery(document).ready(function(){..."

63 Baze jQuery olaylar $(selektör).bind("olay-ismi",işleyici-fonksiyonu) ve $(selektör).on("olay-ismi",işleyici-fonksiyonu), genel olay işleyici atama yöntemi $(selektör).unbind() ve $(selektör).off(), elemanın olay işleyicileri silme yöntemi

64 jQuery olaylar Diğer baze olaylar: $(selektör).click()
$(selektör).dblclick() $(selektör).focus() $(selektör).hover() $(selektör).mouseover() $(selektör).mouseout() $(selektör).mousedown() $(selektör).mouseup() $(selektör).mouseenter() $(selektör).mouseleave() $(selektör).keydown() $(selektör).keyup() ... (http://www.w3schools.com/Jquery/jquery_ref_events.asp)

65 jQuery UI jQuery UI, jQuery'nin "standart" kullanıcı arayüzü (User Interface, UI) kütüphanesi (http://jqueryui.com/ veya Direkt olarak bağlanırsa, web sayfası içerisinden şu şekilde kullanılmalı, <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

66 jQuery UI jQuery UI tarafından sağlanan UI aletleri:
Accordion – açılan kontainer kutularının sırası Autocomplete – auto-complete giriş alanları Button – yeni düğmeler Datepicker – ileri tarih giriş alanı Dialog – dialog kutuları Menu – açılan menüler Progressbar – progress bar aleti Slider – slider aleti Spinner – sayaç giriş alanı Tabs – tabed kullanıcı arayüzü Tooltip – fare üzerindeyken yardım

67 jQuery UI jQuery UI tarafından sağlanan UI aletleri:
Draggable – (kullanıcı tarafından) çekilebilir UI elemanları Droppable – drag-and-drop UI elemanları Resizable – boyut değiştirilebilir UI elemanları Selectable – seçilebilir UI elemanları Sortable – belirli sırada olan çekilebilir UI elemanları

68 jQuery UI http://www.scinetcentral.com/~mishchenko/MIT504.html
<!doctype html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <style>.ui-menu { width: 100px; font-size:12px; }</style> </head> <body> <ul id="menu"> <li><a href=#>Menu 1</a> <ul> <li><a href=#>Menu 1>1</a></li> <li><a href=#>Menu 1>2</a></li> </ul> </li> <li><a href=#>Menu 2</a></li> <li><a href=#>Menu 3</a> <li><a href=#>Menu 3>1</a> <li><a href=#>Menu 3>1>1</a></li> <li><a href=#>Menu 3>1>2</a></li> <li><a href=#>Menu 3>2</a></li> <script> $("#menu").menu(); </script> </body> </html>


"IT504 Javascript çerçeveleri" indir ppt

Benzer bir sunumlar


Google Reklamları