kendĐnĐze gÜvenerek jquery - tuncaycalhan.org · değindim ve son olarak jquery konusuna geçiş...

Bilgisayar Mühendisi Musa ÇAVUŞ

KENDĐNĐZE GÜVENEREKKENDĐNĐZE GÜVENEREKKENDĐNĐZE GÜVENEREKKENDĐNĐZE GÜVENEREK

jQueryjQueryjQueryjQuery

Musa ÇAVUŞ 4

Almanya, 2010

KKeennddiinniizzee GGüüvveenneerreekk jjQQuueerryy

Musa ÇAVUŞ

Bedava Dağıtım:

Kasım - 2010

© Musa Çavuş

Musa ÇAVUŞ 6

Bu kitabın her türlü yayın hakkı Musa Çavuş’a aittir.

Sayfa Tasarımı:

Musa Çavuş

Web Adresi: www.musa-cavus.com, E–posta: [email protected]

Musa ÇAVUŞ 7

E:im Yeliz ve Kマzマm Ecrinっe ithafen

Musa ÇAVUŞ 8

Önsöz İlk kitabım olan “Kendinize Güvenerek Java” kitabından sonra “Farklı Ol Mal

Olma” adlı kişisel gelişim kitabımı yazdım ve dedim ki ülkemdeki insanlara

faydalı olabilmen için bir teknik kitabı daha yazmalısın ve bu seferki kitap hem

büyük bir açığı kapatmalı hemde çok yarar sağlamalı.

Türkiye’nin, Web dünyasında gün geçtikçe çok geliştiğini biliyoruz. Web

tasarımı alanında Türkçe kaynakların eksikliklerin olduğunu gördüm. Amerika

ve Avrupa’da şu an büyük siteler görsellikleri için güçlü kütüphaneler

kullanmaktadırlar. jQuery bu kütüphanelerin başında gelmektedir. Maalesef

jQuery alanında Türkiye’de hiçbir Türkçe kaynak kitap mevcut değildir. Ben bu

kitabın bu açığı kapatacağını düşünüyorum.

Her kesimdeki insanın bu kitaptan faydalanması için yine Türkiye’de bir ilke

imza atarak Türkiye’deki ilk jQuery kitabını bedava dağıtmak istiyorum. Bunun

için kendi emeğimle İnternet ortamında kitabımı yaygınlaştırmaya karar

verdim. Sizlerden isteğim eğer kitabımı okuduysanız ve beğendiyseniz bir

dostunuza iletmeniz olacaktır. Ya da http://www.musa-cavus.com adresinden

kitabımı indirme tavsiyesinde bulunmanızdır. Kitabı bedava dağıtmam, kitabın

basit konulara değinmesi anlamını taşımamaktadır. jQuery dilini iyi

öğrenmeninde temelinde JavaScript dilini iyi bilmeniz yatar. Bunun için kitapta

öncelikle JavaScript konusuna ağırlık verdim. Daha sonra AJAX konusuna

değindim ve son olarak jQuery konusuna geçiş yaptım. JavaScript’in bu kitapta

ne işi var canım demeyin, çünkü JavaScript jQuery ile et ve tırnak gibi ayrılmaz

iki parçadır.

Eğer ilk kitabım olan “Kendinize Güvenerek Java” kitabımı okudysanız benim

anlatım tarzımı az çok biliyorsunuzdur. Genelde kitabımda gereksiz anlatımlara

değinmiyorum, çünkü gereksiz bilgilerle beyin hücrelerinizi boşu boşuna

meşgul etmek boşa vakit kaybıdır. Daha çok örnekler eşliğinde konuları

anlatıyorum ve bir konuda daha önce anlatmadığım konulara değinmiyorum. O

yüzden size tavsiyem, kitabı baştan sona doğru okumanız ve uygulamanız

olacaktır. Bazen kitaptaki örnekler uzun gelebilir, fakat sizde göreceksiniz ki

örneklerin uzun olmasına rağmen bir zorluk çekmeyeceksiniz, çünkü örnekleri

hem basit tuttum hemde daha önce anlattığım bölümleri koydum.

Musa ÇAVUŞ - 2010

Musa ÇAVUŞ 9

Musa ÇAVUŞ 10

Bölüm 1

JavaScript’e giriş

Musa ÇAVUŞ 11

1.1 JavaScript ile web sayfası bağlantısı

Fazla lafı uzatmadan ve gereksiz yazılarla sizi meşgul etmeden hemen ilk

örneğimiz olan JavaScript kullanmadan basit bir HTML örneğine geçiyorum.:

<html> <body> Bu sayfada JavaScript kullanilmiyor. </body> </html> jsyok.html

Editör olarak herhangi basit bir metin editörü kullanabilirsiniz. Windows

altındaki Notepad çok basit bir editördür fakat sizin ilk aşamada tüm

değişiklikleri kendiniz kodlayacağınızdan JavaScript’i daha verimli

öğrenebileceksiniz. Ben biraz daha kolaylık ve renklilik olsun diye Opensource

olan Notepad++ editörünü kullanıyorum.

Yukarıdaki kodu jsyok.html dosyasına kayıt edin ve fare ile çift tıkladığınızda

standart tarayıcınız açılacaktır ve şu yazıyı göreceksiniz.

Bu sayfada JavaScript kullanilmiyor.

Kitaptaki HTML kodlarını açıklamıyorum, çünkü sizin HTML bilgisine sahip

olduğunuzu varsayıyorum. Bundan sonraki örnekleri verirken, önce örneği

yazacağım ve ardından ekran çıktısını ekleyeceğim. Yukarıdaki örneği

JavaScript ile nasıl yapabiliriz?

JavaScript kullanabilmenin birkaç yolu vardır. Bunlardan ilki <script> </script>

arasına yazacağımız komutlarla olabilmektedir.

<html> <body> <script> alert("Merhaba Dünya"); </script> </body> </html> alert.html

Musa ÇAVUŞ 12

Şekil1

Html kodunda <script> ile </script> tagları arasında alert() fonksiyonunu

kullandım. alert() fonksiyonunun özelliği, parametre olarak verdiğiniz metini

Şekil1’deki gibi ekranda göstermesidir. Sarı bir üçgen içerisinde bir ünlem,

yanında bizim alert() fonksiyonuna parametre olarak verdiğimiz metin, bir

“Tamam” düğmesi ve başlık olarak “[JavaScript Uygulaması] yazısı. Ben

uygulamalarımı çalıştırırken Firefox kullanıyorum. JavaScript öğrendikten

sonra, size tavsiyem, örneklerinizi birkaç tarayıcıdan geçirmek olsun, çünkü

JavaScript her tarayıcıya göre farklı sonuç verebilmektedir. Uygulamalarınızın

sonuçlarından emin olabilmek için birkaç tarayıcıdan geçirmelisiniz. Sizin

uygulamanızı, web sayfanızı ziyaret eden kişilerin ne tür bir tarayıcı

kullandığını önceden kestiremediğiniz için bunu yapmanız gerekmektedir.

JavaScript programlamasını bizler daha çok Đnternet ortamında kullanırız. Bu

yüzden Đnternet hakkındaki bilgilerimiz temel seviyede yeterlilik göstermelidir.

Đnternet sadece “World Wide Web” değildir, Mesela ftp’de Đnternet ortamında

kullanılan bir protokoldür ve www protokolünden çok daha önce kullanılmıştır.

Tarayıcınızın adres kısmına ftp://ftp.microsoft.com/ yazın ve arama tuşuna

basın. Ben bunu yaptığımda karşıma şu bilgiler çıktı:

Musa ÇAVUŞ 13

Şekil2

ftp gibi birçok Đnternet hizmetleri mevcuttur. Hepimizin kullandığı E-Mail.

Uzaktaki bilgisayarları kullanabilmek için kullandığımız telnet protokolü. ssh,

scp ve usenet gibi.Yalnız Đnternet ortamı www sayesinde bu popülaritesini

kazandı. Biz www özelliğini tarayıcımızda http protokolüyle kullanabiliriz.

Yine adres çubuğunda http://www.hotmail.com.tr girdiğimde şöyle bir görüntü

elde ediyoruz:

Musa ÇAVUŞ 14

Şekil3

Karıştırmamamız gereken nokta http ile html’dir. http Đnternet’te yayımlanan

web sayfalarına ulaşmak için gereken bir protokoldür. html ise web sayfalarının

içeriğini görebilmemiz sağlayan bir tarayıcı dilidir.

Şekil3’te çıkan görüntünün üzerine sağ fare ile tıkladığınızda ve çıkan popup

mönüsünden “Sayfa kaynağını göster” seçeneğini seçtiğinizde karşınıza

Şekil3’teki sayfanın HTML, CSS ve JavaScript kodu gelecektir.

Musa ÇAVUŞ 15

Şekil4

Günümüzdeki önemli web saylarını JavaScript olmadan düşünmek mümkün

değildir. Herkes bu yüzden tarayıcısında JavaScript özelliğini kullanmaktadır,

ama bazı kişiler buna rağmen JavaScript’lere izin vermek istememektedirler.Bu

kullanıcılar için şöyle bir kod eklentisi yapabilirsiniz:

<html> <body> <script> alert("Merhaba Dünya"); </script> <noscript> Tarayiciniz JavaScript desteklemiyor. </noscript> </body> </html> jsdestekyok.html

<noscript> tagı JavaScript desteklemeyen tarayıcılarda taglar arası verilen

metini ekranda göstermektedir.

Musa ÇAVUŞ 16

<script> tagını kullanırken “language” parametresiyle hangi dili kullandığımızı

belirtebiliriz. <script> tagı bir HTML tagıdır, JavaScript tagı değildir. Bu

parametrede “VBScript” ya da JavaScript’in eski adı “LiveScript” yazabilir. Biz

örneklerimizde standart olan “JavaScript” terimini kullanacağız. Bu noktada

HTML kodu kullandığımız için, büyük küçük yazımı önemli değil, siz

“JavaScript” terimini istediğiniz gibi yazabilirsiniz.

<html> <body> <script language="JavaScript"> </script> </body> </html>

language.html

language parametresinin kullanılmadığı durumlarda “type” parametresini

kullanarak mime-type’ını tanımlamamız gerekiyor. mime-type, dosya formatını

tanımlamaktadır. Uluslararası bir standarttır ve bu standart ile bir çok formatı

tanımlayabilirsiniz, 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 bölümden oluşmaktadır.

Yukarıdaki kodda ana kategori text terimi olmakla beraber, alt kategori

javascript terimidir.

Web sayfaların %95’i language terimini parametre olarak kullanırlar. Daha

önceki örneklerde farkına vardıysanız, ne language ne de type parametresi

kullandım ve kodumuz çalıştı. O zaman ne diye bu kadar çene yoruyorum

dersiniz? Web sayfanızı XHTML kullanarak gerçekleştirmek istiyorsanız type

parametresini kullanmak zorundasınız. JavaScript versiyon farklılıklarını

Musa ÇAVUŞ 17

gözetmek istersenizde genelde language parametresini kullanmalısınız. Onun

dışında bu parametreleri kullanmadan web sayfaları oluşturabilirsiniz.

1.2 JavaScript ile kütüphane kullanımı

JavaScript’leri web sayfalarında kullanmak istiyorsanız bunları kütüphanelerde

saklamayı tavsiye ederim. Böylece projeler daha okunaklı olabilir ve bir

fonksiyona istediğiniz kadar kullanabilirsiniz. Yazdığınız kütüphaneyi HTML

içerisinde kullanmak istiyorsanız, <script> tagında “src” parametresini

kullanarak, kütüphane dosyasının yerini ve adını yazıyorsunuz.

<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

Musa ÇAVUŞ 18

Şekil5 benimFonksiyonlarim.js dosyası ile kutuphaneKullanimi.html dosyası aynı

dizinde olduğundan, “src” parametresine sadece benimFonksiyonlarim.js

yazmak yeterlidir. Kütüphanede, örnekte olduğu gibi fonksiyonlar ya da

değişkenler kullanabilirsiniz. Fonksiyonlar ve değişkenler daha sonraki

konularda ele alınacaktır, şimdilik kütüphane kullanımı nasıl oluyor onu

bilmeniz yeterlidir. “src” bağlantısını gerçekleştirdikten sonra,

kutuphaneKullanimi.html dosyasında hosgeldin() fonksiyonunun adını yazarak

çağırabilirsiniz. Daha önce belirttiğim gibi bunun avantajı bir çok HTML

dosyasından bu bağlantıyı gerçekleştirerek, hosgeldin() fonksiyonunun

çağrılabilmenizdir.

Kullandığımız kütüphaneyi incelerseniz, özel bir yapıya sahip değildir.

Kullanmak istediğim fonksiyonu yazdım o kadar. Đcabında istediğim

değişkenleri de sırasıyla tanımlayabilirdim. Kafanıza göre takılabilirsiniz.

1.3 JavaScript versiyonları

Musa ÇAVUŞ 19

JavaScript, bir çok programlama dili gibi çeşitli versiyonlarla varlığını

göstermektedir. Geleneğe uyalım diye böyle bir şey olmamıştır. Her versiyonda

yeni teknolojileri bünyesinde barındırmaktadır. Eski tarayıcılar JavaScript’in

yeni versiyonlarını tanıyamadığı için, kullanılacak yeni teknolojileride

tanıyamayacaktır.

<script language="JavaScript1.5">

location.href="index15.html";

</script>



</script>



</script>



</script>



</script>



</script>

versiyon.html

“language” parametresiyle JavaScript’in versiyonunu belirtebiliyoruz.

location.href çağırısıyla web sayfasının hangi sayfaya iletileceğini söylüyoruz.

Diyelim ki bizim tarayıcımız JavaScript 1.3 versiyonunu destekliyor, o zaman

sayfa index13.html sayfasına iletilir ve tarayıcı index13.html dosyasını işleme

koyar.

Internet Explorer “JavaScript1.0” ifadesini tanımamaktadır. Aynı şekilde yeni

tarayıcılardan bazılarda “JavaScript1.4” ve “JavaScript1.5” ifadelerini

tanımamaktadır. Bu ifadeleri tanımadıkları için <script> tagında yazılan kod

parçası işleme sokulmamaktadır. Şu da bir gerçek eski tarayıcıları kullanan

kişilerin sayısı oldukça azdır ve emin olun ki bu oran %1 bile değildir. Aslında

bu konuyu koymayacaktım fakat sizi daha derin konulara girmeden önce basit

konularla ısındırmak istiyorum. Programcı olabilmek için her konuyu bilmenize

Musa ÇAVUŞ 20

gerek yoktur sadece ihtiyacınız olan konuları bilseniz yeterlidir. Sakin her

konuyu mutlaka bilmeliyim diye düşünmeyin, çünkü her şeyi bilemezsiniz fakat

nasıl yapıldığını bilebilirsiniz.

1.4 JavaScript desteği var mı? JavaScript herkes tarafından kabul görmüş durumdadır, fakat yine de

kullanıcılardan bazıları JavaScript’i tarayıcısında engellemiş durumundadır.

Acaba bunu ortaya çıkartabilir misiniz? Cevap evettir.

<html>

<head>

<meta http-equiv="refresh" content="5;URL=jsyok.html">

</head>


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 sayfanın header kısmında bir meta tag vardır. http-equiv parametresi

sayfanın ne yapacağını söylüyor ve content kısmındaki 5 rakamı saniye

düzeyindeki zamanlamadır. Bir de URL ifadesindeki jsyok.html dosyası yer

almaktadır. Bunun anlamı, sayfaya gelen ziyaretçi 5 saniye sonra verilen adrese

iletilsin demektir. location.href = “jsdestekyok.html” ile ziyaretçinin tarayıcısı

JavaScript destekliyorsa “jsdestekyok.html” sayfasına git denilmektedir.

JavaScript sayfada yoksa 5 saniye sonra jsyok.html sayfasına iletim

gerçekleşecektir. Tarayıcılarda otomatik iletim engellenebildiği için bu

anlattıklarım çalışmaz. Bunun için ek olarak ziyaretçiye link şeklinde iki olanak

sunmalıyız. Kullanıcı bu durumda JavaScript desteği almak istiyorsa gerekli

linki tıklar ve JavaScript destekli sayfaya geçer. Đstemiyorsa JavaScript olmayan

sayfaya geçer.

Musa ÇAVUŞ 21

1.5 Güvenlik Gerçekte JavaScript güvenlik sistemini delebilir. Bunlara bir kaç örnek verecek

olursam, Đnternet adresini gösteren linkleri gizlemek, girdiğiniz sayfada birden

bir sürü popup penceresinin açılması, istenilmeden web sayfasının kapanması,

ardı ardına açılan pencerelerle sisteminizin kilitlenmesi. Son yazdığıma aşağıda

bir örnek var, yalnız sisteminizi seviyorsanız ve tüm bilgilerinizi

yedeklediyseniz bu örneği deneyebilirsiniz, çünkü çok basit ve tehlikeli bir

yöntem.

<html>

<body>



<script>

while(true) open("","");

</script>

</body>

</html>

guvenlikacigi.txt Đçinde yazanları ileriki bölümde ayrıntılı anlatacağım. Bu kodun yaptığı bir

döngü içerisinde sonsuza kadar pencere açmaktır.

JavaScript ile harddiskinizin istenilen bölümüne bilgi yazamazsınız ya da

istenilen bölümden çok kolay bilgileri okuyamazsınız. Eğer olumlu

kullanıldığında çok faydalı bir dildir. Tabi bu JavaScript’in hiç zarar vermez

anlamını taşımasın. JavaScript’i ufak görmeyin, kitabın diğer bölümlerinde

jQuery kütüphanesi anlatılacaktır. JavaScript, jQuery’nin temelini

oluşturmaktadır. jQuery ile de acayip sayfalar programlayabilmektesiniz.

Acayip diyorum, çünkü gerçekten acayip sayfalar oluşturabildiğinize kendiniz

bile inanamayacaksınız.

Musa ÇAVUŞ 22

Bölüm 2 XHTML, HTML, XML ve CSS temel bilgileri

Musa ÇAVUŞ 23

XHTML, HTML, XML ve CSS hakkında temel bilgiler vermek istiyorum,

çünkü kitaptaki konular derin olmasa bile ara sıra bu teknolojilerle beraber

çalışmaktadır. Bunun sebebi, günümüz web sayfalarında bu teknolojilerin

genelde beraber kullanılmasında yatmaktadır.

Ayrıca diğer bölümlerde bu teknolojilerin kullanıldığı yerlerde burada

anlattığımın dışında komutlar kullanırsam onları da o bölümlerde anlatacağım.

Böylece kitabın bu bölümünde bu konularla fazla vakit harcamamış oluruz.

2.1 HTML Modern web sayfaları HTML teknolojisini sadece yapısal anlamda

kullanmaktadırlar. Yani gereken komutlar kullanılıyor ve görsel kısım CSS

teknolojisiyle düzenleniyor. JavaScript komutlarıylada programlama kısmı

gerçekleştiriliyor. Bu yüzden HTML ile kullanacağımız az sayıda önemli

komutlar kalmaktadır. Bunlarda yapısal komutlardır. Tabi aranızda HTML

dilini su gibi içmek isteyen varsa, piyasada bu konuda oldukça çok kitap var.

Ben diyorum ki gerek yok, alem uzaya çıkıyor siz hala tekeri yeniden mi

keşfetme peşindesiniz?

<html>

<head>

<title>

Basit bir HTML Sayfasi

</title>

</head>

<body>

</body>

</html>

yapi.html

Musa ÇAVUŞ 24

Şekil6 HTML sayfasındaki tüm içerik <html> tagın içine konmaktadır. <html> tagı

HTML sayfasının kök tagıdır. Ondan sonra <head> tagı gelmektedır. <head>

tagında HTML sayfasının baş kısmı yer alır. Gördüğünüz gibi <title> tagı da bu

kısımda yer almaktadır. <title> tagı ile tarayıcınızın başlığını

belirtebiliyorsunuz. Sekme özelliği gösteren tarayıcılarda da sekmedeki metni

de buradan değiştirebiliyorsunuz. <body> kısmında HTML sayfasındaki görsel

kısım yer almaktadır. <html>, <head>, <title>, <body> tagları HTML

sayfasının temel yapısıdır. Bunların yanı sıra doküman tipini belirten bir üst

yazı vardır. Onu burada vermek istemiyorum, çünkü başlangıç seviyedeki

kişiler için kafa karıştırıcı bir bilgidir. Tarayıcılar, doküman tipini belirten

yazıyı yazmasanız, tolerans uygulayarak, bunu bir hata olarak

görmeyeceklerdir. Zaten bu yüzden bunu bilmesek olur. Önemli gördüğüm

tagları, örnekler eşliğinde kısaca ve derine inmeden anlatacağım ki fazla

kafanızı karıştırmak istemiyorum.

Başlıklar

Musa ÇAVUŞ 25

HTML sayfalarında yazıların üzerine başlık atabilmeniz için 6 büyüklükte

başlık tagı mevcuttur. Bunlar, <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>

taglarıdır. <h1> en büyük başlıktır. <h6> ise en küçük başlıktır.

<html>

<head>

<title>


</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

Musa ÇAVUŞ 26

Şekil7 Paragraf Bir Paragraf başı yapmak istiyorsanız <p> tagını kullanabilirsiniz. <p> tagının

bittiğini göstermek için </p> tagını isteğe bağlı kullanabilirsiniz, mecburiyet

yoktur.

<html>

<head>

<title>


</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 Satır başı Metinlerinizi bitirdikten sonra yeni bir satıra geçmek istiyorsanız <br> tagını

kullanabilirsiniz. Paragraftan farklı olarak <br> tagını istediğiniz yere

koyabilme özelliği taşımasıdır. <br> tagı metininizi, satır atlamadan ikinci satıra

geçirmektedir. Diyelim ki Windows’daki Notepad programını kullanıyorsunuz.

Bir alt satıra geçebilmek için ne yapıyorsunuz? Enter tuşuna basıyorsunuz.

HTML’yi geliştiren gençlerde bu işleme <br> demişler.

<html>

<head>

Musa ÇAVUŞ 28

<title>


</title>

</head>

<body>

Satir Basi<br>

<br>Bugun hava cok guzel<br>

Nasilsin?

</body>

</html>

satirbasi.html

Şekil9 Listeler Metinlerinizi gruplayarak göstermenin yolu listeleri kullanmaktan geçer. <li>

tagı ile bir listedeki girdiyi tanımlarsınız ve </li> bu girdiyi bitirmiş olursunuz.

<li> tagından önce kullanacağınız tag listenin şeklini gösterir. <ul> tagı listenizi

siyah noktalı bir liste yapar. <ol> tagı ise listenizi sayısal bir liste yapar. Liste

içerisinde listede kullanabilirsiniz. Bunun için <li> tagından sonra <ol> ya da

Musa ÇAVUŞ 29

<ul> kullanabilirsiniz. Liste şekli olarak sadece <ul> ve <ol> yoktur, fakat

bizim için bu tagları bilmek yeterlidir.

<html>

<head>

<title>


</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>

Musa ÇAVUŞ 30

</html>

listeler.html

Şekil9 Tablolar HTML’de tablolar başlı başına bir konudur, fakat burada da bu konuya

ihtiyacımız olduğu ve kafa karıştırmayacak kadar değineceğim.

Bir tabloyu <table> tagı ile tanımlayabilirsiniz. Tablodaki her satır için <tr>

tagını ve her sütün içinde <td> tagını kullanıyoruz.

<html>

Musa ÇAVUŞ 31

<head>

<title>


</title>

</head>

<body>

<table border="1">

<tr>

<td>1. Satir, 1. Sutun</td>



</tr>

<tr>




</tr>

</table>

</body>

</html>

tablo.html

Şekil10

Musa ÇAVUŞ 32

Đlk <tr> taglı bölüme bakarsanız, üç tane <td> tagı kullandım. Tablonun ilk

satırında üç tane sütun oluşturmuş oldum. Đkinci satır içinde üç sütun

oluşturmak istediğim için, aynı şekilde üç tane <td> tagı kullandım. Sütunları

</td> ile satırları ise </tr> ile kapatmalıyız. Son olarak tablonun bittiğini

gösteren </table> tagını kullandım. Örnekteki border parametresi tablonun

çerçeve kalınlığını göstermektedir. Ben 1 değerini verdim ki satır ve sütunları

görsel olarak ayırt edebilelim.

div ve span HTML’de bilmemiz gereken en önemli taglardır, çünkü CSS teknolojisi ile çok

kullanıyoruz. <div> tagı ile HTML dokümanını bölümlere ayırabiliyoruz.

<span> tagıylada metin bölümlerini ayırabiliyoruz Daha sonraki bölümlerde,

özellikle CSS konusunda <div> ve <span> taglarıyla daha detaylı bir anlatım

yapacağım.

<html>

<head>

<title>


</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 kırmızı bölümü bir blok olarak HTML sayfasında

ayırdım. <div> tagında style parametresini kullanarak bu bloğu boyadım,

yüksekliğini ve genişliğini verdim. Bunu CSS bölümüne değindiğimde daha iyi

anlayacaksınız.

<span> tagında da style parametresini kullanarak içerisinde bulunan kelimenin

yeşil renk olmasını sağladım.

HTML için bilmeniz gereken bu kadar. Sizi fazla sıkmadan hayatta

kullanabileceğiniz en önemli tagları anlattım. Gerçekten diğer tagları bilmenize

gerek yok. Beyninize giden oksijeni gereksiz bilgilerle doldurmayın.

2.2. XHTML Web ortamında XHTML uzundur varlık göstermesine rağmen, web sayfalarının

çoğu HTML dilini kullanmaktadırlar. Bunun nedeni HTML, hataları tolerans

göstermesinden kaynaklanmaktadır. Aşağıdaki ilk örnek basit bir HTML

sayfasının kodudur, ikinci örnekse aynı kodu XHTML ile nasıl kodlandığını

göstermektedir.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Musa ÇAVUŞ 34

<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 dosyalarına tıkladığınızda Şekil12’deki aynı

görüntüyü görürsünüz. htmlsayfa.html dosyasına baktığımızda en üstte

“<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

“ yazısını görüyoruz. Bu HTML 4.01 standartlarına göre doküman tipini

belirtmektedir. Şimdiye kadar böyle bir tanımlama kullanmamamıza rağmen

nasıl oldu da yazdığımız kodlarla HTML sayfalarımızı çalıştırabildik? HTML

bu gibi hatalara tolerans göstermektedir. Yine xhtmlsayfa.xhtml dosyasının en

üstünde buna benzer bir tanımlama görüyoruz. XHTML’de bu tanımlamayı

yapmaya mecburuz. Üstelik HTML tanımlamasına göre de biraz daha uzun. Đki

dosya arasındaki ikinci farklılık <html> tagındaki farklılıktır. XHTML’deki

<html> tagına xmlns parametresi eklenmiştir. Bu parametreyi, XHTML

kullanırken mecburen tanımlamak zorundayız. Kopyalama metoduyla ya da

farklı araçlarla bu satır otomatik olarak eklenebilir. XHTML’de mecburi olarak

<head> ile tanımlanmış bir başlık kısmı ve <body> ile tanımlanmış bir gövde

alanı olması gerekmektedir. Biz bunlara head ve body alanı diyoruz. Pencerenin

başlık kısmı olan <title> bile mecburi olarak tanımlanması gerekiyor.

HTML dosyasında bu gibi mecburiyetler yoktur. <html> tagının altına

bile metinler yazabilirsiniz ya da <title> bölümünü boş bırakabilirsiniz. HTML

bunların hepsine tolerans gösterecektir. XHTML’de 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

Musa ÇAVUŞ 36

Şekil13 XHTML’de </html> tagından sonra “alo” yazdım ve XHTML buna tolerans

göstermeyerek Şekil13’de gördüğünüz gibi bir hata mesajı iletti.

XHTML’lerde parametre atamalarında da dikkat etmelisiniz. Tüm atamaları ""

işaretleri arasına yapmanız gerekiyor. HTML’de böyle bir kısıtlamada yoktur.

Dikkat etmeniz gereken bir başka nokta, XHTML’de büyüklük küçüklük

yazmaları. Örneğin <H1>Baslik</H1> gibi bir kodlama XHTML’inizin hata

vermesine sebep verecektir.

XHTML’de tüm taglar kapatılması gerekiyor. HTML’de <br> çok

kullanılır, bunu XHTML’de <br /> ya da <br> </br> şeklinde tanımlamalısınız.

Görüldüğü gibi XHTML hiç bir noktada tolerans göstermemektedir. Bu da

XHTML’in web dünyasında fazla tercih edilmemesini doğurmuştur.

2.3. Hatasız web sayfası Hatalardan sonra web sayfamızın hatasız olduğunu nasıl anlarız diye bir soru

gelebilir. Bunun için W3C yani HTML standartlarını belirleyen kurum bizim

için bir sayfa geliştirdi. Sayfaya http://validator.w3.org adresinden

ulaşabilirsiniz.

Musa ÇAVUŞ 37

Şekil14 Address seçeneğine www.google.com yazarsanız ve Check düğmesine

basarsanız şöyle bir ekran çıktısı alırsınız:

Musa ÇAVUŞ 38

Şekil15

Şimdi diyebilirsiniz, google gibi dünyaca ün salmış bir firma nasıl olurda

sayfasında 37 hata yapmış olabilir? Hemen sevinmeyin google amcanın hatasını

bulan ilk insanım diye. Oraya başka adresleri yazsanız hatalar olduğunu

göreceksinizdir. W3C standartlarının o kadar önemli olmadığını buradan

görebilirsiniz.

http://validator.w3.org adresinde sisteminizde bulunan dosyaları da

upload ederek kontrol ettirebilirsiniz. Yalnız bunun için Firefox eklentisi daha

kullanışlıdır. Yapmanız gereken Web Developer’i Firefox ortamına yüklemek

olacaktır. Firefox’unuzu açın ve Mönü kısmından Araçlar, daha sonra da

Eklentileri tıklayın.

Musa ÇAVUŞ 39

Şekil16 Çıkan pencerede arama kısmına “Web Developer” yazın ve Firefox

uygulamasına ekleyin düğmesini tıklayın.

Şekil17

Musa ÇAVUŞ 40

Kurulum bittikten sonra Firefox yeniden başlatılacaktır. Araçlar->Web

Geliştirici-> Çeşitli-> HTML denetle sekmesini tıkladığınızda sayfanız W3C

sayfasına yönlendirilecektir ve bir denetleme yapılacaktır.

Şekil18 2.4. Web sayfalarında Style Sheet kullanımı HTML’in durağan sayfalarına canlılık katabilmek için Style Sheet teknolojini

çok kolay sayfalarımıza entegre ederek kullanabiliriz. Style Sheet teknolojisinin

en büyük avantajı JavaScript gibi doğrudan HTML sayfasına kodlanabilmesidir.

Yapılması gereken çok basittir, <style type=”text/css”> tanımlaması

yaptığımızda Style Sheet teknolojisini kullanabiliriz. Başka bir metot ise

aşağıdaki 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 Sheet’leri başka bir dosyada sakladığınızda o dosyanın adını “link” tagını

kullanarak “href” parametresinde tanımlayabilirsiniz. “type “ ve “rel”

taglarınıda yukarıdaki örnekteki gibi tanımlarsanız benimcss.css dosyasını

HTML sayfanızda kullanabilirsiniz. Şu an böyle bir dosyamız olmadığı için

ekran görüntüsü Style Sheet olmadan durağan bir görüntü verecektir.

Şekil19

Style Sheet kullanarak bu sayfayı canlandırmayı diğer bölümde anlatacağım.

Style Sheet teknolojisinin birde üçüncü kullanım şekli vardır. Bunu daha önceki

örneklerimizde kullanmıştım. Kullandığımız HTML tagında “style” parametresi

ile Style Sheet teknolojisini kullanabiliriz.

Musa ÇAVUŞ 42

<html>

<body style="background:green;">

</body>

</html>

css2.html

Şekil20 Gördüğünüz gibi “style” parametresinde Style Sheet dilini kullandım ve

tarayıcının arka planının yeşil göstermesini sağladım. Bu tür kullanımlar çok

basittir fakat tavsiye edilmiyor, çünkü CSS kullanımdaki avantajları

kullanmamış oluyorsunuz. CSS’teki en büyük avantaj HTML yapısını ve

görselliği ayırmasıdır. Bunu bir sonraki bölümde daha iyi anlayacağız.

2.5. CSS

Musa ÇAVUŞ 43

CSS (Cascadıng Style Sheets) web tasarımcıların işini çok kolaylaştırmaktadır.

JavaScript ile CSS’i kombine ettiğinizde büyük avantajlar elde etmiş olursunuz.

CSS ile web sayfasındaki görünümler genelleştiriliyor. Bunu yapabilmeniz için

CSS’i anlamanız gerekiyor. Ben burada CSS konusuna kısa değinmek

istiyorum, çünkü kitabımızın konusu CSS değil fakat JavaScript ile kullanımını

gösterebilmek için CSS’e kısa bir giriş mutlaka yapılması gerekmektedir.

Alışılmışın dışında biraz geniş bir açıklama yapmak istiyorum. Lütfen iyi

okuyun ve doğru uygulayın, çünkü bu bölümde verilen bilgiler önemlidir. En

azından CSS nasıl çalışıyor onu bilseniz bile diğer bölümlere geçebilirsiniz.

<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;

Musa ÇAVUŞ 44

}

-->

</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 sayfamızın birden nasıl canlılık kazandığını

Şekil21’de görüyorsunuz. css3.html dosyasındaki CSS bilgisini anlarsanız,

Musa ÇAVUŞ 45

kitaptaki CSS ile JavaScript örneklerini anlamış olursunuz. CSS’te mantık çok

basittir, önce değiştirmek istediğimiz alanı belirtiriz, sonra “{}” parantezleri

içerisinde bu alanlarla ne yapmak istediğimizi tanımlarız. h1 ve h4 alanlarında

bir tanımlama yapabilmek için “h1, h4” yazarız. Bu kısma selektör deniliyor.

Örnekte h1 ve h4 alanlarının arka plan rengini değiştirmek istediğim için

“background” tanımlaması yaptım. Đki nokta üstü üste “background”

tanımlamasına iki nokta üst üsteden sonra yazdığım değeri atamaktadır. Noktalı

virgülle bir tanımlamayı bitirmiş oluyoruz. Lütfen eşittir işareti yerine iki nokta

üst üste kullanıldığına dikkat edin. Bazı tarayıcılar eşittir işaretini kabul ettikleri

için bu hataya düşebilirsiniz ve eşittir işaretini kabul etmeyen bir tarayıcı ile

karşı karşıya kaldığınızda hatanın nereden kaynaklandığını bulamayabilirsiniz.

Selektör tanımlamalarının içerisinde kullanılan tanımlamalar aslında kendini

açıklayıcı bir nitelik taşımaktadır. Örnekte kullandığım, “font.size”,

Đngilizceden tercüme edersek yazı tipi büyüklüğü anlamına gelir. “visibility”

görünürlük manasını taşır. “color” renk demektir. Bu anlamlar doğrultusunda da

sayfamızda değişiklikler olmaktadır.

“h1.a” değişken selektörüdür. HTML kodunda “<h1 class=”a”...” olarak

tanımlanan bölgeye bu değişken selektörü hükmetmektedir. “h1” HTML

tagında “class” parametresini kullanarak “h1.a” değişken selektöründeki

tanımlamaların burada uygulanmasını bu şekilde sağlamış olduk. “.b” gibi

selektörler “class” parametresinin değeri “b” olan tüm HTML tagları işlem

görür. Bizim örneğimizdeki <span> ve <i> tagında olduğu gibi. Başka bir

selektör şeklide “#” ile başlayan selektörlerdir. Bu selektörler, HTML taglarında

“id” parametresi kullanılan taglarla işlem görmektedirler. “*” selektörü HTML

taglarında kısıtlama getirilmiyorsa hepsi için geçerlidir. Çok ilginç bir

selektörde “a:hover” selektörüdür. Fare ile çıkan web sayfasında “Tıkla”

kelimesinin üzerine geldiğinizde renginin yeşil olduğunu göreceksinizdir. Ek bir

programlama yapmadan ve sadece CSS tanımlaması kullanarak bu özelliği web

sayfanıza katabiliyorsunuz.

Firefox’unuza kurduğunuz Web Geliştiricisindeki CSS’le ilgili yardımınıza

koşacak bir çok özellik vardır. Benim tavsiyem bunları tıklayarak bir bakış açısı

elde etmenizdir. Araçlar->Web Geliştirici->CSS Hata yok->CSS’yi Düzenle

seçeneğini seçtiğinizde, canlı olarak yaptığınız tüm değişiklikleri sayfanızda

görebiliyorsunuz.

Musa ÇAVUŞ 46

Şekil21 2.6. XML Web sayfaları için XML öğrenmenin ne anlamı olduğunu düşünebilirsiniz.

Birincisi XHTML kullanıyorsanız, XML hakkında bilgi sahibi olmalısınız.

XHTML için XML öğrenmek gerekiyorsa XHTML kullanmam olur biter

diyebilirsiniz. Fakat web sayfalarını programlarken orada şurada XML ile ilgili

mutlaka bağlantıya geçeceğiz, çünkü sistemler aralarındaki iletişimi XML ile

gerçekleştiriyorlar. Bunun için XML temellerini bilmemiz gerekmektedir. Basit

bir XML örneği 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 açmaya çalışırsanız şöyle bir görüntü elde edersiniz:

Şekil22 XML’de, XHTML’de olduğu gibi kurallara uymak vardır, tolerans yoktur.

Kurallara uyulmazsa dokümanınız XML dokümanı olmaktan çıkar. XML

dokümanının XHTML’den farkı tagların daha önceden belli olmamasıdır. XML

dokümanında taglarda istediğiniz kelimeyi kullanabilirsiniz. websafaysi.xml

dokümanını size farklı bir şekilde göstermek istiyorum. Bunun için

Firefox’unuza ilk önce DOM Inspector Plugin’ini kurmalısınız. Firefox’unuza

daha önce Web Developer’i eklemiştik ve görsel olarak nasıl eklendiğini

göstermiştim. DOM Inspector’uda aynı şekilde arattırın ve Firefox

uygulamanıza kurun. Kurma işlemi bittikten sonra Araçlardan “Dom Inspector”

sekmesini tıklayın.

Musa ÇAVUŞ 48

Şekil23 DOM Inspector ile XML dokümanını incelediğimizde, bu yapının bir ağaca

benzediğini görürüz. Kök, düğümler ve yapraklar vardır. Düğümlere XML

dilinde “node” deniliyor. JavaScript içerisinde “node” objesini sıklıkla

kullanacağız.

XML dokümanı Firefox ile normal açtığımızda ağaç yapısını gördük.

Bunu Firefox bize bir metin satırı olarak iletmişti. XML dokümanına stil

bağlarsak HTML sayfası olarak görebiliriz. 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 dokümanına bir CSS dosyasını bağlamak çok kolaydır. Yukarıda “<?xml-

stylesheet” ile başlayan satırda “href” parametresine CSS dosyasını

belirtiyorsunuz, o kadar. Ben örnek bir CSS dosyası tanımladım:

* {

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;


color: blue;

}

aciklama {

display: block;


}

websayfasi.css Doküman XML olduğu için etkilemek istediğiniz tagıın adını selektör kısmına

yazmanız yeterlidir. Mesela “sayfa” tagının ekrandaki görünümü için selektör

olarak “sayfa” yazdım ve “{}” parantezlerinin arasına o bölüm ile ilgili görsel

tanımlamaları verdim. Tanımlamaları açıklamıyorum, çünkü CSS ile ilgili

tanımlamalar, fakat isimlerinden ne işe yaradığını anlayabilirsiniz.

Musa ÇAVUŞ 50

websayfasi1.xml dosyasına çift tıkladığınızda tarayıcınız şöyle bir sayfa

gösterecektir:

Şekil24 Bu sayfayı bir de DOM Inspector ile incelemek istiyorum. DOM, HTML

dokümanındaki ağaç yapısına verilen addır. DOM ağacıda diyebilirsiniz.

Musa ÇAVUŞ 51

Şekil24 Bir öncekinden farkı üst tarafında “xml-stylesheet” yazması gibi gelebilir fakat

öyle değildir. “Document” yazan yazının yanındaki şekle tıklayın ve oradan

“Stylesheet” sekmesini seçin. Sağ tarafta CSS dokümanında kullandığınız

kuralları göreceksiniz. Sağ taraftan “sayfa” seçeneğini seçerseniz şu görüntüyü

elde edersiniz:

Musa ÇAVUŞ 52

Şekil25 Analizler için DOM Inspector biçilmiş kaftandır. Örneğin “background-color”

seçeneğine çift tıklayın ve “Edit Style Rule” penceresine “rgb(99, 215, 15)”

değerini girin. Göreceksiniz ki “Tamam” düğmesine basar basmaz tarayıcınız

yeni değerlere göre websafaysi1.xml dokümanını gösterecektir.

Musa ÇAVUŞ 53

Bölüm 3

JavaScript Kullanımı

Musa ÇAVUŞ 54

3.1 Değişkenler

Değişkenler, ana hafızada programın çalışma esnasında değerleri saklayan

alanlardır. Saklanan alanlara, değerleri, eşittir işareti ile atayabiliyoruz.

Değerleri de daha önce tanımladığımız değişken ismiyle çağırabiliyoruz.

JavaScript programcısı veri tipiyle ilgilenmez, çünkü JavaScript bu işlemi

otomatik yapmaktadır. Bunun avantajı olduğu gibi çok büyük dezavantajı da

vardır.

<html>

<body>


benimDegiskenim = 21;

alert(benimDegiskenim);

benimdegiskenim = 213;

alert(benimDegiskenim);

</script>

</body>

</html>

veritipidezavantaj.html

Şekil26 veritipidezavantaj.html dosyasını çift tıkladığınızda ekrana iki defa 21 sayısının

geldiğini göreceksiniz. benimDegiskenim değişkenine 21 atadık sonra alert()

fonksiyonuyla bu değişkeni parametre olarak verdik. Daha sonra

benimdegiskenim değişkenine 213 atadık ve alert() fonksiyonuyla

benimDegiskenim değişkenini parametre olarak vermemize rağmen neden

ekranda ikinci defa 21 sayısı gözüktü dersiniz? Bunun nedeni JavaScript’in

büyüklük küçüklük yazımına dikkat etmesidir. Đkinci değişkeni tanımlarken “d”

harfini küçük yazdık. Tip tanımlaması yapmadığımız için yazım hatası

Musa ÇAVUŞ 55

gözümüzden kaçtı. Özellikle büyük JavaScript programlarında bu tür hataların

olma olasılığı çok yüksektir.

JavaScript’te satır kodlaması “;” yani noktalı virgül ile biter. alert()

fonksiyonu, parametre olarak verilen değeri ekranda Şekil26’da gördüğünüz bir

pencere stilinde gösterir.

var tanımlaması

<html>

<body>


degisken = 5.67;

alert(61 * degisken);

degisken = 234 /119;

a = "abc";

var b = true;

</script>

</body>

</html>

veritipleri.html

Şekil27

JavaScript’te değişkenlere istediğimiz değerleri atayabildiğimizi gördük.

Değişken atamalarında veritipleri.html örneğindeki gibi matematiksel işlemler

yaparak bunları gerçekleştirebiliriz. “var” tanımlamasına ne gerek var

denilebilir. “var” tanımlaması bir değişkenin değişken olduğunu tanımlar. “var”

kullanılmadan yapılan tüm değişken tanımlamaları JavaScript dünyasında genel

değişken olarak algılanır. Mesela fonksiyon içerisinde “var” sözcüğü

kullanılmadan yapılan bir tanımlama o değişkenin genel bir değişken olduğunu

gösterir. Başka programlama dillerinde bu böyle değildir, fonksiyon içerisinde

yapılan tanımlamalar sadece fonksiyon içerisinde kalmaktadır. “var”

Musa ÇAVUŞ 56

sözcüğüyle bunu değiştirebiliyoruz ve değişkenin sadece fonksiyona ait

olduğunu söylemiş oluyoruz.

3.2 Diziler (Arrays)

Diziler, JavaScript’te zor konular kategorisinde yer alır. Ben doğru anlatılırsa

zor olmayacağı inancındayım. Ayrıca diziler size büyük kolaylıklar

sağlamaktadır ve rutin olan işlemleri döngüler eşliğinde halledebilirsiniz. Dizi,

bir çok veri tipinin bir değişkende tutulması ve verilere bir indeks ile erişim

sağlanan mekanizmadır. Ufak bir kod ile dizileri anlatmaya başlamak istiyorum:

<html>

<body>


dizi = new Array();

document.write(dizi[0]);

dizi[0] = 5;


dizi[0] = "Kalem";


</script>

</body>

</html>

diziler1.html

Şekil28

Musa ÇAVUŞ 57

JavaScript’te bir değişken tanımlarken bir isim ve eşitlik işaretinin sağ tarafına

değerini yazarız. Dizilerde ise bu böyle değildir. Değişken adını yazdıktan sonra

eşitliğin sol tarafına “new Array()” yazarak bunun bir dizi olduğunu belirtmiş

oluruz. Anahtar kelime burada “new” kelimesidir. Array() ise bunun bir dizi

nesne olduğunu gösteriyor. Bu satırlar, Array tipinden yeni bir nesne oluştur

denilmek istenildi. Nesneleri daha sonra anlatacağım, o yüzden aman ben nesne

nedir bilmiyorum diye korkmayın. Hepsini öğreneceksiniz.

document.write() fonksiyonu tarayıcıya bir metin yazmak istediğinizde

kullanacağınız bir fonksiyondur. Parametre olarak verilen metin tarayıcıda

gösterilmektedir. dizi değişkenli dizimizi oluşturduktan sonra ben dizinin ilk

elemanına “5” değerini atadım. Bunu yaparken dizi değişkeninin hemen

ardından bir köşeli parantez açtım ve “0” yazarak köşeli parantezi kapattım.

JavaScript’te diziler sıfırdan başladıkları için ilk değeri sıfırıncı elemana

koyabiliyorsunuz. JavaScript’te bir değişkene istediğiniz tipte bir değer

atayabildiğiniz için daha sonraki satırlarda dizi dizisinin ilk elemanına “Kalem”

değerini atadım ve tarayıcının göstermesini sağladım.

Döngülere diğer konularda değineceğim fakat dizilerin bir avantajını

gösterebilmek için döngülerden yararlanmak istiyorum. Şimdilik sadece döngü

içerisinde dizinin nasıl kullandığını anlasanız yeterli olur.

<html>

<body>


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

Musa ÇAVUŞ 58

Şekil29

Şekil30

“a” dizisininin boyutunu “new Array(10)” tanımlamasında parantez içerisine

“10” değerini yazarak onluk bir dizi olarak ayarlayabiliyorsunuz. Daha sonra

dizinin birinci elemanına “1” değerini atadım ve ikinci elemanına “2” değerini

atadım. length() fonksiyonu dizinin boyutunu sayısal olarak vermektedir. Bizim

örneğimizde bu değer 10’dur, çünkü dizinin boyutunu 10 olarak ayarlamıştık.

Ekrana alert() fonksiyonuyla önce dizinin boyutu olan 10 getirilmektedir.

Tarayıcı ise dizinin ilk iki değeri atandığı için atanan sayıları göstermektedir.

Dizinin diğer elemanlarına değer atanmadığı için “undefined” yazısı

gelmektedir. Yani tanımlı değil yazısı gelmiştir.

JavaScript kodunda “a[20]=10” gibi bir tanımlama yapsaydık dizinin

boyutu, ilk başta 10 olarak tanımlamamıza rağmen 21 olacaktı.

Musa ÇAVUŞ 59

<html>

<body>


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

Musa ÇAVUŞ 60

Şekil32

Buradan şunu anlıyoruz, bir diziye atama yaparsak boyutunu büyütmüş

oluyoruz.

3.3 Operatörler

JavaScript dilinde diğer dillerde olduğu gibi operatörler mevcuttur. Ben bunları

bu bölümde yüzeysel olarak göstereceğim ve diğer konularda örnekler

derinleştikçe operatörleri kullanarak daha geniş açıklamalar yapacağım. Burada

sadece operatörlere değineceğim.

Musa ÇAVUŞ 61

Atama operatörü

Bir değişkene değer atamak isteniliyorsa atama operatörü kullanılır. Đşlem “=”

işaretiyle yapılır.

Büyük, küçük ve eşitlik operatörleri

Bunlar çok kullandığımız operatörlerin başında gelir. Đleride de göreceğimiz gibi if cümleciklerinde genellikle bunları kullanırız. Đnsan zihniyetine de yatkındır. Hani ufak çocuklara deriz, oğlum sen büyünce araba kullanabilirsin şimdi kullanmazsın. Burada çocuğun beyninde ben büyük isem araba kullanırım oluşuyor. if cümlesine fazla girmek istemiyorum, fakat ufak birkaç örnek verirsek bu operatörler beyin hücrelerimize daha iyi yerleşmiş 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>"); }

Musa ÇAVUŞ 62

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

Şekil33 if cümlecikleri genellikle kıyaslama yapmak içindir, bu konuya sonra parmak basacağız. Bizim bu konuda öğrenmek istediğimiz operatörlerdir. Đlk if cümlesinde diyoruz ki eğer ağabeyim 17 yaşından büyükse araba sürebilir. 17’den sonra gelen tam sayı 18 olduğu için ve biz abi değişkenini tam sayı olarak tanımladığımız için bu önerme doğru olmuş oluyor. Đkinci cümlecikte diyoruz ki eğer ağabeyim 18 yaşından büyük ya da eşitse o zaman araba sürebilir. 18 yerine 17 koysaydık, eşitlik dolaysıyla ağabey değişkeni 17 olsa bile bu önerme doğru olmuş olurdu, fakat biz biliyoruz ki araba sürmek için 18 yaşında olmak gerekiyor. Üçüncü cümlede ablam ağabeyimden küçükse ablam ağabeyime anadoludaki geleneğe göre abi demesi gerekiyor. Gerçi şimdilerde yavaş yavaş bu siliniyor, güç, kuvvet ve para kimdeyse ona abi abla deniliyor, fakat bu bizim konumuzun dışında. Dördüncü cümlede ben 15 yaşındaysam ufağım diye bir mesaj çıkıyor. Dikkat edilmesi gereken, “= = “ şeklinde bir operatör kullanılmıştır. Kıyaslamalarda “= = “ kullanılır, aktarmalarda “=” kullanılır. Birinde çift diğerinde tek eşittir operatörü kullanılır. Son cümlede ise ben 18 yaşında değilsem araba süremem ifadesinin JavaScript dünyasındaki şekli sunulmuştur. Eşit değil JavaScript’te görüldüğü gibi “!=” şeklinde ifade edilmektedir.

Musa ÇAVUŞ 63

Bir de && ve || operatörleri çok kullanırız, fakat bunlarda if cümleciklerinde anlatacağım. Diğer bazı operatörleri de örneklerde yeri geldiğince, ihtiyaca göre değineceğim. Operatör tablosunu da fikir edinmeniz açısından ve ihtiyaç duyulduğunda bakılması için aşağıda sunuyorum: Operatör Açıklama ++, -- artırma, eksiltme +, - toplama, çıkartma ~ bit tümleme ! logik tümleme *, /, % çarpma, bölme, kalan + Metinleri birleştirme << sola kaydırma >> sağa kaydırma <, <=, >, >= nümerik eşitleme = =, != eşitlik, eşit değil & bit düzeyinde ve işlemi ^ bit düzeyinde xor | Bit düzeyinde veya işlemi && logik ve işlemi || logik veya işlemi = atama işlemi Aritmetiksel operatörler

Sayısal değerler arasında hesaplamalar yapabilmek için aritmetiksel

operatörlere ihtiyaç duyarız. Toplama işlemi “+”, çarpma işlemi “*”, çıkarma

işlemi “-“, bölme işlemi “\”, modül işlemi “%” işaretleriyle yapılmaktadır.

Ayrıca özel aritmetiksel operatörlerde kullanılabilinmektedir.

JavaScript’te, operatörlerle farklı kombinasyonlu işlemlerde yapabilirsiniz. a+= 2 dediğinizde, a = a + 2 gibi bir işlem gerçekleştirmiş oluyorsunuz. Burada a değişkeni 2 değer artırılmaktadır. Ayrıca JavaScript parantezleri otomatik olarak uygulamaktadır. Örneğin a *= 3 + 5 dediğimizde Java bunu içinde şu şekilde çevirmektedir:

a = a * (3 + 5)

Değişkenleri artırmak ve eksiltmek programcının en çok yaptığı işlemlerden biridir. Eğer biz birer sayı artırmak ya da azaltmak istiyorsak JavaScript kardeşler bizi düşünerek bizim için bir kolaylık sağlamışlar. Aslında bu kolaylığı C dünyasından gelenler için olduğunu da düşünebiliriz. i++; i = i + 1 anlamına gelmektedir j--; j = j – 1 anlamına gelmektedir

Musa ÇAVUŞ 64

Artırma ve eksiltme işlemlerinde çoğunlukla i ve j harfleri kullanılmaktadır. Hangi nimete hikmet böyle yapılıyor, bunu bende bilmiyorum. “++” ve “--“ kullanılırken dikkat edilmesi gereken nokta, bu işaret kombinasyonunu değişkenden önce mi sonra mı kullandığımızdır. Bu işaretleri değişkenden önce kullanırsak, değişkendeki değer önce değişir ve değişken, o değer ile işlem görür. Sonra kullanırsak tam tersi olur. Gördüklerimizin hepsini bir örnek ile daha iyi pekişeceğinin kanısındayım. <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 Mantıksal Operatörler Birden çok şartı tanımlanmış kalıplar doğrultusunda bağlamak istiyorsanız bu operatörleri kullanmanız gerekmektedir. Örneğin 8 ve 11 ile bölünen sayıları bulmak istedğimizde ya da birden fazla şartı birbirine bağlamak istediğimizd bu operatörleri kullanırız. Java’da mantıksal operatörler olarak şunlar vardır: & (Ve), | (Veya) , ^ (Xor), ! (Değil). Xor: Đki tanımlamada true ya da i false ise bu işlem bize false sonucu verir. Diğer durumlarda true değerini iletir. Ve: Tanımlamalardan birisi false ise sonuç false olur. Diğer durumlarda true. Veya: Tanımlamalardan birisi true ise, sonuç true olur. Diğer durumlarda false. Değil: Tanımlamanın tersidir. Ve ve Veya işlemlerinde derleyici birinci tanımlamayı göz önüne alır. Mesela diyelim iki tanımlama var ve biz bunlarla bir Ve işlemi gerçekleştiriyoruz. Şöyle ki: false & true. Açıklamamıza göre Ve işlemlerinde tanımlamalardan birisi false ise sonuç false olacaktır.

<html>

<body>


document.write(true | false);

document.write("<br>");

document.write(true & false);


document.write(!false);


document.write(true ^ false);


document.write(1 | 3);


</script>

Musa ÇAVUŞ 66

</body>

</html>

operatorler3.html

Şekil35 true ve false işlemi Veya işlemine sokulunca sonuç true oluyor. true ve false Ve işlemine sokulunca sonuç false oluyor. false değerinin değili true olmuştur. true ve false Xor işleminden geçtiğinde şartımıza göre true sonucunu vermektedir. 1 ile 3 sayılarını Veya işleminden geçirince neden 3 olmaktadır? 1 sayısı, 2 tabanlı sayı sistemine göre “01” şeklinde ifade edilir.3 sayısıda, “11” şeklinde ifade edilir. 0 bilgisayar dilinde false, 1 ise true değerini alır. Böylece 1, sayısını “false true” şeklinde hayalımizde düşünecek olursak, 3 sayısını “true true” olarak düşünebiliriz. 1 sayısındaki ilk değer olan false ile 3 sayısındaki ilk değer olan true değerlerini Veya işleminden geçirdiğimizde true değerini alacağız. Yine 1 sayısındaki true değeriyle, 3 sayısındaki ikinci değer olan true değerini Veya işleminden geçirecek olursak sonuç true olacaktır. Yani 1 ile 3 sayısının Veya işleminden bize “true true” gibi bir ifade çıkacaktır. Bunun sonucu “11” olacaktır. “11” olan ikilik sayı sayı sistemini 10 tabanındaki bir sayı sistemine çevirecek olursak bize 3 rakamını verecektir. “|”, “&” ve “^“ işlemleri bit işlemleri olduğu için dikkat ettiyseniz true ve false işlemlerinde “1” ya da “0” sonucu oluşmaktadır. “1” true “0” ise false demektir. Nasıl mantık operatörlerini öğrenerek mantığınız alt üst oldu mu? Ve ve Veya işlemi bilgisayar dünyasının temellerinden biridir. Yalnız şu da bir gerçek bit işlemleri için ben şimdiye kadar hiç bir program yazmadım, sizde yazmayacaksınız diye düşünüyorum. Peki niye anlatıyorum bunları, dedim ya yeşillik olsun ve JavaScript’e ısınalım. Diyelim ki siz bir boksörsünüz ve

Musa ÇAVUŞ 67

ısınmadan dalıyorsunuz rakibinize, kaslarınızda mutlaka bir incinme meydana gelecektir. Bende şimdi hemen dalsam derin konulara sizinde beyin hücrelerinizde bir incinme meydana gelecek. Zaten farkına vardıysanız bir konuyu fazla saçmalamıyorum, sadece gerektiği kadar anlatıyorum. Bana güvenin. 3.4. Açıklamalar JavaScript kodlarınızda iki şekilde açıklama yapabilirsiniz. Birincisi “//” işareti

kullanarak sadece o satırda geçerli olmak şartıyla yapabileceğiniz açıklamalar.

Açıklamaların ikinci şekli “/* */” aralığında yapılmaktadır. Bu açıklama türüyle

daha çok satırda açıklama yapabilirsiniz ve her satır için “//” işareti

tanımlamanız gerekmemektedir.

<html>

<body>


// Bu bir aciklamadir

/*

document.write(4);


*/

</script>

</body>

</html>

aciklama.html 3.5 if ve switch karar yapıları

Bu karar yapılarıyla programımızın akışını değiştirebiliriz. if, Türkçe olarak

“eğer” demektir. Programınızı kodlarken, programınıza “eğer şu olursa şunu

yap” gibi direktif vermek isteyebilirsiniz. JavaScript’te bunu yapabilmeniz için

“if” ya da “switch” karar yapılarını kullanabilirsiniz. Döngülerinde kendilerine

özgü karar yapıları vardır, fakat bunu döngülerde ele alacağım.if komutuyla

ilgili kolay bir örnekle başlamak istiyorum:

Musa ÇAVUŞ 68

<html>

<body>


a = 9;

if (a < 10) {

document.write("a degiskeni 10 sayisindan kucuk");


}

if (a > 10) {

document.write("a degiskeni 10 sayisindan buyuk");


}

if(a != 20) {

document.write("a degiskeni 20 sayisina esit degil");


}

</script>

</body>

</html>

if.html

Şekil36

Musa ÇAVUŞ 69

if yapısı çok basittir, öncelikle “if” yazıyoruz sonra bir parantez açıyoruz,

parantezin içerisine büyüklük, küçüklük veya eşitlik operatörü kullanılan bir

kıyaslama ifadesi yazarak parantezi kapatıyoruz. Kıyaslama doğruysa “{}”

arasında olan blok işlem görüyor, yanlış ise “{}” arasındaki blok işlem

görmüyor. if yapısından sonraki blok tek satırlık bir kod ise “{}” parantezlerini

koymaya gerek yok, birden fazla satırsa mutlaka “{}” parantezlerini

kullanmalıyız.

Örnek “a” değişkenine “9” değerini atadım. “10” sayısından küçük mü

büyük mü onu kontrol ettim. En sonunda da “20” sayısına eşit değil mi onu

kontrol ettim. Çoğunlukla if yapısı, else yapısıyla birleştirilir. “else” Türkçe

olarak “değilse” manasını taşımaktadır. “Eğer ….. yap, değilse ….. yap” gibi

düşünebilirsiniz. Daha da genişleterek, “Eğer ….. yap, değilse eğer ….. yap,

değilse …. yap” şeklinde de bir yapı genellikle kullanılmaktadır.

<html>

<body>


a = 9;

if (a < 10) {

document.write("a degiskeni 10 sayisindan kucuk");


}else

if (a > 10) {

document.write("a degiskeni 10 sayisindan buyuk");


}else {

document.write("a degiskeni 20 sayisina esit");


}

</script>

</body>

</html>

ifelse.html

Musa ÇAVUŞ 70

Şekil37 Birinci blokta “a” değişkeninin “10” sayısından küçüklüğünü kontrol ettim.

Đkinci blok, eğer birinci if karar yapısı işlem görmediyse “else if” yani “değilse

eğer” şeklinde işleme giriyor ve “a” değişkenini “10” sayısından büyüklüğünü

kontrol ediyor. Son blok ise, ilk iki blok işlem görmediyse “else” yani “bunların

hiçbiri doğru değilse” işleme giriyor.

Birden çok kıyaslama işlemini birleştirmek istersek yardımımıza “&&”

ve “||” işaretleri koşmaktadır.

<html>

<body>


a = 9;

if (a < 10 && a > 5) {

document.write("a degiskeni 10 sayisindan kucuk"+

" ve 5 sayisindan buyuk");


}

if (a > 10 || a < 20) {

document.write("a degiskeni 10 sayisindan buyuk"+

" ya da 20 sayisindan kucuk");


}

</script>

</body>

</html>

ifbirlestir.html

Musa ÇAVUŞ 71

Şekil38 “&&” işareti iki kıyaslamanın arasına “ve” bağlacı koymaktadır. “a” değişkeni

“10” sayısından küçükse “ve” “5” sayısından da büyükse bloktaki işlemi yap

denilmektedir. “||” işareti iki kıyaslama arasına “ya da” bağlacı koymaktadır.

“a” değişkeni “10” sayısından büyük “ya da” “20” sayısından küçükse sıradaki

blok işlem görmektedir. Bu şekilde birden fazla kıyaslamayı aynı if karar

yapısına dahil edebiliyorsunuz.

if karar yapısını mutlaka iyi anlayın, çünkü insan beynide buna göre

düşünmektedir ve karalarını vermektedir.

switch

“switch” işlemi,” if” işlemine bir alternatiftir. Bazı durumlarda “switch”

kullanmak daha kolaydır. Açık söylemek gerekirse ben şimdiye kadar hiç

kullanmadım, sadece kullanan kişilerin kodlarında değişiklik yapacağımda

kullandım.

<html>

<body>


a = 1;

switch (a) {

case 0 : document.write("0" + "<br>");

break;


break;


break;


Musa ÇAVUŞ 72

break;

default: document.write("4" + "<br>");

}

</script>

</body>

</html>

switch.html

Şekil39 JavaScript, switch ile başlayan cümlelerde sırayla tüm case bloklarını taramaktadır. Eğer uyan bir case bulursa, bu bloğun içerisindeki kodu break ifadesini buluncaya kadar işleme sunmaktadır. break ifadesini kullanmazsak, bir sonraki case bloğu otomatikman işlem görmektedir. Bir sonraki case ifadesinin doğru ya da yanlış olması bu durumda hiç önemli değildir. switch işlemlerinin if karar yapısına göre en büyük dezavantajı esnek olmamasıdır ve sadece tek bir değeri kıyaslamasıdır. Mesela if karar yapısında bir değişken aralığını kontrol edebilirken switch yapısında böyle bir olanağınız yoktur. 1 ile 100 arasındaki tüm sayıların bir değişkenden küçük mü değil mi olduğunu kontrol edebilmek için switch yapısında aralıkta bulunan tüm sayıları kod halinde teker teker yazmalısınız. JavaScript’te diğer programlama dillerinden farklı olarak switch karar yapılarında dizgiler ya da başka 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 Döngüler Bakın bu da çok önemli bir konudur. Döngüler belirli kodları tekrarlayarak işleme sunarlar. Bir döngü, blok içeriği ve önermeden oluşur. Döngü önermesi, döngünün ne kadar süreceğini belirtir. while döngüsü while döngüsüne girilmeden önce, döngü önermesi kontrol edilmektedir. Eğer döngü önermesi doğru ise, döngü bloğu işlenmektedir, değilse döngü sona erdirilmektedir. if önermelerinde olduğu gibi döngü önermesi true olmalıdır. <html> <body> <script language="JavaScript"> i = 0; while(i < 10) { document.write(i + "<br>"); i++; }

Musa ÇAVUŞ 74

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

Şekil41 while döngüsünde, önermeyi while yazdıktan sonra parantez açıyoruz ve parantezin içerisine kodluyoruz. Önerme true değerini alıncıya kadar döngü dönüyor. Örnekte i değişkenine 0 değerini atadım ve while döngüsündeki önermeye, i değişkeni 10 sayısından ufak mı önermesini kodladım. Ekrana i değişkeni 10 sayısından ufak olduğu sürece i değişkeninin o anki değerini yazdırttım. do - while döngüsü Bu döngüde ilginç olan, önermenin döngü sonunda kontrol edilmesinde yatmaktadır. Bu yüzden döngü içerisindeki blok bir kere mutlaka işlem görmektedir. <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 Döngünün sonunda önerme kontrol edildiği için, döngü önermeye kadar devam etmiştir. Önerme ilk kontrolde false çıktığı için döngüden çıkılmıştır. Dikkat edilmesi gereken önemli husus ise, döngünün sonunda noktalı virgülü unutmamamız. for döngüsü while döngüsünün özelleştirilmiş halidir. Daha çok sayaçlı işlemlerde kullanılmaktadır ve benim en çok kullandığım döngüdür. <html> <body> <script language="JavaScript"> for (i = 1; i <= 10; i++) document.write("Sayi: " + i + "<br>"); </script> </body> </html> for.html

Musa ÇAVUŞ 76

Şekil43 for döngüsünün ilk kısmında değişken tanımı yapılıyor ve değeri aktarılıyor. Đkinci kısmında önerme belirtiyor. Üçüncü kısmında ise değişken bir artırılıyor. Değişkeni artırma işlemi bloğun sonunda yapılmaktadır. Kısımlar noktalı virgüllerle ayrılmaktadır. for döngülerin avantajları kendisini dizilerde göstermektedir. <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 döngüsünü dizinin uzunluğu kadar döndürüyorum ve dizideki tüm bilgileri ekrana yazdırmış oluyorum. Dizilerle çalışan for döngüleri için kolaylık olması açısında bir operatör vardır. Bu operatör in operatörüdür. <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

Musa ÇAVUŞ 78

Şekil45 i değişkeninden sonra in operatörü kullanıyorsunuz ve ondan sonrada hangi diziyi döngü içerisinde işleme sokacaksanız onu tanımlıyorsunuz. Bu kullanım tarzı for döngüsü sadece dizilerle kullanılacaksa geçerlidir. break ve continue Herhangi bir döngü içerisinde break komutu kullanılırsa, program döngünün o noktasından sonra çıkar ve döngüden sonraki koda geçer. <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 döngünün bloğuna bir if cümleciği yazdım. Eğer i değişkeni sıfır değerinden ufaksa break komutunun işlenmesini istedim. Yine herhangi bir döngü içerisinde belirli bir noktadan sonraki kısmın işlev görmesini istemiyorsak ve döngünün buna rağmen dönmesini istiyorsak continue komutunu kullanırız. <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

Musa ÇAVUŞ 80

Şekil47 Bu döngüde ki değişkeni ikiye bölünmekte, eğer kalan 1 ise anlıyoruz ki bu sayı tek bir sayıdır ve bu blokta continue komutu kullanıyoruz. Böylelikle ekrana i değişkeninin çift bir sayı olduğu yazılmıyor. 3.7 Fonksiyonlar Muhtemelen program parçanızda birkaç adımınız vardır ve bu adımları birleştirerek bir isim altında toplamak isteyebilirsiniz. JavaScript’te de diğer programlama dillerinde olduğu gibi bunun için fonksiyonlar vardır. Aynı program parçalarını tekrar tekrar kodlamak yerine fonksiyonları kullanmak daha avantajlıdır. Böylelikle fonksiyon içerisinde yapmak istediğimiz değişiklik, fonksiyon çağrıldığı tüm bölümlerde etkinliğini göstermiş olur.• Karmaşık programlamalar ufak parçalara bölünmüş olur ki anlaşılması kolaylaşmış olur. Bir fonksiyon birden fazla bileşenden oluşmaktadır. Fonksiyon başı ve fonksiyon bloğu ana bileşenlerdir. Fonksiyon, fonksiyon başı, sonuç tipi, fonksiyon ismi ve parametre listesinden oluşmaktadır. 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 Kodlamanın bir fonksiyon olduğunu function anahtar kelimesiyle belirtiyoruz. Daha sonra belirttiğimiz fonksiyona bir isim veriyoruz. Ben örnek fonksiyonumuza test adını verdim. Şimdilik parametre kullanmadığım için parantezi açtım ve hiçbir şey yazmadan kapattım. Ardından “{}” parantezini kullandım. “{}” parantezleri arasına fonksiyonunuzun tüm kodunu yazabilirsiniz. Son olarak test(); şeklinde yazdığım fonksiyonu çağırıyorum ve tarayıcı fonksiyonun içindeki işlemi ekrana yansıtıyor. test(); çağrısını kodunuzda istediğiniz kadar kullanabilirsiniz. Ne kadar çok kullanırsanız, tarayıcınız o kadar çok “Selam” ne haber” mesajını gösterecektir. Fonksiyonların en büyük avantajı karmaşık kod parçalarını tek bir isim altında toplamasıdır. Fonksiyonlarda parametre kullanımı Fonksiyonlarımızda parametre kullanabiliriz. Parametreleri de fonksiyon içerisinde işleve 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

Musa ÇAVUŞ 82

Şekil49 a ve b değişkenlerini topla() fonksiyonunda parametre olarak kullandım. JavaScript’te fonksiyon parametreleri virgül ile ayrılıyor. a ve b değişkenlerini topla() fonksiyonunda parantezler arasına yazdım ve topla() fonksiyonunu çağırırken parametre olarak 5 ve 6 değerlerini verdim. Böylelikle a değişkeninin değer 5 ve b değişkeninin değeri 6 olmuş oluyor. Fonksiyon içerisinde de 5 ve 6 değişkenini toplattım ve tarayıcıda gösterttim. a ve b değişkenlerini toplarken parantez içerisinde topladım, çünkü parantez kullanmasaydım, write() fonksiyonu bu iki değişkeni String olarak algılayacaktı ve 11 sayısı yerine 5 ve 6 sayısının yan yana gelmesinden oluşan 56 sayısını gösterecekti. Đsterseniz parantezleri kaldırın ve örneğinizi tekrar çalıştırarak sonucu izleyin. Farklı sayıda parametre kullanmak şartıyla aynı fonksiyon adını 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 değişkeni ekleyerek aynı fonksiyon ismi adı altında bir fonksiyon tanımlaması yapılabiliniyor. Fonksiyonlarda parametrik olarak verilen değişkenler sadece o fonksiyon için geçerlidirler. Genel değişkenler gibi her tarafta kullanılamazlar. <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

Musa ÇAVUŞ 84

Şekil51 Fonksiyondaki a değişkeni ile fonksiyon dışında kullanılan a değişkeni farklı değişkenlerdir. Fonksiyon içerisinde kullanacağınız parametreler sadece fonksiyon için geçerlidir. Fonksiyon içinde yapılan değişken değer değişimleri fonksiyon dışında bir etkiye sahip değildir. return Bir fonksiyonun değeri return anahtar kelimesiyle iletilmektedir. Fonksiyon içerisinde yaptığınız işlemlerin sonucunu return anahtar kelimesinden sonra yazın ve noktalı virgül ile kapatın. Bu fonksiyonun değeri olmuş oluyor. Fonksiyonun değerini, fonksiyon dışında kullanmak isterseniz, bir değişkene fonksiyonu atamanız 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 çağrıldıktan sonra fonksiyondan çıkılır. Yukarıdaki örnekte de gördüğünüz gibi return işleminden sonraki satır işlem görmemektedir, çünkü fonksiyon matematiksel işlemi değer olarak iletmektedir ve fonksiyondan çıkılmaktadır.

Musa ÇAVUŞ 85

Kendini çağıran fonksiyon JavaScript kendini çağıran fonksiyon mantığını 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 içinde if kavramı true değerini alırsa, if kavramında fonksiyon tekrar çağrılıyor. Program, fonksiyonun çağrıldığı noktayı iç mekanizma olarak yığın dediğimiz bir bölgeye kayıt ediyor. Tekrar çağrılan fonksiyon yine if kavramında true sonucu çıkarsa, if kavramında kendisini bir daha çağırıyor. Bu işlem if kavramından false değeri çıkınca ve else işlemi bitinceye kadar devam ediyor. Bundan sonra program yığına gidiyor ve en son hangi fonksiyonu yığına koyduysa onu oradan alıyor ve kendisini çağırdığı noktadan devam ediyor.

Musa ÇAVUŞ 86

Bu yöntemin kafanızda daha iyi yer edinebilmesi için bir önceki örnekte ufak bir değişiklik yaptım: <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

Artık ısındık diyebiliriz, kitabın bundan sonraki konuları derinleşmeye

başlayacak ve sizde görsel olarak farklı program parçaları kodlayabileceksiniz.

Isınmasaydık bundan sonraki bölümlerde sorun yaşardık.

Tarayıcınızda fareyi hareket ettirmeniz, tarayıcınız tarafından bir olay olarak

algılanır. Bir düğmeye basmanız tarayıcıdan bir olay olarak algılanır. Bu tür

olayları JavaScript’te kullanabilirsiniz. Bu mekanizmaya Eventhandler

deniliyor. HTML 4.0 ‘dan sonra Eventhandler mekanizması HTML’e ait oldu.

http://www.w3.org/TR/html4/interact/scripts.html adresinde Attribute

definitions standartlaşmış Eventhanler’leri bulabilirsiniz. Ben size bunların bir

kaçını örneklerlede göstereceğim.

Eventhandler, on ön ekiyle başlar ve hangi olayla bağlantı kurulacaksa o olayın

Đngilizce kelimesiyle devam eder. Mesela onload, yüklenince manasına

gelmektedir ya da onmousedown, fare düğmesine basılınca anlamı taşımaktadır.

Örneklerime geçmeden bazı problemlere değinmek istiyorum. W3C’de

standartlaşmış Eventhandler’leri tüm tarayıcılar olduğu gibi desteklemiyorlar.

Bazı tarayıcılar, bir kısmını farklı desteklerken bazıları hiç desteklemiyor. Bu

yüzden bir sayfada Eventhandler kullanacaksanız, sayfanızı tüm tarayıcılarla

denemenizi öneririm.

Şekil55

Musa ÇAVUŞ 88

onMouseOver ve onMouseOut ile ilgili bir örnek vermek istiyorum:

<html>


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 Türk bayrağının bulunduğu resmin üzerine geldiğinizde resmin

etrafında bir çerçeve oluşmaktadır. HTML tagı olan <a> tagının arasına yine

HTML tagı olan resim tagı <src> tagını koydum. Resim tagının name

parametresinde resim tagının isminin resim olduğunu belirttim. <a> tagında

onMouseOver ve onMouseOut Eventhandler’lerini kullandım. onMouseOver

Eventhandler’i, fare ile resmin üzerine gelince aktif oluyor ve kendisine atanan

Musa ÇAVUŞ 89

fonksiyonu çağırmaktadır. Burada resimcerceve() fonksiyonunu atadım.

Fonksiyonum parametresiz olduğu için fonksiyonun parametresiz halini atadım.

resimcerceve() fonksiyonuna baktığımızda tek bir işlem yaptığını görürsünüz.

resim isimli objeye ulaşıyor ve çerçevesinin kalınlığını 9 yapıyor. document

tanımlamasının sayfamız olduğunu düşünün, resim ise o sayfadaki resim isimli

obje. Daha sonra da bu objenin çerçevesini border değişkenini değiştirerek

değiştirebiliyoruz. onMouseOut Eventhandler’i de, fareyi resimden çekince

aktif olmakta ve resimcerceveyok() fonksiyonunu çağırmaktadır. Bu

fonksiyonda resmin etrafındaki çerçeveyi 0 yaptım.

Farkına vardıysanız W3C standartlarındaki gibi onmouseout gibi bir yazım

kullanmadım ve onMouseOut yazdım. HTML olduğu için tolerans ediliyor ve

büyüklük küçüklük fark etmiyor. XHTML kullansaydınız o zaman onmouseout

yazmanız gerekiyordu yoksa hata oluşurdu. W3C sayfasındaki

Eventhandler’leri bu şekilde sayfanıza ekleyebilirsiniz. Kullanımları çok basittir

fakat sayfanıza canlılık katmaktadırlar.

3.9 Form ve Eventhandler

Eventhandler’leri Form’larda kullanmak bize büyük avantajlar sağlayabilir.

HTML bize Form kullanmamızı sağlıyor biliyorsunuz. Form’larla kullanıcılar

metin kutularını doldurabilirler, seçenekler seçebilirler ve bunları Server

tarafındaki bir program parçasına yollayabilirsiniz. Hemen bir örneğe bakalım:

<html>


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')"

Musa ÇAVUŞ 90

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 parçası ilk başta biraz karışık gibi gözükebilir, özellikle Form’larla

çalışmamış kişiler yadırgayabilirler fakat anlaşıldıktan sonra çok basit olduğunu

göreceksiniz. <form> tagıyla bir Form tanımı yapıyoruz. <input> tagı giriş

yapacağımız bir nesnenin olduğunu gösteriyor. type parametresinde <input>

tagının göstereceği nesnenin tipini belirtebiliyoruz. Đlk nesnenin metin kutusu

olmasını istediğimin için type parametresine text yazdım. Đkinci nesnenin ise bir

şifre metin kutusu olmasını istedim ve type parametresini password olarak

ayarladım.

Asıl bundan sonrası çok ilginç ve bizi ilgilendiriyor. Metin kutusunda onFocus

Eventhandler’ini kullandım. onFocus Eventhandler’i kullanıcı metin kutusunu

seçerse aktif hale geliyor ve daha önce tanımladığım aktif() fonksiyonunu

çağırıyor. Bu sefer tanımladığım fonksiyonu parametrik yaptım. Parametrede

yazılan metinle beraber aktif() fonksiyonu çağrılıyor ve getElementById()

fonksiyonunun yardımıyla bilgi nesnesine ulaşılıyor. Ulaştığımız nesnenin

innerHTML değişkeninin değerini değiştiriyoruz. innerHTML değişkeni

ulaştığımız nesnenin HTML içeriğine müdahale ederek değiştirmektedir.

Musa ÇAVUŞ 91

Senaryoyu başar alırsak görüyoruz ki, kullanıcı metin kutusunu seçer seçmez

kullanıcıyı bilgilendirebilmek için tarayıcı bir yazı gösteriyor. onBlur

Eventhandler’ide onFocus Eventhandler’in tam tersidir. Metin kutusu seçili

değilken aktif olmaktadır. Aynı şekilde pw nesnesi de işlemektedir.

Musa ÇAVUŞ 92

Bölüm 4

Hata bulma ve ayıklama

Musa ÇAVUŞ 93

4.1 Hata arama

Tüm programlama dillerinde olduğu gibi JavaScript’te de programlarken hata

yapabiliriz ve kodumuz hatalı olduğu için isteğimiz dışında çalışır. Bu bölümde

yaptığınız hataları nasıl bulabilirsiniz onu öğreneceksiniz. Sıradaki örneğimize

bir bakalım:

<html>

<body>

<table border width="100">


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

Musa ÇAVUŞ 94

Math.random() fonksiyonu 0-1 arası rastgele bir sayı üretmektedir.

Math.random() fonksiyonu çıkan sayıyı tam sayıya yuvarlamaktadır. Ben 0-30

sayısı arasında rastgele bir sayı seçebilmek için işlemi 30 ile çarptım ve sayi

değişkenine atadım. for döngüsü sayi değişkenindeki tam sayı kadar dönecek

ve tarayıcı tablo satırı gösterecektir. Fakat gördüğünüz gibi kod hatalı olduğu

için isteğimiz gerçekleşmiyor. Firefox tarayıcısı da hatalı bir kod olmasına

rağmen bize hiçbir hata mesajı vermemektedir.

Yukarıdaki mönüden Araçlar->Hata konsolu seçeneğini seçerseniz karşınıza

şöyle bir pencere çıkacaktır:

Şekil59

Bu konsol hata bulmada çok işinizi görebilir. Đsterseniz sadece hataları

görebilirsiniz ya da sadece uyarılar ve iletileri görebilirsiniz. Đsterseniz de

hepsini birden görebilirsiniz. Örneğimiz için bakarsak “say is not defined” diye

bir hata mesajının olduğunu ve hangi satırda olduğunu görüyoruz. Diğer

tarayıcılarında buna benzer hata konsol penceresi vardır. Ben Firefox’u

kullandığım için onu gösterdim.

Musa ÇAVUŞ 95

Hatanın nereden kaynaklandığını buna rağmen bulamadıysanız kodunuzun bazı

bölümlerinde tarayıcınızda görmeniz için değerleri yazdırtın.

<html>

<body>

<table border width="100">


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 sayının çıktısını verdirttim, bu

şekilde kodumun hatalı olan bölümü alert() fonksiyonundan sonra olduğunu

anlamış oluyorum, çünkü kodum alert() fonksiyonuna kadar çalışıyor. alert()

fonksiyonunu döngünün içerisine koyduğumda ekrana alert() fonksiyonunun

görüntüsü çıkmıyor. Buradan yine anlaşılıyor ki döngüde bir hata var. Bu da

hata bulmak için bir alternatiftir, fakat güçlü bir yöntem debugger kullanımıdır.

Musa ÇAVUŞ 96

4.2 Debugger Şimdiye kadar olan metotlarda hataları, tarayıcıdan gelen mesajlara göre ya da

geleneksel programlama şeklinden bulduk. Şimdi bir Debugger ile bir hatayı

nasıl bulabiliriz onu göstereceğim. Şimdi size vereceğim bilgiyi hiç bir kitapta

bulamazsınız, o yüzden burayı iyi okuyun, çünkü size hata bulmada çok

yardımcı olacak.

Bunu yapmadan önce Firefox tarayıcınıza Venkman adlı bir Debugger

yüklemenizi öneririm. Firefox tarayıcınızda, Araçlar ->Eklentiler seçeneğini

tıklayın ve VenkMan programını Firefox uygulamasına ekleyin.

Şekil61 Kurulum bittikten sonra hatabul.html dosyasına çift tıklayarak Firefox ile tekrar

açın ve Araçlar->JavaScript Debugger seçeneğini seçin.

Musa ÇAVUŞ 97

Şekil62 Bu seçeneği seçtiğinizde karşınıza JavaScript Debugger penceresi çıkacaktır:

Şekil63

Musa ÇAVUŞ 98

Venkman oldukça kaliteli bir Debugger olmasına rağmen arada sırada

çökebiliyor. Onun dışında JavaScript’lerde hata bulabilmede yardım çantası gibi

düşünebilirsiniz.

JavaScript Debugger’de Open Windows sekmesini tıkladığımızda

tarayıcımızdaki açık sekmeleri görürüz. Open Windows sekmesini seçtikten

sonra hatabul.html dosyasını çift tıklayın:

Şekil64 Debugger tıklanan HTML sayfasının kodunu sağ bölgesinde göstermektedir.

Debugger ile çalışınca, hatalı kodun hata olduğundan şüphe edilen satıra kadar

kodun çalışması istenilir ve Debugger’ın kodu o satıra kadar çalıştırıp durması

için bir kesme noktası konur. Buna Breakpoint denilmektedir. 6. Satırın sol

tarafındaki boşluğa fare ile tıkladığımızda bir F harfi belirir. Future Breakpoint

demektir, yani gelece kesme noktası.

Debug->Error Trigger->Stop for Errors seçeneğini seçili konumuna getirin:

Musa ÇAVUŞ 99

Şekil65 Tekrar tarayıcınıza dönün ve kodu tekrar yükleyin. Bunu yaptığınızda

JavaScript Debugger otomatik olarak F olan satıra kadar çalışacaktır ve hatadan

ötürü kodu orada durdurmaktadır:

Musa ÇAVUŞ 100

Şekil66 Şimdi 6. Satırın önündeki boşluğa tıkladığınızda orada arka planı kırmızı bir B

harfi göreceksiniz.

Şekil67

Musa ÇAVUŞ 101

Şimdi Continue düğmesine basarsanız ve tekrar kodu tarayıcınızda geri

yüklerseniz arka planı kırmızı olan B noktasında Debugger, kodu durdurur. Çok

karmaşık bir teknik fakat işimizi görmesi için bu karmaşalığı yapmamız

gerekiyor. Bizim için önemli olan kodumuzu istediğimiz noktaya kadar

çalıştırmak ve orada durmasını sağlamaktı, bunu da başardık. JavaScript

Debugger’in üst tarafına bakarsanız, Step Over, Step Into ve Step Out

düğmelerini görürsünüz. Step Over, JavaScript Debugger’in kodu satır satır

işlemeisni sağlar, Step Into sıradaki bir fonksiyonsa kodun o fonksiyon içinde

devam etmesini sağlar. Step Over ise kodun bulunduğu fonksiyonda çıkmasını

sağlar. Adım adım işlemleri yapmadan önce JavaScript Debugger’in Watches

bölümüne ilginizi çekmek istiyorum.

Watches sekmesine tıklayın ve o alana sağ fare ile tıklayın. Orada Add Watch

Expression seçin:

Şekil68 Çıkan penceredeki metin kutusuna sayi yazın:

Musa ÇAVUŞ 102

Şekil69 Tamam düğmesini tıklayın:

Şekil70 Bu şekilde kod içerisindeki değişkenlerin değerini öğrenebilirsiniz. Bu da çok

faydalı bir özellik olup size kod ayıklamada büyük yardım edecektir. Şimdi

Step Over düğmesine basın:

Musa ÇAVUŞ 103

Şekil71 “Continuing from breakpoint mesajı” gelecektir. Tekrar Step Over düğmesine

basın:

Musa ÇAVUŞ 104

Şekil72 “Stopped for error handler” mesajı çıkacaktır. 7. satırda Debugger kodu

durduruyor ve bu satırda bir hatanın olduğunu söylüyor. Daha önce bunu

tarayıcı yardımıyla görmüştük fakat Debugger ile bu kesinleşmiş oldu. Kod

satırına iyi bakarsak say değişkeni yerine aslında sayi yazmamız gerektiğini

görürüz.

Venkman problemli olmasına rağmen çok güçlü bir Debugger, özellikle

JavaScript için şu an bulunan en kaliteli Debugger. Elimden geldiğince konuyu

kısa ve örnekli tuttum ki kodunuzda hata olunca nasıl çözebileceğinizi bilmiş

olun.

Musa ÇAVUŞ 105

Bölüm 5

Nesneler, Sınıflar ve Metotlar

Musa ÇAVUŞ 106

5.1 Nesne nedir? Nesne nedir? Nesne, günlük yaşamımızda kullandığımız belirli özelliklere sahip

ve özel bir durumu olan varlıktır. Nesnelere dayalı programlama denilen bu

yöntem JavaScript tarafından da desteklenmektedir. JavaScript, Nesnelere

dayalı bir programlama dili değildir, Nesnelere dayalı programlamaya destek

veren bir programlama dilidir. Yani JavaScript’te, nesneleri kullanabiliriz ve

nesnede oluşturabiliriz. JavaScript’in, tam bir nesneye dayalı programlama dili

olabilmesi için eksikleri mevcuttur. Nesneleri kullanmak JavaScript’te çok

kolaydır. Önce nesneyi yazar sonra bir nokta koyarız ve daha sonra nesnenin

özelliğini gösteren metodu yazarız. Metotlara da değineceğim.

window.alert(“Ben bir nesnenin metoduyum”);

window nesnenin ismidir, alert() fonksiyonu windows nesnenin özelliğidir.

5.2 Sınıflar ve kurucu metotlar JavaScript’te nesne oluşturmak istiyorsanız sınıflara ihtiyaç duyarsınız. Sınıfları

bir yapının planı gibi düşünün. Diyelim ki siz bir ev yaptıracaksınız. Mimar

evin planını çizer ve plana göre ev yapılır. Ev burada nesne, plan ise sınıftır. Evi

yapabilmek için işçilere ihtiyaç duyarsınız, bu mekanizmaya da kurucu metot

denir.

<html>

<body>


tarih = new Date();

dizi = new Array();

resim = new Image();

</script>

</body>

</html>

kurucumetot.html

Musa ÇAVUŞ 107

new anahtar kelimesiyle bir nesne oluşturabiliyoruz. tarih değişkenine, new

anahtar kelimesiyle bir Date() nesnesi oluşturarak atadım. Önce atanacak

değişken, sonra eşitlik operatörü ve new anahtar kelimesi yazılır ve en sonda

hangi sınıftan bir nesne oluşturmak istiyorsak o sınıfın kurucu metodunu

yazarız. Kurucu metot ile sınıfların isimleri her zaman aynıdır. Aynı şekilde dizi

ve resim değişkenlerine de Array() ve Image() nesnelerini oluşturarak atadım.

Doğru düzgün bir örnek yapmak istersek:

<html>

<body>

<img src="konya.jpg" height="100" weight="300"/>


resim = new Image();

resim.src = "turkiye.jpg";

setTimeout("document.images[0].src=resim.src","3000");

</script>

</body>

</html>

nesneolustur.html

Şekil73

Musa ÇAVUŞ 108

Şekil74

<img> tagı ile konya.jpg resim dosyasını tarayıcıma yükledim. JavaScript

bölümünde, setTimeout() fonksiyonu window nesnesinin bir özelliği ya da

bilgisayar dilinde metodudur. setTimeout ne yapar? Đlk parametreye kodu

yazarız, ikinci parametreye de o kodu ne kadar gecikmeli çağıracağımızı salise

cinsinden yazarız. Resim nesnesini resim değişkenine atadım. Resim nesnesi

burada new Image() ile oluşturulmaktadır. resim.src derken src resim nesnesinin

bir özelliğidir. Bu özellik yüklenecek resmin sistemdeki dosya ismiyle beraber

dizindeki yeridir. Ben resim nesnesinin src değişkenine turkiye.jpg dosyasının

adını atadım. document.images[0]’daki images[0] HTML sayfasındaki ilk

<img> tagına işaret ediyor, çünkü köşeli parantezlerin arasında 0 yazıyor.

<img> tagının src parametresine images[0] nesnesinin src özelliğiyle

erişebilinmektedir. Bu parametreye resim nesnesindeki src özelliğindeki değeri

atıyorum. setTimeout ile ikinci parametreyi 3000 salise yani 3 saniyeye

ayarladığım için, konya yazılı resim üç saniye sonra Türkiye yazılı resim ile yer

değiştirecektir. Unutmayalım, document nesnesi sistem tarafından oluşturulmuş

bir nesnedir.

Birden fazla yapıcı metodu ve hepsinin parametresi farklı olan sınıflar

olabilir.Örneğin Date() sınıfının birden fazla yapıcı metodu vardır ve kurucu

metotların parametre sayısı farklıdır.

<html>

<body>


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() sınıfından parametresiz bir kurucu metot kullanarak nesne

oluşturuyorduk. Parametresiz kullanılan Date() sınıfı güncel tarih ve saati

vermektedir. tarih1.html örneğinde Date() nesnesinin birçok kullanım şekli

vardır.a değişkenine atanan Date() nesnesinin parametrelerine bakarsak, 2006

yıl, 12 ay, 15 gün, 2 saat, 14 dakika, 11 saniye, 7 salise değerinde bir nesne

oluşturacaktır. 11 yazan yer Kasım ayı değildir, Aralık ayıdır. Date() sınıfında

ayların numaralandırılmasında sıfırdan başlamaktadır. 0 Ocak ayıdır, 11 ise

Aralık ayıdır. Salise değerini istemiyorsak, b ve c değişkenlerine atanan

nesneleri kullanabiliriz. Date() sınıfının bir başka kullanımı, parametre olarak

metin ya da bir diğer değişle String kullanımıdır. String’i istenilen formatta

Musa ÇAVUŞ 110

yazarsanız o format doğrultusunda bir Date() nesnesi oluşturmuş oluyorsunuz.

Date() nesneleri arasında yapılan çıkarma işlemlerin sonucunda çıkan rakam iki

tarih arasındaki farkın salise değeridir. Tarayıcınızdaki son satırda gördüğünüz

değer böyle bir değerdir. Sayfanızda Türkçe kullanacaksanız yukarıdaki görüntü

işinizi görmez.

Date sınıfı

Bu sınıfı, sınıflara örnek olması açısında biraz daha yakından incelemek

istiyorum. Böylelikle Date sınıfını tanımış olursunuz ve sınıflarla nesnelerin

nasıl çalıştığını öğrenmiş olacaksınız.

<html>

<style>

* {

background-color : white;

color : blue;

}

</style>

<body>

<div align="center">

<h1>Bugunku Atasozu</h1>

Bir elin nesi var iki elin sesi var


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 kısım Güncellenme tarihi kısmı. new Date() ile bir

tarih nesnesi oluşturdum. Bununla güncel tarih sorgulanıyor. Fakat daha sonraki

satırda, güncel tarihin bileşenleri, tarihGüncel adlı fonksiyonda ayrıştırılıyor ve

ekrana bizim istediğimiz formatta yazdırtılıyor. Fonksiyonun parametreleri

sırasıyla güncel tarihin, gününü, ayını ve yılını belirtmektedir. getDate() günü,

getMonth() sıfırdan başlamak şartıyla ayı ve getYear() yılı bize vermektedir.

Şimdi diyebilirsiniz ki, neden getDate(), getYear(), getMonth() fonksiyonlarını

doğrudan kullanarak tarihsel bilgileri ekrana yazdırtmıyoruz. Bunun birkaç

nedeni var. Ay ve gün bilgisi 10 sayısından ufaksa ekrana sadece tek haneli bir

sayı yazılmaktadır, çünkü getMonth() ya da getDate() tam sayı değerini iletir.

Tarayıcıda gördüğünüz gibi ay bilgisi için 05 görüntüsü sergileyebilmek için

aldığınız tam sayı değerini işlemeniz gerekiyor. Ben basit bir if kıyaslaması

yaparak dedim ki, eğer tam sayı değeri 10 sayısından ufaksa yani tek haneli ise

başına sıfır ekle.

Yıl için niye böyle komik bir kurgu yaptığımı da soruyorsunuzdur. Bilişim

sektöründe tarihler 01.01.1900 başlar ve hesaplama yapılır. Bazı tarayıcılar

buna uymazlar. Internet Explorer’in bazı versiyonlarında bu satırı işleme

koymamış olsaydık tarayıcı 2010 gösterecektir, fakat diğer tarayıcılar 110

Musa ÇAVUŞ 112

gösterecekti, çünkü o tarayıcılar sıfır tarihini 01.01.1900 tarihi olarak kabul

etmektedirler. Fonksiyondaki satırla tüm tarayıcılarla doğru bir görüntü elde

etmiş oluyoruz.

Date sınıfının bazı metotlarını vermek istiyorum:

Metot Açıklama getDate() Bir aydaki günü veriyor.

getHours() Bir gündeki saati veriyor

getMinutes() Bir saatteki dakikayı veriyor

getYear() Bulunduğumuz yılı veriyor

getSeconds() Bir dakikadaki saniyeyi veriyor

setDate() Bir aydaki günü değiştirir.

setHours() Bir gündeki saati değiştirir

setMinutes() Bir saatteki dakikayı değiştirir

setYear() Bulunduğumuz yılı değiştirir

setSeconds() Bir dakikadaki saniyeyi değiştirir

String sınıfı JavaScript’te metinleri saklayabiliryoruz ve bunlara biz String diyoruz.

String’ler de birer nesnedir. Diğer nesneler gibi String’lerin de metotları vardır.

String’in önemli olan birkaç metoduna değineceğim ve ileriki konularda farklı

bir metot gördüğümüzde onu orada anlatacağım. Şimdiden bir konunun tüm

özelliklerine vererek beyin şişirmek istemiyorum, zamanla veriyorum ki sürekli

tekrar etmiş olalım:

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


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

Musa ÇAVUŞ 114

Şekil77

Şekil78 Şekil77’deki metin kutusunu window nesnesinin prompt metoduyla

oluşturulmuştur. prompt() metoduna verdiğiniz parametre metin kutusunda bilgi

olarak yer alır. Program sizin Tamam ya da Vazgeç düğmelerine basıncaya

kadar bekler. Tamam düğmesine bastığınızda girdiğiniz String atamak

istediğiniz değişkene atanır ve program devam eder. Vazgeç düğmesine

basarsanız girdiğiniz String bilgisi atanmaz. Ben Tamam düğmesine bastım ve

ekranda girdiğim String hakkında bilgiler aldım. length() metoduyla String’in

uzunluğu, toUppercase() ile String’in büyük yazılmış hali, toLowerCase() ile

String’in küçük yazılmış hali, big() ile String’in kalın yazılış hali, indexOf() ile

parametredeki harfin String’deki yeri verilyor.

Musa ÇAVUŞ 115

Farkına vardıysanız, örneklerin boyutu büyümeye başladı. Đki üç satır yazarak

geçiştirmek istemediğim için örnekleri uzun tutuyorum. Çokta uzun tutmamaya

çalışıyorum, çünkü bu seferde konu dağılabilir. Mutlaka verdiğim örnekleri

kitabı okurken deneyin ki konuya hâkimiyetiniz güçlensin.

5.3 Metotlar Nesneye dayalı programlama tekniklerinde, programlar birbirilerine etkileşim içerisinde bulunabilmek için çağrı yollarlar. Bu çağrılar, bir metodun sonuçlarına göre olmaktadır. Bir Objenin ne yapabildiği metotlarında ortaya çıkmaktadır. Bir metodun tanımlanmasının avantajlarını şu şekilde sıralayabiliriz:

• Aynı program parçalarını tekrar tekrar kodlamak yerine metotları kullanmak daha avantajlıdır. Böylelikle metot içerisinde yapmak istediğimiz değicilik, metodun çağrıldığı tüm bölümlerde etkinliğini göstermiş olur.

• Karmaşık programlamalar ufak parçalara bölünmüş olur ki anlaşılması kolaylaşmış olur.

• Dışa doğru bir Nesnenin sunduğu özellikler metotlarında gizlidir.

<html>

<body>

<table >




</script>

</table>

</body>

</html>

sayilar.html

Musa ÇAVUŞ 116

Şekil79

random() metodu 0-1 arasında bir sayı üretmektedir, bunu 50 ile çarptığımda bu

sayı 0-50 arasında bir sayı olmaktadır, tam sayı istediğim içinde round()

metoduyla bunu sağladım. Math bir sınıftır ve random() ile round() Math

sınıfının birer metodudur. Đlginç olan Math sınıfından bir nesne oluşturmadan

doğrudan metotlarını çağrılabilmesidir. Normalde böyle bir çağırma hata

vermesi gerekiyor. Bu tür nesneler statik olduğu için böyle bir kullanımda

bulunabiliriz.

Kitabımda JavaScript sınıflarından örnekler veriyorum fakat detaylara

inmiyorum, daha çok güncel kullanılan programlama şekillerine değiniyorum.

Ayrıntılı bilgi için Google Amcaya başvurmanızı öneririm. JavaScript ve

HTML referansı olarakta http://www.w3schools.com/jsref/default.asp

sayfasından yararlanabilirsiniz.

5.4 DOM (Document Object Model)

Musa ÇAVUŞ 117

Çoğu kez nesneler oluşturacaksınız ve sınıf metotlarını kullanmaksınızdır.

Mutlaka hazır olan nesnelerin metotlarını da kullanacaksınızdır, çünkü bunu

yapmazsanız JavaScript ile tarayıcınıza bir görüntü bile veremezsiniz. DOM,

ağaç yapısına benzer bir yapıda kullanabileceğiniz nesneleri

kütüphaneleştirmiştir. DOM teknolojisinin öncelikle JavaScript ile hiç bir

bağlantısı 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>

Musa ÇAVUŞ 118

</table>

</body>

</html>

formsifirla.html

Şekil80 Tarayıcınız Şekil80’i gösterdiğinde siz Araçlar-> DOM Inspector seçeneğini

seçin.

Musa ÇAVUŞ 119

Şekil81 Çıkan pencerede DOM Inspector, sayfanızın ağaç yapısını göstermektedir.

Ağacın en üst kısmında document terimini görüyorsunuzdur. Sizce document ne

olabilir? document web sayfasını gösteren bir nesnedir. document nesnesinin

içinde HTML tagının olduğunu görürsünüz. HTML tagının içinde HEAD tagını

görürsünüz ve hangi tagın içerisinde hangi tagların ya da metinlerin olduğunu

DOM Inspector bize bir ağaç yapısı olarak gösterir. DOM Inspector’unda bir

tagı seçince tarayıcıda o bölge işaretleniyor:

Musa ÇAVUŞ 120

Şekil82

DOM modeline göre bir web sayfası tarayıcıda gösterildikten sonra o sayfanın

tüm elemanları hafızada birer nesne olarak saklanır ve document nesnesi ile tüm

elemanlara ulaşabilinir. JavaScript’te DOM modelinden kullanabileceğimizi

kullanışlı nesneler var. Ben önemlilerini bu kitapta anlatacaığım.

document nesnesi Bu nesne sayfanızdaki HTML taglarına ulaşabilmek için JavaScript’te oldukça

çok kullanılır. windows nesnesinin bir nesnesidir. Siz window.document ya da

sadece document olarakta document nesnesini çağırabilirsiniz. Çok önemli bir

nesnedir.

<html>


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

Musa ÇAVUŞ 122

Şekil83

Şekil84

Musa ÇAVUŞ 123

Şimdi yapacağım açıklamayı iyi okuyun ve anlayın, çünkü bunu anlarsanız

bundan sonraki adımlar sizin için çok kolay olacaktır. Açıklamayı bile bile

alışılmışın dışında biraz uzun tuttum.

Websayfasına document nesnesiyle ulaşabiliriz. “//” olarak tanımlanan satırlar

JavaScript tarafından açıklama olarak gözetilir. document nesnesinden sonra

nokta konarak document nesnesinin alt nesnelerine ya da değişkenlerine

ulaşabiliriz. resimYukle() fonksiyonundaki ilk satıra bakarsanız, document

nesnesinden sonra . koydum ve forms[0] yazdım. forms document nesnesinden

saklanan bir dizi nesnesidir. forms nesnesi içerisinde document nesnesinin

gösterdiği web sayfasındaki tüm Form tagları saklanmaktadır. Köşeli parantez

açarak dizideki nesnelere ulaşmak istiyorum. Đçerisine sıfır yazdım ve ilk Form

nesnesine ulaşmak istediğimi vurguladım. forms[0] nesnesinden sonra nokta

koydum ve elements yazdım. elements nesneside forms[0] nesnesinin gösterdiği

Form nesnesinin taglarıdır. dom1.html’de tek bir tag vardır o da <input> tagıdır.

Burada köşeli parantez içerisine sıfır yazarak ilk elemana ulaştım. Bir

yazsaydım forms[0] nesnesinin ikinci tagına ulaşırdım. dom1.html’de forms[0]

nesnesinin ikinci bir tagı olmadıgı için JavaScript kodumuz hata verecekti.

elements[0] dizisinden sonra yine bir nokta koydum ve value yazdım. value

elements[0] dizisinin bir değişkenidir ve elements[0] nesnesinin değerini

değiştirir. elements[0] nesnesinin bir <input> tagına işaret ettiğini anımsarsanız,

bu tagın bir metin kutusu olduğunu hatırlarsınız.

Đkinci satırın JavaScript tarafından işlenmesini istediğim için “//” işareti

koymadım. Đkinci satır az önce anlattığım metin kutusuna ulaşmanın farklı bir

tekniğidir. Bu sefer document nesnesinden sonra getElementsByName()

metodunu kullandım. Parametre olarak f1 yazdım, çünkü ben biliyorum ki

benim web sayfamda kullandığım tek bir Form nesnesi var ve adı f1.

getElementByName() metoduyla taglara, tagların isimleriyle ulaşabiliyoruz.

Aynı isimden birden fazla Form nesnesi olabileceği için köşeli parantez

kullanarak dizinin ilk elemanını sıfır yazarak seçmiş oldum.

Bir başka yöntem ise Form nesnesinin adını doğrudan bir nesne olarak

kullanmaktır. Bunu da üçüncü satırda örnekledim. Document nesnesinden sonra

Form nesnenesinin adı f1yazdım.

Form nesneleri dışındaki taglarada ulaşam şekilleri vardır. Bunun için dördüncü

satıra bakın. HTML kodunda h1 tagının id parametresine h yazmıştım. Bu taga

document nesnesinin getElementById() metoduyla ulaşılabilinir.

getElementById() metodunun parametresine h yazmamız yeterlidir. h1 tagının

içeriğini değiştirebilmek için bu metot bize innerHTML değişkenini

Musa ÇAVUŞ 124

sunmaktadır. innerHTML değişkeninin değerini değiştirmekle h1 tagının

içeriğini değiştirmiş oluyoruz.

Diyelim ki taglara tag ismiyle ulaşmak istiyoruz o zaman ne yapacağız. Beşinci

satırda böyle bir örnek satır kodu verdim. getElementByTagName() metodunun

parametresine h1 yazarak h1 olan tüm tagları bir dizi halinde elde edebiliyorum.

HTML kodundaki ikinci h1 tagına ulaşabilmek için köşeli paranteze 1 değerini

yazıyorum.

Son olarak resimYukle() fonksiyonu çağrıldığında sayfamdaki resmimi

değiştirmek istediğim için document nesnesinin images dizisine başvuruyorum.

document nesnesinden sonra images yazıyorum ve köşeli parantezin içine 0

yazarak ilk resim tagına ulaşmış oluyorum. src parametresinin değierini

değiştirmeklede yeni resmi yükleyebilme fırsatını kazanmış oldum. dom1.html dosyasına çift tıkladığınızda tarayıcınız bir sayfa gösterecektir.

Resime tıklandığında resimYukle() fonksiyonu çağrılacaktır ve sayfanın içeriği

değişecektir.

window nesnesi windows nesnesi, JavaScript’teki en önemli nesnedir. DOM modelinde bu

nesne en üstte yer alır. windows nesnesinin, alt nesneleriyle JavaScript’te çok

önemli şeyler yapabiliyorsunuz. Örneğin az önce anlattığım document nesnesi

gibi. Aynı şekilde window nesnesininde önemli metotları vardır. Dahan önce

bunlardan alert() ve prompt() gibi metotlarını kullanmıştık. Önemli gördüğüm

metotları az sonra göreceğiz. Geniş bir örnekle başlayalım:

<html>

<body>


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>


onClick='self.open("clientfe.html","ClientPencere")' /></td></tr>

<tr><td>Ayni dosya ayni pencerede</td>


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

Musa ÇAVUŞ 126

Şekil84 Koda baktığımızda pencereleri oluşturmak için open() metodunu görürsünüz.

widnows nesnesinin en önemli metotlarından biri open metodudur. Metodun ilk

parametresine açmak istediğiniz dosyanın adını veriyorsunuz. Đkinci

parametresine ise açılacak pencereye bir isim veriyorsunuz. Đkinci parametresi

aynı olan bir open() metodu daha kullandığımızda açılacak dosya daha önce o

isim adı altında açılmış bir pencerede açılacaktır. open() metodunu window

nesnesinden sonra da kullanabilirsiniz, self nesnesini kullanarakta olabilir ya da

ne window nesnesi kullanırsınız ne de self nesnesini kullanırsınız. Hepsi

sonuçta aynı kapıya bakıyor.

boskapatPencere() fonksiyonu çağrıldığında, mPencere değişkeni açık mı kapalı

mı onu closed boolean değişkeniyle kontrol ediyoruz. closed değişkeninin

değeri false ise pencere kapalı demektir, eğer kapalıysa close() metoduyla bu

pencerenin kapatılmasını kodladım. mPencere değişkenine daha init()

fonksiyonunda veya yeniPencere() fonksiyonunda open() metoduyla bir

window nesnesi atamıştık. Bu sayede mPencere nesnesinin bir close() metodu

olabiliyor.

<body> tagında onLoad parametresini kullanarak sayfamız yükleneceği zaman

init() fonksiyonunu çağırtarak bir pencere açtırdım ve onu yeşillik olsun diye

close() metoduyla kapattırdım.

open() metoduna bir üçüncü parametre daha verebiliyoruz.

Musa ÇAVUŞ 127

<html>


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 görünümüyle ilgilidir.

Üçüncü parametredeki width değişkeni pencerenin genişliğini, height

pencerenin yüksekliğini, resizable pencereyi büyütebilir küçültebilir miyiz,

directories düğmeler var mı, menubar menubarı var mı, location internet adresi

girebileceğimiz çubuk var mı, bunları ifade etmektedir.

Bu HTML kodunda farklı olarak iki link kullandım ve <a> taglarının href

parametresine javascript:f1 ve javascript:f2 değerlerini yazdım. JavaScript’te

Musa ÇAVUŞ 128

yazdığımız her hangi bir fonksiyonu href parametresinden çağırabilmek

istiyorsak javascript yazıyoruz ve iki nokta üst üste koyduktan sonra ulaşamak

istediğimiz fonksiyonun adını yazmamız yeterli olmuş oluyor.

Kullanmış bulunduğum üçüncü parametredeki değişkenler tarayıcıya göre farklı

sonuçlar verebilmektedir. Bu yüzden bu değişkenler kullanıldığında farklı

tarayıcılarla dikkatlice denenmesinde fayda görüyorum. Kullanabileceğiniz

başka değişkenleri http://www.w3schools.com adresinde referans halinde

bulabilirsiniz.

windows nesnesi tarayıcılar arasında farklılıkları çözmek için metodlar

sunmaktadır. Mesela moveBy() ve moveTo() metodları gibi. moveBy() metodu

pencereyi verilen koordinatlara doğru hareket ettirirken moveTo() metodu

mutlak değerı baz alarak bir hareketlendirme gerçekleştirir.

<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() metodlarıda isimlerinden anlaşılacağı gibi pencerenin

boyutunu değiştiriyor. Birinci parametre x koordinatını verirken ikinci

parametre y koordinatını vermektedir.

location ve history location nesnesinin href değişkenine verdiğimiz yeni adres sayesinde JavaScript

sayfamızı farklı bir sayfaya iletebilir.

<html>

<body>

<a href="javascript:window.location.href='http://www.musa-

cavus.com'">Tikla</a>

</body>

</html>

location.html

Musa ÇAVUŞ 130

Şekil86 history nesnesinin benim gördüğüm en çok kullanılan bir metodu var o da

back(). Bu metotla bir önceki sayfaya gidilebilinmektedir ve güzel tarafı hangi

sayfadan gelindiğini bilinmeden yapılmasıdır.

<html>

<body>

<a href="javascript:history.back()">geri</a>

</body>

</html>

history.html 5.5 Cookie Cookie sayesinde, metin dosyalarını tarayıcıdan bilgisayara kayıt edebilirsiniz.

Sorunsuz görünen bu yöntem gerçekte kullanıcı profillerini oluşturmak için

kullanılır. Diyelim siz bir online shop sayfasındasınız ve gezdiğiniz sayfaları

online shop sahibi bilmek istiyordur. Buna göre sizin bilgisayarınızda size ait

bilgiler saklanmaktadır ve siz o sayfayı tekrar ziyaret ettiğinizde sayfaya girişte

size özgü reklamlar gözükmektedir. Ya da yine bir online sayfasında olunu, siz

bir kaç ürün seçtiniz, fakat daha ödeme yapmadınız ve tarayıcınız birden

kapandı. Tekrar online sayfasına girdiğinizde bir bakıyorsunuz ki taryıcınız

sizin seçtğiniz tüm ürünleri kayıt etmiş. Bunu Cookie teknoloji kullanarak

yapabiliyorsunuz. Yine başka bir örnek verecek olursam, siz bir online shop

sayfasına giriyorsunuz ve sayfayaya kullanıcı adınız ve şifrenizle giriş

yapıyorsunuz. Sayfadan çıkıyorsunuz ve iki gün sonra geldiğinizde aynı sayfaya

giriyorsunuz. Bir de ne görüyorsunuz, ana sayfada adınız yazıyor ve önünde

Musa ÇAVUŞ 131

hoşgeldiniz kelimesini buluyorsunuz. Cookie’lerin yönetimi tarayıcılar

üstlenmiştir ve çeşitili tarayıcılar Cookie’leri çeşitli yerlere kayıt etmektedirler.

Örneğin IE, belli bir dizinde her Cookie için bir metin dosyası kayıt eder.

Firefox’ta Cookie’lere farklı ulaşabiliyoruz. Araçlar-> Seçenekler-> Gizlilik-

>Çerezleri göster düğmesini tıklıyorsunuz.

Şekil87 Çerez burada Cookie oluyor. Tarayıcıların Cookie’leri yönetim biçimi sizi

korkutmasın, çünkü JavaScript’te genelde Cookie’lerle işlemleri aynı yöntemle

programlamaktadır.

Cookie’lerin en az bir ismi ve bir değeri vardır. Cookie’nin ismi üzerinden

değerini okutabilirsiniz ve gereken programlama işlemlerini yapabilirsiniz.

Cookie’lerle işlem görürken çok önemli bir bilgi, o Cookie’nin ne kadar geçerli

olduğunun tanımlanmasıdır. Bunun için expires diye bir değişken vardır ve

geçerlilik tarihi özel bir formatta kayıt edilmesi gerekmektedir.

<html>


Musa ÇAVUŞ 132

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

Musa ÇAVUŞ 134

Şekil88 Ok düğmesine basmadan önce Seçenekler-> Araçlar-> Seçenekler-> Gizlilik-

>Çerezleri göster düğmesini tıklayın ve Tüm çerezleri sil düğmesini tıklayın.

Daha sonra cookie.html dosyasını tarayıcınızda açın ve Kullanıcı Adi ile Sifre

bilgilerini girerek Ok düğmesine basın. Seçenekler-> Araçlar-> Seçenekler->

Gizlilik->Çerezleri göster düğmesini tıklayın ve kendi Cookie’nizin orada

olduğunu görebilirsiniz. Cookie’leri JavaScript ile normal yoldan

silemiyorsunuz, ancak aynı Cookie ismini kullanarak eski bir geçerlilik tarihi

verirseniz Cookie’ler JavaScript içerisinden silinmiş olur.

document nesnesinin bir cookie nesnesi vardır ve Cookie’lerle yapmak

istediğimiz tüm işlemleri bu nesne ile yapıyoruz. Bilgiler String olarak

saklanmaktadır ve bunun için String nesnesinin tüm metodlarını kullanabiliriz.

length değişkenini biliyorsunuz String nesnesindeki metinin uzunluğunu

veriyor. substring() metodunun ilk parametresi String nesnesindeki metindeki

belirli bir kısmını iletiyor. substring() metodunun birinci parametresi belirli bir

kısmın başlangıcı olup ikinci parametresi o belirli bir kısmın sonudur. Diyelim

ki sizin String nesnesinin içindeki metin “Helal kardes” olsun. Siz substr(1,4)

yazdığınızda bu değer “elal” olacaktır, çünkü JavaScript bu durumda sıfırdan

saymaya başlar. indexOf() metodu, ilk parametredeki verilen değeri ikinci

parametredeki değerden başlamak şartıyla arar ve bulursa hangi pozisyonda

bulunduğunu iletir.

GetCookie(), SetCookie() ve getCookieVal() fonksiyonlarını ben

programlamadım, çünkü tekeri tekrar icat etmeye gerek yoktur. Bu kodu

internetten çektim. Bir ara birisi bunu yapmış ve tüm JavaScript Cookie

işlemlerinde bu kodlama kullanılıyor. Tabi siz diyorsanız, yok abi ben herşeyi

Musa ÇAVUŞ 135

kendim yapacağım, o sizin bileceğiniz iş. Benim fazladan programladığım iki

fonksiyon var, onlarda cookieYaz() ve cookieOku() fonksiyolarıdır.Đçinde

SetCookie() ve GetCookie() fonksiyonlarını kullanmaktan başka bir şey

yapmadım. SetCookie() fonksiyonunu kullanarak cookie nesnesine aktarmak

istediğimi bilgiyi aktarıyorum ve GetCookie() fonksiyonunu kullanarakta

cookie nesnesinden kullanmak istediğim bilgiyi okuyorum o kadar.

5.6 Nesne oluşturma Daha öncede belirttiğim gibi JavaScript nesnelere dayalı bir programlama dili

değildir. Yalnız bir yöntemle JavaScript’te sınıflar yazabiliriz. Bu sınıflardan

bazı kısıtlamalarda olsa nesneler oluşturabiliriz. Önce bir kurucu metot

yazıyoruz ve kurucu metot ile ile oluşturduğumuzu new anahtar kelimesiyle bir

nesne haline dönüştürüyoruz.

<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?");

Musa ÇAVUŞ 136

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, birçok programlama dilinde büyük harfle başladığı için bende

büyük harfle başladım, fakat JavaScript’te istediğinizi yapmakla özgürsünüz.

Kurucu metotları normal fonksiyonlardan ayırmakta this anahtar kelimesinin

rolü büyüktür. this, oluşturacağımız nesnenin göstergesidir. Kurucu metodunda

kullanılan this anahtar kelimesinden sonraki değişkenler oluşturulacak nesnenin

özellikleridir. Örneğimizdeki Insan kurucu metodun yas, ad ve konus gibi

özellikleri vardır. Đlginç olan konus fonksiyonunu normal bir değişkenmiş gibi

atama yapabilmemizdir. konus() fonksiyonu parametresiz atandığı için konus

değişkeni konus() fonksiyonunun bir göstergesi olarak atanmaktadır. Kurucu

metot ile Insan adında bir sınıfın yas değişkeni, ad değişkeni ve konus

metodunu oluşturmuş oldum.

Örneğe devam bakarsak, Array sınıfından bir aile nesnesi oluşturdum. aile

değişkeninden sonraki kullandığım köşeli parantezlere farklı olarakString

değerleri atadım. Array sınıfı bize bu fırsatı sunmaktadır. Daha sonra her bir

aile ferdine new anahtar kelimesiyle bir Insan nesnesini oluşturdum ve atadım.

Musa ÇAVUŞ 137

konus() metodu çağrıldığında ekrana aile ferdi için kullandığım cümle

gelmektedir.

JavaScript’te kalıtım yoktur ama protyping vardır. Daha önce oluşturulmuş bir

nesneye biz metodlar ya da değişkenler ekleyebiliyoruz.

<html>

<body>


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>

Musa ÇAVUŞ 138

nesneoluşumu2.html

Şekil90 Bir önceki örnekle bu örneğin tek farkı Insan kurucu metodundan sonra

prototype adlı bir tanımlamanın kullanılmasıdır. prototype tanımlamasından

sonra yaptığımız tanımlama Insan nesnelerine eklenmektedir. Bu işlemi

JavaScript’in standart sınıflarında uygulayabilirsiniz.

Musa ÇAVUŞ 139

Bölüm 6 Đstisnalar ve Event kullanımı

Musa ÇAVUŞ 140

6.1 Đstisna kullanımı JavaScript’te oluşan hataları istisnaları kullanarak program kodunun çökmesini

engelleyebilirsiniz. Adamlar bizim için her şeyi düşünmüşler, bize düşen sadece

öğrenmek kalıyor.

try ve catch Hatalar sadece geriye dönen değerlere göre hata vermezler, ayrıca kodu kontrol

ederler ve oluşan hatalar sonucu programı farklı bir program bloguna

yönlendirilir. Diyelim ki, programınızda bir matematiksel işlem

gerçekleştirmekteyiz:

<html>


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, Türkçe dene demek. catch kelimesi de, yakala anlamını taşımaktadır. try

bloğu içerisinde olan kod önce bir deneniyor, eğer her hangi bir noktada hata

oluşuyorsa o noktadan sonra catch bloğuna geçiliyor ve catch bloğundaki

satırlar işlem görüyor. eval fonksiyonu çarpma işlemini gerçekleştirmektedir. 15

* 5 işleminde bir sorun çıkmamaktadır fakat a * b denilince JavaScript hata

vermektedir ve catch bloğuna geçilmektedir. catch bloğundaki satırlar

işlendikten sonra o bloktan çıkılmaktadır ve program devam etmektedir. try-

catch bloğu olmasaydı program hata verilen yerde duracaktı. catch bloğuna

bakarsanız EvalError yazıyor. Buna göre try bloğu içerisinde EvalError hatasını

oluşturan tüm işlemler bu catch bloğuna düşmektedir.EvalError yerine sadece

Error yazsazdık, tüm hatalarda bu bloktaki işlemler gerçekleşecekti.

6.2 Event kullanımı JavaScript’te kendi Event’imizi programlayabiliriz. Şimdiye kadar gördüğümüz

Event’ler HTML’a aitti. Şimdi JavaScript ortamında Event’leri nasıl

kullanabileceğimizi göstereceğim.

<html>


function mesaj() {

alert("Dugmeye tiklandi");

}

</script>

<body>

<form name="f1">

<input type="button" name="b1" value="OK" />

Musa ÇAVUŞ 142

</form>


document.f1.b1.onclick = mesaj ;

</script>

</body

</html>

event1.html

Şekil93

Şekil94

OK düğmesine basılınca alert() fonksiyonu ekranda bir görüntü getirmektedir.

Bu bildiğimiz bir görüntü fakat bizim için önemli nokta kod bölümü.

document.f1.b1 kısmıyla düğmemize ulaşıyoruz ve noktadan sonra onclick

geliyor. Bu JavaScript’in bir eventhandler’i. onclick olayınada mesaj()

fonksiyonunu atıyoruz. Atamada parantezleri kullanmıyoruz yoksa fonksiyonu

o noktada çağırmış olurduk. JavaScript’teki eventhandler’ler HTML’deki gibi

aynı ismi taşırlar, tek şartı ise hepsini ufak yazma zorunluğunun olmasıdır.

Musa ÇAVUŞ 143

<html>


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.html’deki Eventhandler, window nesnesindeki onkezpress

Eventhandler’dir. windows nesnesininher hangi bir yerinde bir tuşa basılınca

dugme fonksiyonu çağrılıyor ve dugme fonksiyonu cevap id’sine sahip tagı

çağırarak içeriğini ev.which’te yazan değere göre değiştiriyor. ev parametresi

onkeypress Eventhandler’in gönderdiği bir nesnedir. ev nesnesinin which adlı

bir değişkeni vardır ve burada basılan düğmenin kodu yer almaktadır. Ben

örneklerimde Firefox kullandığım için örnekleri de Firefox’a göre anlatıyorum.

Bu sistem IE’de çalışmayacaktır, çünkü IE JavaScript’te Eventhandler

kullanımını farklı beklemektedir.

Musa ÇAVUŞ 144

6.3 Event nesnesinin değerlendirme Kullanacağımız değişkenler sayesinde bu bilgilere Event nesnesinin değerlerine

ulaşabiliriz.

<html>

<style>

* {

background-color : green;

color : yellow;

}

#cevap {

position:absolute;

left:0px;

top:0px;

background-color:red;

color:yellow;

}

</style>


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 oluşturduğum olay hakkında bilgi

gösteriliyor. pageX ve pageY açılan pencereye göre gerçekleştirilen olayın

koordinatlarını veriyor. screenX ve screenY ekranın koordinatlarına göre

gerçekleştirilen olayın koordinatlarını veriyor. which değişkenini daha önce

görmüştük bu sefer Eventhandler fare ile ilgili olduğu için farede basılan tuşun

koordinatını vermektedir. type ise ne tür bir olay olduğunu iletmektedir.

style.width ve style.left gibi kodlamaları görünce diyeceksiniz ki bu da nedir?

document.getElementById(“cevap”) kısmına kadar her şeyi anlamış olmalıyız.

Anlamadıysanız kitabı tekrar okumakta ve örnekleri tekrar incelemekte fayda

görüyorum. document.getElementById(“cevap”) çağrısından sonra style

yazarak bu çağrı ile elde ettiğim tagın style’ını değiştirmek istediğimi ifade

etmiş oluyorum. style’den sonra width yazarak kullanılan style’ın genişliğini

değiştirebiliyorum. left ve top top değişkenleri stylesheet’in (x,y)

Musa ÇAVUŞ 146

koordinatlarını belirtmemi sağlıyor. style nesnesiyle tagların css özellikleriin

çok kolaylıkla değiştirebilirsiniz.

Böylelikle JavaScript bölümü bitmiş oldu. Đnanıyorum ki artık iyi bir JavaScript

programcısı oldunuz. JavaScript’in her şeyini belki bilmiyorsunuzdur fakat

piyasada kullanılan yöntemlerin çoğuna hâkim durumundasınız. Bu bölümden

sonra AJAX konusuna değineceğim

Musa ÇAVUŞ 147

Bölüm 7 AJAX

Musa ÇAVUŞ 148

7.1. AJAX (Asynchornous JavaScrıpt and XML) AJAX teknolojisiyle ilk karşılaştığımda dedim ki, birileri XML, JavaScript,

HTML, CSS, DHTML gibi teknolojilere bakmıştır ve bunların hepsine yeni bir

isim olan AJAX ismini vermiştir, çünkü AJAX bu teknolojilerden oluşmaktadır.

AJAX’ın temelinde JavaScript yatmaktadır. Bu bölüme geldiyseniz JavaScript’i

sular seller gibi biliyorsunuz demektir.

Đlk AJAX uygulamamızı hemen vermek istiyorum. Ayrıntıları şimdilik

anlamanıza gerek yok, şu an önemli olan bir kaç adımla AJAX uygulamasının

gerçekleştiğini görmektir. Đleriki derslerde AJAX teknolojisini inceledikçe eksik

bölümler daha iyi oturacaktır.

Birinci adımda web sayfasına ihtiyaç duyarız. Bunun için ufak denemelerimiz

için Notepad yeterli olacaktır. Ben Notepad++ kullanıyorum, hem beleş hemde

çok kullanışlı 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

Oluşturduğum sayfada seçme kutusu kullandım. Bunu <select> tagı ile

tanımlayabiliyorsunuz. EventHandler olarak onclick tanımlaması yaptım ve her

tıklandığında yolla() fonksiyonu çağrılacaktır. Seçme kutusunu bilgilerle

doldurabilmek için HTML’de <option> tagı kullanılır.

Şimdi bir şekilde HTML sayfamızda bir tıklamayla Server’a mesajı iletmemiz

gerekiyor ve alınan mesaja göre HTML kodunun sc id’li <div> tagında mesaj

yazdırmamız gerekiyor.

function yolla() {

alert("merhaba");

Musa ÇAVUŞ 150

}

sehirler.js

Şekil98

yolla fonksiyonunu basit tuttum, siz seçme kutusunda her hangi bir şey

seçerseniz ekrana merhaba mesajı gelecektir.

AJAX teknolojisini uygulamak için sehirler.js örneğimizi biraz daha

geliştirmemiz 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 değişkenini tanımladıktan sonraki satırda ne tür bir tarayıcımın

kullanıldığını kontrol ediyorum. navigator.appName.search() fonksiyonuyla

tarayıcı uygulamasının adında Microsoft yazını aratıyorum, eğer varsa

ActiveXObject sınıfıyla bir nesne oluşturulması gerekmektedir, değilse

XMLHttpRequest sınıfıyla bir nesne oluşturulur. IE’nin yeni sürümü de ikinci

metodu kullanmaktadır. Senaryomuza göre, AJAX nesnesini oluşturduktan

sonra tıklanan şehri fonksiyonumuzda elde etmemiz gerekiyor ve bunu

Server’da çalışan programa yollamamız gerekmektedir.

Musa ÇAVUŞ 151

var resNesne;


resNesne = new ActiveXObject("MSXML2.XMLHTTP");

}

else {


}

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 döngüsüyle f sehir seçme kutusunun içindeki tüm seçenekler kontrol

ediliyor ve birisi seçili konumdaysa resNesne bir open metoduyla web

server’daki bir linki çağırıyor ve web server ile iletişime geçmiş oluyor. Birinci

parametredeki get, iletişimin get HTTP metoduyla olacağını gösteriyor. Đkinci

parametredeki sehir.php, web serverdaki bir PHP program parçasına işaret

ediyor. ? işaretinden sonra gelen nerede kelimesi PHP programının içine

göndereceğimiz değeri ayırt edebilmemiz içindir. nerede kelimesinden sonra

eşitlik operatörüyle değer atanır. Üçüncü parametre olan true iletişimin

asenkron olduğuna işarettir.

Bir başka adım ise, başka bir Eventhandler’in oluşturulmasıdır.

onreadystatechange değişkenine handleResponse fonksiyonunu atıyoruz. Server

cevap verince handleResponse() fonksiyonu çağrılmış oluyor.

Musa ÇAVUŞ 152

onreadystatechange değişkeni AJAX için eklenmiştir ve sadece JavaScript’te

vardır. Buna benzer bir atamayı daha öncek ikonularda yapmıştık.

Son adımda nesneyi send() fonksiyonuyla yolluyoruz. Parametredeki null

ifadesi, yollamanın get metoduyla olmasından kaynaklanmaktadır. Web

server’den gelen cevabı resNesne.responseText değişkeniyle elde ederiz. Web

server ve Client sürekli iletişimde bulundukları için Client tarafı Web

server’dan sürekli cevap alabilir ve handleResponse() fonksiyonunu gereksiz

yere işleme sokabilir. Bunun olmaması için readState değişkenini 4 değeriyle

kontrol ettirdim. 4 değer yollanan cevabın istenilen yere ulaştığını ve geri

geldiğinin ifadesidir. AJAX teknolojisini kullanabilmek için yapmanız gereken

bu adımları izlemektir.

PHP örneğini çok kısa ve anlaşılır tutmaya çalıştım, kitabın konusu PHP

olmadığı için PHP anlatmayacağım. PHP örneklerini, AJAX örneklerini

anlamanız için vermekteyim. Neden PHP anlatılmadı da, CSS, HTML, XHTML

gibi teknolojilere değinildi diyebilirsiniz. Bunun nedeni bu teknolojileri PHP

gibi Server tarafında çalışan teknolojiler olmaması ve AJAX’ın birer parçaları

olmasında yatıyor. AJAX’ın en büyük avantajlarından birisi, Server tarafında

hangi program çalışırsa çalışsın, AJAX için Server’dan alacağı bilgi önemlidir.

<?

echo "Bilgilendirme:";

switch($_REQUEST['nerede']) {

case 1: echo "Bir sehir"; break;


case 3: echo "Sehir degil"; break;













Musa ÇAVUŞ 153


}

?>

sehir.php

PHP programlama dilini derinden incelemeyeceğimi demiştim fakat ne

yaptığımı size de anlatmak istiyorum. PHP ile Java Script’in birçok yapısı

aynıdır, o yüzden anlamakta zorluk çekmeyeceğinize inanıyorum. <? ve ?>

işaretleriyle PHP bölümü tanımlamış oluyorsunuz. echo komutuyla Web

Server’ın Client’e vereceği cevabı belirtmiş oluyoruz. PHP, $_REQUEST

dizisinde AJAX tarafından yollanan parametreleri bir dizi halinde tuttuğu için

bu dizinin nerede olan dizisini sorguladım. Buna göre de switch bloğu elde

edilen değere göre seçenekteki cevabı Client’e yollamaktadır.

Üç dosyamızı bitirdiğimize göre sehir.html dosyasını tıklayınca kurduğumuz

senaryo çalışması gerekiyor fakat çalışmadığını göreceksiniz, neden? Biz,

programlamayı bitirdik fakat AJAX için bir Web Server kurmadık. AJAX ile

yazdığımız Client tarafı PHP ile yazdığımız Server tarafına bir Web Server ile

bağlantıya geçecek ve bunu yapabilmek için bir Web Server’a ihtiyaç

duymaktayız.

PHP hakkında sizin bilmenizi istediğim bir şey daha var. O da <? yazarken bazı

Server’ların <? yerine <?php kabul etmesidir. Az sonra anlatacağım XAMPP’ı

ben Windows XP altında çalıştırırken PHP dosyalarımı kodladığımda <?

başlayarak yazıyordum ve çalışıyordu. Windows 7 altında denediğimde

çalışmadı. Araştırmalarım sonucu <?php yazınca çalıştı. Sizde böyle bir

problemle karşılaştığınızda benim gibi saatlerce aramayın ve bu çözümü

uygulayın. Bunun farklı bir çözümü var fakat kitap PHP kitabı değil.

Yazdığımız PHP kodunun çalışabilmesi için bir Server’a ve Server tarafında bu

kodu anlayacak bir uygulamaya ihtiyacımız var. Şimdi diyeceksisiniz hoca iyi

hoşta ben ne anlarım Server, PHP anlaması bilmem neden. Ben anlatacağım

korkmayın. Bir sonraki XAMPP bölümünü okuyun, orada size kişisel

bilgisayarınızda hem Server hem PHP anlayan çok hızlı bir mekanizmayı

göstereceğim.

XAMPP

http://www.apachefriends.org/en/xampp.html adresinden XAMPP programını

indirin. Bu program paketi kişisel bilgisayarınızda hazır çalışabilir bir web

server kurulmasını sağlıyor. Ben bu sayfadan XAMPP programını indirdiğimde

Musa ÇAVUŞ 154

dosya adı xampp-win32-upgrade-1.7.2-1.7.3 şeklindeydi. Kurulumdan sonra

web server’ınızda güvenlik açığı olduğunu bilmelisiniz, çünkü XAMPP

projesinde güvenlikten ziyade işlenebilirlik ve rahat erişim ön plandadır.

Đndirdiğim dosyaya çift tıkladım:

Şekil99

Destination folder olarak C:\xampp yazdım. XAMPP bu dizini seçmemi tavsiye

etti bende bundan dolayı bu dizini seçtim. Install düğmesine bastım:

Musa ÇAVUŞ 155

Şekil100 Kurulan dizinde xampp-control.exe dosyasını çalıştırın.

Musa ÇAVUŞ 156

Şekil101 Control Panel’de bizi ilgilendiren Apache web serveri ve MySql veritabanı.

Web server olan Apache’yi çalıştırmak için Start düğmesine basmamız

yeterlidir:

Musa ÇAVUŞ 157

Şekil102 Tarayıcıyla web server aynı makinede çalışıyorsa, tarayıcınızın adres kısmına

http://localhost yazın.

Musa ÇAVUŞ 158

Şekil103 Eğer buna benzer bir sayfa ile karşılaştıysanız XAMPP kurulumu başarıyla

sağlanmıştır. sehirler.html, sehirler.js ve sehir php dosyalarını XAMPP

dizininde bulunan htdocs dizininde ajax/sehirler dizini oluşturarak buraya

kopyalıyorum.

Fırefox’un adres satırını http://localhost/ajax/sehirler/sehirler.html yazın. Çıkan

sayfada ben Merdiven seçeneğini seçtim:

Şekil104

Musa ÇAVUŞ 159

Şekil105 Seçenekleri tıklarken merhaba diye bir mesaj penceresi açıldı ve mesaj

penceresini kapattıktan sonra tarayıcı seçeneğim hakkında bana bilgi verdi.

Başka bir seçenek seçtiğinizde, tarayıcınız o seçenekle ilgili bilgileri Server’a

yollayacaktır. Server’da hazırlanan PHP programı gelen bilgiye göre tarayıcıya

cevap verecektir. Burada önemli olan gelen cevabı tarayıcı yeni bir pencerede

ya da sayfada göstermemesidir. Gelen cevabı tarayıcı AJAX teknolojisi

sayesinde aynı sayfada göstermektedir. Bana göre AJAX teknolojisinin en

büyük avantajı aynı sayfadaki Server sorgulamalarına cevap alabilmesidir.

Server tarafında Web Server olmadan da AJAX’ı çalıştırabiliriz nasıl 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()" />


Musa ÇAVUŞ 160

</body>

</html>

resim.html

var resNesne;



}

else {


}

function sndReq(transfer) {

if (transfer == "1") {

resNesne.open('get', 'bilgi1.txt', true);

}

else {

resNesne.open('get', 'bilgi2.txt', true);

}



}



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 dosyasına tıkladığımda tarayıcı bana iki resim gösteriyor ve ben fare

ile elma resminin üzerine gelince aşağıda elma yazıyor. Armut yazan resime

geldiğimde armut yazıyor. Herhangi bir dizinden resim.html’yi

çalıştırabilirsiniz, PHP gibi bir dil kullanmadığım için AJAX verdiğim metin

dosyasında yazanı cevap olarak algılıyor.

Web Form’ları AJAX ile Web Server’ine iletilen bilgilerin geri alınması, Web Form’larından

bilgilerin iletilmesi ve geri alınmasına çok benziyor. Bu bölümde AJAX ile

Web Form’larıyla nasıl kombine edildiğini göstereceğim. Form’lara daha önce

değinmiştim ve gerekli konularda açıklamalarda getirdim. Şimdiye kadar bir

Form kullanırken bilgileri Server’e nasıl yollarız buna değinmedim. Hazırlanan

Form’daki bilgilerin hangi Server’e gideceğini <form> tagındaki action

parametresinde belirtiyoruz. Form bilgileri buraya vereceğimiz adrese

gönderilecektir. method parametreside bilgilerin hangi yöntemle

gönderileceğine işarettir. get değerini koyarsak Form sayfasında belli

büyüklükteki bilgileri yollayabiliriz ve yollanan bilgiler genelde adres kısmında

Musa ÇAVUŞ 162

gözükür. post değeri ise öyle değildir, daha büyük kapasiteli bilgiler

yollayabilirsiniz ve yollanan bilgiler açık olarak gösterilmez. Form bilgilerin

yollanması için <input> tagının type parametresinde submit yazması gerekiyor.

Bunu kodladığınızda tarayıcınızda bir düğme belirecektir. Düğmenin görevi,

basıldığında Form’daki bilgileri <form> tagındaki action parametresinde

belirtilen adrese yollaması olacaktır.

<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 dosyalarını bilgisayarımdaki XAMPP’daki htdocs/ajax

dizininin altına kopyaladım ve tarayıcımdan http://localhost/ajax/login.html

diye bir çağrıda bulundum. login.html dosyasında, iki <input> tagım var,

kullanıcı adı ve şifreyi yazıyorum daha sonra Tamam düğmesine basarak

bilgileri yolluyorum. login.php dosyası yine bir PHP kodudur. Oldukça basit

tutmaya çalıştım, çünkü kitabın amacı PHP’yi anlatmak değil sadece PHP’den

yararlanmak.

PHP’de $_GET dizisinde Client tarafından yollanan parametrelerin bir listesi

bulunmaktadır. Client tarafından yollanan kullaniciadi parametresini köşeli

parantezde tırnak açarak kullanaciadi yazarak elde ediyoruz. JavaScript’teki if

kıyaslaması gibi PHP’de bir kıyaslama yapabiliyorsunuz. Bende kullaniciadi

parametresini ahmet değeri ile kıyasladım. Yani dedim ki Client tarafından

kullaniciadi ahmet ise o zaman kıyaslama sonucunu true kabul et. Aynı şekilde

sifre parametresi içinde yaparak mahmut değeriyle kıyasladım. Eğer

kıyaslamada iki parametrede true değerini veriyorsa o zaman PHP echo

fonksiyonuyla Client’e Sifreyi bildin aferin yazısını <h3> tagıyla yollamaktadır.

kullaniciadi ya da sifre parametresinden birisi uymuyorsa Client tarafına Giris

bilgilerinizde bir yanlışlık var diye bir mesaj yollanacaktır. Tarayıcınızda ikinci

sayfada ona göre bir yazı gösterecektir.

Şimdi bu işlemi AJAX kullanarak yapalım. login.php dosyasını hiç

değiştirmiyorum onu aynen bırakıyorum.

<html>

<head>

Musa ÇAVUŞ 164

<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;



}

else {


}

function yolla() {

resNesne.open('get', 'login.php?kullaniciadi=' +

document.f.kullaniciadi.value+

'&sifre='+document.f.sifre.value,true);



}



document.getElementById("sc").innerHTML = resNesne.responseText;

}

}

login.js

Musa ÇAVUŞ 165

Şekil108

login.html’deki <form> tagındaki action ve method parametrelerini kaldırdım,

çünkü bunları AJAX teknolojisini kullanarak gerçekleştirdim ve login.js

dosyasına aktardım. login.html’de bilmeniz gereken bir nokta, submit değeri

yerine button yazdım. submit otomatik olarak <form> tagında yazan action

parametresindeki değere bilgileri yolluyordu, bunu button düğmesiyle onclick

Eventhandler’ini kullanarak yolla() fonksiyonunun içinde gerçekleştirdim.

yolla() fonksiyonuna bakarsanız içinde kullandığım open() metodunda

kullaniciadi ve sifre parametrelerin değerini Server’e yolladığımı görürsünüz.

Server yolladığım değerlere göre bir cevap vermektedir ve handleResponse()

fonksiyonuna geri yollamaktadır. Tarayıcı, DOM modeline göre sc ıd’sine sahip

<div> tagında, gelen cevabı göstermektedir. AJAX kullanılarak yapılan bu örnekte Tamam düğmesine basıldığında tarayıcı

yeni bir sayfa açmamaktadır, her şey aynı sayfada olmaktadır. Ajax ve CSS Daha önce CSS’e bir giriş yapmıştım ve önemli konulara değinmiştim. Şimdi

CSS ile AJAX’ı kombine ederek avantajlarını göstereceğim. Şimdiye kadar

yaptığım AJAX uygulamaları çalışıyordu fakat canlılık yoktu. Kullanacağımız

CSS ile bu uygulamalar hem canlılık kazanacak hemde CSS AJAX’a neler

katıyor bunu görmüş olacaksınız. Bunu görebilmek için bir örnek daha önce

Musa ÇAVUŞ 166

kodladığımız resim.html’yi örnek olarka vermek istiyorum.. Daha önceki

kodlarda biraz değişiklik yaptım:

<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()" />


</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 dosyasında hiç bir değişiklik yapmadım. resimcss.html dosyasında

tek bir değişiklik yaptım o da resim.css dosyasını resimcss.html dosyasına

<link> tagıyla bağlamak. resim.css dosyası yeni oluşturduğum bir dosya. Bu

dosyada anlatmadığım parametre position, top, left, border, border-width, width

ve height parametreleridir. position parametresiyle bir tagın konumunu

belirliyorsunuz, absolute diyerek mutlak pozisyonda yer almasını istemiş

oldum. top parametresi, tagın x koordinatını ve left parametresi tagın y

koordinatını belirtmemizi sağlıyor. border parametresiyle çerçeve şeklini,

border-widht ile çerçeve kalınlığını, width ile çerçeve genişliğini ve height ile

çerçeve yüksekliğini tanımlamış oluyoruz.

Şekil109 Hadi bakalım bu bölüde hayırlısıyla bitirdik. Darısı diğer bölümlerin başına

Musa ÇAVUŞ 168

Bölüm 8

HTTP ve XMLHttpRequest

Musa ÇAVUŞ 169

8.1 HTTP ve XMLHttpRequest Bu bölümde biraz Sniffing göstermem gerekiyor ki HTTP belleğinize daha iyi

otursun. Kod bölümünde aslında yeni gösterdiğim fazla bir şey yok, sadece

daha önce gösterdiklerime biraz ilave edeceğim ve açıklayacağım. Benim analiz

etmek istediğim , yazdığım AJAX uygulaması ile Server arasındaki veri

transferleri.

<html>

<head>

<title>HTTP Degerlendirmesi</title>

<script language="JavaScript"

src="xmlhttprequestobjekt.js"></script>

<script language="JavaScript" src="httprequest.js"></script>


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>

</body>

</html>

httprequest.html

httprequest.html kodunu görür görmez manzarayı çakmış olmalısınız. Kod çok

kolay ve anlaşılır.

body {

background:#dddddd;

font-size:14px;

font-family:"Engravers MT";

color:#1111ee;

}

Musa ÇAVUŞ 170

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 büyüklüğünü verirken, font-familiy yazı tipini veriyor.

Yazı tipinin büyüklüğünü piksel olarak verdim ve font-size parametresinden

sonra bir sayı yazarak ingilizce pixel kelimesinin kısaltması olan px

kullanılıuyor.

function olsXMLHttpRequestObject(){

var resNesne = null;

try {

resNesne = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(Error){

Musa ÇAVUŞ 171

try {


}

catch(Error){

try {


}

catch(Error){

alert(

"XMLHttpRequest-Nesnesi olusturulamiyor");

}

}

}

return resNesne;

}

function OlusturAJAXObjekt(){

this.olsXMLHttpRequestObject = olsXMLHttpRequestObject;

}

o = new OlusturAJAXObjekt();

resNesne = o.olsXMLHttpRequestObject();

xmlhttprequestobjekt.js xmlhttprequestobjekt.js kodunda oluşturulan resNesne nesnesini httprequest.js

kodunda kullanabiliyoruz. Đkiside farklı dosya olmasına rağmen JavaScript’i

hazırlayan amcalarımız bize böyle bir kolaylık sağlamışlar.

function sndReq() {

resNesne.open('get', 'httprequest.php',true);



}

function handleResponse() {

if(resNesne.readyState == 4){

document.getElementById("bilgi").innerHTML =

resNesne.responseText +

"<br>Transfer durumu: " + resNesne.readyState +

"<br>Durum: " + resNesne.status +

Musa ÇAVUŞ 172

"<br>Durum bildirisi: " + resNesne.statusText +

"<hr><h4>Server tarafindan iletilen tum Header'ler</h4>" +

resNesne.getAllResponseHeaders();

}

}

httprequest.js Tarayıcıda çıkan sayfaya tıkladığımızda Server’dan gelen cevabın Header’ini

tarayıcıda görüyoruz. Header nedir? HTTP, Web’deki kullanılan protokoldür.

Temelde web tarayıcısıyla web Server arasındaki iletişimi sağlayan protokoldür.

Bir yönden çok hızlıdır, fakat diğer yönden durumsuz olduğu için takip edilmesi

çok zordur. Örneğin oturumlar kayıt edilemediği için bu protokol bizi

zorlamaktadır.AJAX programcısı olarak, HTTP mantık olarak nasıl çalıştığını

bilmelisiniz, ancak JavaScript ile neler yapıldığını böyle anlayabilirsiniz.

Request, Client tarafından Web Server’ine yollanan bir sorgulama olup

Response Server tarafından Client tarafına verilen cevaptır. Web Request ve

Response ile işlemektedir. Diyelim ki tarayıcınızın adres kısmında bir adres var.

Bu adresi tarayıcınıza girdiğinizde ve aratmaya başladığınızda, Client olan

tarayıcınız o adrese bir Request yollayacaktır. Web Server sorgulamaya cevap

olarak eğer varsa bir Response yollar. AJAX’ta bu döngü sürekli ve

çaktırmadan oluyor, çünkü AJAX’ın temelinde kullanıcının bu bilgileri bilmesi

istenmemektedir.

<?

echo "Ne haber Genclik?</h3>";

?>

httprequest.php

Musa ÇAVUŞ 173

Şekil110 resNesne.status bize 200 değerini verirse resNesne.statusText OK olacaktır.

Web Server, tarayıcıya yolladığı mesajın görüntülenmesine izin vermiştir

anlamını taşıyor. resNesne.readyState yani transfer durumunun 4 olması zaten

bunu ifade etmektedir. Web Server ile Client arasındaki bir sorgulama için

birçok iletişim olmaktadır. Client sorgulamayı yaptığında, Web Server, lütfen

bekleyin diye sürekli mesaj yollayabilir. Ancak 4 değerini yolladığı an Client

tarafı gelen cevabın tarayıcıda gösterileceğine dair izin aldığını bilir ve yayınlar.

JavaScript’in geliştirilmesinin asıl sebeplerinden biri XMLHttpRequest

nesnesinin varlığıdır. Bu nesne sayesinde JavaScript popüler olup AJAX

teknolojisinin oluşmasını sağlamıştır. En önemli özellikleri, Callback

fonksiyonlarını kayıt etmesidir, örnekte handleResponse fonksiyonudur. Ayrıca

HTTP’nin HEADER dediğimiz alanına ulaşabilmesidir, örneğin resNesne.state

gibi.

Musa ÇAVUŞ 174

AJAX sorgulaması

AJAX sorgulamasının sıralaması hep aynıdır, aklınızda kalması için 5 adımı

size toparlıyorum:

1- XMLHttpRequest nesnesi oluşturulur.

2- Callback fonksiyonu XMLHttpRequest nesnesine referans olarak kayıt

edilir. Örneğin resNesne.onreadystatechange = handleResponse; gibi.

XMLHttpRequest nesnesinin readyState değişkeninin 4 değerini alması,

Web Server’in yeşil ışık yakması anlamını taşır ve tarayıcı bu ışıktan

sonra gelen cevabı bünyesinde göstermek için hazırlanır. Bundan dolayı

neredeyse tüm AJAX uygulamaları bu değişkeni kontrol ederler.

3- XML HttpRequest nesnesinin open() metoduyla bir bağlantı kurulur.

4- Sorgulama send() metoduyla gönderilir.

5- XMLHttpRequest’in değişken değerlerine göre cevap değerlendirilir.

Musa ÇAVUŞ 175

Bölim 9

DHTML ve AJAX

Musa ÇAVUŞ 176

9.1 DHTML nedir?

DHTML özet olarak, JavaScript, HTML ve Stylesheet’lerin birleşmesidir.

AJAX’ta, hatırladığınız gibi birçok var olan teknolojilerin bir araya gelmesiyle

oluşmuştur. DHTML, DOM ile beraber çalışmaktadır. DOM teknolojisi

üzerinden değişiklik yapılmaktadır, 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>

</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;

Musa ÇAVUŞ 178

}

#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 dosyasını en aşağıda koda bağladım, çünkü resim1 ve resim2 nesnelerine

onmouseover Eventhandler’ini kayıt etmek isteseydim JavaScript sorun

çıkartırdı. Bunun nedeni, JavaScript, Eventhandler kayıt edilirken nesnelerin

varlığını istemektedir. Bu da resim1 ve resim2 nesnelerini oluşturduktan sonra

olabilir. addEventListener değişkeniyle sayfamıza bir Eventhandler kayıt

edebilir miyiz bunu kontrol ediyoruz. IE için bu yöntem geçersizdir, ben Firefox

kullandığım için bu yöntemi kullandım.

function sndReq1() {

resNesne.open('get','dhtml1.php?&resim=1', true);



}

function sndReq2() {

resNesne.open('get','dhtml1.php?resim=2', true);



}



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 değerine göre bir <img> tagı yollamaktadır ve

tarayıcı bu tagı resım id’li <div> tagında göstermektedir. Normalde bu

mantıktaki işlemleri daha önce yapmıştık, burada kullanılan sistemin bir

bölümünde DHTML vardır, DOM yoluyla işlem görülmektedir.

Şekil111

DHTML bize resimlere ulaşabilmek için JavaScript sayesinde images nesnesini

sunar. Bu nesne sayesinde HTML sayfamızdaki <img> resimlerine çok

kolaylıkla ulaşabiliriz ve istediğimiz işlemleri yapabiliriz.

Musa ÇAVUŞ 180

Windows’ta bir program yükleneceğinde eğer uygulama arka planda bir şeyler

yapıyorsa ön tarafta bir kum saati çıkartıyor. Sıradaki örneğimizide bu şekilde

düşündüm. Diyelim siz bir sorgulama yolluyorsunuz ve kullanıcıyı sıkmamak

için, program arka planda işlem görürken ön tarafta işlem yapıldığını gösteren

bir saat koymak istiyorsunuz:

<html>

<script language="JavaScript" src="image1.js"></script>


window.document.onkeypress = sndReq;

</script>

<body>

<h1>Bir tusa basiniz</h1>


<img src="bos.gif" height="30"

style="position:absolute;top:80px;left:400px;">

</body>

</html>

image1.html <img> tagında style parametresine <img> tagında gösterilecek gif dosyasının

yerini ve büyüklüğünü belirttim.


function erzXMLHttpRequestObject(){


try {


}

catch(Error){

try {


}

catch(Error){

try {


}

catch(Error){

Musa ÇAVUŞ 181

alert("XMLHttpRequest nesnesi olusturulamiyor");

}

}

}

return resNesne;

}

function sndReq() {

resNesne.open('get', 'image1.php',true);



}



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 büyük bir bölümünü tanıyorsunuz. handleResponse() fonksiyonuna

iyi bakın. readyState değişkeni 4 değerini almamışsa tarayıcıdan saat.gif

dosyasını göstertmesini istiyorum. Eğer Server’dan 4 değeri geliyorsa, yani

Server diyorsa tamam kardeş sana yeşil ışık yaktım o zaman cevap id’sine sahip

<div> tagının içindeki metini Server’dan aldığım cevap ile değiştiriyorum.

<?

sleep(6);

echo "Biraz beklettim, ama manzarayi caktin sanirim?";

?>

image1.php

sleep() fonksiyonu çağrıldığı noktada verilen parametredeki sayı saniyesi kadar

durulmasını söyler.

Musa ÇAVUŞ 182

Şekil112 DHTML teknolojisiyle sayfamızdaki Style’lerede ulaşabiliriz. style özelliğini

kullanarak bunu çok kolay gerçekleştirebilirsiniz:

<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 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 değeri vererek bu selektörün gösterdiği taglar

görünmez olmaktadır.


function olsXMLHttpRequestObject(){


try {


}

catch(Error){

try {


}

catch(Error){

try {


}

catch(Error){

alert("XMLHttpRequest nesnesi olusturulamadi");

}

}

}

return resNesne;

}

function sndReq() {

resNesne.open('get', 'image1.php',true);



}



document.getElementById("cevap").innerHTML = resNesne.responseText;

document.getElementById("durum").style.visibility = "hidden";

}

else {

document.getElementById("durum").style.visibility = "visible";

}

}

Musa ÇAVUŞ 184

resNesne=olsXMLHttpRequestObject();

stil1.js

<?php

sleep(5);

echo "Yine uzun surdu ama manzarayi kesin caktin";

?>

image1.php

Şekil112 stil1.js dosyasında style nesnesini kullanarak tagların style özelliklerini

değiştirdim. Bu nesneyle CSS’te bulunan değişkenlere çok rahatlıkla

ulaşılmaktadır. visibility değişkeninin değerini visible yaparak durum id’sine

sahip olan tagı göstermiş oldum. Diğer CSS parametrelerini de style

nesnesinden yararlanarak değiştirebilirsiniz. Denemede özgürsünüz.

Denemeden önce bu konuyla alakalı son bir örnek yapmak istiyorum:

<html>

<style type="text/css">

#bilgi {


color : white;

border : solid;

}

#P1 {


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="P1"></div>

</body>

</html>

ilerle.html

function sndReq() {

resNesne.open('get', 'image1.php?z=' + Math.random(), true);



ilerle();

}



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;

Musa ÇAVUŞ 186

document.getElementById("P1").style.width = i;

}

}

ilerle.js Server’e z parametresiyle rastgele oluşturulmuş sayılar yolluyorum, fakat bu

parametre Server tarafından kullanılmıyor. Bunu bile bile yaptım, çünkü

tarayıcı aynı sorgulama olunca sorgulamayı belleğe yazıyor. Bu mekanizma ile

tarayıcı yeni bilgiler yollayacağı için sorgulamayı belleğe yazmıyor. Cache

belleğe bunu yazsaydı, AJAX sorgulamasında eski bilgiyi geri verirdi. Ufak bir

üçkâğıtçılıkla bu işi böyle hallettik.

Koda dikkatli baktıysanız kendini çağıran fonksiyon yöntemini kullandım, bunu

yaparkende 5 saliselik bir gecikmeyle fonksiyonu çağırdım. Eğer gecikme

kullanmasaydım, fonksiyonlar bu kodda üst üste binebilirdi.ilerle() fonksiyonu

her çağrıldığında P1 id’sine sahip <div> tagının CSS görüntüsü 1 piksel

genişliyor. Server’den yeşil ışık alınınca ilerleme çubuğunun değeri 0 oluyor.

Döngü kullanmak yerine kendini çağıran fonksiyonla ilerleme çubuğunun

ilerlemesini sağlamış oldum.

image1.html ve xmlhttprequestobjekt.js dosyalarını daha önce kullanmıştık,

aynı kodu burada da kullandım.

Şekil113

Musa ÇAVUŞ 187

Bölüm 10 AJAX ve XML

Musa ÇAVUŞ 188

10.1 Veri aktarımı

Tipik bir AJAX uygulmasında üç çeşit veri aktarma şekli vardır. Metin, JSON

ve XML. En az problemi metinler yollarsak en fazla problemi XML ile yaşarız.

Genelde XML teknolojisi, tüm mantığı Client tarafına yüklemek istersek

kullanılır. JSON, metin ve XML veri aktarımlarında ikisinin arasında uyumlu

olan bir teknolojidir. Şimdiye kadar olan veri aktarma şekillerinde normal

metinler kullanmıştık.

10.2 XML Internet sayfaları için HTML kendisini standartlaştırdı. Fakat veritabanı, ya da hesap tabloları gibi uygulamalar için HTML yetersiz kalıyor. W3C kurumundaki kişiler oturdular ve HTML gibi kolay olabilecek bir genel çözüm aradılar sonunda XML için karar kıldılar. Ben XML konusuna ihtiyacımız olacağı kadar değineceğim, daha ayrıntılı bilgi edinmek isteyenler http://www.w3c.org/ adresine girerek bilgilenebilirler. Burada size bir AJAX uygulaması için gereken XML bilgisini vereceğim. Bu bilgiler ışığında bile birçok XML veri aktarımına bağlı AJAX uygulamaları programlayabilirsiniz. Elementler ve değişkenler XML dokümanının içeriği, bir düzen içerisinde uygun yapılardan oluşmaktadır. Yapıların arasındaki metinler ve elementler bulunmaktadır. Elementlerin parametrik değişkenleri olabilir ki bu değişkenler elementler hakkında 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 büyüklük küçüklük yazımı ayırt edilmesi için çok önemlidir. Bir değişken bir isimden ve birde değerden oluşmaktadır. Değişken değeri, ya tek tırnak ya da çift tırnak arasında durmaktadır ve eşit işareti de değer ile değişken

Musa ÇAVUŞ 189

arasında bulunmaktadır. Tag’ların kullanımı Elementleri sivri parantezlerin içine yazarız. Elementler iki şekilde varlık gösterirler. Birincisi başlangıç ve bitiş Tag şeklinde, Đki Tag’ın ismi de aynı fakat bitiş Tag’ın ismini yazmadan eğri bir çizgi işaretini koyarız. Tag’ların arasına da elementin bilgisini yazarız. <icecek>elma suyu</icecek> Đçerik barındırmayan bir element sadece bir Tag’dan oluşur ve Tag’ın sonundaki sivri parantezden önce eğri çizgi bulundurur. Bu tür Tag’ların parametrik değişkenleri mevcut ya da sadece bir Tag’dan oluşur <medenidurum bekar="true" utangac="false"/> Serbest şekildeki isim verme sonucu belirli bir şekilde format verme imkânsız. HTML gibi belirli sayıda Tag yoktur. XML dokümanı Internet gezginleri tarafından gösterilmek istenildiği zaman, ek olarak özel yazımlara ihtiyaç duyarız. Düzgün XML XML dokümanları bazı kuralları yerine getirmesi gerekiyor ki düzgün biçimli olsun. Düzgün bir yapıya sahip değilse, o zaman bir XML dokümanı olmamış oluyor. Her element bir başlangıç Tag’ına ve bir de bitiş Tag’ına sahip olmalıdır, değilse sadece tek bir Tag olabilir, fakat bununda bir bitişi olması gerekmektedir. XML’de özel işaretler Bazı işaretlerin XML dokümanlarında belirli anlamları olduğunu unutmamalıyız. Mesela &, <, >, “ ve , . Bunlar metinlerde özel kısaltmalarla ifade edilirler. Sırasıyla şu şekilde gösterebiliriz, &, %lt;, >, " ve '.

Musa ÇAVUŞ 190

Açıklamalar XML dokümanların içeriğinde açıklamalar yazabiliriz. Bunlar XML dokümanları işlenirken atlanırlar. XML dokümanların her tarafında bu açıklamaları kullanabiliriz. Sadece Tag’ların içerisinde kullanma imkanımız yok. <!- -Bu bir açıklamadır - -> Başlık tanımlaması Başlık tanımlaması kesinlikle bir XML dokümanında olmalıdır. Başlık tanımlaması değişkenler barındırabilir. <?xml version="1.0“ encoding=“iso-8859-1“ Bu örnekte işaret kodlamasını da değişkende tanımladım. XML dokümanının yapısal dili HTML dokümanı gibi XML dokümanlarında Tag’ların sayısı ve kombinasyonları kararlaştırılmamıştır. He uygulama için kullanıcılar istedikleri sayıda Tag’lar kullanabilirler ve tanımlanabilir. XML dosyasının bir uygulama için doğru olduğunu, o uygulamanın yapısal tanımlamasına ihtiyaç duyarız. Bu yapı belirli bir formatta yazılıdır. Đki format çok popülerdir. XML Schema ve Document Type Definition (DTD). Hangi Tag’ların olacağını, elementlerin tipini, içerik yapısını, element değişkenini, Tag içerisinde Tag var mı. Bu bilgilere uyan XML dokümanı geçerli bir dokümandır, yani valid’dir. Schema Schema’lar, XML dosyasının yapısal kavramlarını içerirler. Schema’larda bir elementin tipi ve içeriği DTD’ye göre daha ayrıntılı ele alınmaktadır. Geneldeki tipler, string, integer ve double tipleridir. date ve duration gibi tiplerde bulunmaktadır. Ek olarak kendimizde tip tanımı yapabiliriz. Schema’larla bir değerin tam sayı mı, kayan noktalı sayı mı, yoksa string mi olduğunu belirtebiliriz. Örnek bir XML dokümanımız ş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 için şöyle bir Schema hazırladım: <?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="[0–3][0–9].[0–1][0–9].[0–9][0–9]" /> </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 örneğin icecek elementi için kullanılmıştır. boolean

Musa ÇAVUŞ 192

medenidurumuTipi elementi için kullanılmıştır. misafir elementi için özel tanımladığımız misafirTipi tipi kullanılmıştır. tarihTipi tanımlamasını da çok basit olan Regular Expression tanımını kullanarak yaptım. Ay, gün ve yıl arasında bir noktanın olmasını belirttim ve günün ilk rakamının 0 ile 3 arasında bir rakam olacağını söyledim. Bir XML Schema’sında tipleri basit ve karmaşık olarak iki tip olarak sınıflandırırız.Basit tiplere simpleType, karmaşık tiplere complexType tanımlamasıylaayırırız. Basit tiplerin özelliği, alt elementlerinin ve değişkenlerinin bulunmamasıdır.Sadece metin kısmı mevcuttur. Bunun dışında karmaşık tipler, alt elementlerbarındırabilirler, değişken tanımlayabilirler, ben bu konulara fazla girmiyorum,sadece bize gerekli olanı sizlere vermek istiyorum. Basit Schema ile örneklerimizi Java ile anlatmaya çalışacağım, çünkü bu kitap bir XML kitabı değil. Namespace Namespace kavramı şu üç konuda çok önemlidir:

• XML dosyaları sadece yerel kullanılmadığı zaman. • Veriler değiş tokuş edildiğinde • XML dosyaları kombine edilince

Farklı XML dosyalarının aynı XML Tag kullanması açısından kargaşalık ortaya çıkar. Namespace ile bunu engelleyebiliriz. XML dosyasını bir Namespace ortamına ya da birden fazla Namespace ortamlarına atamak mümkün. Namespace, öneki ve bir URI bağlantısından oluşmaktadır. Namespace tüm elementlerin ön tarafına gelir ve kullanılabilir. Namespace tanımını yukarıda şu şekilde yapmıştık: xmlns:xsd="http://www.w3.org/2001/XMLSchema"> xsd ön ek olmuş oluyor, http ile başlayan kısımda URI bölümü olmuş oluyor. Bu tanımın önüne de <xsd:schema şeklinde bir tanımlama yaptım ki schema buradaki yerel addır. Ön ek istenilen şekilde seçilebilir, ben xsd seçtim, siz isminizi seçebilirsiniz. Diyelim ki biz eğlencemiz için ön ek olarak dogumgunu eki vermek istiyoruz o zaman örneğin şu şekilde bir tanımlama 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> Namespace’lerin bir başka uygulandığı alan ise, belirli teknolojilerin Tag’larına işaret etmesidir. XML teknolojisi için sabit Namespace’ler verilmektedir ki biz bunu örnek xsd dosyamızda yaptık: <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"> XML dosyasını işleyen bir uygulama, Namespace’ler sayesinde hangi teknolojinin kullandığını bilebilir.Ön ek değil de, URI bu konuda çok önemlidir, çünkü URI sayesinde kullanılan teknoloji değişiyor ki ön eki istediğimiz şekilde kullanabiliriz. XML hakkında yeterli ön bilgi verdikten sonra bir örnekle AJAX/XML ikilisini anlatmaya başlamak 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

Musa ÇAVUŞ 194

Basit bir XML dosyası oluşturdum. Anlattığım XML bilgisine göre bu tanımlamayı anlamışsınzdır. Benim isteğim <ad> tagındaki Hayri ismine ulaşmak, bunu nasıl yapacağız? 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 örneğin şimdiye kadar gördüğümüz örnekler arasındaki tek farkı handleResponse() fonksiyonunda gerçekleşmektedir. responseText yerine responseXML nesnesini kullandığımızın farkına varmışsınızdır. Bu nesne bize DOM taslağına bağlı olarak bir düğüm yani bir node iletmektedir. node sayesinde tüm XML ağacında dolaşabiliriz. getElementBy ile başlayan tüm metodları kullanabiliriz. Burada da getElementsByTagName() fonksiyonunu kullanarak <ad> tagına sahip olan taglardan ikincisini çağırıyorum. Bir elementin içeriğini firstChild nesnesinin data değişkeniye elde edebiliyoruz. Server’de bulunan XML dokümanlarına CSS uygulayabilirsiniz. Bunu yaptığınızda CSS dosyanızı HTML kodundan ayrı tutmuş oluyorsunuz ve XML dosyası ile bağlantıda tutmuş oluyorsunuz. Az önceki örneğe bir CSS dosyası ekledim ve biraz değişiklik yaptım: <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 {

Musa ÇAVUŞ 196

background-color : yellow; display : block; width : 400px; } ad { color : red; } ad.css dısplay parametesine block yazarak o yazının blok şeklinde gözükeceğini tanımlıyor. background-color parametreside arka planın rengini değiştirmektedir. <?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 satırda XML dosyasının hangi CSS dosyasıyla ilişkilendireceğimizi tanımladım. <xml.stylesheet> tagı bu işe bakıyor ve href parametresinde CSS dosyasının adını veriyoruz. XML dosyasımızı bir HTML dosyası olarak düşünün. CSS kullanırken ne yapıyorduk? CSS tarafındaki selektörlere HTML’deki tagları yazıyorduk. Burada da bu işlemi yapıyoruz. 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 Tarayıcı, handleResponse() fonksiyonunda ad.xml’den gelen cevabı yani XML’in içeriğini ekrana CSS formatında gösteriyor. Okuduğu her node bilgisini bir cevap olarak yolladığına dikkat edin. XML ve AJAX hakkında fazla bir şey anlatmak istemiyorum. Verdiğim bu bilgiler bile pratik hayatınızda XML ile uygulama geliştirmenize yetecek ve artacaktır, çünkü XML işlemlerini tarayıcıdan tarayıcıya göre değişmektedir. Firefox ile çalışan bir XML uygulaması IE ile çalışmayacaktır ya da başka çalışacaktır. Çok karmaşık bir XML yapıda olan programınızı tüm tarayıcılar için uyarlamak büyük zaman alacaktır ve ben bu yüzden XML veri aktarımını kullanmanızı tavsiye etmiyorum.

Musa ÇAVUŞ 198

Şekil115

Musa ÇAVUŞ 199

Bölüm 11 jQuery ve jQuery UI

Musa ÇAVUŞ 200

11.1 jQuery jQuery diline, jQuery’nin kendi web sayfasıyla başlamak istiyorum. Web adresi http://jquery.com

Şekil116 jQuery hakkında bilgi arıyorsanız ilk başvuracağınız sayfa bu sayfadır. Download linkinin altında Download | jQuery linkini tıklarsanız, Minified ve Uncompressed adı altında iki seçeneğiniz olacaktır. Uncompressed seçeneği daha okunaklıdır ve kod kısımlarında açıklamalar vardır. Minified seçeneğindeki kod ise kullanıcı sayfalarına daha çabuk iletilir, çünkü açıklama ve okunaklılık Uncompressed’deki gibi değildir. Download için yapmanız gerken çok basittir, Uncompressed linkine tıklayın:

Musa ÇAVUŞ 201

Şekil117 Tarayıcınızın özelliğine göre tıkladığınız link bendeki gibi ya gösterilecektir ya da bazı tarayıcılar bir diyalog penceresi açacaktır ve size dosyayı bilgisayarınıza kayıt edebilme özelliği verecektir. Bu dosyayı ben Firefox’ta Dosya->Sayfayı farklı kaydet linkinden jQuery dizinine kaydettim. jQuery sayfasındaki Download linkinin yanında Documentation linki vardır.

Musa ÇAVUŞ 202

Şekil118 jQuery’i ile çalışırken burayla adeta özdeşeceğiz. Tutorials linkine bakarsanız, örnekler vardır fakat örnekler için bu kitabı aldığınız için kitap boyu bu linke gerek duymayacaksınız. jQuery linkinin sağında UI linki var. jQuery UI olan bu bölüm kullanıcı arayüzleriyle ilgilenmektedir ki bunu jQuery’den sonra ele alacağım. Birde bizi ilgilendiren Plugıns bölümü vardır, bunu da sonra anlatacağım. jQuery ve jQuery UI projelerin temelinde JavaScript yatıyor. jQuery ve jQuery UI tekeri tekrar keşfetmek yerine hazır modüllerle size yardım etmektedir. Tabi siz yok abi ben herşeyi kendim yapacağım derseniz, JavaScript ile de burada anlatılacakları yapabilirsiniz. Fakat 1 gün kodlamak yerine 1 ay kodlayacağınızı da unutmayın. Buradan anlamamız gereken, jQuery ile iyi çalışabilmek için JavaScript bilmemiz gerekiyor. Eğer biraz JavaScript biliyorsanız, jQuery ile de biraz başarılı olabilirsiniz, eğer iyi bir JavaScript programcısı olduysanız jQuery’le de iyi programlar programlayabilirsiniz. JavaScript’I ben bu yüzden kitabın başında anlattım ki öncelikle işin temelini öğretmiş olayım. Kitaptaki örnekleri buraya kadar takip ettiyseniz jQuery’I öğrenmede bir zorluk çekmezsiniz ve jQuery ile çok başarılı projeler oluşturabilirsiniz. jQuery ile şimdiye kadar tanışmadıysanız, bundan sonra jQuery ile tanıştığınız için çok sefindirik olacaksınız. Neden derseniz, jQuery kullanmak bir ayrıcalıktır, çünkü size kısa yöntemlerle büyük olanaklar sağlamaktadır.

Musa ÇAVUŞ 203

jQuery ile çalışmak için nelere ihtiyacım var? Bir tarayıcıya ihtiyacınız var. Ben Firefox kullanıyorum. Siz jQuery ile proje geliştireceksiniz ve kullanıcılarınızda farklı tarayıcılar kullanıyorsa mutlaka farklı tarayıcılarda projenizi test etmelisiniz. Yoksa istenmedik sonuçlar ortaya çıkabilir. jQuery, genelde eski tarayıcıları desteklemiyor, en son güncel tarayıcılarla uyumlu çalışabiliyor. Tarayıcınızın jQuery ile çalışabilirliğini kontrol etmek için http://jquery.com/test adresine girin:

Şekil119

Musa ÇAVUŞ 204

Yeşil satırlar çoğunluktaysa tarayıcınızın jQuery’nin bir çok alanını desteklediğine inanabilirsiniz. Gerekli olanlardan XAMPP programını zaten sisteminize daha önce kurmuştunuz. 11.2 Đlk jQuery örneği jQuery’nin temellerini anlatmadan bir örnek vermek istiyorum. Amacım hızlı bir şekilde, jQuery ile neler yapılabileceğini göstermek. Anlatımı daha sonraki bölümlerde ayrıntılarla yapacağım. Özet olarak teoriden ziyade hemen pratik yaparak size jQuery’nin niğmetlerinden nasıl yararlanacağınızı göstereceğim. Ana dizinde jQuery adı altında bir dizin açın ve jquery-1.4.2.js dosyasını buraya indirin. Daha sonrada aşağıdaki kodu yazın ve aynı dizine kayıt 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 $ işaretiyle parantezi açtım ve içine document yazdım. jQuery’de $ işareti bizi bir çok uzun kodlamadan kurtaracaktır. getElementByTagname gibi kodlamalar tarihe karışmıştır. Fakat burada asıl önemli olan ready teriminin kullanılmasıdır. Web sayfasındaki DOM ağacı doğru yapılanmışsa ready terminin içindeki blok çalışacaktır. $(“#b1”) ile b1 id’sine sahip taga ulaşılmaktadır. Bundan sonra click terimini kullanarak bu id’ye sahip nesne tıkladığında yapılacak olayı yine yeni bir blok açarak verdim ki burada alert() fonksiyonunu kullandım. Đlk jQuery örneğimizi bu şekilde bitirmiş oluyoruz. Ayrıntılara daha sonraki bölümlerde derinlemesine inilecektir. Bu örneği biraz değiştirerek tarayıcıda üç düğmenin belirlemesini ve her düğmeye basılınca farklı bir mesajın ekranda gözükmesini istiyorum:

Musa ÇAVUŞ 206

<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 yaptığım iş çok basıt, ilk örnekteki jQuery kod bölümünü üç kere kopyaladım ve oluşturduğum üç düğmeye bağladım. 11.3 DHML ve jQuery DHML teknolojisiyle jQuery’de harıkalar oluşturabilirsiniz. Tarayıcıda 4 tane düğme gözükmesini istiyorum ve her düğmeye farklı bir görev vereceğim: <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"); });

Musa ÇAVUŞ 208

$("#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> tagıyla bağlantıya geçtim. $ işaretini kullanarak aynı metotla erişim sağladım. 4 tane farklı metot görüyorsunuz. Bunlar animasyon metotlarıdır ve DHTML özelliği taşırlar. addClass() metodu, parametrede verilen sınıfı ekler. Bundan dolayı “Bu dunya bizim kirletmeyelim” yazısı CSS sınıfında verilen özelliği yansıtır. removeClass() metodu ekledğimiz CSS sınıfını siler. Hide() metodu gösterilen <div> tagındaki yazıyı parametredeki değere göre saklar. hide parametresi, yavaş sakla anlamını taşır. show() metodu yazıyı parametredeki ifadeye göre gösterir. fast burada hızlı anlamını taşır. Firebug index.html dosyasındaki kodlar içerisinde DHTML ile CSS’leri göstererek, kapatarak ve açarak efektler görebildik. Şimdi arka planda neler oluyor onu göstermek istiyorum. Bunun için Firefox’unuza Firebug eklentisini ekleyin. Bir eklentinin nasıl ekleneceğini daha önceki derslerde anlatmıştım. Ben Firebug’ı Firefox’uma ekledim ve az önceki örneği çalıştırdım:

Musa ÇAVUŞ 210

Şekil122 Sağ alt köşede bir böcek resmi göreceksiniz. Onun üzerine bir tıklayın, sakın sinek minek varsa onun üzerine tıklamayın, buradaki böcekten kastım Firefox’ta bir böcek sembolü var ona tıklayın:

Musa ÇAVUŞ 211

Şekil23 CSS-Sinifi ekle düğmesine basılınca <div> tagın nasıl değiştiğine bir bakın: <div id="e" class="cssSinif"> Bu dunya bizim kirletmeyelim </div> class parametresinde otomatikman cssSinif diye bir atama olduğunu görmeniz, düğmeye basılınca arka planda böyle bir değişimin olduğunun göstergesidir.Gizle düğmesine basınca Firebug’da gösterilecek animiasyonun zaman bağlı olarak genişliğinin değiştiğini de görebilirsiniz. Diğer düğmelere basarak değişmileri inceleyin. Firebug’ın bu özelliğiyle analiz etmeniz çok kolaylaşıyor. Animasyonlu şekilde bir resmi büyültmek ve küçültmek istiyorum. Aynısını tarayıcının göstereceği bir yazı içinde gerçekleştirmek istiyorum: <html> <head> <title>Resim buyultme kucultme</title> <script type="text/javascript" src="jquery-1.4.2.js">

Musa ÇAVUŞ 212

</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 başlayan bir bloğumuzu biliyoruz. $(“#toggle1“) ile id’si toggle1 olan elemente ve $(“#toggle2“) ile id’si toggle2 olan bir elementine ulaşmış oluyorum. Elementlerin click metodudna id’si b1 ve h2 olan elementlerle işlem yapılmaktadır. Taglardaki id’lerle işlem yapabilmek için id’lerde yazan metni yazıyorsunuz önünede “#” işareti koyuyorsunuz. Bu örneğin en ilginç noktası slideToggle() metodu, çünkü bu metod her hangi bir elementi animasyon şeklinde ufaltır ya da büyültür. Parametrede slow yazdığı için siz Toogle Resim düğmesine basarsanız resim yavaşça ufalacaktır ve tekrar basınca yavaşça büyüyecektir. Aynı şeyler yazı içinde geçerlidir. Firebug açıksa değişiklikleri çok güzel izleyebilirsiniz. jQuery animasyon metotlarında zincirleme tekniği kullanmaktadır, mesela siz şu şekilde bir kod kullanırsanız her metod sırayla işlem görecektir: $('#b1').slideToggle('slow').slideToggle('fast').hide('slow'); b1 elementi önce yavaş kapancaktır sonra hızlı açılacaktır ve yavaş kayobolacaktır. Bir tagı başka bir tak bilgisiyle kuşaltmak istiyorsam wrap() metodunu kullanırız. wrap() metodunun nasıl çalıştığını Firebug ile daha güzel anlayacağız. <html>

Musa ÇAVUŞ 214

<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 Farkına vardıysanız, metin1 id’sine ulaşabilmek için tek tırnakta kullanabiliyoruz, çüft tırnakta, hiç farketmiyor. Tarayıcı bu kodu çift tıkladığımda bir yazı gösterecek ve ben o yazının üzerine tıkladığımda wrap() metodunun içindeki tag, metin1 id’sine sahip tagı kuşatacaktır.

Şekil124

Musa ÇAVUŞ 215

kusat.html dosyasını tekrar çalıştıdığımızda Firebug’ımızı bir açalım. Đlk açtığımızda şöyle bir kod göreceğiz: <html> <head> <body> <h1>Elementi kusalt</h1> <span id=”metin1”> Ben kusatilacagim</span> </body> </html> Ben kusatilacagim yazısına tıkladığınızda Firebug şu kodu gösterecektir: <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 isteğimiz dışında bir görüntü olmayacaktır. Taglardaki parametre değerleri jQuery ile çok kolay taglardaki parametrelerin değerlerini değiştirebilirsiniz. Sıradaki örneğimizde boş bir <img> tagı kullanıyorum ve jQuery ile parametrelerin değerlerini değiştirerek tarayıcıya resimler yüklüyorum: <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({

Musa ÇAVUŞ 216

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 bakarsanız # işaretini kullanmadığımı görürsünüz. Bu şekilde tüm <img> taglarına hitap etmiş oluyorum. <img> tagının parametrelerini değiştirebilmek için attr() metodu vardır. attr() metodunun içinde {} parantezlerini kullanarak hangi parametreleri değiştirmek istiyorsak o parametreyi yazarız ve iki nokta üst üste koyduktan sonra değerini tırnak içerisine yazarız. Firebug ile baktığınızda önce <img> tagını boş göreceksiniz, fakat düğmelere bastıkca parametreler eklendiğini ve değerler atandığını göreceksiniz. {} parantezlerinin burada ne işi olduğunu şimdilik anlamak tuhaf gelebilir, fakat jQuery ile nesne oluşumunu anlatırken bunu çok güzel anlayacaksınız, o yüzden şimdilik kalbinizi ferah tutun. CSS kurallarını eklemek CSS kurallarını taglara nasıl ekleyebileceğimizi bu bölümde göstereceğim. Bunun için çok basit bir metod vardır css().

Musa ÇAVUŞ 218

<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 içine {} parantezini kullanarak eklemek istediğiniz CSS parametrelerini ekleyebilirsiniz. h1:eq(1) yazarak sayfadaki ikinci <h1> tagıyla işlem yapacağımı söylüyorum. Firebug ile burada da kod değişikliğini görebilrisiniz. jQuery ile neler yapabileceğinizi az buçuk gösterdim. Bunlar jQuery ile yapabileceğinizin çok ufak bir bölümü, bundan sonraki konularda ayrıntılara gireceğim.

Musa ÇAVUŞ 220

Bölüm 12 jQuery Temel Bilgisi

Musa ÇAVUŞ 221

12.1 Nesneler ve sınıflar JavaScript ve jQuery’de hazır metotları olan nesneleri kullanmamız bize çok kolaylık sağladığını gördük. Bunu DOM teknolojisini kullanarak ya da kendi oluşturduğumuz sınıflarla yapabiliyoruz. JavaScript’i anlatırken nesnelerin ve sınıfların ne olduğunu anlatmıştım ve örneklerde vermiştim. JavaScript’te anlattıklarım jQuery’de aynen geçerlidir. jQuery’de bunun dışında tanımlanmış şekilde de bir nesne oluşturabilirsiniz. Kurucu metoda da hiç ihtiyacınız kalmaz ve nesneleri oluşturmanız çok kolay olmuş oluyor. jQuery, JavaScript’in bir çocuğudur unutmayın 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

Musa ÇAVUŞ 222

Şekil127 {} parantezleriyle bir blok açıyoruz ve bu blok içerisinde oluşturmak istediğimiz nesnemizin değişkenlerini ve metotlarını tanımılıyoruz. Değişkenleri ve metotları tanımlarken iki nokta üst üste koyuyoruz. Daha sonra değişkenin değerini ya da metodun tanımlamasını yazıyoruz. Değişken ve metot tanımlamaları arasını virgül ile ayırıyoruz. Blok tanımlaması bittikten sonra bunu bir değişkene atıyoruz ve bu değişken bizim nesnemiz olmuş oluyor. Daha önce yaptığımız css.html örneğine bakarsanız orada da böyle bir tanımlama yaptığımızı görürsünüz: $("document").ready(function(){ $("h1:eq(1)").css({ background:"yellow", color:"white", textAlign:"center" }); css() metoduna verilen parametre bir nesneden başka bir şey değil. Kıyaslamak açısından kurucu metodu kullanarak ve blok sistemiyle iki nesne oluşturmak 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 değişkenlerine ya da metotlarına farklı olarak köşeli parantezler sayesinde de erişim sağlayabiliyoruz. jQuery’de bu tür erişimleri çok göreceksiniz. 12.2 Fonksiyon ve metotlar Fonksiyonların ve metotların neler olduğunu JavaScript’te gördük. Fonksiyonları iki çeşit çağırabiliyoruz. Birincisi fonksiyon doğrudan çağırıyoruz, ikincisi fonksiyon referansıyla çağırıyoruz. jQuery’de referans ile

Musa ÇAVUŞ 224

çağırma çok kullanılmaktadır. JavaScript’te doğrudan çağırma daha çok kullanılıyor. Đki çağırma şeklinin olduğu bir örneği verirsem daha iyi anlaşılacaktır: <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 içerisinde parantez olmadan çağırıyoruz. Bu çağırma şekli referans ile çağırma şeklidir. cikti(); şeklindeki çağırma şekliyse doğrudan çağırma şeklidir. Kafanıza mutlaka takılmıştır neden bazı yerlerde funktion yazıyor ve bazı yerlerde funktion() yazıyordur diye. funktion() olarak tanımlanan fonksiyonlar anonim fonksiyonlardır. Bu fonksiyonlar sadece o yerde kullanılmaktadır. Anonim fonksiyonları değişkenlere atayabiliriz veya buradaki gibi metotlara parametre olarak verebiliriz. Callback ve iç fonksiyonlar jQuery’de iç fonksiyonlar çok kullanılmaktadır. Đç fonksiyonlar, bir fonksiyonun içinde olan başka fonksiyonlardır. Callback fonksiyonlarda genelde iç fonksiyonlarla beraber kullanılmaktadır. <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){

Musa ÇAVUŞ 226

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 içerikli bir fonksiyon yazmak yerine doğrudan çağrılan

Musa ÇAVUŞ 227

bir fonksiyonun yazıldığını görüyorsunuz. getText() fonksiyonu aslında içeriğinde benimFonksiyon() fonksiyonun referansını iletmektedir, çünkü fonksiyon() olarak tanımlanan anonim fonksiyonların bir başka özelliği tanımlandıkları yerde referans özelliği taşımalarıdır. queue() ve dequeue() Fonksiyonları sıralı olarak çağırmak istiyorsak queue() ve dequeue() fonksiyonları yardımımıza koşacaktır. queue() ve dequeue() fonksiyonlarını kullanmadan önce fonksiyonları normal yol ile çağıran bir örnek göstermek isityorum ki queue() ve dequeue() fonksiyonların çalışma 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");

Musa ÇAVUŞ 228

$("#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 doğrultusunda nesneyi kaydırmaktadır. Yaptığım sadece animasyon metotlarını ard arda çağırmak oldu. Çağıracağım fonksiyonları bir yığına koymak istersem queueu() metodunu kullanmak zorundayım. Yığından çağrılacak fonksiyonlarıda dequeueu() metoduyla çağırırım. <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({

Musa ÇAVUŞ 230

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 tanımlıyoruz, sonra this referansıyla çağırmak istediğimiz metodu parametresiyle yazıyoruz ve noktalı virgül ile bitiriyoruz. thıs referansı animasyon gösterisi yapılacak resme işaret etmektedir. 12.3 Diziler Diziler, ayni verileri kayıt ederlerse çok avantajlıdır. Dizilerdeki özellik, bir isim ve bir belirteç ile dizi içerisindeki değerlere ulaşabilmemizdedir. Đsimden sonra köşeli parantez içerisine belirteçle koyarak bunu yapabiliriz. new Array() olarak nasıl bir dizi oluşturduğumuzu JavaScript bölümlerinde gösterdim. Başka bir usül ise eşittir işaretinden sonra köşeli parantez kullanmaktır.

Musa ÇAVUŞ 232

<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 değişkenine hazır verileri köşeli parantez içerisinde atadım ve uzunluğunu alert() fonksiyonuyla ekranda gösterttim. Dizilere erişim Dizilerdeki en büyük avantaj, dizilerin içindeki değerlere döngüler vasıtasıyla ulaşabilinmesidir. <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

Musa ÇAVUŞ 234

Bu örnekte iki dizi oluşturdum. Birincisini kurucu metot ile oluşturdum. Đkincisini de köşeli parantezle. Birinci döngüde tesadüf olarak 7 sayı seçilmektedir. Đkinci döngüdyse append() metoduyla birinci döngüde seçilen 7 sayıyla sayicek dizisi birleştirilerek tarayıcıda gösterilmektedir. each() jQuery döngülerin zahmetinden kurtarmak için each() fonksiyonunu bize sunuyor. Jeneriklik özelliği gösteren each() fonksiyonuyla dizilere erişim sağlayabildiğimiz gibi nesnelere de erişim sağlayabilmekteyiz. <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 erişim sağlamak istediğimiz dizi ya da nesne. Đkinci parametre olarak bir callback ya da anonim bir fonksiyon giriyoruz. Biz ikinci parametrede ne yapılacaığını ifade ediyoruz. belirtec değişkeni dizideki ya da nesnedeki belirteci belirtmektedir ve value ise belirtilmektede olan sıradaki elemanın değerini vermektedir. jQuery.each(sayi,function(belirtec,value){} yapısını şu şekilde düşünebilirsiniz: for (belirtec=0;belirtec<sayi.length;belirtec++) Bu çok karmaşık ben bunu for döngüsüyle daha kolay yaparım derseniz, doğru dersiniz, fakat nesnelere ulaşmada ya da belirtecin bir tam sayı olmadığı durumlarda each() fonksiyonu çok kolaylık sağlar. Örneğin kisi nesnesinin değişkenlerine ulaşmak gibi. each() fonksiyonu, nesne elemanlarını sanki bir dizi elemanıymış gibi işleme sokar ve bize iletir. Nesnelerde belirtecler birer metindir.

Musa ÇAVUŞ 236

Şekil135 12.3 jQuery alanı jQuery Framework’unda tüm genel değişkenler jQuery alanı denilen bir yerde kayıt ediliyor ve bu değişkenlere, jQuery() veya $() şeklinde ulaşabilirsiniz. <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 tanımlamalar arasında hiç bir fark yok. Parametrelerine bakarsanız bir selektör kullanıldığını göreceksiniz. Đkinc bir parametre daha verebilirsiniz fakat bunu başka bir örnekle göstermek istiyorum. fadeIn() ve fadeOut() metodları animasyon şeklinde gösterilen nesneyi yok eder ve gösterir. Animasyonla ilgili metodları örneklerimde şimdiden kullanıyorum çünkü görsel olarka örnekler insanların beyninde daha iyi kalırlar. Yalnız animasyon konusunu daha sonra ayrıyeten ele alacağım.

Musa ÇAVUŞ 238

Şekil136 $() ve jQuery() tanımlamalarının ikinci parametrelerinde kayıt edilecek verilerin context’lerini gireriz, yanı verilerin kayıt edilecek bölgeleri 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 bulunduğumuz web sayfasında saklanırlar. Verdiğimizde bir DOM ya da jQuery nesnesi oluştururuz ve veriler bu nesnelerde saklanırlar. document.forms[0] denildiğinde, context sayfadaki birinci Formdur. val() metoduda seçilmiş nesnenin içeriğindeki değeri iletir. Birinci Tikla düğmesine basılınca birinci Form seçilir, ikinci Tikla düğmesi tıklanınca ikinci Form seçilir ve bunlar sadece ikinci parametre sayesinden ayrılmaktadır. Dinamik element jQuery’de tagları dinamik olarak oluşturabilirsiniz. String formatında oluşturduğunuz 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>

Musa ÇAVUŞ 240

<body> <h1>jQuery() ve $()</h1> <table id="t1"/> <button id="b1"> Tikla </button> </body> </html> jqueryelemanolustur.html

Şekil138 Tıkla düğmesine bastığımda Tıkla düğmesinin altında bir satır oluşacaktır ve bu oluşan satır aslında bir tablo satırıdır. Her tıklamada yeni bir tablo satırı oluşturuyor. Firebug ile bu oluşumu daha iyi izleyebilirsiniz. $() tanımlamasının içine yazılan String HTML kriterlerine uygun olmalıdır. Diyelim ki bu örnekteki bir <td> tagını kapatmadınız o zaman çalışmaz. Ya da bir <div> tagının içine bir <body> tagı koymaya çalışırsanız kod yine çalışmayacaktır. Parametrelerdeki detaylarla ilgileniyorsanız http://api.jquery.com/jQuery/ sayfasını inceleybilirsiniz. Ben sadece çok kullanlan yöntemlere değiniyorum.

Musa ÇAVUŞ 241

Şekil139 eq() DOM elementleriyle işlem yapabilmek için eq() çok yararlı bir metottur. Metodun parametresi, aynı guruptaki elementlerin belirtecidir. Burada <img> tagı aynı gurup olmuş oluyor ve i değişkeniyle eq() metodundan yararlanarak tüm <img> tagların CSS özelliklerini değiştirmiş 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");

Musa ÇAVUŞ 242

$("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 değişkeniyle sayfadaki <img> tagların sayısının ne kadar iletildiğine dikaat edin. get()

Musa ÇAVUŞ 243

DOM elementlerine ulaşmanın bir başka yoluda get() metodunu kullanmaktır. DOM nesnelerine dogrudan erişebilmek için bu yöntem çok uygundur. get() metoduyla $() parantezinde belirtilen tüm 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

Musa ÇAVUŞ 244

Şekil141 get() metoduyla resim değişkenine sayfadaki tüm <img> taglarını DOM elementi şeklinde aktarmış oldum. eq() metoduyla jQuery nesnesi üzerinden ulaşırken get() metoduyla dogrudan DOM elementlerine ulaşabilinmektedir. 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 tıkladığımda buradaki tetikleyici ikinci resim olmuş oluyor. text() metoduyla cikti id’sine sahip <h1> tagındaki yazıyı belirtec 1 olarak değiştirebildim. data() ve removedata() Bazı durumlarda özel bir element için web sayfasında ek bilgiler kayıt etmek isteyebilirsiniz. data() metodu bize bu olanağı tanımaktadır. <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){

Musa ÇAVUŞ 246

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 değerdir. undiefined terimi tanımlanmamış anlamına gelmektedir. removedata() metoduylada, data() ile oluşturulan veri silinebilmektedir. Framework çakışması jQuery ile başka bir Framework’u aynı kod içerisinde kullanma isteğinde bulunabilirsiniz. Böyle durumlarda başka Framework, jQuery ile aynı alanı kullandığından çakışmalar ortaya çıkabilir. Örneğin Prototype Framework’u jQuery gibi $ işaretini kullanmaktadır. Bunu çözebilmek için noConflict() metodunu kullanabiliriz. <html> <head> <title>jQuery noconflict/title>

Musa ÇAVUŞ 248

<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 $ işareti yerine $degisken kullanılabilir. $ jQuery’de noConflict() metoduyla kapanmış oluyor. Yapılması gereken yukarıdaki gibi jQuery.noConflict() tanımlanmak istenilen değişkene atanmasıdır. Atanan değişkeni $ yerine kullanbilirsiniz. 12.4 Prototyping ve extend() JavaScript’i anlatırken prototyping sistemini anlatmıştım. Tekrardan jQuery ile bu konuya değinmek istiyorum. JavaScript dili, daha öncede bahsettiğim gibi nesneye dayalı bir proglramlama dili değildir, fakat yine de bir nesne oluşturmanıza izin vermektedir. jQuery’nin bir sütunu bu oluştururken diğer sütununu prototyping oluşturmaktadır. Prototyping ile var olan nesnelere veriler ekleyerek yeni nesneler oluşturabiliyoruz. Plugin konusunu ancak bu konuyu iyi anlarsanız anlayabilirsiniz. Prototyping’i, nesneye dayalı programlamadaki kalıtıma 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 değişken tanımladım ve function Adam(ad) derken this anahtar kelimesini kullanarak bir nesne oluşturdum. new oepratörü ile oluşturduğum Adam nesnesini x değişkenine atadım. x nesnesinin ad parametresini html() fonksiyonuyla cikti id’sine sahip <div> tagına ekledim. html() fonksiyonu id’si verilen tagın html kısmını verilen parametreye göre değiştirir. append() fonksiyonuysa var olan html metinine ekleme yapar. Adam nesnesinden sonra

Musa ÇAVUŞ 250

nokta koyarak protoype yazdım ve ondan sonra da yas yazarak bu değişkene 212 değerini atadım. Böylelikle var olan Adam nesnesine bir yas değişkeni eklemiş oldum. Prototyping’e göre bundan sonraki oluşturulan Adam nesnelerinde yas değişkeni olacaktır. 12.5 extend() extend() fonksiyonu kullanılan nesneyi geliştirmektedir. Aşağıdaki örnekte jQuery nesnesi geliştirilmiştir. <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 oluşturuyorum ve bu nesnedeki fonksiyon jQuery’nin bir metodu olmuş oluyor.

Musa ÇAVUŞ 251

Şekil145 jQuery’yi geliştirmek normalde uygulanmayan bir yöntemdir ve daha çok pluginler geliştirilir. Bunun için bir örnek vermek istiyorum. Vereceğim örnek plugin değil. Sadece o yöne 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"; }); }

Musa ÇAVUŞ 252

}); $(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 kullanıyoruz buna plugin konusunda değineceğiz ve fn’den sonra extend() fonksiyonunu kullanarak jQuery’nin altına organize edilmiş nesnelerine metodlar ekleyebiliyoruz. extend() fonksiyonuna eklemek istediğimiz metodun adını yazıyoruz ve iki nokta üst üste koyarak o fonksiyonun ne yapacağını tanımlıyoruz. Mesela ben bir metod için mavi yazdım ve fonksiyonun ne yapacağını iki nokta üst üsteden sonra tanımladım. Buradaki each metodunu hatırlayacaksınız, dizilere ve nesnelere erişmek için kullanılıyor. Tek parametre kullanılıdığında this ile gösterilen tüm nesnelere erişim sağlanmatakdır. mavi() fonksiyonu örnekte <h1> tagı için kullanılmıştır ve each() fonksiyonu tüm <h1> taglarına erişmektedir. “Ben” ve “bunu” metinleri bu yüzden mavi olarak ekrana gelecektir. Tanımladığımız metotları kullanmak çok kolaydır. Noktadan sonra sadece metodun adını yazıyoruz ve parantezi kapatıp açıyoruz.. Kitabın burasına geldiyseniz, artık sizin elinize çok az kişi su dökebilir ve siz Türkiye’nin sayılı jQuery uzmanlarından olmuş oluyorsunuz. Kimsenin dökememesi için kitabı lütfen sonuna kadar çalışmaya devam edin.

Musa ÇAVUŞ 254

Bölüm 13 Web sayfasında belirli yeleri seçebilme

Musa ÇAVUŞ 255

13.1 Selektörler Selektör, websayfasındaki ağaç yapısındaki elementlerin seçilmesidir. jQuery’de bir çok ortamda temel selektörler, diğer adıyla temel seçiciler kullanılmaktadır. Bunlar CSS’deki selektörlerle aynıdır. Eğer CSS ile tanışıklığınız varsa bu selektörler çok tanıdık gelecektir. Tanımıyorsanız, problem değil, çünkü ben şimdi size tanıtacağım. Aşağıdaki örnekte zamanla kullandığımız selektörleri bir örnekte topladım: <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>

Musa ÇAVUŞ 256

</html> selektorler.html

Şekil147 $(“*”) şeklindeki bir selektör tüm taglara erişim sağlamaktadır. Ben bu şekilde tüm tagların renklerini CSS kullanarak değiştirmiş oldum. Yıldız karakteri hepsi demektir. $(“#b1”) ile belirli bir tagı seçebiliyorum, buradaki “#” işareti belirli bir tag olduğunda kullanılır ve taglardaki id parametresinin değeri “#” işaretinden sonra yazılır. $(“hr”) şeklindeki bir kullanım tüm <hr> taglarına erişim sağlamaktadır. Yıldızdan farklı olarak bir gruplama söz konusudur. $("div,p,h1") kullanımıyla parantez içerisinde verilen tag gruplarına erişim sağlamaktadır. $(".sinif") kullanımında tanımlamadan önce bir nokta kullandım. Nokta, bize class parametresi içeren taglara erişmemiz içindir. $(".sinif1.sinif2") olarak tanımlama yaptığımızda sınıf içerisindeki bir sınıfa erişmiş oluyoru ki bunu class=”sinif1 sinif2” biçiminde algılayabilirsiniz. Selektörleri sadece bu şekilde kullanmıyoruz. Đleri düzeyde kullanmak istersek, bir kaç kombinasyonla bunu yapabiliriz. Kombinasyonlu selektörleri aşağıdaki örnekte verdim ve uzun bir örnek oldu, çünkü tüm selektör tiplerini tek bir örnekte topladım. Đsterseniz örneğin bölümlere bölebilirsiniz. Bu örneği anlarsanız selektörleri çok iyi anlamışsınız 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>

Musa ÇAVUŞ 258

</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")> kullanımı <h1> tagının bir altında olan <div> taglarına erişim sağlamaktadır. $("p img") kullanımı <p> ata tagınn <img> çocuk taga erişimi sağlamaktadır. $("label + input") kullanımı <label> ve <input> taglarının ard arda kullanıldığı durumlarda erişim sağlanmaktadır. $("#id1 ~ div") kullanımı #id1 id’li tagdan sonra gelen tüm <div> tagları için geçerlidir. ~ işareti ile bu işlemi yapabiliyoruz. 13.2 Filtreler Temel filtreler

Musa ÇAVUŞ 260

Filtreler, jQuery’ide iki nokta üst üste kullanılarak gruplar oluşturulabiliyor. Đlk aşamada temel filtreleri göstermek istiyorum ve temel filtrelerin hepsini tek bir örnekte toplayarak bunun daha iyi anlaşılacağından eminim. Örnek yine bira uzun gelebilir. Anlaşılması ise çok kolaydır: <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 başlıyoruz. $("tr:first") kullanımında görüldüğü gibi tr ile first arasında iki nokta üst üste kullanılmıştır. Burada diyoruz ki: “<tr> tagının ilk alt tagına eriş”, çünkü first kullanılmıştır ve first ilk demektir. first yerine last kullansaydınız son alt tag olacaktı. $("td:even") ile <td> tagı 2’ye bölünebilen bir sayıysa işleme koy anlamını taşımaktadır. <table> tagının oluşturduğu tabloyu düşünün. <td> tagı birinci sütun ise örnekte olduğu gibi

Musa ÇAVUŞ 262

işleme konuyor ve yazı sarı oluyor.odd anahtar kelimeside even anahtar kelimesinin tam tersine 2’ye bölünemeyen saıylarda geçerlidir. lt(2) ile 2 sayısından küçük olanlar işleme sokuluyor. gt(3) ise 3 sayısından büyük olanlara işaret ediyor. eq(2) ise 2 sayısına eşit olanlara işaret etmektedir.Dikkat edilmesi gereken nokta jQuery sıfırdan saymaya başlıyor. $(":header") kullanımında iki nokta üst üsteden önce hiç bir anahtar kelime kullanılmamış. Bu gibi durumlarda kategorize edilmemektedir ve örnektede olduğu gibi tüm header’ler yani tüm başlık tagları işleme konulmaktadır. Parametre filtreler jQuery’deki kullanışlı filtreler parametre filtreleridir. Regular Expression gibi kullanaiblirsiniz ve Reqular Expression gibi karmaşık bir yapıya sahip olmak yerine çok basit bir yapıya 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> parametrefıltre.html

Şekil50 Parametrik filtrelerde parametreyi köşeli parantezin içerisine yazıyoruz. $("[target]") şeklindeki bir kullanımla diyoruz ki parametresi target olan taga erişim sağlansın. ("[target*=alternatif]") kullanımındaki src parametresinin yanı sıra yıldız kullanıldığı için src parametresinin değerinin her hangi bir yerinde alternatif kelimesi varsa o tag işleme konur. Yıldız yerine $ işareti kullanıldığında değerin içinde en sonda gelmesi gerekiyorö ^ işareti değerin başında veriyi istemektedir ve son olarak ! kullanılsaydı veri parametre değerinde olmaması gerekiyordu ki ancak o zaman o parametrenin bulunduğu taga erişim sağlanırdı. Filtrelerle selektörleri de kombine edebiliriz. Bunun için kısa bir örnek hazırladım:

Musa ÇAVUŞ 264

<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 satır var, hatta o satırda tırnak içerisinde kullanılan mantığı anlamamız yeterlidir. $("td:[id]") ile <td> tagında id parametresi geliyrosa o taga erişim sağlanmaktadır. Çocuk filtreler Bu jQuery o kadar kapsamlı ki çoluk çocuklada uğraşıyor. Çocuk filtreler, ebeveynlerden yönlendirilerek kullanılmaktadır. Đ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>

Musa ÇAVUŞ 266

</html> cocukfiltre.html

Şekil152 $("p:last-child") kullanımıyla <p> tagının ilk çocuğuna erişiyoruz, last-child dediğimizde son çocuk oluyor. div:nth-child(1) dediğimizde <div> tagının ikinci çocuğuna erişim sağlanmış oluyor. Sayısayl parametre bize çocuklar arasındaki sıralamayı veriyor. Form fıltreleri Form filtresi demekle, belirtli bir anahtar kelimesiyle formdaki bir elemente ulaşmaktır. Bu konu ikiye ayrılmaktadır, Form için filtreler ve form filtreleri. Form için filtrelere örnek verecek olursak, input, text, password, submit, checkbox. Bunların örnekte kullanışı aşağıdaki gibidir. Đki nokta üst üste koyuyorsunuz ve form için filtreyi yazıyorsunuz. <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

Musa ÇAVUŞ 268

Şekil153 Form filtreler hakkında daha detaylı bilgi için jQuery sayfasına ya da dökumanına bakmayı öneririm. Bunun yanında bir de form filtreleri vardır. jQuery’deki bu filtreleri formlardaki elementlerin durumunu bize iletmektedir. Örneğin aktif olan tüm elementleri seçmek gibi. Bu filtresnin adı enabled anahtar sözcüğüdür. <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

Musa ÇAVUŞ 270

$("form :checkbox:first").parent().append('Bana iyi bak') ile checkbox elementlerden ilk elemente ulaşıyoruz ve onun ebeveynine append() ile bir metin yazıyoruz. Filtreleme metotları Filtreleme metotları, jQuery’deki filtremelerin yaptığı işleri yapmaktadır fakat kod içerisinde kullanım şekli farklıdır. 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> tagını seçiyoruz. Örnekte sadece bir tek <div> tagı var. not() fonksiyonuyla <div> tagına ait seçilmeyecek tagları, id’lerini veya class’larını yazarak belirtebiliyoruz. slice() metodu

Musa ÇAVUŞ 272

Basit ve etkili filtre metotlarından biri de slice() metodudur. slice() metoduyla başlangıç değerini vererek bir filtreleme yapılabilinmektedir. Aynı zamanda değerler aralığınıda 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 seçilmektedir. <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>

Musa ÇAVUŞ 274

<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 özelliğinde 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"); }

Musa ÇAVUŞ 276

if ($(this).is(":last-child")) { alert("Ikinci dugme"); } }); }); </script> </head> <body> <button> Tikla </button> <button> Tikla </button> </body> </html> is filtresi

Şekil157 $(this) tanımlamasıyla basılan button düğmesine işaret edilmektedir. is() fonksiyonundaki parametreler eşliğinde basılan düğmenin ilk düğme mi yoksa ikinci düğme olduğu filtrelenmiştir.

Musa ÇAVUŞ 277

Bölüm 14 jQuery ile CSS

Musa ÇAVUŞ 278

14.1 Temel bilgi CSS’i nasıl kullanacağımızı daha önceki bölümlerde göstermiştim. CSS işleminizi bitirdikten sonra mutlaka tüm kullanılacak tarayıcılarda CSS kodu test edilmesi gerekmektedir, çünkü tarayıcılar aynı kod için farklı sonuçlar üretebilirler. Bunun nedeni tarayıcılarn CSS ile yapılan işlemlere farklı şekilde erişmeleridir. jQuery ile bu problemin büyük bir bölümünü ortadan kaldırabilirsiniz. jQuery ile CSS kombine edilmiş sayfalar en cazip olan sayfalardır. O yüzden bu bölümü çok iyi anlamaya gayret edin ki zaten anlayacağınıza inaniyorum. Hani dedim bir teşvik vereyim. Kitabın sonuna az kaldı bundan sonrası hikaye demeyin, kitabın ilk satırı ne kadar önemliyse son satırıda o kadar önemli. Đlk 100 sayfayı ilginç tutup son taraflarda hikaye anlatmak yerine kitabı baştan sona heyecanlı kılmayı tercih ettim. Bu bölümde jQuery ile CSS kullanımı anlatacağım. jQuery’nin CSS fonksiyonlarını http://api.jquery.com/category/css/ adresinde bulabilirsiniz:

Şekil157

14.2 CSS erişimi

Musa ÇAVUŞ 279

CSS özelliklerine erişimi bu bölümde anlatacağım. Standart metotlarla CSS kodunu nasıl değiştirebiliyoruz veya nesıl yeni CSS nesneleri ekleyebiliyoruz bunların hepsini göstereceğim. css() metodu css() metodunu daha önce örneklerimizde sık sık kullanmıştım ve şimdi tekrar ele alarak detayına iniyorum. css() metodunu iki şekilde kullanabiliriz. Birinci şekildeki kullanımda verdiğimiz parametreye göre değer elde ederiz. Đkinci kullanım şekliyse, iki parametre kullanarak CSS parametresinin değerini düzenleriz. Kullanılacak ilk parametre CSS’deki parametredir ve ikinci parametre ise onun değeridir. Birden fazla CSS parametresine değer atamak istiyorsak parametre olarak bir nesne kullanmamız 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

Musa ÇAVUŞ 280

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

Şekil158 css("color") ile color değişkeninin değerini elde ediyoruz. css("color", "blue") ile color değişkenine blue değerini atıyoruz. $("*").css( ile başlayan kod bölümünde ise bir nesne atıyoruz. Burada dikkat edilecek husus CSS değişkenleriyle değerlerini iki nokta üst üste ayırarak yazıyoruz ve her değiştirmek istediğimiz değere atanacak değişkeni belirttikten sonra virgül ile ayırıyoruz. Buraya kadar her şey çok basit, fakat ilk bakışta gözüktüğü gibi net değil, çünkü bir kaç tuzağı var. CSS kodundan farklı olarak, değişken atamaları virgül ile ayrışmaktadır ve atanan değer tırnak içerisinde atanmaktadır, yani bir String olarak atanmaktadır. Nesne oluştururken orada ‘background-color’ şeklinde bir tanımlama yaparken color tanımlamasında tek tırkank kullanmadan bir tanımlama yaptım. Bunu size bu iki kullanım arasındaki farkı gösterebilmek için uyguladım. Tek tırnak ile yapılan tanımlamalarda CSS koduyla yapılan özdeş tanımlamaları

Musa ÇAVUŞ 281

yapabiliyoruz. Tek tırkan koymadan background-color yazsaydım koddan istediklerim çalışmayacaktı. color tanımlaması yapılınca jQuery’de bir nesne kullanmış oluyorum ve jQuery’e özgü bir tanımlama yapmış oluyorum. addClass() ve removeClass() jQuery’le dinamik olarak CSS sınıfları ekleyebilirsiniz veya silebilirsiniz. addClass() metodu sınıf ekler, removeClass() ise parametrede verilen sınıfı siler. Aşağıdaki kodda <h1> tagı parametresiz ve belirli bir sınıfa ait değil. Ancak düğmelerinden birisine basılınca bir sınıf eklenecek ya da bir sınıf 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>

Musa ÇAVUŞ 282

sinifeklecikar.html Şekil159

Şekil159

Musa ÇAVUŞ 283

Şekil160 Sınıf ekle düğmesine basınca Firebug’da <h1> tagına yeni bir sınıfın nasıl eklendiğini çok güzel izleyebilirsiniz. Düğmelere 10 defa bassanız bile birden fazla eklenme ya da birden fazla silinme olmyacaktır. hasClass() metodu Bir grup elementin veya bir grup tagın CSS sınıfı var olup olmadığını hasClass() ile kontrol edebiliriz. hasClass() metodunda parametre olarak test etmek istediğimiz sınıfın adını yazıyoruz. Aşağıda mavi yazarak mavi CSS sınıfını 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>

Musa ÇAVUŞ 284

</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 sınıf ekleyebiliyoruz ve removeClass() ile sınıfı siliyoruz. tooggleClass() metodu bir iki metodun bir kombinasyonudur. Eğer sınıf 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(){

Musa ÇAVUŞ 286

$("h1").toggleClass("mavi"); }); }); </script> </head> <body> <h1>Bedava sirke baldan tatlidir</h1> <button> Sinif ekle/sil </button> </body> </html> toggleclass.html

Şekil162 Düğmeye basılınca yazı mavi oluyor ve tekrar basılınca yazı siyah oluyor. 14.3 Pozisyon belirleme metotları Web sayfalarını oluşturmada ve dinamik olarak yapılan değişikliklerdeki en büyük problem elementlerin pozisyonlamasında çıkmaktadır. CSS’ten önce görünmez HTML tabloları kullanılıyordu. CSS ile bu probleme çok iyi hakim

Musa ÇAVUŞ 287

olabiliyoruz ve jQuery CSS ile yapılan pozisyonlamayı bize metotlar halinde sunmaktadır. position() ile pozisyonlama position() metodundaki left ve top değişkenleriyle pozisyonlamayı çok iyi kontrol edebiliriz. left ve top değişkenleri bize sorguladığımız 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

Musa ÇAVUŞ 288

Şekil163 offset() ve offsetParent() metotları position() metoduyla bir elementin pozisyonunu bulabiliyoruz da ya parentin pozisyonunu bulmak istiyorsak veyahut sayfaya göre elementin pozisyonunu bulmak istiyorsak ne edecegız? <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 tagın sayfadaki pozisyonunu verir. <h1> tagının sayfadaki x koordinatı 8 piksel ve y koordinatı da 8 piksel olduğunu görüyorsunuz. Kullanımı position() metodu gibidir, left ve top değişkenlerini aynı şekilde kullanabiliyoruz. offsetParent() metodu ise bir nesne iletir ve ancak bu nesnenin

Musa ÇAVUŞ 290

left ve top değişkenlerini kullanarak elementin pozisyonu hakkında bilgi alabiliriz. Aşağı yukarı ve sağ sol kaydırma çubuğu Aşağı yukarı ve sağ sol kaydırma çubuğunu kontrol edebilmek için jQuery, scrollTop() ve scrollLeft() metotlarını sunmaktadır. scrollTop() ve scrollLeft() metotlarına bir parametre değeri verirsek seçtiğimiz elementi kaydırabiliriz. Parametresiz olarak kullanırsak, kaydırılmış elementin pozisyon değerlerini alırız. Sizde birilerini ya da bir şeyleri oraya buraya kaydırmak istiyorsanız bu örnek tam size göredir. <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> kaydır.html

Şekil165 Kaydırma çubuklarının ortaya çıkma nedeni, CSS parametresinde overflow değişkenine auto değeri vermemizden kaynaklanmıştır. $("div:eq(0)") tanımındaki width değeri 400 piksel ve height değeri 300 pikseldir. overflow değişkenindeki auto değeri, ne zaman <div> tagının içindeki bir element bu sınırları aşarsa kaydırma çubuğunu açığa çıkarmasını sağlamaktadır. 14.4 Yükseklik ve genişlik

Musa ÇAVUŞ 292

Birçok değişiklik için yükseklik ve genişlik önemlidir. jQuery bu elementlerin bu özellikleri içinde gerekli metotları sunmaktadır. height() ve width() metotları Bu iki metoda parametre verirsek, elementlerin yüksekliğini ve genişliğini değiştirmiş oluyoruz. Parametresiz kullanırsak elementlerin genişliğini ve yüksekliğini 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 Görüntülü elementlerde genişlik ve yükseklik dışında kenar, çerçeve genişliği 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(){

Musa ÇAVUŞ 294

$("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ç genişliği, outerWidth() dış genişliği, innerHeight() iç yüksekliği, outerHeight() dış yüksekliği değerini iletiyor. Bu metotlarda parametre olarak true verirsek, kenar kalınlığınında göz önünde bulundurulmasını istemiş oluruz.

Musa ÇAVUŞ 295

Şekil167 14.5 jQueryUI’nin ThemeRoller

Musa ÇAVUŞ 296

Bunun temelinde CSS yatmaktadır. jQuery’deki kardeşler oturmuşlar ve bizler için kullanışlı CSS nesneleri oluşturmuşlar. Daha sonra bu nesneleri jQuery nesneleriyle ilişkilendirmişler ve bizim haftalarca programlamamız gereken nesneleri bize hediye edivermişler. Hediyeyi bir kütüphane şeklinde http://jqueryui.com/ adresinde bulabilirsiniz.

Şekil168 jQueryUI ile sayfanızda çok kısa sürede görsel anlamda büyük değişiklikler gerçekleştirebilirsiniz. Benim bu bölümde başlıkta da değindiğim gibi jQuery ile kullanabileceğiniz temalara değinmek olacaktır. Ana sayfadaki “Explore the theme gallery” linkini tıklarsanız ThemeRoller sayfasına gelmiş olursunuz. Kendiniz tema oluşturabileceğiniz gibi hazır oluşturulmuş temalarda değişiklik yaparakta temalar oluşturabilirsiniz. Açılan sayfada Gallery linkini tıklayın:

Musa ÇAVUŞ 297

Şekil169 Sol taraftaki örnekleri tıkladığınızda canlı olarak tıkladığınız temanın sayfanıza nasıl etkili olabileceğini görmüş olursunuz. Diyelim ki UI darkness temasını seçtik. Tıklayın bu tema üzerine ve tıkladıktan sonra onun altında bir download düğmesi var oraya tıklayın:

Musa ÇAVUŞ 298

Şekil170 Yeni sayfada jQueryUI’nin hangi bölümlerini istiyorsanız onu seçebilirsiniz ve Download düğmesine tıklayarak temayı indirebilirsiniz. Ben hepsini seçili bıraktım ve bilgisayarıma indirdim ve çalışma dizinimde dosyayı açtım. Şimdi size hiç bir yerde bulamayacağınız kullanım göstereceğim. Türkiye’deki hiç bir kitapta bulamazsınızda yurt dışında da çok zor bulursunuz, ben daha görmedim. Şekil169’a tekrar dönersek en aşağıda Framework Icons bölümü var:

Musa ÇAVUŞ 299

Şekil171 Biraz düşünce gücü kullanarak bu Icon’ları kendi web sayfanızda da jQuery eşliğinde kullanabilirsiniz. FireBug Icon’una tıklayın ve her hangi bir resim seçin:

Musa ÇAVUŞ 300

Şekil172 Düzenle sekmesini seçin ve <li> tagı ile başlayan bölümü kodunuza kopyalayın. <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ı oluşturdum. Yaptığım çok basit, kütüphanedeki class adını burada kullandım. Size tavsiyem bu tür efektler oluşturabilmek için, jQueryUI sayfasına girin ve Gallery bölümünden kafanıza göre bir birleşim seçin. Daha sonra da bu göstermiş olduğum adımları uygulayarak sayfanıza entegre edin. Göreceksiniz çok kısa zamanda sayfanız yüksek derecede canlılık kazanacaktır. jQueryUI sayfasındaki Roll your Own sekmesini tıklayarak isteğinize göre de her türlü efektler oluşturabilirsiniz.

Musa ÇAVUŞ 302

Bölüm 15 Web sayfasında düğümler

Musa ÇAVUŞ 303

15.1 Düğüm içeriği sorgulama ve değiştirme HTML metinlerini değiştirme ve sorgulama html() ve text() html() ve text() ile HTML metinlerini değiştirebiliriz ve sorgulayabiliriz. html() ile text() arasındaki fark, html() HTML koduna göre işlem yaparken text() içeriklere normal metinmiş gibi davranır. Bu fonksiyonları parametresiz kullandığımızda metin sorgulaması yapıyoruz ve parametre kullandığımızda metinleri değiştirebiliyoruz. <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

Musa ÇAVUŞ 304

Şekil174

Form bilgilerini kontrol etme val() Form bilgilerine ulaşabilmek için val() fonksiyonunu kullanabiliriz. Çok basit bir fonksiyondur. Parametreli kullanılınca her hangi bir forum alanına bilgi ekleyebiliriz, parametresiz kullanırsak form elementinin değerini 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

Musa ÇAVUŞ 306

Web sayfasına düğüm ekleme jQuery DOM sistemine sonradan içerik ekleyebilmemiz için bir kaç fonksiyon sunmaktadır.append() ve appendTo() ile prepend() ile prependTo() fonksiyonlarıyla bu işlemi esnek bir şekilde gerçekleştirebiliriz. append() ile bilgiyi eklenecek yerin arkasına, prepend() ile de ekelencek yerin önüne ekleyebiliyoruz. appendTo() ve prependTo() fonksiyonlarıylada 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 sonrasına düğüm ekleme jQuery bize başka düğümlerin arkasına ya da önüne düğüm ekleyebileceğimiz metotlar sunmaktadır. Bunun için hedef düğümü 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

Musa ÇAVUŞ 308

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 düğüm eklerken before() fonksiyonu hedeften önce düğüm ekler. insertAfter() ve insertBefore() after() ve before() metotlarının yaptıkların yapmaktadırlar. Arlarında sadece kullanım tarzı ayrılığı vardır. Örnekte bu ayrılıkları belirttim. Düğüm kuşatma jQuery ile düğümleri kuşatarak çocuk düğümler haline getirebilirsiniz. Đngilizcede kuşatma kelimesinin karşılığı wrap kelimesidir. wrap() metoduna parametre olarak beraber kuşatmak istediğiniz tagı yazıyorsunuz.. wrapAll() metodunda ise uyan tüm elementlerin tek bir tag içerisine sarılması sağlanmaktadır. Parametre olarak yine beraber sarmak istediğimiz tagı yazıyoruz. <html> <head>

Musa ÇAVUŞ 310

<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 değiştirme replaceAll() ve replaceWith() metotlarıyla web sayfasındaki elementler ile değiştirmek istediğiniz elementi değiştirebilirsiniz. replaceWith() metodu, uyan tüm elementleri DOM elementleriyle değiştirebilme özelliği vermektedir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script>

Musa ÇAVUŞ 312

<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 Eğer jQuery vasıtasıyla bir DOM ağacına dinamik olarak düğüm ekleyebiliyorsak, mutlaka bu düğümüde dinamik olarak silebilme özelliğine sahip olmalıyız. empty() ile tüm alt düğümleri silebiliyoruz ve remove() ile de düğümleri 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

Musa ÇAVUŞ 314

Şekil180 empty() yazan düğmeye tıkladığınızda tüm içeriğin silindiğini göreceksiniz. Sayfayı tekrar yüklediğinizde ve remove() düğmesine tıkladığınızda yine her şeyin silindiğini göreceksiniz. Daha sonra after() düğmesine tıklatığınızda silinenlerin geri geldiğini göreceksiniz. Bunun nedeni remove() metoduyla silinen tagların DOM objesinde saklanmasındandır. Elementleri kopyalama Bir elementi bir yerden silerek bir başka yere aktabiliyoruz ve aynı şekilde bir elementi bir yerden silmeden başka 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

Musa ÇAVUŞ 316

Şekil181 Parametre olarak true verdığimizde elemente ait olan Eventhandler’leride kopyalayabiliyoruz. Parametre olarak false yazarsa ya da hiç bir parametre vermezsek Eventhandler’leri kopyalayamiyoruz. 15.2 Arama jQuery belirli bir yapıyı aramak için bir çok güçlü metot sunmaktadır. JavaScript ve DHTML’de neredeyse arama için hiç bir fonksiyon bulunmamaktadır. jQuery bu alanda böylece büyük bir güç olmaktadır. Đlk olarak children() metodunu göstermek 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

Musa ÇAVUŞ 318

Şekil182 Đlk <div> tagların arasındaki tagları sayarsak 5 tane alt tag yani 5 çocuk tagının olduğu görürüz. Bu yüzden “Tüm cocuklar” düğmesine dıklanınca “Cocuk elementlerin sayisi: 5” diye bir yazı çıkmaktadır. children() metodunun length değişkeniyle kaç tane çocuk element olduğunu bulabiliyoruz. Đkinci düğmeye bastığınızda element sayısı 1 gösterilmektedir. parent() ve parents() metotları da children() metodu gibi çalışmaktadır o yüzden onlar için örnek vermedim. Çocuk yerine ebeveyn bulunmaktadır. Kardeşleri arama Elementlerin kardeşleri arasındada arama yapabiliriz. Evlat babayı anladıktan kardeş aramada ne işimiz olabilir demeyin, ailedeki tüm fertlerle ilgilenmek gerekiyor. Az sonra vereceğim örnek biraz uzunca olacak fakat bir o kadarda anlaşlılması çok kolay. Kardeşler arasında yapabileceğiniz arama tekniklerinde kullanabileceğiniz tüm metotları bu örnekte bulabilirsiniz. Çıktısına bakarak bile örneğin ne demek istediğini ç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>

Musa ÇAVUŞ 320

</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 seçtim ve oradan itibaren diğer kardeşlere nasıl ulaşıldığını bu programda çok güzel görebiliyoruz. next() metodu bir sonraki kardeşi elde etmemizi sağlıyor. Örneğimizde next() metodunu çağırınca Kardes4 elde edildiğini görüyorsunuz. nextAll() metodu bulunduğumuz noktadan sonraki tüm kardeşleri iletiyor. prev() bir önceki kardeşi. prevAll() metodu bulunduğumuz noktadan önceki tüm kardeşleri ve siblings() metodu ise tüm kardeşleri iletiyor.

Musa ÇAVUŞ 322

Bölüm 16 jQuery ve Event

Musa ÇAVUŞ 323

16.1 Event Objesi JavaScript’i anlatırken EventHandler bölümüne değinmiştim. Burada jQuery ile EventHandler’leri işlemeyi anlatacağım. Đlk konu olarakta Event. jQuery’deki Event sistemi, JavaScript’teki Event sistemini kapsamaktadır ve daha da kolaşlaştırmıştır. Bir Event objesini oluşturmak jQuery ile çok kolaydır. Mesela new jQuery.Event(“click”) yazarak bir objeyi oluşturabiliyoruz. Parametre olarak ne yapmak istediğimizi 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 jQuery’de EventHandler’ler için EventHelper metotları var. jQuery.Event() şeklinde bir kod yazmak yerine EventHelper’leri kullanmak hayatımızı çok daha kolaylaştırıyor. Yaptığım çok basittir. click() metodunu çağırarak bunu <h1> tagına bağladım ve <h1> tagına tıklanınca click() metodunda belirtilen kod işlem görecektir. Bu sistemle yapılan Event’ede ulaşabilmekteyim. click() metodundaki anonim fonksiyona parametre olarak event yazmamız yapılan Event’i kullanmamız için yeterlidir. event.type yazarak Event’in tipini tarayıcıda yazılmasını istemiş oldum.

Musa ÇAVUŞ 324

Şekil184 jQuery’deki Event metotlarına genel bir bakış atmak istiyorsanız http://api.jquery.com/category/events/ adresinde görebilirsiniz.

Musa ÇAVUŞ 325

Şekil185 16.2 Event özellikleri Event objesinin birçok metodu vardır ve bizim için çok kullanışlıdır.event.type, Event tipini bize iletmektedir. event.target Event’i oluşturan DOM elementini iletiyor. event.relatedTarget fare hareketlerinde farenin daha önce hangi elementte olduğunu bilmemizi sağlar. event.pageX ve event.pageY ile ekran koordinatlarını alırız ki Internet Explorer ile diğer tarayıcılar arasında normalde koordinat problemi çıkarken jQuery ile bu problem çok kolay çözülmüş durumundadır. Siz normal JavaScript kullanarak ekran koordinatlarını bilmek isterseniz mutlaka Internet Explorer ve diğer tarayıcılar arasında rakamsal farklılıklar göreceksiniz. Şimdi event’in bir kaç metodunu bir uygulamada göstermek istiyorum: <html> <head>

Musa ÇAVUŞ 326

<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 tıklanınca, tıklanan yer ve tıklanan DOM objesindeki düğüm hakkında bilgi gösterilmektedir. Örneğimizdeki <img> tagı tıklanan DOM objesindeki düğüm olduğu için bu bilgi tarayıcı ekranına gelmiştir. 16.3 Event durdurma Bazı durumlarda gidiş hattı durdurmak isteyebilirsiniz. jQuery bunun için metotlar sunmaktadır. event.preventDefault() metodunu çağırarak yapılan her hangi bir Event’i 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>

Musa ÇAVUŞ 328

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

Şekil187 event.isDefaultPrevented()) ile de durdurmanın olduğunu kontrol edebiliyorsunuz. 16.4 Event ortamındaki özel metotlar Bu bölümde jQuery’de çok esnek olan özel metotları göstereceğim. ready() metodu Bir çok örnekte ready() metodunu kullandığımı görmüşünüzdür. Ya da kısaltma olarak ${} şeklinde bir kullanımın olduğunu gördünüz. Bir tarayıcı DOM’unu tam kurduktan sonra o tarayıcıdaki DOM’a erişebiliriz. ready() metodu bunu kontrol etmektedir. onLoad EventHandler’ini biliyorsunuzdur, bu EventHandler ready() metodu gibi güvenilir değildir. Bir çok durumda kontrol edilmeden geçiş sağlamaktadır. ready() metodu ise tam kontrol eder ve DOM’a erişmemizi öyle sağlamaktadır. ready() metoduyla bir çok örnek yaptığım için burada ek olarak bir örnek göstermiyorum.

Musa ÇAVUŞ 329

bind() ve unbind metotları bind() metoduyla bir Event’i bir taga her hangi bir zaman aralağında bağlayabilirsiniz. unbind() ile de bu bağlantıyı koparma gücünüz vardır. <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

Musa ÇAVUŞ 330

Şekil188 bind() yazan düğmeye basınca, Beyaz resmine mouseover ve mouseout Event’lerini bağla ve verdiğim metini tarayıcıda göster. unbind() düğmesine basınca mouseover ve mouseout Event’lerini Beyaz resminden çıkart. Program bu iki emri yerine getirmektedir. Üçüncü parametredeki info değeri dikkatinizi çekmiştir. info, info fonksiyonunun bir referansıdır. bind() fonksiyonunda üçüncü parametre olarak her hangi bir fonksiyon referansı verebiliriz ve verilen fonksiyon işlem görmektedir. info fonksiyonundaki event.data.text, parametrede verilen “text:” işaret etmektedir. Ben oraya “text:” yerine “selamkelam:” yazsaydım fonksiyonda event.data.selamkelam yazmam gerekecekti. Sadece bir kez one() Kullanım açısından bind() metoduyla özdeş olan one() metodunun bind() metodundan farkı sadece bir kez işlev görmesidir.

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

Musa ÇAVUŞ 332

Şekil189 Fareyle resime girdiğimizde bir bilgi çıkıyor. Fare ile resimden çıkınca boş bir metin gösteriliyor. one() metodu sayesinde bu olayı bir defa gerçekleştirebiliyoruz. Tabi ki saksınızı çalıştırarak bunu farklı şekillerde yapabilirsiniz. Kodunuza bir sayaç koyarak tıklama miktarını sayabilirsiniz ya da daha akrobasik hareketlerde bulunabilirsiz. jQuery’ciler böyle bir kolaylık sağladıktan sonra tekeri tekrar icetmeye ne hacet var. Tetikleyiciler Event’leri belli veri değişiklerinden sonra başlatmak isteyebiliriz. jQuery’deki gençlik bunun için tetikleyici metodunu bize sunmaktadır. Bize bir de iyilik yaparak metodun adını tetikleyicinin ingilizcesi olan trigger koymuşlardır. Đngilizce bilerek bir çok metodu anlayabilirsiniz, yalnız ingilizce bilmek demek programlamayı biliyorum demek değildir. <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 tıklandığında resim büyümektedir. Tıklamak demek click() metodu demektir. Bunu <img> tagına bağladım. Daha sonra ilk düğmeye basılınca <img> tagının click() metodunu çağır degim. Bunu da trigger metodunda örnekte kullandığım gibi gerçekleştirebiliyorum. Trigger() metoduna parametre olarak hangi Event’i çağırmak istiyorsam onu yazıyorum.

Musa ÇAVUŞ 334

Şekil190 toggle() Bu bölümün sonunda çok güzel bir örnek vermek istiyorum. Biraz animasyonculuğa hazırlıktır. Üç tane farklı renkte düğme var ve tıkladıkça rengi ve şekli değişecek. Örnek uzun gibi gelsede çoğu tanıdığınız bildiğiniz şeyler. Ben toggle() metodu üzerinde duracağım. Öncelikle örneği 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

Musa ÇAVUŞ 336

Şekil191 Tüm <div> taglarına bir css objesi yerleştiriyoruz. jQuery ile toggle metodunda üç parametre uyguluyoruz. Birinci parametre ilk tıklama, ikinci parametre ikinci tıklama, üçüncü parametrede üçüncü tıklamada oluşacak işlemi programlamamızı sağlamaktadır. $(this) ile diyoruz ki şu an ait olduğum taga ulaş ve ona ulaştıktan sonra css( yaparak o tagın css hayatını değiştiriyoruz. Çok şnemli noktalardan birisi ise şudur ki, her <div> tagı kendisine kaç kere tıklandığını bilmektedir.

Musa ÇAVUŞ 337

Bölüm 17 jQuery ve Animasyon

Musa ÇAVUŞ 338

17.1 jQuery ve animasyonlar Ziyaret edilen web sayfalarında animasyonların oluşu, ziyaretçileri çok etkilemektedir. jQuery Framework’u, jQuery ile animasyon görüntüleri geliştirmenizi sağlamaktadır ve jQuery Framework’teki en basit konulardan biridir. http://api.jquery.com/category/effects linkine girerek var olan animasyon metotlarını görebilirsiniz. Bilmem biliyor musun, fakat jQuery dokümentasyanu aynı zamanda görüntülü örneklerde içermektedir. Az önce veridğim linke tıklayın ve çıkan sayfada dequeue() metoduyla gösterilen linke tıklayın:

Şekil192 Örneği ve uygulanışını canlı olarak jQuery sayfasında görebilirsiniz. Keratalar gerçekten güzel bir sayfa yapmışlar, ben şahsen hayran kaldım. show() ve hide() metotları Zamana göre görüntüleme ve saklama animasyonculuğun temel işlevleridir. jQuery için bu bir çocuk oyuncağı kadar kolaydır. Bunun için show() ve hide() metotları vardır. <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>

Musa ÇAVUŞ 340

</html> showhide.html

Şekil193 Goster dugmesinin ardında show() metodu gizli. Bağlı bulunduğu taglar gösterilmiyorsa göstermek için gereken bir metottur. Animasyonlu göster düğmesine bastığımızda show() metodunun parametreli çağrıldığını görüyoruz. Parametre olarakta slow, Đngilizceden Türkçeye meal yaparsak usulca demek oluyor. Gösterilmeyenleri usulca göstermek için slow yazabiliyoruz. Tabi dersek, ben bu işin zamanını kendim belirtlemek istiyorum. O zamanda parametre olarak salise bir değer verin. Ben 5000 verdim, bu demek oluyor ki 5000 salise vatandaş tam gösterim için harcayacaktır. Đkinci parametre olarakta bir Callback fonksiyonu verdim. Đkinci parametre animasyon süresi bittikten sonra işleve girmektedir. hide() metoduda gizle demektir, show() metodunda geçerli olan tüm parametre kuralları hide() içinde geçerlidir. Örnekte hide(‘fast’) kullandım. fast, hızlı demek olduğu için hızlı bir şekilde gizleme yapmış oluyorum. slideDown(), slideUp() ve slideToggle()

Musa ÇAVUŞ 341

Normalde aşağıdaki örnek herşeyi açıklıyor. Ben yinede bir kaç açıklama getirmek istiyorum. Çizilen dikdörtgeni veya resimi aşağıdan yukarıya saklamak için slideUp() metodunu kullandım. Paramtre değerini daha önce anlatmıştım. slideDown() metoduyla aşağıya doğru resim ve dikdörtgen çizilmektedir. slideToggle() metoduylada zamanı verebiliyoruz. show() ve hide() metotlarındaki gibi ikinci bir parametre değeri de verebiliriz. Görevi ise aynı show() ve hide() metotlarındaki görevi 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

Musa ÇAVUŞ 342

</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 içinde kolay metotlar sunmaktadır. fadeIn() ve fadeOut() metotları saydamlaştırarak göstermektedir ve gizlemektedir. fadeTo()

Musa ÇAVUŞ 343

metodu ise belirli bir zamana göre ve belirli bir sınıra göre saydamlaştırmaktadır. <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" />

Musa ÇAVUŞ 344

</body> </html> slide.html

Şekil1195 Yine bu metotlarda da ikinci parametrede kullanılabilecek Callback fonksiyonu geçerlidir. Zincirlenmiş animasyonlar Animasyon jQuery ile çok kolay olduğunu gördünüz. Özellikle tarayıcıların animasyonlara getirdiği sınırlamaları jQuery ile aşabiliyorsunuz, çünkü jQuery kendin bünyesinde bu sınırlamaları işliyor ve siz bunları gös önünde bulundurmaya gerek duymuyorsunuz. Gereksiz cümleler kullanmayı sevmediğim için hemen zincirleme animasyonu için örneğe geçmek 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

Musa ÇAVUŞ 346

Şekil196 jQuery olmadan zincirleme animasyonlarını programlamak çok güçtür. jQuery’deki zincirleme animasyon özelliğin beni cezbeden noktası bir animasyon bittikten hemen ardından diğer animasyona geçilmesidir. Örnekte iki şekil zincirleme animasyonu uyguladım. Birinci düğmeye bastığınızda, animasyon metotları sırasıyla çağrılmaktadır. Koda baktığınızda bu metotları bir nokta ayırarak çağırmaktayım. Bunun nedeni her animasyon metodu bir jQuery nesnesini bize iletmektedir. Böylece biz bir diğer animasyon metodunu nokta kullanarak o nesnenin bir metoduymuş gibi çağırabilmekteyiz. Đkinci yöntemde ise her animasyonu ayrı bir satırda çağırarak aynı elemente uyguladım. Bu da zincirleme animasyonunu sağlamış oluyor. Animasyonları durdurmak

Musa ÇAVUŞ 347

Bir animasyon işliyorsa bunu stop() metoduyla durdurabilirsiniz. Yukarıdaki örneği ele alırsak birinci animasyonu işlevi esnasında durduran bir örnek göstereceğim: <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>

Musa ÇAVUŞ 348

Şekil197 Bazen animasyonu durdurma gecikmelere sebebiyet verir fakat yine de sonunda animasyon durdurulmuş olur. animate() ile kendiniz bir animasyon metodu jQuery’nin bize sunduğu animasyon metotları, bir çok animasyon özelliğini bize sunmaktadır ve aklınıza gelen bir çok animasyon efektinide sağlamaktadır.Fakat bazı durumlarda gönül ister ki kendimiz bir animasyon metodu yazalım. Örneğin bir elementin pozisyonunu bir yerden başka bir yere saydamlaşırken bir yandan da sürüklemek istiyorsunuz. JavaScript ile bunu programlamaya çalışırsanız çok vaktinizi alacaktır ve bir kaosa sürüklenerek metotları rekursıv olarak çağırmaya başlayacaksınızdır. Đyi ki jQuery var ve bize animate() adında bir metot sunmaktadır.

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>

Musa ÇAVUŞ 350

</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 sayfasından animate() metodu hakkında Đngilizce ayrıntılı bilgi bulabilirsiniz. Đngilizce dilini tam anlamıyla bilmenize gerek yok, oradaki örneklerde faydalı olan örneklerdir. Tabi benim verdiğim örneğe oradakiler eline su dökemez, çünkü Türkçe. animate() metodu çok esnek ve çok güçlü bir metottur. Bu metotla istediğiniz animasyonu oluşturabilirsiniz. button:first bloğuna bir bakalım. Orada bir animate() metodu kullandim. Đlk parametre olarak bir CSS nesnesini değişik parametrelerle görüyorsunuz. Đkinci parametre olarakta zaman aralığını görüyorsunuz. Olay çok basit, bizim dikdörtgenin ilk halini tanımlamış oluyoruz. animate() metodu bizim dikdörtgenin son hali olmuş oluyor, ikinci parametredeki zaman aralığıda dikdörtgenin son haline kavuşma süresidir. jQuery bu bilgiler eşliğinde bir animasyon oluşturuyor. animate() metoduyla zincirleme animasyonlarda yapılabilir. Her animate() metodunun ardından bir nokta koyarak bir animate metodu daha çağırabilirsiniz, çünkü animate() metodu bir jQuery nesnesi iletmektedir.

Musa ÇAVUŞ 352

Bölüm 18 jQuery ile Ajax

Musa ÇAVUŞ 353

18.1 jQuery ve Ajax Daha önce Ajax’ı göstermiştim. jQuery burnunu her tarafa sokarak işimizi kolaylaştırdığı gibi Ajax dunyasınada burnunu sokmuştur ve Ajax kullanımını kolaylaştırmıştır. Bize kalan sadece nasıl olduğunu öğrenmektedir. Gerçekten şoke olacaksınız jQuery ile Ajax kullanımının ne kadar kolay olduğunu görünce. jQuery’nin , Ajax ile bize sunduğu metotlar şu sayfada görebilrisiniz http://api.jquery.com/category/ajax/

Şekil199 Daha önce anlattığım Ajax’ı anladıysanız buradaki jQuery metotları sizin için çocuk oyuncağı gibi gelecektir. Şimdi bir örnekle başlamak istiyorum: http://localhost/ajax/ajax1.html <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){

Musa ÇAVUŞ 354

$("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 dünyada bildigim iki sey var, birincisi erkekler kadinlardan akillidir, ikincide erkekler kesinlikle kadinlardan akillidirlar. ajax.txt

Şekil200 Daha önce XAMPP kurulumunu ve kullanımını göstermiştim. htdocs dizini altına ajax diye bir dizin açtım ve ajax1.html ile ajax.txt dosyalarını bu dizine kopyaladım. http://localhost/ajax/ajax1.html linkini yazıncada yukarıdaki şekili elde ettim. Koda baktığınızda yaptığım çok basit. $.get() ve $.post() fonksiyonlarını kullanarak birinci parametrede çağırmak okutmak istediğim dosya adını veriyorum, ikinci parametredeki data değişkenide okunan dosyanın içeriğini bana sunmaktadır. jQuery ile Ajax bu kadar basit. Đki saat hikâye anlatmama gerek yok. Yüzlerce sayfa yazarak Ajax nimetinin nasıl kullanıldığını da

Musa ÇAVUŞ 355

göstermeme gerek yok. Yukarıdaki kodla bir süre Ajax kodu yazabilirsiniz. jQuery ile kalın kitapları alarak Ajax kodu yazma mazilerde kaldı. Size bir kaç örnek daha vereceğim sonra iş başvurusunda ben Ajax biliyorum diyebilirsiniz. Yeşillik olsun diye bir başka ö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 dünyada bildigim iki sey var,</b><br> <font color=red>birincisi erkekler kadinlardan akillidir, ikincide erkekler </font> kesinlikle kadinlardan akillidirlar. ajaxhtml.html

Musa ÇAVUŞ 356

Şekil201 Bu örneğin bir önceki örnekten tek farkı text() metodu yerine html() metodunu kulllanmam oldu. html() metodu gelen bilgiyi HTML olarak algılıyor ve tarayıcı ona göre gösteriyor. Metot çok kolay ve içerik çok büyük farklılık arz ediyor. Webserver’e Ajax ile bilgi nasıl yollanır? Diyelim ki, ad, soyad ve numara gibi bilgileri Web Server’e yollamak istiyorsunuz ve yolladığınız bu bilgiler ışığında tarayıcıda bilgiler göstermek istiyorsunuz. Bunu da Ajax ile gerçekleştirme düşüncesindesiniz. O zaman bu örneğe iyi bakın. Tabi diğer Ajax örneklerindeki gibi Server tarafında basit bir metin dosyası bulundurmamız mantıksız olur. Server tarafında bir program parçası olması gerekiyor ki bizim yolladığımız bilgileri alsın ve işledikten sonra tekrar bize geri yollasın. Daha önceki Ajax anlatımıdan PHP kodu kullanmıştım burada da PHP kodu kullanacağım. PHP kodunun ne yaptığını anlamanız yeterlidir, çünkü kitap PHP kitabı değil. Ajax için Server tarafında çalışan program parçası hiç önemli değildir, siz istiyorsanız başka bir dilde kullanabilirsiniz. Ajax Server tarafını kapalı bir kutu gibi görmektedir. Siz nasıl ki telefon açtığınızda karşı taraftaki kişinin cinsi, ırkı önemli değil sadece söyledikleri önemliyse, Ajax içinde aynı kriterler geçerlidir. Göstereceğim örnekte kullanıcı adı ve şifre yollayacağım eğer Server tarafı onaylarsa tarayıcıda onaylandı diye bir belirteç gözükecek, onaylamazsa yanlış kullanıcı adı ve şifre diye bir hata mesajı çıkacak. Bu bildiğiniz bir

Musa ÇAVUŞ 357

sorgulamadır, tek farkı yeni bir tarayıcı penceresinde değil de aynı pencerede gerçekleşmesidir. <?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>

Musa ÇAVUŞ 358

<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 korkmamanız için PHP kodunu anlatmak istiyorum. Yaptığım çok basit. $_GET['username'] ve $_GET['password’] ile kullanıcı adını ve şifreyi elde ediyorum. Daha sonra bunları $kullaniciadi ve $sifre değişkenleriyle kontrol ediyorum. Eğer girilen kullanıcı adı ve şifre bunlarla özdeşiyorsa $login değişkenin değeri true oluyor ve echo ile başarılı olduğuna dair bir satır tarayıcıya geri yollanıyor. Eğer $login değişkeni false kalıyorsa o zaman else anahtar kelimesinden sonra gelen echo ile yazılacak satır tarayıcıya yollanıyor. PHP kodunu çok basit tuttum, veritabanı bağlamadım. Önemli olan sistemi kavramaktır yoksa burada manzak projeler yapmak değildir. ajax3.html dosyasındaki en önemli yer şurasıdır: { username: $("input:first").val(), password: $("input:last").val() } Bu satırlarla Server’e jQuery ile bir nesne yollatıyorum. username değişkenine ilk input elementinden değer aktarılıyor. Aynı şekilde password değişkenine son input elementinden değer aktarılıyor. Düğmeye basılınca bu veriler Server’e aktarılıyor. jQuery ve Ajax hakkında bu kadar bilgi yeterli. Bu bilgilerle kaliteli Ajax projeleri gerçekleştirebilirsiniz. Herşeyi bilemezseniz fakat kaliteli projeler yapabilmek için herşeyi de bilmeye gerek yoktur.

Musa ÇAVUŞ 360

Bölüm 19 jQuery UI

Musa ÇAVUŞ 361

19.1 Genel bir bakış jQuery Framework’unun yanı sıra bir de jQuery UI var. Bu Framework görsellik için kullanılmaktadır. Wıdgets de denilmektedir. jQuery çekirdeğini ve CSS sistemini kombine ederek bu Framework oluşturulmuştur. Gerçekten jQuery’deki ağabeyler herşeyi bizim için düşünmüşler. Bazen diyorum bu adamların hiç mi çoluk çocuğu yok nereden buluyorlar bu kadar vakti. Tanımasam Avrupalı ve Amerikalıları amenna diyeceğim, biliyorum bizlerden zeki olmadıklarını. Neyse konudan sapmayalım. jQuery UI için http://jqueryui.com yazın ve sayfaya bir girin:

Şekil203 jQuery UI size çok güçlü bir Framework sunmaktadır ve bu Framework’u kullanmak çok kolaydır. Benimde en çok hoşuma giden yönü budur. jQuery UI Kütüphanesi normal jQuery kütüphanesinde mevcut değildir. Bu yüzden bunu indirmeniz gerekmektedir. Yukarıdaki şekilde Build custom download linkine tıkladığınızda işe başlamış olacağız. Şimdilik oraya tıklamadan önce web sayfasını size biraz gezdireyim. Sol alt köşede Browse all effects & widgets linki var, tıklayın onu.

Musa ÇAVUŞ 362

Şekil204 Burada Draggable linkini bir tıklayın.

Musa ÇAVUŞ 363

Şekil205 Đlginç olan dokümanda örnekler var ve siz bu örnekleri canlı olarak deneyebilirsiniz. Çıkan penceredeki kareyi fare ile istediğiniz yere sürükleyerek kendi sisteminizde kullanmak istediğiniz bölümü kullanmadan önce deneyebiliyorsunuz. Aynı sayfada view source linkine tıkladığınızda gördüğünüz efekti sisteminize yüklemek için koduda görüyorsunuz. Koda baktığınızda göreceksiniz ki ekrandaki kareyi sürükleyebilmek için draggable() metodunu kullanıyorsunuz o kadar. Dedim ya jQuery UI kullanarak efektleri çok kolay gerçekleştirebiliyorsunuz. Nerede görülmüş tek bir metot kullanarak her hangi bir elementi sürükleyebilmeniz. Seneler öncesi böyle bir olayı JavaScript ile programlamak istediğimde bir sürü kod yazmıştım. Fareye basıldı mı, fareyi nereye sürükledin gibi unsurlara muhakkak dikkat etmek gerekiyordu. jQuery UI’de bunları unutuyorsunuz. 19.2 jQuery UI nasıl kullanılır? Daha önce belirttiğim gibi jQuery UI'yi kullanabilmek için bir kütüphane indirmelisiniz. Download linkine tıklayın.

Musa ÇAVUŞ 364

Şekil206 Sağ tarafta 1.8.5 olan son versiyonu seçerek Download linkine tıklayın. Bu rakam jQuery’deki gençler yenilikler getirdikçe değişebilir. jquery-ui-1.8.5.custom.zip bir dosya indirdim. Zip formatındaki dosyayı Zip halinden kurtarın ve onu örnekleri deneyeceğiniz dizine kopyalayın. Ben örneklerimin bulunduğu dizinin içine bir de jquery-ui-1.8.5.custom dizini açarak açılan tüm dosyaları onun içine kopyaladım. Daha önce böyle bir şeyler yapmıştık hatırlıyorsanız. Şimdi tekrar yapıyoruz. Zip dosyasını açtıktan sonra sıradaki kodu yazın. Zip dosyasının içinde 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/ui-darkness/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-ui-1.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 Heyecanlanmadınız değil mi? Đnanılması güç fakat işte bu kadar basit. Bir kaç satır kodla tarayıcıdaki resimi sürükleyebiliyorsunuz. Kodda dikkat etmeniz

Musa ÇAVUŞ 366

gereken, CSS dosyasını, JavaScript dosyasını ve jQuery dosyasını kod içerisinde yerini belirtmenizdir. CSS için <link> tagını kullandık, unuttuysanız CSS için kısa bir giriş yapmıştım orada bulabilirsiniz. JavaScript dosyalarını da nasıl bağlanacağını her örnekte görmüşünüzdür.<img> tagına bir id verdim ve adını draggable koydum. Sonra jQuery bölümünde <img> tagına draggable() metodunu bağladım ve hoptirinanay sizin resminiz sürüklenme özelliği kazanmış oldu. Benim tavsiyem resmi sürüklerken Firebug ile bir bakın HTML tarafında neler oluyor. Beyin hücreleriniz konuyu daha iyi anlayacaktır. 19.3 Çeşitli jQuery UI elementleri Normalde fazladan bilgiye ihtiyacınız yok. Sayfaya girin ve oradan istediğiniz Widget’e bakın sonra kodu indirin ve oradaki örnekte olduğu gibi kendi sisteminizde kullanın. Dedim ki biraz daha jQuery UI’den örnek vereyim ki heyecan dorukta olsun. Şimdi tekrar http://jqueryui.com/download adresine girin ve Theme yazın bölümün altındaki yerden UI darkness seçerek download yapın. Bu özellik sayesinde indirdiğiniz jQuery UI, UI darkness efekt özelliği gösterecektir. Hemen ilk örneğimiz olan takvim örneğinde bunu bir göstereyim. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/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-ui-1.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 seçtiğim için bu efekti içeren bir takvim görmüş oluyorum. Seçenek bölümünde bir sürü seçebileceğiniz efektler var, değişik deneyler yapabilirsiniz. Takvimide nasıl oluşturduğumu anlamışınızdır umarım, çünkü sadece tek bir metot olan datepicker() metodunu kullandım. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/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-ui-1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#i1").accordion();

Musa ÇAVUŞ 368

}); </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 başka bir örnek. Örneği çalıştırın ve ne kadar etkili bir Widget olduğunu görün. Tek bir metot olan accordion() metodu il id’sine sahip <div> tagına bağlayarak bu efekti gerçekleştirmiş oldum. accordion() metodunu daha çok kullanmak istiyorum diyorsanız http://jqueryui.com/demos/accordion linkine girin. Kullanabileceğiniz parametreler, renkler ve biçimleri orada bulabilirsiniz. Tek tek anlatmama gerek yok zaten orada her şey var.Ben size sadece bu işin temelini ve mantığını öğretmeye çalışıyorum. Şimdi size biraz daha fazla bir şey göstereceğim. Hem Tab kullanabileceksiniz hemde kullandığınız tab elementinin boyutunu değiştirebileceksiniz. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/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-ui-1.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 ücüncü bolumum</p> </div> </div>

Musa ÇAVUŞ 370

</body> </html> tabs.html

Şekil209 Görüldüğü gibi efektleri noktalar sayesinde ard ardına ekleyebiliyoruz. tabs() metodundan sonra resizable() metodunu nokta kullanarak istediğimiz sonuca ulaştık. Zincirlemede yapabiliyoruz gördüğünüz gibi. 19.4 jQuery UI değerlerini elde edebilme Bazı durumlarda jQuery UI elementlerinin aralarında iletişim sağlamak isteyebiliriz. Örneğin bir araç çubuğu sağa sola çekilirken bir Dialog kutusunun boyutunun değişmesini isteyebiliriz. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/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-ui-1.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">

Musa ÇAVUŞ 372

</div> <div id="i1"> Web sayfami ziyaret edebilirsiniz... <a href="http://www.musa-cavus.com">tikla</a> </div> </body> </html> slider.html

Şekil210 Araç çubuğunu oluşturmak çok kolay slider() metodunu kullanınca <div> tagını kaydırma özelliği vermiş oluyrsunuz. Bir değer alabilmek için slider() metodunu iki parametreli olarak kullanıyorsunuz ve ilik parametreye option yazarken ikinci parametreye value yazıyorsunuz. Bunu dokümanlarda da görebilirsiniz ve sadece slider() metodu için geçerli değildir, bir çok jQuery UI elementleri içinde geçerlidir. Đlk parametre option, ikinci parametre value ve son parametreye de bir değer verirseniz araç çubuğunun genişliğini belirtmiş oluyorsunuz. Şimdi $("#s2").slider kısmına iyi bakın orada slide: diye bir kısım var. Bu şekilde bir Event oluşturuyoruz ve bu Event çubukta her kaydırma yapılınca

Musa ÇAVUŞ 373

çağrılmaktadır.Araç çubuğunun yatay ya da dikey olmasını orientation seçeneğinden ayarlayabilirsiniz. Genişlik, ilk değer gibi değerleri de değiştirme imkanınız var ki bunları lütfen dokümana bakarak uygulayın ve değişiklilk yapıın ki örnekler beyninize daha iyi yerleşsin. 19.5 Efektler http://jqueryui.com/docs/Effects/Methods adresine girerseniz efektlerle ilgili süper bir dokümentasyon göreceksiniz. Ben hepsini göstermeyeceğim efektlere bir giriş niteliğinde giriş yapacağım. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/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-ui-1.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;

Musa ÇAVUŞ 374

}); $("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 düğmesine basınca resmi patlatıyor gibi bir efekt uygulamış oldum. Bu patlama şu kodla gerçekleşiyor: $("#i1").effect('explode',opt,1500,temizle). Zaten efektlerle effect() metodu ilgileniyor, parametrede yapacağımız değişikliğe görede efekt değişiklikleri elde ediyoruz. Birinci parametre efektin kendisi, ikinci parametre seçenekler, üçüncü parametre efektin hızı ve son parametre Callback fonksiyonudur. Örnekte bir kaç efekt kullandım. temizle Callback fonksiyonuda belli bir süre sonra resmi eski haline getirmektedir. Bu bölümü fazla uzatmıyorum, çünkü çok kolay. Yapmanız gereken sadece jQuery UI sayfasındaki örnekleri incelemek ve uygulamak.

Musa ÇAVUŞ 376

Bölüm 20 Plugins

Musa ÇAVUŞ 377

20.1 Temel bilgiler Çekirdek olarak jQuery ve jQuery UI’yi gördük. Bu iki Framewörk geliştirileibilir özelliklere sahiptirler ki bunlara Plugins denilmektedir. http://plugins.jquery.com/

Şekil212 Plugins, JavaScript kütüphanesinden oluşmuşturlar. Şu an yeterli derecede Plugins vardır ve aklınıza gelebilecek her türlü konu için mutlaka bir Plugin bulabilirsiniz. Nerede bulurum bunu diye sorarsanız, yukarıda linkini verdim. O linke girerseniz sadece aramayı bileceksiniz ve istediğiniz Plugin sizin olabilir. Aynı zamanda sizde bir Plugin yazarsanız bu sayfaya koyabilirsiniz. Bu bölümde sizlere Plugin nasıl yazılır, sayfadaki Plugin’ler nasıl kullanılır ve kendi yazdığınız Plugin’i jQuery Plugin sayfasına nasıl koyabilirsiniz onu göstereceğim. 20.2 Plugin kullanmak Bir Plugin’e ihtiyaç duydunuz ve jQuery’nin bize sunduğu Plugin sayfasından bu Plugin’i kullanmak istiyorsunuz.

Musa ÇAVUŞ 378

http://plugings.jquery.com/ adresine girdiğinizde sol tarafta Browse Plugin bölümünde anahtar kelimeleri göreceksiniz. Data anahtar kelimesinin üzerine bir tıklayın.

Şekil213 Data anahtar kelimesinin geçtiği tüm bölümler sıralanmış oldu. Tarayıcınızdan geri düğmesine tıklayın ve sağ taraftaki Projects Types bölümünden Drag-and-Drop linkini tıklayın:

Şekil214

Musa ÇAVUŞ 379

Yine burada da seçilen projeye göre bölümleri görmüş oluyorsunuz. Aynı şekilde aramada yapabilirsiniz. Ben sol üst bölümdeki Search bölümünden TreeVıew arattırdım ve ilk TreeView örneğine tıkladım:

Şekil215 Bu Plugin’i yukarıdaki gördüğünüz sayfadan indirebilirsiniz, web sayfasına girebilirsiniz. Plugin’in ne kadar oy aldığını görebilirsiniz ve ona göre kafanızda bir resim çizebilirsiniz. Mesela dersiniz bu amca benim için yeterli bir Plugin geliştirmemiş ben başka amcaya bakayım. Try out a demonstration linkine tıklayarak kullanmak istediğiniz Plugin hakkında görsel bir görünüm örneği görmüş oluyorsunuz:

Musa ÇAVUŞ 380

Şekil216 Plugin’in dokümanı iyi değilse ya da yoksa listelemede sonlara doğru yer alır. Tabi Plugin’in çalışabilirliği de listelemede çok önemlidir. Dokümansız Plugin genelde hiçbir işe yaramaz, çünkü doküman olmadan Plugin’in nasıl çalıştığını ve ne işe yaradığını nereden bileceksiniz. TreeView’in dokümanı çok güzel yapılmış, aynı jQuery’deki gençlerin uygulamış olduğu metodu izlemiş. Bakmakta yarar var. Şimdi TreeView Plugin’ini bir bilgisayarınıza indirin. Homepage linkini tıklayarak bu indirmeyi oradaki Download linkine tıklayarak gerçekleştirebilirsiniz. Đndirdiğiniz dosyayı örnekleri uyguladığınız dizine açın. Dokümanı inceledim ve şöyle bir kod yazdım: <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 bakarsanız üç ekleme yaptım. Birincisi CSS eklemesi, ikincisi bizim jQuery dosyasını ekledim ve üçüncü olarak TreeView JavaScript’ini ekledim.

Musa ÇAVUŞ 382

treeview kullanımı bu Plugin’ini yazan kişiye bağlıdır. Bende dokümandaki örneğe bakarak ve orada yazılan çizilenlere bakarak kendi kodumda kullandım. 20.3 Plugin oluşturmak Başkasının Plugin’lerini kullanarak bir parazit terliksisi gibi yaşamak istemiyorsunuzdur. O yüzden size kendi Plugin’inizi nasıl oluşturacağınızı göstereceğim. Kendin pişir kendin ye. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/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-ui-1.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 alıcı noktası jquery.dragwithstatuslight.js dosyasındadır. Plugin yazıyorsanız mutlaka bu dosyada kullanacağınız metot jQuery.fn ile başlamalıdır. Ayrıca metodun bulunduğu dosya ayrı bir JavaScript dosyası olmalıdır ki Plugin’i kullanacak kişi Plugin’i kendi koduna bağlayabilsin. Bu JavaScript dosyasıda mutlaka jquery ile başlamalı ve kendine özgü isim ile devam etmelidir. Bizim örneğimizde jquery.dragwithstatuslight.js şeklinde olmuştur. Oluşturduğum örnekte draggable() metodunu kullandım. Sürüklemek istediğim nesneye bir çerçeve konmasını istedim. Fareninde sürükleme aşamasında, sürükleme şeklini almasıda gerekiyordu. Yine sürüklenen nesnenin sürüklenme anında renginin açmasını ayarladım. Kendi kodumuzda tüm bağlamaları yaptıktan sonra dragwithstatuslight() metodunu diğer metotlar gibi çok kolay kullanabiliriz. Örnekte $("img").dragwithstatuslight(); şeklinde bir kullanımla yazdığım Plugin’deki metodu kullanmış oldum.

Musa ÇAVUŞ 384

20.4 Plugin’i yayınlamak Süper zekânızı çalıştırdınız ve bir Plugin yazdınız. Bunu da dünya bilsin istiyorsunuz. En iyi yöntem jQuery’nin sayasından bunu yapmanızdır ki buna jQuery fırsat tanımaktadır. jQuery’nin Plugin sayfasına giriyorsunuz ve sol taraftaki User login bölümünden Login/Register linkini tıklıyorsunuz. Karşınıza çıkan pencereden Create a new account, yani usta beni de sayfana üye yap diyorsunuz. Kayıt işlemlerinden sonra kullanıcı adı ve şifrenizi girerek sol tarafta Add Plugin linkini tıklayın. Karşınıza bir form çıkacaktır onu doldurun ve Submit düşmesine basın. Bastıysanız dünya sizin yazdığınız Plugin’e ulaşabilecektir. Form’a bilgiler girebilmek için daha önce yazılmış Plugin’leri örnek alın ki zorlanmayın. Ve mutlu son. Şimdi uzman bir jQuery programcısı konumundasınız. Bu kitapla başta jQuery olmak üzere JavaScript, Ajax, CSS, HTML, DHTML, XHTML gibi teknolojilere hakim konuma gelmiş oldunuz. Bir iş başvurusunda bu teknolojilerden birini görürseniz hemen başvurun, çünkü siz bunları biliyorsunuz. Umarım sizlere çok katkıda bulunmuşumdur, bulunamadıysam suç sizde kitabı iyi okuyarak uygulamamışsınızdır. Hadi beni fazla yormayın, zaten bu kitabı yazarak çok yoruldum. Ne diyeyim çokta zevkliydi yazmak.

kendĐnĐze gÜvenerek jquery - tuncaycalhan.org · değindim ve son olarak jquery konusuna geçiş...

Documents