J Query Musa CAVUS

Kendinize Gvenerek jQuery
Bilgisayar Mhendisi Musa AVU
KENDNZE GVENEREK
jQuery
Musa AVU
Almanya, 2010
Kendinize Gvenerek jQuery Musa AVU
Bedava Datm: Kasm - 2010
Musa avu
Musa AVU
Bu kitabn her trl yayn hakk Musa avua aittir. Sayfa Tasarm: Musa avu
Web Adresi: www.musa-cavus.com, Eposta: jquery@musa-cavus.com
Musa AVU
E im Yeliz ve K z m Ecrin e ithafen
Musa AVU
nsz lk kitabm olan Kendinize Gvenerek Java kitabndan sonra Farkl Ol Mal Olma adl kiisel geliim kitabm yazdm ve dedim ki lkemdeki insanlara faydal olabilmen iin bir teknik kitab daha yazmalsn ve bu seferki kitap hem byk bir a kapatmal hemde ok yarar salamal.
Trkiyenin, Web dnyasnda gn getike ok gelitiini biliyoruz. Web tasarm alannda Trke kaynaklarn eksikliklerin olduunu grdm. Amerika ve Avrupada u an byk siteler grsellikleri iin gl ktphaneler kullanmaktadrlar. jQuery bu ktphanelerin banda gelmektedir. Maalesef jQuery alannda Trkiyede hibir Trke kaynak kitap mevcut deildir. Ben bu kitabn bu a kapatacan dnyorum. Her kesimdeki insann bu kitaptan faydalanmas iin yine Trkiyede bir ilke imza atarak Trkiyedeki ilk jQuery kitabn bedava datmak istiyorum. Bunun iin kendi emeimle nternet ortamnda kitabm yaygnlatrmaya karar verdim. Sizlerden isteim eer kitabm okuduysanz ve beendiyseniz bir dostunuza iletmeniz olacaktr. Ya da http://www.musa-cavus.com adresinden kitabm indirme tavsiyesinde bulunmanzdr. Kitab bedava datmam, kitabn basit konulara deinmesi anlamn tamamaktadr. jQuery dilini iyi renmeninde temelinde JavaScript dilini iyi bilmeniz yatar. Bunun iin kitapta ncelikle JavaScript konusuna arlk verdim. Daha sonra AJAX konusuna deindim ve son olarak jQuery konusuna gei yaptm. JavaScriptin bu kitapta ne ii var canm demeyin, nk JavaScript jQuery ile et ve trnak gibi ayrlmaz iki paradr. Eer ilk kitabm olan Kendinize Gvenerek Java kitabm okudysanz benim anlatm tarzm az ok biliyorsunuzdur. Genelde kitabmda gereksiz anlatmlara deinmiyorum, nk gereksiz bilgilerle beyin hcrelerinizi bou bouna megul etmek boa vakit kaybdr. Daha ok rnekler eliinde konular anlatyorum ve bir konuda daha nce anlatmadm konulara deinmiyorum. O yzden size tavsiyem, kitab batan sona doru okumanz ve uygulamanz olacaktr. Bazen kitaptaki rnekler uzun gelebilir, fakat sizde greceksiniz ki rneklerin uzun olmasna ramen bir zorluk ekmeyeceksiniz, nk rnekleri hem basit tuttum hemde daha nce anlattm blmleri koydum. Musa AVU - 2010
Musa AVU
10
Musa AVU
Blm 1 JavaScripte giri
Musa AVU
11
1.1 JavaScript ile web sayfas balants Fazla laf uzatmadan ve gereksiz yazlarla sizi megul etmeden hemen ilk rneimiz olan JavaScript kullanmadan basit bir HTML rneine geiyorum.: <html> <body> Bu sayfada JavaScript kullanilmiyor. </body> </html> jsyok.html Editr olarak herhangi basit bir metin editr kullanabilirsiniz. Windows altndaki Notepad ok basit bir editrdr fakat sizin ilk aamada tm deiiklikleri kendiniz kodlayacanzdan JavaScripti daha verimli renebileceksiniz. Ben biraz daha kolaylk ve renklilik olsun diye Opensource olan Notepad++ editrn kullanyorum. Yukardaki kodu jsyok.html dosyasna kayt edin ve fare ile ift tkladnzda standart taraycnz alacaktr ve u yazy greceksiniz. Bu sayfada JavaScript kullanilmiyor.
Kitaptaki HTML kodlarn aklamyorum, nk sizin HTML bilgisine sahip olduunuzu varsayyorum. Bundan sonraki rnekleri verirken, nce rnei yazacam ve ardndan ekran ktsn ekleyeceim. Yukardaki rnei JavaScript ile nasl yapabiliriz? JavaScript kullanabilmenin birka yolu vardr. Bunlardan ilki <script> </script> arasna yazacamz komutlarla olabilmektedir. <html> <body> <script> alert("Merhaba Dnya"); </script> </body> </html> alert.html
12
Musa AVU
ekil1
Html kodunda <script> ile </script> taglar arasnda alert() fonksiyonunu kullandm. alert() fonksiyonunun zellii, parametre olarak verdiiniz metini ekil1deki gibi ekranda gstermesidir. Sar bir gen ierisinde bir nlem, yannda bizim alert() fonksiyonuna parametre olarak verdiimiz metin, bir Tamam dmesi ve balk olarak [JavaScript Uygulamas] yazs. Ben uygulamalarm altrrken Firefox kullanyorum. JavaScript rendikten sonra, size tavsiyem, rneklerinizi birka taraycdan geirmek olsun, nk JavaScript her taraycya gre farkl sonu verebilmektedir. Uygulamalarnzn sonularndan emin olabilmek iin birka taraycdan geirmelisiniz. Sizin uygulamanz, web sayfanz ziyaret eden kiilerin ne tr bir tarayc kullandn nceden kestiremediiniz iin bunu yapmanz gerekmektedir. JavaScript programlamasn bizler daha ok nternet ortamnda kullanrz. Bu yzden nternet hakkndaki bilgilerimiz temel seviyede yeterlilik gstermelidir. nternet sadece World Wide Web deildir, Mesela ftpde nternet ortamnda kullanlan bir protokoldr ve www protokolnden ok daha nce kullanlmtr. Taraycnzn adres ksmna ftp://ftp.microsoft.com/ yazn ve arama tuuna basn. Ben bunu yaptmda karma u bilgiler kt:
Musa AVU
13
ekil2
ftp gibi birok nternet hizmetleri mevcuttur. Hepimizin kulland E-Mail. Uzaktaki bilgisayarlar kullanabilmek iin kullandmz telnet protokol. ssh, scp ve usenet gibi.Yalnz nternet ortam www sayesinde bu poplaritesini kazand. Biz www zelliini taraycmzda http protokolyle kullanabiliriz. Yine adres ubuunda http://www.hotmail.com.tr girdiimde yle bir grnt elde ediyoruz:
14
Musa AVU
ekil3
Kartrmamamz gereken nokta http ile htmldir. http nternette yaymlanan web sayfalarna ulamak iin gereken bir protokoldr. html ise web sayfalarnn ieriini grebilmemiz salayan bir tarayc dilidir. ekil3te kan grntnn zerine sa fare ile tkladnzda ve kan popup mnsnden Sayfa kaynan gster seeneini setiinizde karnza ekil3teki sayfann HTML, CSS ve JavaScript kodu gelecektir.
Musa AVU
15
ekil4 Gnmzdeki nemli web saylarn JavaScript olmadan dnmek mmkn deildir. Herkes bu yzden taraycsnda JavaScript zelliini kullanmaktadr, ama baz kiiler buna ramen JavaScriptlere izin vermek istememektedirler.Bu kullanclar iin yle bir kod eklentisi yapabilirsiniz: <html> <body> <script> alert("Merhaba Dnya"); </script> <noscript> Tarayiciniz JavaScript desteklemiyor. </noscript> </body> </html> jsdestekyok.html <noscript> tag JavaScript desteklemeyen tarayclarda taglar aras verilen metini ekranda gstermektedir.
16
Musa AVU
<script> tagn kullanrken language parametresiyle hangi dili kullandmz belirtebiliriz. <script> tag bir HTML tagdr, JavaScript tag deildir. Bu parametrede VBScript ya da JavaScriptin eski ad LiveScript yazabilir. Biz rneklerimizde standart olan JavaScript terimini kullanacaz. Bu noktada HTML kodu kullandmz iin, byk kk yazm nemli deil, siz JavaScript terimini istediiniz gibi yazabilirsiniz. <html> <body> <script language="JavaScript"> </script> </body> </html> language.html language parametresinin kullanlmad durumlarda type parametresini kullanarak mime-typen tanmlamamz gerekiyor. mime-type, dosya formatn tanmlamaktadr. Uluslararas bir standarttr ve bu standart ile bir ok format tanmlayabilirsiniz, mesela XML, HTML, grafik formatlar gibi.
<html> <body> <script type="text/javascript"> </script> </body> </html> mimetype.html type parametresi, ana kategori ve alt kategori olarak iki blmden olumaktadr. Yukardaki kodda ana kategori text terimi olmakla beraber, alt kategori javascript terimidir. Web sayfalarn %95i language terimini parametre olarak kullanrlar. Daha nceki rneklerde farkna vardysanz, ne language ne de type parametresi kullandm ve kodumuz alt. O zaman ne diye bu kadar ene yoruyorum dersiniz? Web sayfanz XHTML kullanarak gerekletirmek istiyorsanz type parametresini kullanmak zorundasnz. JavaScript versiyon farkllklarn
Musa AVU
17
gzetmek istersenizde genelde language parametresini kullanmalsnz. Onun dnda bu parametreleri kullanmadan web sayfalar oluturabilirsiniz.
1.2 JavaScript ile ktphane kullanm JavaScriptleri web sayfalarnda kullanmak istiyorsanz bunlar ktphanelerde saklamay tavsiye ederim. Bylece projeler daha okunakl olabilir ve bir fonksiyona istediiniz kadar kullanabilirsiniz. Yazdnz ktphaneyi HTML ierisinde kullanmak istiyorsanz, <script> tagnda src parametresini kullanarak, ktphane dosyasnn yerini ve adn yazyorsunuz.
<html> <script language="JavaScript" src="benimFonksiyonlarim.js"></script> <body> <script language="JavaScript"> hosgeldin(); </script> </body> </html> kutuphaneKullanimi.html
function hosgeldin(){ document.write("Hosgeldin"); } benimFonksiyonlarim.js
18
Musa AVU
ekil5 benimFonksiyonlarim.js dosyas ile kutuphaneKullanimi.html dosyas ayn dizinde olduundan, src parametresine sadece benimFonksiyonlarim.js yazmak yeterlidir. Ktphanede, rnekte olduu gibi fonksiyonlar ya da deikenler kullanabilirsiniz. Fonksiyonlar ve deikenler daha sonraki konularda ele alnacaktr, imdilik ktphane kullanm nasl oluyor onu bilmeniz yeterlidir. src balantsn gerekletirdikten sonra, kutuphaneKullanimi.html dosyasnda hosgeldin() fonksiyonunun adn yazarak arabilirsiniz. Daha nce belirttiim gibi bunun avantaj bir ok HTML dosyasndan bu balanty gerekletirerek, hosgeldin() fonksiyonunun arlabilmenizdir. Kullandmz ktphaneyi incelerseniz, zel bir yapya sahip deildir. Kullanmak istediim fonksiyonu yazdm o kadar. cabnda istediim deikenleri de srasyla tanmlayabilirdim. Kafanza gre taklabilirsiniz. 1.3 JavaScript versiyonlar
Musa AVU
19
JavaScript, bir ok programlama dili gibi eitli versiyonlarla varln gstermektedir. Gelenee uyalm diye byle bir ey olmamtr. Her versiyonda yeni teknolojileri bnyesinde barndrmaktadr. Eski tarayclar JavaScriptin yeni versiyonlarn tanyamad iin, kullanlacak yeni teknolojileride tanyamayacaktr. <script language="JavaScript1.5"> location.href="index15.html"; </script> <script language="JavaScript1.4"> location.href="index14.html"; </script> <script language="JavaScript1.3"> location.href="index13.html"; </script> <script language="JavaScript1.2"> location.href="index12.html"; </script> <script language="JavaScript1.1"> location.href="index11.html"; </script> <script language="JavaScript"> location.href="index10.html"; </script> versiyon.html language parametresiyle JavaScriptin versiyonunu belirtebiliyoruz. location.href arsyla web sayfasnn hangi sayfaya iletileceini sylyoruz. Diyelim ki bizim taraycmz JavaScript 1.3 versiyonunu destekliyor, o zaman sayfa index13.html sayfasna iletilir ve tarayc index13.html dosyasn ileme koyar. Internet Explorer JavaScript1.0 ifadesini tanmamaktadr. Ayn ekilde yeni tarayclardan bazlarda JavaScript1.4 ve JavaScript1.5 ifadelerini tanmamaktadr. Bu ifadeleri tanmadklar iin <script> tagnda yazlan kod paras ileme sokulmamaktadr. u da bir gerek eski tarayclar kullanan kiilerin says olduka azdr ve emin olun ki bu oran %1 bile deildir. Aslnda bu konuyu koymayacaktm fakat sizi daha derin konulara girmeden nce basit konularla sndrmak istiyorum. Programc olabilmek iin her konuyu bilmenize
20
Musa AVU
gerek yoktur sadece ihtiyacnz olan konular bilseniz yeterlidir. Sakin her konuyu mutlaka bilmeliyim diye dnmeyin, nk her eyi bilemezsiniz fakat nasl yapldn bilebilirsiniz. 1.4 JavaScript destei var m? JavaScript herkes tarafndan kabul grm durumdadr, fakat yine de kullanclardan bazlar JavaScripti taraycsnda engellemi durumundadr. Acaba bunu ortaya kartabilir misiniz? Cevap evettir. <html> <head> <meta http-equiv="refresh" content="5;URL=jsyok.html"> </head> <script language="JavaScript"> location.href="jsdestekyok.html"; </script> <body> <a href="jsyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi tiklayin ve JavaScript olmayan sayfaya yonlendirilin</a><br /> <a href="jsdestekyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi tiklayin ve JavaScript olan sayfaya yonlendirilin</a> </body> </html> let.html Bu sayfann header ksmnda bir meta tag vardr. http-equiv parametresi sayfann ne yapacan sylyor ve content ksmndaki 5 rakam saniye dzeyindeki zamanlamadr. Bir de URL ifadesindeki jsyok.html dosyas yer almaktadr. Bunun anlam, sayfaya gelen ziyareti 5 saniye sonra verilen adrese iletilsin demektir. location.href = jsdestekyok.html ile ziyaretinin taraycs JavaScript destekliyorsa jsdestekyok.html sayfasna git denilmektedir. JavaScript sayfada yoksa 5 saniye sonra jsyok.html sayfasna iletim gerekleecektir. Tarayclarda otomatik iletim engellenebildii iin bu anlattklarm almaz. Bunun iin ek olarak ziyaretiye link eklinde iki olanak sunmalyz. Kullanc bu durumda JavaScript destei almak istiyorsa gerekli linki tklar ve JavaScript destekli sayfaya geer. stemiyorsa JavaScript olmayan sayfaya geer.
Musa AVU
21
1.5 Gvenlik Gerekte JavaScript gvenlik sistemini delebilir. Bunlara bir ka rnek verecek olursam, nternet adresini gsteren linkleri gizlemek, girdiiniz sayfada birden bir sr popup penceresinin almas, istenilmeden web sayfasnn kapanmas, ard ardna alan pencerelerle sisteminizin kilitlenmesi. Son yazdma aada bir rnek var, yalnz sisteminizi seviyorsanz ve tm bilgilerinizi yedeklediyseniz bu rnei deneyebilirsiniz, nk ok basit ve tehlikeli bir yntem. <html> <body> <!-Sisteminizi seviyorsaniz bu ornegi calistirmayin --> <script> while(true) open("",""); </script> </body> </html> guvenlikacigi.txt inde yazanlar ileriki blmde ayrntl anlatacam. Bu kodun yapt bir dng ierisinde sonsuza kadar pencere amaktr. JavaScript ile harddiskinizin istenilen blmne bilgi yazamazsnz ya da istenilen blmden ok kolay bilgileri okuyamazsnz. Eer olumlu kullanldnda ok faydal bir dildir. Tabi bu JavaScriptin hi zarar vermez anlamn tamasn. JavaScripti ufak grmeyin, kitabn dier blmlerinde jQuery ktphanesi anlatlacaktr. JavaScript, jQuerynin temelini oluturmaktadr. jQuery ile de acayip sayfalar programlayabilmektesiniz. Acayip diyorum, nk gerekten acayip sayfalar oluturabildiinize kendiniz bile inanamayacaksnz.
22
Musa AVU
Blm 2 XHTML, HTML, XML ve CSS temel bilgileri
Musa AVU
23
XHTML, HTML, XML ve CSS hakknda temel bilgiler vermek istiyorum, nk kitaptaki konular derin olmasa bile ara sra bu teknolojilerle beraber almaktadr. Bunun sebebi, gnmz web sayfalarnda bu teknolojilerin genelde beraber kullanlmasnda yatmaktadr. Ayrca dier blmlerde bu teknolojilerin kullanld yerlerde burada anlattmn dnda komutlar kullanrsam onlar da o blmlerde anlatacam. Bylece kitabn bu blmnde bu konularla fazla vakit harcamam oluruz. 2.1 HTML Modern web sayfalar HTML teknolojisini sadece yapsal anlamda kullanmaktadrlar. Yani gereken komutlar kullanlyor ve grsel ksm CSS teknolojisiyle dzenleniyor. JavaScript komutlarylada programlama ksm gerekletiriliyor. Bu yzden HTML ile kullanacamz az sayda nemli komutlar kalmaktadr. Bunlarda yapsal komutlardr. Tabi aranzda HTML dilini su gibi imek isteyen varsa, piyasada bu konuda olduka ok kitap var. Ben diyorum ki gerek yok, alem uzaya kyor siz hala tekeri yeniden mi kefetme peindesiniz? <html> <head> <title> Basit bir HTML Sayfasi </title> </head> <body> </body> </html> yapi.html
24
Musa AVU
ekil6 HTML sayfasndaki tm ierik <html> tagn iine konmaktadr. <html> tag HTML sayfasnn kk tagdr. Ondan sonra <head> tag gelmektedr. <head> tagnda HTML sayfasnn ba ksm yer alr. Grdnz gibi <title> tag da bu ksmda yer almaktadr. <title> tag ile taraycnzn baln belirtebiliyorsunuz. Sekme zellii gsteren tarayclarda da sekmedeki metni de buradan deitirebiliyorsunuz. <body> ksmnda HTML sayfasndaki grsel ksm yer almaktadr. <html>, <head>, <title>, <body> taglar HTML sayfasnn temel yapsdr. Bunlarn yan sra dokman tipini belirten bir st yaz vardr. Onu burada vermek istemiyorum, nk balang seviyedeki kiiler iin kafa kartrc bir bilgidir. Tarayclar, dokman tipini belirten yazy yazmasanz, tolerans uygulayarak, bunu bir hata olarak grmeyeceklerdir. Zaten bu yzden bunu bilmesek olur. nemli grdm taglar, rnekler eliinde ksaca ve derine inmeden anlatacam ki fazla kafanz kartrmak istemiyorum.
Balklar
Musa AVU
25
HTML sayfalarnda yazlarn zerine balk atabilmeniz iin 6 byklkte balk tag mevcuttur. Bunlar, <h1>, <h2>, <h3>, <h4>, <h5> ve <h6> taglardr. <h1> en byk balktr. <h6> ise en kk balktr. <html> <head> <title> Basit bir HTML Sayfasi </title> </head> <body> <h1>Baslik</h1> <h2>Baslik</h2> <h3>Baslik</h3> <h4>Baslik</h4> <h5>Baslik</h5> <h6>Baslik</h6> </body> </html> baslik.html
26
Musa AVU
ekil7
Paragraf Bir Paragraf ba yapmak istiyorsanz <p> tagn kullanabilirsiniz. <p> tagnn bittiini gstermek iin </p> tagn istee bal kullanabilirsiniz, mecburiyet yoktur. <html> <head> <title> Basit bir HTML Sayfasi </title> </head> <body> <h3>Baslik</h3>
Musa AVU
27
<p>Burada Paragraf basliyor <p>Burada bir Paragraf daha basliyor <p>Bende bir Paragraf basiyim </body> </html> paragraf.html
ekil8 Satr ba Metinlerinizi bitirdikten sonra yeni bir satra gemek istiyorsanz <br> tagn kullanabilirsiniz. Paragraftan farkl olarak <br> tagn istediiniz yere koyabilme zellii tamasdr. <br> tag metininizi, satr atlamadan ikinci satra geirmektedir. Diyelim ki Windowsdaki Notepad programn kullanyorsunuz. Bir alt satra geebilmek iin ne yapyorsunuz? Enter tuuna basyorsunuz. HTMLyi gelitiren genlerde bu ileme <br> demiler. <html> <head>
28
Musa AVU
<title> Basit bir HTML Sayfasi </title> </head> <body> Satir Basi<br> <br>Bugun hava cok guzel<br> Nasilsin? </body> </html> satirbasi.html
ekil9 Listeler Metinlerinizi gruplayarak gstermenin yolu listeleri kullanmaktan geer. <li> tag ile bir listedeki girdiyi tanmlarsnz ve </li> bu girdiyi bitirmi olursunuz. <li> tagndan nce kullanacanz tag listenin eklini gsterir. <ul> tag listenizi siyah noktal bir liste yapar. <ol> tag ise listenizi saysal bir liste yapar. Liste ierisinde listede kullanabilirsiniz. Bunun iin <li> tagndan sonra <ol> ya da
Musa AVU
29
<ul> kullanabilirsiniz. Liste ekli olarak sadece <ul> ve <ol> yoktur, fakat bizim iin bu taglar bilmek yeterlidir.
<html> <head> <title> Basit bir HTML Sayfasi </title> </head> <body> <ul> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li> </ul> <ol> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li> </ol> <ul> <li> <ol> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li> </ol> </li> <li> <ol> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li> </ol> </li> </ul> </body>
30
Musa AVU
</html> listeler.html
ekil9 Tablolar HTMLde tablolar bal bana bir konudur, fakat burada da bu konuya ihtiyacmz olduu ve kafa kartrmayacak kadar deineceim. Bir tabloyu <table> tag ile tanmlayabilirsiniz. Tablodaki her satr iin <tr> tagn ve her stn iinde <td> tagn kullanyoruz. <html>
Musa AVU
31
<head> <title> Basit bir HTML Sayfasi </title> </head> <body> <table border="1"> <tr> <td>1. Satir, 1. Sutun</td> <td>1. Satir, 2. Sutun</td> <td>1. Satir, 3. Sutun</td> </tr> <tr> <td>2. Satir, 1. Sutun</td> <td>2. Satir, 2. Sutun</td> <td>2. Satir, 3. Sutun</td> </tr> </table> </body> </html> tablo.html
ekil10
32
Musa AVU
lk <tr> tagl blme bakarsanz, tane <td> tag kullandm. Tablonun ilk satrnda tane stun oluturmu oldum. kinci satr iinde stun oluturmak istediim iin, ayn ekilde tane <td> tag kullandm. Stunlar </td> ile satrlar ise </tr> ile kapatmalyz. Son olarak tablonun bittiini gsteren </table> tagn kullandm. rnekteki border parametresi tablonun ereve kalnln gstermektedir. Ben 1 deerini verdim ki satr ve stunlar grsel olarak ayrt edebilelim. div ve span HTMLde bilmemiz gereken en nemli taglardr, nk CSS teknolojisi ile ok kullanyoruz. <div> tag ile HTML dokmann blmlere ayrabiliyoruz. <span> tagylada metin blmlerini ayrabiliyoruz Daha sonraki blmlerde, zellikle CSS konusunda <div> ve <span> taglaryla daha detayl bir anlatm yapacam. <html> <head> <title> Basit bir HTML Sayfasi </title> </head> <body> <div style="background:red;height:100px;width:200px;"></div> Selam <span style="color:green">Ne Haber</span> </body> </html> divspan.html
Musa AVU
33
ekil11 <div> tag kullanarak krmz blm bir blok olarak HTML sayfasnda ayrdm. <div> tagnda style parametresini kullanarak bu blou boyadm, yksekliini ve geniliini verdim. Bunu CSS blmne deindiimde daha iyi anlayacaksnz. <span> tagnda da style parametresini kullanarak ierisinde bulunan kelimenin yeil renk olmasn saladm. HTML iin bilmeniz gereken bu kadar. Sizi fazla skmadan hayatta kullanabileceiniz en nemli taglar anlattm. Gerekten dier taglar bilmenize gerek yok. Beyninize giden oksijeni gereksiz bilgilerle doldurmayn. 2.2. XHTML Web ortamnda XHTML uzundur varlk gstermesine ramen, web sayfalarnn ou HTML dilini kullanmaktadrlar. Bunun nedeni HTML, hatalar tolerans gstermesinden kaynaklanmaktadr. Aadaki ilk rnek basit bir HTML sayfasnn kodudur, ikinci rnekse ayn kodu XHTML ile nasl kodlandn gstermektedir. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
34
Musa AVU
<html> <head> <title>Basit bir HTML sayfasi</title> </head> <body> <h1 align=center>Web Sayfasina Hosgeldiniz</h1> </body> </html> htmlsayfa.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Basit bir XHTML sayfasi</title> </head> <body> <h1 align="center">Web Sayfasina Hosgeldiniz</h1> </body> </html> xhtmlsayfa.xhtml
ekil12
Musa AVU
35
htmlsayfa.html ve xhtmlsayfa.html dosyalarna tkladnzda ekil12deki ayn grnty grrsnz. htmlsayfa.html dosyasna baktmzda en stte <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> yazsn gryoruz. Bu HTML 4.01 standartlarna gre dokman tipini belirtmektedir. imdiye kadar byle bir tanmlama kullanmamamza ramen nasl oldu da yazdmz kodlarla HTML sayfalarmz altrabildik? HTML bu gibi hatalara tolerans gstermektedir. Yine xhtmlsayfa.xhtml dosyasnn en stnde buna benzer bir tanmlama gryoruz. XHTMLde bu tanmlamay yapmaya mecburuz. stelik HTML tanmlamasna gre de biraz daha uzun. ki dosya arasndaki ikinci farkllk <html> tagndaki farkllktr. XHTMLdeki <html> tagna xmlns parametresi eklenmitir. Bu parametreyi, XHTML kullanrken mecburen tanmlamak zorundayz. Kopyalama metoduyla ya da farkl aralarla bu satr otomatik olarak eklenebilir. XHTMLde mecburi olarak <head> ile tanmlanm bir balk ksm ve <body> ile tanmlanm bir gvde alan olmas gerekmektedir. Biz bunlara head ve body alan diyoruz. Pencerenin balk ksm olan <title> bile mecburi olarak tanmlanmas gerekiyor. HTML dosyasnda bu gibi mecburiyetler yoktur. <html> tagnn altna bile metinler yazabilirsiniz ya da <title> blmn bo brakabilirsiniz. HTML bunlarn hepsine tolerans gsterecektir. XHTMLde ise bu gibi hatalara yer verilmemektedir. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Basit bir XHTML sayfasi</title> </head> <body> <h1 align="center">Web Sayfasina Hosgeldiniz</h1> </body> </html> alo aloxhtml.html
36
Musa AVU
ekil13 XHTMLde </html> tagndan sonra alo yazdm ve XHTML buna tolerans gstermeyerek ekil13de grdnz gibi bir hata mesaj iletti. XHTMLlerde parametre atamalarnda da dikkat etmelisiniz. Tm atamalar "" iaretleri arasna yapmanz gerekiyor. HTMLde byle bir kstlamada yoktur. Dikkat etmeniz gereken bir baka nokta, XHTMLde byklk kklk yazmalar. rnein <H1>Baslik</H1> gibi bir kodlama XHTMLinizin hata vermesine sebep verecektir. XHTMLde tm taglar kapatlmas gerekiyor. HTMLde <br> ok kullanlr, bunu XHTMLde <br /> ya da <br> </br> eklinde tanmlamalsnz. Grld gibi XHTML hi bir noktada tolerans gstermemektedir. Bu da XHTMLin web dnyasnda fazla tercih edilmemesini dourmutur.
2.3. Hatasz web sayfas Hatalardan sonra web sayfamzn hatasz olduunu nasl anlarz diye bir soru gelebilir. Bunun iin W3C yani HTML standartlarn belirleyen kurum bizim iin bir sayfa gelitirdi. Sayfaya http://validator.w3.org adresinden ulaabilirsiniz.
Musa AVU
37
ekil14 Address seeneine www.google.com yazarsanz ve Check dmesine basarsanz yle bir ekran kts alrsnz:
38
Musa AVU
ekil15 imdi diyebilirsiniz, google gibi dnyaca n salm bir firma nasl olurda sayfasnda 37 hata yapm olabilir? Hemen sevinmeyin google amcann hatasn bulan ilk insanm diye. Oraya baka adresleri yazsanz hatalar olduunu greceksinizdir. W3C standartlarnn o kadar nemli olmadn buradan grebilirsiniz. http://validator.w3.org adresinde sisteminizde bulunan dosyalar da upload ederek kontrol ettirebilirsiniz. Yalnz bunun iin Firefox eklentisi daha kullanldr. Yapmanz gereken Web Developeri Firefox ortamna yklemek olacaktr. Firefoxunuzu an ve Mn ksmndan Aralar, daha sonra da Eklentileri tklayn.
Musa AVU
39
ekil16 kan pencerede arama ksmna Web Developer yazn ve Firefox uygulamasna ekleyin dmesini tklayn.
ekil17
40
Musa AVU
Kurulum bittikten sonra Firefox yeniden balatlacaktr. Aralar->Web Gelitirici-> eitli-> HTML denetle sekmesini tkladnzda sayfanz W3C sayfasna ynlendirilecektir ve bir denetleme yaplacaktr.
ekil18 2.4. Web sayfalarnda Style Sheet kullanm HTMLin duraan sayfalarna canllk katabilmek iin Style Sheet teknolojini ok kolay sayfalarmza entegre ederek kullanabiliriz. Style Sheet teknolojisinin en byk avantaj JavaScript gibi dorudan HTML sayfasna kodlanabilmesidir. Yaplmas gereken ok basittir, <style type=text/css> tanmlamas yaptmzda Style Sheet teknolojisini kullanabiliriz. Baka bir metot ise aadaki gibidir: html> <head> <title>CSS-Dosyasi</title> <link href="benimcss.css" type="text/css" rel="stylesheet"> </head>
Musa AVU
41
<body> <h1>Ates bacayi sarmis</h1> <h1 class="a">Baca atesi sarmis mi?</h1> <span class="b" id="b">Bu</span> <span class="b">da</span> <i class="b">gecer</i>. <span id="b">Burada Span kullaniliyor</span> <a href="http://www.google.com">Tikla</a> </body> </html> css1.html Style Sheetleri baka bir dosyada sakladnzda o dosyann adn link tagn kullanarak href parametresinde tanmlayabilirsiniz. type ve rel taglarnda yukardaki rnekteki gibi tanmlarsanz benimcss.css dosyasn HTML sayfanzda kullanabilirsiniz. u an byle bir dosyamz olmad iin ekran grnts Style Sheet olmadan duraan bir grnt verecektir.
ekil19 Style Sheet kullanarak bu sayfay canlandrmay dier blmde anlatacam. Style Sheet teknolojisinin birde nc kullanm ekli vardr. Bunu daha nceki rneklerimizde kullanmtm. Kullandmz HTML tagnda style parametresi ile Style Sheet teknolojisini kullanabiliriz.
42
Musa AVU
<html> <body style="background:green;"> </body> </html> css2.html
ekil20 Grdnz gibi style parametresinde Style Sheet dilini kullandm ve taraycnn arka plannn yeil gstermesini saladm. Bu tr kullanmlar ok basittir fakat tavsiye edilmiyor, nk CSS kullanmdaki avantajlar kullanmam oluyorsunuz. CSSteki en byk avantaj HTML yapsn ve grsellii ayrmasdr. Bunu bir sonraki blmde daha iyi anlayacaz. 2.5. CSS
Musa AVU
43
CSS (Cascadng Style Sheets) web tasarmclarn iini ok kolaylatrmaktadr. JavaScript ile CSSi kombine ettiinizde byk avantajlar elde etmi olursunuz. CSS ile web sayfasndaki grnmler genelletiriliyor. Bunu yapabilmeniz iin CSSi anlamanz gerekiyor. Ben burada CSS konusuna ksa deinmek istiyorum, nk kitabmzn konusu CSS deil fakat JavaScript ile kullanmn gsterebilmek iin CSSe ksa bir giri mutlaka yaplmas gerekmektedir. Allmn dnda biraz geni bir aklama yapmak istiyorum. Ltfen iyi okuyun ve doru uygulayn, nk bu blmde verilen bilgiler nemlidir. En azndan CSS nasl alyor onu bilseniz bile dier blmlere geebilirsiniz. <html> <head> <title>CSS</title> </head> <style type="text/css"> <!-h1, h4 { background : pink; } h1.a { color : purple; } .b { font-size : 49px; visibility : hidden; } #b { background : #aa1611; } *{ background : #a06611; } a:hover{ background : #007011; } a{ color : #ffffff; text-decoration : none;
44
Musa AVU
} --> </style> <body> <h1>Ates bacayi sarmis</h1> <h1 class="a">Baca atesi sarmis mi?</h1> <span class="b" id="b">Bu</span> <span class="b">da</span> <i class="b">gecer</i>. <span id="b">Burada Span kullaniliyor</span> <a href="http://www.google.com">Tikla</a> </body> </html> css3.html
ekil21 CSS kullanarak daha nceki web sayfamzn birden nasl canllk kazandn ekil21de gryorsunuz. css3.html dosyasndaki CSS bilgisini anlarsanz,
Musa AVU
45
kitaptaki CSS ile JavaScript rneklerini anlam olursunuz. CSSte mantk ok basittir, nce deitirmek istediimiz alan belirtiriz, sonra {} parantezleri ierisinde bu alanlarla ne yapmak istediimizi tanmlarz. h1 ve h4 alanlarnda bir tanmlama yapabilmek iin h1, h4 yazarz. Bu ksma selektr deniliyor. rnekte h1 ve h4 alanlarnn arka plan rengini deitirmek istediim iin background tanmlamas yaptm. ki nokta st ste background tanmlamasna iki nokta st steden sonra yazdm deeri atamaktadr. Noktal virglle bir tanmlamay bitirmi oluyoruz. Ltfen eittir iareti yerine iki nokta st ste kullanldna dikkat edin. Baz tarayclar eittir iaretini kabul ettikleri iin bu hataya debilirsiniz ve eittir iaretini kabul etmeyen bir tarayc ile kar karya kaldnzda hatann nereden kaynaklandn bulamayabilirsiniz. Selektr tanmlamalarnn ierisinde kullanlan tanmlamalar aslnda kendini aklayc bir nitelik tamaktadr. rnekte kullandm, font.size, ngilizceden tercme edersek yaz tipi bykl anlamna gelir. visibility grnrlk manasn tar. color renk demektir. Bu anlamlar dorultusunda da sayfamzda deiiklikler olmaktadr. h1.a deiken selektrdr. HTML kodunda <h1 class=a... olarak tanmlanan blgeye bu deiken selektr hkmetmektedir. h1 HTML tagnda class parametresini kullanarak h1.a deiken selektrndeki tanmlamalarn burada uygulanmasn bu ekilde salam olduk. .b gibi selektrler class parametresinin deeri b olan tm HTML taglar ilem grr. Bizim rneimizdeki <span> ve <i> tagnda olduu gibi. Baka bir selektr eklide # ile balayan selektrlerdir. Bu selektrler, HTML taglarnda id parametresi kullanlan taglarla ilem grmektedirler. * selektr HTML taglarnda kstlama getirilmiyorsa hepsi iin geerlidir. ok ilgin bir selektrde a:hover selektrdr. Fare ile kan web sayfasnda Tkla kelimesinin zerine geldiinizde renginin yeil olduunu greceksinizdir. Ek bir programlama yapmadan ve sadece CSS tanmlamas kullanarak bu zellii web sayfanza katabiliyorsunuz. Firefoxunuza kurduunuz Web Gelitiricisindeki CSSle ilgili yardmnza koacak bir ok zellik vardr. Benim tavsiyem bunlar tklayarak bir bak as elde etmenizdir. Aralar->Web Gelitirici->CSS Hata yok->CSSyi Dzenle seeneini setiinizde, canl olarak yaptnz tm deiiklikleri sayfanzda grebiliyorsunuz.
46
Musa AVU
ekil21 2.6. XML Web sayfalar iin XML renmenin ne anlam olduunu dnebilirsiniz. Birincisi XHTML kullanyorsanz, XML hakknda bilgi sahibi olmalsnz. XHTML iin XML renmek gerekiyorsa XHTML kullanmam olur biter diyebilirsiniz. Fakat web sayfalarn programlarken orada urada XML ile ilgili mutlaka balantya geeceiz, nk sistemler aralarndaki iletiimi XML ile gerekletiriyorlar. Bunun iin XML temellerini bilmemiz gerekmektedir. Basit bir XML rnei verecek olursak u ekildedir:
<?xml version="1.0" encoding="UTF-8"?> <websayfasi> <sayfa> <baslik>Musa Cavus</baslik> <url>http://www.musa-cavus.com</url> <aciklama>Kisisel Sayfa</aciklama> </sayfa> <sayfa> <baslik>Google Amca</baslik> <url>http://www.google.com</url> <aciklama>Googlenin Ingilizce sayfasi</aciklama>
Musa AVU
47
</sayfa> </websayfasi>
websayfasi.xml Bu dosyay Firefox ile amaya alrsanz yle bir grnt elde edersiniz:
ekil22 XMLde, XHTMLde olduu gibi kurallara uymak vardr, tolerans yoktur. Kurallara uyulmazsa dokmannz XML dokman olmaktan kar. XML dokmannn XHTMLden fark taglarn daha nceden belli olmamasdr. XML dokmannda taglarda istediiniz kelimeyi kullanabilirsiniz. websafaysi.xml dokmann size farkl bir ekilde gstermek istiyorum. Bunun iin Firefoxunuza ilk nce DOM Inspector Pluginini kurmalsnz. Firefoxunuza daha nce Web Developeri eklemitik ve grsel olarak nasl eklendiini gstermitim. DOM Inspectoruda ayn ekilde arattrn ve Firefox uygulamanza kurun. Kurma ilemi bittikten sonra Aralardan Dom Inspector sekmesini tklayn.
48
Musa AVU
ekil23 DOM Inspector ile XML dokmann incelediimizde, bu yapnn bir aaca benzediini grrz. Kk, dmler ve yapraklar vardr. Dmlere XML dilinde node deniliyor. JavaScript ierisinde node objesini sklkla kullanacaz. XML dokman Firefox ile normal atmzda aa yapsn grdk. Bunu Firefox bize bir metin satr olarak iletmiti. XML dokmanna stil balarsak HTML sayfas olarak grebiliriz. Bu stillerden birisi CSS teknolojisidir. <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="websayfasi.css" type="text/css" ?> <websayfasi> <sayfa> <baslik>Musa Cavus</baslik> <url>http://www.musa-cavus.com</url> <aciklama>Kisisel Sayfa</aciklama> </sayfa> <sayfa> <baslik>Google Amca</baslik>
Musa AVU
49
<url>http://www.google.com</url> <aciklama>Googlenin Ingilizce sayfasi</aciklama> </sayfa> </websayfasi> websayfasi1.xml XML dokmanna bir CSS dosyasn balamak ok kolaydr. Yukarda <?xmlstylesheet ile balayan satrda href parametresine CSS dosyasn belirtiyorsunuz, o kadar. Ben rnek bir CSS dosyas tanmladm: *{ background-color: #11ff55; } sayfa { display: block; width: 300px; height: 180px; background-color: rgb(55, 215, 151); font-size: 17px; text-align: center; display: block; } baslik { display: block; background-color: rgb(251, 255, 255); color: blue; } aciklama { display: block; background-color: rgb(125, 60, 235); } websayfasi.css Dokman XML olduu iin etkilemek istediiniz tagn adn selektr ksmna yazmanz yeterlidir. Mesela sayfa tagnn ekrandaki grnm iin selektr olarak sayfa yazdm ve {} parantezlerinin arasna o blm ile ilgili grsel tanmlamalar verdim. Tanmlamalar aklamyorum, nk CSS ile ilgili tanmlamalar, fakat isimlerinden ne ie yaradn anlayabilirsiniz.
50
Musa AVU
websayfasi1.xml dosyasna ift tkladnzda taraycnz yle bir sayfa gsterecektir:
ekil24 Bu sayfay bir de DOM Inspector ile incelemek istiyorum. DOM, HTML dokmanndaki aa yapsna verilen addr. DOM aacda diyebilirsiniz.
Musa AVU
51
ekil24 Bir ncekinden fark st tarafnda xml-stylesheet yazmas gibi gelebilir fakat yle deildir. Document yazan yaznn yanndaki ekle tklayn ve oradan Stylesheet sekmesini sein. Sa tarafta CSS dokmannda kullandnz kurallar greceksiniz. Sa taraftan sayfa seeneini seerseniz u grnty elde edersiniz:
52
Musa AVU
ekil25 Analizler iin DOM Inspector biilmi kaftandr. rnein background-color seeneine ift tklayn ve Edit Style Rule penceresine rgb(99, 215, 15) deerini girin. Greceksiniz ki Tamam dmesine basar basmaz taraycnz yeni deerlere gre websafaysi1.xml dokmann gsterecektir.
Musa AVU
53
Blm 3 JavaScript Kullanm
54
Musa AVU
3.1 Deikenler Deikenler, ana hafzada programn alma esnasnda deerleri saklayan alanlardr. Saklanan alanlara, deerleri, eittir iareti ile atayabiliyoruz. Deerleri de daha nce tanmladmz deiken ismiyle arabiliyoruz. JavaScript programcs veri tipiyle ilgilenmez, nk JavaScript bu ilemi otomatik yapmaktadr. Bunun avantaj olduu gibi ok byk dezavantaj da vardr.
<html> <body> <script language="JavaScript"> benimDegiskenim = 21; alert(benimDegiskenim); benimdegiskenim = 213; alert(benimDegiskenim); </script> </body> </html> veritipidezavantaj.html
ekil26 veritipidezavantaj.html dosyasn ift tkladnzda ekrana iki defa 21 saysnn geldiini greceksiniz. benimDegiskenim deikenine 21 atadk sonra alert() fonksiyonuyla bu deikeni parametre olarak verdik. Daha sonra benimdegiskenim deikenine 213 atadk ve alert() fonksiyonuyla benimDegiskenim deikenini parametre olarak vermemize ramen neden ekranda ikinci defa 21 says gzkt dersiniz? Bunun nedeni JavaScriptin byklk kklk yazmna dikkat etmesidir. kinci deikeni tanmlarken d harfini kk yazdk. Tip tanmlamas yapmadmz iin yazm hatas
Musa AVU
55
gzmzden kat. zellikle byk JavaScript programlarnda bu tr hatalarn olma olasl ok yksektir. JavaScriptte satr kodlamas ; yani noktal virgl ile biter. alert() fonksiyonu, parametre olarak verilen deeri ekranda ekil26da grdnz bir pencere stilinde gsterir. var tanmlamas <html> <body> <script language="JavaScript"> degisken = 5.67; alert(61 * degisken); degisken = 234 /119; a = "abc"; var b = true; </script> </body> </html> veritipleri.html
ekil27 JavaScriptte deikenlere istediimiz deerleri atayabildiimizi grdk. Deiken atamalarnda veritipleri.html rneindeki gibi matematiksel ilemler yaparak bunlar gerekletirebiliriz. var tanmlamasna ne gerek var denilebilir. var tanmlamas bir deikenin deiken olduunu tanmlar. var kullanlmadan yaplan tm deiken tanmlamalar JavaScript dnyasnda genel deiken olarak alglanr. Mesela fonksiyon ierisinde var szc kullanlmadan yaplan bir tanmlama o deikenin genel bir deiken olduunu gsterir. Baka programlama dillerinde bu byle deildir, fonksiyon ierisinde yaplan tanmlamalar sadece fonksiyon ierisinde kalmaktadr. var
56
Musa AVU
szcyle bunu deitirebiliyoruz ve deikenin sadece fonksiyona ait olduunu sylemi oluyoruz.
3.2 Diziler (Arrays) Diziler, JavaScriptte zor konular kategorisinde yer alr. Ben doru anlatlrsa zor olmayaca inancndaym. Ayrca diziler size byk kolaylklar salamaktadr ve rutin olan ilemleri dngler eliinde halledebilirsiniz. Dizi, bir ok veri tipinin bir deikende tutulmas ve verilere bir indeks ile eriim salanan mekanizmadr. Ufak bir kod ile dizileri anlatmaya balamak istiyorum:
<html> <body> <script language="JavaScript"> dizi = new Array(); document.write(dizi[0]); dizi[0] = 5; document.write(dizi[0]); dizi[0] = "Kalem"; document.write(dizi[0]); </script> </body> </html> diziler1.html
ekil28
Musa AVU
57
JavaScriptte bir deiken tanmlarken bir isim ve eitlik iaretinin sa tarafna deerini yazarz. Dizilerde ise bu byle deildir. Deiken adn yazdktan sonra eitliin sol tarafna new Array() yazarak bunun bir dizi olduunu belirtmi oluruz. Anahtar kelime burada new kelimesidir. Array() ise bunun bir dizi nesne olduunu gsteriyor. Bu satrlar, Array tipinden yeni bir nesne olutur denilmek istenildi. Nesneleri daha sonra anlatacam, o yzden aman ben nesne nedir bilmiyorum diye korkmayn. Hepsini reneceksiniz. document.write() fonksiyonu taraycya bir metin yazmak istediinizde kullanacanz bir fonksiyondur. Parametre olarak verilen metin taraycda gsterilmektedir. dizi deikenli dizimizi oluturduktan sonra ben dizinin ilk elemanna 5 deerini atadm. Bunu yaparken dizi deikeninin hemen ardndan bir keli parantez atm ve 0 yazarak keli parantezi kapattm. JavaScriptte diziler sfrdan baladklar iin ilk deeri sfrnc elemana koyabiliyorsunuz. JavaScriptte bir deikene istediiniz tipte bir deer atayabildiiniz iin daha sonraki satrlarda dizi dizisinin ilk elemanna Kalem deerini atadm ve taraycnn gstermesini saladm. Dnglere dier konularda deineceim fakat dizilerin bir avantajn gsterebilmek iin dnglerden yararlanmak istiyorum. imdilik sadece dng ierisinde dizinin nasl kullandn anlasanz yeterli olur. <html> <body> <script language="JavaScript"> a = new Array(10); a[0] = 1; a[1] = 2; alert(a.length); i = 0; while(i < a.length) { document.write(a[i] + "<br>"); i++; } </script> </body> </html> diziler2.html
58
Musa AVU
ekil29
ekil30 a dizisininin boyutunu new Array(10) tanmlamasnda parantez ierisine 10 deerini yazarak onluk bir dizi olarak ayarlayabiliyorsunuz. Daha sonra dizinin birinci elemanna 1 deerini atadm ve ikinci elemanna 2 deerini atadm. length() fonksiyonu dizinin boyutunu saysal olarak vermektedir. Bizim rneimizde bu deer 10dur, nk dizinin boyutunu 10 olarak ayarlamtk. Ekrana alert() fonksiyonuyla nce dizinin boyutu olan 10 getirilmektedir. Tarayc ise dizinin ilk iki deeri atand iin atanan saylar gstermektedir. Dizinin dier elemanlarna deer atanmad iin undefined yazs gelmektedir. Yani tanml deil yazs gelmitir. JavaScript kodunda a[20]=10 gibi bir tanmlama yapsaydk dizinin boyutu, ilk bata 10 olarak tanmlamamza ramen 21 olacakt.
Musa AVU
59
<html> <body> <script language="JavaScript"> a = new Array(10); a[0] = 1; a[1] = 2; a[20] = 21; alert(a.length); i = 0; while(i < a.length) { document.write(a[i] + "<br>"); i++; } </script> </body> </html> diziler3.html
ekil31
60
Musa AVU
ekil32 Buradan unu anlyoruz, bir diziye atama yaparsak boyutunu bytm oluyoruz. 3.3 Operatrler JavaScript dilinde dier dillerde olduu gibi operatrler mevcuttur. Ben bunlar bu blmde yzeysel olarak gstereceim ve dier konularda rnekler derinletike operatrleri kullanarak daha geni aklamalar yapacam. Burada sadece operatrlere deineceim.
Musa AVU
61
Atama operatr Bir deikene deer atamak isteniliyorsa atama operatr kullanlr. lem = iaretiyle yaplr. Byk, kk ve eitlik operatrleri Bunlar ok kullandmz operatrlerin banda gelir. leride de greceimiz gibi if cmleciklerinde genellikle bunlar kullanrz. nsan zihniyetine de yatkndr. Hani ufak ocuklara deriz, olum sen bynce araba kullanabilirsin imdi kullanmazsn. Burada ocuun beyninde ben byk isem araba kullanrm oluuyor. if cmlesine fazla girmek istemiyorum, fakat ufak birka rnek verirsek bu operatrler beyin hcrelerimize daha iyi yerlemi olur. <html> <body> <script language="JavaScript"> abi = 34; abla = 32; ben = 25; if (abi > 17) { document.write("Abim araba surebilir"); document.write("<br>"); } if (abi >= 18) { document.write("Abim araba surebilir"); document.write("<br>"); } if (abla < abi) { document.write("Ablam, abime abi diyecek"); document.write("<br>"); } if (ben == 15) { document.write("Ben en ufagim"); document.write("<br>"); } if (ben != 18) { document.write("Ben araba suremem"); document.write("<br>"); }
62
Musa AVU
</script> </body> </html> operatorler1.html
ekil33 if cmlecikleri genellikle kyaslama yapmak iindir, bu konuya sonra parmak basacaz. Bizim bu konuda renmek istediimiz operatrlerdir. lk if cmlesinde diyoruz ki eer aabeyim 17 yandan bykse araba srebilir. 17den sonra gelen tam say 18 olduu iin ve biz abi deikenini tam say olarak tanmladmz iin bu nerme doru olmu oluyor. kinci cmlecikte diyoruz ki eer aabeyim 18 yandan byk ya da eitse o zaman araba srebilir. 18 yerine 17 koysaydk, eitlik dolaysyla aabey deikeni 17 olsa bile bu nerme doru olmu olurdu, fakat biz biliyoruz ki araba srmek iin 18 yanda olmak gerekiyor. nc cmlede ablam aabeyimden kkse ablam aabeyime anadoludaki gelenee gre abi demesi gerekiyor. Geri imdilerde yava yava bu siliniyor, g, kuvvet ve para kimdeyse ona abi abla deniliyor, fakat bu bizim konumuzun dnda. Drdnc cmlede ben 15 yandaysam ufam diye bir mesaj kyor. Dikkat edilmesi gereken, = = eklinde bir operatr kullanlmtr. Kyaslamalarda = = kullanlr, aktarmalarda = kullanlr. Birinde ift dierinde tek eittir operatr kullanlr. Son cmlede ise ben 18 yanda deilsem araba sremem ifadesinin JavaScript dnyasndaki ekli sunulmutur. Eit deil JavaScriptte grld gibi != eklinde ifade edilmektedir.
Musa AVU
63
Bir de && ve || operatrleri ok kullanrz, fakat bunlarda if cmleciklerinde anlatacam. Dier baz operatrleri de rneklerde yeri geldiince, ihtiyaca gre deineceim. Operatr tablosunu da fikir edinmeniz asndan ve ihtiya duyulduunda baklmas iin aada sunuyorum:
Operatr ++, -+, ~ ! *, /, % + << >> <, <=, >, >= = =, != & ^ | && || = Aklama artrma, eksiltme toplama, kartma bit tmleme logik tmleme arpma, blme, kalan Metinleri birletirme sola kaydrma saa kaydrma nmerik eitleme eitlik, eit deil bit dzeyinde ve ilemi bit dzeyinde xor Bit dzeyinde veya ilemi logik ve ilemi logik veya ilemi atama ilemi
Aritmetiksel operatrler Saysal deerler arasnda hesaplamalar yapabilmek iin aritmetiksel operatrlere ihtiya duyarz. Toplama ilemi +, arpma ilemi *, karma ilemi -, blme ilemi \, modl ilemi % iaretleriyle yaplmaktadr. Ayrca zel aritmetiksel operatrlerde kullanlabilinmektedir. JavaScriptte, operatrlerle farkl kombinasyonlu ilemlerde yapabilirsiniz. a+= 2 dediinizde, a = a + 2 gibi bir ilem gerekletirmi oluyorsunuz. Burada a deikeni 2 deer artrlmaktadr. Ayrca JavaScript parantezleri otomatik olarak uygulamaktadr. rnein a *= 3 + 5 dediimizde Java bunu iinde u ekilde evirmektedir: a = a * (3 + 5) Deikenleri artrmak ve eksiltmek programcnn en ok yapt ilemlerden biridir. Eer biz birer say artrmak ya da azaltmak istiyorsak JavaScript kardeler bizi dnerek bizim iin bir kolaylk salamlar. Aslnda bu kolayl C dnyasndan gelenler iin olduunu da dnebiliriz. i++; i = i + 1 anlamna gelmektedir j--; j = j 1 anlamna gelmektedir
64
Musa AVU
Artrma ve eksiltme ilemlerinde ounlukla i ve j harfleri kullanlmaktadr. Hangi nimete hikmet byle yaplyor, bunu bende bilmiyorum. ++ ve -- kullanlrken dikkat edilmesi gereken nokta, bu iaret kombinasyonunu deikenden nce mi sonra m kullandmzdr. Bu iaretleri deikenden nce kullanrsak, deikendeki deer nce deiir ve deiken, o deer ile ilem grr. Sonra kullanrsak tam tersi olur. Grdklerimizin hepsini bir rnek ile daha iyi pekieceinin kansndaym. <html> <body> <script language="JavaScript"> i = 340; j = 10; document.write(++i); document.write("<br>"); document.write(++j); document.write("<br>"); document.write(i); document.write("<br>"); document.write(j); document.write("<br>"); document.write(i+j); document.write("<br>"); document.write(i---++j); </script> </body> </html> operatorler2.html
Musa AVU
65
ekil34 Mantksal Operatrler Birden ok art tanmlanm kalplar dorultusunda balamak istiyorsanz bu operatrleri kullanmanz gerekmektedir. rnein 8 ve 11 ile blnen saylar bulmak istedimizde ya da birden fazla art birbirine balamak istediimizd bu operatrleri kullanrz. Javada mantksal operatrler olarak unlar vardr: & (Ve), | (Veya) , ^ (Xor), ! (Deil). Xor: ki tanmlamada true ya da i false ise bu ilem bize false sonucu verir. Dier durumlarda true deerini iletir. Ve: Tanmlamalardan birisi false ise sonu false olur. Dier durumlarda true. Veya: Tanmlamalardan birisi true ise, sonu true olur. Dier durumlarda false. Deil: Tanmlamann tersidir. Ve ve Veya ilemlerinde derleyici birinci tanmlamay gz nne alr. Mesela diyelim iki tanmlama var ve biz bunlarla bir Ve ilemi gerekletiriyoruz. yle ki: false & true. Aklamamza gre Ve ilemlerinde tanmlamalardan birisi false ise sonu false olacaktr. <html> <body> <script language="JavaScript"> document.write(true | false); document.write("<br>"); document.write(true & false); document.write("<br>"); document.write(!false); document.write("<br>"); document.write(true ^ false); document.write("<br>"); document.write(1 | 3); document.write("<br>"); </script>
66
Musa AVU
</body> </html> operatorler3.html
ekil35 true ve false ilemi Veya ilemine sokulunca sonu true oluyor. true ve false Ve ilemine sokulunca sonu false oluyor. false deerinin deili true olmutur. true ve false Xor ileminden getiinde artmza gre true sonucunu vermektedir. 1 ile 3 saylarn Veya ileminden geirince neden 3 olmaktadr? 1 says, 2 tabanl say sistemine gre 01 eklinde ifade edilir.3 saysda, 11 eklinde ifade edilir. 0 bilgisayar dilinde false, 1 ise true deerini alr. Bylece 1, saysn false true eklinde hayalmizde dnecek olursak, 3 saysn true true olarak dnebiliriz. 1 saysndaki ilk deer olan false ile 3 saysndaki ilk deer olan true deerlerini Veya ileminden geirdiimizde true deerini alacaz. Yine 1 saysndaki true deeriyle, 3 saysndaki ikinci deer olan true deerini Veya ileminden geirecek olursak sonu true olacaktr. Yani 1 ile 3 saysnn Veya ileminden bize true true gibi bir ifade kacaktr. Bunun sonucu 11 olacaktr. 11 olan ikilik say say sistemini 10 tabanndaki bir say sistemine evirecek olursak bize 3 rakamn verecektir. |, & ve ^ ilemleri bit ilemleri olduu iin dikkat ettiyseniz true ve false ilemlerinde 1 ya da 0 sonucu olumaktadr. 1 true 0 ise false demektir. Nasl mantk operatrlerini renerek mantnz alt st oldu mu? Ve ve Veya ilemi bilgisayar dnyasnn temellerinden biridir. Yalnz u da bir gerek bit ilemleri iin ben imdiye kadar hi bir program yazmadm, sizde yazmayacaksnz diye dnyorum. Peki niye anlatyorum bunlar, dedim ya yeillik olsun ve JavaScripte snalm. Diyelim ki siz bir boksrsnz ve
Musa AVU
67
snmadan dalyorsunuz rakibinize, kaslarnzda mutlaka bir incinme meydana gelecektir. Bende imdi hemen dalsam derin konulara sizinde beyin hcrelerinizde bir incinme meydana gelecek. Zaten farkna vardysanz bir konuyu fazla samalamyorum, sadece gerektii kadar anlatyorum. Bana gvenin.
3.4. Aklamalar JavaScript kodlarnzda iki ekilde aklama yapabilirsiniz. Birincisi // iareti kullanarak sadece o satrda geerli olmak artyla yapabileceiniz aklamalar. Aklamalarn ikinci ekli /* */ aralnda yaplmaktadr. Bu aklama tryle daha ok satrda aklama yapabilirsiniz ve her satr iin // iareti tanmlamanz gerekmemektedir. <html> <body> <script language="JavaScript"> // Bu bir aciklamadir /* document.write(4); document.write("<br>"); */ </script> </body> </html> aciklama.html
3.5 if ve switch karar yaplar Bu karar yaplaryla programmzn akn deitirebiliriz. if, Trke olarak eer demektir. Programnz kodlarken, programnza eer u olursa unu yap gibi direktif vermek isteyebilirsiniz. JavaScriptte bunu yapabilmeniz iin if ya da switch karar yaplarn kullanabilirsiniz. Dnglerinde kendilerine zg karar yaplar vardr, fakat bunu dnglerde ele alacam.if komutuyla ilgili kolay bir rnekle balamak istiyorum:
68
Musa AVU
<html> <body> <script language="JavaScript"> a = 9; if (a < 10) { document.write("a degiskeni 10 sayisindan kucuk"); document.write("<br>"); } if (a > 10) { document.write("a degiskeni 10 sayisindan buyuk"); document.write("<br>"); } if(a != 20) { document.write("a degiskeni 20 sayisina esit degil"); document.write("<br>"); } </script> </body> </html> if.html
ekil36
Musa AVU
69
if yaps ok basittir, ncelikle if yazyoruz sonra bir parantez ayoruz, parantezin ierisine byklk, kklk veya eitlik operatr kullanlan bir kyaslama ifadesi yazarak parantezi kapatyoruz. Kyaslama doruysa {} arasnda olan blok ilem gryor, yanl ise {} arasndaki blok ilem grmyor. if yapsndan sonraki blok tek satrlk bir kod ise {} parantezlerini koymaya gerek yok, birden fazla satrsa mutlaka {} parantezlerini kullanmalyz. rnek a deikenine 9 deerini atadm. 10 saysndan kk m byk m onu kontrol ettim. En sonunda da 20 saysna eit deil mi onu kontrol ettim. ounlukla if yaps, else yapsyla birletirilir. else Trke olarak deilse manasn tamaktadr. Eer .. yap, deilse .. yap gibi dnebilirsiniz. Daha da genileterek, Eer .. yap, deilse eer .. yap, deilse . yap eklinde de bir yap genellikle kullanlmaktadr. <html> <body> <script language="JavaScript"> a = 9; if (a < 10) { document.write("a degiskeni 10 sayisindan kucuk"); document.write("<br>"); }else if (a > 10) { document.write("a degiskeni 10 sayisindan buyuk"); document.write("<br>"); }else { document.write("a degiskeni 20 sayisina esit"); document.write("<br>"); } </script> </body> </html> ifelse.html
70
Musa AVU
ekil37 Birinci blokta a deikeninin 10 saysndan kkln kontrol ettim. kinci blok, eer birinci if karar yaps ilem grmediyse else if yani deilse eer eklinde ileme giriyor ve a deikenini 10 saysndan bykln kontrol ediyor. Son blok ise, ilk iki blok ilem grmediyse else yani bunlarn hibiri doru deilse ileme giriyor. Birden ok kyaslama ilemini birletirmek istersek yardmmza && ve || iaretleri komaktadr. <html> <body> <script language="JavaScript"> a = 9; if (a < 10 && a > 5) { document.write("a degiskeni 10 sayisindan kucuk"+ " ve 5 sayisindan buyuk"); document.write("<br>"); } if (a > 10 || a < 20) { document.write("a degiskeni 10 sayisindan buyuk"+ " ya da 20 sayisindan kucuk"); document.write("<br>"); } </script> </body> </html> ifbirlestir.html
Musa AVU
71
ekil38 && iareti iki kyaslamann arasna ve balac koymaktadr. a deikeni 10 saysndan kkse ve 5 saysndan da bykse bloktaki ilemi yap denilmektedir. || iareti iki kyaslama arasna ya da balac koymaktadr. a deikeni 10 saysndan byk ya da 20 saysndan kkse sradaki blok ilem grmektedir. Bu ekilde birden fazla kyaslamay ayn if karar yapsna dahil edebiliyorsunuz. if karar yapsn mutlaka iyi anlayn, nk insan beynide buna gre dnmektedir ve karalarn vermektedir. switch switch ilemi, if ilemine bir alternatiftir. Baz durumlarda switch kullanmak daha kolaydr. Ak sylemek gerekirse ben imdiye kadar hi kullanmadm, sadece kullanan kiilerin kodlarnda deiiklik yapacamda kullandm. <html> <body> <script language="JavaScript"> a = 1; switch (a) { case 0 : document.write("0" + "<br>"); break; case 1 : document.write("1" + "<br>"); break; case 2 : document.write("2" + "<br>"); break; case 3 : document.write("3" + "<br>");
72
Musa AVU
break; default: document.write("4" + "<br>"); } </script> </body> </html> switch.html
ekil39 JavaScript, switch ile balayan cmlelerde srayla tm case bloklarn taramaktadr. Eer uyan bir case bulursa, bu bloun ierisindeki kodu break ifadesini buluncaya kadar ileme sunmaktadr. break ifadesini kullanmazsak, bir sonraki case blou otomatikman ilem grmektedir. Bir sonraki case ifadesinin doru ya da yanl olmas bu durumda hi nemli deildir. switch ilemlerinin if karar yapsna gre en byk dezavantaj esnek olmamasdr ve sadece tek bir deeri kyaslamasdr. Mesela if karar yapsnda bir deiken araln kontrol edebilirken switch yapsnda byle bir olananz yoktur. 1 ile 100 arasndaki tm saylarn bir deikenden kk m deil mi olduunu kontrol edebilmek iin switch yapsnda aralkta bulunan tm saylar kod halinde teker teker yazmalsnz. JavaScriptte dier programlama dillerinden farkl olarak switch karar yaplarnda dizgiler ya da baka bir tabirler String kullanabilirsiniz. <html> <body> <script language="JavaScript"> a = "Veli"; switch (a) { case "Ali" : document.write("Ali" + "<br>"); break; case "Veli" : document.write("Veli" + "<br>"); break;
Musa AVU
73
case "Selami" : document.write("Selami" + "<br>"); break; case "Hayri" : document.write("Hayri" + "<br>"); break; default: document.write("Isimsiz Kahraman" + "<br>"); } </script> </body> </html> switchdizgi.html
ekil40
3.6 Dngler Bakn bu da ok nemli bir konudur. Dngler belirli kodlar tekrarlayarak ileme sunarlar. Bir dng, blok ierii ve nermeden oluur. Dng nermesi, dngnn ne kadar sreceini belirtir.
while dngs while dngsne girilmeden nce, dng nermesi kontrol edilmektedir. Eer dng nermesi doru ise, dng blou ilenmektedir, deilse dng sona erdirilmektedir. if nermelerinde olduu gibi dng nermesi true olmaldr. <html> <body> <script language="JavaScript"> i = 0; while(i < 10) { document.write(i + "<br>"); i++; }
74
Musa AVU
</script> </body> </html> while.html
ekil41 while dngsnde, nermeyi while yazdktan sonra parantez ayoruz ve parantezin ierisine kodluyoruz. nerme true deerini alncya kadar dng dnyor. rnekte i deikenine 0 deerini atadm ve while dngsndeki nermeye, i deikeni 10 saysndan ufak m nermesini kodladm. Ekrana i deikeni 10 saysndan ufak olduu srece i deikeninin o anki deerini yazdrttm. do - while dngs Bu dngde ilgin olan, nermenin dng sonunda kontrol edilmesinde yatmaktadr. Bu yzden dng ierisindeki blok bir kere mutlaka ilem grmektedir. <html> <body> <script language="JavaScript"> i = 50; do { document.write(i + "<br>"); i++; }
Musa AVU
75
while(i < 40); </script> </body> </html> dowhile.html
ekil42 Dngnn sonunda nerme kontrol edildii iin, dng nermeye kadar devam etmitir. nerme ilk kontrolde false kt iin dngden klmtr. Dikkat edilmesi gereken nemli husus ise, dngnn sonunda noktal virgl unutmamamz. for dngs while dngsnn zelletirilmi halidir. Daha ok sayal ilemlerde kullanlmaktadr ve benim en ok kullandm dngdr. <html> <body> <script language="JavaScript"> for (i = 1; i <= 10; i++) document.write("Sayi: " + i + "<br>"); </script> </body> </html> for.html
76
Musa AVU
ekil43 for dngsnn ilk ksmnda deiken tanm yaplyor ve deeri aktarlyor. kinci ksmnda nerme belirtiyor. nc ksmnda ise deiken bir artrlyor. Deikeni artrma ilemi bloun sonunda yaplmaktadr. Ksmlar noktal virgllerle ayrlmaktadr. for dnglerin avantajlar kendisini dizilerde gstermektedir. <html> <body> <script language="JavaScript"> firma = new Array(); firma[0] = "Teneke Fabrikasi<br />"; firma[1] = "Kaporta sokaka 32<br />"; firma[2] = "42123 Konya<br />"; firma[3] = "Telefon: 0332393202322"; for(i = 0; i < firma.length; i++){ document.write(firma[i]); } </script> </body> </html> fordizi.html
Musa AVU
77
ekil44 length() fonksiyonuyla for dngsn dizinin uzunluu kadar dndryorum ve dizideki tm bilgileri ekrana yazdrm oluyorum. Dizilerle alan for dngleri iin kolaylk olmas asnda bir operatr vardr. Bu operatr in operatrdr. <html> <body> <script language="JavaScript"> firma = new Array(); firma[0] = "Teneke Fabrikasi<br />"; firma[1] = "Kaporta sokaka 32<br />"; firma[2] = "42123 Konya<br />"; firma[3] = "Telefon: 0332393202322"; for(i in firma){ document.write(firma[i]); } </script> </body> </html> fordiziozel.html
78
Musa AVU
ekil45 i deikeninden sonra in operatr kullanyorsunuz ve ondan sonrada hangi diziyi dng ierisinde ileme sokacaksanz onu tanmlyorsunuz. Bu kullanm tarz for dngs sadece dizilerle kullanlacaksa geerlidir. break ve continue Herhangi bir dng ierisinde break komutu kullanlrsa, program dngnn o noktasndan sonra kar ve dngden sonraki koda geer. <html> <body> <script language="JavaScript"> i = 10; while (true) { if (i < 0) { break; } document.write(i+"<br>"); i--; } </script> </body> </html> break.html
Musa AVU
79
ekil46 Sonsuz bir dngnn blouna bir if cmlecii yazdm. Eer i deikeni sfr deerinden ufaksa break komutunun ilenmesini istedim. Yine herhangi bir dng ierisinde belirli bir noktadan sonraki ksmn ilev grmesini istemiyorsak ve dngnn buna ramen dnmesini istiyorsak continue komutunu kullanrz. <html> <body> <script language="JavaScript"> for (i = 0; i <= 10; i++) { if ((i % 2) == 1) continue; document.write(i + " sayisi cift "+ "sayidir" +"<br>"); } </script> </body> </html> continue.html
80
Musa AVU
ekil47 Bu dngde ki deikeni ikiye blnmekte, eer kalan 1 ise anlyoruz ki bu say tek bir saydr ve bu blokta continue komutu kullanyoruz. Bylelikle ekrana i deikeninin ift bir say olduu yazlmyor. 3.7 Fonksiyonlar Muhtemelen program paranzda birka admnz vardr ve bu admlar birletirerek bir isim altnda toplamak isteyebilirsiniz. JavaScriptte de dier programlama dillerinde olduu gibi bunun iin fonksiyonlar vardr. Ayn program paralarn tekrar tekrar kodlamak yerine fonksiyonlar kullanmak daha avantajldr. Bylelikle fonksiyon ierisinde yapmak istediimiz deiiklik, fonksiyon arld tm blmlerde etkinliini gstermi olur. Karmak programlamalar ufak paralara blnm olur ki anlalmas kolaylam olur. Bir fonksiyon birden fazla bileenden olumaktadr. Fonksiyon ba ve fonksiyon blou ana bileenlerdir. Fonksiyon, fonksiyon ba, sonu tipi, fonksiyon ismi ve parametre listesinden olumaktadr. Basit bir rnekle fonksiyonlara giri yapmak istiyorum: <html> <body> <script language="JavaScript"> function test() { document.write("Selam ne haber"); } test(); </script> </body> </html> fonksiyon.html
Musa AVU
81
ekil48 Kodlamann bir fonksiyon olduunu function anahtar kelimesiyle belirtiyoruz. Daha sonra belirttiimiz fonksiyona bir isim veriyoruz. Ben rnek fonksiyonumuza test adn verdim. imdilik parametre kullanmadm iin parantezi atm ve hibir ey yazmadan kapattm. Ardndan {} parantezini kullandm. {} parantezleri arasna fonksiyonunuzun tm kodunu yazabilirsiniz. Son olarak test(); eklinde yazdm fonksiyonu aryorum ve tarayc fonksiyonun iindeki ilemi ekrana yanstyor. test(); arsn kodunuzda istediiniz kadar kullanabilirsiniz. Ne kadar ok kullanrsanz, taraycnz o kadar ok Selam ne haber mesajn gsterecektir. Fonksiyonlarn en byk avantaj karmak kod paralarn tek bir isim altnda toplamasdr.
Fonksiyonlarda parametre kullanm Fonksiyonlarmzda parametre kullanabiliriz. Parametreleri de fonksiyon ierisinde ileve sokabiliriz. <html> <body> <script language="JavaScript"> function topla(a, b) { document.write(a+" ve "+b+" sayisinin toplami :"+(a+b)); } topla(5,6); </script> </body> </html> fonkparametre.html
82
Musa AVU
ekil49 a ve b deikenlerini topla() fonksiyonunda parametre olarak kullandm. JavaScriptte fonksiyon parametreleri virgl ile ayrlyor. a ve b deikenlerini topla() fonksiyonunda parantezler arasna yazdm ve topla() fonksiyonunu arrken parametre olarak 5 ve 6 deerlerini verdim. Bylelikle a deikeninin deer 5 ve b deikeninin deeri 6 olmu oluyor. Fonksiyon ierisinde de 5 ve 6 deikenini toplattm ve taraycda gsterttim. a ve b deikenlerini toplarken parantez ierisinde topladm, nk parantez kullanmasaydm, write() fonksiyonu bu iki deikeni String olarak alglayacakt ve 11 says yerine 5 ve 6 saysnn yan yana gelmesinden oluan 56 saysn gsterecekti. sterseniz parantezleri kaldrn ve rneinizi tekrar altrarak sonucu izleyin. Farkl sayda parametre kullanmak artyla ayn fonksiyon adn kullanabilirsiniz. <html> <body> <script language="JavaScript"> function topla(a, b) { document.write(a+" ve "+b+" sayisinin toplami :"+(a+b)); document.write("<br>"); } function topla(a, b, c) { document.write(a+", "+b+" ve "+c+" sayilarinin toplami :"+(a+b+c)); document.write("<br>"); } topla(5,6,9); topla(7,16,29); </script> </body> </html> fonkparametre1.html
Musa AVU
83
ekil50 c deikeni ekleyerek ayn fonksiyon ismi ad altnda bir fonksiyon tanmlamas yaplabiliniyor. Fonksiyonlarda parametrik olarak verilen deikenler sadece o fonksiyon iin geerlidirler. Genel deikenler gibi her tarafta kullanlamazlar. <html> <body> <script language="JavaScript"> a = 10; function deger(a) { document.write("a degiskeninin fonksiyon icindeki degeri: " + a + "<br>"); } document.write("a degiskeninin fonksiyon oncesi degeri: " + a + "<br>"); deger(2); document.write("a degiskeninin fonksiyon sonrasi degeri: " + a + "<br>"); </script> </body> </html> fonkgeneldegisken.html
84
Musa AVU
ekil51 Fonksiyondaki a deikeni ile fonksiyon dnda kullanlan a deikeni farkl deikenlerdir. Fonksiyon ierisinde kullanacanz parametreler sadece fonksiyon iin geerlidir. Fonksiyon iinde yaplan deiken deer deiimleri fonksiyon dnda bir etkiye sahip deildir.
return Bir fonksiyonun deeri return anahtar kelimesiyle iletilmektedir. Fonksiyon ierisinde yaptnz ilemlerin sonucunu return anahtar kelimesinden sonra yazn ve noktal virgl ile kapatn. Bu fonksiyonun deeri olmu oluyor. Fonksiyonun deerini, fonksiyon dnda kullanmak isterseniz, bir deikene fonksiyonu atamanz yeterlidir. <html> <body> <script language="JavaScript"> function modlama(a, b) { return a % b; document.write("Gereksiz bir yazi"); } deger = modlama(17, 6); document.write(deger); </script> </body> </html> fonksiyondeger.html
ekil52 return anahtar kelimesi arldktan sonra fonksiyondan klr. Yukardaki rnekte de grdnz gibi return ileminden sonraki satr ilem grmemektedir, nk fonksiyon matematiksel ilemi deer olarak iletmektedir ve fonksiyondan klmaktadr.
Musa AVU
85
Kendini aran fonksiyon JavaScript kendini aran fonksiyon mantn desteklemektedir. <html> <body> <script language="JavaScript"> i = 1; function islem(son) { if(i < son) { i=i+i; islem(son); } else document.write("sonuc: " + ": " + i + "<br />"); } islem(100); </script> </body> </html> fkendinicagir.html
ekil53 islem fonksiyonunun iinde if kavram true deerini alrsa, if kavramnda fonksiyon tekrar arlyor. Program, fonksiyonun arld noktay i mekanizma olarak yn dediimiz bir blgeye kayt ediyor. Tekrar arlan fonksiyon yine if kavramnda true sonucu karsa, if kavramnda kendisini bir daha aryor. Bu ilem if kavramndan false deeri knca ve else ilemi bitinceye kadar devam ediyor. Bundan sonra program yna gidiyor ve en son hangi fonksiyonu yna koyduysa onu oradan alyor ve kendisini ard noktadan devam ediyor.
86
Musa AVU
Bu yntemin kafanzda daha iyi yer edinebilmesi iin bir nceki rnekte ufak bir deiiklik yaptm: <html> <body> <script language="JavaScript"> i = 1; j = 1; function islem(son) { if(i < son) { i=i+i; islem(son); } else document.write("sonuc: " + ": " + i + "<br />"); document.write(j+++". fonksiyondayim"); document.write("<br>"); } islem(100); </script> </body> </html> fkendinicagir.html
ekil54
Musa AVU
87
3.8 Eventhandler Artk sndk diyebiliriz, kitabn bundan sonraki konular derinlemeye balayacak ve sizde grsel olarak farkl program paralar kodlayabileceksiniz. Isnmasaydk bundan sonraki blmlerde sorun yaardk. Taraycnzda fareyi hareket ettirmeniz, taraycnz tarafndan bir olay olarak alglanr. Bir dmeye basmanz taraycdan bir olay olarak alglanr. Bu tr olaylar JavaScriptte kullanabilirsiniz. Bu mekanizmaya Eventhandler deniliyor. HTML 4.0 dan sonra Eventhandler mekanizmas HTMLe ait oldu. http://www.w3.org/TR/html4/interact/scripts.html adresinde Attribute definitions standartlam Eventhanlerleri bulabilirsiniz. Ben size bunlarn bir kan rneklerlede gstereceim. Eventhandler, on n ekiyle balar ve hangi olayla balant kurulacaksa o olayn ngilizce kelimesiyle devam eder. Mesela onload, yklenince manasna gelmektedir ya da onmousedown, fare dmesine baslnca anlam tamaktadr. rneklerime gemeden baz problemlere deinmek istiyorum. W3Cde standartlam Eventhandlerleri tm tarayclar olduu gibi desteklemiyorlar. Baz tarayclar, bir ksmn farkl desteklerken bazlar hi desteklemiyor. Bu yzden bir sayfada Eventhandler kullanacaksanz, sayfanz tm tarayclarla denemenizi neririm.
ekil55
88
Musa AVU
onMouseOver ve onMouseOut ile ilgili bir rnek vermek istiyorum: <html> <script language="JavaScript"> function resimcerceve(){ document.resim.border=9; } function resimcerceveyok() { document.resim.border=0; } </script> <body> <h3>Fareyi resime hareket ettirin</h3> <a href="#" onMouseOver="resimcerceve()" onMouseOut="resimcerceveyok()"> <img src="turkiye.jpg" name="resim" border="0" /></a> </body> </html> resimevent.html
ekil56 Fare ile Trk bayrann bulunduu resmin zerine geldiinizde resmin etrafnda bir ereve olumaktadr. HTML tag olan <a> tagnn arasna yine HTML tag olan resim tag <src> tagn koydum. Resim tagnn name parametresinde resim tagnn isminin resim olduunu belirttim. <a> tagnda onMouseOver ve onMouseOut Eventhandlerlerini kullandm. onMouseOver Eventhandleri, fare ile resmin zerine gelince aktif oluyor ve kendisine atanan
Musa AVU
89
fonksiyonu armaktadr. Burada resimcerceve() fonksiyonunu atadm. Fonksiyonum parametresiz olduu iin fonksiyonun parametresiz halini atadm. resimcerceve() fonksiyonuna baktmzda tek bir ilem yaptn grrsnz. resim isimli objeye ulayor ve erevesinin kalnln 9 yapyor. document tanmlamasnn sayfamz olduunu dnn, resim ise o sayfadaki resim isimli obje. Daha sonra da bu objenin erevesini border deikenini deitirerek deitirebiliyoruz. onMouseOut Eventhandleri de, fareyi resimden ekince aktif olmakta ve resimcerceveyok() fonksiyonunu armaktadr. Bu fonksiyonda resmin etrafndaki ereveyi 0 yaptm. Farkna vardysanz W3C standartlarndaki gibi onmouseout gibi bir yazm kullanmadm ve onMouseOut yazdm. HTML olduu iin tolerans ediliyor ve byklk kklk fark etmiyor. XHTML kullansaydnz o zaman onmouseout yazmanz gerekiyordu yoksa hata oluurdu. W3C sayfasndaki Eventhandlerleri bu ekilde sayfanza ekleyebilirsiniz. Kullanmlar ok basittir fakat sayfanza canllk katmaktadrlar.
3.9 Form ve Eventhandler Eventhandlerleri Formlarda kullanmak bize byk avantajlar salayabilir. HTML bize Form kullanmamz salyor biliyorsunuz. Formlarla kullanclar metin kutularn doldurabilirler, seenekler seebilirler ve bunlar Server tarafndaki bir program parasna yollayabilirsiniz. Hemen bir rnee bakalm: <html> <script language="JavaScript"> function aktif(metin) { document.getElementById("bilgi").innerHTML=metin; } function pasif() { document.getElementById("bilgi").innerHTML=""; } </script> <body> <form> Kullanici Adi: <input type="metin" name="userid" onFocus="aktif('Kullanici adinizi girin')"
90
Musa AVU
onBlur="pasif()"> <br> Sifre: <input type="password" name="pw" onFocus="aktif('Sifrenizi girin')" onBlur="pasif()"> </form> <div id="bilgi"></div> </body> </html> focus.html
ekil57 Kod paras ilk bata biraz kark gibi gzkebilir, zellikle Formlarla almam kiiler yadrgayabilirler fakat anlaldktan sonra ok basit olduunu greceksiniz. <form> tagyla bir Form tanm yapyoruz. <input> tag giri yapacamz bir nesnenin olduunu gsteriyor. type parametresinde <input> tagnn gsterecei nesnenin tipini belirtebiliyoruz. lk nesnenin metin kutusu olmasn istediimin iin type parametresine text yazdm. kinci nesnenin ise bir ifre metin kutusu olmasn istedim ve type parametresini password olarak ayarladm. Asl bundan sonras ok ilgin ve bizi ilgilendiriyor. Metin kutusunda onFocus Eventhandlerini kullandm. onFocus Eventhandleri kullanc metin kutusunu seerse aktif hale geliyor ve daha nce tanmladm aktif() fonksiyonunu aryor. Bu sefer tanmladm fonksiyonu parametrik yaptm. Parametrede yazlan metinle beraber aktif() fonksiyonu arlyor ve getElementById() fonksiyonunun yardmyla bilgi nesnesine ulalyor. Ulatmz nesnenin innerHTML deikeninin deerini deitiriyoruz. innerHTML deikeni ulatmz nesnenin HTML ieriine mdahale ederek deitirmektedir.
Musa AVU
91
Senaryoyu baar alrsak gryoruz ki, kullanc metin kutusunu seer semez kullancy bilgilendirebilmek iin tarayc bir yaz gsteriyor. onBlur Eventhandleride onFocus Eventhandlerin tam tersidir. Metin kutusu seili deilken aktif olmaktadr. Ayn ekilde pw nesnesi de ilemektedir.
92
Musa AVU
Blm 4 Hata bulma ve ayklama
Musa AVU
93
4.1 Hata arama Tm programlama dillerinde olduu gibi JavaScriptte de programlarken hata yapabiliriz ve kodumuz hatal olduu iin isteimiz dnda alr. Bu blmde yaptnz hatalar nasl bulabilirsiniz onu reneceksiniz. Sradaki rneimize bir bakalm: <html> <body> <table border width="100"> <script language="JavaScript"> sayi = Math.round(Math.random()* 30); document.write("Cikis degeri: " + sayi ); for(sayac=0;sayac < say;sayac++) { document.write("<tr><td>Sayi:</td><td> ", sayac, "</td></tr>"); } </script> <table> </body> </html> hatabul.html
ekil58
94
Musa AVU
Math.random() fonksiyonu 0-1 aras rastgele bir say retmektedir. Math.random() fonksiyonu kan sayy tam sayya yuvarlamaktadr. Ben 0-30 says arasnda rastgele bir say seebilmek iin ilemi 30 ile arptm ve sayi deikenine atadm. for dngs sayi deikenindeki tam say kadar dnecek ve tarayc tablo satr gsterecektir. Fakat grdnz gibi kod hatal olduu iin isteimiz gereklemiyor. Firefox taraycs da hatal bir kod olmasna ramen bize hibir hata mesaj vermemektedir. Yukardaki mnden Aralar->Hata konsolu seeneini seerseniz karnza yle bir pencere kacaktr:
ekil59 Bu konsol hata bulmada ok iinizi grebilir. sterseniz sadece hatalar grebilirsiniz ya da sadece uyarlar ve iletileri grebilirsiniz. sterseniz de hepsini birden grebilirsiniz. rneimiz iin bakarsak say is not defined diye bir hata mesajnn olduunu ve hangi satrda olduunu gryoruz. Dier tarayclarnda buna benzer hata konsol penceresi vardr. Ben Firefoxu kullandm iin onu gsterdim.
Musa AVU
95
Hatann nereden kaynaklandn buna ramen bulamadysanz kodunuzun baz blmlerinde taraycnzda grmeniz iin deerleri yazdrtn. <html> <body> <table border width="100"> <script language="JavaScript"> sayi = Math.round(Math.random()* 30); document.write("Cikis degeri: " + sayi ); alert(sayi); for(sayac=0;sayac < say;sayac++) { document.write("<tr><td>Sayi:</td><td> ", sayac, "</td></tr>"); } </script> <table> </body> </html> hatabulalert.html
ekil60 alert() fonksiyonuyla ekrana rastgele retilen saynn ktsn verdirttim, bu ekilde kodumun hatal olan blm alert() fonksiyonundan sonra olduunu anlam oluyorum, nk kodum alert() fonksiyonuna kadar alyor. alert() fonksiyonunu dngnn ierisine koyduumda ekrana alert() fonksiyonunun grnts kmyor. Buradan yine anlalyor ki dngde bir hata var. Bu da hata bulmak iin bir alternatiftir, fakat gl bir yntem debugger kullanmdr.
96
Musa AVU
4.2 Debugger imdiye kadar olan metotlarda hatalar, taraycdan gelen mesajlara gre ya da geleneksel programlama eklinden bulduk. imdi bir Debugger ile bir hatay nasl bulabiliriz onu gstereceim. imdi size vereceim bilgiyi hi bir kitapta bulamazsnz, o yzden buray iyi okuyun, nk size hata bulmada ok yardmc olacak. Bunu yapmadan nce Firefox taraycnza Venkman adl bir Debugger yklemenizi neririm. Firefox taraycnzda, Aralar ->Eklentiler seeneini tklayn ve VenkMan programn Firefox uygulamasna ekleyin.
ekil61 Kurulum bittikten sonra hatabul.html dosyasna ift tklayarak Firefox ile tekrar an ve Aralar->JavaScript Debugger seeneini sein.
Musa AVU
97
ekil62 Bu seenei setiinizde karnza JavaScript Debugger penceresi kacaktr:
ekil63
98
Musa AVU
Venkman olduka kaliteli bir Debugger olmasna ramen arada srada kebiliyor. Onun dnda JavaScriptlerde hata bulabilmede yardm antas gibi dnebilirsiniz. JavaScript Debuggerde Open Windows sekmesini tkladmzda taraycmzdaki ak sekmeleri grrz. Open Windows sekmesini setikten sonra hatabul.html dosyasn ift tklayn:
ekil64 Debugger tklanan HTML sayfasnn kodunu sa blgesinde gstermektedir. Debugger ile alnca, hatal kodun hata olduundan phe edilen satra kadar kodun almas istenilir ve Debuggern kodu o satra kadar altrp durmas iin bir kesme noktas konur. Buna Breakpoint denilmektedir. 6. Satrn sol tarafndaki bolua fare ile tkladmzda bir F harfi belirir. Future Breakpoint demektir, yani gelece kesme noktas. Debug->Error Trigger->Stop for Errors seeneini seili konumuna getirin:
Musa AVU
99
ekil65 Tekrar taraycnza dnn ve kodu tekrar ykleyin. Bunu yaptnzda JavaScript Debugger otomatik olarak F olan satra kadar alacaktr ve hatadan tr kodu orada durdurmaktadr:
100
Musa AVU
ekil66 imdi 6. Satrn nndeki bolua tkladnzda orada arka plan krmz bir B harfi greceksiniz.
ekil67
Musa AVU
101
imdi Continue dmesine basarsanz ve tekrar kodu taraycnzda geri yklerseniz arka plan krmz olan B noktasnda Debugger, kodu durdurur. ok karmak bir teknik fakat iimizi grmesi iin bu karmaal yapmamz gerekiyor. Bizim iin nemli olan kodumuzu istediimiz noktaya kadar altrmak ve orada durmasn salamakt, bunu da baardk. JavaScript Debuggerin st tarafna bakarsanz, Step Over, Step Into ve Step Out dmelerini grrsnz. Step Over, JavaScript Debuggerin kodu satr satr ilemeisni salar, Step Into sradaki bir fonksiyonsa kodun o fonksiyon iinde devam etmesini salar. Step Over ise kodun bulunduu fonksiyonda kmasn salar. Adm adm ilemleri yapmadan nce JavaScript Debuggerin Watches blmne ilginizi ekmek istiyorum. Watches sekmesine tklayn ve o alana sa fare ile tklayn. Orada Add Watch Expression sein:
ekil68 kan penceredeki metin kutusuna sayi yazn:
102
Musa AVU
ekil69 Tamam dmesini tklayn:
ekil70 Bu ekilde kod ierisindeki deikenlerin deerini renebilirsiniz. Bu da ok faydal bir zellik olup size kod ayklamada byk yardm edecektir. imdi Step Over dmesine basn:
Musa AVU
103
ekil71 Continuing from breakpoint mesaj gelecektir. Tekrar Step Over dmesine basn:
104
Musa AVU
ekil72 Stopped for error handler mesaj kacaktr. 7. satrda Debugger kodu durduruyor ve bu satrda bir hatann olduunu sylyor. Daha nce bunu tarayc yardmyla grmtk fakat Debugger ile bu kesinlemi oldu. Kod satrna iyi bakarsak say deikeni yerine aslnda sayi yazmamz gerektiini grrz. Venkman problemli olmasna ramen ok gl bir Debugger, zellikle JavaScript iin u an bulunan en kaliteli Debugger. Elimden geldiince konuyu ksa ve rnekli tuttum ki kodunuzda hata olunca nasl zebileceinizi bilmi olun.
Musa AVU
105
Blm 5 Nesneler, Snflar ve Metotlar
106
Musa AVU
5.1 Nesne nedir? Nesne nedir? Nesne, gnlk yaammzda kullandmz belirli zelliklere sahip ve zel bir durumu olan varlktr. Nesnelere dayal programlama denilen bu yntem JavaScript tarafndan da desteklenmektedir. JavaScript, Nesnelere dayal bir programlama dili deildir, Nesnelere dayal programlamaya destek veren bir programlama dilidir. Yani JavaScriptte, nesneleri kullanabiliriz ve nesnede oluturabiliriz. JavaScriptin, tam bir nesneye dayal programlama dili olabilmesi iin eksikleri mevcuttur. Nesneleri kullanmak JavaScriptte ok kolaydr. nce nesneyi yazar sonra bir nokta koyarz ve daha sonra nesnenin zelliini gsteren metodu yazarz. Metotlara da deineceim. window.alert(Ben bir nesnenin metoduyum); window nesnenin ismidir, alert() fonksiyonu windows nesnenin zelliidir.
5.2 Snflar ve kurucu metotlar JavaScriptte nesne oluturmak istiyorsanz snflara ihtiya duyarsnz. Snflar bir yapnn plan gibi dnn. Diyelim ki siz bir ev yaptracaksnz. Mimar evin plann izer ve plana gre ev yaplr. Ev burada nesne, plan ise snftr. Evi yapabilmek iin iilere ihtiya duyarsnz, bu mekanizmaya da kurucu metot denir. <html> <body> <script language="JavaScript"> tarih = new Date(); dizi = new Array(); resim = new Image(); </script> </body> </html> kurucumetot.html
Musa AVU
107
new anahtar kelimesiyle bir nesne oluturabiliyoruz. tarih deikenine, new anahtar kelimesiyle bir Date() nesnesi oluturarak atadm. nce atanacak deiken, sonra eitlik operatr ve new anahtar kelimesi yazlr ve en sonda hangi snftan bir nesne oluturmak istiyorsak o snfn kurucu metodunu yazarz. Kurucu metot ile snflarn isimleri her zaman ayndr. Ayn ekilde dizi ve resim deikenlerine de Array() ve Image() nesnelerini oluturarak atadm. Doru dzgn bir rnek yapmak istersek: <html> <body> <img src="konya.jpg" height="100" weight="300"/> <script language="JavaScript"> resim = new Image(); resim.src = "turkiye.jpg"; setTimeout("document.images[0].src=resim.src","3000"); </script> </body> </html> nesneolustur.html
ekil73
108
Musa AVU
ekil74 <img> tag ile konya.jpg resim dosyasn taraycma ykledim. JavaScript blmnde, setTimeout() fonksiyonu window nesnesinin bir zellii ya da bilgisayar dilinde metodudur. setTimeout ne yapar? lk parametreye kodu yazarz, ikinci parametreye de o kodu ne kadar gecikmeli aracamz salise cinsinden yazarz. Resim nesnesini resim deikenine atadm. Resim nesnesi burada new Image() ile oluturulmaktadr. resim.src derken src resim nesnesinin bir zelliidir. Bu zellik yklenecek resmin sistemdeki dosya ismiyle beraber dizindeki yeridir. Ben resim nesnesinin src deikenine turkiye.jpg dosyasnn adn atadm. document.images[0]daki images[0] HTML sayfasndaki ilk <img> tagna iaret ediyor, nk keli parantezlerin arasnda 0 yazyor. <img> tagnn src parametresine images[0] nesnesinin src zelliiyle eriebilinmektedir. Bu parametreye resim nesnesindeki src zelliindeki deeri atyorum. setTimeout ile ikinci parametreyi 3000 salise yani 3 saniyeye ayarladm iin, konya yazl resim saniye sonra Trkiye yazl resim ile yer deitirecektir. Unutmayalm, document nesnesi sistem tarafndan oluturulmu bir nesnedir. Birden fazla yapc metodu ve hepsinin parametresi farkl olan snflar olabilir.rnein Date() snfnn birden fazla yapc metodu vardr ve kurucu metotlarn parametre says farkldr. <html> <body> <script language="JavaScript"> a = new Date(2006, 11, 15, 2, 14, 11, 7);
Musa AVU
109
b = new Date(2007, 11, 15, 2, 14, 11); c = new Date(2008, 11, 15, 2, 14, 11); document.write(new Date("september 13, 2003 12:11:03") + "<br />"); document.write(new Date(2000, 3, 12) + "<br />"); document.write(a + "<br />"); document.write(b + "<br />"); document.write(a - b + "<br />"); </script> </body> </html> tarih1.html
ekil75 imdiye kadar Date() snfndan parametresiz bir kurucu metot kullanarak nesne oluturuyorduk. Parametresiz kullanlan Date() snf gncel tarih ve saati vermektedir. tarih1.html rneinde Date() nesnesinin birok kullanm ekli vardr.a deikenine atanan Date() nesnesinin parametrelerine bakarsak, 2006 yl, 12 ay, 15 gn, 2 saat, 14 dakika, 11 saniye, 7 salise deerinde bir nesne oluturacaktr. 11 yazan yer Kasm ay deildir, Aralk aydr. Date() snfnda aylarn numaralandrlmasnda sfrdan balamaktadr. 0 Ocak aydr, 11 ise Aralk aydr. Salise deerini istemiyorsak, b ve c deikenlerine atanan nesneleri kullanabiliriz. Date() snfnn bir baka kullanm, parametre olarak metin ya da bir dier deile String kullanmdr. Stringi istenilen formatta
110
Musa AVU
yazarsanz o format dorultusunda bir Date() nesnesi oluturmu oluyorsunuz. Date() nesneleri arasnda yaplan karma ilemlerin sonucunda kan rakam iki tarih arasndaki farkn salise deeridir. Taraycnzdaki son satrda grdnz deer byle bir deerdir. Sayfanzda Trke kullanacaksanz yukardaki grnt iinizi grmez.
Date snf Bu snf, snflara rnek olmas asnda biraz daha yakndan incelemek istiyorum. Bylelikle Date snfn tanm olursunuz ve snflarla nesnelerin nasl altn renmi olacaksnz. <html> <style> *{ background-color : white; color : blue; } </style> <body> <div align="center"> <h1>Bugunku Atasozu</h1> Bir elin nesi var iki elin sesi var <script language="JavaScript"> var dgun,day,dyil; function tarihGuncel(gun,ay,yil) { if(gun<10) { dgun="0" + gun; } else dgun = gun; if(ay<10) { day="0" + ay; } else day=ay; dyil =1900 + ((1900 + tarih.getYear()) % 1900); } var tarih = new Date();
Musa AVU
111
tarihGuncel(tarih.getDate(), tarih.getMonth() + 1, tarih.getYear()); document.write("<hr />Guncellenme tarihi: " + dgun + "." + day + "." + dyil); </script> </div> </body </html> tarih2.html
ekil76 Bu kodda bizi iligilendiren ksm Gncellenme tarihi ksm. new Date() ile bir tarih nesnesi oluturdum. Bununla gncel tarih sorgulanyor. Fakat daha sonraki satrda, gncel tarihin bileenleri, tarihGncel adl fonksiyonda ayrtrlyor ve ekrana bizim istediimiz formatta yazdrtlyor. Fonksiyonun parametreleri srasyla gncel tarihin, gnn, ayn ve yln belirtmektedir. getDate() gn, getMonth() sfrdan balamak artyla ay ve getYear() yl bize vermektedir. imdi diyebilirsiniz ki, neden getDate(), getYear(), getMonth() fonksiyonlarn dorudan kullanarak tarihsel bilgileri ekrana yazdrtmyoruz. Bunun birka nedeni var. Ay ve gn bilgisi 10 saysndan ufaksa ekrana sadece tek haneli bir say yazlmaktadr, nk getMonth() ya da getDate() tam say deerini iletir. Taraycda grdnz gibi ay bilgisi iin 05 grnts sergileyebilmek iin aldnz tam say deerini ilemeniz gerekiyor. Ben basit bir if kyaslamas yaparak dedim ki, eer tam say deeri 10 saysndan ufaksa yani tek haneli ise bana sfr ekle. Yl iin niye byle komik bir kurgu yaptm da soruyorsunuzdur. Biliim sektrnde tarihler 01.01.1900 balar ve hesaplama yaplr. Baz tarayclar buna uymazlar. Internet Explorerin baz versiyonlarnda bu satr ileme koymam olsaydk tarayc 2010 gsterecektir, fakat dier tarayclar 110
112
Musa AVU
gsterecekti, nk o tarayclar sfr tarihini 01.01.1900 tarihi olarak kabul etmektedirler. Fonksiyondaki satrla tm tarayclarla doru bir grnt elde etmi oluyoruz. Date snfnn baz metotlarn vermek istiyorum: Metot getDate() getHours() getMinutes() getYear() getSeconds() setDate() setHours() setMinutes() setYear() setSeconds() Aklama Bir aydaki gn veriyor. Bir gndeki saati veriyor Bir saatteki dakikay veriyor Bulunduumuz yl veriyor Bir dakikadaki saniyeyi veriyor Bir aydaki gn deitirir. Bir gndeki saati deitirir Bir saatteki dakikay deitirir Bulunduumuz yl deitirir Bir dakikadaki saniyeyi deitirir
String snf JavaScriptte metinleri saklayabiliryoruz ve bunlara biz String diyoruz. Stringler de birer nesnedir. Dier nesneler gibi Stringlerin de metotlar vardr. Stringin nemli olan birka metoduna deineceim ve ileriki konularda farkl bir metot grdmzde onu orada anlatacam. imdiden bir konunun tm zelliklerine vererek beyin iirmek istemiyorum, zamanla veriyorum ki srekli tekrar etmi olalm:
<html> <style> *{ background-color : black; color : white; } h1 { background-color : yellow; color : green;
Musa AVU
113
text-align : center; } div { background-color : white; color : purple; text-align : center; width : 400px; } </style> <body> <h1>Girilen Bilgi Hakkinda</h1> <div> <script language="JavaScript"> testText = prompt("Bir String bilgisi girin",""); document.write("String uzunlugu: " + testText.length + " <br />" + "3. harf: " + testText.charAt(2)+ ".<br />" + "String'in buyuk yazilmis hali: " + testText.toUpperCase()+ ".<br />" + "String'in kucuk yazilmis hali: " + testText.toLowerCase()+ ".<br />" + "String'in kalin yazilmis hali: " + testText.big()+ ".<br />" + "String'in ustu cizgili yazilmis hali: " + testText.strike()+ ".<br />" + "s harfi nerede?: " + testText.indexOf("u") + "." ); </script> </div> </body </html> string.html
114
Musa AVU
ekil77
ekil78 ekil77deki metin kutusunu window nesnesinin prompt metoduyla oluturulmutur. prompt() metoduna verdiiniz parametre metin kutusunda bilgi olarak yer alr. Program sizin Tamam ya da Vazge dmelerine basncaya kadar bekler. Tamam dmesine bastnzda girdiiniz String atamak istediiniz deikene atanr ve program devam eder. Vazge dmesine basarsanz girdiiniz String bilgisi atanmaz. Ben Tamam dmesine bastm ve ekranda girdiim String hakknda bilgiler aldm. length() metoduyla Stringin uzunluu, toUppercase() ile Stringin byk yazlm hali, toLowerCase() ile Stringin kk yazlm hali, big() ile Stringin kaln yazl hali, indexOf() ile parametredeki harfin Stringdeki yeri verilyor.
Musa AVU
115
Farkna vardysanz, rneklerin boyutu bymeye balad. ki satr yazarak geitirmek istemediim iin rnekleri uzun tutuyorum. okta uzun tutmamaya alyorum, nk bu seferde konu dalabilir. Mutlaka verdiim rnekleri kitab okurken deneyin ki konuya hkimiyetiniz glensin.
5.3 Metotlar Nesneye dayal programlama tekniklerinde, programlar birbirilerine etkileim ierisinde bulunabilmek iin ar yollarlar. Bu arlar, bir metodun sonularna gre olmaktadr. Bir Objenin ne yapabildii metotlarnda ortaya kmaktadr. Bir metodun tanmlanmasnn avantajlarn u ekilde sralayabiliriz: Ayn program paralarn tekrar tekrar kodlamak yerine metotlar kullanmak daha avantajldr. Bylelikle metot ierisinde yapmak istediimiz deicilik, metodun arld tm blmlerde etkinliini gstermi olur. Karmak programlamalar ufak paralara blnm olur ki anlalmas kolaylam olur. Da doru bir Nesnenin sunduu zellikler metotlarnda gizlidir.
<html> <body> <table > <script language="JavaScript"> <!-for(i = 1; i < 6; i++) { z = Math.round(Math.random() * 50); document.write("<tr><td>Sayi " + i + ":</td><td>" + z + "</td></tr>"); } //--> </script> </table> </body> </html> sayilar.html
116
Musa AVU
ekil79 random() metodu 0-1 arasnda bir say retmektedir, bunu 50 ile arptmda bu say 0-50 arasnda bir say olmaktadr, tam say istediim iinde round() metoduyla bunu saladm. Math bir snftr ve random() ile round() Math snfnn birer metodudur. lgin olan Math snfndan bir nesne oluturmadan dorudan metotlarn arlabilmesidir. Normalde byle bir arma hata vermesi gerekiyor. Bu tr nesneler statik olduu iin byle bir kullanmda bulunabiliriz. Kitabmda JavaScript snflarndan rnekler veriyorum fakat detaylara inmiyorum, daha ok gncel kullanlan programlama ekillerine deiniyorum. Ayrntl bilgi iin Google Amcaya bavurmanz neririm. JavaScript ve HTML referans olarakta http://www.w3schools.com/jsref/default.asp sayfasndan yararlanabilirsiniz.
5.4 DOM (Document Object Model)
Musa AVU
117
ou kez nesneler oluturacaksnz ve snf metotlarn kullanmaksnzdr. Mutlaka hazr olan nesnelerin metotlarn da kullanacaksnzdr, nk bunu yapmazsanz JavaScript ile taraycnza bir grnt bile veremezsiniz. DOM, aa yapsna benzer bir yapda kullanabileceiniz nesneleri ktphaneletirmitir. DOM teknolojisinin ncelikle JavaScript ile hi bir balants yoktur. <html> <body> <table > <form action="wohin.php" method="get" onReset="return confirm( 'Bilgiler sifirlanacaktir, emin misiniz?')"> <tr> <td> Ad </td> <td> <input type="text" name="ad" /> </td> </tr> <tr> <td> Soyad </td> <td> <input type="text" name="soyad" /> </td> </tr> <tr> <td> <input type="reset" /> </td> <td> <input type="submit" /> </td> </tr> </form>
118
Musa AVU
</table> </body> </html> formsifirla.html
ekil80 Taraycnz ekil80i gsterdiinde siz Aralar-> DOM Inspector seeneini sein.
Musa AVU
119
ekil81 kan pencerede DOM Inspector, sayfanzn aa yapsn gstermektedir. Aacn en st ksmnda document terimini gryorsunuzdur. Sizce document ne olabilir? document web sayfasn gsteren bir nesnedir. document nesnesinin iinde HTML tagnn olduunu grrsnz. HTML tagnn iinde HEAD tagn grrsnz ve hangi tagn ierisinde hangi taglarn ya da metinlerin olduunu DOM Inspector bize bir aa yaps olarak gsterir. DOM Inspectorunda bir tag seince taraycda o blge iaretleniyor:
120
Musa AVU
ekil82
DOM modeline gre bir web sayfas taraycda gsterildikten sonra o sayfann tm elemanlar hafzada birer nesne olarak saklanr ve document nesnesi ile tm elemanlara ulaabilinir. JavaScriptte DOM modelinden kullanabileceimizi kullanl nesneler var. Ben nemlilerini bu kitapta anlatacam. document nesnesi Bu nesne sayfanzdaki HTML taglarna ulaabilmek iin JavaScriptte olduka ok kullanlr. windows nesnesinin bir nesnesidir. Siz window.document ya da sadece document olarakta document nesnesini arabilirsiniz. ok nemli bir nesnedir. <html> <script language="JavaScript">
Musa AVU
121
function resimYukle() { // document.forms[0].elements[0].value = "Oylesine bir yazi"; document.getElementsByName("f1")[0].elements[0].value = "Oylesine bir yazi"; // document.f1.elements[0].value = "Oylesine bir yazi"; document.getElementById("h").innerHTML="Yeliz"; document.getElementsByTagName("h1")[1].innerHTML = "Resim degisti"; window.document.images[0].src = "yeliz.jpg"; } </script> <body> <h1 id="h">Ecrin</h1> <form name="f1"> <input> </form> <h1>Resim</h1> <img src="ecrin.jpg" width="400" onclick="resimYukle()"> </body> </html> dom1.html
122
Musa AVU
ekil83
ekil84
Musa AVU
123
imdi yapacam aklamay iyi okuyun ve anlayn, nk bunu anlarsanz bundan sonraki admlar sizin iin ok kolay olacaktr. Aklamay bile bile allmn dnda biraz uzun tuttum. Websayfasna document nesnesiyle ulaabiliriz. // olarak tanmlanan satrlar JavaScript tarafndan aklama olarak gzetilir. document nesnesinden sonra nokta konarak document nesnesinin alt nesnelerine ya da deikenlerine ulaabiliriz. resimYukle() fonksiyonundaki ilk satra bakarsanz, document nesnesinden sonra . koydum ve forms[0] yazdm. forms document nesnesinden saklanan bir dizi nesnesidir. forms nesnesi ierisinde document nesnesinin gsterdii web sayfasndaki tm Form taglar saklanmaktadr. Keli parantez aarak dizideki nesnelere ulamak istiyorum. erisine sfr yazdm ve ilk Form nesnesine ulamak istediimi vurguladm. forms[0] nesnesinden sonra nokta koydum ve elements yazdm. elements nesneside forms[0] nesnesinin gsterdii Form nesnesinin taglardr. dom1.htmlde tek bir tag vardr o da <input> tagdr. Burada keli parantez ierisine sfr yazarak ilk elemana ulatm. Bir yazsaydm forms[0] nesnesinin ikinci tagna ulardm. dom1.htmlde forms[0] nesnesinin ikinci bir tag olmadg iin JavaScript kodumuz hata verecekti. elements[0] dizisinden sonra yine bir nokta koydum ve value yazdm. value elements[0] dizisinin bir deikenidir ve elements[0] nesnesinin deerini deitirir. elements[0] nesnesinin bir <input> tagna iaret ettiini anmsarsanz, bu tagn bir metin kutusu olduunu hatrlarsnz. kinci satrn JavaScript tarafndan ilenmesini istediim iin // iareti koymadm. kinci satr az nce anlattm metin kutusuna ulamann farkl bir tekniidir. Bu sefer document nesnesinden sonra getElementsByName() metodunu kullandm. Parametre olarak f1 yazdm, nk ben biliyorum ki benim web sayfamda kullandm tek bir Form nesnesi var ve ad f1. getElementByName() metoduyla taglara, taglarn isimleriyle ulaabiliyoruz. Ayn isimden birden fazla Form nesnesi olabilecei iin keli parantez kullanarak dizinin ilk elemann sfr yazarak semi oldum. Bir baka yntem ise Form nesnesinin adn dorudan bir nesne olarak kullanmaktr. Bunu da nc satrda rnekledim. Document nesnesinden sonra Form nesnenesinin ad f1yazdm. Form nesneleri dndaki taglarada ulaam ekilleri vardr. Bunun iin drdnc satra bakn. HTML kodunda h1 tagnn id parametresine h yazmtm. Bu taga document nesnesinin getElementById() metoduyla ulalabilinir. getElementById() metodunun parametresine h yazmamz yeterlidir. h1 tagnn ieriini deitirebilmek iin bu metot bize innerHTML deikenini
124
Musa AVU
sunmaktadr. innerHTML deikeninin deerini deitirmekle h1 tagnn ieriini deitirmi oluyoruz. Diyelim ki taglara tag ismiyle ulamak istiyoruz o zaman ne yapacaz. Beinci satrda byle bir rnek satr kodu verdim. getElementByTagName() metodunun parametresine h1 yazarak h1 olan tm taglar bir dizi halinde elde edebiliyorum. HTML kodundaki ikinci h1 tagna ulaabilmek iin keli paranteze 1 deerini yazyorum. Son olarak resimYukle() fonksiyonu arldnda sayfamdaki resmimi deitirmek istediim iin document nesnesinin images dizisine bavuruyorum. document nesnesinden sonra images yazyorum ve keli parantezin iine 0 yazarak ilk resim tagna ulam oluyorum. src parametresinin deierini deitirmeklede yeni resmi ykleyebilme frsatn kazanm oldum. dom1.html dosyasna ift tkladnzda taraycnz bir sayfa gsterecektir. Resime tklandnda resimYukle() fonksiyonu arlacaktr ve sayfann ierii deiecektir.
window nesnesi windows nesnesi, JavaScriptteki en nemli nesnedir. DOM modelinde bu nesne en stte yer alr. windows nesnesinin, alt nesneleriyle JavaScriptte ok nemli eyler yapabiliyorsunuz. rnein az nce anlattm document nesnesi gibi. Ayn ekilde window nesnesininde nemli metotlar vardr. Dahan nce bunlardan alert() ve prompt() gibi metotlarn kullanmtk. nemli grdm metotlar az sonra greceiz. Geni bir rnekle balayalm: <html> <body> <script language="JavaScript"> var mPencere; function yeniPencere() { mPencere = open("","BosPencere"); } function kapatPencere() { pencere.close(); } function boskapatPencere() { if(mPencere.closed != true) mPencere.close();
Musa AVU
125
} function init() { mPencere = open("","BosPencere"); mPencere.close(); } </script> <body onLoad=init()> <table border="4"> <form name="f1"> <tr><td>Metin</td> <td><input type="button" value="OK" onClick='window.open("metin.txt","MetinPencere")' /></td></tr> <tr><td>Grafik</td> <td> <input type="button" value="OK" onClick='self.open("yeliz.jpg","ResimPencere")' /></td></tr> <tr><td>Yeni bir HTML sayfasi</td> <td><input type="button" value="OK" onClick='self.open("clientfe.html","ClientPencere")' /></td></tr> <tr><td>Ayni dosya ayni pencerede</td> <td><input type="button" value="OK" onClick='self.open("pencere1.html","AyniPencere")' /></td></tr> <tr><td>Bos pencere ac</td> <td><input type="button" value="OK" onClick="yeniPencere()" /></td></tr> <tr><td><input type="button" value="BosPencereKapat" onClick="boskapatPencere()" /></td> <td><input type="button" value="AnaPencereKapat" onClick="window.close()" /></td></tr> </form> </table> </body> </html> pencere1.html
126
Musa AVU
ekil84 Koda baktmzda pencereleri oluturmak iin open() metodunu grrsnz. widnows nesnesinin en nemli metotlarndan biri open metodudur. Metodun ilk parametresine amak istediiniz dosyann adn veriyorsunuz. kinci parametresine ise alacak pencereye bir isim veriyorsunuz. kinci parametresi ayn olan bir open() metodu daha kullandmzda alacak dosya daha nce o isim ad altnda alm bir pencerede alacaktr. open() metodunu window nesnesinden sonra da kullanabilirsiniz, self nesnesini kullanarakta olabilir ya da ne window nesnesi kullanrsnz ne de self nesnesini kullanrsnz. Hepsi sonuta ayn kapya bakyor. boskapatPencere() fonksiyonu arldnda, mPencere deikeni ak m kapal m onu closed boolean deikeniyle kontrol ediyoruz. closed deikeninin deeri false ise pencere kapal demektir, eer kapalysa close() metoduyla bu pencerenin kapatlmasn kodladm. mPencere deikenine daha init() fonksiyonunda veya yeniPencere() fonksiyonunda open() metoduyla bir window nesnesi atamtk. Bu sayede mPencere nesnesinin bir close() metodu olabiliyor. <body> tagnda onLoad parametresini kullanarak sayfamz yklenecei zaman init() fonksiyonunu artarak bir pencere atrdm ve onu yeillik olsun diye close() metoduyla kapattrdm. open() metoduna bir nc parametre daha verebiliyoruz.
Musa AVU
127
<html> <script language="JavaScript"> function f1() { open("metin.txt", "f1", "width=600, height=250, resizable=yes," + " directories=yes, menubar=yes, location=yes"); } function f2() { open("ucak.jpg", "f2", "width=600, height=250, resizable=no, " + " directories=no, menubar=no, location=no"); } </script> <body> <a href="javascript:f1()">Metin</a> <br /> <a href="javascript:f2()">Resim</a> </body> </html> pencere2.html
ekil85 open() metodunun nc parametresi bir pencerenin grnmyle ilgilidir. nc parametredeki width deikeni pencerenin geniliini, height pencerenin yksekliini, resizable pencereyi bytebilir kltebilir miyiz, directories dmeler var m, menubar menubar var m, location internet adresi girebileceimiz ubuk var m, bunlar ifade etmektedir. Bu HTML kodunda farkl olarak iki link kullandm ve <a> taglarnn href parametresine javascript:f1 ve javascript:f2 deerlerini yazdm. JavaScriptte
128
Musa AVU
yazdmz her hangi bir fonksiyonu href parametresinden arabilmek istiyorsak javascript yazyoruz ve iki nokta st ste koyduktan sonra ulaamak istediimiz fonksiyonun adn yazmamz yeterli olmu oluyor. Kullanm bulunduum nc parametredeki deikenler taraycya gre farkl sonular verebilmektedir. Bu yzden bu deikenler kullanldnda farkl tarayclarla dikkatlice denenmesinde fayda gryorum. Kullanabileceiniz baka deikenleri http://www.w3schools.com adresinde referans halinde bulabilirsiniz. windows nesnesi tarayclar arasnda farkllklar zmek iin metodlar sunmaktadr. Mesela moveBy() ve moveTo() metodlar gibi. moveBy() metodu pencereyi verilen koordinatlara doru hareket ettirirken moveTo() metodu mutlak deer baz alarak bir hareketlendirme gerekletirir. <html> <body> <form name="meinFormular"> <input type="button" value="moveBy" onClick='moveBy(120, 50)' /> <input type="button" value="moveTo" onClick='moveTo(200, 200)' /> <input type="button" value="resizeBy" onClick='resizeBy(200, 200)' /> <input type="button" value="resizeTo" onClick='resizeTo(100, 200)' /> <input type="button" value="Gule gule" onClick='setTimeout("self.close()", "1000")' /> </form> </body> </html> pencere3.html
Musa AVU
129
ekil86 resizeTo() ve resizeBy() metodlarda isimlerinden anlalaca gibi pencerenin boyutunu deitiriyor. Birinci parametre x koordinatn verirken ikinci parametre y koordinatn vermektedir. location ve history location nesnesinin href deikenine verdiimiz yeni adres sayesinde JavaScript sayfamz farkl bir sayfaya iletebilir. <html> <body> <a href="javascript:window.location.href='http://www.musacavus.com'">Tikla</a> </body> </html> location.html
130
Musa AVU
ekil86 history nesnesinin benim grdm en ok kullanlan bir metodu var o da back(). Bu metotla bir nceki sayfaya gidilebilinmektedir ve gzel taraf hangi sayfadan gelindiini bilinmeden yaplmasdr. <html> <body> <a href="javascript:history.back()">geri</a> </body> </html> history.html
5.5 Cookie Cookie sayesinde, metin dosyalarn taraycdan bilgisayara kayt edebilirsiniz. Sorunsuz grnen bu yntem gerekte kullanc profillerini oluturmak iin kullanlr. Diyelim siz bir online shop sayfasndasnz ve gezdiiniz sayfalar online shop sahibi bilmek istiyordur. Buna gre sizin bilgisayarnzda size ait bilgiler saklanmaktadr ve siz o sayfay tekrar ziyaret ettiinizde sayfaya girite size zg reklamlar gzkmektedir. Ya da yine bir online sayfasnda olunu, siz bir ka rn setiniz, fakat daha deme yapmadnz ve taraycnz birden kapand. Tekrar online sayfasna girdiinizde bir bakyorsunuz ki tarycnz sizin setiniz tm rnleri kayt etmi. Bunu Cookie teknoloji kullanarak yapabiliyorsunuz. Yine baka bir rnek verecek olursam, siz bir online shop sayfasna giriyorsunuz ve sayfayaya kullanc adnz ve ifrenizle giri yapyorsunuz. Sayfadan kyorsunuz ve iki gn sonra geldiinizde ayn sayfaya giriyorsunuz. Bir de ne gryorsunuz, ana sayfada adnz yazyor ve nnde
Musa AVU
131
hogeldiniz kelimesini buluyorsunuz. Cookielerin ynetimi tarayclar stlenmitir ve eitili tarayclar Cookieleri eitli yerlere kayt etmektedirler. rnein IE, belli bir dizinde her Cookie iin bir metin dosyas kayt eder. Firefoxta Cookielere farkl ulaabiliyoruz. Aralar-> Seenekler-> Gizlilik>erezleri gster dmesini tklyorsunuz.
ekil87 erez burada Cookie oluyor. Tarayclarn Cookieleri ynetim biimi sizi korkutmasn, nk JavaScriptte genelde Cookielerle ilemleri ayn yntemle programlamaktadr. Cookielerin en az bir ismi ve bir deeri vardr. Cookienin ismi zerinden deerini okutabilirsiniz ve gereken programlama ilemlerini yapabilirsiniz. Cookielerle ilem grrken ok nemli bir bilgi, o Cookienin ne kadar geerli olduunun tanmlanmasdr. Bunun iin expires diye bir deiken vardr ve geerlilik tarihi zel bir formatta kayt edilmesi gerekmektedir.
<html> <script language="JavaScript">
132
Musa AVU
function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie ( name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape (value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape( document.cookie.substring(offset, endstr)); }
Musa AVU
133
function cookieYaz() { gecerliTarih = new Date(2010, 6, 12, 1, 0, 0); document.cookie = SetCookie( "user", document.mF.id.value, gecerliTarih); document.cookie = SetCookie( "pw", document.mF.pw.value, gecerliTarih); } function cookieOku() { deger = GetCookie("user"); if(deger != null) document.mF.id.value=deger; deger = GetCookie("pw"); if(deger != null) document.mF.pw.value=deger; } </script> <body onLoad="cookieOku()"> <form name="mF" onSubmit="cookieYaz()"> <table> <tr> <td>Kullanici Adi</td> <td><input name="id"></td> </tr> <tr> <td>Sifre</td> <td><input name="pw" type="password"></td> </tr> <tr> <td><input type="Submit" value="Ok"></td> <td><input type="reset" value="Iptal"></td> </tr> </table> </form> </body> </html> cookie.html
134
Musa AVU
ekil88 Ok dmesine basmadan nce Seenekler-> Aralar-> Seenekler-> Gizlilik>erezleri gster dmesini tklayn ve Tm erezleri sil dmesini tklayn. Daha sonra cookie.html dosyasn taraycnzda an ve Kullanc Adi ile Sifre bilgilerini girerek Ok dmesine basn. Seenekler-> Aralar-> Seenekler-> Gizlilik->erezleri gster dmesini tklayn ve kendi Cookienizin orada olduunu grebilirsiniz. Cookieleri JavaScript ile normal yoldan silemiyorsunuz, ancak ayn Cookie ismini kullanarak eski bir geerlilik tarihi verirseniz Cookieler JavaScript ierisinden silinmi olur. document nesnesinin bir cookie nesnesi vardr ve Cookielerle yapmak istediimiz tm ilemleri bu nesne ile yapyoruz. Bilgiler String olarak saklanmaktadr ve bunun iin String nesnesinin tm metodlarn kullanabiliriz. length deikenini biliyorsunuz String nesnesindeki metinin uzunluunu veriyor. substring() metodunun ilk parametresi String nesnesindeki metindeki belirli bir ksmn iletiyor. substring() metodunun birinci parametresi belirli bir ksmn balangc olup ikinci parametresi o belirli bir ksmn sonudur. Diyelim ki sizin String nesnesinin iindeki metin Helal kardes olsun. Siz substr(1,4) yazdnzda bu deer elal olacaktr, nk JavaScript bu durumda sfrdan saymaya balar. indexOf() metodu, ilk parametredeki verilen deeri ikinci parametredeki deerden balamak artyla arar ve bulursa hangi pozisyonda bulunduunu iletir. GetCookie(), SetCookie() ve getCookieVal() fonksiyonlarn ben programlamadm, nk tekeri tekrar icat etmeye gerek yoktur. Bu kodu internetten ektim. Bir ara birisi bunu yapm ve tm JavaScript Cookie ilemlerinde bu kodlama kullanlyor. Tabi siz diyorsanz, yok abi ben hereyi
Musa AVU
135
kendim yapacam, o sizin bileceiniz i. Benim fazladan programladm iki fonksiyon var, onlarda cookieYaz() ve cookieOku() fonksiyolardr.inde SetCookie() ve GetCookie() fonksiyonlarn kullanmaktan baka bir ey yapmadm. SetCookie() fonksiyonunu kullanarak cookie nesnesine aktarmak istediimi bilgiyi aktaryorum ve GetCookie() fonksiyonunu kullanarakta cookie nesnesinden kullanmak istediim bilgiyi okuyorum o kadar.
5.6 Nesne oluturma Daha ncede belirttiim gibi JavaScript nesnelere dayal bir programlama dili deildir. Yalnz bir yntemle JavaScriptte snflar yazabiliriz. Bu snflardan baz kstlamalarda olsa nesneler oluturabiliriz. nce bir kurucu metot yazyoruz ve kurucu metot ile ile oluturduumuzu new anahtar kelimesiyle bir nesne haline dntryoruz. <html> <body> <script language="Javascript"> function konus(cumle) { document.write(cumle + "<br />"); } // Kurucu metot function Insan(yas, ad) { this.yas = yas; this.ad = ad; this.konus = konus; } //Nesne olusumu aile = new Array(); aile["baba"] = new Insan(40,"Hasan"); aile["anne"] = new Insan(34,"Seyhan"); aile["ogul1"] = new Insan(4,"Tuncay"); aile["ogul2"] = new Insan(3,"Fikret"); document.write(aile["anne"].ad + ": "); aile["anne"].konus("Yemek hazir"); document.write(aile["baba"].ad + ": "); aile["baba"].konus("Oglen yemegi mi?");
136
Musa AVU
document.write(aile["ogul1"].ad + ": "); aile["ogul1"].konus("Ben Cola icerbilir miyim?"); document.write(aile["baba"].ad + ": "); aile["baba"].konus("Sen kac yasindasin?"); document.write(aile["baba1"].ad + ": "); </script> </body> </html> nesneolusumu1.html
ekil89 Kurucu metotlar, birok programlama dilinde byk harfle balad iin bende byk harfle baladm, fakat JavaScriptte istediinizi yapmakla zgrsnz. Kurucu metotlar normal fonksiyonlardan ayrmakta this anahtar kelimesinin rol byktr. this, oluturacamz nesnenin gstergesidir. Kurucu metodunda kullanlan this anahtar kelimesinden sonraki deikenler oluturulacak nesnenin zellikleridir. rneimizdeki Insan kurucu metodun yas, ad ve konus gibi zellikleri vardr. lgin olan konus fonksiyonunu normal bir deikenmi gibi atama yapabilmemizdir. konus() fonksiyonu parametresiz atand iin konus deikeni konus() fonksiyonunun bir gstergesi olarak atanmaktadr. Kurucu metot ile Insan adnda bir snfn yas deikeni, ad deikeni ve konus metodunu oluturmu oldum. rnee devam bakarsak, Array snfndan bir aile nesnesi oluturdum. aile deikeninden sonraki kullandm keli parantezlere farkl olarakString deerleri atadm. Array snf bize bu frsat sunmaktadr. Daha sonra her bir aile ferdine new anahtar kelimesiyle bir Insan nesnesini oluturdum ve atadm.
Musa AVU
137
konus() metodu arldnda ekrana aile ferdi iin kullandm cmle gelmektedir. JavaScriptte kaltm yoktur ama protyping vardr. Daha nce oluturulmu bir nesneye biz metodlar ya da deikenler ekleyebiliyoruz. <html> <body> <script language="Javascript"> function konus(cumle) { document.write(cumle + "<br />"); } // Kurucu metot function Insan(yas, ad) { this.yas = yas; this.ad = ad; this.konus = konus; } //Nesne olusumu familie = new Array(); familie["baba"] = new Insan(40,"Hasan"); familie["anne"] = new Insan(34,"Seyhan"); familie["ogul1"] = new Insan(4,"Tuncay"); familie["ogul2"] = new Insan(3,"Fikret"); document.write(familie["anne"].ad + ": "); familie["anne"].konus("Yemek hazir"); document.write(familie["baba"].ad + ": "); familie["baba"].konus("Oglen yemegi mi?"); document.write(familie["ogul1"].ad + ": "); familie["ogul1"].konus("Ben Cola icerbilir miyim?"); document.write(familie["baba"].ad + ": "); familie["baba"].konus("Sen kac yasindasin?"); document.write(familie["ogul1"].ad + ": "); Insan.prototype.adres="Istanbul"; familie["ogul1"].konus("Benim dogum yerim "+familie["ogul1"].adres); </script> </body> </html>
138
Musa AVU
nesneoluumu2.html
ekil90 Bir nceki rnekle bu rnein tek fark Insan kurucu metodundan sonra prototype adl bir tanmlamann kullanlmasdr. prototype tanmlamasndan sonra yaptmz tanmlama Insan nesnelerine eklenmektedir. Bu ilemi JavaScriptin standart snflarnda uygulayabilirsiniz.
Musa AVU
139
Blm 6 stisnalar ve Event kullanm
140
Musa AVU
6.1 stisna kullanm JavaScriptte oluan hatalar istisnalar kullanarak program kodunun kmesini engelleyebilirsiniz. Adamlar bizim iin her eyi dnmler, bize den sadece renmek kalyor.
try ve catch Hatalar sadece geriye dnen deerlere gre hata vermezler, ayrca kodu kontrol ederler ve oluan hatalar sonucu program farkl bir program bloguna ynlendirilir. Diyelim ki, programnzda bir matematiksel ilem gerekletirmekteyiz: <html> <script language="Javascript"> try { document.write(eval("15 * 5") + "<br />"); document.write(eval("a * b") + "<br />"); document.write( "try blogun icerisinde") } catch(EvalError) { alert(EvalError.toString()); } document.write("hata olusmasina ragmen yazi cikiyor"); </script> </html> istisna1.html
ekil91
Musa AVU
141
ekil92 try, Trke dene demek. catch kelimesi de, yakala anlamn tamaktadr. try blou ierisinde olan kod nce bir deneniyor, eer her hangi bir noktada hata oluuyorsa o noktadan sonra catch blouna geiliyor ve catch bloundaki satrlar ilem gryor. eval fonksiyonu arpma ilemini gerekletirmektedir. 15 * 5 ileminde bir sorun kmamaktadr fakat a * b denilince JavaScript hata vermektedir ve catch blouna geilmektedir. catch bloundaki satrlar ilendikten sonra o bloktan klmaktadr ve program devam etmektedir. trycatch blou olmasayd program hata verilen yerde duracakt. catch blouna bakarsanz EvalError yazyor. Buna gre try blou ierisinde EvalError hatasn oluturan tm ilemler bu catch blouna dmektedir.EvalError yerine sadece Error yazsazdk, tm hatalarda bu bloktaki ilemler gerekleecekti.
6.2 Event kullanm JavaScriptte kendi Eventimizi programlayabiliriz. imdiye kadar grdmz Eventler HTMLa aitti. imdi JavaScript ortamnda Eventleri nasl kullanabileceimizi gstereceim. <html> <script language="JavaScript"> function mesaj() { alert("Dugmeye tiklandi"); } </script> <body> <form name="f1"> <input type="button" name="b1" value="OK" />
142
Musa AVU
</form> <script language="JavaScript"> document.f1.b1.onclick = mesaj ; </script> </body </html> event1.html
ekil93
ekil94 OK dmesine baslnca alert() fonksiyonu ekranda bir grnt getirmektedir. Bu bildiimiz bir grnt fakat bizim iin nemli nokta kod blm. document.f1.b1 ksmyla dmemize ulayoruz ve noktadan sonra onclick geliyor. Bu JavaScriptin bir eventhandleri. onclick olaynada mesaj() fonksiyonunu atyoruz. Atamada parantezleri kullanmyoruz yoksa fonksiyonu o noktada arm olurduk. JavaScriptteki eventhandlerler HTMLdeki gibi ayn ismi tarlar, tek art ise hepsini ufak yazma zorunluunun olmasdr.
Musa AVU
143
<html> <script language="JavaScript"> window.onkeypress = dugme; function dugme(ev) { document.getElementById("cevap").innerHTML = ev.which; } </script> <body> <h1>Bir dugmeye basin</h1> <span id="cevap"></span> </body> </html> event2.html
ekil95 event2.htmldeki Eventhandler, window nesnesindeki onkezpress Eventhandlerdir. windows nesnesininher hangi bir yerinde bir tua baslnca dugme fonksiyonu arlyor ve dugme fonksiyonu cevap idsine sahip tag ararak ieriini ev.whichte yazan deere gre deitiriyor. ev parametresi onkeypress Eventhandlerin gnderdii bir nesnedir. ev nesnesinin which adl bir deikeni vardr ve burada baslan dmenin kodu yer almaktadr. Ben rneklerimde Firefox kullandm iin rnekleri de Firefoxa gre anlatyorum. Bu sistem IEde almayacaktr, nk IE JavaScriptte Eventhandler kullanmn farkl beklemektedir.
144
Musa AVU
6.3 Event nesnesinin deerlendirme Kullanacamz deikenler sayesinde bu bilgilere Event nesnesinin deerlerine ulaabiliriz. <html> <style> *{ background-color : green; color : yellow; } #cevap { position:absolute; left:0px; top:0px; background-color:red; color:yellow; } </style> <script language="JavaScript"> function pozisyon(ev) { var text =""; text += "Pencereye koordinatlar (pageX, pageY): " + ev.pageX + ", " + ev.pageY + ".<br />"; text += "Ekrana gore koordinatlar (screenX, screenY): " + ev.screenX + ", " + ev.screenY + ".<br />"; text += "Klavye ve fare kodu (which): " + ev.which+ ".<br />"; text += "Olay tipi (type): " + ev.type + ".<br />"; document.getElementById("cevap").style.width=450; document.getElementById("cevap").style.left = ev.pageX; document.getElementById("cevap").style.top = ev.pageY; document.getElementById("cevap").innerHTML = text ; } document.onmouseup = pozisyon; </script> <body> <h1>Lutfen tiklayin</h1>
Musa AVU
145
<div id="cevap"></div> </body> </html> degerlendirme.html
ekil96 Fare imlecinin pozisyonunda fare ile oluturduum olay hakknda bilgi gsteriliyor. pageX ve pageY alan pencereye gre gerekletirilen olayn koordinatlarn veriyor. screenX ve screenY ekrann koordinatlarna gre gerekletirilen olayn koordinatlarn veriyor. which deikenini daha nce grmtk bu sefer Eventhandler fare ile ilgili olduu iin farede baslan tuun koordinatn vermektedir. type ise ne tr bir olay olduunu iletmektedir. style.width ve style.left gibi kodlamalar grnce diyeceksiniz ki bu da nedir? document.getElementById(cevap) ksmna kadar her eyi anlam olmalyz. Anlamadysanz kitab tekrar okumakta ve rnekleri tekrar incelemekte fayda gryorum. document.getElementById(cevap) arsndan sonra style yazarak bu ar ile elde ettiim tagn stylen deitirmek istediimi ifade etmi oluyorum. styleden sonra width yazarak kullanlan stylen geniliini deitirebiliyorum. left ve top top deikenleri stylesheetin (x,y)
146
Musa AVU
koordinatlarn belirtmemi salyor. style nesnesiyle taglarn css zellikleriin ok kolaylkla deitirebilirsiniz. Bylelikle JavaScript blm bitmi oldu. nanyorum ki artk iyi bir JavaScript programcs oldunuz. JavaScriptin her eyini belki bilmiyorsunuzdur fakat piyasada kullanlan yntemlerin ouna hkim durumundasnz. Bu blmden sonra AJAX konusuna deineceim
Musa AVU
147
Blm 7 AJAX
148
Musa AVU
7.1. AJAX (Asynchornous JavaScrpt and XML) AJAX teknolojisiyle ilk karlatmda dedim ki, birileri XML, JavaScript, HTML, CSS, DHTML gibi teknolojilere bakmtr ve bunlarn hepsine yeni bir isim olan AJAX ismini vermitir, nk AJAX bu teknolojilerden olumaktadr. AJAXn temelinde JavaScript yatmaktadr. Bu blme geldiyseniz JavaScripti sular seller gibi biliyorsunuz demektir. lk AJAX uygulamamz hemen vermek istiyorum. Ayrntlar imdilik anlamanza gerek yok, u an nemli olan bir ka admla AJAX uygulamasnn gerekletiini grmektir. leriki derslerde AJAX teknolojisini inceledike eksik blmler daha iyi oturacaktr. Birinci admda web sayfasna ihtiya duyarz. Bunun iin ufak denemelerimiz iin Notepad yeterli olacaktr. Ben Notepad++ kullanyorum, hem bele hemde ok kullanl bir kod yazma platformu. <html> <script language="Javascript" src="sehirler.js"></script> <body> <br> <form name="f"> <select name="sehir" size="1" onclick="yolla()"> <option>Adana</option> <option>Balikesir</option> <option>Bursa</option> <option>Edirne</option> <option>Giresun</option> <option>Hatay</option> <option>Kayseri</option> <option>Konya</option> <option>Manisa</option> <option>Nigde</option> <option>Ordu</option> <option>Rize</option> <option>Sivas</option> <option>Urfa</option> <option>Yozgat</option> <option>Zonguldak</option>
Musa AVU
149
</select> </form> <br> <div id="sc"></div> </body> </html> sehirler.html
ekil97
Oluturduum sayfada seme kutusu kullandm. Bunu <select> tag ile tanmlayabiliyorsunuz. EventHandler olarak onclick tanmlamas yaptm ve her tklandnda yolla() fonksiyonu arlacaktr. Seme kutusunu bilgilerle doldurabilmek iin HTMLde <option> tag kullanlr. imdi bir ekilde HTML sayfamzda bir tklamayla Servera mesaj iletmemiz gerekiyor ve alnan mesaja gre HTML kodunun sc idli <div> tagnda mesaj yazdrmamz gerekiyor. function yolla() { alert("merhaba");
150
Musa AVU
} sehirler.js
ekil98 yolla fonksiyonunu basit tuttum, siz seme kutusunda her hangi bir ey seerseniz ekrana merhaba mesaj gelecektir. AJAX teknolojisini uygulamak iin sehirler.js rneimizi biraz daha gelitirmemiz gerekmektedir: var resNesne; if(navigator.appName.search("Microsoft") > -1){ resNesne= new ActiveXObject("MSXML2.XMLHTTP"); } else { resNesne = new XMLHttpRequest(); } function yolla() { alert("merhaba"); } sehirler.html resNesne deikenini tanmladktan sonraki satrda ne tr bir taraycmn kullanldn kontrol ediyorum. navigator.appName.search() fonksiyonuyla tarayc uygulamasnn adnda Microsoft yazn aratyorum, eer varsa ActiveXObject snfyla bir nesne oluturulmas gerekmektedir, deilse XMLHttpRequest snfyla bir nesne oluturulur. IEnin yeni srm de ikinci metodu kullanmaktadr. Senaryomuza gre, AJAX nesnesini oluturduktan sonra tklanan ehri fonksiyonumuzda elde etmemiz gerekiyor ve bunu Serverda alan programa yollamamz gerekmektedir.
Musa AVU
151
var resNesne; if(navigator.appName.search("Microsoft") > -1){ resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } else { resNesne = new XMLHttpRequest(); } function yolla() { alert("merhaba"); for(i = 1; i <= 16; i++) { if(this.document.f.sehir.options[i - 1].selected) { resNesne.open('get', 'sehir.php?nerede=' + i,true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); break; } } } function handleResponse(){ if(resNesne.readyState == 4) { document.getElementById("sc").innerHTML = resNesne.responseText; } } sehirler.html for dngsyle f sehir seme kutusunun iindeki tm seenekler kontrol ediliyor ve birisi seili konumdaysa resNesne bir open metoduyla web serverdaki bir linki aryor ve web server ile iletiime gemi oluyor. Birinci parametredeki get, iletiimin get HTTP metoduyla olacan gsteriyor. kinci parametredeki sehir.php, web serverdaki bir PHP program parasna iaret ediyor. ? iaretinden sonra gelen nerede kelimesi PHP programnn iine gndereceimiz deeri ayrt edebilmemiz iindir. nerede kelimesinden sonra eitlik operatryle deer atanr. nc parametre olan true iletiimin asenkron olduuna iarettir. Bir baka adm ise, baka bir Eventhandlerin oluturulmasdr. onreadystatechange deikenine handleResponse fonksiyonunu atyoruz. Server cevap verince handleResponse() fonksiyonu arlm oluyor.
152
Musa AVU
onreadystatechange deikeni AJAX iin eklenmitir ve sadece JavaScriptte vardr. Buna benzer bir atamay daha ncek ikonularda yapmtk. Son admda nesneyi send() fonksiyonuyla yolluyoruz. Parametredeki null ifadesi, yollamann get metoduyla olmasndan kaynaklanmaktadr. Web serverden gelen cevab resNesne.responseText deikeniyle elde ederiz. Web server ve Client srekli iletiimde bulunduklar iin Client taraf Web serverdan srekli cevap alabilir ve handleResponse() fonksiyonunu gereksiz yere ileme sokabilir. Bunun olmamas iin readState deikenini 4 deeriyle kontrol ettirdim. 4 deer yollanan cevabn istenilen yere ulatn ve geri geldiinin ifadesidir. AJAX teknolojisini kullanabilmek iin yapmanz gereken bu admlar izlemektir. PHP rneini ok ksa ve anlalr tutmaya altm, kitabn konusu PHP olmad iin PHP anlatmayacam. PHP rneklerini, AJAX rneklerini anlamanz iin vermekteyim. Neden PHP anlatlmad da, CSS, HTML, XHTML gibi teknolojilere deinildi diyebilirsiniz. Bunun nedeni bu teknolojileri PHP gibi Server tarafnda alan teknolojiler olmamas ve AJAXn birer paralar olmasnda yatyor. AJAXn en byk avantajlarndan birisi, Server tarafnda hangi program alrsa alsn, AJAX iin Serverdan alaca bilgi nemlidir. <? echo "Bilgilendirme:"; switch($_REQUEST['nerede']) { case 1: echo "Bir sehir"; break; case 2: echo "Bir sehir"; break; case 3: echo "Sehir degil"; break; case 4: echo "Bir sehir"; break; case 5: echo "Bir sehir"; break; case 6: echo "Sehir degil"; break; case 7: echo "Bir sehir"; break; case 8: echo "Bir sehir"; break; case 9: echo "Sehir degil"; break; case 10: echo "Bir sehir"; break; case 11: echo "Bir sehir"; break; case 12: echo "Bir sehir"; break; case 13: echo "Bir sehir"; break; case 14: echo "Sehir degil"; break; case 15: echo "Bir sehir"; break;
Musa AVU
153
case 16: echo "Bir sehir"; break; } ?> sehir.php PHP programlama dilini derinden incelemeyeceimi demitim fakat ne yaptm size de anlatmak istiyorum. PHP ile Java Scriptin birok yaps ayndr, o yzden anlamakta zorluk ekmeyeceinize inanyorum. <? ve ?> iaretleriyle PHP blm tanmlam oluyorsunuz. echo komutuyla Web Servern Cliente verecei cevab belirtmi oluyoruz. PHP, $_REQUEST dizisinde AJAX tarafndan yollanan parametreleri bir dizi halinde tuttuu iin bu dizinin nerede olan dizisini sorguladm. Buna gre de switch blou elde edilen deere gre seenekteki cevab Cliente yollamaktadr. dosyamz bitirdiimize gre sehir.html dosyasn tklaynca kurduumuz senaryo almas gerekiyor fakat almadn greceksiniz, neden? Biz, programlamay bitirdik fakat AJAX iin bir Web Server kurmadk. AJAX ile yazdmz Client taraf PHP ile yazdmz Server tarafna bir Web Server ile balantya geecek ve bunu yapabilmek iin bir Web Servera ihtiya duymaktayz. PHP hakknda sizin bilmenizi istediim bir ey daha var. O da <? yazarken baz Serverlarn <? yerine <?php kabul etmesidir. Az sonra anlatacam XAMPP ben Windows XP altnda altrrken PHP dosyalarm kodladmda <? balayarak yazyordum ve alyordu. Windows 7 altnda denediimde almad. Aratrmalarm sonucu <?php yaznca alt. Sizde byle bir problemle karlatnzda benim gibi saatlerce aramayn ve bu zm uygulayn. Bunun farkl bir zm var fakat kitap PHP kitab deil. Yazdmz PHP kodunun alabilmesi iin bir Servera ve Server tarafnda bu kodu anlayacak bir uygulamaya ihtiyacmz var. imdi diyeceksisiniz hoca iyi hota ben ne anlarm Server, PHP anlamas bilmem neden. Ben anlatacam korkmayn. Bir sonraki XAMPP blmn okuyun, orada size kiisel bilgisayarnzda hem Server hem PHP anlayan ok hzl bir mekanizmay gstereceim. XAMPP http://www.apachefriends.org/en/xampp.html adresinden XAMPP programn indirin. Bu program paketi kiisel bilgisayarnzda hazr alabilir bir web server kurulmasn salyor. Ben bu sayfadan XAMPP programn indirdiimde
154
Musa AVU
dosya ad xampp-win32-upgrade-1.7.2-1.7.3 eklindeydi. Kurulumdan sonra web servernzda gvenlik a olduunu bilmelisiniz, nk XAMPP projesinde gvenlikten ziyade ilenebilirlik ve rahat eriim n plandadr. ndirdiim dosyaya ift tkladm:
ekil99 Destination folder olarak C:\xampp yazdm. XAMPP bu dizini sememi tavsiye etti bende bundan dolay bu dizini setim. Install dmesine bastm:
Musa AVU
155
ekil100 Kurulan dizinde xampp-control.exe dosyasn altrn.
156
Musa AVU
ekil101 Control Panelde bizi ilgilendiren Apache web serveri ve MySql veritaban. Web server olan Apacheyi altrmak iin Start dmesine basmamz yeterlidir:
Musa AVU
157
ekil102 Taraycyla web server ayn makinede alyorsa, taraycnzn adres ksmna http://localhost yazn.
158
Musa AVU
ekil103 Eer buna benzer bir sayfa ile karlatysanz XAMPP kurulumu baaryla salanmtr. sehirler.html, sehirler.js ve sehir php dosyalarn XAMPP dizininde bulunan htdocs dizininde ajax/sehirler dizini oluturarak buraya kopyalyorum. Frefoxun adres satrn http://localhost/ajax/sehirler/sehirler.html yazn. kan sayfada ben Merdiven seeneini setim:
ekil104
Musa AVU
159
ekil105 Seenekleri tklarken merhaba diye bir mesaj penceresi ald ve mesaj penceresini kapattktan sonra tarayc seeneim hakknda bana bilgi verdi. Baka bir seenek setiinizde, taraycnz o seenekle ilgili bilgileri Servera yollayacaktr. Serverda hazrlanan PHP program gelen bilgiye gre taraycya cevap verecektir. Burada nemli olan gelen cevab tarayc yeni bir pencerede ya da sayfada gstermemesidir. Gelen cevab tarayc AJAX teknolojisi sayesinde ayn sayfada gstermektedir. Bana gre AJAX teknolojisinin en byk avantaj ayn sayfadaki Server sorgulamalarna cevap alabilmesidir. Server tarafnda Web Server olmadan da AJAX altrabiliriz nasl m? <html> <head> <title>Resim bilgileri</title> <script language="JavaScript" src="resim.js"></script> </head> <body> <img src="elma.jpg" width="300" onmouseover="sndReq(1)" onmouseout="bos()"> <br> <img src="armut.jpg" alt="" onmouseover="sndReq(2)" onmouseout="bos()" /> <div id="bilgi"></div>
160
Musa AVU
</body> </html> resim.html
var resNesne; if(navigator.appName.search("Microsoft") > -1){ resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } else { resNesne = new XMLHttpRequest(); } function sndReq(transfer) { if (transfer == "1") { resNesne.open('get', 'bilgi1.txt', true); } else { resNesne.open('get', 'bilgi2.txt', true); } resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse(){ if(resNesne.readyState == 4) { document.getElementById("bilgi").innerHTML = resNesne.responseText; } } function bos(){ document.getElementById("bos").innerHTML = ""; } resim.js
elma bilgi1.txt armut
Musa AVU
161
bilgi2.txt
ekil106 resim.html dosyasna tkladmda tarayc bana iki resim gsteriyor ve ben fare ile elma resminin zerine gelince aada elma yazyor. Armut yazan resime geldiimde armut yazyor. Herhangi bir dizinden resim.htmlyi altrabilirsiniz, PHP gibi bir dil kullanmadm iin AJAX verdiim metin dosyasnda yazan cevap olarak alglyor.
Web Formlar AJAX ile Web Serverine iletilen bilgilerin geri alnmas, Web Formlarndan bilgilerin iletilmesi ve geri alnmasna ok benziyor. Bu blmde AJAX ile Web Formlaryla nasl kombine edildiini gstereceim. Formlara daha nce deinmitim ve gerekli konularda aklamalarda getirdim. imdiye kadar bir Form kullanrken bilgileri Servere nasl yollarz buna deinmedim. Hazrlanan Formdaki bilgilerin hangi Servere gideceini <form> tagndaki action parametresinde belirtiyoruz. Form bilgileri buraya vereceimiz adrese gnderilecektir. method parametreside bilgilerin hangi yntemle gnderileceine iarettir. get deerini koyarsak Form sayfasnda belli byklkteki bilgileri yollayabiliriz ve yollanan bilgiler genelde adres ksmnda
162
Musa AVU
gzkr. post deeri ise yle deildir, daha byk kapasiteli bilgiler yollayabilirsiniz ve yollanan bilgiler ak olarak gsterilmez. Form bilgilerin yollanmas iin <input> tagnn type parametresinde submit yazmas gerekiyor. Bunu kodladnzda taraycnzda bir dme belirecektir. Dmenin grevi, basldnda Formdaki bilgileri <form> tagndaki action parametresinde belirtilen adrese yollamas olacaktr. <html> <head> <title>login</title> </head> <body> <form action="login.php" method="get"> <input type="text" name="kullaniciadi"> <br /> <input type="password" name="sifre"><br /> <p><input type="submit" value="Tamam" /></p> </form> </body> </html> login.html <? if(("ahmet" == $_GET['kullaniciadi']) && ("mahmut" == $_GET['sifre'])) { echo "<h3>Sifreyi bildin aferin</h3>"; } else { echo "<h3>Giris bilgilerinizde bir yanlislik var.</h3>"; } ?> login.php
Musa AVU
163
ekil107
login.php ve login.html dosyalarn bilgisayarmdaki XAMPPdaki htdocs/ajax dizininin altna kopyaladm ve taraycmdan http://localhost/ajax/login.html diye bir arda bulundum. login.html dosyasnda, iki <input> tagm var, kullanc ad ve ifreyi yazyorum daha sonra Tamam dmesine basarak bilgileri yolluyorum. login.php dosyas yine bir PHP kodudur. Olduka basit tutmaya altm, nk kitabn amac PHPyi anlatmak deil sadece PHPden yararlanmak. PHPde $_GET dizisinde Client tarafndan yollanan parametrelerin bir listesi bulunmaktadr. Client tarafndan yollanan kullaniciadi parametresini keli parantezde trnak aarak kullanaciadi yazarak elde ediyoruz. JavaScriptteki if kyaslamas gibi PHPde bir kyaslama yapabiliyorsunuz. Bende kullaniciadi parametresini ahmet deeri ile kyasladm. Yani dedim ki Client tarafndan kullaniciadi ahmet ise o zaman kyaslama sonucunu true kabul et. Ayn ekilde sifre parametresi iinde yaparak mahmut deeriyle kyasladm. Eer kyaslamada iki parametrede true deerini veriyorsa o zaman PHP echo fonksiyonuyla Cliente Sifreyi bildin aferin yazsn <h3> tagyla yollamaktadr. kullaniciadi ya da sifre parametresinden birisi uymuyorsa Client tarafna Giris bilgilerinizde bir yanllk var diye bir mesaj yollanacaktr. Taraycnzda ikinci sayfada ona gre bir yaz gsterecektir. imdi bu ilemi AJAX kullanarak yapalm. login.php dosyasn hi deitirmiyorum onu aynen brakyorum. <html> <head>
164
Musa AVU
<title>login</title> <script language="JavaScript" src="login.js"></script> </head> <body> <form name="f"> <input type="text" name="kullaniciadi"> <br /> <input type="password" name="sifre"><br /> <p><input type="button" value="Tamam" onclick="yolla()"/></p> </form> <div id="sc"></div> </body> </html> login.html
var resNesne; if(navigator.appName.search("Microsoft") > -1){ resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } else { resNesne = new XMLHttpRequest(); } function yolla() { resNesne.open('get', 'login.php?kullaniciadi=' + document.f.kullaniciadi.value+ '&sifre='+document.f.sifre.value,true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse(){ if(resNesne.readyState == 4) { document.getElementById("sc").innerHTML = resNesne.responseText; } } login.js
Musa AVU
165
ekil108
login.htmldeki <form> tagndaki action ve method parametrelerini kaldrdm, nk bunlar AJAX teknolojisini kullanarak gerekletirdim ve login.js dosyasna aktardm. login.htmlde bilmeniz gereken bir nokta, submit deeri yerine button yazdm. submit otomatik olarak <form> tagnda yazan action parametresindeki deere bilgileri yolluyordu, bunu button dmesiyle onclick Eventhandlerini kullanarak yolla() fonksiyonunun iinde gerekletirdim. yolla() fonksiyonuna bakarsanz iinde kullandm open() metodunda kullaniciadi ve sifre parametrelerin deerini Servere yolladm grrsnz. Server yolladm deerlere gre bir cevap vermektedir ve handleResponse() fonksiyonuna geri yollamaktadr. Tarayc, DOM modeline gre sc dsine sahip <div> tagnda, gelen cevab gstermektedir. AJAX kullanlarak yaplan bu rnekte Tamam dmesine basldnda tarayc yeni bir sayfa amamaktadr, her ey ayn sayfada olmaktadr.
Ajax ve CSS Daha nce CSSe bir giri yapmtm ve nemli konulara deinmitim. imdi CSS ile AJAX kombine ederek avantajlarn gstereceim. imdiye kadar yaptm AJAX uygulamalar alyordu fakat canllk yoktu. Kullanacamz CSS ile bu uygulamalar hem canllk kazanacak hemde CSS AJAXa neler katyor bunu grm olacaksnz. Bunu grebilmek iin bir rnek daha nce
166
Musa AVU
kodladmz resim.htmlyi rnek olarka vermek istiyorum.. Daha nceki kodlarda biraz deiiklik yaptm: <html> <head> <title>Resim bilgileri</title> <script language="JavaScript" src="resimcss.js"></script> <link href="resim.css" type="text/css" rel="stylesheet" /> </head> <body> <img id="resim1" src="elma.jpg" width="300" onmouseover="sndReq(1)" onmouseout="bos()"> <br> <img id="resim2" src="armut.jpg" alt="" onmouseover="sndReq(2)" onmouseout="bos()" /> <div id="bilgi"></div> </body> </html> resimcss.html body { background:#dddddd; font-size:14px; } #resim1{ position:absolute; top:100px; left:100px; } #resim2{ position:absolute; top:100px; left:400px; } #bilgi{ position:absolute; top:50px;
Musa AVU
167
left:450px; color:red; border:solid; border-width:1pt; width:200px; height:30px; } resim.css resimcss.js dosyasnda hi bir deiiklik yapmadm. resimcss.html dosyasnda tek bir deiiklik yaptm o da resim.css dosyasn resimcss.html dosyasna <link> tagyla balamak. resim.css dosyas yeni oluturduum bir dosya. Bu dosyada anlatmadm parametre position, top, left, border, border-width, width ve height parametreleridir. position parametresiyle bir tagn konumunu belirliyorsunuz, absolute diyerek mutlak pozisyonda yer almasn istemi oldum. top parametresi, tagn x koordinatn ve left parametresi tagn y koordinatn belirtmemizi salyor. border parametresiyle ereve eklini, border-widht ile ereve kalnln, width ile ereve geniliini ve height ile ereve yksekliini tanmlam oluyoruz.
ekil109 Hadi bakalm bu blde hayrlsyla bitirdik. Dars dier blmlerin bana
168
Musa AVU
Blm 8 HTTP ve XMLHttpRequest
Musa AVU
169
8.1 HTTP ve XMLHttpRequest Bu blmde biraz Sniffing gstermem gerekiyor ki HTTP belleinize daha iyi otursun. Kod blmnde aslnda yeni gsterdiim fazla bir ey yok, sadece daha nce gsterdiklerime biraz ilave edeceim ve aklayacam. Benim analiz etmek istediim , yazdm AJAX uygulamas ile Server arasndaki veri transferleri. <html> <head> <title>HTTP Degerlendirmesi</title> <script language="JavaScript" src="xmlhttprequestobjekt.js"></script> <script language="JavaScript" src="httprequest.js"></script> <script language="JavaScript"> window.document.onclick = sndReq; </script> <link href="httprequest.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Sayfaya tiklayin</h1> <div id="cevap"> <h3>Server cevabi</h3> <div id="bilgi"></div> </div> </body> </html> httprequest.html httprequest.html kodunu grr grmez manzaray akm olmalsnz. Kod ok kolay ve anlalr. body { background:#dddddd; font-size:14px; font-family:"Engravers MT"; color:#1111ee; }
170
Musa AVU
h1{ font-size:24px; text-align:center; } h2{ font-size:20px; } h3{ font-size:18px; } h4{ font-size:16px; } #cevap{ position:absolute; top:80px; left:250px; width:550px; height:320px; border:solid; border-width:1pt; text-align:justify; background:blue; color:white; } httprequest.css font-size yaz tipinin bykln verirken, font-familiy yaz tipini veriyor. Yaz tipinin bykln piksel olarak verdim ve font-size parametresinden sonra bir say yazarak ingilizce pixel kelimesinin ksaltmas olan px kullanluyor. function olsXMLHttpRequestObject(){ var resNesne = null; try { resNesne = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){
Musa AVU
171
try { resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error){ try { resNesne = new XMLHttpRequest(); } catch(Error){ alert( "XMLHttpRequest-Nesnesi olusturulamiyor"); } } } return resNesne; } function OlusturAJAXObjekt(){ this.olsXMLHttpRequestObject = olsXMLHttpRequestObject; } o = new OlusturAJAXObjekt(); resNesne = o.olsXMLHttpRequestObject(); xmlhttprequestobjekt.js xmlhttprequestobjekt.js kodunda oluturulan resNesne nesnesini httprequest.js kodunda kullanabiliyoruz. kiside farkl dosya olmasna ramen JavaScripti hazrlayan amcalarmz bize byle bir kolaylk salamlar.
function sndReq() { resNesne.open('get', 'httprequest.php',true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("bilgi").innerHTML = resNesne.responseText + "<br>Transfer durumu: " + resNesne.readyState + "<br>Durum: " + resNesne.status +
172
Musa AVU
"<br>Durum bildirisi: " + resNesne.statusText + "<hr><h4>Server tarafindan iletilen tum Header'ler</h4>" + resNesne.getAllResponseHeaders(); } } httprequest.js Taraycda kan sayfaya tkladmzda Serverdan gelen cevabn Headerini taraycda gryoruz. Header nedir? HTTP, Webdeki kullanlan protokoldr. Temelde web taraycsyla web Server arasndaki iletiimi salayan protokoldr. Bir ynden ok hzldr, fakat dier ynden durumsuz olduu iin takip edilmesi ok zordur. rnein oturumlar kayt edilemedii iin bu protokol bizi zorlamaktadr.AJAX programcs olarak, HTTP mantk olarak nasl altn bilmelisiniz, ancak JavaScript ile neler yapldn byle anlayabilirsiniz. Request, Client tarafndan Web Serverine yollanan bir sorgulama olup Response Server tarafndan Client tarafna verilen cevaptr. Web Request ve Response ile ilemektedir. Diyelim ki taraycnzn adres ksmnda bir adres var. Bu adresi taraycnza girdiinizde ve aratmaya baladnzda, Client olan taraycnz o adrese bir Request yollayacaktr. Web Server sorgulamaya cevap olarak eer varsa bir Response yollar. AJAXta bu dng srekli ve aktrmadan oluyor, nk AJAXn temelinde kullancnn bu bilgileri bilmesi istenmemektedir. <? echo "Ne haber Genclik?</h3>"; ?> httprequest.php
Musa AVU
173
ekil110 resNesne.status bize 200 deerini verirse resNesne.statusText OK olacaktr. Web Server, taraycya yollad mesajn grntlenmesine izin vermitir anlamn tayor. resNesne.readyState yani transfer durumunun 4 olmas zaten bunu ifade etmektedir. Web Server ile Client arasndaki bir sorgulama iin birok iletiim olmaktadr. Client sorgulamay yaptnda, Web Server, ltfen bekleyin diye srekli mesaj yollayabilir. Ancak 4 deerini yollad an Client taraf gelen cevabn taraycda gsterileceine dair izin aldn bilir ve yaynlar. JavaScriptin gelitirilmesinin asl sebeplerinden biri XMLHttpRequest nesnesinin varldr. Bu nesne sayesinde JavaScript popler olup AJAX teknolojisinin olumasn salamtr. En nemli zellikleri, Callback fonksiyonlarn kayt etmesidir, rnekte handleResponse fonksiyonudur. Ayrca HTTPnin HEADER dediimiz alanna ulaabilmesidir, rnein resNesne.state gibi.
174
Musa AVU
AJAX sorgulamas AJAX sorgulamasnn sralamas hep ayndr, aklnzda kalmas iin 5 adm size toparlyorum: 1- XMLHttpRequest nesnesi oluturulur. 2- Callback fonksiyonu XMLHttpRequest nesnesine referans olarak kayt edilir. rnein resNesne.onreadystatechange = handleResponse; gibi. XMLHttpRequest nesnesinin readyState deikeninin 4 deerini almas, Web Serverin yeil k yakmas anlamn tar ve tarayc bu ktan sonra gelen cevab bnyesinde gstermek iin hazrlanr. Bundan dolay neredeyse tm AJAX uygulamalar bu deikeni kontrol ederler. 3- XML HttpRequest nesnesinin open() metoduyla bir balant kurulur. 4- Sorgulama send() metoduyla gnderilir. 5- XMLHttpRequestin deiken deerlerine gre cevap deerlendirilir.
Musa AVU
175
Blim 9 DHTML ve AJAX
176
Musa AVU
9.1 DHTML nedir? DHTML zet olarak, JavaScript, HTML ve Stylesheetlerin birlemesidir. AJAXta, hatrladnz gibi birok var olan teknolojilerin bir araya gelmesiyle olumutur. DHTML, DOM ile beraber almaktadr. DOM teknolojisi zerinden deiiklik yaplmaktadr, getElementById() metodunu kullanmak gibi. <html> <head> <title>Resimleri yukleme/title> <script language="JavaScript" src="xmlhttprequestobjekt.js"></script> <script language="JavaScript" src="dhtml1.js"></script> <link href="dhtml.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Server'deki resimler</h1> <div id="resim1">Resim 1</div> <div id="resim2">Resim 2</div> <div id="cevap"> <div id="bilgi"></div> </div> </body> <script language="JavaScript" src="olay.js"></script> </html> dhtml1.html function kaydet(){ if (document.addEventListener){ document.getElementById("resim1").onmouseover = sndReq1; document.getElementById("resim2").onmouseover = sndReq2; } else { status = "Hata"; } } kaydet();
Musa AVU
177
olay.js
body { background:#dd11dd; font-size:12px; font-family:"Times New Roman"; color:#44aa00; } h1{ font-size:21px; text-align:center; } h2{ font-size:17px; } h3{ font-size:15px; } h4{ font-size:13px; } #cevap{ position:absolute; top:50px; left:50px; } #resim1{ position:absolute; top:50px; left:650px; background:yellow; width:200px; height:50px; border:solid; border-width:1pt; text-align:center; font-size:32px;
178
Musa AVU
} #resim2{ position:absolute; top:115px; left:650px; background:green; width:200px; height:50px; border:solid; border-width:1pt; text-align:center; font-size:32px; } dhtml.css olay.js dosyasn en aada koda baladm, nk resim1 ve resim2 nesnelerine onmouseover Eventhandlerini kayt etmek isteseydim JavaScript sorun kartrd. Bunun nedeni, JavaScript, Eventhandler kayt edilirken nesnelerin varln istemektedir. Bu da resim1 ve resim2 nesnelerini oluturduktan sonra olabilir. addEventListener deikeniyle sayfamza bir Eventhandler kayt edebilir miyiz bunu kontrol ediyoruz. IE iin bu yntem geersizdir, ben Firefox kullandm iin bu yntemi kullandm. function sndReq1() { resNesne.open('get','dhtml1.php?&resim=1', true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function sndReq2() { resNesne.open('get','dhtml1.php?resim=2', true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("bilgi").innerHTML = resNesne.responseText; }
Musa AVU
179
} dhtml1.js <? if ($_REQUEST['resim'] == 1) { echo "<img src='domates.jpg' />"; } else { echo "<img src='patlican.jpg' />"; } ?> dhtml1.php dhtml1.php kodu, gelen resim deerine gre bir <img> tag yollamaktadr ve tarayc bu tag resm idli <div> tagnda gstermektedir. Normalde bu mantktaki ilemleri daha nce yapmtk, burada kullanlan sistemin bir blmnde DHTML vardr, DOM yoluyla ilem grlmektedir.
ekil111
DHTML bize resimlere ulaabilmek iin JavaScript sayesinde images nesnesini sunar. Bu nesne sayesinde HTML sayfamzdaki <img> resimlerine ok kolaylkla ulaabiliriz ve istediimiz ilemleri yapabiliriz.
180
Musa AVU
Windowsta bir program ykleneceinde eer uygulama arka planda bir eyler yapyorsa n tarafta bir kum saati kartyor. Sradaki rneimizide bu ekilde dndm. Diyelim siz bir sorgulama yolluyorsunuz ve kullancy skmamak iin, program arka planda ilem grrken n tarafta ilem yapldn gsteren bir saat koymak istiyorsunuz: <html> <script language="JavaScript" src="image1.js"></script> <script language="JavaScript"> window.document.onkeypress = sndReq; </script> <body> <h1>Bir tusa basiniz</h1> <span id="cevap"></span> <img src="bos.gif" height="30" style="position:absolute;top:80px;left:400px;"> </body> </html> image1.html <img> tagnda style parametresine <img> tagnda gsterilecek gif dosyasnn yerini ve bykln belirttim. var resNesne = null; function erzXMLHttpRequestObject(){ var resNesne = null; try { resNesne = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error){ try { resNesne = new XMLHttpRequest(); } catch(Error){
Musa AVU
181
alert("XMLHttpRequest nesnesi olusturulamiyor"); } } } return resNesne; } function sndReq() { resNesne.open('get', 'image1.php',true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("cevap").innerHTML = resNesne.responseText; document.images[0].src="bos.gif"; } else{ document.images[0].src="saat.gif"; } } resNesne=erzXMLHttpRequestObject(); image1.js
Bu kodun byk bir blmn tanyorsunuz. handleResponse() fonksiyonuna iyi bakn. readyState deikeni 4 deerini almamsa taraycdan saat.gif dosyasn gstertmesini istiyorum. Eer Serverdan 4 deeri geliyorsa, yani Server diyorsa tamam karde sana yeil k yaktm o zaman cevap idsine sahip <div> tagnn iindeki metini Serverdan aldm cevap ile deitiriyorum. <? sleep(6); echo "Biraz beklettim, ama manzarayi caktin sanirim?"; ?> image1.php sleep() fonksiyonu arld noktada verilen parametredeki say saniyesi kadar durulmasn syler.
182
Musa AVU
ekil112
DHTML teknolojisiyle sayfamzdaki Stylelerede ulaabiliriz. style zelliini kullanarak bunu ok kolay gerekletirebilirsiniz:
<html> <link rel="stylesheet" href="stil1.css" type="text/css"> <script language="JavaScript" src="stil1.js"></script> <body onClick="sndReq()"> <h1>Sayfaya tiklayin</h1> <span id="cevap"></span> <span class="stil1" id="durum">Lutfen bekleyin</span> </body> </html> stil1.html .stil1 { color : white; background-color : blue; visibility : hidden; position : absolute; top : 100px; left : 500px; } stil1.css
Musa AVU
183
visibility parametresine hidden deeri vererek bu selektrn gsterdii taglar grnmez olmaktadr. var resNesne = null; function olsXMLHttpRequestObject(){ var resNesne = null; try { resNesne = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error){ try { resNesne = new XMLHttpRequest(); } catch(Error){ alert("XMLHttpRequest nesnesi olusturulamadi"); } } } return resNesne; } function sndReq() { resNesne.open('get', 'image1.php',true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("cevap").innerHTML = resNesne.responseText; document.getElementById("durum").style.visibility = "hidden"; } else { document.getElementById("durum").style.visibility = "visible"; } }
184
Musa AVU
resNesne=olsXMLHttpRequestObject(); stil1.js <?php sleep(5); echo "Yine uzun surdu ama manzarayi kesin caktin"; ?> image1.php
ekil112 stil1.js dosyasnda style nesnesini kullanarak taglarn style zelliklerini deitirdim. Bu nesneyle CSSte bulunan deikenlere ok rahatlkla ulalmaktadr. visibility deikeninin deerini visible yaparak durum idsine sahip olan tag gstermi oldum. Dier CSS parametrelerini de style nesnesinden yararlanarak deitirebilirsiniz. Denemede zgrsnz. Denemeden nce bu konuyla alakal son bir rnek yapmak istiyorum: <html> <style type="text/css"> #bilgi { background-color : blue; color : white; border : solid; } #P1 { background-color : blue;
Musa AVU
185
width : 0px; height : 10px; position : absolute; top : 100px; left : 100px; } </style> <script language="JavaScript" src="xmlhttprequestobjekt.js"></script> <script language="JavaScript" src="ilerle.js"></script> <body> <form> <input type="button" value="Buraya Bas" onClick="sndReq()" /> </form> <div id="bilgi"></div> <div id="P1"></div> </body> </html> ilerle.html function sndReq() { resNesne.open('get', 'image1.php?z=' + Math.random(), true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); ilerle(); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("bilgi").innerHTML = resNesne.responseText; } } i = 0; function ilerle() { document.getElementById("P1").style.width = i++; if(resNesne.readyState != 4) setTimeout("ilerle()",5); else { i = 0;
186
Musa AVU
document.getElementById("P1").style.width = i; } } ilerle.js Servere z parametresiyle rastgele oluturulmu saylar yolluyorum, fakat bu parametre Server tarafndan kullanlmyor. Bunu bile bile yaptm, nk tarayc ayn sorgulama olunca sorgulamay bellee yazyor. Bu mekanizma ile tarayc yeni bilgiler yollayaca iin sorgulamay bellee yazmyor. Cache bellee bunu yazsayd, AJAX sorgulamasnda eski bilgiyi geri verirdi. Ufak bir ktlkla bu ii byle hallettik. Koda dikkatli baktysanz kendini aran fonksiyon yntemini kullandm, bunu yaparkende 5 saliselik bir gecikmeyle fonksiyonu ardm. Eer gecikme kullanmasaydm, fonksiyonlar bu kodda st ste binebilirdi.ilerle() fonksiyonu her arldnda P1 idsine sahip <div> tagnn CSS grnts 1 piksel geniliyor. Serverden yeil k alnnca ilerleme ubuunun deeri 0 oluyor. Dng kullanmak yerine kendini aran fonksiyonla ilerleme ubuunun ilerlemesini salam oldum. image1.html ve xmlhttprequestobjekt.js dosyalarn daha nce kullanmtk, ayn kodu burada da kullandm.
ekil113
Musa AVU
187
Blm 10 AJAX ve XML
188
Musa AVU
10.1 Veri aktarm Tipik bir AJAX uygulmasnda eit veri aktarma ekli vardr. Metin, JSON ve XML. En az problemi metinler yollarsak en fazla problemi XML ile yaarz. Genelde XML teknolojisi, tm mant Client tarafna yklemek istersek kullanlr. JSON, metin ve XML veri aktarmlarnda ikisinin arasnda uyumlu olan bir teknolojidir. imdiye kadar olan veri aktarma ekillerinde normal metinler kullanmtk.
10.2 XML Internet sayfalar iin HTML kendisini standartlatrd. Fakat veritaban, ya da hesap tablolar gibi uygulamalar iin HTML yetersiz kalyor. W3C kurumundaki kiiler oturdular ve HTML gibi kolay olabilecek bir genel zm aradlar sonunda XML iin karar kldlar. Ben XML konusuna ihtiyacmz olaca kadar deineceim, daha ayrntl bilgi edinmek isteyenler http://www.w3c.org/ adresine girerek bilgilenebilirler. Burada size bir AJAX uygulamas iin gereken XML bilgisini vereceim. Bu bilgiler nda bile birok XML veri aktarmna bal AJAX uygulamalar programlayabilirsiniz. Elementler ve deikenler XML dokmannn ierii, bir dzen ierisinde uygun yaplardan olumaktadr. Yaplarn arasndaki metinler ve elementler bulunmaktadr. Elementlerin parametrik deikenleri olabilir ki bu deikenler elementler hakknda ek bilgi vermektedirler. <?xml version="1.0"?> <eglence tarih="31.12.10"> <misafir isim="Gizemli Kahraman"> <icecek>elma suyu</icecek> <icecek>portakal suyu</icecek> <medenidurum bekar="true" utangac="false"/> </misafir> </eglence> eglence.xml Elementlerin byklk kklk yazm ayrt edilmesi iin ok nemlidir. Bir deiken bir isimden ve birde deerden olumaktadr. Deiken deeri, ya tek trnak ya da ift trnak arasnda durmaktadr ve eit iareti de deer ile deiken
Musa AVU
189
arasnda bulunmaktadr.
Taglarn kullanm Elementleri sivri parantezlerin iine yazarz. Elementler iki ekilde varlk gsterirler. Birincisi balang ve biti Tag eklinde, ki Tagn ismi de ayn fakat biti Tagn ismini yazmadan eri bir izgi iaretini koyarz. Taglarn arasna da elementin bilgisini yazarz. <icecek>elma suyu</icecek>
erik barndrmayan bir element sadece bir Tagdan oluur ve Tagn sonundaki sivri parantezden nce eri izgi bulundurur. Bu tr Taglarn parametrik deikenleri mevcut ya da sadece bir Tagdan oluur <medenidurum bekar="true" utangac="false"/> Serbest ekildeki isim verme sonucu belirli bir ekilde format verme imknsz. HTML gibi belirli sayda Tag yoktur. XML dokman Internet gezginleri tarafndan gsterilmek istenildii zaman, ek olarak zel yazmlara ihtiya duyarz.
Dzgn XML XML dokmanlar baz kurallar yerine getirmesi gerekiyor ki dzgn biimli olsun. Dzgn bir yapya sahip deilse, o zaman bir XML dokman olmam oluyor. Her element bir balang Tagna ve bir de biti Tagna sahip olmaldr, deilse sadece tek bir Tag olabilir, fakat bununda bir bitii olmas gerekmektedir.
XMLde zel iaretler Baz iaretlerin XML dokmanlarnda belirli anlamlar olduunu unutmamalyz. Mesela &, <, >, ve , . Bunlar metinlerde zel ksaltmalarla ifade edilirler. Srasyla u ekilde gsterebiliriz, &, %lt;, >, " ve '.
190
Musa AVU
Aklamalar XML dokmanlarn ieriinde aklamalar yazabiliriz. Bunlar XML dokmanlar ilenirken atlanrlar. XML dokmanlarn her tarafnda bu aklamalar kullanabiliriz. Sadece Taglarn ierisinde kullanma imkanmz yok. <!- -Bu bir aklamadr - ->
Balk tanmlamas Balk tanmlamas kesinlikle bir XML dokmannda olmaldr. Balk tanmlamas deikenler barndrabilir. <?xml version="1.0 encoding=iso8859-1 Bu rnekte iaret kodlamasn da deikende tanmladm.
XML dokmannn yapsal dili HTML dokman gibi XML dokmanlarnda Taglarn says ve kombinasyonlar kararlatrlmamtr. He uygulama iin kullanclar istedikleri sayda Taglar kullanabilirler ve tanmlanabilir. XML dosyasnn bir uygulama iin doru olduunu, o uygulamann yapsal tanmlamasna ihtiya duyarz. Bu yap belirli bir formatta yazldr. ki format ok poplerdir. XML Schema ve Document Type Definition (DTD). Hangi Taglarn olacan, elementlerin tipini, ierik yapsn, element deikenini, Tag ierisinde Tag var m. Bu bilgilere uyan XML dokman geerli bir dokmandr, yani validdir.
Schema Schemalar, XML dosyasnn yapsal kavramlarn ierirler. Schemalarda bir elementin tipi ve ierii DTDye gre daha ayrntl ele alnmaktadr. Geneldeki tipler, string, integer ve double tipleridir. date ve duration gibi tiplerde bulunmaktadr. Ek olarak kendimizde tip tanm yapabiliriz. Schemalarla bir deerin tam say m, kayan noktal say m, yoksa string mi olduunu belirtebiliriz. rnek bir XML dokmanmz u ekilde olsun: <?xml version="1.0" ?> <eglence tarih="31.12.10"> <misafir isim="Cesur Hasan"> <icecek>Visne suyu</icecek> <icecek>Maden suyu</icecek> <medenidurumu bekar="true" utangac="false"/> </misafir>
Musa AVU
191
<misafir isim="Kuvvetli Kazim"> <icecek>Elma suyu</icecek> <medenidurumu bekar="true"/> </misaifr> <misafir isim="Pasakli Sabile"></misafir> </eglence> eglence2.xml Bunun iin yle bir Schema hazrladm: <?xml version="1.0"?> <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <xsd:complexType name="eglenceTipi"> <xsd:sequence> <xsd:element name="misafir" type="misafirTipi" /> </xsd:sequence> <xsd:attribute name="tarih" type="tarihTipi" /> </xsd:complexType> <xsd:complexType name="misafirTipi"> <xsd:sequence> <xsd:element name="icecek" type="xsd:string" /> <xsd:element name="medenidurumu" type="medenidurumuTipi" /> </xsd:sequence> </xsd:complexType> <xsd:simpleType name="tarihTipi"> <xsd:restriction base="xsd:string"> <xsd:pattern value="[03][09].[01][09].[09][09]" /> </xsd:restriction> </xsd:simpleType> <xsd:complexType name="medenidurumuTipi"> <xsd:complexContent> <xsd:restriction base="xsd:anyType"> <xsd:attribute name="bekar" type="xsd:boolean" /> </xsd:restriction> </xsd:complexContent> </xsd:complexType> </xsd:schema> eglence2Schema.xsd Bu rnekte string tipi rnein icecek elementi iin kullanlmtr. boolean
192
Musa AVU
medenidurumuTipi elementi iin kullanlmtr. misafir elementi iin zel tanmladmz misafirTipi tipi kullanlmtr. tarihTipi tanmlamasn da ok basit olan Regular Expression tanmn kullanarak yaptm. Ay, gn ve yl arasnda bir noktann olmasn belirttim ve gnn ilk rakamnn 0 ile 3 arasnda bir rakam olacan syledim. Bir XML Schemasnda tipleri basit ve karmak olarak iki tip olarak snflandrrz.Basit tiplere simpleType, karmak tiplere complexType tanmlamasylaayrrz. Basit tiplerin zellii, alt elementlerinin ve deikenlerinin bulunmamasdr.Sadece metin ksm mevcuttur. Bunun dnda karmak tipler, alt elementlerbarndrabilirler, deiken tanmlayabilirler, ben bu konulara fazla girmiyorum,sadece bize gerekli olan sizlere vermek istiyorum. Basit Schema ile rneklerimizi Java ile anlatmaya alacam, nk bu kitap bir XML kitab deil.
Namespace Namespace kavram u konuda ok nemlidir: XML dosyalar sadece yerel kullanlmad zaman. Veriler dei toku edildiinde XML dosyalar kombine edilince Farkl XML dosyalarnn ayn XML Tag kullanmas asndan kargaalk ortaya kar. Namespace ile bunu engelleyebiliriz. XML dosyasn bir Namespace ortamna ya da birden fazla Namespace ortamlarna atamak mmkn. Namespace, neki ve bir URI balantsndan olumaktadr. Namespace tm elementlerin n tarafna gelir ve kullanlabilir. Namespace tanmn yukarda u ekilde yapmtk: xmlns:xsd="http://www.w3.org/2001/XMLSchema"> xsd n ek olmu oluyor, http ile balayan ksmda URI blm olmu oluyor. Bu tanmn nne de <xsd:schema eklinde bir tanmlama yaptm ki schema buradaki yerel addr. n ek istenilen ekilde seilebilir, ben xsd setim, siz isminizi seebilirsiniz. Diyelim ki biz elencemiz iin n ek olarak dogumgunu eki vermek istiyoruz o zaman rnein u ekilde bir tanmlama yapabiliriz. <dogumgunu:eglence xmlns:dogumgunu="http://www.dogumgunu.com" dogumgunu:tarih="18.09.77"> <dogumgunu:misafir dogumgunu:ad="Musa Cavus">
Musa AVU
193
</dogumgunu:misafir> </dogumgunu:eglence> Namespacelerin bir baka uyguland alan ise, belirli teknolojilerin Taglarna iaret etmesidir. XML teknolojisi iin sabit Namespaceler verilmektedir ki biz bunu rnek xsd dosyamzda yaptk: <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"> XML dosyasn ileyen bir uygulama, Namespaceler sayesinde hangi teknolojinin kullandn bilebilir.n ek deil de, URI bu konuda ok nemlidir, nk URI sayesinde kullanlan teknoloji deiiyor ki n eki istediimiz ekilde kullanabiliriz. XML hakknda yeterli n bilgi verdikten sonra bir rnekle AJAX/XML ikilisini anlatmaya balamak istiyorum: <html> <script language="JavaScript" src="xml.js"></script> <body onKeyPress="sndReq()"> <h1>Bir tusa basin</h1> <span id="cevap"></span> </body> </html> xml.html
<?xml version="1.0" ?> <db> <ds> <ad>Mustafa</ad> <soyad>Ozturk</soyad> <numara>1234</numara> </ds> <ds> <ad>Hayri</ad> <soyad>Unal</soyad> <numara>8938</numara> </ds> </db> ad.xml
194
Musa AVU
Basit bir XML dosyas oluturdum. Anlattm XML bilgisine gre bu tanmlamay anlamsnzdr. Benim isteim <ad> tagndaki Hayri ismine ulamak, bunu nasl yapacaz? function olsXMLHttpRequestObject(){ var resNesne = null; try { resNesne = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error){ try { resNesne = new XMLHttpRequest(); } catch(Error){ alert("XMLHttpRequest Nesnesi olusturulamadi"); } } } return resNesne; } function sndReq() { resNesne.open('get', 'ad.xml',true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("cevap").innerHTML = resNesne.responseXML.getElementsByTagName("ad")[1].firstChild. data; } } resNesne = olsXMLHttpRequestObject(); xml.js
Musa AVU
195
ekil114 Bu rnein imdiye kadar grdmz rnekler arasndaki tek fark handleResponse() fonksiyonunda gereklemektedir. responseText yerine responseXML nesnesini kullandmzn farkna varmsnzdr. Bu nesne bize DOM taslana bal olarak bir dm yani bir node iletmektedir. node sayesinde tm XML aacnda dolaabiliriz. getElementBy ile balayan tm metodlar kullanabiliriz. Burada da getElementsByTagName() fonksiyonunu kullanarak <ad> tagna sahip olan taglardan ikincisini aryorum. Bir elementin ieriini firstChild nesnesinin data deikeniye elde edebiliyoruz. Serverde bulunan XML dokmanlarna CSS uygulayabilirsiniz. Bunu yaptnzda CSS dosyanz HTML kodundan ayr tutmu oluyorsunuz ve XML dosyas ile balantda tutmu oluyorsunuz. Az nceki rnee bir CSS dosyas ekledim ve biraz deiiklik yaptm: <html> <link rel="stylesheet" href="ad.css" type="text/css"> <script language="JavaScript" src="ad.js"></script> <body onKeyPress="sndReq()"> <h1>Bir tusa basiniz</h1> <span id="cevap"></span> </body> </html> ad.html
db { background-color : green; } ds {
196
Musa AVU
background-color : yellow; display : block; width : 400px; } ad { color : red; } ad.css dsplay parametesine block yazarak o yaznn blok eklinde gzkeceini tanmlyor. background-color parametreside arka plann rengini deitirmektedir. <?xml version="1.0" ?> <?xml-stylesheet href="ad.css" type="text/css" ?> <db> <ds> <ad>Mustafa</ad> <soyad>Ozturk</soyad> <numara>1234</numara> </ds> <ds> <ad>Hayri</ad> <soyad>Unal</soyad> <numara>8938</numara> </ds> </db> ad.xml kinci satrda XML dosyasnn hangi CSS dosyasyla ilikilendireceimizi tanmladm. <xml.stylesheet> tag bu ie bakyor ve href parametresinde CSS dosyasnn adn veriyoruz. XML dosyasmz bir HTML dosyas olarak dnn. CSS kullanrken ne yapyorduk? CSS tarafndaki selektrlere HTMLdeki taglar yazyorduk. Burada da bu ilemi yapyoruz. function olsXMLHttpRequestObject(){ var resNesne = null; try { resNesne = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resNesne = new ActiveXObject("MSXML2.XMLHTTP");
Musa AVU
197
} catch(Error){ try { resNesne = new XMLHttpRequest(); } catch(Error){ alert("XMLHttpRequest Nesnesi olusturulamadi"); } } } return resNesne; } function sndReq() { resNesne.open('get', 'ad.xml',true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("cevap").innerHTML = "Cevap:<br>" + resNesne.responseText; } } resNesne = olsXMLHttpRequestObject(); ad.js Tarayc, handleResponse() fonksiyonunda ad.xmlden gelen cevab yani XMLin ieriini ekrana CSS formatnda gsteriyor. Okuduu her node bilgisini bir cevap olarak yolladna dikkat edin. XML ve AJAX hakknda fazla bir ey anlatmak istemiyorum. Verdiim bu bilgiler bile pratik hayatnzda XML ile uygulama gelitirmenize yetecek ve artacaktr, nk XML ilemlerini taraycdan taraycya gre deimektedir. Firefox ile alan bir XML uygulamas IE ile almayacaktr ya da baka alacaktr. ok karmak bir XML yapda olan programnz tm tarayclar iin uyarlamak byk zaman alacaktr ve ben bu yzden XML veri aktarmn kullanmanz tavsiye etmiyorum.
198
Musa AVU
ekil115
Musa AVU
199
Blm 11 jQuery ve jQuery UI
200
Musa AVU
11.1 jQuery jQuery diline, jQuerynin kendi web sayfasyla balamak istiyorum. Web adresi http://jquery.com
ekil116 jQuery hakknda bilgi aryorsanz ilk bavuracanz sayfa bu sayfadr. Download linkinin altnda Download | jQuery linkini tklarsanz, Minified ve Uncompressed ad altnda iki seeneiniz olacaktr. Uncompressed seenei daha okunakldr ve kod ksmlarnda aklamalar vardr. Minified seeneindeki kod ise kullanc sayfalarna daha abuk iletilir, nk aklama ve okunakllk Uncompresseddeki gibi deildir. Download iin yapmanz gerken ok basittir, Uncompressed linkine tklayn:
Musa AVU
201
ekil117 Taraycnzn zelliine gre tkladnz link bendeki gibi ya gsterilecektir ya da baz tarayclar bir diyalog penceresi aacaktr ve size dosyay bilgisayarnza kayt edebilme zellii verecektir. Bu dosyay ben Firefoxta Dosya->Sayfay farkl kaydet linkinden jQuery dizinine kaydettim. jQuery sayfasndaki Download linkinin yannda Documentation linki vardr.
202
Musa AVU
ekil118 jQueryi ile alrken burayla adeta zdeeceiz. Tutorials linkine bakarsanz, rnekler vardr fakat rnekler iin bu kitab aldnz iin kitap boyu bu linke gerek duymayacaksnz. jQuery linkinin sanda UI linki var. jQuery UI olan bu blm kullanc arayzleriyle ilgilenmektedir ki bunu jQueryden sonra ele alacam. Birde bizi ilgilendiren Plugns blm vardr, bunu da sonra anlatacam. jQuery ve jQuery UI projelerin temelinde JavaScript yatyor. jQuery ve jQuery UI tekeri tekrar kefetmek yerine hazr modllerle size yardm etmektedir. Tabi siz yok abi ben hereyi kendim yapacam derseniz, JavaScript ile de burada anlatlacaklar yapabilirsiniz. Fakat 1 gn kodlamak yerine 1 ay kodlayacanz da unutmayn. Buradan anlamamz gereken, jQuery ile iyi alabilmek iin JavaScript bilmemiz gerekiyor. Eer biraz JavaScript biliyorsanz, jQuery ile de biraz baarl olabilirsiniz, eer iyi bir JavaScript programcs olduysanz jQueryle de iyi programlar programlayabilirsiniz. JavaScriptI ben bu yzden kitabn banda anlattm ki ncelikle iin temelini retmi olaym. Kitaptaki rnekleri buraya kadar takip ettiyseniz jQueryI renmede bir zorluk ekmezsiniz ve jQuery ile ok baarl projeler oluturabilirsiniz. jQuery ile imdiye kadar tanmadysanz, bundan sonra jQuery ile tantnz iin ok sefindirik olacaksnz. Neden derseniz, jQuery kullanmak bir ayrcalktr, nk size ksa yntemlerle byk olanaklar salamaktadr.
Musa AVU
203
jQuery ile almak iin nelere ihtiyacm var? Bir taraycya ihtiyacnz var. Ben Firefox kullanyorum. Siz jQuery ile proje gelitireceksiniz ve kullanclarnzda farkl tarayclar kullanyorsa mutlaka farkl tarayclarda projenizi test etmelisiniz. Yoksa istenmedik sonular ortaya kabilir. jQuery, genelde eski tarayclar desteklemiyor, en son gncel tarayclarla uyumlu alabiliyor. Taraycnzn jQuery ile alabilirliini kontrol etmek iin http://jquery.com/test adresine girin:
ekil119
204
Musa AVU
Yeil satrlar ounluktaysa taraycnzn jQuerynin bir ok alann desteklediine inanabilirsiniz. Gerekli olanlardan XAMPP programn zaten sisteminize daha nce kurmutunuz.
11.2 lk jQuery rnei jQuerynin temellerini anlatmadan bir rnek vermek istiyorum. Amacm hzl bir ekilde, jQuery ile neler yaplabileceini gstermek. Anlatm daha sonraki blmlerde ayrntlarla yapacam. zet olarak teoriden ziyade hemen pratik yaparak size jQuerynin nimetlerinden nasl yararlanacanz gstereceim. Ana dizinde jQuery ad altnda bir dizin an ve jquery-1.4.2.js dosyasn buraya indirin. Daha sonrada aadaki kodu yazn ve ayn dizine kayt edin. <html> <head> <title>Ilk jQuery Ornegi</title> <script src="jquery-1.4.2.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#b1").click( function() { alert('Merhaba'); } ); } ); </script> </head> <body> <h1>Dugmeyi tikla</h1> <button id="b1">Tikla beni</button> </body> </html> jquery1.html
Musa AVU
205
ekil120 $ iaretiyle parantezi atm ve iine document yazdm. jQueryde $ iareti bizi bir ok uzun kodlamadan kurtaracaktr. getElementByTagname gibi kodlamalar tarihe karmtr. Fakat burada asl nemli olan ready teriminin kullanlmasdr. Web sayfasndaki DOM aac doru yaplanmsa ready terminin iindeki blok alacaktr. $(#b1) ile b1 idsine sahip taga ulalmaktadr. Bundan sonra click terimini kullanarak bu idye sahip nesne tkladnda yaplacak olay yine yeni bir blok aarak verdim ki burada alert() fonksiyonunu kullandm. lk jQuery rneimizi bu ekilde bitirmi oluyoruz. Ayrntlara daha sonraki blmlerde derinlemesine inilecektir. Bu rnei biraz deitirerek taraycda dmenin belirlemesini ve her dmeye baslnca farkl bir mesajn ekranda gzkmesini istiyorum:
206
Musa AVU
<html> <head> <script src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ alert('Merhaba'); }); $("#b2").click(function(){ alert('Tesekkurler'); }); $("#b3").click(function(){ alert('Iyi misin?'); }); }); </script> </head> <body> <h1>Dugmeyi tikla</h1> <button id="b1"> Bana tikla </button> <button id="b2"> Benide tikla </button> <button id="b3"> Bende varim </button> </body> </html> jquery2.html
Musa AVU
207
ekil121 jQuery ile yaptm i ok bast, ilk rnekteki jQuery kod blmn kere kopyaladm ve oluturduum dmeye baladm.
11.3 DHML ve jQuery DHML teknolojisiyle jQueryde harkalar oluturabilirsiniz. Taraycda 4 tane dme gzkmesini istiyorum ve her dmeye farkl bir grev vereceim: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <style type="text/css"> .cssSinif { background: green; font-size: 37px; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#a").click(function(event){ $("#e").addClass("cssSinif"); }); $("#b").click(function(event){ $("#e").removeClass("cssSinif"); });
208
Musa AVU
$("#c").click(function(event){ $("#e").hide("slow"); }); $("#d").click(function(event){ $("#e").show("fast"); }); }); </script> </head> <body> <h1>jQuery ile Web Sayfasi</h1> <button id="a"> CSS-Sinifi ekle </button> <button id="b"> CSS-Sinifi kaldir </button> <button id="c"> Gizle </button> <button id="d"> Goster </button> <hr/> <div id="e"> Bu dunya bizim kirletmeyelim </div> <hr/> </body> </html> index.html
Musa AVU
209
ekil122 lk iki rnekten farkl olarak jQuery ile <div> tagyla balantya getim. $ iaretini kullanarak ayn metotla eriim saladm. 4 tane farkl metot gryorsunuz. Bunlar animasyon metotlardr ve DHTML zellii tarlar. addClass() metodu, parametrede verilen snf ekler. Bundan dolay Bu dunya bizim kirletmeyelim yazs CSS snfnda verilen zellii yanstr. removeClass() metodu ekledimiz CSS snfn siler. Hide() metodu gsterilen <div> tagndaki yazy parametredeki deere gre saklar. hide parametresi, yava sakla anlamn tar. show() metodu yazy parametredeki ifadeye gre gsterir. fast burada hzl anlamn tar.
Firebug index.html dosyasndaki kodlar ierisinde DHTML ile CSSleri gstererek, kapatarak ve aarak efektler grebildik. imdi arka planda neler oluyor onu gstermek istiyorum. Bunun iin Firefoxunuza Firebug eklentisini ekleyin. Bir eklentinin nasl ekleneceini daha nceki derslerde anlatmtm. Ben Firebug Firefoxuma ekledim ve az nceki rnei altrdm:
210
Musa AVU
ekil122 Sa alt kede bir bcek resmi greceksiniz. Onun zerine bir tklayn, sakn sinek minek varsa onun zerine tklamayn, buradaki bcekten kastm Firefoxta bir bcek sembol var ona tklayn:
Musa AVU
211
ekil23 CSS-Sinifi ekle dmesine baslnca <div> tagn nasl deitiine bir bakn: <div id="e" class="cssSinif"> Bu dunya bizim kirletmeyelim </div> class parametresinde otomatikman cssSinif diye bir atama olduunu grmeniz, dmeye baslnca arka planda byle bir deiimin olduunun gstergesidir.Gizle dmesine basnca Firebugda gsterilecek animiasyonun zaman bal olarak geniliinin deitiini de grebilirsiniz. Dier dmelere basarak deimileri inceleyin. Firebugn bu zelliiyle analiz etmeniz ok kolaylayor. Animasyonlu ekilde bir resmi byltmek ve kltmek istiyorum. Aynsn taraycnn gsterecei bir yaz iinde gerekletirmek istiyorum: <html> <head> <title>Resim buyultme kucultme</title> <script type="text/javascript" src="jquery-1.4.2.js">
212
Musa AVU
</script> <script type="text/javascript"> $(document).ready(function(){ $("#toggle1").click(function(event){ $('#b1').slideToggle('slow'); }); $("#toggle2").click(function(event){ $('#h2').slideToggle('slow'); }); }); </script> </head> <body> <h1 id="u1">jQuery ile Resim buyultme kucultme</h1> <button id="toggle1"> Toogle Resim </button> <button id="toggle2"> Toogle Yazi </button> <br/> <img src="resim1.jpg" id="b1" /> <br/> <h2 id="h2">Acayip birsey bu ya.</h2> </body> </html> resimbuyultkucult.html
Musa AVU
213
ekil124 ready(funktion(){ ile balayan bir bloumuzu biliyoruz. $(#toggle1) ile idsi toggle1 olan elemente ve $(#toggle2) ile idsi toggle2 olan bir elementine ulam oluyorum. Elementlerin click metodudna idsi b1 ve h2 olan elementlerle ilem yaplmaktadr. Taglardaki idlerle ilem yapabilmek iin idlerde yazan metni yazyorsunuz nnede # iareti koyuyorsunuz. Bu rnein en ilgin noktas slideToggle() metodu, nk bu metod her hangi bir elementi animasyon eklinde ufaltr ya da byltr. Parametrede slow yazd iin siz Toogle Resim dmesine basarsanz resim yavaa ufalacaktr ve tekrar basnca yavaa byyecektir. Ayn eyler yaz iinde geerlidir. Firebug aksa deiiklikleri ok gzel izleyebilirsiniz. jQuery animasyon metotlarnda zincirleme teknii kullanmaktadr, mesela siz u ekilde bir kod kullanrsanz her metod srayla ilem grecektir: $('#b1').slideToggle('slow').slideToggle('fast').hide('slow'); b1 elementi nce yava kapancaktr sonra hzl alacaktr ve yava kayobolacaktr. Bir tag baka bir tak bilgisiyle kualtmak istiyorsam wrap() metodunu kullanrz. wrap() metodunun nasl altn Firebug ile daha gzel anlayacaz. <html>
214
Musa AVU
<head> <title>Kusat</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#metin1").click(function(event){ $('#metin1).wrap("<div style='background:green'></div>"); }); }); </script> </head> <body> <h1>Elementi kusalt</h1> <span id="metin1"/>Ben kusatilacagim</span> </body> </html> kusat.html Farkna vardysanz, metin1 idsine ulaabilmek iin tek trnakta kullanabiliyoruz, ft trnakta, hi farketmiyor. Tarayc bu kodu ift tkladmda bir yaz gsterecek ve ben o yaznn zerine tkladmda wrap() metodunun iindeki tag, metin1 idsine sahip tag kuatacaktr.
ekil124
Musa AVU
215
kusat.html dosyasn tekrar altdmzda Firebugmz bir aalm. lk atmzda yle bir kod greceiz: <html> <head> <body> <h1>Elementi kusalt</h1> <span id=metin1> Ben kusatilacagim</span> </body> </html> Ben kusatilacagim yazsna tkladnzda Firebug u kodu gsterecektir: <html> <head> <body> <h1>Elementi kusalt</h1> <div style=background: none repeat scroll 0% 0% green;> <span id=metin1> Ben kusatilacagim</span> </div> </body> </html> Ek olarak style parametresine bir ka kod daha ilave edilmektedir fakat bizim isteimiz dnda bir grnt olmayacaktr.
Taglardaki parametre deerleri jQuery ile ok kolay taglardaki parametrelerin deerlerini deitirebilirsiniz. Sradaki rneimizde bo bir <img> tag kullanyorum ve jQuery ile parametrelerin deerlerini deitirerek taraycya resimler yklyorum:
<html> <head> <title>Parametre</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#toggle1").click(function(){ $("img").attr({
216
Musa AVU
src: "r1.jpg" }); }); $("#toggle2").click(function(){ $("img").attr({ src: "r2.jpg" }); }); $("#toggle3").click(function(){ $("img").attr({ width: "300" }); }); $("#toggle4").click(function(){ $("img").attr({ width: "100" }); }); }); </script> </head> <body> <button id="toggle1"> Resim 1 </button> <button id="toggle2"> Resim 2 </button> <button id="toggle3"> Buyuk </button> <button id="toggle4"> Kucuk </button> <hr/><img/> </body> </html> parametredegiskligi.html
Musa AVU
217
ekil125 $("img") koduna iyi bakarsanz # iaretini kullanmadm grrsnz. Bu ekilde tm <img> taglarna hitap etmi oluyorum. <img> tagnn parametrelerini deitirebilmek iin attr() metodu vardr. attr() metodunun iinde {} parantezlerini kullanarak hangi parametreleri deitirmek istiyorsak o parametreyi yazarz ve iki nokta st ste koyduktan sonra deerini trnak ierisine yazarz. Firebug ile baktnzda nce <img> tagn bo greceksiniz, fakat dmelere bastkca parametreler eklendiini ve deerler atandn greceksiniz. {} parantezlerinin burada ne ii olduunu imdilik anlamak tuhaf gelebilir, fakat jQuery ile nesne oluumunu anlatrken bunu ok gzel anlayacaksnz, o yzden imdilik kalbinizi ferah tutun.
CSS kurallarn eklemek CSS kurallarn taglara nasl ekleyebileceimizi bu blmde gstereceim. Bunun iin ok basit bir metod vardr css().
218
Musa AVU
<html> <head> <title>CSS</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $("document").ready(function(){ $("h1:eq(1)").css({ background:"yellow", color:"white", textAlign:"center" }); $("h2").css({ background:"black", color:"red", textAlign:"center"
}); }); </script> </head> <body> <h1>Birinci satir</h1> <h1>Ikinci satir</h1> <h1>Ucuncu satir</h1> <h1>Dorduncu satir</h1> <h2>ve</h2> <h1>Besinci satir</h1> </body> </html> css.html
Musa AVU
219
ekil126 css() metodunun iine {} parantezini kullanarak eklemek istediiniz CSS parametrelerini ekleyebilirsiniz. h1:eq(1) yazarak sayfadaki ikinci <h1> tagyla ilem yapacam sylyorum. Firebug ile burada da kod deiikliini grebilrisiniz. jQuery ile neler yapabileceinizi az buuk gsterdim. Bunlar jQuery ile yapabileceinizin ok ufak bir blm, bundan sonraki konularda ayrntlara gireceim.
220
Musa AVU
Blm 12 jQuery Temel Bilgisi
Musa AVU
221
12.1 Nesneler ve snflar JavaScript ve jQueryde hazr metotlar olan nesneleri kullanmamz bize ok kolaylk saladn grdk. Bunu DOM teknolojisini kullanarak ya da kendi oluturduumuz snflarla yapabiliyoruz. JavaScripti anlatrken nesnelerin ve snflarn ne olduunu anlatmtm ve rneklerde vermitim. JavaScriptte anlattklarm jQueryde aynen geerlidir. jQueryde bunun dnda tanmlanm ekilde de bir nesne oluturabilirsiniz. Kurucu metoda da hi ihtiyacnz kalmaz ve nesneleri oluturmanz ok kolay olmu oluyor. jQuery, JavaScriptin bir ocuudur unutmayn bunu. <html> <head> <title>Nesne olusumu</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var x = { ad:"Perihan", yas:12, konus:function(){ alert("Zipla"); } }; alert(x.yas); x.konus(); </script> </head> <body> <h1>Nesneleri blok halinde olusturma islemi</h1> </body> </html> bloknesneolusumu.html
222
Musa AVU
ekil127 {} parantezleriyle bir blok ayoruz ve bu blok ierisinde oluturmak istediimiz nesnemizin deikenlerini ve metotlarn tanmlyoruz. Deikenleri ve metotlar tanmlarken iki nokta st ste koyuyoruz. Daha sonra deikenin deerini ya da metodun tanmlamasn yazyoruz. Deiken ve metot tanmlamalar arasn virgl ile ayryoruz. Blok tanmlamas bittikten sonra bunu bir deikene atyoruz ve bu deiken bizim nesnemiz olmu oluyor. Daha nce yaptmz css.html rneine bakarsanz orada da byle bir tanmlama yaptmz grrsnz: $("document").ready(function(){ $("h1:eq(1)").css({ background:"yellow", color:"white", textAlign:"center" });
css() metoduna verilen parametre bir nesneden baka bir ey deil. Kyaslamak asndan kurucu metodu kullanarak ve blok sistemiyle iki nesne oluturmak istiyorum: <html> <head> <title>Nesne Erisimi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> function Kisi(ad, yas){ this.ad = ad; this.yas = yas; }; var x = {
Musa AVU
223
ad: "Burhan", yas: 43 }; var y = new Kisi("Fevziye", 56); alert(x["yas"]); alert(y["ad"]); </script> </head> <body> <h1>Nesne bolumlerine erisim</h1> </body> </html> nesneerisimi.html
ekil128 x ve y nesnelerin deikenlerine ya da metotlarna farkl olarak keli parantezler sayesinde de eriim salayabiliyoruz. jQueryde bu tr eriimleri ok greceksiniz.
12.2 Fonksiyon ve metotlar Fonksiyonlarn ve metotlarn neler olduunu JavaScriptte grdk. Fonksiyonlar iki eit arabiliyoruz. Birincisi fonksiyon dorudan aryoruz, ikincisi fonksiyon referansyla aryoruz. jQueryde referans ile
224
Musa AVU
arma ok kullanlmaktadr. JavaScriptte dorudan arma daha ok kullanlyor. ki arma eklinin olduu bir rnei verirsem daha iyi anlalacaktr: <html> <head> <title>Fonksiyon cagirma</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> function cikti(){ $("#cikti").html("fonksiyon cikti()"); } $(document).ready(function(){ // cikti(); $("#b1").click(cikti); }); </script> </head> <body> <h1>Fonksiyon cagirma</h1> <button id="b1"> Tikla </button> <div id="cikti"> </div> </body> </html> fonksiyon.html
Musa AVU
225
ekil129 cikti() fonksiyonunu click() metodunun ierisinde parantez olmadan aryoruz. Bu arma ekli referans ile arma eklidir. cikti(); eklindeki arma ekliyse dorudan arma eklidir. Kafanza mutlaka taklmtr neden baz yerlerde funktion yazyor ve baz yerlerde funktion() yazyordur diye. funktion() olarak tanmlanan fonksiyonlar anonim fonksiyonlardr. Bu fonksiyonlar sadece o yerde kullanlmaktadr. Anonim fonksiyonlar deikenlere atayabiliriz veya buradaki gibi metotlara parametre olarak verebiliriz.
Callback ve i fonksiyonlar jQueryde i fonksiyonlar ok kullanlmaktadr. fonksiyonlar, bir fonksiyonun iinde olan baka fonksiyonlardr. Callback fonksiyonlarda genelde i fonksiyonlarla beraber kullanlmaktadr. <html> <head> <title>Callback</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>Callback</title> <script type="text/javascript"> function benimFonksiyon(icerik){ $("#cikti").html(icerik); } function getText(metin){
226
Musa AVU
return function(){ benimFonksiyon(metin); }; } $(document).ready(function(){ $("#b1").click(getText("Ormanlik")); $("#b2").click(getText("Gul bahcesi")); }); </script> </head> <body> <h1>Callback</h1> <button id="b1"> Tikla </button> <button id="b2"> Tikla </button> <div id="cikti"> </div> </body> </html> callback.html
ekil130 $("#b1").click(getText("Ormanlik")); kodunda click() metodunun parametresine, referans ierikli bir fonksiyon yazmak yerine dorudan arlan
Musa AVU
227
bir fonksiyonun yazldn gryorsunuz. getText() fonksiyonu aslnda ieriinde benimFonksiyon() fonksiyonun referansn iletmektedir, nk fonksiyon() olarak tanmlanan anonim fonksiyonlarn bir baka zellii tanmlandklar yerde referans zellii tamalardr.
queue() ve dequeue() Fonksiyonlar sral olarak armak istiyorsak queue() ve dequeue() fonksiyonlar yardmmza koacaktr. queue() ve dequeue() fonksiyonlarn kullanmadan nce fonksiyonlar normal yol ile aran bir rnek gstermek isityorum ki queue() ve dequeue() fonksiyonlarn alma prensiplerini daha iyi anlam olursunuz: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery ile animasyon</title> <script type="text/javascript"> $(document).ready(function(){ $("*").css({ background: "#ecaae2", color: "#1e1e1e" }); $("#resim1").css({ position: "absolute", left: "20px", top: "160px" }); $("#resim2").css({ position: "absolute", left: "450px", top: "60px" }); $("#b1").click(function(){ $("#resim1").animate({ left: '+=200px' }, 2000); $("#resim1").animate({ top: '300px' }, 600); $("#resim1").slideUp("slow"); $("#resim1").slideDown("slow");
228
Musa AVU
$("#resim1").animate({ left: '20px', top: '160px' }, 700); }); $("#b2").click(function(){ $("#resim2").animate({ left: '+=200px' }, 2000).animate({ top: '300px' }, 600).slideUp("slow").slideDown("slow").animate({ left: '400px', top: '60px' }, 700); }); }); </script> </head> <body> <h1>jQuery ile animasyon</h1> <img src="resim1.jpg" id="resim1" style=""/> <img src="resim2.jpg" id="resim2" style="position:absolute;left:20px;top:60px"/> <button id="b1"> Tikla </button> <button id="b2"> Tikla </button> </body> </html> animasyon.html
Musa AVU
229
ekil131 animate() metodu verilen koordinatlar dorultusunda nesneyi kaydrmaktadr. Yaptm sadece animasyon metotlarn ard arda armak oldu. aracam fonksiyonlar bir yna koymak istersem queueu() metodunu kullanmak zorundaym. Yndan arlacak fonksiyonlarda dequeueu() metoduyla arrm. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>queue() ve dequeue()</title> <script type="text/javascript"> $(document).ready(function(){ $("*").css({ background: "#ab1b52", color: "#1e1e1e" }); $("#resim1").css({
230
Musa AVU
position:"absolute", left:"20px", top:"160px" }); $("#resim2").css({ position:"absolute", left:"450px", top:"60px" }); $("#resim1").queue(function(){ $(this).slideUp("slow"); $(this).slideDown("slow"); }); $("#resim1").queue(function(){ $(this).fadeOut("slow"); $(this).fadeIn("slow"); }); $("#resim2").queue(function(){ $(this).fadeOut("slow"); $(this).fadeIn("slow"); }); $("#b1").click(function(){ $("#resim1").dequeue(); }); $("#b2").click(function(){ $("#resim2").dequeue(); }); }); </script> </head> <body> <h1>jQuery ile animasyon</h1> <img src="resim1.jpg" id="resim1" style=""/> <img src="resim2.jpg" id="resim2" /> <button id="b1"> Tikla </button> <button id="b2"> Tikla
Musa AVU
231
</button> </body> </html> kuyruk.html
ekil132 queueu() metoduna fonksiyonlar koyarken nce bir anonim fonksiyon tanmlyoruz, sonra this referansyla armak istediimiz metodu parametresiyle yazyoruz ve noktal virgl ile bitiriyoruz. ths referans animasyon gsterisi yaplacak resme iaret etmektedir.
12.3 Diziler Diziler, ayni verileri kayt ederlerse ok avantajldr. Dizilerdeki zellik, bir isim ve bir belirte ile dizi ierisindeki deerlere ulaabilmemizdedir. simden sonra keli parantez ierisine belirtele koyarak bunu yapabiliriz. new Array() olarak nasl bir dizi oluturduumuzu JavaScript blmlerinde gsterdim. Baka bir usl ise eittir iaretinden sonra keli parantez kullanmaktr.
232
Musa AVU
<html> <head> <title>Dizi olusumu</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var a = new Array(); var b = [5, 89, 43, 33]; alert(a.length); alert(b.length); }); </script> </head> <body> </body> </html> diziolusumu.html
ekli133 b deikenine hazr verileri keli parantez ierisinde atadm ve uzunluunu alert() fonksiyonuyla ekranda gsterttim.
Dizilere eriim Dizilerdeki en byk avantaj, dizilerin iindeki deerlere dngler vastasyla ulaabilinmesidir. <html> <head>
Musa AVU
233
<title>Dizi erisim</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var sayilar = new Array(); var sayicek = [1, 2, 3, 4, 5, 6, 7]; $(document).ready(function(){ for (i = 0; i < 7; i++) { sayilar[i] = Math.round(1 + Math.random() * 148); } for (i in sayilar) { $("#cikti").append("Sayi " + sayicek[i] + ": "); $("#cikti").append(sayilar[i] + "<br>"); } }); </script> </head> <body> <h1>Sayilar</h1> <div id="cikti"> </div> </body> </html> dizierisim.html
ekil134
234
Musa AVU
Bu rnekte iki dizi oluturdum. Birincisini kurucu metot ile oluturdum. kincisini de keli parantezle. Birinci dngde tesadf olarak 7 say seilmektedir. kinci dngdyse append() metoduyla birinci dngde seilen 7 sayyla sayicek dizisi birletirilerek taraycda gsterilmektedir. each() jQuery dnglerin zahmetinden kurtarmak iin each() fonksiyonunu bize sunuyor. Jeneriklik zellii gsteren each() fonksiyonuyla dizilere eriim salayabildiimiz gibi nesnelere de eriim salayabilmekteyiz. <html> <head> <title>each()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> function isim() { this.yas = 15; this.ad = "Tarik"; } var sayi=[1,2,3,5,7,11,13,17,19,23,29]; var kisi = new isim(); $(document).ready(function(){ jQuery.each(sayi,function(belirtec,value){ $("#cikti1").append((belirtec + 1),". Sayi: ", value, "<br />"); }); jQuery.each(kisi,function(belirtec,value){ $("#cikti2").append("Belirtec: ", belirtec,", Deger: ", value, "<br />"); }); }); </script> </head> <body> <h1>Sayilar</h1> <div id="cikti1"></div> <h1>Nesne</h1>
Musa AVU
235
<div id="cikti2"></div> </body> </html> each.html jQuery.each() fonksiyonu bizden iki parametre beklemektedir. Birinci parametre eriim salamak istediimiz dizi ya da nesne. kinci parametre olarak bir callback ya da anonim bir fonksiyon giriyoruz. Biz ikinci parametrede ne yaplacan ifade ediyoruz. belirtec deikeni dizideki ya da nesnedeki belirteci belirtmektedir ve value ise belirtilmektede olan sradaki elemann deerini vermektedir. jQuery.each(sayi,function(belirtec,value){} yapsn u ekilde dnebilirsiniz: for (belirtec=0;belirtec<sayi.length;belirtec++) Bu ok karmak ben bunu for dngsyle daha kolay yaparm derseniz, doru dersiniz, fakat nesnelere ulamada ya da belirtecin bir tam say olmad durumlarda each() fonksiyonu ok kolaylk salar. rnein kisi nesnesinin deikenlerine ulamak gibi. each() fonksiyonu, nesne elemanlarn sanki bir dizi elemanym gibi ileme sokar ve bize iletir. Nesnelerde belirtecler birer metindir.
236
Musa AVU
ekil135
12.3 jQuery alan jQuery Frameworkunda tm genel deikenler jQuery alan denilen bir yerde kayt ediliyor ve bu deikenlere, jQuery() veya $() eklinde ulaabilirsiniz.
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery() ve $()</title> <script type="text/javascript"> $(document).ready(function(){ $("#resim1").click(function(){ jQuery("#resim").fadeOut();
Musa AVU
237
}); jQuery("#resim2").click(function(){ $("#resim").fadeIn(); }); }); </script> </head> <body> <h1>jQuery() $()</h1> <img src="resim1.jpg" id="resim" style=""/><hr /> <button id="resim1"> Tikla </button> <button id="resim2"> Tikla </button> </body> </html> jqueryalan.html $() ve jQuery() eklindeki tanmlamalar arasnda hi bir fark yok. Parametrelerine bakarsanz bir selektr kullanldn greceksiniz. kinc bir parametre daha verebilirsiniz fakat bunu baka bir rnekle gstermek istiyorum. fadeIn() ve fadeOut() metodlar animasyon eklinde gsterilen nesneyi yok eder ve gsterir. Animasyonla ilgili metodlar rneklerimde imdiden kullanyorum nk grsel olarka rnekler insanlarn beyninde daha iyi kalrlar. Yalnz animasyon konusunu daha sonra ayryeten ele alacam.
238
Musa AVU
ekil136 $() ve jQuery() tanmlamalarnn ikinci parametrelerinde kayt edilecek verilerin contextlerini gireriz, yan verilerin kayt edilecek blgeleri diyebiliriz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery Context</title> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ $("#cikti").html(jQuery("input:text", document.forms[0]).val()); }); $("#b2").click(function(){ $("#cikti").html(jQuery("input:text", document.forms[1]).val()); }); }); </script> </head> <body> <h1>jQuery Context</h1> <form> <input/> </form> <form> <input/> </form><hr/> <button id="b1"> Tikla </button> <button id="b2"> Tikla </button> <div id="cikti"> </div> </body> </html> jquerycontext.html
Musa AVU
239
ekil137 kinci parametreyi girmezsek veriler bulunduumuz web sayfasnda saklanrlar. Verdiimizde bir DOM ya da jQuery nesnesi olutururuz ve veriler bu nesnelerde saklanrlar. document.forms[0] denildiinde, context sayfadaki birinci Formdur. val() metoduda seilmi nesnenin ieriindeki deeri iletir. Birinci Tikla dmesine baslnca birinci Form seilir, ikinci Tikla dmesi tklannca ikinci Form seilir ve bunlar sadece ikinci parametre sayesinden ayrlmaktadr. Dinamik element jQueryde taglar dinamik olarak oluturabilirsiniz. String formatnda oluturduunuz veriyi appendTo() metoduyla her hangi bir taga ekleyebilrisiniz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery() ve $()</title> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ var sayi = Math.random(); $("<tr><td>Sayi</td><td>" + sayi + "</td></tr>").appendTo("#t1"); }); }); </script> </head>
240
Musa AVU
<body> <h1>jQuery() ve $()</h1> <table id="t1"/> <button id="b1"> Tikla </button> </body> </html> jqueryelemanolustur.html
ekil138 Tkla dmesine bastmda Tkla dmesinin altnda bir satr oluacaktr ve bu oluan satr aslnda bir tablo satrdr. Her tklamada yeni bir tablo satr oluturuyor. Firebug ile bu oluumu daha iyi izleyebilirsiniz. $() tanmlamasnn iine yazlan String HTML kriterlerine uygun olmaldr. Diyelim ki bu rnekteki bir <td> tagn kapatmadnz o zaman almaz. Ya da bir <div> tagnn iine bir <body> tag koymaya alrsanz kod yine almayacaktr. Parametrelerdeki detaylarla ilgileniyorsanz http://api.jquery.com/jQuery/ sayfasn inceleybilirsiniz. Ben sadece ok kullanlan yntemlere deiniyorum.
Musa AVU
241
ekil139
eq() DOM elementleriyle ilem yapabilmek iin eq() ok yararl bir metottur. Metodun parametresi, ayn guruptaki elementlerin belirtecidir. Burada <img> tag ayn gurup olmu oluyor ve i deikeniyle eq() metodundan yararlanarak tm <img> taglarn CSS zelliklerini deitirmi oluyoruz. <html> <head> <title>eq()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ for (i = 0; i < $("img").length; i++) { $("img").eq(i).css("left", 50 + (i * 200) + "px");
242
Musa AVU
$("img").eq(i).css("top", 50 + (i * 80) + "px"); } }); </script> <style type="text/css"> img { position: absolute; } </style> </head> <body style="text-align:center;font-size:12px"> <img src="krom.jpg" /><img src="kiristal.jpg" /><img src="krom.jpg" /><img src="kiristal.jpg" /> </body> </html> eq.html
ekil140 length deikeniyle sayfadaki <img> taglarn saysnn ne kadar iletildiine dikaat edin.
get()
Musa AVU
243
DOM elementlerine ulamann bir baka yoluda get() metodunu kullanmaktr. DOM nesnelerine dogrudan eriebilmek iin bu yntem ok uygundur. get() metoduyla $() parantezinde belirtilen tm taglar elde ederiz. <html> <head> <title>get()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var resim = $("img").get(); for (i = 0; i < resim.length; i++) { resim[i].style.left = 50 + (i * 200) + "px"; resim[i].style.top = 50 + (i * 80) + "px"; } }); </script> <style type="text/css"> img { position: absolute; } </style> </head> <body style="text-align:center;font-size:12px"> <img src="kiristal.jpg" /><img src="krom.jpg" /><img src="kiristal.jpg" /><img src="krom.jpg" /> </body> </html> get.html
244
Musa AVU
ekil141 get() metoduyla resim deikenine sayfadaki tm <img> taglarn DOM elementi eklinde aktarm oldum. eq() metoduyla jQuery nesnesi zerinden ularken get() metoduyla dogrudan DOM elementlerine ulaabilinmektedir.
index() index() metoduyla bir elementin sayfadaki pozisyonunu bulabiliriz. <html"> <head> <title>index()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("img").css("width", "250px"); $("img").click(function(){ var index = $("img").index(this); $("#cikti").text("belirtec " + index); }); }); </script> </head>
Musa AVU
245
<body style="text-align:center;font-size:12px"> <img src="krom.jpg" /><img src="kiristal.jpg" /><h1 id="cikti"></h1> </body> </html> belirtec.html
ekil142 index(this) ifadesindeki this tetikleyici nesne demektir. Ben ikinci resime tkladmda buradaki tetikleyici ikinci resim olmu oluyor. text() metoduyla cikti idsine sahip <h1> tagndaki yazy belirtec 1 olarak deitirebildim.
data() ve removedata() Baz durumlarda zel bir element iin web sayfasnda ek bilgiler kayt etmek isteyebilirsiniz. data() metodu bize bu olana tanmaktadr. <html> <head> <title>Veri Kayiti</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(e){
246
Musa AVU
var deger; switch ($("button").index(this)) { case 0: deger = $("img").data("bilgi"); break; case 1: $("img").data("bilgi", "Bu bir deger"); deger = $("img").data("bilgi"); break; case 2: $("img").removeData("bilgi"); deger = undefined; break; } $("span").text("" + deger); }); }); </script> </head> <body> <h1>Veri Kayiti</h1> <img src="resim1.jpg"><hr/> <button> Metainfo ojlustur </button> <button> Metainfo olustur ve deger ata </button> <button> Metainfo sil </button> <h2>Metainfo degeri: <span></span>.</h2> </body> </html>
Musa AVU
247
ekil143 data() metodunun birinci parametresi anahtar kelimedir, ikinci parametreyse saklanacak olan deerdir. undiefined terimi tanmlanmam anlamna gelmektedir. removedata() metoduylada, data() ile oluturulan veri silinebilmektedir.
Framework akmas jQuery ile baka bir Frameworku ayn kod ierisinde kullanma isteinde bulunabilirsiniz. Byle durumlarda baka Framework, jQuery ile ayn alan kullandndan akmalar ortaya kabilir. rnein Prototype Frameworku jQuery gibi $ iaretini kullanmaktadr. Bunu zebilmek iin noConflict() metodunu kullanabiliriz. <html> <head> <title>jQuery noconflict/title>
248
Musa AVU
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var $degisken = jQuery.noConflict(); $degisken(document).ready(function(){ jQuery("img").css({ border: "9px outset", cursor: "move", opacity: 0.5 }); }); </script> </head> <body> <img src="resim.jpg"> </body> </html> jquerynoconflict.html noConflict() metodu sayesinde $ iareti yerine $degisken kullanlabilir. $ jQueryde noConflict() metoduyla kapanm oluyor. Yaplmas gereken yukardaki gibi jQuery.noConflict() tanmlanmak istenilen deikene atanmasdr. Atanan deikeni $ yerine kullanbilirsiniz. 12.4 Prototyping ve extend() JavaScripti anlatrken prototyping sistemini anlatmtm. Tekrardan jQuery ile bu konuya deinmek istiyorum. JavaScript dili, daha ncede bahsettiim gibi nesneye dayal bir proglramlama dili deildir, fakat yine de bir nesne oluturmanza izin vermektedir. jQuerynin bir stunu bu olutururken dier stununu prototyping oluturmaktadr. Prototyping ile var olan nesnelere veriler ekleyerek yeni nesneler oluturabiliyoruz. Plugin konusunu ancak bu konuyu iyi anlarsanz anlayabilirsiniz. Prototypingi, nesneye dayal programlamadaki kaltma benzetebilirsiniz. <html> <head> <title>Prototyping</title> <script type="text/javascript" src="jquery-1.4.1.min.js"> </script> <script type="text/javascript"> var x; function Adam(ad) {
Musa AVU
249
this.ad = ad; } $(document).ready(function() { x = new Adam("Ahmet"); $("#cikti").html(x.ad); Adam.prototype.yas=212; $("#cikti").append(x.yas); var y = new Adam("Mehmet"); y.yas = 100; $("#cikti").append(y.yas); } ); </script> </head> <body> <div id="cikti"></div> </body> </html> prototyping.html
ekil144 var x ile bir deiken tanmladm ve function Adam(ad) derken this anahtar kelimesini kullanarak bir nesne oluturdum. new oepratr ile oluturduum Adam nesnesini x deikenine atadm. x nesnesinin ad parametresini html() fonksiyonuyla cikti idsine sahip <div> tagna ekledim. html() fonksiyonu idsi verilen tagn html ksmn verilen parametreye gre deitirir. append() fonksiyonuysa var olan html metinine ekleme yapar. Adam nesnesinden sonra
250
Musa AVU
nokta koyarak protoype yazdm ve ondan sonra da yas yazarak bu deikene 212 deerini atadm. Bylelikle var olan Adam nesnesine bir yas deikeni eklemi oldum. Prototypinge gre bundan sonraki oluturulan Adam nesnelerinde yas deikeni olacaktr.
12.5 extend() extend() fonksiyonu kullanlan nesneyi gelitirmektedir. Aadaki rnekte jQuery nesnesi gelitirilmitir. <html> <head> <title>extend()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> jQuery.extend({ sayi: function(){ return Math.random(); } }); $(document).ready(function(){ $("#cikti").text(jQuery.sayi()); }); </script> </head> <body> <div id="cikti"> </div> </body> </html> extend1.html extend() fonksiyonunda parametre olarak bir nesne oluturuyorum ve bu nesnedeki fonksiyon jQuerynin bir metodu olmu oluyor.
Musa AVU
251
ekil145 jQueryyi gelitirmek normalde uygulanmayan bir yntemdir ve daha ok pluginler gelitirilir. Bunun iin bir rnek vermek istiyorum. Vereceim rnek plugin deil. Sadece o yne giden bir rnek. <html> <head> <title>extend()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> jQuery.fn.extend({ mavi: function(){ return this.each(function(){ this.style.color = "blue"; }); }, kirmizi: function(){ return this.each(function(){ this.style.color = "red"; }); }, yesil: function(){ return this.each(function(){ this.style.color = "green"; }); }
252
Musa AVU
}); $(document).ready(function(){ $("h1").mavi(); $("h2").yesil(); jQuery("h3").kirmizi(); }); </script> </head> <body> <h1>Ben</h1> <h2>burada</h2> <h3>ne</h3> <h2>yapiyorum</h2> <h3>sen</h3> <h1>bunu</h1> <h2>biliyor musun?.</h2> </body> </html> extend2.html
ekil146
Musa AVU
253
jQuery nesnesinden sonra fn kullanyoruz buna plugin konusunda deineceiz ve fnden sonra extend() fonksiyonunu kullanarak jQuerynin altna organize edilmi nesnelerine metodlar ekleyebiliyoruz. extend() fonksiyonuna eklemek istediimiz metodun adn yazyoruz ve iki nokta st ste koyarak o fonksiyonun ne yapacan tanmlyoruz. Mesela ben bir metod iin mavi yazdm ve fonksiyonun ne yapacan iki nokta st steden sonra tanmladm. Buradaki each metodunu hatrlayacaksnz, dizilere ve nesnelere erimek iin kullanlyor. Tek parametre kullanldnda this ile gsterilen tm nesnelere eriim salanmatakdr. mavi() fonksiyonu rnekte <h1> tag iin kullanlmtr ve each() fonksiyonu tm <h1> taglarna erimektedir. Ben ve bunu metinleri bu yzden mavi olarak ekrana gelecektir. Tanmladmz metotlar kullanmak ok kolaydr. Noktadan sonra sadece metodun adn yazyoruz ve parantezi kapatp ayoruz.. Kitabn burasna geldiyseniz, artk sizin elinize ok az kii su dkebilir ve siz Trkiyenin sayl jQuery uzmanlarndan olmu oluyorsunuz. Kimsenin dkememesi iin kitab ltfen sonuna kadar almaya devam edin.
254
Musa AVU
Blm 13 Web sayfasnda belirli yeleri seebilme
Musa AVU
255
13.1 Selektrler Selektr, websayfasndaki aa yapsndaki elementlerin seilmesidir. jQueryde bir ok ortamda temel selektrler, dier adyla temel seiciler kullanlmaktadr. Bunlar CSSdeki selektrlerle ayndr. Eer CSS ile tanklnz varsa bu selektrler ok tandk gelecektir. Tanmyorsanz, problem deil, nk ben imdi size tantacam. Aadaki rnekte zamanla kullandmz selektrleri bir rnekte topladm: <html> <head> <title>Temel Selektorler</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("*").css("color", "magenta"); $("#b1").css("border", "16px solid blue"); $("hr").css({ 'background-color': 'grey', 'height': '7px', 'width': '400px' }); $(".sinif").css("fontSize", "22px"); $(".sinif1.sinif2").css({ 'background-color': 'yellow', 'color': 'red', 'fontSize': '30px' }); $("div,p,h1").css("border", "3px solid gray"); }); </script> </head> <body> <h1>Temel Selektor</h1> <span class="sinif1">Bir Logo</span> <img src="selektor.jpg" id="b1"/><hr/> <div class="sinif2 sinif2"> Ne haber? </div> </body>
256
Musa AVU
</html> selektorler.html
ekil147
$(*) eklindeki bir selektr tm taglara eriim salamaktadr. Ben bu ekilde tm taglarn renklerini CSS kullanarak deitirmi oldum. Yldz karakteri hepsi demektir. $(#b1) ile belirli bir tag seebiliyorum, buradaki # iareti belirli bir tag olduunda kullanlr ve taglardaki id parametresinin deeri # iaretinden sonra yazlr. $(hr) eklindeki bir kullanm tm <hr> taglarna eriim salamaktadr. Yldzdan farkl olarak bir gruplama sz konusudur. $("div,p,h1") kullanmyla parantez ierisinde verilen tag gruplarna eriim salamaktadr. $(".sinif") kullanmnda tanmlamadan nce bir nokta kullandm. Nokta, bize class parametresi ieren taglara erimemiz iindir. $(".sinif1.sinif2") olarak tanmlama yaptmzda snf ierisindeki bir snfa erimi oluyoru ki bunu class=sinif1 sinif2 biiminde alglayabilirsiniz. Selektrleri sadece bu ekilde kullanmyoruz. leri dzeyde kullanmak istersek, bir ka kombinasyonla bunu yapabiliriz. Kombinasyonlu selektrleri aadaki rnekte verdim ve uzun bir rnek oldu, nk tm selektr tiplerini tek bir rnekte topladm. sterseniz rnein blmlere blebilirsiniz. Bu rnei anlarsanz selektrleri ok iyi anlamsnz demektir.
Musa AVU
257
<html> <head> <title>Duzen Selektor</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("h1 div").css({ border: "1px magenta", background: "blue", color: "white", textAlign: "center" }); $("div span").css({ border: "2px green", background: "yellow", color: "white" }); $("ul li").css("color", "blue"); $("p > img").css({ border: "2px solid yellow", width: "100px" }); $("label + input").css("border", "1px solid blue"); $("#id1 ~ div").css("background", "gray"); }); </script> </head> <body> <h1> <div> Ankara </div> </h1> <ul> <li> Konya </li> <li> Danimarka </li> <li> Sivas </li>
258
Musa AVU
</ul> <div> <span>Belcika</span> </div> <ol> <li> Tahta </li> <li> Ucak </li> <li> Buraya tikla </li> </ol> <form> <label> Name: </label> <input name="ad" /> <label> Email: </label> <input name="email" /><input type="submit" /> </form> <p> <img src="selektor.jpg"/> <div> Logo </div> </p> <span id="id1">Hadi ya</span> <div> Nerede </div> <div> Gercekten mi <div> yaptin </div> </div> <span>Burada</span> <div> oluyorum
Musa AVU
259
</div> </body> </html> duzenselektor.html
ekil148 $("h1 div")> kullanm <h1> tagnn bir altnda olan <div> taglarna eriim salamaktadr. $("p img") kullanm <p> ata tagnn <img> ocuk taga eriimi salamaktadr. $("label + input") kullanm <label> ve <input> taglarnn ard arda kullanld durumlarda eriim salanmaktadr. $("#id1 ~ div") kullanm #id1 idli tagdan sonra gelen tm <div> taglar iin geerlidir. ~ iareti ile bu ilemi yapabiliyoruz.
13.2 Filtreler Temel filtreler
260
Musa AVU
Filtreler, jQueryide iki nokta st ste kullanlarak gruplar oluturulabiliyor. lk aamada temel filtreleri gstermek istiyorum ve temel filtrelerin hepsini tek bir rnekte toplayarak bunun daha iyi anlalacandan eminim. rnek yine bira uzun gelebilir. Anlalmas ise ok kolaydr: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $(":header").css({ background: 'black', color: 'white' }); $("td:even").css({ color: 'yellow' }); $("td:odd").css({ color: 'gray' }); $("tr:odd").css({ fontSize: '20px' }); $("tr:first").css({ fontSize: '14px' }); $("td:lt(2)").css({ background: '#aaa' }); $("td:gt(3)").css({ background: '#ff0000' }); $("td:eq(2)").css({ color: 'red' }); }); </script> </head> <body> <h1>Baslik I</h1> <h2>Baslik II </h2> <table> <tr> <td>1</td>
Musa AVU
261
<td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> temelfiltreler.html
ekil149 Kodu ilk filtreden incelemeye balyoruz. $("tr:first") kullanmnda grld gibi tr ile first arasnda iki nokta st ste kullanlmtr. Burada diyoruz ki: <tr> tagnn ilk alt tagna eri, nk first kullanlmtr ve first ilk demektir. first yerine last kullansaydnz son alt tag olacakt. $("td:even") ile <td> tag 2ye blnebilen bir sayysa ileme koy anlamn tamaktadr. <table> tagnn oluturduu tabloyu dnn. <td> tag birinci stun ise rnekte olduu gibi
262
Musa AVU
ileme konuyor ve yaz sar oluyor.odd anahtar kelimeside even anahtar kelimesinin tam tersine 2ye blnemeyen saylarda geerlidir. lt(2) ile 2 saysndan kk olanlar ileme sokuluyor. gt(3) ise 3 saysndan byk olanlara iaret ediyor. eq(2) ise 2 saysna eit olanlara iaret etmektedir.Dikkat edilmesi gereken nokta jQuery sfrdan saymaya balyor. $(":header") kullanmnda iki nokta st steden nce hi bir anahtar kelime kullanlmam. Bu gibi durumlarda kategorize edilmemektedir ve rnektede olduu gibi tm headerler yani tm balk taglar ileme konulmaktadr. Parametre filtreler jQuerydeki kullanl filtreler parametre filtreleridir. Regular Expression gibi kullanaiblirsiniz ve Reqular Expression gibi karmak bir yapya sahip olmak yerine ok basit bir yapya sahiptirler. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("[target]").css({ background: 'cyan' }); $("[src$=png]").css({ height: '250px' }); $("[target=ortam]").css({ color: 'white' }); $("[target^=blog]").css({ color: 'yellow' }); $("[target*=alternatif]").css({ background: 'gray' }); }); </script> </head> <body> <a href="http://www.google.com">link1</a> <br/> <a href="http://www.musa-cavus.com" target="ortam">link2</a> <br/>
Musa AVU
263
<a href="http://www.hotmail.com" target="ortam">link3</a> <br/> <a href="http://www.facebook.com" target="blog">link4</a> <br/> <a href="http://www.facebook.com.tr" target= "blogalternatif">link5</a> </body> </html> parametrefltre.html
ekil50 Parametrik filtrelerde parametreyi keli parantezin ierisine yazyoruz. $("[target]") eklindeki bir kullanmla diyoruz ki parametresi target olan taga eriim salansn. ("[target*=alternatif]") kullanmndaki src parametresinin yan sra yldz kullanld iin src parametresinin deerinin her hangi bir yerinde alternatif kelimesi varsa o tag ileme konur. Yldz yerine $ iareti kullanldnda deerin iinde en sonda gelmesi gerekiyor ^ iareti deerin banda veriyi istemektedir ve son olarak ! kullanlsayd veri parametre deerinde olmamas gerekiyordu ki ancak o zaman o parametrenin bulunduu taga eriim salanrd. Filtrelerle selektrleri de kombine edebiliriz. Bunun iin ksa bir rnek hazrladm:
264
Musa AVU
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("td:[id]").css({ background: 'green' }); }); </script> </head> <body> <table> <tr><th id="h1">1</th><th id="h2">2</th></tr> <tr><td id="d1">icerik 1</td><td id="d1">Icerik 2</td></tr> </table> </body> </html> parametrefiltre2.html
ekil151
Musa AVU
265
rnekte bilmemiz gereken tek bir satr var, hatta o satrda trnak ierisinde kullanlan mant anlamamz yeterlidir. $("td:[id]") ile <td> tagnda id parametresi geliyrosa o taga eriim salanmaktadr. ocuk filtreler Bu jQuery o kadar kapsaml ki oluk ocuklada urayor. ocuk filtreler, ebeveynlerden ynlendirilerek kullanlmaktadr. lk ocuk, ikinci ocuk element gibi zellikler uygulayabilirilz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("div:nth-child(2)").css({ background: 'red' }); $("p:first-child").css({ color: 'magentha' }); $("p:last-child").css({ color: 'blue' }); }); </script> </head> <body> <div> 1 <p> 2 <div> 3 </div> </p> 4 <p> 5 </p> 6 </div> </body>
266
Musa AVU
</html> cocukfiltre.html
ekil152 $("p:last-child") kullanmyla <p> tagnn ilk ocuuna eriiyoruz, last-child dediimizde son ocuk oluyor. div:nth-child(1) dediimizde <div> tagnn ikinci ocuuna eriim salanm oluyor. Saysayl parametre bize ocuklar arasndaki sralamay veriyor.
Form fltreleri Form filtresi demekle, belirtli bir anahtar kelimesiyle formdaki bir elemente ulamaktr. Bu konu ikiye ayrlmaktadr, Form iin filtreler ve form filtreleri. Form iin filtrelere rnek verecek olursak, input, text, password, submit, checkbox. Bunlarn rnekte kullan aadaki gibidir. ki nokta st ste koyuyorsunuz ve form iin filtreyi yazyorsunuz. <html> <head> <title>Form Filtresi</title>
Musa AVU
267
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $(":input").css({ border: '1px red solid' }); $(":submit").css({ background: 'red' }); }); </script> </head> <body> <form> <table> <tr> <td> Ad </td> <td> <input type="text"/> </td> <td> <input type="submit" value="OK" /> </td> </tr> </table> </form> </body> </html> formfiltresi.html
268
Musa AVU
ekil153 Form filtreler hakknda daha detayl bilgi iin jQuery sayfasna ya da dkumanna bakmay neririm. Bunun yannda bir de form filtreleri vardr. jQuerydeki bu filtreleri formlardaki elementlerin durumunu bize iletmektedir. rnein aktif olan tm elementleri semek gibi. Bu filtresnin ad enabled anahtar szcdr.
<html> <head> <title>Form filtresi 2</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("form :checkbox:first").parent().append('Bana iyi bak').css({ background: "yellow", border: "1px red solid" }); }); </script> </head> <body> <h1>Filtreler</h1> <form>
Musa AVU
269
<table width="500"> <tr> <td> </td> <td> <input type="checkbox" name="agb" /> </td> <td> </td> <td> <input type="checkbox" name="nl" /> </td> </tr> </table><i </form> </body> </html> formfiltresi2.html
ekil154
270
Musa AVU
$("form :checkbox:first").parent().append('Bana iyi bak') ile checkbox elementlerden ilk elemente ulayoruz ve onun ebeveynine append() ile bir metin yazyoruz.
Filtreleme metotlar Filtreleme metotlar, jQuerydeki filtremelerin yapt ileri yapmaktadr fakat kod ierisinde kullanm ekli farkldr. not() metodu <html> <head> <title>not filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("div").not(".kapali, #sen").css("background", "red"); }); </script> <style type="text/css"> div { font-size: 42px; border: 1px solid; width: 300px; } .kapali { background: #8f8; color: white; } #sen { background: #99f; color: yellow } </style> </head> <body> <div> Bir <span class="kapali">Yuzuk</span>, <span id="du">mu</span> istedin, <span id="sen">sen</span>
Musa AVU
271
tabi getirdim <span class="kapali">kapali</span> kutu icerisinde </div> </body> </html> notmetodu.html
ekil155 $("div").not(".kapali, #sen").css("background", "red"); derken ncelikle $("div") ile <div> tagn seiyoruz. rnekte sadece bir tek <div> tag var. not() fonksiyonuyla <div> tagna ait seilmeyecek taglar, idlerini veya classlarn yazarak belirtebiliyoruz. slice() metodu
272
Musa AVU
Basit ve etkili filtre metotlarndan biri de slice() metodudur. slice() metoduyla balang deerini vererek bir filtreleme yaplabilinmektedir. Ayn zamanda deerler aralnda filtreleyebiliyoruz.
<html> <head> <title>slice filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("span").slice(2).css("color", "red"); $("span").slice(1,3).css("background", "cyan"); }); </script> <style type="text/css"> div { font-size: 42px; border: 1px solid; width: 300px; } </style> </head> <body> <div> Bir <span>Yuzuk</span>, <span>mu</span> istedin, <span>sen</span> tabi getirdim <span>kapali</span> kutu icerisinde </div> </body> </html> slicefiltremetodu.html
Musa AVU
273
ekil155
filter() metodu not() metodunun tam tersidir. filter() metodunda parametre olarak verilen elementler seilmektedir. <html> <head> <title>slice filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("span").filter("#evet").css("color", "blue"); }); </script>
274
Musa AVU
<style type="text/css"> div { font-size: 42px; border: 1px solid; width: 300px; } </style> </head> <body> <div> Bir <span>Yuzuk</span>, <span>mu</span> istedin, <span id="evet" >sen</span> tabi getirdim <span>kapali</span> kutu icerisinde </div> </body> </html> filterfiltremetodu.html
Musa AVU
275
ekil156
is() filtresi boolean zelliinde bir metottur. true ya da false iletir. <html> <head> <title>is filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ if ($(this).is(":first-child")) { alert("Ilk dugme"); }
276
Musa AVU
if ($(this).is(":last-child")) { alert("Ikinci dugme"); } }); }); </script> </head> <body> <button> Tikla </button> <button> Tikla </button> </body> </html> is filtresi
ekil157 $(this) tanmlamasyla baslan button dmesine iaret edilmektedir. is() fonksiyonundaki parametreler eliinde baslan dmenin ilk dme mi yoksa ikinci dme olduu filtrelenmitir.
Musa AVU
277
Blm 14 jQuery ile CSS
278
Musa AVU
14.1 Temel bilgi CSSi nasl kullanacamz daha nceki blmlerde gstermitim. CSS ileminizi bitirdikten sonra mutlaka tm kullanlacak tarayclarda CSS kodu test edilmesi gerekmektedir, nk tarayclar ayn kod iin farkl sonular retebilirler. Bunun nedeni tarayclarn CSS ile yaplan ilemlere farkl ekilde erimeleridir. jQuery ile bu problemin byk bir blmn ortadan kaldrabilirsiniz. jQuery ile CSS kombine edilmi sayfalar en cazip olan sayfalardr. O yzden bu blm ok iyi anlamaya gayret edin ki zaten anlayacanza inaniyorum. Hani dedim bir tevik vereyim. Kitabn sonuna az kald bundan sonras hikaye demeyin, kitabn ilk satr ne kadar nemliyse son satrda o kadar nemli. lk 100 sayfay ilgin tutup son taraflarda hikaye anlatmak yerine kitab batan sona heyecanl klmay tercih ettim. Bu blmde jQuery ile CSS kullanm anlatacam. jQuerynin CSS fonksiyonlarn http://api.jquery.com/category/css/ adresinde bulabilirsiniz:
ekil157
14.2 CSS eriimi
Musa AVU
279
CSS zelliklerine eriimi bu blmde anlatacam. Standart metotlarla CSS kodunu nasl deitirebiliyoruz veya nesl yeni CSS nesneleri ekleyebiliyoruz bunlarn hepsini gstereceim.
css() metodu css() metodunu daha nce rneklerimizde sk sk kullanmtm ve imdi tekrar ele alarak detayna iniyorum. css() metodunu iki ekilde kullanabiliriz. Birinci ekildeki kullanmda verdiimiz parametreye gre deer elde ederiz. kinci kullanm ekliyse, iki parametre kullanarak CSS parametresinin deerini dzenleriz. Kullanlacak ilk parametre CSSdeki parametredir ve ikinci parametre ise onun deeridir. Birden fazla CSS parametresine deer atamak istiyorsak parametre olarak bir nesne kullanmamz gerekemketedir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>css() metodu</title> <script type="text/javascript"> $(document).ready(function(){ $("*").css({ 'backgroundColor': "yellow", color: "gray" }); $("button:first").click(function(){ $("#cikti").text($("h1:first").css("color")); }); $("button:last").click(function(){ $("h1:first").css("color", "blue"); }); }); </script> </head> <body> <h1>Hak yerde kalmaz</h1> <h1>Bu da gecer gardas</h1> <button> Renk sorgula </button> <button> Renk duzenle
280
Musa AVU
</button> <div id="cikti"> </div> </body> </html>
ekil158 css("color") ile color deikeninin deerini elde ediyoruz. css("color", "blue") ile color deikenine blue deerini atyoruz. $("*").css( ile balayan kod blmnde ise bir nesne atyoruz. Burada dikkat edilecek husus CSS deikenleriyle deerlerini iki nokta st ste ayrarak yazyoruz ve her deitirmek istediimiz deere atanacak deikeni belirttikten sonra virgl ile ayryoruz. Buraya kadar her ey ok basit, fakat ilk bakta gzkt gibi net deil, nk bir ka tuza var. CSS kodundan farkl olarak, deiken atamalar virgl ile ayrmaktadr ve atanan deer trnak ierisinde atanmaktadr, yani bir String olarak atanmaktadr. Nesne olutururken orada background-color eklinde bir tanmlama yaparken color tanmlamasnda tek trkank kullanmadan bir tanmlama yaptm. Bunu size bu iki kullanm arasndaki fark gsterebilmek iin uyguladm. Tek trnak ile yaplan tanmlamalarda CSS koduyla yaplan zde tanmlamalar
Musa AVU
281
yapabiliyoruz. Tek trkan koymadan background-color yazsaydm koddan istediklerim almayacakt. color tanmlamas yaplnca jQueryde bir nesne kullanm oluyorum ve jQuerye zg bir tanmlama yapm oluyorum.
addClass() ve removeClass() jQueryle dinamik olarak CSS snflar ekleyebilirsiniz veya silebilirsiniz. addClass() metodu snf ekler, removeClass() ise parametrede verilen snf siler. Aadaki kodda <h1> tag parametresiz ve belirli bir snfa ait deil. Ancak dmelerinden birisine baslnca bir snf eklenecek ya da bir snf silinecek. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>addClass() ve removeClass()</title> <style type="text/css"> .mavi { color: blue; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("h1:first").addClass("mavi"); }); $("button:eq(1)").click(function(){ $("h1:first").removeClass("mavi"); }); }); </script> </head> <body> <h1>Calisan demir paslanmaz</h1> <button> Sinif ekle </button> <button> Sinif sil </button> </body> </html>
282
Musa AVU
sinifeklecikar.html
ekil159
ekil159
Musa AVU
283
ekil160 Snf ekle dmesine basnca Firebugda <h1> tagna yeni bir snfn nasl eklendiini ok gzel izleyebilirsiniz. Dmelere 10 defa bassanz bile birden fazla eklenme ya da birden fazla silinme olmyacaktr.
hasClass() metodu Bir grup elementin veya bir grup tagn CSS snf var olup olmadn hasClass() ile kontrol edebiliriz. hasClass() metodunda parametre olarak test etmek istediimiz snfn adn yazyoruz. Aada mavi yazarak mavi CSS snfn kontrol ettirmi oluyorum. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>hasclass metodu</title> <style type="text/css"> .mavi { color: blue; } </style>
284
Musa AVU
</head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("h1").addClass("mavi"); }); $("button:eq(1)").click(function(){ if ($("h1").hasClass("mavi")) { $("h1").removeClass("mavi"); } }); }); </script> </head> <body> <h1>Acele ile menzil alinmaz</h1> <button> Mavi sinif ekle </button> <button> Mavi sinif sil </button> </body> </html> hasclass.html
Musa AVU
285
ekil161
toggleClass() metodu addClass() ile snf ekleyebiliyoruz ve removeClass() ile snf siliyoruz. tooggleClass() metodu bir iki metodun bir kombinasyonudur. Eer snf varsa siler, yoksa ekler. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>toggleClass() metodu</title> <style type="text/css"> .mavi { color: blue; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){
286
Musa AVU
$("h1").toggleClass("mavi"); }); }); </script> </head> <body> <h1>Bedava sirke baldan tatlidir</h1> <button> Sinif ekle/sil </button> </body> </html> toggleclass.html
ekil162 Dmeye baslnca yaz mavi oluyor ve tekrar baslnca yaz siyah oluyor. 14.3 Pozisyon belirleme metotlar Web sayfalarn oluturmada ve dinamik olarak yaplan deiikliklerdeki en byk problem elementlerin pozisyonlamasnda kmaktadr. CSSten nce grnmez HTML tablolar kullanlyordu. CSS ile bu probleme ok iyi hakim
Musa AVU
287
olabiliyoruz ve jQuery CSS ile yaplan pozisyonlamay bize metotlar halinde sunmaktadr. position() ile pozisyonlama position() metodundaki left ve top deikenleriyle pozisyonlamay ok iyi kontrol edebiliriz. left ve top deikenleri bize sorguladmz elementin pozisyonunu, o elementin parentini referans alarak iletir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>position() metodu</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ var position = $("h1:last").position(); $("#cikti").text("x: " + position.left + ", y: " + position.top); }); }); </script> </head> <body> <h1>Cok gezen cok bilir</h1> <h1>Cok bilen cok yanilir</h1> <button> Ikinci atasozun poziyonu </button> <div id="cikti"> </div> </body> </html> position.html
288
Musa AVU
ekil163
offset() ve offsetParent() metotlar position() metoduyla bir elementin pozisyonunu bulabiliyoruz da ya parentin pozisyonunu bulmak istiyorsak veyahut sayfaya gre elementin pozisyonunu bulmak istiyorsak ne edecegz? <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>offset() ve offsetParent()</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ var offset = $("h1:first").offsetParent();
Musa AVU
289
$("#cikti1").text("parent x: " + offset.position().left + ", parent y: " + offset.position().top ); var offset = $("h1:first").offset(); $("#cikti2").text( "x: " + offset.left + ", y: " + offset.top ); }); }); </script> </head> <body> <h1>Dag dag ustune olur, ev ev ustune olmaz</h1> <button>Tikla</button> <div id="cikti1"></div> <div id="cikti2"></div> </body> </html> offset.html
ekil164 offset() metodu tagn sayfadaki pozisyonunu verir. <h1> tagnn sayfadaki x koordinat 8 piksel ve y koordinat da 8 piksel olduunu gryorsunuz. Kullanm position() metodu gibidir, left ve top deikenlerini ayn ekilde kullanabiliyoruz. offsetParent() metodu ise bir nesne iletir ve ancak bu nesnenin
290
Musa AVU
left ve top deikenlerini kullanarak elementin pozisyonu hakknda bilgi alabiliriz. Aa yukar ve sa sol kaydrma ubuu Aa yukar ve sa sol kaydrma ubuunu kontrol edebilmek iin jQuery, scrollTop() ve scrollLeft() metotlarn sunmaktadr. scrollTop() ve scrollLeft() metotlarna bir parametre deeri verirsek setiimiz elementi kaydrabiliriz. Parametresiz olarak kullanrsak, kaydrlm elementin pozisyon deerlerini alrz. Sizde birilerini ya da bir eyleri oraya buraya kaydrmak istiyorsanz bu rnek tam size gredir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>scrollTop() ve scrollLeft()</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("div:eq(0)").scrollTop(45); $("div:eq(0)").scrollLeft(90); $("#cikti").text("scrollTop: " + $("div:eq(0)").scrollTop() + ", scrollLeft: " + $("div:eq(0)").scrollLeft()); }); $("div:eq(0)").css({ 'width': '400px', 'height': '100px', 'overflow': 'auto', 'position':"absolute", 'left':"20px", 'top':"100px" }); }); </script> </head> <body> <button> Kaydir </button>
Musa AVU
291
<div> <img src="birresim.jpg" alt="" /> </div> <div id="cikti"> </div> </body> </html> kaydr.html
ekil165 Kaydrma ubuklarnn ortaya kma nedeni, CSS parametresinde overflow deikenine auto deeri vermemizden kaynaklanmtr. $("div:eq(0)") tanmndaki width deeri 400 piksel ve height deeri 300 pikseldir. overflow deikenindeki auto deeri, ne zaman <div> tagnn iindeki bir element bu snrlar aarsa kaydrma ubuunu aa karmasn salamaktadr. 14.4 Ykseklik ve genilik
292
Musa AVU
Birok deiiklik iin ykseklik ve genilik nemlidir. jQuery bu elementlerin bu zellikleri iinde gerekli metotlar sunmaktadr. height() ve width() metotlar Bu iki metoda parametre verirsek, elementlerin yksekliini ve geniliini deitirmi oluyoruz. Parametresiz kullanrsak elementlerin geniliini ve yksekliini elde etmi oluruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>height() ve width()</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("img").width(1000); $("#cikti").text("Genislik: " + $("img").width()); }); $("button:eq(1)").click(function(){ $("img").height(100); $("#cikti").text("Yukseklik: " + $("img").height()); }); }); </script> </head> <body> <button>Genislik</button> <button>Yukseklik</button> <hr /><img src="birresim.jpg" /> <div id="cikti"></div> </body> </html> genislikyukseklik.html
Musa AVU
293
ekil166
ve d boyut Grntl elementlerde genilik ve ykseklik dnda kenar, ereve genilii gibi zelliklerede dikkat etmelisiniz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>Ic ve dis boyut</title> </head> <script type="text/javascript"> $(document).ready(function(){
294
Musa AVU
$("div:first").css({ 'width': '200px', 'height': '100px', 'margin': '30px', 'padding': '50px', 'border-style': 'solid', 'border-width': '5px' }); $("#cikti").html("width: " + $("div:first").width() + "<br>innerWidth: " + $("div:first").innerWidth() + "<br>outerWidth: " + $("div:first").outerWidth() + "<br>outerWidth(true): " + $("div:first").outerWidth(true) + "<br>height: " + $("div:first").height() + "<br>innerHeight: " + $("div:first").innerHeight() + "<br>outerHeight: " + $("div:first").outerHeight() + "<br>outerHeight(true): " + $("div:first").outerHeight(true)); }); </script> </head> <body> <div> jQuery </div> <div id="cikti"> </div> </body> </html> icdisboyut.html innerWidth() i genilii, outerWidth() d genilii, innerHeight() i ykseklii, outerHeight() d ykseklii deerini iletiyor. Bu metotlarda parametre olarak true verirsek, kenar kalnlnnda gz nnde bulundurulmasn istemi oluruz.
Musa AVU
295
ekil167
14.5 jQueryUInin ThemeRoller
296
Musa AVU
Bunun temelinde CSS yatmaktadr. jQuerydeki kardeler oturmular ve bizler iin kullanl CSS nesneleri oluturmular. Daha sonra bu nesneleri jQuery nesneleriyle ilikilendirmiler ve bizim haftalarca programlamamz gereken nesneleri bize hediye edivermiler. Hediyeyi bir ktphane eklinde http://jqueryui.com/ adresinde bulabilirsiniz.
ekil168 jQueryUI ile sayfanzda ok ksa srede grsel anlamda byk deiiklikler gerekletirebilirsiniz. Benim bu blmde balkta da deindiim gibi jQuery ile kullanabileceiniz temalara deinmek olacaktr. Ana sayfadaki Explore the theme gallery linkini tklarsanz ThemeRoller sayfasna gelmi olursunuz. Kendiniz tema oluturabileceiniz gibi hazr oluturulmu temalarda deiiklik yaparakta temalar oluturabilirsiniz. Alan sayfada Gallery linkini tklayn:
Musa AVU
297
ekil169 Sol taraftaki rnekleri tkladnzda canl olarak tkladnz temann sayfanza nasl etkili olabileceini grm olursunuz. Diyelim ki UI darkness temasn setik. Tklayn bu tema zerine ve tkladktan sonra onun altnda bir download dmesi var oraya tklayn:
298
Musa AVU
ekil170 Yeni sayfada jQueryUInin hangi blmlerini istiyorsanz onu seebilirsiniz ve Download dmesine tklayarak temay indirebilirsiniz. Ben hepsini seili braktm ve bilgisayarma indirdim ve alma dizinimde dosyay atm. imdi size hi bir yerde bulamayacanz kullanm gstereceim. Trkiyedeki hi bir kitapta bulamazsnzda yurt dnda da ok zor bulursunuz, ben daha grmedim. ekil169a tekrar dnersek en aada Framework Icons blm var:
Musa AVU
299
ekil171 Biraz dnce gc kullanarak bu Iconlar kendi web sayfanzda da jQuery eliinde kullanabilirsiniz. FireBug Iconuna tklayn ve her hangi bir resim sein:
300
Musa AVU
ekil172 Dzenle sekmesini sein ve <li> tag ile balayan blm kodunuza kopyalayn.
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>ThemeRoller</title> <link href="css/ui-darkness/jquery-ui-1.8.4.custom.css" type="text/css" rel="stylesheet"> </head> <script type="text/javascript"> $(document).ready(function(){ }); </script> </head> <body> <li title=".ui-icon-circle-plus" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span></li>
Musa AVU
301
<div class="ui-state-default ui-corner-all">ThemeRoller</div> </body> </html> temaroller.html
ekil173 Ek olarak bir de <div> tag oluturdum. Yaptm ok basit, ktphanedeki class adn burada kullandm. Size tavsiyem bu tr efektler oluturabilmek iin, jQueryUI sayfasna girin ve Gallery blmnden kafanza gre bir birleim sein. Daha sonra da bu gstermi olduum admlar uygulayarak sayfanza entegre edin. Greceksiniz ok ksa zamanda sayfanz yksek derecede canllk kazanacaktr. jQueryUI sayfasndaki Roll your Own sekmesini tklayarak isteinize gre de her trl efektler oluturabilirsiniz.
302
Musa AVU
Blm 15 Web sayfasnda dmler
Musa AVU
303
15.1 Dm ierii sorgulama ve deitirme HTML metinlerini deitirme ve sorgulama html() ve text() html() ve text() ile HTML metinlerini deitirebiliriz ve sorgulayabiliriz. html() ile text() arasndaki fark, html() HTML koduna gre ilem yaparken text() ieriklere normal metinmi gibi davranr. Bu fonksiyonlar parametresiz kullandmzda metin sorgulamas yapyoruz ve parametre kullandmzda metinleri deitirebiliyoruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > $(document).ready(function(){ $("button:first").click(function(){ var str = $("p:first").html(); $("#cikti").append(str); }); $("button:eq(1)").click(function(){ $("div:gt(0)").html( "<i>Yagmur yagiyor</i>"); }); $("button:last").click(function(){ $("div:gt(0)").text( "<i>Yagmur yagiyor</i>"); }); }); </script> </head> <body> <p> Benim dunyam </p> <button>html() sorgulama</button> <button>html() metini</button> <button>text() metini</button> <div id="cikti"></div> <div></div><div></div><div></div> </body> </html> htmltext.html
304
Musa AVU
ekil174
Form bilgilerini kontrol etme val() Form bilgilerine ulaabilmek iin val() fonksiyonunu kullanabiliriz. ok basit bir fonksiyondur. Parametreli kullanlnca her hangi bir forum alanna bilgi ekleyebiliriz, parametresiz kullanrsak form elementinin deerini sorgulayabiliyoruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > $(document).ready(function(){
Musa AVU
305
$("button:first").click(function(){ var str = $("input:first").val(); $("#cikti").append(str); }); $("button:eq(1)").click(function(){ var str = $("input:first").val("eklenti"); $("#cikti").text(str); }); }); </script> </head> <body> <button>Icerik sorgula</button> <button>Icerik ekle</button> <form action="" method="" accept-charset="utf-8"> <input type="text" /> </form> <div id="cikti"></div> </body> </html> val.html
ekil175
306
Musa AVU
Web sayfasna dm ekleme jQuery DOM sistemine sonradan ierik ekleyebilmemiz iin bir ka fonksiyon sunmaktadr.append() ve appendTo() ile prepend() ile prependTo() fonksiyonlaryla bu ilemi esnek bir ekilde gerekletirebiliriz. append() ile bilgiyi eklenecek yerin arkasna, prepend() ile de ekelencek yerin nne ekleyebiliyoruz. appendTo() ve prependTo() fonksiyonlarylada eklenecek yeri parametre olarak vermekteyiz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > $(document).ready(function(){ $("button:first").click(function(){ $("#cikti").append(" - append() ile eklme yapildi"); }); $("button:eq(1)").click(function(){ $("#a").appendTo("#cikti"); }); $("button:eq(2)").click(function(){ $("#cikti").prepend(" - prepend() ile ekleme yapildi "); }); $("button:eq(3)").click(function(){ $("#a").prependTo("#cikti"); }); }); </script> </head> <body> <button>append()</button> <button>appendTo()</button> <button>prepend()</button> <button>prependTo()</button> <hr /> <span id="a" style="color:white;background:red"> alpha </span> <span id="b" style="color:blue;background:yellow"> beta </span> <span id="c" style="color:green;background:lightgray"> gamma </span> <div id="cikti" style="color:yellow;background:gray"> Hedef</div> </body> </html> ekleme.html
Musa AVU
307
ekil176
ncesine ya da sonrasna dm ekleme jQuery bize baka dmlerin arkasna ya da nne dm ekleyebileceimiz metotlar sunmaktadr. Bunun iin hedef dm vermeniz yeterlidir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("#cikti").after('<span style="color:white;background:red">Arkasina</span>'); }); $("button:eq(1)").click(function(){ $("#cikti").before('<span
308
Musa AVU
style="color:red;background:yellow">Onune</span>'); }); $("button:eq(2)").click(function(){ $('<span style="color:blue;background:gray">Arkasina</span>').insertAfter('.k1'); }); $("button:eq(3)").click(function(){ $('<span style="color:blue;background:gray">Onune</span>').insertBefore('.k1'); }); }); </script> </head> <body> <button> after() </button> <button> before() </button> <button> insertAfter() </button> <button> insertBefore() </button> <hr/> <div id="cikti" style="color:red;background:yellow"> Hedef </div> <hr/><hr class='k1'/><hr/> </body> </html> afterbefore.html
Musa AVU
309
ekil177 after() metodu hedeften sonra dm eklerken before() fonksiyonu hedeften nce dm ekler. insertAfter() ve insertBefore() after() ve before() metotlarnn yaptklarn yapmaktadrlar. Arlarnda sadece kullanm tarz ayrl vardr. rnekte bu ayrlklar belirttim.
Dm kuatma jQuery ile dmleri kuatarak ocuk dmler haline getirebilirsiniz. ngilizcede kuatma kelimesinin karl wrap kelimesidir. wrap() metoduna parametre olarak beraber kuatmak istediiniz tag yazyorsunuz.. wrapAll() metodunda ise uyan tm elementlerin tek bir tag ierisine sarlmas salanmaktadr. Parametre olarak yine beraber sarmak istediimiz tag yazyoruz. <html> <head>
310
Musa AVU
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("span").wrap("<h3>"); }); $("button:eq(1)").click(function(){ $("span").wrap($("<div />")); }); $("button:last").click(function(){ $("span").wrapAll("<h1>"); }); }); </script> </head> <body> <button>wrap() HTML</button> <button>wrap() Element</button> <button>wrapAll()</button> <hr /> <span>Benim</span> <span>Ev</span> <span>Nerede</span> </body> </html> kusatma.html
Musa AVU
311
ekil178
Elementleri deitirme replaceAll() ve replaceWith() metotlaryla web sayfasndaki elementler ile deitirmek istediiniz elementi deitirebilirsiniz. replaceWith() metodu, uyan tm elementleri DOM elementleriyle deitirebilme zellii vermektedir.
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script>
312
Musa AVU
<script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("h1:first").replaceWith( "<h6>" + $("h1:first").text() + "</h6>"); }); $("button:eq(1)").click(function(){ $("<hr/>").replaceAll("br"); }); }); </script> </head> <body> <h1>Moralim cok iyi</h1> <br><button>H1 --> H6</button> <br><button>BR --> HR</button> </body> </html> degistir.html
ekil179
Musa AVU
313
Elementleri silme Eer jQuery vastasyla bir DOM aacna dinamik olarak dm ekleyebiliyorsak, mutlaka bu dmde dinamik olarak silebilme zelliine sahip olmalyz. empty() ile tm alt dmleri silebiliyoruz ve remove() ile de dmleri silebiliyoruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > var element=null; $(document).ready(function(){ $("button:first").click(function(){ $("h1").empty(); }); $("button:eq(1)").click(function(){ element=$("h1").remove(); }); $("button:eq(2)").click(function(){ $("#ekle").after(element); }); }); </script> </head> <body> <h1><div>MNOPRS</div></h1> <h1>TUVYZ</h1> <h1>Bunu bilemeyen geveze</h1> <button>empty()</button> <button>remove()</button> <button>after()</button> <div id="ekle"></div> </body> </html> bosalt.html
314
Musa AVU
ekil180 empty() yazan dmeye tkladnzda tm ieriin silindiini greceksiniz. Sayfay tekrar yklediinizde ve remove() dmesine tkladnzda yine her eyin silindiini greceksiniz. Daha sonra after() dmesine tklatnzda silinenlerin geri geldiini greceksiniz. Bunun nedeni remove() metoduyla silinen taglarn DOM objesinde saklanmasndandr.
Elementleri kopyalama Bir elementi bir yerden silerek bir baka yere aktabiliyoruz ve ayn ekilde bir elementi bir yerden silmeden baka bir yere clone() metoduylada kopyalayabiliyoruz. <html> <head>
Musa AVU
315
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var element = null; $(document).ready(function(){ $("button:first").click(function(){ element = $("img:first").clone(); $("#i2").after(element); }); $("button:last").click(function(){ element = $("img:first").clone(true); $("#i2").after(element); }); }); </script> </head> <body> <img src="birresim.jpg" width="100" id="resim"/> <br/> <button> clone() </button> <button> clone(true) </button> <div id=i2></div> </body> </html> kopya.html
316
Musa AVU
ekil181 Parametre olarak true verdimizde elemente ait olan Eventhandlerleride kopyalayabiliyoruz. Parametre olarak false yazarsa ya da hi bir parametre vermezsek Eventhandlerleri kopyalayamiyoruz. 15.2 Arama jQuery belirli bir yapy aramak iin bir ok gl metot sunmaktadr. JavaScript ve DHTMLde neredeyse arama iin hi bir fonksiyon bulunmamaktadr. jQuery bu alanda bylece byk bir g olmaktadr. lk olarak children() metodunu gstermek istiyorum: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var element=null; $(document).ready(function(){ $("span").css("height","100px"); $("button:first").click(function(){ element=$("div:first").children();
Musa AVU
317
$("#cikti").text("Cocuk elementlerin sayisi: " + element.length); for(i=0;i < element.length;i+=2) $("#i2").after(element[i]); }); $("button:last").click(function(){ element=$("div:first").children("#i1"); $("#cikti").text("Cocuk elementlerin sayisi: " + element.length); $("#i2").after(element); }); }); </script> </head> <body> <div> <span>Birinci cocuk</span><br /> <span id="i1">Ikinci cocuk</span><br /> <span>Ucuncu cocuk</span> </div> <button>Tum cocuklar</button> <button>Tek cocuk</button> <div id="cikti"></div> <hr id="i2"> </body> </html> cocuk.html
318
Musa AVU
ekil182 lk <div> taglarn arasndaki taglar sayarsak 5 tane alt tag yani 5 ocuk tagnn olduu grrz. Bu yzden Tm cocuklar dmesine dklannca Cocuk elementlerin sayisi: 5 diye bir yaz kmaktadr. children() metodunun length deikeniyle ka tane ocuk element olduunu bulabiliyoruz. kinci dmeye bastnzda element says 1 gsterilmektedir. parent() ve parents() metotlar da children() metodu gibi almaktadr o yzden onlar iin rnek vermedim. ocuk yerine ebeveyn bulunmaktadr.
Kardeleri arama Elementlerin kardeleri arasndada arama yapabiliriz. Evlat babay anladktan karde aramada ne iimiz olabilir demeyin, ailedeki tm fertlerle ilgilenmek gerekiyor. Az sonra vereceim rnek biraz uzunca olacak fakat bir o kadarda anlallmas ok kolay. Kardeler arasnda yapabileceiniz arama tekniklerinde kullanabileceiniz tm metotlar bu rnekte bulabilirsiniz. ktsna bakarak bile rnein ne demek istediini ok kolayca anlayabilirsiniz.
Musa AVU
319
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var element = null; $(document).ready(function(){ $("h1").css("font-size", "14px"); $("h1:eq(2)").css("background-color", "yellow"); $("#cikti1").text($("h1:eq(2)").next().text()); $("#cikti2").text($("h1:eq(2)").nextAll().text()); $("#cikti3").text($("h1:eq(2)").prev().text()); $("#cikti4").text($("h1:eq(2)").prevAll().text()); $("#cikti5").text($("h1:eq(2)").siblings().text()); }); </script> </head> <body> <div> <h1>Kardes1</h1> <h1>Kardes2</h1> <h1>Kardes3</h1> <h1>Kardes4</h1> <h1>Kardes5</h1> <h1>Kardes6</h1> <h1>Kardes7</h1> <h1>Kardes8</h1> </div> <hr><h3>Akrabalik</h3> <hr> <table border="1"> <tr> <td> next() </td> <td id="cikti1"> </td> </tr> <tr> <td> nextAll() </td> <td id="cikti2"> </td>
320
Musa AVU
</tr> <tr> <td> prev() </td> <td id="cikti3"> </td> </tr> <tr> <td> prevAll() </td> <td id="cikti4"> </td> </tr> <tr> <td> siblings() </td> <td id="cikti5"> </td> </tr> </table> </body> </html> kardesler.html
Musa AVU
321
ekil183 Kardes3 programda setim ve oradan itibaren dier kardelere nasl ulaldn bu programda ok gzel grebiliyoruz. next() metodu bir sonraki kardei elde etmemizi salyor. rneimizde next() metodunu arnca Kardes4 elde edildiini gryorsunuz. nextAll() metodu bulunduumuz noktadan sonraki tm kardeleri iletiyor. prev() bir nceki kardei. prevAll() metodu bulunduumuz noktadan nceki tm kardeleri ve siblings() metodu ise tm kardeleri iletiyor.
322
Musa AVU
Blm 16 jQuery ve Event
Musa AVU
323
16.1 Event Objesi JavaScripti anlatrken EventHandler blmne deinmitim. Burada jQuery ile EventHandlerleri ilemeyi anlatacam. lk konu olarakta Event. jQuerydeki Event sistemi, JavaScriptteki Event sistemini kapsamaktadr ve daha da kolalatrmtr. Bir Event objesini oluturmak jQuery ile ok kolaydr. Mesela new jQuery.Event(click) yazarak bir objeyi oluturabiliyoruz. Parametre olarak ne yapmak istediimizi iletiyoruz. <html> <head> <title>Event-Objesi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $( function(){ $("h1:first").click(function(event){ $("#cikti").html(event.type); }); } ); </script> </head> <body> <h1>Tikla beni</h1> <div id="cikti"></div> </body> </html> eventobjesi.html jQueryde EventHandlerler iin EventHelper metotlar var. jQuery.Event() eklinde bir kod yazmak yerine EventHelperleri kullanmak hayatmz ok daha kolaylatryor. Yaptm ok basittir. click() metodunu ararak bunu <h1> tagna baladm ve <h1> tagna tklannca click() metodunda belirtilen kod ilem grecektir. Bu sistemle yaplan Eventede ulaabilmekteyim. click() metodundaki anonim fonksiyona parametre olarak event yazmamz yaplan Eventi kullanmamz iin yeterlidir. event.type yazarak Eventin tipini taraycda yazlmasn istemi oldum.
324
Musa AVU
ekil184 jQuerydeki Event metotlarna genel bir bak atmak istiyorsanz http://api.jquery.com/category/events/ adresinde grebilirsiniz.
Musa AVU
325
ekil185
16.2 Event zellikleri Event objesinin birok metodu vardr ve bizim iin ok kullanldr.event.type, Event tipini bize iletmektedir. event.target Eventi oluturan DOM elementini iletiyor. event.relatedTarget fare hareketlerinde farenin daha nce hangi elementte olduunu bilmemizi salar. event.pageX ve event.pageY ile ekran koordinatlarn alrz ki Internet Explorer ile dier tarayclar arasnda normalde koordinat problemi karken jQuery ile bu problem ok kolay zlm durumundadr. Siz normal JavaScript kullanarak ekran koordinatlarn bilmek isterseniz mutlaka Internet Explorer ve dier tarayclar arasnda rakamsal farkllklar greceksiniz. imdi eventin bir ka metodunu bir uygulamada gstermek istiyorum: <html> <head>
326
Musa AVU
<title>Event-Objesi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#r1").click(function(event){ var koordinat = "( " + event.pageX + ", " + event.pageY + " )"; $("#cikti").html("e.pageX, e.pageY: " + koordinat + "<br />Event Dugumu: " + event.target.nodeName); }); }); </script> </head> <body> <table> <tr> <td> <img src="r1.jpg" id="r1"/> </td> <td id="cikti"> </td> </tr> </table> </body> </html> eventobjesi2.html
Musa AVU
327
ekil186 Resmin zerine tklannca, tklanan yer ve tklanan DOM objesindeki dm hakknda bilgi gsterilmektedir. rneimizdeki <img> tag tklanan DOM objesindeki dm olduu iin bu bilgi tarayc ekranna gelmitir.
16.3 Event durdurma Baz durumlarda gidi hatt durdurmak isteyebilirsiniz. jQuery bunun iin metotlar sunmaktadr. event.preventDefault() metodunu ararak yaplan her hangi bir Eventi durduruyorsunuz. <html> <head> <title>Event-Objekt</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); alert("Izin yok. " + event.isDefaultPrevented()); }); }); </script> </head>
328
Musa AVU
<body> <a href="http://www.musa-cavus.com">Buraya tikla</a> </body> </html> eventdurdurma.html
ekil187 event.isDefaultPrevented()) ile de durdurmann olduunu kontrol edebiliyorsunuz.
16.4 Event ortamndaki zel metotlar Bu blmde jQueryde ok esnek olan zel metotlar gstereceim.
ready() metodu Bir ok rnekte ready() metodunu kullandm grmnzdr. Ya da ksaltma olarak ${} eklinde bir kullanmn olduunu grdnz. Bir tarayc DOMunu tam kurduktan sonra o taraycdaki DOMa eriebiliriz. ready() metodu bunu kontrol etmektedir. onLoad EventHandlerini biliyorsunuzdur, bu EventHandler ready() metodu gibi gvenilir deildir. Bir ok durumda kontrol edilmeden gei salamaktadr. ready() metodu ise tam kontrol eder ve DOMa erimemizi yle salamaktadr. ready() metoduyla bir ok rnek yaptm iin burada ek olarak bir rnek gstermiyorum.
Musa AVU
329
bind() ve unbind metotlar bind() metoduyla bir Eventi bir taga her hangi bir zaman aralanda balayabilirsiniz. unbind() ile de bu balanty koparma gcnz vardr. <html> <head> <title>bind ve unbind</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ function info(event){ $("#cikti").html(event.data.text); } $("img").css("width", "300px"); $("button:first").bind("click", function(){ $("img:first").bind("mouseover", { text: "Bu bir resim" }, info); $("img:first").bind("mouseout", { text: "" }, info); }); $("button:last").bind("click", function(){ $("img:first").unbind("mouseover"); $("img:first").unbind("mouseout"); }); }); </script> </head> <body> <button> bind() </button> <button> unbind() </button> <hr/><img src="r1.jpg" /> <div id="cikti"> </div> </body> bindveunbind.html
330
Musa AVU
ekil188 bind() yazan dmeye basnca, Beyaz resmine mouseover ve mouseout Eventlerini bala ve verdiim metini taraycda gster. unbind() dmesine basnca mouseover ve mouseout Eventlerini Beyaz resminden kart. Program bu iki emri yerine getirmektedir. nc parametredeki info deeri dikkatinizi ekmitir. info, info fonksiyonunun bir referansdr. bind() fonksiyonunda nc parametre olarak her hangi bir fonksiyon referans verebiliriz ve verilen fonksiyon ilem grmektedir. info fonksiyonundaki event.data.text, parametrede verilen text: iaret etmektedir. Ben oraya text: yerine selamkelam: yazsaydm fonksiyonda event.data.selamkelam yazmam gerekecekti.
Sadece bir kez one() Kullanm asndan bind() metoduyla zde olan one() metodunun bind() metodundan fark sadece bir kez ilev grmesidir.
Musa AVU
331
<html> <head> <title>one</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ function info(event){ $("#cikti").html(event.data.text); } $("img").css("width", "300px"); $("img:first").one("mouseover", { text: "Bir resim" }, info); $("img:first").one("mouseout", { text: "" }, info); }); </script> </head> <body> <img src="r1.jpg" /> <div id="cikti"> </div> </body> one.html
332
Musa AVU
ekil189 Fareyle resime girdiimizde bir bilgi kyor. Fare ile resimden knca bo bir metin gsteriliyor. one() metodu sayesinde bu olay bir defa gerekletirebiliyoruz. Tabi ki saksnz altrarak bunu farkl ekillerde yapabilirsiniz. Kodunuza bir saya koyarak tklama miktarn sayabilirsiniz ya da daha akrobasik hareketlerde bulunabilirsiz. jQueryciler byle bir kolaylk saladktan sonra tekeri tekrar icetmeye ne hacet var.
Tetikleyiciler Eventleri belli veri deiiklerinden sonra balatmak isteyebiliriz. jQuerydeki genlik bunun iin tetikleyici metodunu bize sunmaktadr. Bize bir de iyilik yaparak metodun adn tetikleyicinin ingilizcesi olan trigger koymulardr. ngilizce bilerek bir ok metodu anlayabilirsiniz, yalnz ingilizce bilmek demek programlamay biliyorum demek deildir. <html>
Musa AVU
333
<head> <title>tetikleyici</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("img").css({width:"80px" }); $("img").click(function () { $(this).css({width:"200px" }); }); $("img").dblclick(function () { $(this).css({width:"80px" }); }); $("button:first").click(function () { $("img").trigger('click'); }); $("button:last").click(function () { $("img").trigger('dblclick'); }); }); </script> </head> <body> <h1>Resimleri buyultmek icin uzerine tiklayin</h1> <h1>Cift tiklarsaniz resim ufalacaktir</h1> <img src="r1.jpg" /><img src="konya.jpg" /><hr /> <button>Resimleri buyult</button> <button>Resimleri ufalt</button> </body> </html> trigger.html Resime tklandnda resim bymektedir. Tklamak demek click() metodu demektir. Bunu <img> tagna baladm. Daha sonra ilk dmeye baslnca <img> tagnn click() metodunu ar degim. Bunu da trigger metodunda rnekte kullandm gibi gerekletirebiliyorum. Trigger() metoduna parametre olarak hangi Eventi armak istiyorsam onu yazyorum.
334
Musa AVU
ekil190
toggle() Bu blmn sonunda ok gzel bir rnek vermek istiyorum. Biraz animasyonculua hazrlktr. tane farkl renkte dme var ve tkladka rengi ve ekli deiecek. rnek uzun gibi gelsede ou tandnz bildiiniz eyler. Ben toggle() metodu zerinde duracam. ncelikle rnei vermek istiyorum: <html> <head> <title>toggle</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("div").css({ width: "80px", height: "40px", margin: "5px",
Musa AVU
335
float: "left", background: "blue", border: "10px outset", cursor: "pointer" }); $("div").toggle(function(){ $(this).css({ "border": "5px inset", "background": "red" }); }, function(){ $(this).css({ "border": "10px outset", "background": "yellow" }); }, function(){ $(this).css({ "background": "blue" }); }); }); </script> </head> <body> <div> </div> <div> </div> <div> </div> </body> </html> toogle.html
336
Musa AVU
ekil191
Tm <div> taglarna bir css objesi yerletiriyoruz. jQuery ile toggle metodunda parametre uyguluyoruz. Birinci parametre ilk tklama, ikinci parametre ikinci tklama, nc parametrede nc tklamada oluacak ilemi programlamamz salamaktadr. $(this) ile diyoruz ki u an ait olduum taga ula ve ona ulatktan sonra css( yaparak o tagn css hayatn deitiriyoruz. ok nemli noktalardan birisi ise udur ki, her <div> tag kendisine ka kere tklandn bilmektedir.
Musa AVU
337
Blm 17 jQuery ve Animasyon
338
Musa AVU
17.1 jQuery ve animasyonlar Ziyaret edilen web sayfalarnda animasyonlarn oluu, ziyaretileri ok etkilemektedir. jQuery Frameworku, jQuery ile animasyon grntleri gelitirmenizi salamaktadr ve jQuery Frameworkteki en basit konulardan biridir. http://api.jquery.com/category/effects linkine girerek var olan animasyon metotlarn grebilirsiniz. Bilmem biliyor musun, fakat jQuery dokmentasyanu ayn zamanda grntl rneklerde iermektedir. Az nce veridim linke tklayn ve kan sayfada dequeue() metoduyla gsterilen linke tklayn:
ekil192 rnei ve uygulann canl olarak jQuery sayfasnda grebilirsiniz. Keratalar gerekten gzel bir sayfa yapmlar, ben ahsen hayran kaldm.
show() ve hide() metotlar Zamana gre grntleme ve saklama animasyonculuun temel ilevleridir. jQuery iin bu bir ocuk oyunca kadar kolaydr. Bunun iin show() ve hide() metotlar vardr. <html> <head>
Musa AVU
339
<script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){ $("div.k1").css({width:"80px", height:"40px", margin:"5px", float:"left", background:"blue", border:"5px outset" }); $("button:first").click(function(){ $("div.k1").show(); }); $("button:eq(1)").click(function(){ $("div.k1").show("slow"); }); $("button:eq(2)").click(function(){ $("div.k1").show(5000,function(){ $("#cikti").text("5 saniye surdu"); }); }); $("button:eq(3)").click(function(){ $("div.k1").hide(); }); $("button:eq(4)").click(function(){ $("div.k1").hide("fast"); }); $("button:eq(5)").click(function(){ $("div.k1").hide(3000,function(){ $("#cikti").text("3 saniye surdu"); }); }); }); </script> </head> <body> <button>Goster</button> <button>Animasyonlu goster</button> <button>Zaman animasyonlu goster</button> <button>Sakla</button> <button>Animasyonlu sakla</button> <button>Zaman animasyonlu sakla</button> <hr /><div id="cikti"></div><hr /> <div class="k1"></div><div class="k1"></div> <div class="k1"></div> </body>
340
Musa AVU
</html> showhide.html
ekil193 Goster dugmesinin ardnda show() metodu gizli. Bal bulunduu taglar gsterilmiyorsa gstermek iin gereken bir metottur. Animasyonlu gster dmesine bastmzda show() metodunun parametreli arldn gryoruz. Parametre olarakta slow, ngilizceden Trkeye meal yaparsak usulca demek oluyor. Gsterilmeyenleri usulca gstermek iin slow yazabiliyoruz. Tabi dersek, ben bu iin zamann kendim belirtlemek istiyorum. O zamanda parametre olarak salise bir deer verin. Ben 5000 verdim, bu demek oluyor ki 5000 salise vatanda tam gsterim iin harcayacaktr. kinci parametre olarakta bir Callback fonksiyonu verdim. kinci parametre animasyon sresi bittikten sonra ileve girmektedir. hide() metoduda gizle demektir, show() metodunda geerli olan tm parametre kurallar hide() iinde geerlidir. rnekte hide(fast) kullandm. fast, hzl demek olduu iin hzl bir ekilde gizleme yapm oluyorum.
slideDown(), slideUp() ve slideToggle()
Musa AVU
341
Normalde aadaki rnek hereyi aklyor. Ben yinede bir ka aklama getirmek istiyorum. izilen dikdrtgeni veya resimi aadan yukarya saklamak iin slideUp() metodunu kullandm. Paramtre deerini daha nce anlatmtm. slideDown() metoduyla aaya doru resim ve dikdrtgen izilmektedir. slideToggle() metoduylada zaman verebiliyoruz. show() ve hide() metotlarndaki gibi ikinci bir parametre deeri de verebiliriz. Grevi ise ayn show() ve hide() metotlarndaki grevi gibidir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $("img").css("width", "300px"); $("div.k1").css({ width: "80px", height: "40px", margin: "5px", background: "green", border: "5px outset" }); $("button:first").click(function(){ $("div.k1").slideDown("slow"); }); $("button:eq(1)").click(function(){ $("div.k1").slideUp("fast"); }); $("button:eq(2)").click(function(){ $("img").slideDown("slow"); }); $("button:eq(3)").click(function(){ $("img").slideUp("slow"); }); $("button:eq(4)").click(function(){ $("div.k1").slideToggle(5000); $("img").slideToggle(10000); }); }); </script> </head> <body> <button> Dikdortgeni goster
342
Musa AVU
</button> <button> Dikdortgeni sakla </button> <button> Resimi goster </button> <button> Resimi sakla </button> <button> Resmi ve Diktdortgene Toggle efekti uygula </button> <hr/> <div class="k1"> </div> <img src="r1.jpg" /> </body> </html> Slide.html
ekild194
Saydam efektleri, fadeIn(), fadeOut() ve fadeTo() jQuery saydam efektleri iinde kolay metotlar sunmaktadr. fadeIn() ve fadeOut() metotlar saydamlatrarak gstermektedir ve gizlemektedir. fadeTo()
Musa AVU
343
metodu ise belirli bir zamana gre ve belirli bir snra gre saydamlatrmaktadr. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $("img").css("width", "300px"); $("div.k1").css({ width: "80px", height: "40px", margin: "5px", background: "green", border: "5px outset" }); $("button:first").click(function(){ $("div.k1").fadeIn("slow"); }); $("button:eq(1)").click(function(){ $("div.k1").fadeOut("fast"); }); $("button:eq(2)").click(function(){ $("div.k1").fadeTo(3000, 0.2); $("img").fadeTo(2000, 0.5); }); }); </script> </head> <body> <button> Dikdortgeni yavas saydam sakla </button> <button> Dikdortgeni hizli saydam goster </button> <button> Toggle </button> <hr/> <div class="k1"> </div> <img src="r1.jpg" />
344
Musa AVU
</body> </html> slide.html
ekil1195 Yine bu metotlarda da ikinci parametrede kullanlabilecek Callback fonksiyonu geerlidir.
Zincirlenmi animasyonlar Animasyon jQuery ile ok kolay olduunu grdnz. zellikle tarayclarn animasyonlara getirdii snrlamalar jQuery ile aabiliyorsunuz, nk jQuery kendin bnyesinde bu snrlamalar iliyor ve siz bunlar gs nnde bulundurmaya gerek duymuyorsunuz. Gereksiz cmleler kullanmay sevmediim iin hemen zincirleme animasyonu iin rnee gemek istiyorum. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script>
Musa AVU
345
<script> $(document).ready(function(){ $("img").css("width", "300px"); $("button:first").click(function(){ $("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow") .hide("normal").show(5000); }); $("button:last").click(function(){ $("img:last").fadeOut("fast"); $("img:last").fadeIn(2000); $("img:last").slideUp("slow"); $("img:last").slideDown("slow"); $("img:last").hide("normal"); $("img:last").show(5000); }); }); </script> </head> <body> <button> Zincirli animasyon I </button> <button> Zincirli animasyon II </button> <hr/><img src="r1.jpg" /> <hr/><img src="r2.jpg" /> </body> </html> zincirleme.html
346
Musa AVU
ekil196 jQuery olmadan zincirleme animasyonlarn programlamak ok gtr. jQuerydeki zincirleme animasyon zelliin beni cezbeden noktas bir animasyon bittikten hemen ardndan dier animasyona geilmesidir. rnekte iki ekil zincirleme animasyonu uyguladm. Birinci dmeye bastnzda, animasyon metotlar srasyla arlmaktadr. Koda baktnzda bu metotlar bir nokta ayrarak armaktaym. Bunun nedeni her animasyon metodu bir jQuery nesnesini bize iletmektedir. Bylece biz bir dier animasyon metodunu nokta kullanarak o nesnenin bir metoduymu gibi arabilmekteyiz. kinci yntemde ise her animasyonu ayr bir satrda ararak ayn elemente uyguladm. Bu da zincirleme animasyonunu salam oluyor.
Animasyonlar durdurmak
Musa AVU
347
Bir animasyon iliyorsa bunu stop() metoduyla durdurabilirsiniz. Yukardaki rnei ele alrsak birinci animasyonu ilevi esnasnda durduran bir rnek gstereceim: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $("img").css("width", "300px"); $("button:first").click(function(){ $("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow") .hide("normal").show(5000); }); $("button:last").click(function(){ $("img:last").fadeOut("fast"); $("img:last").fadeIn(2000); $("img:last").slideUp("slow"); $("img:last").slideDown("slow"); $("img:last").hide("normal"); $("img:last").show(5000); }); $("button:eq(2)").click(function(){ $("img:first").stop(); }); }); </script> </head> <body> <button> Zincirli animasyon I </button> <button> Zincirli animasyon II </button> <button> Birinci animasyon dursun </button> <hr/><img src="r1.jpg" /> <hr/><img src="r2.jpg" /> </body> </html>
348
Musa AVU
ekil197 Bazen animasyonu durdurma gecikmelere sebebiyet verir fakat yine de sonunda animasyon durdurulmu olur.
animate() ile kendiniz bir animasyon metodu jQuerynin bize sunduu animasyon metotlar, bir ok animasyon zelliini bize sunmaktadr ve aklnza gelen bir ok animasyon efektinide salamaktadr.Fakat baz durumlarda gnl ister ki kendimiz bir animasyon metodu yazalm. rnein bir elementin pozisyonunu bir yerden baka bir yere saydamlarken bir yandan da srklemek istiyorsunuz. JavaScript ile bunu programlamaya alrsanz ok vaktinizi alacaktr ve bir kaosa srklenerek metotlar rekursv olarak armaya balayacaksnzdr. yi ki jQuery var ve bize animate() adnda bir metot sunmaktadr.
Musa AVU
349
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $(".d1").css({ width: "80px", height: "40px", margin: "5px", background: "green", border: "5px outset", position: "absolute" }); $("img").css({ width: "200px", position: "absolute" }); $("#i1").css({ width: "200px", left: "100px", top: "50px" }); $("#i3").css({ width: "200px", left: "100px", top: "150px" }); $("button:first").click(function(){ $("div#i1").animate({ width: "20%", opacity: 0.4, borderWidth: "1px" }, 1500); }); $("button:eq(1)").click(function(){ $("img#i3").animate({ width: "100%", opacity: 0.3, top: "200px" }, 5000); }); }); </script>
350
Musa AVU
</head> <body> <button> Dikdortgen 1 animasyon </button> <button> Resim 2 animasyon </button> <hr/> <div class="d1" id="i1"> </div> <img src="r1.jpg" id="i3" class="img1" /> </body> </html> animate.html
ekil198
Musa AVU
351
http://api.jquery.com/animate sayfasndan animate() metodu hakknda ngilizce ayrntl bilgi bulabilirsiniz. ngilizce dilini tam anlamyla bilmenize gerek yok, oradaki rneklerde faydal olan rneklerdir. Tabi benim verdiim rnee oradakiler eline su dkemez, nk Trke. animate() metodu ok esnek ve ok gl bir metottur. Bu metotla istediiniz animasyonu oluturabilirsiniz. button:first blouna bir bakalm. Orada bir animate() metodu kullandim. lk parametre olarak bir CSS nesnesini deiik parametrelerle gryorsunuz. kinci parametre olarakta zaman araln gryorsunuz. Olay ok basit, bizim dikdrtgenin ilk halini tanmlam oluyoruz. animate() metodu bizim dikdrtgenin son hali olmu oluyor, ikinci parametredeki zaman aralda dikdrtgenin son haline kavuma sresidir. jQuery bu bilgiler eliinde bir animasyon oluturuyor. animate() metoduyla zincirleme animasyonlarda yaplabilir. Her animate() metodunun ardndan bir nokta koyarak bir animate metodu daha arabilirsiniz, nk animate() metodu bir jQuery nesnesi iletmektedir.
352
Musa AVU
Blm 18 jQuery ile Ajax
Musa AVU
353
18.1 jQuery ve Ajax Daha nce Ajax gstermitim. jQuery burnunu her tarafa sokarak iimizi kolaylatrd gibi Ajax dunyasnada burnunu sokmutur ve Ajax kullanmn kolaylatrmtr. Bize kalan sadece nasl olduunu renmektedir. Gerekten oke olacaksnz jQuery ile Ajax kullanmnn ne kadar kolay olduunu grnce. jQuerynin , Ajax ile bize sunduu metotlar u sayfada grebilrisiniz http://api.jquery.com/category/ajax/
ekil199 Daha nce anlattm Ajax anladysanz buradaki jQuery metotlar sizin iin ocuk oyunca gibi gelecektir.
imdi bir rnekle balamak istiyorum: http://localhost/ajax/ajax1.html <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){
354
Musa AVU
$("button:first").click(function(){ $.get("ajax.txt", function(data){ $("#cikti").text(data); }); }); $("button:eq(1)").click(function(){ $.post("ajax.txt", function(data){ $("#cikti").text(data); }); }); }); </script> </head> <body> <button>AJAX-Sorgulama $.get()</button> <button>AJAX-Sorgulama $.post()</button> <div id="cikti"></div> </body> </html> ajax1.html Bu dnyada bildigim iki sey var, birincisi erkekler kadinlardan akillidir, ikincide erkekler kesinlikle kadinlardan akillidirlar. ajax.txt
ekil200 Daha nce XAMPP kurulumunu ve kullanmn gstermitim. htdocs dizini altna ajax diye bir dizin atm ve ajax1.html ile ajax.txt dosyalarn bu dizine kopyaladm. http://localhost/ajax/ajax1.html linkini yazncada yukardaki ekili elde ettim. Koda baktnzda yaptm ok basit. $.get() ve $.post() fonksiyonlarn kullanarak birinci parametrede armak okutmak istediim dosya adn veriyorum, ikinci parametredeki data deikenide okunan dosyann ieriini bana sunmaktadr. jQuery ile Ajax bu kadar basit. ki saat hikye anlatmama gerek yok. Yzlerce sayfa yazarak Ajax nimetinin nasl kullanldn da
Musa AVU
355
gstermeme gerek yok. Yukardaki kodla bir sre Ajax kodu yazabilirsiniz. jQuery ile kaln kitaplar alarak Ajax kodu yazma mazilerde kald. Size bir ka rnek daha vereceim sonra i bavurusunda ben Ajax biliyorum diyebilirsiniz. Yeillik olsun diye bir baka rnek vermek istiyorum: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){ $("button:first").click(function(){ $.get("ajax2.txt", function(data){ $("#cikti").html(data); }); }); $("button:eq(1)").click(function(){ $.post("ajax2.txt", function(data){ $("#cikti").html(data); }); }); }); </script> </head> <body> <button>$.get()</button> <button>$.post()</button> <div id="cikti"></div> </body> </html> ajax2.html <b>Bu dnyada bildigim iki sey var,</b><br> <font color=red>birincisi erkekler kadinlardan akillidir, ikincide erkekler </font> kesinlikle kadinlardan akillidirlar. ajaxhtml.html
356
Musa AVU
ekil201 Bu rnein bir nceki rnekten tek fark text() metodu yerine html() metodunu kulllanmam oldu. html() metodu gelen bilgiyi HTML olarak alglyor ve tarayc ona gre gsteriyor. Metot ok kolay ve ierik ok byk farkllk arz ediyor.
Webservere Ajax ile bilgi nasl yollanr? Diyelim ki, ad, soyad ve numara gibi bilgileri Web Servere yollamak istiyorsunuz ve yolladnz bu bilgiler nda taraycda bilgiler gstermek istiyorsunuz. Bunu da Ajax ile gerekletirme dncesindesiniz. O zaman bu rnee iyi bakn. Tabi dier Ajax rneklerindeki gibi Server tarafnda basit bir metin dosyas bulundurmamz mantksz olur. Server tarafnda bir program paras olmas gerekiyor ki bizim yolladmz bilgileri alsn ve iledikten sonra tekrar bize geri yollasn. Daha nceki Ajax anlatmdan PHP kodu kullanmtm burada da PHP kodu kullanacam. PHP kodunun ne yaptn anlamanz yeterlidir, nk kitap PHP kitab deil. Ajax iin Server tarafnda alan program paras hi nemli deildir, siz istiyorsanz baka bir dilde kullanabilirsiniz. Ajax Server tarafn kapal bir kutu gibi grmektedir. Siz nasl ki telefon atnzda kar taraftaki kiinin cinsi, rk nemli deil sadece syledikleri nemliyse, Ajax iinde ayn kriterler geerlidir. Gstereceim rnekte kullanc ad ve ifre yollayacam eer Server taraf onaylarsa taraycda onayland diye bir belirte gzkecek, onaylamazsa yanl kullanc ad ve ifre diye bir hata mesaj kacak. Bu bildiiniz bir
Musa AVU
357
sorgulamadr, tek fark yeni bir tarayc penceresinde deil de ayn pencerede gereklemesidir. <?php $kullaniciadi = "musa"; $sifre = "cavus"; $login=false; if (($kullaniciadi == $_GET['username']) && ($sifre == $_GET['password']) ){ $login=true; } if($login) { echo "Login basarili"; } else { echo "Login basarisiz sifrenizi ya da kullanici adinizi kontrol edin"; } ?> login_get.php <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){ $("button:first").click(function(){ $.get("login_get.php", { username: $("input:first").val(), password: $("input:last").val() }, function(data){ $("#cikti").html(data); } ); }); }); </script> </head> <body>
358
Musa AVU
<h1>Kullanici adinizi ve sifrenizi girin</h1> <form name="f1"> <table width="200" border="1"> <tr> <td>Kullanici Adi</td><td><input type="text" size="30"></td> </tr> <tr> <td>Sifre</td> <td><input type="password" size="30"></td> </tr> </table> </form> <button>Giris</button> <div id="cikti"></div> </body> </html> login.html
ekil202
Musa AVU
359
ncelikle korkmamanz iin PHP kodunu anlatmak istiyorum. Yaptm ok basit. $_GET['username'] ve $_GET['password] ile kullanc adn ve ifreyi elde ediyorum. Daha sonra bunlar $kullaniciadi ve $sifre deikenleriyle kontrol ediyorum. Eer girilen kullanc ad ve ifre bunlarla zdeiyorsa $login deikenin deeri true oluyor ve echo ile baarl olduuna dair bir satr taraycya geri yollanyor. Eer $login deikeni false kalyorsa o zaman else anahtar kelimesinden sonra gelen echo ile yazlacak satr taraycya yollanyor. PHP kodunu ok basit tuttum, veritaban balamadm. nemli olan sistemi kavramaktr yoksa burada manzak projeler yapmak deildir. ajax3.html dosyasndaki en nemli yer urasdr: { username: $("input:first").val(), password: $("input:last").val() } Bu satrlarla Servere jQuery ile bir nesne yollatyorum. username deikenine ilk input elementinden deer aktarlyor. Ayn ekilde password deikenine son input elementinden deer aktarlyor. Dmeye baslnca bu veriler Servere aktarlyor. jQuery ve Ajax hakknda bu kadar bilgi yeterli. Bu bilgilerle kaliteli Ajax projeleri gerekletirebilirsiniz. Hereyi bilemezseniz fakat kaliteli projeler yapabilmek iin hereyi de bilmeye gerek yoktur.
360
Musa AVU
Blm 19 jQuery UI
Musa AVU
361
19.1 Genel bir bak jQuery Frameworkunun yan sra bir de jQuery UI var. Bu Framework grsellik iin kullanlmaktadr. Wdgets de denilmektedir. jQuery ekirdeini ve CSS sistemini kombine ederek bu Framework oluturulmutur. Gerekten jQuerydeki aabeyler hereyi bizim iin dnmler. Bazen diyorum bu adamlarn hi mi oluk ocuu yok nereden buluyorlar bu kadar vakti. Tanmasam Avrupal ve Amerikallar amenna diyeceim, biliyorum bizlerden zeki olmadklarn. Neyse konudan sapmayalm. jQuery UI iin http://jqueryui.com yazn ve sayfaya bir girin:
ekil203 jQuery UI size ok gl bir Framework sunmaktadr ve bu Frameworku kullanmak ok kolaydr. Benimde en ok houma giden yn budur. jQuery UI Ktphanesi normal jQuery ktphanesinde mevcut deildir. Bu yzden bunu indirmeniz gerekmektedir. Yukardaki ekilde Build custom download linkine tkladnzda ie balam olacaz. imdilik oraya tklamadan nce web sayfasn size biraz gezdireyim. Sol alt kede Browse all effects & widgets linki var, tklayn onu.
362
Musa AVU
ekil204 Burada Draggable linkini bir tklayn.
Musa AVU
363
ekil205 lgin olan dokmanda rnekler var ve siz bu rnekleri canl olarak deneyebilirsiniz. kan penceredeki kareyi fare ile istediiniz yere srkleyerek kendi sisteminizde kullanmak istediiniz blm kullanmadan nce deneyebiliyorsunuz. Ayn sayfada view source linkine tkladnzda grdnz efekti sisteminize yklemek iin koduda gryorsunuz. Koda baktnzda greceksiniz ki ekrandaki kareyi srkleyebilmek iin draggable() metodunu kullanyorsunuz o kadar. Dedim ya jQuery UI kullanarak efektleri ok kolay gerekletirebiliyorsunuz. Nerede grlm tek bir metot kullanarak her hangi bir elementi srkleyebilmeniz. Seneler ncesi byle bir olay JavaScript ile programlamak istediimde bir sr kod yazmtm. Fareye basld m, fareyi nereye srkledin gibi unsurlara muhakkak dikkat etmek gerekiyordu. jQuery UIde bunlar unutuyorsunuz. 19.2 jQuery UI nasl kullanlr? Daha nce belirttiim gibi jQuery UI'yi kullanabilmek iin bir ktphane indirmelisiniz. Download linkine tklayn.
364
Musa AVU
ekil206 Sa tarafta 1.8.5 olan son versiyonu seerek Download linkine tklayn. Bu rakam jQuerydeki genler yenilikler getirdike deiebilir. jquery-ui1.8.5.custom.zip bir dosya indirdim. Zip formatndaki dosyay Zip halinden kurtarn ve onu rnekleri deneyeceiniz dizine kopyalayn. Ben rneklerimin bulunduu dizinin iine bir de jquery-ui-1.8.5.custom dizini aarak alan tm dosyalar onun iine kopyaladm. Daha nce byle bir eyler yapmtk hatrlyorsanz. imdi tekrar yapyoruz. Zip dosyasn atktan sonra sradaki kodu yazn. Zip dosyasnn iinde neler var neler yok bilmeseniz de olur. Tabi bakmakta yarar var zarar gelmez. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/uidarkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui1.8.5.custom.min.js"> </script>
Musa AVU
365
<script type="text/javascript"> $(document).ready(function(){ $("#draggable").draggable(); }); </script> </head> <body> <h1>Yukari</h1> <img id="draggable" src="r1.jpg" /><h1>Asagi</h1> </body> </html> drag.html
ekil206 Heyecanlanmadnz deil mi? nanlmas g fakat ite bu kadar basit. Bir ka satr kodla taraycdaki resimi srkleyebiliyorsunuz. Kodda dikkat etmeniz
366
Musa AVU
gereken, CSS dosyasn, JavaScript dosyasn ve jQuery dosyasn kod ierisinde yerini belirtmenizdir. CSS iin <link> tagn kullandk, unuttuysanz CSS iin ksa bir giri yapmtm orada bulabilirsiniz. JavaScript dosyalarn da nasl balanacan her rnekte grmnzdr.<img> tagna bir id verdim ve adn draggable koydum. Sonra jQuery blmnde <img> tagna draggable() metodunu baladm ve hoptirinanay sizin resminiz srklenme zellii kazanm oldu. Benim tavsiyem resmi srklerken Firebug ile bir bakn HTML tarafnda neler oluyor. Beyin hcreleriniz konuyu daha iyi anlayacaktr.
19.3 eitli jQuery UI elementleri Normalde fazladan bilgiye ihtiyacnz yok. Sayfaya girin ve oradan istediiniz Widgete bakn sonra kodu indirin ve oradaki rnekte olduu gibi kendi sisteminizde kullann. Dedim ki biraz daha jQuery UIden rnek vereyim ki heyecan dorukta olsun. imdi tekrar http://jqueryui.com/download adresine girin ve Theme yazn blmn altndaki yerden UI darkness seerek download yapn. Bu zellik sayesinde indirdiiniz jQuery UI, UI darkness efekt zellii gsterecektir. Hemen ilk rneimiz olan takvim rneinde bunu bir gstereyim. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/uidarkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#datepicker").datepicker(); }); </script> </head> <body> <p>Tarih: <input id="datepicker" type="text"></p> </body> </html> takvim.html
Musa AVU
367
ekil207 Darkness UI setiim iin bu efekti ieren bir takvim grm oluyorum. Seenek blmnde bir sr seebileceiniz efektler var, deiik deneyler yapabilirsiniz. Takvimide nasl oluturduumu anlamnzdr umarm, nk sadece tek bir metot olan datepicker() metodunu kullandm. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/uidarkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#i1").accordion();
368
Musa AVU
}); </script> </head> <body> <h1>Benim Web Sayfam</h1> <div id="i1"> <h3>Benim ozel sayfam</h3> <div> <a href="http://rjs.de">www.musa-cavus.com</a> </div> <h3>Bir liste</h3> <div> <hr/>Domates <hr/>Biber <hr/>Patlican <hr/> </div> </body> </html> accordion.html
ekil208
Musa AVU
369
Bu da baka bir rnek. rnei altrn ve ne kadar etkili bir Widget olduunu grn. Tek bir metot olan accordion() metodu il idsine sahip <div> tagna balayarak bu efekti gerekletirmi oldum. accordion() metodunu daha ok kullanmak istiyorum diyorsanz http://jqueryui.com/demos/accordion linkine girin. Kullanabileceiniz parametreler, renkler ve biimleri orada bulabilirsiniz. Tek tek anlatmama gerek yok zaten orada her ey var.Ben size sadece bu iin temelini ve mantn retmeye alyorum. imdi size biraz daha fazla bir ey gstereceim. Hem Tab kullanabileceksiniz hemde kullandnz tab elementinin boyutunu deitirebileceksiniz. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/uidarkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#tabs").tabs().resizable(); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Bolum 1</a></li> <li><a href="#tabs-2">Bolum 2</a></li> <li><a href="#tabs-3">Bolum 3</a></li> </ul> <div id="tabs-1"> <p>Ben birinci bolumum sen kimsin?</p> </div> <div id="tabs-2"> <p>Ben ikinci bolumum sen birinci bolum musun?</p> </div> <div id="tabs-3"> <p>Kavga yapmayin bende cnc bolumum</p> </div> </div>
370
Musa AVU
</body> </html> tabs.html
ekil209 Grld gibi efektleri noktalar sayesinde ard ardna ekleyebiliyoruz. tabs() metodundan sonra resizable() metodunu nokta kullanarak istediimiz sonuca ulatk. Zincirlemede yapabiliyoruz grdnz gibi.
19.4 jQuery UI deerlerini elde edebilme Baz durumlarda jQuery UI elementlerinin aralarnda iletiim salamak isteyebiliriz. rnein bir ara ubuu saa sola ekilirken bir Dialog kutusunun boyutunun deimesini isteyebiliriz. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/uidarkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js">
Musa AVU
371
</script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#i1").dialog({ title: 'Dialog Baslik', position: 'center', width: '300', height: '200' }); $("#s1").slider(); $("#s2").slider({ slide: function(event, ui){ var genislik = 300 + $("#s2").slider('option', 'value'); $("#i1").dialog('option', 'width', genislik); } }); $("#s2").css({ width: "400px" }); $("#s3").slider({ slide: function(event, ui){ var yukseklik = 200 + $("#s3").slider('option', 'value'); $("#i1").dialog('option', 'height', yukseklik); }, orientation: 'vertical', min: -50, max: 50, value: 0 }); }); </script> </head> <body> <h4>Default Slider</h4> <div id="s1"> </div> <h4>Default Slider CSS</h4> <div id="s2"> </div> <h4>Slider</h4> <div id="s3">
372
Musa AVU
</div> <div id="i1"> Web sayfami ziyaret edebilirsiniz... <a href="http://www.musa-cavus.com">tikla</a> </div> </body> </html> slider.html
ekil210 Ara ubuunu oluturmak ok kolay slider() metodunu kullannca <div> tagn kaydrma zellii vermi oluyrsunuz. Bir deer alabilmek iin slider() metodunu iki parametreli olarak kullanyorsunuz ve ilik parametreye option yazarken ikinci parametreye value yazyorsunuz. Bunu dokmanlarda da grebilirsiniz ve sadece slider() metodu iin geerli deildir, bir ok jQuery UI elementleri iinde geerlidir. lk parametre option, ikinci parametre value ve son parametreye de bir deer verirseniz ara ubuunun geniliini belirtmi oluyorsunuz. imdi $("#s2").slider ksmna iyi bakn orada slide: diye bir ksm var. Bu ekilde bir Event oluturuyoruz ve bu Event ubukta her kaydrma yaplnca
Musa AVU
373
arlmaktadr.Ara ubuunun yatay ya da dikey olmasn orientation seeneinden ayarlayabilirsiniz. Genilik, ilk deer gibi deerleri de deitirme imkannz var ki bunlar ltfen dokmana bakarak uygulayn ve deiiklilk yapn ki rnekler beyninize daha iyi yerlesin. 19.5 Efektler http://jqueryui.com/docs/Effects/Methods adresine girerseniz efektlerle ilgili sper bir dokmentasyon greceksiniz. Ben hepsini gstermeyeceim efektlere bir giri niteliinde giri yapacam. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/uidarkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var opt = {}; function temizle(){ setTimeout(function(){ $("#i1").removeAttr('style').hide().fadeIn(); opt = {}; }, 2000); }; $("button:first").click(function() { $("#i1").effect('explode',opt,1500,temizle); return false; }); $("button:eq(1)").click(function() { $("#i1").effect('puff'); return false; }); $("button:eq(2)").click(function() { $("#i1").effect('pulsate',opt,2000,temizle); return false; }); $("button:eq(3)").click(function() { $("#i1").effect('slide',opt,2500,temizle); return false;
374
Musa AVU
}); $("button:eq(4)").click(function() { opt = { to: {width: 200,height: 60} }; $("#i1").effect('size',opt,5000,temizle); return false; }); }); </script> </head> <body> <button>Explode</button><button>Puff</button> <button>Pulsate</button><button>Slide</button> <button>Size</button><hr /> <img id="i1" src="r2.jpg" width="300"/> </body> </html> efekt.html
ekil211
Musa AVU
375
Explode dmesine basnca resmi patlatyor gibi bir efekt uygulam oldum. Bu patlama u kodla gerekleiyor: $("#i1").effect('explode',opt,1500,temizle). Zaten efektlerle effect() metodu ilgileniyor, parametrede yapacamz deiiklie grede efekt deiiklikleri elde ediyoruz. Birinci parametre efektin kendisi, ikinci parametre seenekler, nc parametre efektin hz ve son parametre Callback fonksiyonudur. rnekte bir ka efekt kullandm. temizle Callback fonksiyonuda belli bir sre sonra resmi eski haline getirmektedir. Bu blm fazla uzatmyorum, nk ok kolay. Yapmanz gereken sadece jQuery UI sayfasndaki rnekleri incelemek ve uygulamak.
376
Musa AVU
Blm 20 Plugins
Musa AVU
377
20.1 Temel bilgiler ekirdek olarak jQuery ve jQuery UIyi grdk. Bu iki Framewrk gelitirileibilir zelliklere sahiptirler ki bunlara Plugins denilmektedir. http://plugins.jquery.com/
ekil212 Plugins, JavaScript ktphanesinden olumuturlar. u an yeterli derecede Plugins vardr ve aklnza gelebilecek her trl konu iin mutlaka bir Plugin bulabilirsiniz. Nerede bulurum bunu diye sorarsanz, yukarda linkini verdim. O linke girerseniz sadece aramay bileceksiniz ve istediiniz Plugin sizin olabilir. Ayn zamanda sizde bir Plugin yazarsanz bu sayfaya koyabilirsiniz. Bu blmde sizlere Plugin nasl yazlr, sayfadaki Pluginler nasl kullanlr ve kendi yazdnz Plugini jQuery Plugin sayfasna nasl koyabilirsiniz onu gstereceim.
20.2 Plugin kullanmak Bir Plugine ihtiya duydunuz ve jQuerynin bize sunduu Plugin sayfasndan bu Plugini kullanmak istiyorsunuz.
378
Musa AVU
http://plugings.jquery.com/ adresine girdiinizde sol tarafta Browse Plugin blmnde anahtar kelimeleri greceksiniz. Data anahtar kelimesinin zerine bir tklayn.
ekil213 Data anahtar kelimesinin getii tm blmler sralanm oldu. Taraycnzdan geri dmesine tklayn ve sa taraftaki Projects Types blmnden Drag-andDrop linkini tklayn:
ekil214
Musa AVU
379
Yine burada da seilen projeye gre blmleri grm oluyorsunuz. Ayn ekilde aramada yapabilirsiniz. Ben sol st blmdeki Search blmnden TreeVew arattrdm ve ilk TreeView rneine tkladm:
ekil215 Bu Plugini yukardaki grdnz sayfadan indirebilirsiniz, web sayfasna girebilirsiniz. Pluginin ne kadar oy aldn grebilirsiniz ve ona gre kafanzda bir resim izebilirsiniz. Mesela dersiniz bu amca benim iin yeterli bir Plugin gelitirmemi ben baka amcaya bakaym. Try out a demonstration linkine tklayarak kullanmak istediiniz Plugin hakknda grsel bir grnm rnei grm oluyorsunuz:
380
Musa AVU
ekil216 Pluginin dokman iyi deilse ya da yoksa listelemede sonlara doru yer alr. Tabi Pluginin alabilirlii de listelemede ok nemlidir. Dokmansz Plugin genelde hibir ie yaramaz, nk dokman olmadan Pluginin nasl altn ve ne ie yaradn nereden bileceksiniz. TreeViewin dokman ok gzel yaplm, ayn jQuerydeki genlerin uygulam olduu metodu izlemi. Bakmakta yarar var. imdi TreeView Pluginini bir bilgisayarnza indirin. Homepage linkini tklayarak bu indirmeyi oradaki Download linkine tklayarak gerekletirebilirsiniz. ndirdiiniz dosyay rnekleri uyguladnz dizine an. Dokman inceledim ve yle bir kod yazdm: <html> <head> <link rel="stylesheet" href= "jquery-treeview/jquery.treeview.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script src="jquery-treeview/jquery.treeview.js" type="text/javascript"></script> <script> $(document).ready(function(){
Musa AVU
381
var agacim=$("#cikti").treeview({ animated: "fast", collapsed: true }); var yeniListe = $("<li><span class='folder'>Web sayfalari</span><ul>" + "<li><span class='file'>" + "<a href='http://www.musa-cavus.com'>www.musa-cavus.com</a>" + "</span></li>" + "<li><span class='file'>" + "<a href='http://jquery.com'>jquery.com</a>" + "</span></li>" + "<li><span class='file'>" + "<a href='http://www.w3c.org'>w3c</a>" + "</span></li>" + "</ul></li>") .appendTo(agacim); agacim.treeview({ add: yeniListe }); }); </script> </head> <body> <div id="cikti"></div> </body> </html> treeview.html
ekil216 Koda bakarsanz ekleme yaptm. Birincisi CSS eklemesi, ikincisi bizim jQuery dosyasn ekledim ve nc olarak TreeView JavaScriptini ekledim.
382
Musa AVU
treeview kullanm bu Pluginini yazan kiiye baldr. Bende dokmandaki rnee bakarak ve orada yazlan izilenlere bakarak kendi kodumda kullandm.
20.3 Plugin oluturmak Bakasnn Pluginlerini kullanarak bir parazit terliksisi gibi yaamak istemiyorsunuzdur. O yzden size kendi Plugininizi nasl oluturacanz gstereceim. Kendin piir kendin ye. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/uidarkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui1.8.5.custom.min.js"> </script> <script type="text/javascript" src="jquery.dragwithstatuslight.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").css({'width':'300px'}); $("img").dragwithstatuslight(); }); </script> </head> <body> <img src="r1.jpg" /><img src="r2.jpg" /> <img src="r3.jpg" /><img src="r4.jpg" /> </body> </html> plugin.html jQuery.fn.dragwithstatuslight = function() { return this.each(function(){ $(this).css({ border:"5px outset", cursor:"move" }); $(this).draggable( { start: function(event, ui) { $(this).css({opacity : 0.5});
Musa AVU
383
}, stop: function(event, ui) { status=""; $(this).css({opacity : 1}); }, drag:function(event, ui) { status="X/Y : " + event.pageX + "/" + event.pageY; } }); } ); }; jquery.dragwithstatuslight.js
ekil217 Plugin can alc noktas jquery.dragwithstatuslight.js dosyasndadr. Plugin yazyorsanz mutlaka bu dosyada kullanacanz metot jQuery.fn ile balamaldr. Ayrca metodun bulunduu dosya ayr bir JavaScript dosyas olmaldr ki Plugini kullanacak kii Plugini kendi koduna balayabilsin. Bu JavaScript dosyasda mutlaka jquery ile balamal ve kendine zg isim ile devam etmelidir. Bizim rneimizde jquery.dragwithstatuslight.js eklinde olmutur. Oluturduum rnekte draggable() metodunu kullandm. Srklemek istediim nesneye bir ereve konmasn istedim. Fareninde srkleme aamasnda, srkleme eklini almasda gerekiyordu. Yine srklenen nesnenin srklenme annda renginin amasn ayarladm. Kendi kodumuzda tm balamalar yaptktan sonra dragwithstatuslight() metodunu dier metotlar gibi ok kolay kullanabiliriz. rnekte $("img").dragwithstatuslight(); eklinde bir kullanmla yazdm Plugindeki metodu kullanm oldum.
384
Musa AVU
20.4 Plugini yaynlamak Sper zeknz altrdnz ve bir Plugin yazdnz. Bunu da dnya bilsin istiyorsunuz. En iyi yntem jQuerynin sayasndan bunu yapmanzdr ki buna jQuery frsat tanmaktadr. jQuerynin Plugin sayfasna giriyorsunuz ve sol taraftaki User login blmnden Login/Register linkini tklyorsunuz. Karnza kan pencereden Create a new account, yani usta beni de sayfana ye yap diyorsunuz. Kayt ilemlerinden sonra kullanc ad ve ifrenizi girerek sol tarafta Add Plugin linkini tklayn. Karnza bir form kacaktr onu doldurun ve Submit dmesine basn. Bastysanz dnya sizin yazdnz Plugine ulaabilecektir. Forma bilgiler girebilmek iin daha nce yazlm Pluginleri rnek aln ki zorlanmayn. Ve mutlu son. imdi uzman bir jQuery programcs konumundasnz. Bu kitapla bata jQuery olmak zere JavaScript, Ajax, CSS, HTML, DHTML, XHTML gibi teknolojilere hakim konuma gelmi oldunuz. Bir i bavurusunda bu teknolojilerden birini grrseniz hemen bavurun, nk siz bunlar biliyorsunuz. Umarm sizlere ok katkda bulunmuumdur, bulunamadysam su sizde kitab iyi okuyarak uygulamamsnzdr. Hadi beni fazla yormayn, zaten bu kitab yazarak ok yoruldum. Ne diyeyim okta zevkliydi yazmak.

J Query Musa CAVUS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

J Query Musa CAVUS

Uploaded by

Copyright:

Available Formats

Kendinize Gvenerek jQuery

Bilgisayar Mhendisi Musa AVU

Kendinize Gvenerek jQuery Musa AVU

Bedava Datm: Kasm - 2010

Web Adresi: www.musa-cavus.com, Eposta: jquery@musa-cavus.com

E im Yeliz ve K z m Ecrin e ithafen

Blm 1 JavaScripte giri

function hosgeldin(){ document.write("Hosgeldin"); } benimFonksiyonlarim.js

Blm 2 XHTML, HTML, XML ve CSS temel bilgileri

<html> <body style="background:green;"> </body> </html> css2.html

websayfasi1.xml dosyasna ift tkladnzda taraycnz yle bir sayfa gsterecektir:

Blm 3 JavaScript Kullanm

</script> </body> </html> operatorler1.html

</body> </html> operatorler3.html

break; default: document.write("4" + "<br>"); } </script> </body> </html> switch.html

</script> </body> </html> while.html

while(i < 40); </script> </body> </html> dowhile.html

Blm 4 Hata bulma ve ayklama

ekil62 Bu seenei setiinizde karnza JavaScript Debugger penceresi kacaktr:

ekil68 kan penceredeki metin kutusuna sayi yazn:

ekil69 Tamam dmesini tklayn:

Blm 5 Nesneler, Snflar ve Metotlar

5.4 DOM (Document Object Model)

</table> </body> </html> formsifirla.html

<html> <script language="JavaScript">

Blm 6 stisnalar ve Event kullanm

</form> <script language="JavaScript"> document.f1.b1.onclick = mesaj ; </script> </body </html> event1.html

<div id="cevap"></div> </body> </html> degerlendirme.html

</select> </form> <br> <div id="sc"></div> </body> </html> sehirler.html

ekil100 Kurulan dizinde xampp-control.exe dosyasn altrn.

</body> </html> resim.html

elma bilgi1.txt armut

Blm 8 HTTP ve XMLHttpRequest

Blim 9 DHTML ve AJAX

Blm 10 AJAX ve XML

Blm 11 jQuery ve jQuery UI

Blm 12 jQuery Temel Bilgisi

</button> </body> </html> kuyruk.html

Blm 13 Web sayfasnda belirli yeleri seebilme

</div> </body> </html> duzenselektor.html

13.2 Filtreler Temel filtreler

Blm 14 jQuery ile CSS

14.2 CSS eriimi

</button> <div id="cikti"> </div> </body> </html>

14.5 jQueryUInin ThemeRoller

<div class="ui-state-default ui-corner-all">ThemeRoller</div> </body> </html> temaroller.html

Blm 15 Web sayfasnda dmler

<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script>

Blm 16 jQuery ve Event

<body> <a href="http://www.musa-cavus.com">Buraya tikla</a> </body> </html> eventdurdurma.html

ekil187 event.isDefaultPrevented()) ile de durdurmann olduunu kontrol edebiliyorsunuz.

Blm 17 jQuery ve Animasyon

slideDown(), slideUp() ve slideToggle()

</body> </html> slide.html

ekil1195 Yine bu metotlarda da ikinci parametrede kullanlabilecek Callback fonksiyonu geerlidir.

Blm 18 jQuery ile Ajax

ekil204 Burada Draggable linkini bir tklayn.

</body> </html> tabs.html

You might also like