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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
En önemli javascript çerçeveleri jQuery MooTools Prototype YUI DOJO ... http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.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> http://www.scinetcentral.com/~mishchenko/MIT504.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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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ış http://www.scinetcentral.com/~mishchenko/MIT504.html
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) http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
jQuery jQuery ana kısımları: Animasyon efektleri DOM tarama DOM güncelleştirme AJAX işlemeleri UI aletleri http://www.scinetcentral.com/~mishchenko/MIT504.html
jQuery temelleri İ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> <script src="//code.jquery.com/jquery-migrate-1.2.1.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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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) http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.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ı http://www.scinetcentral.com/~mishchenko/MIT504.html
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ı http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
jQuery komutlarının zincirlenmesi jQuery komutlarının sonucu tipik olarak aynı jQuery nesnesidir; bu nedenle jQuery komutları tipik olarak zincirlenebilir http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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() http://www.scinetcentral.com/~mishchenko/MIT504.html
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) http://www.scinetcentral.com/~mishchenko/MIT504.html
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) http://www.scinetcentral.com/~mishchenko/MIT504.html
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) http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
jQuery Animasyon İleri animasyon, $(selektör).animate(parametreler,hız,callback-fonksiyonu) komutu kullanarak gerçekleştirilebilir http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.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ı http://www.scinetcentral.com/~mishchenko/MIT504.html
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> http://www.scinetcentral.com/~mishchenko/MIT504.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(){..." http://www.scinetcentral.com/~mishchenko/MIT504.html
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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) http://www.scinetcentral.com/~mishchenko/MIT504.html
jQuery UI jQuery UI, jQuery'nin "standart" kullanıcı arayüzü (User Interface, UI) kütüphanesi (http://jqueryui.com/ veya http://code.jquery.com/ui/) 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
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 http://www.scinetcentral.com/~mishchenko/MIT504.html
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ı http://www.scinetcentral.com/~mishchenko/MIT504.html
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-1.10.2.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> http://www.scinetcentral.com/~mishchenko/MIT504.html
Son örnek http://www.scinetcentral.com/~mishchenko/MIT504.html
jQuery çok eğlenceli <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <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> http://www.scinetcentral.com/~mishchenko/MIT504.html
Egzersiz Son derste paylaşılmış javascript açılan menüsü jQuery kullanarak yeniden yazın (tabi jQuery kullanarak, jQuery UI kullanmadan!) http://www.scinetcentral.com/~mishchenko/MIT504.html