IT504 Javascript çerçeveleri

Slides:



Advertisements
Benzer bir sunumlar
HTML e GİRİŞ Temel HTML etiketleri.
Advertisements

Yrd. Doç. Dr. Mustafa Akkol
CSS.
MIT504 İnternet ve Web Programlama: Javascript programlama devam Yrd. Doç. Dr. Yuriy Mishchenko.
HTML’e Devam Uygulama.
Prof.Dr.Şaban EREN Yasar Üniversitesi Fen-Edebiyat Fakültesi
IT504 ~~CSS~~ Basamaklı Stil Sayfaları
Sık Kullanılan Kontroller
IT504 ~~DOM~~ Belge Nesne Modeli II
HTML, XHTML and CSS XHTML
Değişkenler ve bellek Değişkenler
T.C. İNÖNÜ ÜNİVERSİTESİ Arapgir Meslek YÜKSEKOKULU
HTML’ ye Giriş Uzm. Murat YAZICI.
MIT504 İnternet ve Web Programlama: Javascript programlama devam Yrd. Doç. Dr. Yuriy Mishchenko.
IT504 ~~JScript~~ JavaScript’e giriş
MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme
Slayt Efektleri.
Atlayarak Sayalım Birer sayalım
Diferansiyel Denklemler
MIT504 İnternet ve Web Programlama: HTML ve Web Tasarımı İlkeleri
Javascript Oğuz İNAL.
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
KIR ÇİÇEKLERİM’ E RakamlarImIz Akhisar Koleji 1/A.
IT504 ~~DOM~~ Belge Nesne Modeli I
CSS Öğr.Gör. Şükrü KAYA.
Tablosuz Tasarım Div ler.
MIT505 İnternet ve Web Programlama: Dinamik web sayfaları, javascript
HAZIRLAYAN:SAVAŞ TURAN AKKOYUNLU İLKÖĞRETİM OKULU 2/D SINIFI
CSS CSS- Cascading Style Sheets: Stil şablonları HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.
Kutu Modeli Özellikleri
IT 504 İnternet ve Web Programlama Tanıtım Yrd. Doç. Yuriy Mishchenko.
İNTERNET PROGRAMCILIĞI I BTP 207 Ders 6. Metinleri biçimlendirmek için kullanılır. Özellikleri ve aldıkları değerler:  Color: Metnin rengini belirler.
CSS Birimleri.
Form İşlemleri. Form İşlemleri Bütün programlama dillerinde kullanıcının girmiş olduğu bilgiler üzerinde.
 HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir.  Formlar, web sayfası tasarlayan kişi veya şirketlerle internet.
CSS’de Class ve ID. ID Bir HTML dosyasının içeriğinde, sadece bir öğeye verilebilecek bir değerdir. id tektir. id'ler sayfada sadece tek bir html etiketine.
Menü (Navigasyon) Yapımı
Font Özellikleri Web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır.
Yrd. Doç. Dr. Yuriy Mishchenko
XML Document Object Model (DOM)
PROGRAMLAMA DİLLERİNE GİRİŞ Ders 8: Windows Formları
HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni.
CSS – Stil Şablonları (Cascading style Sheet)
WEB TASARIMININ TEMELLERİ HTML. HTML FORMLARI VE BİLGİ GİRİŞİ FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE.
Yrd. Doç. Dr. Yuriy Mishchenko
İNTERNET PROGRAMCILIĞI I
İNTERNET PROGRAMLAMA - 1
Proje Konuları.
İNTERNET PROGRAMCILIĞI I
ÖĞR. GRV. Ş.ENGIN ŞAHİN BİLGİ VE İLETİŞİM TEKNOLOJİSİ.
Diferansiyel Denklemler
Tablo Özellikleri Tablo oluştururken kullandığımız , , ve etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan.
Javascriptte Olay Fonksiyonları (Events)
HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I Bilişim Teknolojileri Ö ğ retmeni.
CSS NEDİR.
Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+’da.
İnternet Programlama-I
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
DYNAMİC HTML EVENT MODELS SİNEM YARDIMCI ÇAKIL SU KIRLI.
Web Teknolojileri Hafta 6 1. İçerik  Html Formlar  Javascript 2.
Web Tasarımı 2.Hafta. HTML Nedir  Hyper Text Markup Language (Hiper Metin İşaretleme Dili) web sayfalarını oluşturmak için kullanılan standart metin.
Web Teknolojileri Hafta 9 1. İçerik  Bootstrap
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
HTML HTML Stilleri.
Web Teknolojileri Hafta 8.
İNTERNET PROGRAMCILIĞI 1
WEB TASARIMI STİL ŞABLONLARI (CSS KULLANIMI) SAVAŞ TUNÇER.
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
İST1111 BİLGİSAYAR UYGULAMALARI HTML
Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar
Sunum transkripti:

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