jQuery

Kendinize Güvenerek
jQuery

Bilgisayar Mühendisi
Musa ÇAVUŞ

KENDĐNĐZE GÜVENEREK

jQuery

4
Musa ÇAVUŞ

Almanya, 2010

Kendinize Güvenerek jQuery

Musa ÇAVUŞ

Bedava Dağıtım:

Kasım - 2010

© Musa Çavuş

6
Musa ÇAVUŞ

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: jquery@musa-cavus.com

8
Musa ÇAVUŞ

Ö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

10
Musa ÇAVUŞ

Bölüm 1
JavaScript’e giriş

11
Musa ÇAVUŞ

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

12
Musa ÇAVUŞ

Ş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ı:

13
Musa ÇAVUŞ

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

14
Musa ÇAVUŞ

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

15
Musa ÇAVUŞ

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

16
Musa ÇAVUŞ

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

17
Musa ÇAVUŞ

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>
hosgeldin();
</script>
</body>
</html>
kutuphaneKullanimi.html

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

benimFonksiyonlarim.js

18
Musa ÇAVUŞ

Şekil5

benimFonksiyonlarim.js dosyası ile kutuphaneKullanimi.html dosyası aynı
dizinde 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ı

19
Musa ÇAVUŞ

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

20
Musa ÇAVUŞ

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.

21
Musa ÇAVUŞ

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.

22
Musa ÇAVUŞ

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

23
Musa ÇAVUŞ

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

24
Musa ÇAVUŞ

Ş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

25
Musa ÇAVUŞ

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

26
Musa ÇAVUŞ

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

27
Musa ÇAVUŞ

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

28
Musa ÇAVUŞ

<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

29
Musa ÇAVUŞ

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

30
Musa ÇAVUŞ

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

31
Musa ÇAVUŞ

<head>
<title>
</title>
</head>
<body>
<table border="1">
<tr>
<td>1. Satir, 1. Sutun</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
tablo.html

Şekil10

32
Musa ÇAVUŞ

Đ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

33
Musa ÇAVUŞ

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

34
Musa ÇAVUŞ

<html>
<head>
<title>Basit bir HTML sayfasi</title>
</head>
<body>
<h1 align=center>Web Sayfasina Hosgeldiniz</h1>
</body>
</html>
htmlsayfa.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basit bir XHTML sayfasi</title>
</head>
<body>
<h1 align="center">Web Sayfasina Hosgeldiniz</h1>
</body>
</html>
xhtmlsayfa.xhtml

Şekil12

35
Musa ÇAVUŞ

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

36
Musa ÇAVUŞ

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

37
Musa ÇAVUŞ

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

38
Musa ÇAVUŞ

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

39
Musa ÇAVUŞ

Şekil16

Çıkan pencerede arama kısmına “Web Developer” yazın ve Firefox
uygulamasına ekleyin düğmesini tıklayın.

Şekil17

40
Musa ÇAVUŞ

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>

41
Musa ÇAVUŞ

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

42
Musa ÇAVUŞ

<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

43
Musa ÇAVUŞ

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;

44
Musa ÇAVUŞ

}
-->
</style>
<body>
<h1>Ates bacayi sarmis</h1>
<h1 class="a">Baca atesi sarmis mi?</h1>
<span class="b" id="b">Bu</span> <span class="b">da</span>
<i class="b">gecer</i>.
<span id="b">Burada Span kullaniliyor</span>
<a href="http://www.google.com">Tikla</a>
</body>
</html>
css3.html

Şekil21

CSS kullanarak daha önceki web sayfamızın birden nasıl canlılık kazandığını
Şekil21’de görüyorsunuz. css3.html dosyasındaki CSS bilgisini anlarsanız,

45
Musa ÇAVUŞ

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.

46
Musa ÇAVUŞ

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

47
Musa ÇAVUŞ

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

48
Musa ÇAVUŞ

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

49
Musa ÇAVUŞ

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

50
Musa ÇAVUŞ

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.

51
Musa ÇAVUŞ

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

52
Musa ÇAVUŞ

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

53
Musa ÇAVUŞ

Bölüm 3
JavaScript Kullanımı

54
Musa ÇAVUŞ

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ı

55
Musa ÇAVUŞ

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”

56
Musa ÇAVUŞ

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

57
Musa ÇAVUŞ

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

58
Musa ÇAVUŞ

Ş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ı.

59
Musa ÇAVUŞ

<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

60
Musa ÇAVUŞ

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

61
Musa ÇAVUŞ

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>
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");
}

if (abla < abi) {
document.write("Ablam, abime abi diyecek");
}

if (ben == 15) {
document.write("Ben en ufagim");
}

if (ben != 18) {
document.write("Ben araba suremem");
}

62
Musa ÇAVUŞ

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

63
Musa ÇAVUŞ

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

64
Musa ÇAVUŞ

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>
i = 340;
j = 10;
document.write(++i);
document.write(++j);
document.write(i);
document.write(j);
document.write(i+j);
document.write(i---++j);
</script>
</body>
</html>

operatorler2.html

65
Musa ÇAVUŞ

Ş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(true & false);

document.write(!false);

document.write(true ^ false);

document.write(1 | 3);
</script>

66
Musa ÇAVUŞ

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

67
Musa ÇAVUŞ

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

68
Musa ÇAVUŞ

<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

69
Musa ÇAVUŞ

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

70
Musa ÇAVUŞ

Ş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

71
Musa ÇAVUŞ

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

72
Musa ÇAVUŞ

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>
a = "Veli";
switch (a) {
case "Ali" : document.write("Ali" + "<br>");
break;
case "Veli" : document.write("Veli" + "<br>");
break;

73
Musa ÇAVUŞ

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>
i = 0;
while(i < 10) {
document.write(i + "<br>");
i++;
}

74
Musa ÇAVUŞ

</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>
i = 50;
do {
document.write(i + "<br>");
i++;
}

75
Musa ÇAVUŞ

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>
for (i = 1; i <= 10; i++)
document.write("Sayi: " + i + "<br>");
</script>
</body>
</html>
for.html

76
Musa ÇAVUŞ

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

77
Musa ÇAVUŞ

Ş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>
firma = new Array();
firma[0] = "Teneke Fabrikasi<br />";
firma[1] = "Kaporta sokaka 32<br />";
firma[2] = "42123 Konya<br />";
firma[3] = "Telefon: 0332393202322";
for(i in firma){
document.write(firma[i]);
}
</script>
</body>
</html>
fordiziozel.html

78
Musa ÇAVUŞ

Şekil45

i 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>
i = 10;
while (true) {
if (i < 0) {
break;
}
document.write(i+"<br>");
i--;
}
</script>
</body>
</html>
break.html

79
Musa ÇAVUŞ

Ş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>
for (i = 0; i <= 10; i++) {
if ((i % 2) == 1)
continue;
document.write(i + " sayisi cift "+
"sayidir" +"<br>");
}
</script>
</body>
</html>
continue.html

80
Musa ÇAVUŞ

Şekil47

Bu 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>
function test() {
document.write("Selam ne haber");
}
test();
</script>
</body>
</html>
fonksiyon.html

81
Musa ÇAVUŞ

Ş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>
function topla(a, b) {
document.write(a+" ve "+b+" sayisinin toplami :"+(a+b));
}
topla(5,6);
</script>
</body>
</html>
fonkparametre.html

82
Musa ÇAVUŞ

Şekil49

a ve b 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>
function topla(a, b) {
document.write(a+" ve "+b+" sayisinin toplami :"+(a+b));
}

function topla(a, b, c) {
document.write(a+", "+b+" ve "+c+" sayilarinin toplami :"+(a+b+c));
}
topla(5,6,9);
topla(7,16,29);
</script>
</body>
</html>
fonkparametre1.html

83
Musa ÇAVUŞ

Ş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>
a = 10;
function deger(a) {
document.write("a degiskeninin fonksiyon icindeki degeri: " + a + "<br>");
}
document.write("a degiskeninin fonksiyon oncesi degeri: " + a + "<br>");
deger(2);
document.write("a degiskeninin fonksiyon sonrasi degeri: " + a + "<br>");
</script>
</body>
</html>
fonkgeneldegisken.html

84
Musa ÇAVUŞ

Şekil51

Fonksiyondaki a 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>
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.

85
Musa ÇAVUŞ

Kendini çağıran fonksiyon

JavaScript kendini çağıran fonksiyon mantığını desteklemektedir.

<html>
<body>
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.

86
Musa ÇAVUŞ

Bu yöntemin kafanızda daha iyi yer edinebilmesi için bir önceki örnekte ufak
bir değişiklik yaptım:

<html>
<body>
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");
}
islem(100);
</script>
</body>
</html>
fkendinicagir.html

Şekil54

87
Musa ÇAVUŞ

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

88
Musa ÇAVUŞ

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

89
Musa ÇAVUŞ

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

90
Musa ÇAVUŞ

onBlur="pasif()">
<br>
Sifre:
<input type="password" name="pw"
onFocus="aktif('Sifrenizi girin')"
onBlur="pasif()">
</form>
<div id="bilgi"></div>
</body>
</html>
focus.html

Şekil57

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

91
Musa ÇAVUŞ

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.

92
Musa ÇAVUŞ

Bölüm 4
Hata bulma ve ayıklama

93
Musa ÇAVUŞ

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

94
Musa ÇAVUŞ

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.

95
Musa ÇAVUŞ

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.

96
Musa ÇAVUŞ

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.

97
Musa ÇAVUŞ

Şekil62

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

Şekil63

98
Musa ÇAVUŞ

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:

99
Musa ÇAVUŞ

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

100
Musa ÇAVUŞ

Ş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

101
Musa ÇAVUŞ

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

102
Musa ÇAVUŞ

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

103
Musa ÇAVUŞ

Şekil71

“Continuing from breakpoint mesajı” gelecektir. Tekrar Step Over düğmesine
basın:

104
Musa ÇAVUŞ

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

105
Musa ÇAVUŞ

Bölüm 5

Nesneler, Sınıflar ve Metotlar

106
Musa ÇAVUŞ

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

107
Musa ÇAVUŞ

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

108
Musa ÇAVUŞ

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

109
Musa ÇAVUŞ

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

110
Musa ÇAVUŞ

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

111
Musa ÇAVUŞ

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

112
Musa ÇAVUŞ

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;

113
Musa ÇAVUŞ

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

114
Musa ÇAVUŞ

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

115
Musa ÇAVUŞ

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

116
Musa ÇAVUŞ

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

117
Musa ÇAVUŞ

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

118
Musa ÇAVUŞ

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

119
Musa ÇAVUŞ

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

120
Musa ÇAVUŞ

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

121
Musa ÇAVUŞ

function resimYukle() {
// document.forms[0].elements[0].value = "Oylesine bir yazi";
document.getElementsByName("f1")[0].elements[0].value = "Oylesine bir
yazi";
// document.f1.elements[0].value = "Oylesine bir yazi";
document.getElementById("h").innerHTML="Yeliz";
document.getElementsByTagName("h1")[1].innerHTML = "Resim degisti";
window.document.images[0].src = "yeliz.jpg";

}
</script>
<body>
<h1 id="h">Ecrin</h1>
<form name="f1">
<input>
</form>
<h1>Resim</h1>
<img src="ecrin.jpg" width="400" onclick="resimYukle()">
</body>
</html>
dom1.html

122
Musa ÇAVUŞ

Şekil83

Şekil84

123
Musa ÇAVUŞ

Ş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

124
Musa ÇAVUŞ

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

125
Musa ÇAVUŞ

}
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

126
Musa ÇAVUŞ

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

127
Musa ÇAVUŞ

<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

128
Musa ÇAVUŞ

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

129
Musa ÇAVUŞ

Ş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

130
Musa ÇAVUŞ

Ş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

131
Musa ÇAVUŞ

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>

132
Musa ÇAVUŞ

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (
name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape (value) +
((expires)
? "; expires=" + expires.toGMTString()
: "") +
((path)
? "; path=" + path
: "") +
((domain)
? "; domain=" + domain
: "") +
((secure)
? "; secure"
: "");
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(
document.cookie.substring(offset, endstr));
}

133
Musa ÇAVUŞ

function cookieYaz() {
gecerliTarih = new Date(2010, 6, 12, 1, 0, 0);
document.cookie = SetCookie(
"user", document.mF.id.value, gecerliTarih);
document.cookie = SetCookie(
"pw", document.mF.pw.value, gecerliTarih);
}
function cookieOku() {
deger = GetCookie("user");
if(deger != null)
document.mF.id.value=deger;
deger = GetCookie("pw");
if(deger != null)
document.mF.pw.value=deger;
}
</script>
<body onLoad="cookieOku()">
<form name="mF" onSubmit="cookieYaz()">
<table>
<tr>
<td>Kullanici Adi</td>
<td><input name="id"></td>
</tr>
<tr>
<td>Sifre</td>
<td><input name="pw" type="password"></td>
</tr>
<tr>
<td><input type="Submit" value="Ok"></td>
<td><input type="reset" value="Iptal"></td>
</tr>
</table>
</form>
</body>
</html>
cookie.html

134
Musa ÇAVUŞ

Şekil88

Ok 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

135
Musa ÇAVUŞ

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?");

136
Musa ÇAVUŞ

document.write(aile["ogul1"].ad + ": ");
aile["ogul1"].konus("Ben Cola icerbilir miyim?");
document.write(aile["baba"].ad + ": ");
aile["baba"].konus("Sen kac yasindasin?");
document.write(aile["baba1"].ad + ": ");
</script>
</body>
</html>
nesneolusumu1.html

Şekil89

Kurucu metotlar, 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.

137
Musa ÇAVUŞ

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>

138
Musa ÇAVUŞ

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.

139
Musa ÇAVUŞ

Bölüm 6
Đstisnalar ve Event kullanımı

140
Musa ÇAVUŞ

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

141
Musa ÇAVUŞ

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

142
Musa ÇAVUŞ

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

143
Musa ÇAVUŞ

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

144
Musa ÇAVUŞ

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>

145
Musa ÇAVUŞ

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

146
Musa ÇAVUŞ

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

147
Musa ÇAVUŞ

Bölüm 7
AJAX

148
Musa ÇAVUŞ

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>

149
Musa ÇAVUŞ

</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");

150
Musa ÇAVUŞ

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

151
Musa ÇAVUŞ

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.

152
Musa ÇAVUŞ

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;

153
Musa ÇAVUŞ

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

154
Musa ÇAVUŞ

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:

155
Musa ÇAVUŞ

Şekil100

Kurulan dizinde xampp-control.exe dosyasını çalıştırın.

156
Musa ÇAVUŞ

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

157
Musa ÇAVUŞ

Şekil102

Tarayıcıyla web server aynı makinede çalışıyorsa, tarayıcınızın adres kısmına
http://localhost yazın.

158
Musa ÇAVUŞ

Ş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

159
Musa ÇAVUŞ

Ş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()" />

160
Musa ÇAVUŞ

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

161
Musa ÇAVUŞ

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

162
Musa ÇAVUŞ

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

163
Musa ÇAVUŞ

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

164
Musa ÇAVUŞ

<title>login</title>
<script language="JavaScript" src="login.js"></script>
</head>
<body>
<form name="f">
<input type="text" name="kullaniciadi"> <br />
<input type="password" name="sifre"><br />
<p><input type="button" value="Tamam" onclick="yolla()"/></p>
</form>
<div id="sc"></div>
</body>
</html>
login.html

var resNesne;
}
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

165
Musa ÇAVUŞ

Ş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

166
Musa ÇAVUŞ

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;

167
Musa ÇAVUŞ

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

168
Musa ÇAVUŞ

Bölüm 8

HTTP ve XMLHttpRequest

169
Musa ÇAVUŞ

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

170
Musa ÇAVUŞ

h1{
font-size:24px;
text-align:center;
}
h2{
font-size:20px;
}
h3{
font-size:18px;
}
h4{
font-size:16px;
}
#cevap{
position:absolute;
top:80px;
left:250px;
width:550px;
height:320px;
border:solid;
border-width:1pt;
text-align:justify;
background:blue;
color:white;
}
httprequest.css

font-size yazı tipinin 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){

171
Musa ÇAVUŞ

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 +

172
Musa ÇAVUŞ

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

173
Musa ÇAVUŞ

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

174
Musa ÇAVUŞ

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.

175
Musa ÇAVUŞ

Bölim 9

DHTML ve AJAX

176
Musa ÇAVUŞ

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

177
Musa ÇAVUŞ

olay.js

body {
background:#dd11dd;
font-size:12px;
font-family:"Times New Roman";
color:#44aa00;
}
h1{
font-size:21px;
text-align:center;
}
h2{
font-size:17px;
}
h3{
font-size:15px;
}
h4{
font-size:13px;
}
#cevap{
position:absolute;
top:50px;
left:50px;
}
#resim1{
position:absolute;
top:50px;
left:650px;
background:yellow;
width:200px;
height:50px;
border:solid;
border-width:1pt;
text-align:center;
font-size:32px;

178
Musa ÇAVUŞ

}
#resim2{
position:absolute;
top:115px;
left:650px;
background:green;
width:200px;
height:50px;
border:solid;
border-width:1pt;
text-align:center;
font-size:32px;
}
dhtml.css

olay.js 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;
}

179
Musa ÇAVUŞ

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

180
Musa ÇAVUŞ

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

181
Musa ÇAVUŞ

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.

182
Musa ÇAVUŞ

Ş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

183
Musa ÇAVUŞ

visibility parametresine hidden değeri vererek bu selektörün gösterdiği taglar
görünmez olmaktadır.

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

184
Musa ÇAVUŞ

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>
#bilgi {
color : white;
border : solid;
}
#P1 {

185
Musa ÇAVUŞ

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;

186
Musa ÇAVUŞ

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

187
Musa ÇAVUŞ

Bölüm 10
AJAX ve XML

188
Musa ÇAVUŞ

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

189
Musa ÇAVUŞ

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

190
Musa ÇAVUŞ

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>

191
Musa ÇAVUŞ

<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

192
Musa ÇAVUŞ

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

193
Musa ÇAVUŞ

</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>
</body>
</html>
xml.html

<db>
<ds>
<ad>Mustafa</ad>
<soyad>Ozturk</soyad>
<numara>1234</numara>
</ds>
<ds>
<ad>Hayri</ad>
<soyad>Unal</soyad>
</ds>
</db>
ad.xml

194
Musa ÇAVUŞ

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?

try {
}
catch(Error){
try {
}
catch(Error){
try {
}
catch(Error){
alert("XMLHttpRequest Nesnesi olusturulamadi");
}
}
}
return resNesne;
}
function sndReq() {
resNesne.open('get', 'ad.xml',true);
}
document.getElementById("cevap").innerHTML =

resNesne.responseXML.getElementsByTagName("ad")[1].firstChild.
data;
}
}
resNesne = olsXMLHttpRequestObject();
xml.js

195
Musa ÇAVUŞ

Ş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>
</body>
</html>
ad.html

db {
background-color : green;
}
ds {

196
Musa ÇAVUŞ

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-stylesheet href="ad.css" type="text/css" ?>
<db>
<ds>
<ad>Mustafa</ad>
<soyad>Ozturk</soyad>
</ds>
<ds>
<ad>Hayri</ad>
<soyad>Unal</soyad>
</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.

try {
}
catch(Error){
try {

197
Musa ÇAVUŞ

}
catch(Error){
try {
}
catch(Error){
alert("XMLHttpRequest Nesnesi olusturulamadi");
}
}
}
return resNesne;
}
function sndReq() {
resNesne.open('get', 'ad.xml',true);
}
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.

198
Musa ÇAVUŞ

Şekil115

199
Musa ÇAVUŞ

Bölüm 11
jQuery ve jQuery UI

200
Musa ÇAVUŞ

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:

201
Musa ÇAVUŞ

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

202
Musa ÇAVUŞ

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

203
Musa ÇAVUŞ

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

204
Musa ÇAVUŞ

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

205
Musa ÇAVUŞ

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

206
Musa ÇAVUŞ

<html>
<head>
<script src="jquery-1.4.2.js">
</script>
$(document).ready(function(){
$("#b1").click(function(){
alert('Merhaba');
});

alert('Tesekkurler');
});
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

207
Musa ÇAVUŞ

Ş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>
.cssSinif {
background: green;
font-size: 37px;
}
</style>
$("#a").click(function(event){
$("#e").addClass("cssSinif");

});
$("#b").click(function(event){
$("#e").removeClass("cssSinif");
});

208
Musa ÇAVUŞ

$("#c").click(function(event){
$("#e").hide("slow");
});
$("#d").click(function(event){
$("#e").show("fast");
});
});
</script>
</head>
<body>
<h1>jQuery ile Web Sayfasi</h1>
<button id="a">
CSS-Sinifi ekle
</button>
<button id="b">
CSS-Sinifi kaldir
</button>
<button id="c">
Gizle
</button>
<button id="d">
Goster
</button>
<hr/>
<div id="e">
Bu dunya bizim kirletmeyelim
</div>
<hr/>
</body>
</html>
index.html

209
Musa ÇAVUŞ

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

210
Musa ÇAVUŞ

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

211
Musa ÇAVUŞ

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

212
Musa ÇAVUŞ

</script>
$("#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>
Toogle Yazi
</button>
<br/>
<img src="resim1.jpg" id="b1" />
<br/>
<h2 id="h2">Acayip birsey bu ya.</h2>
</body>
</html>
resimbuyultkucult.html

213
Musa ÇAVUŞ

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

214
Musa ÇAVUŞ

<head>
<title>Kusat</title>
</script>
$("#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

215
Musa ÇAVUŞ

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>
<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>
<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>
$("#toggle1").click(function(){
$("img").attr({

216
Musa ÇAVUŞ

src: "r1.jpg"
});
});
$("img").attr({
src: "r2.jpg"
});
});
$("img").attr({
width: "300"
});
});
$("img").attr({
width: "100"
});
});
});
</script>
</head>
<body>
Resim 1
</button>
Resim 2
</button>
Buyuk
</button>
Kucuk
</button>
<hr/><img/>
</body>
</html>
parametredegiskligi.html

217
Musa ÇAVUŞ

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

218
Musa ÇAVUŞ

<html>
<head>
<title>CSS</title>
</script>
$("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

219
Musa ÇAVUŞ

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

220
Musa ÇAVUŞ

Bölüm 12
jQuery Temel Bilgisi

221
Musa ÇAVUŞ

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>
var x = {
ad:"Perihan",
yas:12,
konus:function(){
alert("Zipla");
}

};
alert(x.yas);
x.konus();

</script>
</head>
<body>
<h1>Nesneleri blok halinde olusturma islemi</h1>
</body>
</html>
bloknesneolusumu.html

222
Musa ÇAVUŞ

Şekil127

{} parantezleriyle bir blok 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>
function Kisi(ad, yas){
this.ad = ad;
this.yas = yas;
};
var x = {

223
Musa ÇAVUŞ

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

224
Musa ÇAVUŞ

ç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>
function cikti(){
$("#cikti").html("fonksiyon cikti()");
}

// cikti();
$("#b1").click(cikti);
});
</script>
</head>
<body>
<h1>Fonksiyon cagirma</h1>
<button id="b1">
Tikla
</button>
<div id="cikti">
</div>
</body>
</html>
fonksiyon.html

225
Musa ÇAVUŞ

Ş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>
<title>Callback</title>
function benimFonksiyon(icerik){
$("#cikti").html(icerik);
}
function getText(metin){

226
Musa ÇAVUŞ

return function(){
benimFonksiyon(metin);
};
}
$("#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

227
Musa ÇAVUŞ

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>
<title>jQuery ile animasyon</title>
$("*").css({
background: "#ecaae2",
color: "#1e1e1e"
});
$("#resim1").css({
position: "absolute",
left: "20px",
top: "160px"
});
$("#resim2").css({
position: "absolute",
left: "450px",
top: "60px"
});
$("#resim1").animate({
left: '+=200px'
}, 2000);
top: '300px'
}, 600);
$("#resim1").slideUp("slow");
$("#resim1").slideDown("slow");

228
Musa ÇAVUŞ

left: '20px',
top: '160px'
}, 700);
});
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

229
Musa ÇAVUŞ

Ş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>
<title>queue() ve dequeue()</title>
$("*").css({
background: "#ab1b52",
color: "#1e1e1e"
});
$("#resim1").css({

230
Musa ÇAVUŞ

position:"absolute",
left:"20px",
top:"160px"
});
$("#resim2").css({
position:"absolute",
left:"450px",
top:"60px"
});
$("#resim1").queue(function(){
$(this).slideUp("slow");
$(this).slideDown("slow");

});
$(this).fadeOut("slow");
$(this).fadeIn("slow");

});

$(this).fadeOut("slow");
$(this).fadeIn("slow");

});

$("#resim1").dequeue();
});
$("#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

231
Musa ÇAVUŞ

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

232
Musa ÇAVUŞ

<html>
<head>
<title>Dizi olusumu</title>
</script>

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>

233
Musa ÇAVUŞ

<title>Dizi erisim</title>
</script>
var sayilar = new Array();
var sayicek = [1, 2, 3, 4, 5, 6, 7];
for (i = 0; i < 7; i++) {
sayilar[i] = Math.round(1 + Math.random() * 148);
}
for (i in sayilar) {
$("#cikti").append("Sayi " + sayicek[i] + ": ");
$("#cikti").append(sayilar[i] + "<br>");
}
});
</script>
</head>
<body>
<h1>Sayilar</h1>
<div id="cikti">
</div>
</body>
</html>
dizierisim.html

Şekil134

234
Musa ÇAVUŞ

Bu örnekte iki dizi 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>
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();
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>

235
Musa ÇAVUŞ

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

236
Musa ÇAVUŞ

Ş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>
<title>jQuery() ve $()</title>
$("#resim1").click(function(){
jQuery("#resim").fadeOut();

237
Musa ÇAVUŞ

});
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.

238
Musa ÇAVUŞ

Ş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>
<title>jQuery Context</title>
$("#cikti").html(jQuery("input:text", document.forms[0]).val());
});
$("#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

239
Musa ÇAVUŞ

Ş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>
<title>jQuery() ve $()</title>
var sayi = Math.random();
$("<tr><td>Sayi</td><td>" + sayi + "</td></tr>").appendTo("#t1");
});
});
</script>
</head>

240
Musa ÇAVUŞ

<body>
<h1>jQuery() ve $()</h1>
<table id="t1"/>
<button id="b1">
Tikla
</button>
</body>
</html>
jqueryelemanolustur.html

Şekil138

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.

241
Musa ÇAVUŞ

Ş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>
for (i = 0; i < $("img").length; i++) {
$("img").eq(i).css("left", 50 + (i * 200) + "px");

242
Musa ÇAVUŞ

$("img").eq(i).css("top", 50 + (i * 80) + "px");
}
});
</script>
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()

243
Musa ÇAVUŞ

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>
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>
img {
position: absolute;
}
</style>
</head>
<img src="kiristal.jpg" /><img src="krom.jpg" /><img src="kiristal.jpg"
/><img src="krom.jpg" />
</body>
</html>
get.html

244
Musa ÇAVUŞ

Şekil141

get() metoduyla resim 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>
$("img").css("width", "250px");
$("img").click(function(){
var index = $("img").index(this);
$("#cikti").text("belirtec " + index);
});
});
</script>
</head>

245
Musa ÇAVUŞ

<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>
$("button").click(function(e){

246
Musa ÇAVUŞ

var deger;
switch ($("button").index(this)) {
case 0:
deger = $("img").data("bilgi");
break;
case 1:
$("img").data("bilgi", "Bu bir deger");
deger = $("img").data("bilgi");
break;
case 2:
$("img").removeData("bilgi");
deger = undefined;
break;
}
$("span").text("" + deger);
});
});
</script>
</head>
<body>
<h1>Veri Kayiti</h1>
<img src="resim1.jpg"><hr/>
<button>
Metainfo ojlustur
</button>
<button>
Metainfo olustur ve deger ata
</button>
<button>
Metainfo sil
</button>
<h2>Metainfo degeri: <span></span>.</h2>
</body>
</html>

247
Musa ÇAVUŞ

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

248
Musa ÇAVUŞ

</script>
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>
var x;
function Adam(ad) {

249
Musa ÇAVUŞ

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

250
Musa ÇAVUŞ

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>
jQuery.extend({
sayi: function(){
return Math.random();
}
});
$("#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.

251
Musa ÇAVUŞ

Ş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>
jQuery.fn.extend({
mavi: function(){
return this.each(function(){
this.style.color = "blue";
});
},
kirmizi: function(){
this.style.color = "red";
});
},
yesil: function(){
this.style.color = "green";
});
}

252
Musa ÇAVUŞ

});

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

253
Musa ÇAVUŞ

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.

254
Musa ÇAVUŞ

Bölüm 13
Web sayfasında belirli yeleri seçebilme

255
Musa ÇAVUŞ

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>
$("*").css("color", "magenta");
$("#b1").css("border", "16px solid blue");
$("hr").css({
'background-color': 'grey',
'height': '7px',
'width': '400px'
});
$(".sinif").css("fontSize", "22px");
$(".sinif1.sinif2").css({
'background-color': 'yellow',
'color': 'red',
'fontSize': '30px'
});
$("div,p,h1").css("border", "3px solid gray");
});
</script>
</head>
<body>
<h1>Temel Selektor</h1>
<span class="sinif1">Bir Logo</span>
<img src="selektor.jpg" id="b1"/><hr/>
<div class="sinif2 sinif2">
Ne haber?
</div>
</body>

256
Musa ÇAVUŞ

</html>
selektorler.html

Şekil147

$(“*”) şeklindeki bir 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.

257
Musa ÇAVUŞ

<html>
<head>
<title>Duzen Selektor</title>
</script>
$("h1 div").css({
border: "1px magenta",
background: "blue",
color: "white",
textAlign: "center"
});
$("div span").css({
border: "2px green",
background: "yellow",
color: "white"
});
$("ul li").css("color", "blue");
$("p > img").css({
border: "2px solid yellow",
width: "100px"
});
$("label + input").css("border", "1px solid blue");
$("#id1 ~ div").css("background", "gray");
});
</script>
</head>
<body>
<h1>
<div>
Ankara
</div>
</h1>
<ul>
<li>
Konya
</li>
<li>
Danimarka
</li>
<li>
Sivas
</li>

258
Musa ÇAVUŞ

</ul>
<div>
<span>Belcika</span>
</div>
<ol>
<li>
Tahta
</li>
<li>
Ucak
</li>
<li>
Buraya tikla
</li>
</ol>
<form>
<label>
Name:
</label>
<input name="ad" />
<label>
Email:
</label>
<input name="email" /><input type="submit" />
</form>
<p>
<img src="selektor.jpg"/>
<div>
Logo
</div>
</p>
<span id="id1">Hadi ya</span>
<div>
Nerede
</div>
<div>
Gercekten mi
<div>
yaptin
</div>
</div>
<span>Burada</span>
<div>
oluyorum

259
Musa ÇAVUŞ

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

260
Musa ÇAVUŞ

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>
$(":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>

261
Musa ÇAVUŞ

<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

262
Musa ÇAVUŞ

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>
$("[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/>

263
Musa ÇAVUŞ

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

264
Musa ÇAVUŞ

<html>
<head>
</script>
$("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

265
Musa ÇAVUŞ

Ö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>
$("div:nth-child(2)").css({
background: 'red'
});
$("p:first-child").css({
color: 'magentha'
});
$("p:last-child").css({
color: 'blue'
});
});
</script>
</head>
<body>
<div>
1
<p>
2
<div>
3
</div>
</p>
4
<p>
5
</p>
6
</div>
</body>

266
Musa ÇAVUŞ

</html>
cocukfiltre.html

Şekil152

$("p:last-child") 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>

267
Musa ÇAVUŞ

</script>
$(":input").css({
border: '1px red solid'
});
$(":submit").css({
background: 'red'
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
Ad
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="submit" value="OK" />
</td>
</tr>
</table>
</form>
</body>
</html>
formfiltresi.html

268
Musa ÇAVUŞ

Şekil153

Form filtreler 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>
$("form :checkbox:first").parent().append('Bana iyi bak').css({
background: "yellow",
border: "1px red solid"
});
});
</script>
</head>
<body>
<h1>Filtreler</h1>
<form>

269
Musa ÇAVUŞ

<table width="500">
<tr>
<td>
</td>
<td>
<input type="checkbox" name="agb" />
</td>
<td>
</td>
<td>
<input type="checkbox" name="nl" />
</td>
</tr>
</table><i
</form>
</body>
</html>
formfiltresi2.html

Şekil154

270
Musa ÇAVUŞ

$("form :checkbox:first").parent().append('Bana iyi bak') ile checkbox
elementlerden ilk elemente 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>
$("div").not(".kapali, #sen").css("background", "red");
});
</script>
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>

271
Musa ÇAVUŞ

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

272
Musa ÇAVUŞ

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>
$("span").slice(2).css("color", "red");
$("span").slice(1,3).css("background", "cyan");
});
</script>
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

273
Musa ÇAVUŞ

Şekil155

filter() metodu

not() metodunun tam tersidir. filter() metodunda parametre olarak verilen
elementler seçilmektedir.

<html>
<head>
<title>slice filtresi</title>
</script>
$("span").filter("#evet").css("color", "blue");
});
</script>

274
Musa ÇAVUŞ

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

275
Musa ÇAVUŞ

Şekil156

is() filtresi

boolean özelliğinde bir metottur. true ya da false iletir.

<html>
<head>
<title>is filtresi</title>
</script>
$("button").click(function(){
if ($(this).is(":first-child")) {
alert("Ilk dugme");
}

276
Musa ÇAVUŞ

if ($(this).is(":last-child")) {
alert("Ikinci dugme");
}
});
});
</script>
</head>
<body>
<button>
Tikla
</button>
<button>
Tikla
</button>
</body>
</html>
is filtresi

Şekil157

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

277
Musa ÇAVUŞ

Bölüm 14
jQuery ile CSS

278
Musa ÇAVUŞ

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

279
Musa ÇAVUŞ

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>
<title>css() metodu</title>
$("*").css({
'backgroundColor': "yellow",
color: "gray"
});
$("button:first").click(function(){
$("#cikti").text($("h1:first").css("color"));
});
$("button:last").click(function(){
$("h1:first").css("color", "blue");
});
});
</script>
</head>
<body>
<h1>Hak yerde kalmaz</h1>
<h1>Bu da gecer gardas</h1>
<button>
Renk sorgula
</button>
<button>
Renk duzenle

280
Musa ÇAVUŞ

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

Şekil158

css("color") ile color 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ı

281
Musa ÇAVUŞ

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>
<title>addClass() ve removeClass()</title>
.mavi {
color: blue;
}
</style>
</head>
$("h1:first").addClass("mavi");
});
$("button:eq(1)").click(function(){
$("h1:first").removeClass("mavi");
});
});
</script>
</head>
<body>
<h1>Calisan demir paslanmaz</h1>
<button>
Sinif ekle
</button>
<button>
Sinif sil
</button>
</body>
</html>

282
Musa ÇAVUŞ

sinifeklecikar.html

Şekil159

Şekil159

283
Musa ÇAVUŞ

Ş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>
<title>hasclass metodu</title>
.mavi {
color: blue;
}
</style>

284
Musa ÇAVUŞ

</head>
$("h1").addClass("mavi");
});
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

285
Musa ÇAVUŞ

Ş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>
<title>toggleClass() metodu</title>
.mavi {
color: blue;
}
</style>
</head>

286
Musa ÇAVUŞ

$("h1").toggleClass("mavi");
});
});
</script>
</head>
<body>
<h1>Bedava sirke baldan tatlidir</h1>
<button>
Sinif ekle/sil
</button>
</body>
</html>
toggleclass.html

Şekil162

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

287
Musa ÇAVUŞ

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>
<title>position() metodu</title>
</head>
var position = $("h1:last").position();
$("#cikti").text("x: " + position.left + ", y: " + position.top);
});
});
</script>
</head>
<body>
<h1>Cok gezen cok bilir</h1>
<h1>Cok bilen cok yanilir</h1>
<button>
Ikinci atasozun poziyonu
</button>
<div id="cikti">
</div>
</body>
</html>
position.html

288
Musa ÇAVUŞ

Şekil163

offset() ve offsetParent() metotları

position() metoduyla bir elementin pozisyonunu bulabiliyoruz da ya parentin
pozisyonunu bulmak istiyorsak veyahut sayfaya göre elementin pozisyonunu
bulmak istiyorsak ne edecegız?

<html>
<head>
</script>
<title>offset() ve offsetParent()</title>
</head>
var offset = $("h1:first").offsetParent();

289
Musa ÇAVUŞ

$("#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>
</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

290
Musa ÇAVUŞ

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>
<title>scrollTop() ve scrollLeft()</title>
</head>
$("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>

291
Musa ÇAVUŞ

<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

292
Musa ÇAVUŞ

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>
<title>height() ve width()</title>
</head>
$("img").width(1000);
$("#cikti").text("Genislik: " + $("img").width());
});
$("img").height(100);
$("#cikti").text("Yukseklik: " + $("img").height());
});
});
</script>
</head>
<body>
<button>Genislik</button>
<button>Yukseklik</button>
<hr /><img src="birresim.jpg" />
</body>
</html>
genislikyukseklik.html

293
Musa ÇAVUŞ

Ş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>
<title>Ic ve dis boyut</title>
</head>

294
Musa ÇAVUŞ

$("div:first").css({
'width': '200px',
'height': '100px',
'margin': '30px',
'padding': '50px',
'border-style': 'solid',
'border-width': '5px'
});
$("#cikti").html("width: " + $("div:first").width() +
"<br>innerWidth: " +
$("div:first").innerWidth() +
"<br>outerWidth: " +
$("div:first").outerWidth() +
"<br>outerWidth(true): " +
$("div:first").outerWidth(true) +
"<br>height: " +
$("div:first").height() +
"<br>innerHeight: " +
$("div:first").innerHeight() +
"<br>outerHeight: " +
$("div:first").outerHeight() +
"<br>outerHeight(true): " +
$("div:first").outerHeight(true));
});
</script>
</head>
<body>
<div>
jQuery
</div>
<div id="cikti">
</div>
</body>
</html>
icdisboyut.html

innerWidth() iç 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.

295
Musa ÇAVUŞ

Şekil167

14.5 jQueryUI’nin ThemeRoller

296
Musa ÇAVUŞ

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:

297
Musa ÇAVUŞ

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

298
Musa ÇAVUŞ

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

299
Musa ÇAVUŞ

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

300
Musa ÇAVUŞ

Şekil172

Düzenle sekmesini seçin ve <li> tagı ile başlayan bölümü kodunuza kopyalayın.

<html>
<head>
</script>
<title>ThemeRoller</title>
<link href="css/ui-darkness/jquery-ui-1.8.4.custom.css" type="text/css"
rel="stylesheet">
</head>

});
</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>

301
Musa ÇAVUŞ

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

302
Musa ÇAVUŞ

Bölüm 15
Web sayfasında düğümler

303
Musa ÇAVUŞ

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" >
var str = $("p:first").html();
$("#cikti").append(str);
});
$("div:gt(0)").html(
"<i>Yagmur yagiyor</i>");
});
$("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></div><div></div><div></div>
</body>
</html>
htmltext.html

304
Musa ÇAVUŞ

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

305
Musa ÇAVUŞ

var str = $("input:first").val();
$("#cikti").append(str);
});
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>
</body>
</html>
val.html

Şekil175

306
Musa ÇAVUŞ

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>
$("#cikti").append(" - append() ile eklme yapildi");
});
$("#a").appendTo("#cikti");
});
$("#cikti").prepend(" - prepend() ile ekleme yapildi ");
});
$("#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

307
Musa ÇAVUŞ

Ş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>
$("#cikti").after('<span
style="color:white;background:red">Arkasina</span>');
});
$("#cikti").before('<span

308
Musa ÇAVUŞ

style="color:red;background:yellow">Onune</span>');
});
$('<span
style="color:blue;background:gray">Arkasina</span>').insertAfter('.k1');
});
$('<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

309
Musa ÇAVUŞ

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

310
Musa ÇAVUŞ

</script>
$("span").wrap("<h3>");
});
$("span").wrap($("<div />"));
});
$("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

311
Musa ÇAVUŞ

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

312
Musa ÇAVUŞ


$("h1:first").replaceWith(
"<h6>" + $("h1:first").text() + "</h6>");
});
$("<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

313
Musa ÇAVUŞ

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>
var element=null;
$("h1").empty();
});
element=$("h1").remove();
});
$("#ekle").after(element);
});
});
</script>
</head>
<body>
<h1><div>MNOPRS</div></h1>
<h1>TUVYZ</h1>
<h1>Bunu bilemeyen geveze</h1>
<button>empty()</button>
<button>remove()</button>
<button>after()</button>
<div id="ekle"></div>
</body>
</html>
bosalt.html

314
Musa ÇAVUŞ

Şekil180

empty() yazan 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>

315
Musa ÇAVUŞ

</script>
var element = null;
element = $("img:first").clone();
$("#i2").after(element);
});
element = $("img:first").clone(true);
});
});
</script>
</head>
<body>
<img src="birresim.jpg" width="100" id="resim"/>
<br/>
<button>
clone()
</button>
<button>
clone(true)
</button>
<div id=i2></div>
</body>
</html>
kopya.html

316
Musa ÇAVUŞ

Şekil181

Parametre olarak true 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>
var element=null;
$("span").css("height","100px");
element=$("div:first").children();

317
Musa ÇAVUŞ

$("#cikti").text("Cocuk elementlerin sayisi: "
+ element.length);
for(i=0;i < element.length;i+=2)
$("#i2").after(element[i]);
});
element=$("div:first").children("#i1");
$("#cikti").text("Cocuk elementlerin sayisi: "
+ element.length);
});
});
</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>
<hr id="i2">
</body>
</html>
cocuk.html

318
Musa ÇAVUŞ

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

319
Musa ÇAVUŞ

<html>
<head>
</script>
var element = null;
$("h1").css("font-size", "14px");
$("h1:eq(2)").css("background-color", "yellow");
$("#cikti1").text($("h1:eq(2)").next().text());
$("#cikti2").text($("h1:eq(2)").nextAll().text());
$("#cikti3").text($("h1:eq(2)").prev().text());
$("#cikti4").text($("h1:eq(2)").prevAll().text());
$("#cikti5").text($("h1:eq(2)").siblings().text());
});
</script>
</head>
<body>
<div>
<h1>Kardes1</h1>
<h1>Kardes2</h1>
<h1>Kardes3</h1>
<h1>Kardes4</h1>
<h1>Kardes5</h1>
<h1>Kardes6</h1>
<h1>Kardes7</h1>
<h1>Kardes8</h1>
</div>
<hr><h3>Akrabalik</h3>
<hr>
<table border="1">
<tr>
<td>
next()
</td>
<td id="cikti1">
</td>
</tr>
<tr>
<td>
nextAll()
</td>
<td id="cikti2">
</td>

320
Musa ÇAVUŞ

</tr>
<tr>
<td>
prev()
</td>
<td id="cikti3">
</td>
</tr>
<tr>
<td>
prevAll()
</td>
<td id="cikti4">
</td>
</tr>
<tr>
<td>
siblings()
</td>
<td id="cikti5">
</td>
</tr>
</table>
</body>
</html>
kardesler.html

321
Musa ÇAVUŞ

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

322
Musa ÇAVUŞ

Bölüm 16
jQuery ve Event

323
Musa ÇAVUŞ

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>
$(
function(){
$("h1:first").click(function(event){
$("#cikti").html(event.type);
});
}
);
</script>
</head>
<body>
<h1>Tikla beni</h1>
</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.

324
Musa ÇAVUŞ

Şekil184

jQuery’deki Event metotlarına genel bir bakış atmak istiyorsanız
http://api.jquery.com/category/events/ adresinde görebilirsiniz.

325
Musa ÇAVUŞ

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

326
Musa ÇAVUŞ

<title>Event-Objesi</title>
</script>
$("#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

327
Musa ÇAVUŞ

Ş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>
$("a").click(function(event){
event.preventDefault();
alert("Izin yok. " +
event.isDefaultPrevented());
});
});
</script>
</head>

328
Musa ÇAVUŞ

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

Şekil187

event.isDefaultPrevented()) ile de 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.

329
Musa ÇAVUŞ

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>
function info(event){
$("#cikti").html(event.data.text);
}
$("button:first").bind("click", function(){
$("img:first").bind("mouseover", {
text: "Bu bir resim"
}, info);
$("img:first").bind("mouseout", {
text: ""
}, info);
});
$("button:last").bind("click", function(){
$("img:first").unbind("mouseover");
$("img:first").unbind("mouseout");
});
});
</script>
</head>
<body>
<button>
bind()
</button>
<button>
unbind()
</button>
<hr/><img src="r1.jpg" />
<div id="cikti">
</div>
</body>
bindveunbind.html

330
Musa ÇAVUŞ

Şekil188

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

331
Musa ÇAVUŞ

<html>
<head>
<title>one</title>
</script>
function info(event){
$("#cikti").html(event.data.text);
}
$("img:first").one("mouseover", {
text: "Bir resim"
}, info);
$("img:first").one("mouseout", {
text: ""
}, info);
});
</script>
</head>
<body>
<img src="r1.jpg" />
<div id="cikti">
</div>
</body>
one.html

332
Musa ÇAVUŞ

Şekil189

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

333
Musa ÇAVUŞ

<head>
<title>tetikleyici</title>
</script>
$("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.

334
Musa ÇAVUŞ

Ş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>
$("div").css({
width: "80px",
height: "40px",
margin: "5px",

335
Musa ÇAVUŞ

float: "left",
background: "blue",
cursor: "pointer"
});
$("div").toggle(function(){
$(this).css({
"border": "5px inset",
"background": "red"
});
}, function(){
$(this).css({
"border": "10px outset",
"background": "yellow"
});
}, function(){
$(this).css({
"background": "blue"
});
});
});
</script>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
toogle.html

336
Musa ÇAVUŞ

Şekil191

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.

337
Musa ÇAVUŞ

Bölüm 17
jQuery ve Animasyon

338
Musa ÇAVUŞ

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>

339
Musa ÇAVUŞ

<script>
$("div.k1").css({width:"80px", height:"40px",
margin:"5px", float:"left", background:"blue",
border:"5px outset"
});
$("div.k1").show();
});
$("div.k1").show("slow");
});
$("div.k1").show(5000,function(){
$("#cikti").text("5 saniye surdu");
});
});
$("div.k1").hide();
});
$("div.k1").hide("fast");
});
$("div.k1").hide(3000,function(){
$("#cikti").text("3 saniye surdu");
});
});
});
</script>
</head>
<body>
<button>Goster</button>
<button>Animasyonlu goster</button>
<button>Zaman animasyonlu goster</button>
<button>Sakla</button>
<button>Animasyonlu sakla</button>
<button>Zaman animasyonlu sakla</button>
<hr /><div id="cikti"></div><hr />
<div class="k1"></div><div class="k1"></div>
<div class="k1"></div>
</body>

340
Musa ÇAVUŞ

</html>
showhide.html

Şekil193

Goster dugmesinin 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()

341
Musa ÇAVUŞ

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>
<script>
$("div.k1").css({
width: "80px",
height: "40px",
margin: "5px",
background: "green",
border: "5px outset"
});
$("div.k1").slideDown("slow");
});
$("div.k1").slideUp("fast");
});
$("img").slideDown("slow");
});
$("img").slideUp("slow");
});
$("div.k1").slideToggle(5000);
$("img").slideToggle(10000);
});
});
</script>
</head>
<body>
<button>
Dikdortgeni goster

342
Musa ÇAVUŞ

</button>
<button>
Dikdortgeni sakla
</button>
<button>
Resimi goster
</button>
<button>
Resimi sakla
</button>
<button>
Resmi ve Diktdortgene Toggle efekti uygula
</button>
<hr/>
<div class="k1">
</div>
</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()

343
Musa ÇAVUŞ

metodu ise belirli bir zamana göre ve belirli bir sınıra göre
saydamlaştırmaktadır.

<html>
<head>
</script>
<script>
$("div.k1").css({
width: "80px",
height: "40px",
margin: "5px",
border: "5px outset"
});
$("div.k1").fadeIn("slow");
});
$("div.k1").fadeOut("fast");
});
$("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>

344
Musa ÇAVUŞ

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

345
Musa ÇAVUŞ

<script>

$("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow")
.hide("normal").show(5000);
});
$("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>
</body>
</html>
zincirleme.html

346
Musa ÇAVUŞ

Ş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

347
Musa ÇAVUŞ

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

$("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow")
.hide("normal").show(5000);
});
$("img:last").fadeOut("fast");
$("img:last").fadeIn(2000);
$("img:last").slideUp("slow");
$("img:last").slideDown("slow");
$("img:last").hide("normal");
$("img:last").show(5000);
});
$("img:first").stop();
});
});
</script>
</head>
<body>
<button>
Zincirli animasyon I
</button>
<button>
Zincirli animasyon II
</button>
<button>
Birinci animasyon dursun
</button>
</body>
</html>

348
Musa ÇAVUŞ

Şekil197

Bazen animasyonu durdurma gecikmelere sebebiyet verir fakat yine de sonunda
animasyon durdurulmuş olur.

animate() ile kendiniz bir animasyon metodu

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.

349
Musa ÇAVUŞ

<html>
<head>
</script>
<script>
$(".d1").css({
width: "80px",
height: "40px",
margin: "5px",
position: "absolute"
});
$("img").css({
width: "200px",
position: "absolute"
});
$("#i1").css({
width: "200px",
left: "100px",
top: "50px"
});
$("#i3").css({
width: "200px",
left: "100px",
top: "150px"
});
$("div#i1").animate({
width: "20%",
opacity: 0.4,
borderWidth: "1px"
}, 1500);
});
$("img#i3").animate({
width: "100%",
opacity: 0.3,
top: "200px"
}, 5000);
});
});
</script>

350
Musa ÇAVUŞ

</head>
<body>
<button>
Dikdortgen 1 animasyon
</button>
<button>
Resim 2 animasyon
</button>
<hr/>
<div class="d1" id="i1">
</div>
<img src="r1.jpg" id="i3" class="img1" />
</body>
</html>
animate.html

Şekil198

351
Musa ÇAVUŞ

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.

352
Musa ÇAVUŞ

Bölüm 18
jQuery ile Ajax

353
Musa ÇAVUŞ

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>

354
Musa ÇAVUŞ

$.get("ajax.txt", function(data){
$("#cikti").text(data);
});
});
$.post("ajax.txt", function(data){
$("#cikti").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Sorgulama $.get()</button>
<button>AJAX-Sorgulama $.post()</button>
</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

355
Musa ÇAVUŞ

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>
$.get("ajax2.txt", function(data){
$("#cikti").html(data);
});
});
$.post("ajax2.txt", function(data){
});
});
});
</script>
</head>
<body>
<button>$.get()</button>
<button>$.post()</button>
</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

356
Musa ÇAVUŞ

Ş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

357
Musa ÇAVUŞ

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>
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
}
);
});
});
</script>
</head>
<body>

358
Musa ÇAVUŞ

<h1>Kullanici adinizi ve sifrenizi girin</h1>
<form name="f1">
<table width="200" border="1">
<tr>
<td>Kullanici Adi</td><td><input type="text" size="30"></td>
</tr>
<tr>
<td>Sifre</td>
<td><input type="password" size="30"></td>
</tr>
</table>
</form>
<button>Giris</button>
</body>
</html>
login.html

Şekil202

359
Musa ÇAVUŞ

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

360
Musa ÇAVUŞ

Bölüm 19
jQuery UI

361
Musa ÇAVUŞ

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.

362
Musa ÇAVUŞ

Şekil204

Burada Draggable linkini bir tıklayın.

363
Musa ÇAVUŞ

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

364
Musa ÇAVUŞ

Ş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>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>

365
Musa ÇAVUŞ

$("#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

366
Musa ÇAVUŞ

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>
</script>
</script>
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Tarih: <input id="datepicker" type="text"></p>
</body>
</html>
takvim.html

367
Musa ÇAVUŞ

Ş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>
</script>
</script>
$("#i1").accordion();

368
Musa ÇAVUŞ

});
</script>
</head>
<body>
<h1>Benim Web Sayfam</h1>
<div id="i1">
<h3>Benim ozel sayfam</h3>
<div>
<a href="http://rjs.de">www.musa-cavus.com</a>
</div>
<h3>Bir liste</h3>
<div>
<hr/>Domates
<hr/>Biber
<hr/>Patlican
<hr/>
</div>
</body>
</html>
accordion.html

Şekil208

369
Musa ÇAVUŞ

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>
</script>
</script>
$("#tabs").tabs().resizable();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Bolum 1</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>

370
Musa ÇAVUŞ

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

371
Musa ÇAVUŞ

</script>
</script>
$("#i1").dialog({
title: 'Dialog Baslik',
position: 'center',
width: '300',
height: '200'
});
$("#s1").slider();
$("#s2").slider({
slide: function(event, ui){
var genislik = 300 + $("#s2").slider('option', 'value');
$("#i1").dialog('option', 'width', genislik);
}
});
$("#s2").css({
width: "400px"
});
$("#s3").slider({
slide: function(event, ui){
var yukseklik = 200 + $("#s3").slider('option', 'value');
$("#i1").dialog('option', 'height', yukseklik);
},
orientation: 'vertical',
min: -50,
max: 50,
value: 0
});
});
</script>
</head>
<body>
<h4>Default Slider</h4>
<div id="s1">
</div>
<h4>Default Slider CSS</h4>
<div id="s2">
</div>
<h4>Slider</h4>
<div id="s3">

372
Musa ÇAVUŞ

</div>
<div id="i1">
Web sayfami ziyaret edebilirsiniz...
<a href="http://www.musa-cavus.com">tikla</a>
</div>
</body>
</html>
slider.html

Şekil210

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

373
Musa ÇAVUŞ

ç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>
</script>
</script>
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;
});
$("#i1").effect('pulsate',opt,2000,temizle);
return false;
});
$("#i1").effect('slide',opt,2500,temizle);
return false;

374
Musa ÇAVUŞ

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

375
Musa ÇAVUŞ

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.

376
Musa ÇAVUŞ

Bölüm 20
Plugins

377
Musa ÇAVUŞ

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.

378
Musa ÇAVUŞ

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

379
Musa ÇAVUŞ

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:

380
Musa ÇAVUŞ

Ş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 src="jquery-treeview/jquery.treeview.js"
type="text/javascript"></script>
<script>

381
Musa ÇAVUŞ

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>" +
"<a href='http://jquery.com'>jquery.com</a>" +
"</span></li>" +
"<a href='http://www.w3c.org'>w3c</a>" +
"</span></li>" +
"</ul></li>")
.appendTo(agacim);
agacim.treeview({
add: yeniListe
});
});
</script>
</head>
<body>
</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.

382
Musa ÇAVUŞ

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>
</script>
</script>
src="jquery.dragwithstatuslight.js"></script>
$("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() {
$(this).css({
border:"5px outset", cursor:"move"
});
$(this).draggable( {
start: function(event, ui) {
$(this).css({opacity : 0.5});

383
Musa ÇAVUŞ

},
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.

384
Musa ÇAVUŞ

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.

jQuery

More Related Content

Similar to jQuery (20)

More from Erol Dizdar (20)

jQuery