IT504 Javascript çerçeveleri

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

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

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

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

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

Javascript çerçevesi kullanım örneği
<!DOCTYPE html> <html> <head> <script src=" </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>

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

jQuery kod örneği <!DOCTYPE html> <html> <head> <script src=" </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>

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>

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>

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

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

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 (

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

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

jQuery temelleri İndirme
Özel kopyası, web sitesinden sunulduğu, ( 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=" </script> Microsoft CDN <script src=" </script>

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

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

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

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)

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

jQuery olaylarla çalışma örneği
<!DOCTYPE html> <html> <head> <script src=" </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>

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ı

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

ö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

ö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

<!DOCTYPE html> <html> <head> <script src=" </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>

<!DOCTYPE html> <html> <head> <script src=" </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>

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

<!DOCTYPE html> <html> <head> <script src=" </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>

<!DOCTYPE html> <html> <head> <script src=" </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>

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

<!DOCTYPE html> <html> <head> <script src=" </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>

<!DOCTYPE html> <html> <head> <script src=" </script> <script> $(document).ready(function(){ $("#but1").click(function(){ $("#w3s").attr("href"," }); $("#but2").click(function(){ $("#w3s").attr({ "href" : " "title" : "W3Schools jQuery Tutorial" }); </head> <body> <p><a href=" 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>

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

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

<!DOCTYPE html> <html> <head> <script src=" </script> <style> .italic {font-style:italic;}</style> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); </head> <body> <p>Bu bir paragraf</p>  <p class="italic">Bu italik paragraf</p>  <button>italik paragrafları sil</button> </body> </html>

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

<!DOCTYPE html> <html> <head> <script src=" </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>

<!DOCTYPE html> <html> <head> <script src=" </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>

<!DOCTYPE html> <html> <head> <script src=" </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>

<!DOCTYPE html> <html> <head> <script src=" </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>

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

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)

$(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)

$(selektör).slideDown(hız,callback-fonksiyonu) $(selektör).slideUp(hız,callback-fonksiyonu) $(selektör).slideToggle(hız,callback-fonksiyonu)

jQuery Animasyon <!DOCTYPE html> <html> <head> <script src=" </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>

jQuery Animasyon <!DOCTYPE html> <html> <head> <script src=" </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>

jQuery Animasyon http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src=" </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>

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

jQuery Animasyon <!DOCTYPE html> <html> <head> <script src=" </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>

jQuery Animasyon http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src=" </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>

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

jQuery Animasyon <!DOCTYPE html> <html> <head> <script src=" </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>

jQuery Animasyon <!DOCTYPE html> <html> <head> <script src=" </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>

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

jQuery AJAX http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src=" </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>

jQuery AJAX <!DOCTYPE html> <html> <head> <script src=" </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>

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ı

jQuery AJAX http://www.scinetcentral.com/~mishchenko/MIT504.html
<!DOCTYPE html> <html> <head> <script src=" </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>  </body> </html>

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(){..."

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

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() ... (

jQuery UI jQuery UI, jQuery'nin "standart" kullanıcı arayüzü (User Interface, UI) kütüphanesi ( veya Direkt olarak bağlanırsa, web sayfası içerisinden şu şekilde kullanılmalı, <script src="

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

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ı

jQuery UI http://www.scinetcentral.com/~mishchenko/MIT504.html
<!doctype html> <html> <head> <link rel="stylesheet" href=" <script src=" <script src=" <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>

Son örnek

jQuery çok eğlenceli <!DOCTYPE html> <html> <head> <script src=" <style>#p1 {padding:10px;width:200px;border:solid black 5px;}</style> <script> $(document).ready(function(){ $("#p1").hover(function(){ $(this).text("8-) iceri girdiniz!!!").css({"color":"red","font-weight":"bold","text-align":"center"}); }, function(){ $(this).text("Bye Bye, geri bekliyoruz! :-)").css({"color":"black","font-weight":"normal","text-align":"left"}); }); </script> </head> <body> <p id="p1">ustune fare cekin ... </p> </body> </html>

Egzersiz Son derste paylaşılmış javascript açılan menüsü jQuery kullanarak yeniden yazın (tabi jQuery kullanarak, jQuery UI kullanmadan!)

IT504 Javascript çerçeveleri

Benzer bir sunumlar

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

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

IT504 Javascript çerçeveleri

Benzer bir sunumlar

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

Benzer bir sunumlar

Proje hakkında

Geri bildirim