kendĐnĐze gÜvenerek jquery - tuncaycalhan.org · değindim ve son olarak jquery konusuna geçiş...
Post on 09-Mar-2019
219 Views
Preview:
TRANSCRIPT
Bilgisayar Mühendisi Musa ÇAVUŞ
KENDĐNĐZE GÜVENEREKKENDĐNĐZE GÜVENEREKKENDĐNĐZE GÜVENEREKKENDĐNĐZE GÜVENEREK
jQueryjQueryjQueryjQuery
KKeennddiinniizzee GGüüvveenneerreekk jjQQuueerryy
Musa ÇAVUŞ
Bedava Dağıtım:
Kasım - 2010
© Musa Çavuş
Musa ÇAVUŞ 6
Bu kitabın her türlü yayın hakkı Musa Çavuş’a aittir.
Sayfa Tasarımı:
Musa Çavuş
Web Adresi: www.musa-cavus.com, E–posta: jquery@musa-cavus.com
Musa ÇAVUŞ 8
Önsöz İlk kitabım olan “Kendinize Güvenerek Java” kitabından sonra “Farklı Ol Mal
Olma” adlı kişisel gelişim kitabımı yazdım ve dedim ki ülkemdeki insanlara
faydalı olabilmen için bir teknik kitabı daha yazmalısın ve bu seferki kitap hem
büyük bir açığı kapatmalı hemde çok yarar sağlamalı.
Türkiye’nin, Web dünyasında gün geçtikçe çok geliştiğini biliyoruz. Web
tasarımı alanında Türkçe kaynakların eksikliklerin olduğunu gördüm. Amerika
ve Avrupa’da şu an büyük siteler görsellikleri için güçlü kütüphaneler
kullanmaktadırlar. jQuery bu kütüphanelerin başında gelmektedir. Maalesef
jQuery alanında Türkiye’de hiçbir Türkçe kaynak kitap mevcut değildir. Ben bu
kitabın bu açığı kapatacağını düşünüyorum.
Her kesimdeki insanın bu kitaptan faydalanması için yine Türkiye’de bir ilke
imza atarak Türkiye’deki ilk jQuery kitabını bedava dağıtmak istiyorum. Bunun
için kendi emeğimle İnternet ortamında kitabımı yaygınlaştırmaya karar
verdim. Sizlerden isteğim eğer kitabımı okuduysanız ve beğendiyseniz bir
dostunuza iletmeniz olacaktır. Ya da http://www.musa-cavus.com adresinden
kitabımı indirme tavsiyesinde bulunmanızdır. Kitabı bedava dağıtmam, kitabın
basit konulara değinmesi anlamını taşımamaktadır. jQuery dilini iyi
öğrenmeninde temelinde JavaScript dilini iyi bilmeniz yatar. Bunun için kitapta
öncelikle JavaScript konusuna ağırlık verdim. Daha sonra AJAX konusuna
değindim ve son olarak jQuery konusuna geçiş yaptım. JavaScript’in bu kitapta
ne işi var canım demeyin, çünkü JavaScript jQuery ile et ve tırnak gibi ayrılmaz
iki parçadır.
Eğer ilk kitabım olan “Kendinize Güvenerek Java” kitabımı okudysanız benim
anlatım tarzımı az çok biliyorsunuzdur. Genelde kitabımda gereksiz anlatımlara
değinmiyorum, çünkü gereksiz bilgilerle beyin hücrelerinizi boşu boşuna
meşgul etmek boşa vakit kaybıdır. Daha çok örnekler eşliğinde konuları
anlatıyorum ve bir konuda daha önce anlatmadığım konulara değinmiyorum. O
yüzden size tavsiyem, kitabı baştan sona doğru okumanız ve uygulamanız
olacaktır. Bazen kitaptaki örnekler uzun gelebilir, fakat sizde göreceksiniz ki
örneklerin uzun olmasına rağmen bir zorluk çekmeyeceksiniz, çünkü örnekleri
hem basit tuttum hemde daha önce anlattığım bölümleri koydum.
Musa ÇAVUŞ - 2010
Musa ÇAVUŞ 11
1.1 JavaScript ile web sayfası bağlantısı
Fazla lafı uzatmadan ve gereksiz yazılarla sizi meşgul etmeden hemen ilk
örneğimiz olan JavaScript kullanmadan basit bir HTML örneğine geçiyorum.:
<html> <body> Bu sayfada JavaScript kullanilmiyor. </body> </html> jsyok.html
Editör olarak herhangi basit bir metin editörü kullanabilirsiniz. Windows
altındaki Notepad çok basit bir editördür fakat sizin ilk aşamada tüm
değişiklikleri kendiniz kodlayacağınızdan JavaScript’i daha verimli
öğrenebileceksiniz. Ben biraz daha kolaylık ve renklilik olsun diye Opensource
olan Notepad++ editörünü kullanıyorum.
Yukarıdaki kodu jsyok.html dosyasına kayıt edin ve fare ile çift tıkladığınızda
standart tarayıcınız açılacaktır ve şu yazıyı göreceksiniz.
Bu sayfada JavaScript kullanilmiyor.
Kitaptaki HTML kodlarını açıklamıyorum, çünkü sizin HTML bilgisine sahip
olduğunuzu varsayıyorum. Bundan sonraki örnekleri verirken, önce örneği
yazacağım ve ardından ekran çıktısını ekleyeceğim. Yukarıdaki örneği
JavaScript ile nasıl yapabiliriz?
JavaScript kullanabilmenin birkaç yolu vardır. Bunlardan ilki <script> </script>
arasına yazacağımız komutlarla olabilmektedir.
<html> <body> <script> alert("Merhaba Dünya"); </script> </body> </html> alert.html
Musa ÇAVUŞ 12
Şekil1
Html kodunda <script> ile </script> tagları arasında alert() fonksiyonunu
kullandım. alert() fonksiyonunun özelliği, parametre olarak verdiğiniz metini
Şekil1’deki gibi ekranda göstermesidir. Sarı bir üçgen içerisinde bir ünlem,
yanında bizim alert() fonksiyonuna parametre olarak verdiğimiz metin, bir
“Tamam” düğmesi ve başlık olarak “[JavaScript Uygulaması] yazısı. Ben
uygulamalarımı çalıştırırken Firefox kullanıyorum. JavaScript öğrendikten
sonra, size tavsiyem, örneklerinizi birkaç tarayıcıdan geçirmek olsun, çünkü
JavaScript her tarayıcıya göre farklı sonuç verebilmektedir. Uygulamalarınızın
sonuçlarından emin olabilmek için birkaç tarayıcıdan geçirmelisiniz. Sizin
uygulamanızı, web sayfanızı ziyaret eden kişilerin ne tür bir tarayıcı
kullandığını önceden kestiremediğiniz için bunu yapmanız gerekmektedir.
JavaScript programlamasını bizler daha çok Đnternet ortamında kullanırız. Bu
yüzden Đnternet hakkındaki bilgilerimiz temel seviyede yeterlilik göstermelidir.
Đnternet sadece “World Wide Web” değildir, Mesela ftp’de Đnternet ortamında
kullanılan bir protokoldür ve www protokolünden çok daha önce kullanılmıştır.
Tarayıcınızın adres kısmına ftp://ftp.microsoft.com/ yazın ve arama tuşuna
basın. Ben bunu yaptığımda karşıma şu bilgiler çıktı:
Musa ÇAVUŞ 13
Şekil2
ftp gibi birçok Đnternet hizmetleri mevcuttur. Hepimizin kullandığı E-Mail.
Uzaktaki bilgisayarları kullanabilmek için kullandığımız telnet protokolü. ssh,
scp ve usenet gibi.Yalnız Đnternet ortamı www sayesinde bu popülaritesini
kazandı. Biz www özelliğini tarayıcımızda http protokolüyle kullanabiliriz.
Yine adres çubuğunda http://www.hotmail.com.tr girdiğimde şöyle bir görüntü
elde ediyoruz:
Musa ÇAVUŞ 14
Şekil3
Karıştırmamamız gereken nokta http ile html’dir. http Đnternet’te yayımlanan
web sayfalarına ulaşmak için gereken bir protokoldür. html ise web sayfalarının
içeriğini görebilmemiz sağlayan bir tarayıcı dilidir.
Şekil3’te çıkan görüntünün üzerine sağ fare ile tıkladığınızda ve çıkan popup
mönüsünden “Sayfa kaynağını göster” seçeneğini seçtiğinizde karşınıza
Şekil3’teki sayfanın HTML, CSS ve JavaScript kodu gelecektir.
Musa ÇAVUŞ 15
Şekil4
Günümüzdeki önemli web saylarını JavaScript olmadan düşünmek mümkün
değildir. Herkes bu yüzden tarayıcısında JavaScript özelliğini kullanmaktadır,
ama bazı kişiler buna rağmen JavaScript’lere izin vermek istememektedirler.Bu
kullanıcılar için şöyle bir kod eklentisi yapabilirsiniz:
<html> <body> <script> alert("Merhaba Dünya"); </script> <noscript> Tarayiciniz JavaScript desteklemiyor. </noscript> </body> </html> jsdestekyok.html
<noscript> tagı JavaScript desteklemeyen tarayıcılarda taglar arası verilen
metini ekranda göstermektedir.
Musa ÇAVUŞ 16
<script> tagını kullanırken “language” parametresiyle hangi dili kullandığımızı
belirtebiliriz. <script> tagı bir HTML tagıdır, JavaScript tagı değildir. Bu
parametrede “VBScript” ya da JavaScript’in eski adı “LiveScript” yazabilir. Biz
örneklerimizde standart olan “JavaScript” terimini kullanacağız. Bu noktada
HTML kodu kullandığımız için, büyük küçük yazımı önemli değil, siz
“JavaScript” terimini istediğiniz gibi yazabilirsiniz.
<html> <body> <script language="JavaScript"> </script> </body> </html>
language.html
language parametresinin kullanılmadığı durumlarda “type” parametresini
kullanarak mime-type’ını tanımlamamız gerekiyor. mime-type, dosya formatını
tanımlamaktadır. Uluslararası bir standarttır ve bu standart ile bir çok formatı
tanımlayabilirsiniz, mesela XML, HTML, grafik formatları gibi.
<html> <body> <script type="text/javascript"> </script> </body> </html>
mimetype.html
type parametresi, ana kategori ve alt kategori olarak iki bölümden oluşmaktadır.
Yukarıdaki kodda ana kategori text terimi olmakla beraber, alt kategori
javascript terimidir.
Web sayfaların %95’i language terimini parametre olarak kullanırlar. Daha
önceki örneklerde farkına vardıysanız, ne language ne de type parametresi
kullandım ve kodumuz çalıştı. O zaman ne diye bu kadar çene yoruyorum
dersiniz? Web sayfanızı XHTML kullanarak gerçekleştirmek istiyorsanız type
parametresini kullanmak zorundasınız. JavaScript versiyon farklılıklarını
Musa ÇAVUŞ 17
gözetmek istersenizde genelde language parametresini kullanmalısınız. Onun
dışında bu parametreleri kullanmadan web sayfaları oluşturabilirsiniz.
1.2 JavaScript ile kütüphane kullanımı
JavaScript’leri web sayfalarında kullanmak istiyorsanız bunları kütüphanelerde
saklamayı tavsiye ederim. Böylece projeler daha okunaklı olabilir ve bir
fonksiyona istediğiniz kadar kullanabilirsiniz. Yazdığınız kütüphaneyi HTML
içerisinde kullanmak istiyorsanız, <script> tagında “src” parametresini
kullanarak, kütüphane dosyasının yerini ve adını yazıyorsunuz.
<html>
<script language="JavaScript" src="benimFonksiyonlarim.js"></script>
<body>
<script language="JavaScript">
hosgeldin();
</script>
</body>
</html>
kutuphaneKullanimi.html
function hosgeldin(){
document.write("Hosgeldin");
}
benimFonksiyonlarim.js
Musa ÇAVUŞ 18
Şekil5 benimFonksiyonlarim.js dosyası ile kutuphaneKullanimi.html dosyası aynı
dizinde olduğundan, “src” parametresine sadece benimFonksiyonlarim.js
yazmak yeterlidir. Kütüphanede, örnekte olduğu gibi fonksiyonlar ya da
değişkenler kullanabilirsiniz. Fonksiyonlar ve değişkenler daha sonraki
konularda ele alınacaktır, şimdilik kütüphane kullanımı nasıl oluyor onu
bilmeniz yeterlidir. “src” bağlantısını gerçekleştirdikten sonra,
kutuphaneKullanimi.html dosyasında hosgeldin() fonksiyonunun adını yazarak
çağırabilirsiniz. Daha önce belirttiğim gibi bunun avantajı bir çok HTML
dosyasından bu bağlantıyı gerçekleştirerek, hosgeldin() fonksiyonunun
çağrılabilmenizdir.
Kullandığımız kütüphaneyi incelerseniz, özel bir yapıya sahip değildir.
Kullanmak istediğim fonksiyonu yazdım o kadar. Đcabında istediğim
değişkenleri de sırasıyla tanımlayabilirdim. Kafanıza göre takılabilirsiniz.
1.3 JavaScript versiyonları
Musa ÇAVUŞ 19
JavaScript, bir çok programlama dili gibi çeşitli versiyonlarla varlığını
göstermektedir. Geleneğe uyalım diye böyle bir şey olmamıştır. Her versiyonda
yeni teknolojileri bünyesinde barındırmaktadır. Eski tarayıcılar JavaScript’in
yeni versiyonlarını tanıyamadığı için, kullanılacak yeni teknolojileride
tanıyamayacaktır.
<script language="JavaScript1.5">
location.href="index15.html";
</script>
<script language="JavaScript1.4">
location.href="index14.html";
</script>
<script language="JavaScript1.3">
location.href="index13.html";
</script>
<script language="JavaScript1.2">
location.href="index12.html";
</script>
<script language="JavaScript1.1">
location.href="index11.html";
</script>
<script language="JavaScript">
location.href="index10.html";
</script>
versiyon.html
“language” parametresiyle JavaScript’in versiyonunu belirtebiliyoruz.
location.href çağırısıyla web sayfasının hangi sayfaya iletileceğini söylüyoruz.
Diyelim ki bizim tarayıcımız JavaScript 1.3 versiyonunu destekliyor, o zaman
sayfa index13.html sayfasına iletilir ve tarayıcı index13.html dosyasını işleme
koyar.
Internet Explorer “JavaScript1.0” ifadesini tanımamaktadır. Aynı şekilde yeni
tarayıcılardan bazılarda “JavaScript1.4” ve “JavaScript1.5” ifadelerini
tanımamaktadır. Bu ifadeleri tanımadıkları için <script> tagında yazılan kod
parçası işleme sokulmamaktadır. Şu da bir gerçek eski tarayıcıları kullanan
kişilerin sayısı oldukça azdır ve emin olun ki bu oran %1 bile değildir. Aslında
bu konuyu koymayacaktım fakat sizi daha derin konulara girmeden önce basit
konularla ısındırmak istiyorum. Programcı olabilmek için her konuyu bilmenize
Musa ÇAVUŞ 20
gerek yoktur sadece ihtiyacınız olan konuları bilseniz yeterlidir. Sakin her
konuyu mutlaka bilmeliyim diye düşünmeyin, çünkü her şeyi bilemezsiniz fakat
nasıl yapıldığını bilebilirsiniz.
1.4 JavaScript desteği var mı? JavaScript herkes tarafından kabul görmüş durumdadır, fakat yine de
kullanıcılardan bazıları JavaScript’i tarayıcısında engellemiş durumundadır.
Acaba bunu ortaya çıkartabilir misiniz? Cevap evettir.
<html>
<head>
<meta http-equiv="refresh" content="5;URL=jsyok.html">
</head>
<script language="JavaScript">
location.href="jsdestekyok.html";
</script>
<body>
<a href="jsyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi tiklayin ve
JavaScript olmayan sayfaya yonlendirilin</a><br />
<a href="jsdestekyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi
tiklayin ve JavaScript olan sayfaya yonlendirilin</a>
</body>
</html>
Đlet.html Bu sayfanın header kısmında bir meta tag vardır. http-equiv parametresi
sayfanın ne yapacağını söylüyor ve content kısmındaki 5 rakamı saniye
düzeyindeki zamanlamadır. Bir de URL ifadesindeki jsyok.html dosyası yer
almaktadır. Bunun anlamı, sayfaya gelen ziyaretçi 5 saniye sonra verilen adrese
iletilsin demektir. location.href = “jsdestekyok.html” ile ziyaretçinin tarayıcısı
JavaScript destekliyorsa “jsdestekyok.html” sayfasına git denilmektedir.
JavaScript sayfada yoksa 5 saniye sonra jsyok.html sayfasına iletim
gerçekleşecektir. Tarayıcılarda otomatik iletim engellenebildiği için bu
anlattıklarım çalışmaz. Bunun için ek olarak ziyaretçiye link şeklinde iki olanak
sunmalıyız. Kullanıcı bu durumda JavaScript desteği almak istiyorsa gerekli
linki tıklar ve JavaScript destekli sayfaya geçer. Đstemiyorsa JavaScript olmayan
sayfaya geçer.
Musa ÇAVUŞ 21
1.5 Güvenlik Gerçekte JavaScript güvenlik sistemini delebilir. Bunlara bir kaç örnek verecek
olursam, Đnternet adresini gösteren linkleri gizlemek, girdiğiniz sayfada birden
bir sürü popup penceresinin açılması, istenilmeden web sayfasının kapanması,
ardı ardına açılan pencerelerle sisteminizin kilitlenmesi. Son yazdığıma aşağıda
bir örnek var, yalnız sisteminizi seviyorsanız ve tüm bilgilerinizi
yedeklediyseniz bu örneği deneyebilirsiniz, çünkü çok basit ve tehlikeli bir
yöntem.
<html>
<body>
<!--
Sisteminizi seviyorsaniz bu ornegi calistirmayin
-->
<script>
while(true) open("","");
</script>
</body>
</html>
guvenlikacigi.txt Đçinde yazanları ileriki bölümde ayrıntılı anlatacağım. Bu kodun yaptığı bir
döngü içerisinde sonsuza kadar pencere açmaktır.
JavaScript ile harddiskinizin istenilen bölümüne bilgi yazamazsınız ya da
istenilen bölümden çok kolay bilgileri okuyamazsınız. Eğer olumlu
kullanıldığında çok faydalı bir dildir. Tabi bu JavaScript’in hiç zarar vermez
anlamını taşımasın. JavaScript’i ufak görmeyin, kitabın diğer bölümlerinde
jQuery kütüphanesi anlatılacaktır. JavaScript, jQuery’nin temelini
oluşturmaktadır. jQuery ile de acayip sayfalar programlayabilmektesiniz.
Acayip diyorum, çünkü gerçekten acayip sayfalar oluşturabildiğinize kendiniz
bile inanamayacaksınız.
Musa ÇAVUŞ 23
XHTML, HTML, XML ve CSS hakkında temel bilgiler vermek istiyorum,
çünkü kitaptaki konular derin olmasa bile ara sıra bu teknolojilerle beraber
çalışmaktadır. Bunun sebebi, günümüz web sayfalarında bu teknolojilerin
genelde beraber kullanılmasında yatmaktadır.
Ayrıca diğer bölümlerde bu teknolojilerin kullanıldığı yerlerde burada
anlattığımın dışında komutlar kullanırsam onları da o bölümlerde anlatacağım.
Böylece kitabın bu bölümünde bu konularla fazla vakit harcamamış oluruz.
2.1 HTML Modern web sayfaları HTML teknolojisini sadece yapısal anlamda
kullanmaktadırlar. Yani gereken komutlar kullanılıyor ve görsel kısım CSS
teknolojisiyle düzenleniyor. JavaScript komutlarıylada programlama kısmı
gerçekleştiriliyor. Bu yüzden HTML ile kullanacağımız az sayıda önemli
komutlar kalmaktadır. Bunlarda yapısal komutlardır. Tabi aranızda HTML
dilini su gibi içmek isteyen varsa, piyasada bu konuda oldukça çok kitap var.
Ben diyorum ki gerek yok, alem uzaya çıkıyor siz hala tekeri yeniden mi
keşfetme peşindesiniz?
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
</body>
</html>
yapi.html
Musa ÇAVUŞ 24
Şekil6 HTML sayfasındaki tüm içerik <html> tagın içine konmaktadır. <html> tagı
HTML sayfasının kök tagıdır. Ondan sonra <head> tagı gelmektedır. <head>
tagında HTML sayfasının baş kısmı yer alır. Gördüğünüz gibi <title> tagı da bu
kısımda yer almaktadır. <title> tagı ile tarayıcınızın başlığını
belirtebiliyorsunuz. Sekme özelliği gösteren tarayıcılarda da sekmedeki metni
de buradan değiştirebiliyorsunuz. <body> kısmında HTML sayfasındaki görsel
kısım yer almaktadır. <html>, <head>, <title>, <body> tagları HTML
sayfasının temel yapısıdır. Bunların yanı sıra doküman tipini belirten bir üst
yazı vardır. Onu burada vermek istemiyorum, çünkü başlangıç seviyedeki
kişiler için kafa karıştırıcı bir bilgidir. Tarayıcılar, doküman tipini belirten
yazıyı yazmasanız, tolerans uygulayarak, bunu bir hata olarak
görmeyeceklerdir. Zaten bu yüzden bunu bilmesek olur. Önemli gördüğüm
tagları, örnekler eşliğinde kısaca ve derine inmeden anlatacağım ki fazla
kafanızı karıştırmak istemiyorum.
Başlıklar
Musa ÇAVUŞ 25
HTML sayfalarında yazıların üzerine başlık atabilmeniz için 6 büyüklükte
başlık tagı mevcuttur. Bunlar, <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>
taglarıdır. <h1> en büyük başlıktır. <h6> ise en küçük başlıktır.
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<h1>Baslik</h1>
<h2>Baslik</h2>
<h3>Baslik</h3>
<h4>Baslik</h4>
<h5>Baslik</h5>
<h6>Baslik</h6>
</body>
</html>
baslik.html
Musa ÇAVUŞ 26
Şekil7 Paragraf Bir Paragraf başı yapmak istiyorsanız <p> tagını kullanabilirsiniz. <p> tagının
bittiğini göstermek için </p> tagını isteğe bağlı kullanabilirsiniz, mecburiyet
yoktur.
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<h3>Baslik</h3>
Musa ÇAVUŞ 27
<p>Burada Paragraf basliyor
<p>Burada bir Paragraf daha basliyor
<p>Bende bir Paragraf basiyim
</body>
</html>
paragraf.html
Şekil8 Satır başı Metinlerinizi bitirdikten sonra yeni bir satıra geçmek istiyorsanız <br> tagını
kullanabilirsiniz. Paragraftan farklı olarak <br> tagını istediğiniz yere
koyabilme özelliği taşımasıdır. <br> tagı metininizi, satır atlamadan ikinci satıra
geçirmektedir. Diyelim ki Windows’daki Notepad programını kullanıyorsunuz.
Bir alt satıra geçebilmek için ne yapıyorsunuz? Enter tuşuna basıyorsunuz.
HTML’yi geliştiren gençlerde bu işleme <br> demişler.
<html>
<head>
Musa ÇAVUŞ 28
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
Satir Basi<br>
<br>Bugun hava cok guzel<br>
Nasilsin?
</body>
</html>
satirbasi.html
Şekil9 Listeler Metinlerinizi gruplayarak göstermenin yolu listeleri kullanmaktan geçer. <li>
tagı ile bir listedeki girdiyi tanımlarsınız ve </li> bu girdiyi bitirmiş olursunuz.
<li> tagından önce kullanacağınız tag listenin şeklini gösterir. <ul> tagı listenizi
siyah noktalı bir liste yapar. <ol> tagı ise listenizi sayısal bir liste yapar. Liste
içerisinde listede kullanabilirsiniz. Bunun için <li> tagından sonra <ol> ya da
Musa ÇAVUŞ 29
<ul> kullanabilirsiniz. Liste şekli olarak sadece <ul> ve <ol> yoktur, fakat
bizim için bu tagları bilmek yeterlidir.
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<ul>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ul>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
<ul>
<li>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
</li>
<li>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
</li>
</ul>
</body>
Musa ÇAVUŞ 30
</html>
listeler.html
Şekil9 Tablolar HTML’de tablolar başlı başına bir konudur, fakat burada da bu konuya
ihtiyacımız olduğu ve kafa karıştırmayacak kadar değineceğim.
Bir tabloyu <table> tagı ile tanımlayabilirsiniz. Tablodaki her satır için <tr>
tagını ve her sütün içinde <td> tagını kullanıyoruz.
<html>
Musa ÇAVUŞ 31
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<table border="1">
<tr>
<td>1. Satir, 1. Sutun</td>
<td>1. Satir, 2. Sutun</td>
<td>1. Satir, 3. Sutun</td>
</tr>
<tr>
<td>2. Satir, 1. Sutun</td>
<td>2. Satir, 2. Sutun</td>
<td>2. Satir, 3. Sutun</td>
</tr>
</table>
</body>
</html>
tablo.html
Şekil10
Musa ÇAVUŞ 32
Đlk <tr> taglı bölüme bakarsanız, üç tane <td> tagı kullandım. Tablonun ilk
satırında üç tane sütun oluşturmuş oldum. Đkinci satır içinde üç sütun
oluşturmak istediğim için, aynı şekilde üç tane <td> tagı kullandım. Sütunları
</td> ile satırları ise </tr> ile kapatmalıyız. Son olarak tablonun bittiğini
gösteren </table> tagını kullandım. Örnekteki border parametresi tablonun
çerçeve kalınlığını göstermektedir. Ben 1 değerini verdim ki satır ve sütunları
görsel olarak ayırt edebilelim.
div ve span HTML’de bilmemiz gereken en önemli taglardır, çünkü CSS teknolojisi ile çok
kullanıyoruz. <div> tagı ile HTML dokümanını bölümlere ayırabiliyoruz.
<span> tagıylada metin bölümlerini ayırabiliyoruz Daha sonraki bölümlerde,
özellikle CSS konusunda <div> ve <span> taglarıyla daha detaylı bir anlatım
yapacağım.
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<div style="background:red;height:100px;width:200px;"></div>
Selam <span style="color:green">Ne Haber</span>
</body>
</html>
divspan.html
Musa ÇAVUŞ 33
Şekil11 <div> tagı kullanarak kırmızı bölümü bir blok olarak HTML sayfasında
ayırdım. <div> tagında style parametresini kullanarak bu bloğu boyadım,
yüksekliğini ve genişliğini verdim. Bunu CSS bölümüne değindiğimde daha iyi
anlayacaksınız.
<span> tagında da style parametresini kullanarak içerisinde bulunan kelimenin
yeşil renk olmasını sağladım.
HTML için bilmeniz gereken bu kadar. Sizi fazla sıkmadan hayatta
kullanabileceğiniz en önemli tagları anlattım. Gerçekten diğer tagları bilmenize
gerek yok. Beyninize giden oksijeni gereksiz bilgilerle doldurmayın.
2.2. XHTML Web ortamında XHTML uzundur varlık göstermesine rağmen, web sayfalarının
çoğu HTML dilini kullanmaktadırlar. Bunun nedeni HTML, hataları tolerans
göstermesinden kaynaklanmaktadır. Aşağıdaki ilk örnek basit bir HTML
sayfasının kodudur, ikinci örnekse aynı kodu XHTML ile nasıl kodlandığını
göstermektedir.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Musa ÇAVUŞ 34
<html>
<head>
<title>Basit bir HTML sayfasi</title>
</head>
<body>
<h1 align=center>Web Sayfasina Hosgeldiniz</h1>
</body>
</html>
htmlsayfa.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basit bir XHTML sayfasi</title>
</head>
<body>
<h1 align="center">Web Sayfasina Hosgeldiniz</h1>
</body>
</html>
xhtmlsayfa.xhtml
Şekil12
Musa ÇAVUŞ 35
htmlsayfa.html ve xhtmlsayfa.html dosyalarına tıkladığınızda Şekil12’deki aynı
görüntüyü görürsünüz. htmlsayfa.html dosyasına baktığımızda en üstte
“<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
“ yazısını görüyoruz. Bu HTML 4.01 standartlarına göre doküman tipini
belirtmektedir. Şimdiye kadar böyle bir tanımlama kullanmamamıza rağmen
nasıl oldu da yazdığımız kodlarla HTML sayfalarımızı çalıştırabildik? HTML
bu gibi hatalara tolerans göstermektedir. Yine xhtmlsayfa.xhtml dosyasının en
üstünde buna benzer bir tanımlama görüyoruz. XHTML’de bu tanımlamayı
yapmaya mecburuz. Üstelik HTML tanımlamasına göre de biraz daha uzun. Đki
dosya arasındaki ikinci farklılık <html> tagındaki farklılıktır. XHTML’deki
<html> tagına xmlns parametresi eklenmiştir. Bu parametreyi, XHTML
kullanırken mecburen tanımlamak zorundayız. Kopyalama metoduyla ya da
farklı araçlarla bu satır otomatik olarak eklenebilir. XHTML’de mecburi olarak
<head> ile tanımlanmış bir başlık kısmı ve <body> ile tanımlanmış bir gövde
alanı olması gerekmektedir. Biz bunlara head ve body alanı diyoruz. Pencerenin
başlık kısmı olan <title> bile mecburi olarak tanımlanması gerekiyor.
HTML dosyasında bu gibi mecburiyetler yoktur. <html> tagının altına
bile metinler yazabilirsiniz ya da <title> bölümünü boş bırakabilirsiniz. HTML
bunların hepsine tolerans gösterecektir. XHTML’de ise bu gibi hatalara yer
verilmemektedir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basit bir XHTML sayfasi</title>
</head>
<body>
<h1 align="center">Web Sayfasina Hosgeldiniz</h1>
</body>
</html>
alo
aloxhtml.html
Musa ÇAVUŞ 36
Şekil13 XHTML’de </html> tagından sonra “alo” yazdım ve XHTML buna tolerans
göstermeyerek Şekil13’de gördüğünüz gibi bir hata mesajı iletti.
XHTML’lerde parametre atamalarında da dikkat etmelisiniz. Tüm atamaları ""
işaretleri arasına yapmanız gerekiyor. HTML’de böyle bir kısıtlamada yoktur.
Dikkat etmeniz gereken bir başka nokta, XHTML’de büyüklük küçüklük
yazmaları. Örneğin <H1>Baslik</H1> gibi bir kodlama XHTML’inizin hata
vermesine sebep verecektir.
XHTML’de tüm taglar kapatılması gerekiyor. HTML’de <br> çok
kullanılır, bunu XHTML’de <br /> ya da <br> </br> şeklinde tanımlamalısınız.
Görüldüğü gibi XHTML hiç bir noktada tolerans göstermemektedir. Bu da
XHTML’in web dünyasında fazla tercih edilmemesini doğurmuştur.
2.3. Hatasız web sayfası Hatalardan sonra web sayfamızın hatasız olduğunu nasıl anlarız diye bir soru
gelebilir. Bunun için W3C yani HTML standartlarını belirleyen kurum bizim
için bir sayfa geliştirdi. Sayfaya http://validator.w3.org adresinden
ulaşabilirsiniz.
Musa ÇAVUŞ 37
Şekil14 Address seçeneğine www.google.com yazarsanız ve Check düğmesine
basarsanız şöyle bir ekran çıktısı alırsınız:
Musa ÇAVUŞ 38
Şekil15
Şimdi diyebilirsiniz, google gibi dünyaca ün salmış bir firma nasıl olurda
sayfasında 37 hata yapmış olabilir? Hemen sevinmeyin google amcanın hatasını
bulan ilk insanım diye. Oraya başka adresleri yazsanız hatalar olduğunu
göreceksinizdir. W3C standartlarının o kadar önemli olmadığını buradan
görebilirsiniz.
http://validator.w3.org adresinde sisteminizde bulunan dosyaları da
upload ederek kontrol ettirebilirsiniz. Yalnız bunun için Firefox eklentisi daha
kullanışlıdır. Yapmanız gereken Web Developer’i Firefox ortamına yüklemek
olacaktır. Firefox’unuzu açın ve Mönü kısmından Araçlar, daha sonra da
Eklentileri tıklayın.
Musa ÇAVUŞ 39
Şekil16 Çıkan pencerede arama kısmına “Web Developer” yazın ve Firefox
uygulamasına ekleyin düğmesini tıklayın.
Şekil17
Musa ÇAVUŞ 40
Kurulum bittikten sonra Firefox yeniden başlatılacaktır. Araçlar->Web
Geliştirici-> Çeşitli-> HTML denetle sekmesini tıkladığınızda sayfanız W3C
sayfasına yönlendirilecektir ve bir denetleme yapılacaktır.
Şekil18 2.4. Web sayfalarında Style Sheet kullanımı HTML’in durağan sayfalarına canlılık katabilmek için Style Sheet teknolojini
çok kolay sayfalarımıza entegre ederek kullanabiliriz. Style Sheet teknolojisinin
en büyük avantajı JavaScript gibi doğrudan HTML sayfasına kodlanabilmesidir.
Yapılması gereken çok basittir, <style type=”text/css”> tanımlaması
yaptığımızda Style Sheet teknolojisini kullanabiliriz. Başka bir metot ise
aşağıdaki gibidir:
html>
<head>
<title>CSS-Dosyasi</title>
<link href="benimcss.css" type="text/css" rel="stylesheet">
</head>
Musa ÇAVUŞ 41
<body>
<h1>Ates bacayi sarmis</h1>
<h1 class="a">Baca atesi sarmis mi?</h1>
<span class="b" id="b">Bu</span> <span class="b">da</span>
<i class="b">gecer</i>.
<span id="b">Burada Span kullaniliyor</span>
<a href="http://www.google.com">Tikla</a>
</body>
</html>
css1.html
Style Sheet’leri başka bir dosyada sakladığınızda o dosyanın adını “link” tagını
kullanarak “href” parametresinde tanımlayabilirsiniz. “type “ ve “rel”
taglarınıda yukarıdaki örnekteki gibi tanımlarsanız benimcss.css dosyasını
HTML sayfanızda kullanabilirsiniz. Şu an böyle bir dosyamız olmadığı için
ekran görüntüsü Style Sheet olmadan durağan bir görüntü verecektir.
Şekil19
Style Sheet kullanarak bu sayfayı canlandırmayı diğer bölümde anlatacağım.
Style Sheet teknolojisinin birde üçüncü kullanım şekli vardır. Bunu daha önceki
örneklerimizde kullanmıştım. Kullandığımız HTML tagında “style” parametresi
ile Style Sheet teknolojisini kullanabiliriz.
Musa ÇAVUŞ 42
<html>
<body style="background:green;">
</body>
</html>
css2.html
Şekil20 Gördüğünüz gibi “style” parametresinde Style Sheet dilini kullandım ve
tarayıcının arka planının yeşil göstermesini sağladım. Bu tür kullanımlar çok
basittir fakat tavsiye edilmiyor, çünkü CSS kullanımdaki avantajları
kullanmamış oluyorsunuz. CSS’teki en büyük avantaj HTML yapısını ve
görselliği ayırmasıdır. Bunu bir sonraki bölümde daha iyi anlayacağız.
2.5. CSS
Musa ÇAVUŞ 43
CSS (Cascadıng Style Sheets) web tasarımcıların işini çok kolaylaştırmaktadır.
JavaScript ile CSS’i kombine ettiğinizde büyük avantajlar elde etmiş olursunuz.
CSS ile web sayfasındaki görünümler genelleştiriliyor. Bunu yapabilmeniz için
CSS’i anlamanız gerekiyor. Ben burada CSS konusuna kısa değinmek
istiyorum, çünkü kitabımızın konusu CSS değil fakat JavaScript ile kullanımını
gösterebilmek için CSS’e kısa bir giriş mutlaka yapılması gerekmektedir.
Alışılmışın dışında biraz geniş bir açıklama yapmak istiyorum. Lütfen iyi
okuyun ve doğru uygulayın, çünkü bu bölümde verilen bilgiler önemlidir. En
azından CSS nasıl çalışıyor onu bilseniz bile diğer bölümlere geçebilirsiniz.
<html>
<head>
<title>CSS</title>
</head>
<style type="text/css">
<!--
h1, h4 {
background : pink;
}
h1.a {
color : purple;
}
.b {
font-size : 49px;
visibility : hidden;
}
#b {
background : #aa1611;
}
* {
background : #a06611;
}
a:hover{
background : #007011;
}
a{
color : #ffffff;
text-decoration : none;
Musa ÇAVUŞ 44
}
-->
</style>
<body>
<h1>Ates bacayi sarmis</h1>
<h1 class="a">Baca atesi sarmis mi?</h1>
<span class="b" id="b">Bu</span> <span class="b">da</span>
<i class="b">gecer</i>.
<span id="b">Burada Span kullaniliyor</span>
<a href="http://www.google.com">Tikla</a>
</body>
</html>
css3.html
Şekil21 CSS kullanarak daha önceki web sayfamızın birden nasıl canlılık kazandığını
Şekil21’de görüyorsunuz. css3.html dosyasındaki CSS bilgisini anlarsanız,
Musa ÇAVUŞ 45
kitaptaki CSS ile JavaScript örneklerini anlamış olursunuz. CSS’te mantık çok
basittir, önce değiştirmek istediğimiz alanı belirtiriz, sonra “{}” parantezleri
içerisinde bu alanlarla ne yapmak istediğimizi tanımlarız. h1 ve h4 alanlarında
bir tanımlama yapabilmek için “h1, h4” yazarız. Bu kısma selektör deniliyor.
Örnekte h1 ve h4 alanlarının arka plan rengini değiştirmek istediğim için
“background” tanımlaması yaptım. Đki nokta üstü üste “background”
tanımlamasına iki nokta üst üsteden sonra yazdığım değeri atamaktadır. Noktalı
virgülle bir tanımlamayı bitirmiş oluyoruz. Lütfen eşittir işareti yerine iki nokta
üst üste kullanıldığına dikkat edin. Bazı tarayıcılar eşittir işaretini kabul ettikleri
için bu hataya düşebilirsiniz ve eşittir işaretini kabul etmeyen bir tarayıcı ile
karşı karşıya kaldığınızda hatanın nereden kaynaklandığını bulamayabilirsiniz.
Selektör tanımlamalarının içerisinde kullanılan tanımlamalar aslında kendini
açıklayıcı bir nitelik taşımaktadır. Örnekte kullandığım, “font.size”,
Đngilizceden tercüme edersek yazı tipi büyüklüğü anlamına gelir. “visibility”
görünürlük manasını taşır. “color” renk demektir. Bu anlamlar doğrultusunda da
sayfamızda değişiklikler olmaktadır.
“h1.a” değişken selektörüdür. HTML kodunda “<h1 class=”a”...” olarak
tanımlanan bölgeye bu değişken selektörü hükmetmektedir. “h1” HTML
tagında “class” parametresini kullanarak “h1.a” değişken selektöründeki
tanımlamaların burada uygulanmasını bu şekilde sağlamış olduk. “.b” gibi
selektörler “class” parametresinin değeri “b” olan tüm HTML tagları işlem
görür. Bizim örneğimizdeki <span> ve <i> tagında olduğu gibi. Başka bir
selektör şeklide “#” ile başlayan selektörlerdir. Bu selektörler, HTML taglarında
“id” parametresi kullanılan taglarla işlem görmektedirler. “*” selektörü HTML
taglarında kısıtlama getirilmiyorsa hepsi için geçerlidir. Çok ilginç bir
selektörde “a:hover” selektörüdür. Fare ile çıkan web sayfasında “Tıkla”
kelimesinin üzerine geldiğinizde renginin yeşil olduğunu göreceksinizdir. Ek bir
programlama yapmadan ve sadece CSS tanımlaması kullanarak bu özelliği web
sayfanıza katabiliyorsunuz.
Firefox’unuza kurduğunuz Web Geliştiricisindeki CSS’le ilgili yardımınıza
koşacak bir çok özellik vardır. Benim tavsiyem bunları tıklayarak bir bakış açısı
elde etmenizdir. Araçlar->Web Geliştirici->CSS Hata yok->CSS’yi Düzenle
seçeneğini seçtiğinizde, canlı olarak yaptığınız tüm değişiklikleri sayfanızda
görebiliyorsunuz.
Musa ÇAVUŞ 46
Şekil21 2.6. XML Web sayfaları için XML öğrenmenin ne anlamı olduğunu düşünebilirsiniz.
Birincisi XHTML kullanıyorsanız, XML hakkında bilgi sahibi olmalısınız.
XHTML için XML öğrenmek gerekiyorsa XHTML kullanmam olur biter
diyebilirsiniz. Fakat web sayfalarını programlarken orada şurada XML ile ilgili
mutlaka bağlantıya geçeceğiz, çünkü sistemler aralarındaki iletişimi XML ile
gerçekleştiriyorlar. Bunun için XML temellerini bilmemiz gerekmektedir. Basit
bir XML örneği verecek olursak şu şekildedir:
<?xml version="1.0" encoding="UTF-8"?> <websayfasi> <sayfa> <baslik>Musa Cavus</baslik> <url>http://www.musa-cavus.com</url> <aciklama>Kisisel Sayfa</aciklama> </sayfa> <sayfa> <baslik>Google Amca</baslik> <url>http://www.google.com</url> <aciklama>Googlenin Ingilizce sayfasi</aciklama>
Musa ÇAVUŞ 47
</sayfa> </websayfasi>
websayfasi.xml
Bu dosyayı Firefox ile açmaya çalışırsanız şöyle bir görüntü elde edersiniz:
Şekil22 XML’de, XHTML’de olduğu gibi kurallara uymak vardır, tolerans yoktur.
Kurallara uyulmazsa dokümanınız XML dokümanı olmaktan çıkar. XML
dokümanının XHTML’den farkı tagların daha önceden belli olmamasıdır. XML
dokümanında taglarda istediğiniz kelimeyi kullanabilirsiniz. websafaysi.xml
dokümanını size farklı bir şekilde göstermek istiyorum. Bunun için
Firefox’unuza ilk önce DOM Inspector Plugin’ini kurmalısınız. Firefox’unuza
daha önce Web Developer’i eklemiştik ve görsel olarak nasıl eklendiğini
göstermiştim. DOM Inspector’uda aynı şekilde arattırın ve Firefox
uygulamanıza kurun. Kurma işlemi bittikten sonra Araçlardan “Dom Inspector”
sekmesini tıklayın.
Musa ÇAVUŞ 48
Şekil23 DOM Inspector ile XML dokümanını incelediğimizde, bu yapının bir ağaca
benzediğini görürüz. Kök, düğümler ve yapraklar vardır. Düğümlere XML
dilinde “node” deniliyor. JavaScript içerisinde “node” objesini sıklıkla
kullanacağız.
XML dokümanı Firefox ile normal açtığımızda ağaç yapısını gördük.
Bunu Firefox bize bir metin satırı olarak iletmişti. XML dokümanına stil
bağlarsak HTML sayfası olarak görebiliriz. Bu stillerden birisi CSS
teknolojisidir.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="websayfasi.css" type="text/css" ?>
<websayfasi>
<sayfa>
<baslik>Musa Cavus</baslik>
<url>http://www.musa-cavus.com</url>
<aciklama>Kisisel Sayfa</aciklama>
</sayfa>
<sayfa>
<baslik>Google Amca</baslik>
Musa ÇAVUŞ 49
<url>http://www.google.com</url>
<aciklama>Googlenin Ingilizce sayfasi</aciklama>
</sayfa>
</websayfasi>
websayfasi1.xml XML dokümanına bir CSS dosyasını bağlamak çok kolaydır. Yukarıda “<?xml-
stylesheet” ile başlayan satırda “href” parametresine CSS dosyasını
belirtiyorsunuz, o kadar. Ben örnek bir CSS dosyası tanımladım:
* {
background-color: #11ff55;
}
sayfa {
display: block;
width: 300px;
height: 180px;
background-color: rgb(55, 215, 151);
font-size: 17px;
text-align: center;
display: block;
}
baslik {
display: block;
background-color: rgb(251, 255, 255);
color: blue;
}
aciklama {
display: block;
background-color: rgb(125, 60, 235);
}
websayfasi.css Doküman XML olduğu için etkilemek istediğiniz tagıın adını selektör kısmına
yazmanız yeterlidir. Mesela “sayfa” tagının ekrandaki görünümü için selektör
olarak “sayfa” yazdım ve “{}” parantezlerinin arasına o bölüm ile ilgili görsel
tanımlamaları verdim. Tanımlamaları açıklamıyorum, çünkü CSS ile ilgili
tanımlamalar, fakat isimlerinden ne işe yaradığını anlayabilirsiniz.
Musa ÇAVUŞ 50
websayfasi1.xml dosyasına çift tıkladığınızda tarayıcınız şöyle bir sayfa
gösterecektir:
Şekil24 Bu sayfayı bir de DOM Inspector ile incelemek istiyorum. DOM, HTML
dokümanındaki ağaç yapısına verilen addır. DOM ağacıda diyebilirsiniz.
Musa ÇAVUŞ 51
Şekil24 Bir öncekinden farkı üst tarafında “xml-stylesheet” yazması gibi gelebilir fakat
öyle değildir. “Document” yazan yazının yanındaki şekle tıklayın ve oradan
“Stylesheet” sekmesini seçin. Sağ tarafta CSS dokümanında kullandığınız
kuralları göreceksiniz. Sağ taraftan “sayfa” seçeneğini seçerseniz şu görüntüyü
elde edersiniz:
Musa ÇAVUŞ 52
Şekil25 Analizler için DOM Inspector biçilmiş kaftandır. Örneğin “background-color”
seçeneğine çift tıklayın ve “Edit Style Rule” penceresine “rgb(99, 215, 15)”
değerini girin. Göreceksiniz ki “Tamam” düğmesine basar basmaz tarayıcınız
yeni değerlere göre websafaysi1.xml dokümanını gösterecektir.
Musa ÇAVUŞ 54
3.1 Değişkenler
Değişkenler, ana hafızada programın çalışma esnasında değerleri saklayan
alanlardır. Saklanan alanlara, değerleri, eşittir işareti ile atayabiliyoruz.
Değerleri de daha önce tanımladığımız değişken ismiyle çağırabiliyoruz.
JavaScript programcısı veri tipiyle ilgilenmez, çünkü JavaScript bu işlemi
otomatik yapmaktadır. Bunun avantajı olduğu gibi çok büyük dezavantajı da
vardır.
<html>
<body>
<script language="JavaScript">
benimDegiskenim = 21;
alert(benimDegiskenim);
benimdegiskenim = 213;
alert(benimDegiskenim);
</script>
</body>
</html>
veritipidezavantaj.html
Şekil26 veritipidezavantaj.html dosyasını çift tıkladığınızda ekrana iki defa 21 sayısının
geldiğini göreceksiniz. benimDegiskenim değişkenine 21 atadık sonra alert()
fonksiyonuyla bu değişkeni parametre olarak verdik. Daha sonra
benimdegiskenim değişkenine 213 atadık ve alert() fonksiyonuyla
benimDegiskenim değişkenini parametre olarak vermemize rağmen neden
ekranda ikinci defa 21 sayısı gözüktü dersiniz? Bunun nedeni JavaScript’in
büyüklük küçüklük yazımına dikkat etmesidir. Đkinci değişkeni tanımlarken “d”
harfini küçük yazdık. Tip tanımlaması yapmadığımız için yazım hatası
Musa ÇAVUŞ 55
gözümüzden kaçtı. Özellikle büyük JavaScript programlarında bu tür hataların
olma olasılığı çok yüksektir.
JavaScript’te satır kodlaması “;” yani noktalı virgül ile biter. alert()
fonksiyonu, parametre olarak verilen değeri ekranda Şekil26’da gördüğünüz bir
pencere stilinde gösterir.
var tanımlaması
<html>
<body>
<script language="JavaScript">
degisken = 5.67;
alert(61 * degisken);
degisken = 234 /119;
a = "abc";
var b = true;
</script>
</body>
</html>
veritipleri.html
Şekil27
JavaScript’te değişkenlere istediğimiz değerleri atayabildiğimizi gördük.
Değişken atamalarında veritipleri.html örneğindeki gibi matematiksel işlemler
yaparak bunları gerçekleştirebiliriz. “var” tanımlamasına ne gerek var
denilebilir. “var” tanımlaması bir değişkenin değişken olduğunu tanımlar. “var”
kullanılmadan yapılan tüm değişken tanımlamaları JavaScript dünyasında genel
değişken olarak algılanır. Mesela fonksiyon içerisinde “var” sözcüğü
kullanılmadan yapılan bir tanımlama o değişkenin genel bir değişken olduğunu
gösterir. Başka programlama dillerinde bu böyle değildir, fonksiyon içerisinde
yapılan tanımlamalar sadece fonksiyon içerisinde kalmaktadır. “var”
Musa ÇAVUŞ 56
sözcüğüyle bunu değiştirebiliyoruz ve değişkenin sadece fonksiyona ait
olduğunu söylemiş oluyoruz.
3.2 Diziler (Arrays)
Diziler, JavaScript’te zor konular kategorisinde yer alır. Ben doğru anlatılırsa
zor olmayacağı inancındayım. Ayrıca diziler size büyük kolaylıklar
sağlamaktadır ve rutin olan işlemleri döngüler eşliğinde halledebilirsiniz. Dizi,
bir çok veri tipinin bir değişkende tutulması ve verilere bir indeks ile erişim
sağlanan mekanizmadır. Ufak bir kod ile dizileri anlatmaya başlamak istiyorum:
<html>
<body>
<script language="JavaScript">
dizi = new Array();
document.write(dizi[0]);
dizi[0] = 5;
document.write(dizi[0]);
dizi[0] = "Kalem";
document.write(dizi[0]);
</script>
</body>
</html>
diziler1.html
Şekil28
Musa ÇAVUŞ 57
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>
<script language="JavaScript">
a = new Array(10);
a[0] = 1;
a[1] = 2;
alert(a.length);
i = 0;
while(i < a.length) {
document.write(a[i] + "<br>");
i++;
}
</script>
</body>
</html>
diziler2.html
Musa ÇAVUŞ 58
Şekil29
Şekil30
“a” dizisininin boyutunu “new Array(10)” tanımlamasında parantez içerisine
“10” değerini yazarak onluk bir dizi olarak ayarlayabiliyorsunuz. Daha sonra
dizinin birinci elemanına “1” değerini atadım ve ikinci elemanına “2” değerini
atadım. length() fonksiyonu dizinin boyutunu sayısal olarak vermektedir. Bizim
örneğimizde bu değer 10’dur, çünkü dizinin boyutunu 10 olarak ayarlamıştık.
Ekrana alert() fonksiyonuyla önce dizinin boyutu olan 10 getirilmektedir.
Tarayıcı ise dizinin ilk iki değeri atandığı için atanan sayıları göstermektedir.
Dizinin diğer elemanlarına değer atanmadığı için “undefined” yazısı
gelmektedir. Yani tanımlı değil yazısı gelmiştir.
JavaScript kodunda “a[20]=10” gibi bir tanımlama yapsaydık dizinin
boyutu, ilk başta 10 olarak tanımlamamıza rağmen 21 olacaktı.
Musa ÇAVUŞ 59
<html>
<body>
<script language="JavaScript">
a = new Array(10);
a[0] = 1;
a[1] = 2;
a[20] = 21;
alert(a.length);
i = 0;
while(i < a.length) {
document.write(a[i] + "<br>");
i++;
}
</script>
</body>
</html>
diziler3.html
Şekil31
Musa ÇAVUŞ 60
Şekil32
Buradan şunu anlıyoruz, bir diziye atama yaparsak boyutunu büyütmüş
oluyoruz.
3.3 Operatörler
JavaScript dilinde diğer dillerde olduğu gibi operatörler mevcuttur. Ben bunları
bu bölümde yüzeysel olarak göstereceğim ve diğer konularda örnekler
derinleştikçe operatörleri kullanarak daha geniş açıklamalar yapacağım. Burada
sadece operatörlere değineceğim.
Musa ÇAVUŞ 61
Atama operatörü
Bir değişkene değer atamak isteniliyorsa atama operatörü kullanılır. Đşlem “=”
işaretiyle yapılır.
Büyük, küçük ve eşitlik operatörleri
Bunlar çok kullandığımız operatörlerin başında gelir. Đleride de göreceğimiz gibi if cümleciklerinde genellikle bunları kullanırız. Đnsan zihniyetine de yatkındır. Hani ufak çocuklara deriz, oğlum sen büyünce araba kullanabilirsin şimdi kullanmazsın. Burada çocuğun beyninde ben büyük isem araba kullanırım oluşuyor. if cümlesine fazla girmek istemiyorum, fakat ufak birkaç örnek verirsek bu operatörler beyin hücrelerimize daha iyi yerleşmiş olur. <html> <body> <script language="JavaScript"> abi = 34; abla = 32; ben = 25; if (abi > 17) { document.write("Abim araba surebilir"); document.write("<br>"); } if (abi >= 18) { document.write("Abim araba surebilir"); document.write("<br>"); } if (abla < abi) { document.write("Ablam, abime abi diyecek"); document.write("<br>"); } if (ben == 15) { document.write("Ben en ufagim"); document.write("<br>"); } if (ben != 18) { document.write("Ben araba suremem"); document.write("<br>"); }
Musa ÇAVUŞ 62
</script> </body> </html> operatorler1.html
Şekil33 if cümlecikleri genellikle kıyaslama yapmak içindir, bu konuya sonra parmak basacağız. Bizim bu konuda öğrenmek istediğimiz operatörlerdir. Đlk if cümlesinde diyoruz ki eğer ağabeyim 17 yaşından büyükse araba sürebilir. 17’den sonra gelen tam sayı 18 olduğu için ve biz abi değişkenini tam sayı olarak tanımladığımız için bu önerme doğru olmuş oluyor. Đkinci cümlecikte diyoruz ki eğer ağabeyim 18 yaşından büyük ya da eşitse o zaman araba sürebilir. 18 yerine 17 koysaydık, eşitlik dolaysıyla ağabey değişkeni 17 olsa bile bu önerme doğru olmuş olurdu, fakat biz biliyoruz ki araba sürmek için 18 yaşında olmak gerekiyor. Üçüncü cümlede ablam ağabeyimden küçükse ablam ağabeyime anadoludaki geleneğe göre abi demesi gerekiyor. Gerçi şimdilerde yavaş yavaş bu siliniyor, güç, kuvvet ve para kimdeyse ona abi abla deniliyor, fakat bu bizim konumuzun dışında. Dördüncü cümlede ben 15 yaşındaysam ufağım diye bir mesaj çıkıyor. Dikkat edilmesi gereken, “= = “ şeklinde bir operatör kullanılmıştır. Kıyaslamalarda “= = “ kullanılır, aktarmalarda “=” kullanılır. Birinde çift diğerinde tek eşittir operatörü kullanılır. Son cümlede ise ben 18 yaşında değilsem araba süremem ifadesinin JavaScript dünyasındaki şekli sunulmuştur. Eşit değil JavaScript’te görüldüğü gibi “!=” şeklinde ifade edilmektedir.
Musa ÇAVUŞ 63
Bir de && ve || operatörleri çok kullanırız, fakat bunlarda if cümleciklerinde anlatacağım. Diğer bazı operatörleri de örneklerde yeri geldiğince, ihtiyaca göre değineceğim. Operatör tablosunu da fikir edinmeniz açısından ve ihtiyaç duyulduğunda bakılması için aşağıda sunuyorum: Operatör Açıklama ++, -- artırma, eksiltme +, - toplama, çıkartma ~ bit tümleme ! logik tümleme *, /, % çarpma, bölme, kalan + Metinleri birleştirme << sola kaydırma >> sağa kaydırma <, <=, >, >= nümerik eşitleme = =, != eşitlik, eşit değil & bit düzeyinde ve işlemi ^ bit düzeyinde xor | Bit düzeyinde veya işlemi && logik ve işlemi || logik veya işlemi = atama işlemi Aritmetiksel operatörler
Sayısal değerler arasında hesaplamalar yapabilmek için aritmetiksel
operatörlere ihtiyaç duyarız. Toplama işlemi “+”, çarpma işlemi “*”, çıkarma
işlemi “-“, bölme işlemi “\”, modül işlemi “%” işaretleriyle yapılmaktadır.
Ayrıca özel aritmetiksel operatörlerde kullanılabilinmektedir.
JavaScript’te, operatörlerle farklı kombinasyonlu işlemlerde yapabilirsiniz. a+= 2 dediğinizde, a = a + 2 gibi bir işlem gerçekleştirmiş oluyorsunuz. Burada a değişkeni 2 değer artırılmaktadır. Ayrıca JavaScript parantezleri otomatik olarak uygulamaktadır. Örneğin a *= 3 + 5 dediğimizde Java bunu içinde şu şekilde çevirmektedir:
a = a * (3 + 5)
Değişkenleri artırmak ve eksiltmek programcının en çok yaptığı işlemlerden biridir. Eğer biz birer sayı artırmak ya da azaltmak istiyorsak JavaScript kardeşler bizi düşünerek bizim için bir kolaylık sağlamışlar. Aslında bu kolaylığı C dünyasından gelenler için olduğunu da düşünebiliriz. i++; i = i + 1 anlamına gelmektedir j--; j = j – 1 anlamına gelmektedir
Musa ÇAVUŞ 64
Artırma ve eksiltme işlemlerinde çoğunlukla i ve j harfleri kullanılmaktadır. Hangi nimete hikmet böyle yapılıyor, bunu bende bilmiyorum. “++” ve “--“ kullanılırken dikkat edilmesi gereken nokta, bu işaret kombinasyonunu değişkenden önce mi sonra mı kullandığımızdır. Bu işaretleri değişkenden önce kullanırsak, değişkendeki değer önce değişir ve değişken, o değer ile işlem görür. Sonra kullanırsak tam tersi olur. Gördüklerimizin hepsini bir örnek ile daha iyi pekişeceğinin kanısındayım. <html> <body> <script language="JavaScript"> i = 340; j = 10; document.write(++i); document.write("<br>"); document.write(++j); document.write("<br>"); document.write(i); document.write("<br>"); document.write(j); document.write("<br>"); document.write(i+j); document.write("<br>"); document.write(i---++j); </script> </body> </html> operatorler2.html
Musa ÇAVUŞ 65
Şekil34 Mantıksal Operatörler Birden çok şartı tanımlanmış kalıplar doğrultusunda bağlamak istiyorsanız bu operatörleri kullanmanız gerekmektedir. Örneğin 8 ve 11 ile bölünen sayıları bulmak istedğimizde ya da birden fazla şartı birbirine bağlamak istediğimizd bu operatörleri kullanırız. Java’da mantıksal operatörler olarak şunlar vardır: & (Ve), | (Veya) , ^ (Xor), ! (Değil). Xor: Đki tanımlamada true ya da i false ise bu işlem bize false sonucu verir. Diğer durumlarda true değerini iletir. Ve: Tanımlamalardan birisi false ise sonuç false olur. Diğer durumlarda true. Veya: Tanımlamalardan birisi true ise, sonuç true olur. Diğer durumlarda false. Değil: Tanımlamanın tersidir. Ve ve Veya işlemlerinde derleyici birinci tanımlamayı göz önüne alır. Mesela diyelim iki tanımlama var ve biz bunlarla bir Ve işlemi gerçekleştiriyoruz. Şöyle ki: false & true. Açıklamamıza göre Ve işlemlerinde tanımlamalardan birisi false ise sonuç false olacaktır.
<html>
<body>
<script language="JavaScript">
document.write(true | false);
document.write("<br>");
document.write(true & false);
document.write("<br>");
document.write(!false);
document.write("<br>");
document.write(true ^ false);
document.write("<br>");
document.write(1 | 3);
document.write("<br>");
</script>
Musa ÇAVUŞ 66
</body>
</html>
operatorler3.html
Şekil35 true ve false işlemi Veya işlemine sokulunca sonuç true oluyor. true ve false Ve işlemine sokulunca sonuç false oluyor. false değerinin değili true olmuştur. true ve false Xor işleminden geçtiğinde şartımıza göre true sonucunu vermektedir. 1 ile 3 sayılarını Veya işleminden geçirince neden 3 olmaktadır? 1 sayısı, 2 tabanlı sayı sistemine göre “01” şeklinde ifade edilir.3 sayısıda, “11” şeklinde ifade edilir. 0 bilgisayar dilinde false, 1 ise true değerini alır. Böylece 1, sayısını “false true” şeklinde hayalımizde düşünecek olursak, 3 sayısını “true true” olarak düşünebiliriz. 1 sayısındaki ilk değer olan false ile 3 sayısındaki ilk değer olan true değerlerini Veya işleminden geçirdiğimizde true değerini alacağız. Yine 1 sayısındaki true değeriyle, 3 sayısındaki ikinci değer olan true değerini Veya işleminden geçirecek olursak sonuç true olacaktır. Yani 1 ile 3 sayısının Veya işleminden bize “true true” gibi bir ifade çıkacaktır. Bunun sonucu “11” olacaktır. “11” olan ikilik sayı sayı sistemini 10 tabanındaki bir sayı sistemine çevirecek olursak bize 3 rakamını verecektir. “|”, “&” ve “^“ işlemleri bit işlemleri olduğu için dikkat ettiyseniz true ve false işlemlerinde “1” ya da “0” sonucu oluşmaktadır. “1” true “0” ise false demektir. Nasıl mantık operatörlerini öğrenerek mantığınız alt üst oldu mu? Ve ve Veya işlemi bilgisayar dünyasının temellerinden biridir. Yalnız şu da bir gerçek bit işlemleri için ben şimdiye kadar hiç bir program yazmadım, sizde yazmayacaksınız diye düşünüyorum. Peki niye anlatıyorum bunları, dedim ya yeşillik olsun ve JavaScript’e ısınalım. Diyelim ki siz bir boksörsünüz ve
Musa ÇAVUŞ 67
ısınmadan dalıyorsunuz rakibinize, kaslarınızda mutlaka bir incinme meydana gelecektir. Bende şimdi hemen dalsam derin konulara sizinde beyin hücrelerinizde bir incinme meydana gelecek. Zaten farkına vardıysanız bir konuyu fazla saçmalamıyorum, sadece gerektiği kadar anlatıyorum. Bana güvenin. 3.4. Açıklamalar JavaScript kodlarınızda iki şekilde açıklama yapabilirsiniz. Birincisi “//” işareti
kullanarak sadece o satırda geçerli olmak şartıyla yapabileceğiniz açıklamalar.
Açıklamaların ikinci şekli “/* */” aralığında yapılmaktadır. Bu açıklama türüyle
daha çok satırda açıklama yapabilirsiniz ve her satır için “//” işareti
tanımlamanız gerekmemektedir.
<html>
<body>
<script language="JavaScript">
// Bu bir aciklamadir
/*
document.write(4);
document.write("<br>");
*/
</script>
</body>
</html>
aciklama.html 3.5 if ve switch karar yapıları
Bu karar yapılarıyla programımızın akışını değiştirebiliriz. if, Türkçe olarak
“eğer” demektir. Programınızı kodlarken, programınıza “eğer şu olursa şunu
yap” gibi direktif vermek isteyebilirsiniz. JavaScript’te bunu yapabilmeniz için
“if” ya da “switch” karar yapılarını kullanabilirsiniz. Döngülerinde kendilerine
özgü karar yapıları vardır, fakat bunu döngülerde ele alacağım.if komutuyla
ilgili kolay bir örnekle başlamak istiyorum:
Musa ÇAVUŞ 68
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
document.write("<br>");
}
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
document.write("<br>");
}
if(a != 20) {
document.write("a degiskeni 20 sayisina esit degil");
document.write("<br>");
}
</script>
</body>
</html>
if.html
Şekil36
Musa ÇAVUŞ 69
if 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>
<script language="JavaScript">
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
document.write("<br>");
}else
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
document.write("<br>");
}else {
document.write("a degiskeni 20 sayisina esit");
document.write("<br>");
}
</script>
</body>
</html>
ifelse.html
Musa ÇAVUŞ 70
Şekil37 Birinci blokta “a” değişkeninin “10” sayısından küçüklüğünü kontrol ettim.
Đkinci blok, eğer birinci if karar yapısı işlem görmediyse “else if” yani “değilse
eğer” şeklinde işleme giriyor ve “a” değişkenini “10” sayısından büyüklüğünü
kontrol ediyor. Son blok ise, ilk iki blok işlem görmediyse “else” yani “bunların
hiçbiri doğru değilse” işleme giriyor.
Birden çok kıyaslama işlemini birleştirmek istersek yardımımıza “&&”
ve “||” işaretleri koşmaktadır.
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10 && a > 5) {
document.write("a degiskeni 10 sayisindan kucuk"+
" ve 5 sayisindan buyuk");
document.write("<br>");
}
if (a > 10 || a < 20) {
document.write("a degiskeni 10 sayisindan buyuk"+
" ya da 20 sayisindan kucuk");
document.write("<br>");
}
</script>
</body>
</html>
ifbirlestir.html
Musa ÇAVUŞ 71
Şekil38 “&&” 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>
<script language="JavaScript">
a = 1;
switch (a) {
case 0 : document.write("0" + "<br>");
break;
case 1 : document.write("1" + "<br>");
break;
case 2 : document.write("2" + "<br>");
break;
case 3 : document.write("3" + "<br>");
Musa ÇAVUŞ 72
break;
default: document.write("4" + "<br>");
}
</script>
</body>
</html>
switch.html
Şekil39 JavaScript, switch ile başlayan cümlelerde sırayla tüm case bloklarını taramaktadır. Eğer uyan bir case bulursa, bu bloğun içerisindeki kodu break ifadesini buluncaya kadar işleme sunmaktadır. break ifadesini kullanmazsak, bir sonraki case bloğu otomatikman işlem görmektedir. Bir sonraki case ifadesinin doğru ya da yanlış olması bu durumda hiç önemli değildir. switch işlemlerinin if karar yapısına göre en büyük dezavantajı esnek olmamasıdır ve sadece tek bir değeri kıyaslamasıdır. Mesela if karar yapısında bir değişken aralığını kontrol edebilirken switch yapısında böyle bir olanağınız yoktur. 1 ile 100 arasındaki tüm sayıların bir değişkenden küçük mü değil mi olduğunu kontrol edebilmek için switch yapısında aralıkta bulunan tüm sayıları kod halinde teker teker yazmalısınız. JavaScript’te diğer programlama dillerinden farklı olarak switch karar yapılarında dizgiler ya da başka bir tabirler String kullanabilirsiniz. <html> <body> <script language="JavaScript"> a = "Veli"; switch (a) { case "Ali" : document.write("Ali" + "<br>"); break; case "Veli" : document.write("Veli" + "<br>"); break;
Musa ÇAVUŞ 73
case "Selami" : document.write("Selami" + "<br>"); break; case "Hayri" : document.write("Hayri" + "<br>"); break; default: document.write("Isimsiz Kahraman" + "<br>"); } </script> </body> </html> switchdizgi.html
Şekil40 3.6 Döngüler Bakın bu da çok önemli bir konudur. Döngüler belirli kodları tekrarlayarak işleme sunarlar. Bir döngü, blok içeriği ve önermeden oluşur. Döngü önermesi, döngünün ne kadar süreceğini belirtir. while döngüsü while döngüsüne girilmeden önce, döngü önermesi kontrol edilmektedir. Eğer döngü önermesi doğru ise, döngü bloğu işlenmektedir, değilse döngü sona erdirilmektedir. if önermelerinde olduğu gibi döngü önermesi true olmalıdır. <html> <body> <script language="JavaScript"> i = 0; while(i < 10) { document.write(i + "<br>"); i++; }
Musa ÇAVUŞ 74
</script> </body> </html> while.html
Şekil41 while döngüsünde, önermeyi while yazdıktan sonra parantez açıyoruz ve parantezin içerisine kodluyoruz. Önerme true değerini alıncıya kadar döngü dönüyor. Örnekte i değişkenine 0 değerini atadım ve while döngüsündeki önermeye, i değişkeni 10 sayısından ufak mı önermesini kodladım. Ekrana i değişkeni 10 sayısından ufak olduğu sürece i değişkeninin o anki değerini yazdırttım. do - while döngüsü Bu döngüde ilginç olan, önermenin döngü sonunda kontrol edilmesinde yatmaktadır. Bu yüzden döngü içerisindeki blok bir kere mutlaka işlem görmektedir. <html> <body> <script language="JavaScript"> i = 50; do { document.write(i + "<br>"); i++; }
Musa ÇAVUŞ 75
while(i < 40); </script> </body> </html> dowhile.html
Şekil42 Döngünün sonunda önerme kontrol edildiği için, döngü önermeye kadar devam etmiştir. Önerme ilk kontrolde false çıktığı için döngüden çıkılmıştır. Dikkat edilmesi gereken önemli husus ise, döngünün sonunda noktalı virgülü unutmamamız. for döngüsü while döngüsünün özelleştirilmiş halidir. Daha çok sayaçlı işlemlerde kullanılmaktadır ve benim en çok kullandığım döngüdür. <html> <body> <script language="JavaScript"> for (i = 1; i <= 10; i++) document.write("Sayi: " + i + "<br>"); </script> </body> </html> for.html
Musa ÇAVUŞ 76
Şekil43 for döngüsünün ilk kısmında değişken tanımı yapılıyor ve değeri aktarılıyor. Đkinci kısmında önerme belirtiyor. Üçüncü kısmında ise değişken bir artırılıyor. Değişkeni artırma işlemi bloğun sonunda yapılmaktadır. Kısımlar noktalı virgüllerle ayrılmaktadır. for döngülerin avantajları kendisini dizilerde göstermektedir. <html> <body> <script language="JavaScript"> firma = new Array(); firma[0] = "Teneke Fabrikasi<br />"; firma[1] = "Kaporta sokaka 32<br />"; firma[2] = "42123 Konya<br />"; firma[3] = "Telefon: 0332393202322"; for(i = 0; i < firma.length; i++){ document.write(firma[i]); } </script> </body> </html> fordizi.html
Musa ÇAVUŞ 77
Şekil44 length() fonksiyonuyla for döngüsünü dizinin uzunluğu kadar döndürüyorum ve dizideki tüm bilgileri ekrana yazdırmış oluyorum. Dizilerle çalışan for döngüleri için kolaylık olması açısında bir operatör vardır. Bu operatör in operatörüdür. <html> <body> <script language="JavaScript"> firma = new Array(); firma[0] = "Teneke Fabrikasi<br />"; firma[1] = "Kaporta sokaka 32<br />"; firma[2] = "42123 Konya<br />"; firma[3] = "Telefon: 0332393202322"; for(i in firma){ document.write(firma[i]); } </script> </body> </html> fordiziozel.html
Musa ÇAVUŞ 78
Şekil45 i değişkeninden sonra in operatörü kullanıyorsunuz ve ondan sonrada hangi diziyi döngü içerisinde işleme sokacaksanız onu tanımlıyorsunuz. Bu kullanım tarzı for döngüsü sadece dizilerle kullanılacaksa geçerlidir. break ve continue Herhangi bir döngü içerisinde break komutu kullanılırsa, program döngünün o noktasından sonra çıkar ve döngüden sonraki koda geçer. <html> <body> <script language="JavaScript"> i = 10; while (true) { if (i < 0) { break; } document.write(i+"<br>"); i--; } </script> </body> </html> break.html
Musa ÇAVUŞ 79
Şekil46 Sonsuz bir döngünün bloğuna bir if cümleciği yazdım. Eğer i değişkeni sıfır değerinden ufaksa break komutunun işlenmesini istedim. Yine herhangi bir döngü içerisinde belirli bir noktadan sonraki kısmın işlev görmesini istemiyorsak ve döngünün buna rağmen dönmesini istiyorsak continue komutunu kullanırız. <html> <body> <script language="JavaScript"> for (i = 0; i <= 10; i++) { if ((i % 2) == 1) continue; document.write(i + " sayisi cift "+ "sayidir" +"<br>"); } </script> </body> </html> continue.html
Musa ÇAVUŞ 80
Şekil47 Bu döngüde ki değişkeni ikiye bölünmekte, eğer kalan 1 ise anlıyoruz ki bu sayı tek bir sayıdır ve bu blokta continue komutu kullanıyoruz. Böylelikle ekrana i değişkeninin çift bir sayı olduğu yazılmıyor. 3.7 Fonksiyonlar Muhtemelen program parçanızda birkaç adımınız vardır ve bu adımları birleştirerek bir isim altında toplamak isteyebilirsiniz. JavaScript’te de diğer programlama dillerinde olduğu gibi bunun için fonksiyonlar vardır. Aynı program parçalarını tekrar tekrar kodlamak yerine fonksiyonları kullanmak daha avantajlıdır. Böylelikle fonksiyon içerisinde yapmak istediğimiz değişiklik, fonksiyon çağrıldığı tüm bölümlerde etkinliğini göstermiş olur.• Karmaşık programlamalar ufak parçalara bölünmüş olur ki anlaşılması kolaylaşmış olur. Bir fonksiyon birden fazla bileşenden oluşmaktadır. Fonksiyon başı ve fonksiyon bloğu ana bileşenlerdir. Fonksiyon, fonksiyon başı, sonuç tipi, fonksiyon ismi ve parametre listesinden oluşmaktadır. Basit bir örnekle fonksiyonlara giriş yapmak istiyorum: <html> <body> <script language="JavaScript"> function test() { document.write("Selam ne haber"); } test(); </script> </body> </html> fonksiyon.html
Musa ÇAVUŞ 81
Şekil48 Kodlamanın bir fonksiyon olduğunu function anahtar kelimesiyle belirtiyoruz. Daha sonra belirttiğimiz fonksiyona bir isim veriyoruz. Ben örnek fonksiyonumuza test adını verdim. Şimdilik parametre kullanmadığım için parantezi açtım ve hiçbir şey yazmadan kapattım. Ardından “{}” parantezini kullandım. “{}” parantezleri arasına fonksiyonunuzun tüm kodunu yazabilirsiniz. Son olarak test(); şeklinde yazdığım fonksiyonu çağırıyorum ve tarayıcı fonksiyonun içindeki işlemi ekrana yansıtıyor. test(); çağrısını kodunuzda istediğiniz kadar kullanabilirsiniz. Ne kadar çok kullanırsanız, tarayıcınız o kadar çok “Selam” ne haber” mesajını gösterecektir. Fonksiyonların en büyük avantajı karmaşık kod parçalarını tek bir isim altında toplamasıdır. Fonksiyonlarda parametre kullanımı Fonksiyonlarımızda parametre kullanabiliriz. Parametreleri de fonksiyon içerisinde işleve sokabiliriz. <html> <body> <script language="JavaScript"> function topla(a, b) { document.write(a+" ve "+b+" sayisinin toplami :"+(a+b)); } topla(5,6); </script> </body> </html> fonkparametre.html
Musa ÇAVUŞ 82
Şekil49 a ve b değişkenlerini topla() fonksiyonunda parametre olarak kullandım. JavaScript’te fonksiyon parametreleri virgül ile ayrılıyor. a ve b değişkenlerini topla() fonksiyonunda parantezler arasına yazdım ve topla() fonksiyonunu çağırırken parametre olarak 5 ve 6 değerlerini verdim. Böylelikle a değişkeninin değer 5 ve b değişkeninin değeri 6 olmuş oluyor. Fonksiyon içerisinde de 5 ve 6 değişkenini toplattım ve tarayıcıda gösterttim. a ve b değişkenlerini toplarken parantez içerisinde topladım, çünkü parantez kullanmasaydım, write() fonksiyonu bu iki değişkeni String olarak algılayacaktı ve 11 sayısı yerine 5 ve 6 sayısının yan yana gelmesinden oluşan 56 sayısını gösterecekti. Đsterseniz parantezleri kaldırın ve örneğinizi tekrar çalıştırarak sonucu izleyin. Farklı sayıda parametre kullanmak şartıyla aynı fonksiyon adını kullanabilirsiniz. <html> <body> <script language="JavaScript"> function topla(a, b) { document.write(a+" ve "+b+" sayisinin toplami :"+(a+b)); document.write("<br>"); } function topla(a, b, c) { document.write(a+", "+b+" ve "+c+" sayilarinin toplami :"+(a+b+c)); document.write("<br>"); } topla(5,6,9); topla(7,16,29); </script> </body> </html> fonkparametre1.html
Musa ÇAVUŞ 83
Şekil50 c değişkeni ekleyerek aynı fonksiyon ismi adı altında bir fonksiyon tanımlaması yapılabiliniyor. Fonksiyonlarda parametrik olarak verilen değişkenler sadece o fonksiyon için geçerlidirler. Genel değişkenler gibi her tarafta kullanılamazlar. <html> <body> <script language="JavaScript"> a = 10; function deger(a) { document.write("a degiskeninin fonksiyon icindeki degeri: " + a + "<br>"); } document.write("a degiskeninin fonksiyon oncesi degeri: " + a + "<br>"); deger(2); document.write("a degiskeninin fonksiyon sonrasi degeri: " + a + "<br>"); </script> </body> </html> fonkgeneldegisken.html
Musa ÇAVUŞ 84
Şekil51 Fonksiyondaki a değişkeni ile fonksiyon dışında kullanılan a değişkeni farklı değişkenlerdir. Fonksiyon içerisinde kullanacağınız parametreler sadece fonksiyon için geçerlidir. Fonksiyon içinde yapılan değişken değer değişimleri fonksiyon dışında bir etkiye sahip değildir. return Bir fonksiyonun değeri return anahtar kelimesiyle iletilmektedir. Fonksiyon içerisinde yaptığınız işlemlerin sonucunu return anahtar kelimesinden sonra yazın ve noktalı virgül ile kapatın. Bu fonksiyonun değeri olmuş oluyor. Fonksiyonun değerini, fonksiyon dışında kullanmak isterseniz, bir değişkene fonksiyonu atamanız yeterlidir. <html> <body> <script language="JavaScript"> function modlama(a, b) { return a % b; document.write("Gereksiz bir yazi"); } deger = modlama(17, 6); document.write(deger); </script> </body> </html> fonksiyondeger.html
Şekil52 return anahtar kelimesi çağrıldıktan sonra fonksiyondan çıkılır. Yukarıdaki örnekte de gördüğünüz gibi return işleminden sonraki satır işlem görmemektedir, çünkü fonksiyon matematiksel işlemi değer olarak iletmektedir ve fonksiyondan çıkılmaktadır.
Musa ÇAVUŞ 85
Kendini çağıran fonksiyon JavaScript kendini çağıran fonksiyon mantığını desteklemektedir. <html> <body> <script language="JavaScript"> i = 1; function islem(son) { if(i < son) { i=i+i; islem(son); } else document.write("sonuc: " + ": " + i + "<br />"); } islem(100); </script> </body> </html> fkendinicagir.html
Şekil53 islem fonksiyonunun içinde if kavramı true değerini alırsa, if kavramında fonksiyon tekrar çağrılıyor. Program, fonksiyonun çağrıldığı noktayı iç mekanizma olarak yığın dediğimiz bir bölgeye kayıt ediyor. Tekrar çağrılan fonksiyon yine if kavramında true sonucu çıkarsa, if kavramında kendisini bir daha çağırıyor. Bu işlem if kavramından false değeri çıkınca ve else işlemi bitinceye kadar devam ediyor. Bundan sonra program yığına gidiyor ve en son hangi fonksiyonu yığına koyduysa onu oradan alıyor ve kendisini çağırdığı noktadan devam ediyor.
Musa ÇAVUŞ 86
Bu yöntemin kafanızda daha iyi yer edinebilmesi için bir önceki örnekte ufak bir değişiklik yaptım: <html> <body> <script language="JavaScript"> i = 1; j = 1; function islem(son) { if(i < son) { i=i+i; islem(son); } else document.write("sonuc: " + ": " + i + "<br />"); document.write(j+++". fonksiyondayim"); document.write("<br>"); } islem(100); </script> </body> </html> fkendinicagir.html
Şekil54
Musa ÇAVUŞ 87
3.8 Eventhandler
Artık ısındık diyebiliriz, kitabın bundan sonraki konuları derinleşmeye
başlayacak ve sizde görsel olarak farklı program parçaları kodlayabileceksiniz.
Isınmasaydık bundan sonraki bölümlerde sorun yaşardık.
Tarayıcınızda fareyi hareket ettirmeniz, tarayıcınız tarafından bir olay olarak
algılanır. Bir düğmeye basmanız tarayıcıdan bir olay olarak algılanır. Bu tür
olayları JavaScript’te kullanabilirsiniz. Bu mekanizmaya Eventhandler
deniliyor. HTML 4.0 ‘dan sonra Eventhandler mekanizması HTML’e ait oldu.
http://www.w3.org/TR/html4/interact/scripts.html adresinde Attribute
definitions standartlaşmış Eventhanler’leri bulabilirsiniz. Ben size bunların bir
kaçını örneklerlede göstereceğim.
Eventhandler, on ön ekiyle başlar ve hangi olayla bağlantı kurulacaksa o olayın
Đngilizce kelimesiyle devam eder. Mesela onload, yüklenince manasına
gelmektedir ya da onmousedown, fare düğmesine basılınca anlamı taşımaktadır.
Örneklerime geçmeden bazı problemlere değinmek istiyorum. W3C’de
standartlaşmış Eventhandler’leri tüm tarayıcılar olduğu gibi desteklemiyorlar.
Bazı tarayıcılar, bir kısmını farklı desteklerken bazıları hiç desteklemiyor. Bu
yüzden bir sayfada Eventhandler kullanacaksanız, sayfanızı tüm tarayıcılarla
denemenizi öneririm.
Şekil55
Musa ÇAVUŞ 88
onMouseOver ve onMouseOut ile ilgili bir örnek vermek istiyorum:
<html>
<script language="JavaScript">
function resimcerceve(){
document.resim.border=9;
}
function resimcerceveyok() {
document.resim.border=0;
}
</script>
<body>
<h3>Fareyi resime hareket ettirin</h3>
<a href="#" onMouseOver="resimcerceve()"
onMouseOut="resimcerceveyok()">
<img src="turkiye.jpg" name="resim" border="0" /></a>
</body>
</html>
resimevent.html
Şekil56
Fare ile Türk bayrağının bulunduğu resmin üzerine geldiğinizde resmin
etrafında bir çerçeve oluşmaktadır. HTML tagı olan <a> tagının arasına yine
HTML tagı olan resim tagı <src> tagını koydum. Resim tagının name
parametresinde resim tagının isminin resim olduğunu belirttim. <a> tagında
onMouseOver ve onMouseOut Eventhandler’lerini kullandım. onMouseOver
Eventhandler’i, fare ile resmin üzerine gelince aktif oluyor ve kendisine atanan
Musa ÇAVUŞ 89
fonksiyonu çağırmaktadır. Burada resimcerceve() fonksiyonunu atadım.
Fonksiyonum parametresiz olduğu için fonksiyonun parametresiz halini atadım.
resimcerceve() fonksiyonuna baktığımızda tek bir işlem yaptığını görürsünüz.
resim isimli objeye ulaşıyor ve çerçevesinin kalınlığını 9 yapıyor. document
tanımlamasının sayfamız olduğunu düşünün, resim ise o sayfadaki resim isimli
obje. Daha sonra da bu objenin çerçevesini border değişkenini değiştirerek
değiştirebiliyoruz. onMouseOut Eventhandler’i de, fareyi resimden çekince
aktif olmakta ve resimcerceveyok() fonksiyonunu çağırmaktadır. Bu
fonksiyonda resmin etrafındaki çerçeveyi 0 yaptım.
Farkına vardıysanız W3C standartlarındaki gibi onmouseout gibi bir yazım
kullanmadım ve onMouseOut yazdım. HTML olduğu için tolerans ediliyor ve
büyüklük küçüklük fark etmiyor. XHTML kullansaydınız o zaman onmouseout
yazmanız gerekiyordu yoksa hata oluşurdu. W3C sayfasındaki
Eventhandler’leri bu şekilde sayfanıza ekleyebilirsiniz. Kullanımları çok basittir
fakat sayfanıza canlılık katmaktadırlar.
3.9 Form ve Eventhandler
Eventhandler’leri Form’larda kullanmak bize büyük avantajlar sağlayabilir.
HTML bize Form kullanmamızı sağlıyor biliyorsunuz. Form’larla kullanıcılar
metin kutularını doldurabilirler, seçenekler seçebilirler ve bunları Server
tarafındaki bir program parçasına yollayabilirsiniz. Hemen bir örneğe bakalım:
<html>
<script language="JavaScript">
function aktif(metin) {
document.getElementById("bilgi").innerHTML=metin;
}
function pasif() {
document.getElementById("bilgi").innerHTML="";
}
</script>
<body>
<form>
Kullanici Adi:
<input type="metin" name="userid"
onFocus="aktif('Kullanici adinizi girin')"
Musa ÇAVUŞ 90
onBlur="pasif()">
<br>
Sifre:
<input type="password" name="pw"
onFocus="aktif('Sifrenizi girin')"
onBlur="pasif()">
</form>
<div id="bilgi"></div>
</body>
</html>
focus.html
Şekil57
Kod parçası ilk başta biraz karışık gibi gözükebilir, özellikle Form’larla
çalışmamış kişiler yadırgayabilirler fakat anlaşıldıktan sonra çok basit olduğunu
göreceksiniz. <form> tagıyla bir Form tanımı yapıyoruz. <input> tagı giriş
yapacağımız bir nesnenin olduğunu gösteriyor. type parametresinde <input>
tagının göstereceği nesnenin tipini belirtebiliyoruz. Đlk nesnenin metin kutusu
olmasını istediğimin için type parametresine text yazdım. Đkinci nesnenin ise bir
şifre metin kutusu olmasını istedim ve type parametresini password olarak
ayarladım.
Asıl bundan sonrası çok ilginç ve bizi ilgilendiriyor. Metin kutusunda onFocus
Eventhandler’ini kullandım. onFocus Eventhandler’i kullanıcı metin kutusunu
seçerse aktif hale geliyor ve daha önce tanımladığım aktif() fonksiyonunu
çağırıyor. Bu sefer tanımladığım fonksiyonu parametrik yaptım. Parametrede
yazılan metinle beraber aktif() fonksiyonu çağrılıyor ve getElementById()
fonksiyonunun yardımıyla bilgi nesnesine ulaşılıyor. Ulaştığımız nesnenin
innerHTML değişkeninin değerini değiştiriyoruz. innerHTML değişkeni
ulaştığımız nesnenin HTML içeriğine müdahale ederek değiştirmektedir.
Musa ÇAVUŞ 91
Senaryoyu başar alırsak görüyoruz ki, kullanıcı metin kutusunu seçer seçmez
kullanıcıyı bilgilendirebilmek için tarayıcı bir yazı gösteriyor. onBlur
Eventhandler’ide onFocus Eventhandler’in tam tersidir. Metin kutusu seçili
değilken aktif olmaktadır. Aynı şekilde pw nesnesi de işlemektedir.
Musa ÇAVUŞ 93
4.1 Hata arama
Tüm programlama dillerinde olduğu gibi JavaScript’te de programlarken hata
yapabiliriz ve kodumuz hatalı olduğu için isteğimiz dışında çalışır. Bu bölümde
yaptığınız hataları nasıl bulabilirsiniz onu öğreneceksiniz. Sıradaki örneğimize
bir bakalım:
<html>
<body>
<table border width="100">
<script language="JavaScript">
sayi = Math.round(Math.random()* 30);
document.write("Cikis degeri: " + sayi );
for(sayac=0;sayac < say;sayac++) {
document.write("<tr><td>Sayi:</td><td> ", sayac,
"</td></tr>");
}
</script>
<table>
</body>
</html>
hatabul.html
Şekil58
Musa ÇAVUŞ 94
Math.random() fonksiyonu 0-1 arası rastgele bir sayı üretmektedir.
Math.random() fonksiyonu çıkan sayıyı tam sayıya yuvarlamaktadır. Ben 0-30
sayısı arasında rastgele bir sayı seçebilmek için işlemi 30 ile çarptım ve sayi
değişkenine atadım. for döngüsü sayi değişkenindeki tam sayı kadar dönecek
ve tarayıcı tablo satırı gösterecektir. Fakat gördüğünüz gibi kod hatalı olduğu
için isteğimiz gerçekleşmiyor. Firefox tarayıcısı da hatalı bir kod olmasına
rağmen bize hiçbir hata mesajı vermemektedir.
Yukarıdaki mönüden Araçlar->Hata konsolu seçeneğini seçerseniz karşınıza
şöyle bir pencere çıkacaktır:
Şekil59
Bu konsol hata bulmada çok işinizi görebilir. Đsterseniz sadece hataları
görebilirsiniz ya da sadece uyarılar ve iletileri görebilirsiniz. Đsterseniz de
hepsini birden görebilirsiniz. Örneğimiz için bakarsak “say is not defined” diye
bir hata mesajının olduğunu ve hangi satırda olduğunu görüyoruz. Diğer
tarayıcılarında buna benzer hata konsol penceresi vardır. Ben Firefox’u
kullandığım için onu gösterdim.
Musa ÇAVUŞ 95
Hatanın nereden kaynaklandığını buna rağmen bulamadıysanız kodunuzun bazı
bölümlerinde tarayıcınızda görmeniz için değerleri yazdırtın.
<html>
<body>
<table border width="100">
<script language="JavaScript">
sayi = Math.round(Math.random()* 30);
document.write("Cikis degeri: " + sayi );
alert(sayi);
for(sayac=0;sayac < say;sayac++) {
document.write("<tr><td>Sayi:</td><td> ", sayac,
"</td></tr>");
}
</script>
<table>
</body>
</html>
hatabulalert.html
Şekil60 alert() fonksiyonuyla ekrana rastgele üretilen sayının çıktısını verdirttim, bu
şekilde kodumun hatalı olan bölümü alert() fonksiyonundan sonra olduğunu
anlamış oluyorum, çünkü kodum alert() fonksiyonuna kadar çalışıyor. alert()
fonksiyonunu döngünün içerisine koyduğumda ekrana alert() fonksiyonunun
görüntüsü çıkmıyor. Buradan yine anlaşılıyor ki döngüde bir hata var. Bu da
hata bulmak için bir alternatiftir, fakat güçlü bir yöntem debugger kullanımıdır.
Musa ÇAVUŞ 96
4.2 Debugger Şimdiye kadar olan metotlarda hataları, tarayıcıdan gelen mesajlara göre ya da
geleneksel programlama şeklinden bulduk. Şimdi bir Debugger ile bir hatayı
nasıl bulabiliriz onu göstereceğim. Şimdi size vereceğim bilgiyi hiç bir kitapta
bulamazsınız, o yüzden burayı iyi okuyun, çünkü size hata bulmada çok
yardımcı olacak.
Bunu yapmadan önce Firefox tarayıcınıza Venkman adlı bir Debugger
yüklemenizi öneririm. Firefox tarayıcınızda, Araçlar ->Eklentiler seçeneğini
tıklayın ve VenkMan programını Firefox uygulamasına ekleyin.
Şekil61 Kurulum bittikten sonra hatabul.html dosyasına çift tıklayarak Firefox ile tekrar
açın ve Araçlar->JavaScript Debugger seçeneğini seçin.
Musa ÇAVUŞ 97
Şekil62 Bu seçeneği seçtiğinizde karşınıza JavaScript Debugger penceresi çıkacaktır:
Şekil63
Musa ÇAVUŞ 98
Venkman oldukça kaliteli bir Debugger olmasına rağmen arada sırada
çökebiliyor. Onun dışında JavaScript’lerde hata bulabilmede yardım çantası gibi
düşünebilirsiniz.
JavaScript Debugger’de Open Windows sekmesini tıkladığımızda
tarayıcımızdaki açık sekmeleri görürüz. Open Windows sekmesini seçtikten
sonra hatabul.html dosyasını çift tıklayın:
Şekil64 Debugger tıklanan HTML sayfasının kodunu sağ bölgesinde göstermektedir.
Debugger ile çalışınca, hatalı kodun hata olduğundan şüphe edilen satıra kadar
kodun çalışması istenilir ve Debugger’ın kodu o satıra kadar çalıştırıp durması
için bir kesme noktası konur. Buna Breakpoint denilmektedir. 6. Satırın sol
tarafındaki boşluğa fare ile tıkladığımızda bir F harfi belirir. Future Breakpoint
demektir, yani gelece kesme noktası.
Debug->Error Trigger->Stop for Errors seçeneğini seçili konumuna getirin:
Musa ÇAVUŞ 99
Şekil65 Tekrar tarayıcınıza dönün ve kodu tekrar yükleyin. Bunu yaptığınızda
JavaScript Debugger otomatik olarak F olan satıra kadar çalışacaktır ve hatadan
ötürü kodu orada durdurmaktadır:
Musa ÇAVUŞ 100
Şekil66 Şimdi 6. Satırın önündeki boşluğa tıkladığınızda orada arka planı kırmızı bir B
harfi göreceksiniz.
Şekil67
Musa ÇAVUŞ 101
Şimdi Continue düğmesine basarsanız ve tekrar kodu tarayıcınızda geri
yüklerseniz arka planı kırmızı olan B noktasında Debugger, kodu durdurur. Çok
karmaşık bir teknik fakat işimizi görmesi için bu karmaşalığı yapmamız
gerekiyor. Bizim için önemli olan kodumuzu istediğimiz noktaya kadar
çalıştırmak ve orada durmasını sağlamaktı, bunu da başardık. JavaScript
Debugger’in üst tarafına bakarsanız, Step Over, Step Into ve Step Out
düğmelerini görürsünüz. Step Over, JavaScript Debugger’in kodu satır satır
işlemeisni sağlar, Step Into sıradaki bir fonksiyonsa kodun o fonksiyon içinde
devam etmesini sağlar. Step Over ise kodun bulunduğu fonksiyonda çıkmasını
sağlar. Adım adım işlemleri yapmadan önce JavaScript Debugger’in Watches
bölümüne ilginizi çekmek istiyorum.
Watches sekmesine tıklayın ve o alana sağ fare ile tıklayın. Orada Add Watch
Expression seçin:
Şekil68 Çıkan penceredeki metin kutusuna sayi yazın:
Musa ÇAVUŞ 102
Şekil69 Tamam düğmesini tıklayın:
Şekil70 Bu şekilde kod içerisindeki değişkenlerin değerini öğrenebilirsiniz. Bu da çok
faydalı bir özellik olup size kod ayıklamada büyük yardım edecektir. Şimdi
Step Over düğmesine basın:
Musa ÇAVUŞ 103
Şekil71 “Continuing from breakpoint mesajı” gelecektir. Tekrar Step Over düğmesine
basın:
Musa ÇAVUŞ 104
Şekil72 “Stopped for error handler” mesajı çıkacaktır. 7. satırda Debugger kodu
durduruyor ve bu satırda bir hatanın olduğunu söylüyor. Daha önce bunu
tarayıcı yardımıyla görmüştük fakat Debugger ile bu kesinleşmiş oldu. Kod
satırına iyi bakarsak say değişkeni yerine aslında sayi yazmamız gerektiğini
görürüz.
Venkman problemli olmasına rağmen çok güçlü bir Debugger, özellikle
JavaScript için şu an bulunan en kaliteli Debugger. Elimden geldiğince konuyu
kısa ve örnekli tuttum ki kodunuzda hata olunca nasıl çözebileceğinizi bilmiş
olun.
Musa ÇAVUŞ 106
5.1 Nesne nedir? Nesne nedir? Nesne, günlük yaşamımızda kullandığımız belirli özelliklere sahip
ve özel bir durumu olan varlıktır. Nesnelere dayalı programlama denilen bu
yöntem JavaScript tarafından da desteklenmektedir. JavaScript, Nesnelere
dayalı bir programlama dili değildir, Nesnelere dayalı programlamaya destek
veren bir programlama dilidir. Yani JavaScript’te, nesneleri kullanabiliriz ve
nesnede oluşturabiliriz. JavaScript’in, tam bir nesneye dayalı programlama dili
olabilmesi için eksikleri mevcuttur. Nesneleri kullanmak JavaScript’te çok
kolaydır. Önce nesneyi yazar sonra bir nokta koyarız ve daha sonra nesnenin
özelliğini gösteren metodu yazarız. Metotlara da değineceğim.
window.alert(“Ben bir nesnenin metoduyum”);
window nesnenin ismidir, alert() fonksiyonu windows nesnenin özelliğidir.
5.2 Sınıflar ve kurucu metotlar JavaScript’te nesne oluşturmak istiyorsanız sınıflara ihtiyaç duyarsınız. Sınıfları
bir yapının planı gibi düşünün. Diyelim ki siz bir ev yaptıracaksınız. Mimar
evin planını çizer ve plana göre ev yapılır. Ev burada nesne, plan ise sınıftır. Evi
yapabilmek için işçilere ihtiyaç duyarsınız, bu mekanizmaya da kurucu metot
denir.
<html>
<body>
<script language="JavaScript">
tarih = new Date();
dizi = new Array();
resim = new Image();
</script>
</body>
</html>
kurucumetot.html
Musa ÇAVUŞ 107
new anahtar kelimesiyle bir nesne 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"/>
<script language="JavaScript">
resim = new Image();
resim.src = "turkiye.jpg";
setTimeout("document.images[0].src=resim.src","3000");
</script>
</body>
</html>
nesneolustur.html
Şekil73
Musa ÇAVUŞ 108
Şekil74
<img> tagı ile konya.jpg resim dosyasını tarayıcıma yükledim. JavaScript
bölümünde, setTimeout() fonksiyonu window nesnesinin bir özelliği ya da
bilgisayar dilinde metodudur. setTimeout ne yapar? Đlk parametreye kodu
yazarız, ikinci parametreye de o kodu ne kadar gecikmeli çağıracağımızı salise
cinsinden yazarız. Resim nesnesini resim değişkenine atadım. Resim nesnesi
burada new Image() ile oluşturulmaktadır. resim.src derken src resim nesnesinin
bir özelliğidir. Bu özellik yüklenecek resmin sistemdeki dosya ismiyle beraber
dizindeki yeridir. Ben resim nesnesinin src değişkenine turkiye.jpg dosyasının
adını atadım. document.images[0]’daki images[0] HTML sayfasındaki ilk
<img> tagına işaret ediyor, çünkü köşeli parantezlerin arasında 0 yazıyor.
<img> tagının src parametresine images[0] nesnesinin src özelliğiyle
erişebilinmektedir. Bu parametreye resim nesnesindeki src özelliğindeki değeri
atıyorum. setTimeout ile ikinci parametreyi 3000 salise yani 3 saniyeye
ayarladığım için, konya yazılı resim üç saniye sonra Türkiye yazılı resim ile yer
değiştirecektir. Unutmayalım, document nesnesi sistem tarafından oluşturulmuş
bir nesnedir.
Birden fazla yapıcı metodu ve hepsinin parametresi farklı olan sınıflar
olabilir.Örneğin Date() sınıfının birden fazla yapıcı metodu vardır ve kurucu
metotların parametre sayısı farklıdır.
<html>
<body>
<script language="JavaScript">
a = new Date(2006, 11, 15, 2, 14, 11, 7);
Musa ÇAVUŞ 109
b = new Date(2007, 11, 15, 2, 14, 11);
c = new Date(2008, 11, 15, 2, 14, 11);
document.write(new Date("september 13, 2003 12:11:03") + "<br />");
document.write(new Date(2000, 3, 12) + "<br />");
document.write(a + "<br />");
document.write(b + "<br />");
document.write(a - b + "<br />");
</script>
</body>
</html>
tarih1.html
Şekil75 Şimdiye kadar Date() sınıfından parametresiz bir kurucu metot kullanarak nesne
oluşturuyorduk. Parametresiz kullanılan Date() sınıfı güncel tarih ve saati
vermektedir. tarih1.html örneğinde Date() nesnesinin birçok kullanım şekli
vardır.a değişkenine atanan Date() nesnesinin parametrelerine bakarsak, 2006
yıl, 12 ay, 15 gün, 2 saat, 14 dakika, 11 saniye, 7 salise değerinde bir nesne
oluşturacaktır. 11 yazan yer Kasım ayı değildir, Aralık ayıdır. Date() sınıfında
ayların numaralandırılmasında sıfırdan başlamaktadır. 0 Ocak ayıdır, 11 ise
Aralık ayıdır. Salise değerini istemiyorsak, b ve c değişkenlerine atanan
nesneleri kullanabiliriz. Date() sınıfının bir başka kullanımı, parametre olarak
metin ya da bir diğer değişle String kullanımıdır. String’i istenilen formatta
Musa ÇAVUŞ 110
yazarsanız o format doğrultusunda bir Date() nesnesi oluşturmuş oluyorsunuz.
Date() nesneleri arasında yapılan çıkarma işlemlerin sonucunda çıkan rakam iki
tarih arasındaki farkın salise değeridir. Tarayıcınızdaki son satırda gördüğünüz
değer böyle bir değerdir. Sayfanızda Türkçe kullanacaksanız yukarıdaki görüntü
işinizi görmez.
Date sınıfı
Bu sınıfı, sınıflara örnek olması açısında biraz daha yakından incelemek
istiyorum. Böylelikle Date sınıfını tanımış olursunuz ve sınıflarla nesnelerin
nasıl çalıştığını öğrenmiş olacaksınız.
<html>
<style>
* {
background-color : white;
color : blue;
}
</style>
<body>
<div align="center">
<h1>Bugunku Atasozu</h1>
Bir elin nesi var iki elin sesi var
<script language="JavaScript">
var dgun,day,dyil;
function tarihGuncel(gun,ay,yil) {
if(gun<10) {
dgun="0" + gun;
}
else dgun = gun;
if(ay<10) {
day="0" + ay;
}
else day=ay;
dyil =1900 + ((1900 + tarih.getYear()) % 1900);
}
var tarih = new Date();
Musa ÇAVUŞ 111
tarihGuncel(tarih.getDate(), tarih.getMonth() + 1, tarih.getYear());
document.write("<hr />Guncellenme tarihi: " + dgun + "." + day + "." + dyil);
</script>
</div>
</body
</html>
tarih2.html
Şekil76 Bu kodda bizi iligilendiren kısım Güncellenme tarihi kısmı. new Date() ile bir
tarih nesnesi oluşturdum. Bununla güncel tarih sorgulanıyor. Fakat daha sonraki
satırda, güncel tarihin bileşenleri, tarihGüncel adlı fonksiyonda ayrıştırılıyor ve
ekrana bizim istediğimiz formatta yazdırtılıyor. Fonksiyonun parametreleri
sırasıyla güncel tarihin, gününü, ayını ve yılını belirtmektedir. getDate() günü,
getMonth() sıfırdan başlamak şartıyla ayı ve getYear() yılı bize vermektedir.
Şimdi diyebilirsiniz ki, neden getDate(), getYear(), getMonth() fonksiyonlarını
doğrudan kullanarak tarihsel bilgileri ekrana yazdırtmıyoruz. Bunun birkaç
nedeni var. Ay ve gün bilgisi 10 sayısından ufaksa ekrana sadece tek haneli bir
sayı yazılmaktadır, çünkü getMonth() ya da getDate() tam sayı değerini iletir.
Tarayıcıda gördüğünüz gibi ay bilgisi için 05 görüntüsü sergileyebilmek için
aldığınız tam sayı değerini işlemeniz gerekiyor. Ben basit bir if kıyaslaması
yaparak dedim ki, eğer tam sayı değeri 10 sayısından ufaksa yani tek haneli ise
başına sıfır ekle.
Yıl için niye böyle komik bir kurgu yaptığımı da soruyorsunuzdur. Bilişim
sektöründe tarihler 01.01.1900 başlar ve hesaplama yapılır. Bazı tarayıcılar
buna uymazlar. Internet Explorer’in bazı versiyonlarında bu satırı işleme
koymamış olsaydık tarayıcı 2010 gösterecektir, fakat diğer tarayıcılar 110
Musa ÇAVUŞ 112
gösterecekti, çünkü o tarayıcılar sıfır tarihini 01.01.1900 tarihi olarak kabul
etmektedirler. Fonksiyondaki satırla tüm tarayıcılarla doğru bir görüntü elde
etmiş oluyoruz.
Date sınıfının bazı metotlarını vermek istiyorum:
Metot Açıklama getDate() Bir aydaki günü veriyor.
getHours() Bir gündeki saati veriyor
getMinutes() Bir saatteki dakikayı veriyor
getYear() Bulunduğumuz yılı veriyor
getSeconds() Bir dakikadaki saniyeyi veriyor
setDate() Bir aydaki günü değiştirir.
setHours() Bir gündeki saati değiştirir
setMinutes() Bir saatteki dakikayı değiştirir
setYear() Bulunduğumuz yılı değiştirir
setSeconds() Bir dakikadaki saniyeyi değiştirir
String sınıfı JavaScript’te metinleri saklayabiliryoruz ve bunlara biz String diyoruz.
String’ler de birer nesnedir. Diğer nesneler gibi String’lerin de metotları vardır.
String’in önemli olan birkaç metoduna değineceğim ve ileriki konularda farklı
bir metot gördüğümüzde onu orada anlatacağım. Şimdiden bir konunun tüm
özelliklerine vererek beyin şişirmek istemiyorum, zamanla veriyorum ki sürekli
tekrar etmiş olalım:
<html>
<style>
* {
background-color : black;
color : white;
}
h1 {
background-color : yellow;
color : green;
Musa ÇAVUŞ 113
text-align : center;
}
div {
background-color : white;
color : purple;
text-align : center;
width : 400px;
}
</style>
<body>
<h1>Girilen Bilgi Hakkinda</h1>
<div>
<script language="JavaScript">
testText = prompt("Bir String bilgisi girin","");
document.write("String uzunlugu: "
+ testText.length + " <br />"
+ "3. harf: "
+ testText.charAt(2)+ ".<br />"
+ "String'in buyuk yazilmis hali: "
+ testText.toUpperCase()+ ".<br />"
+ "String'in kucuk yazilmis hali: "
+ testText.toLowerCase()+ ".<br />"
+ "String'in kalin yazilmis hali: "
+ testText.big()+ ".<br />"
+ "String'in ustu cizgili yazilmis hali: "
+ testText.strike()+ ".<br />"
+ "s harfi nerede?: "
+ testText.indexOf("u") + "."
);
</script>
</div>
</body
</html>
string.html
Musa ÇAVUŞ 114
Şekil77
Şekil78 Şekil77’deki metin kutusunu window nesnesinin prompt metoduyla
oluşturulmuştur. prompt() metoduna verdiğiniz parametre metin kutusunda bilgi
olarak yer alır. Program sizin Tamam ya da Vazgeç düğmelerine basıncaya
kadar bekler. Tamam düğmesine bastığınızda girdiğiniz String atamak
istediğiniz değişkene atanır ve program devam eder. Vazgeç düğmesine
basarsanız girdiğiniz String bilgisi atanmaz. Ben Tamam düğmesine bastım ve
ekranda girdiğim String hakkında bilgiler aldım. length() metoduyla String’in
uzunluğu, toUppercase() ile String’in büyük yazılmış hali, toLowerCase() ile
String’in küçük yazılmış hali, big() ile String’in kalın yazılış hali, indexOf() ile
parametredeki harfin String’deki yeri verilyor.
Musa ÇAVUŞ 115
Farkına vardıysanız, örneklerin boyutu büyümeye başladı. Đki üç satır yazarak
geçiştirmek istemediğim için örnekleri uzun tutuyorum. Çokta uzun tutmamaya
çalışıyorum, çünkü bu seferde konu dağılabilir. Mutlaka verdiğim örnekleri
kitabı okurken deneyin ki konuya hâkimiyetiniz güçlensin.
5.3 Metotlar Nesneye dayalı programlama tekniklerinde, programlar birbirilerine etkileşim içerisinde bulunabilmek için çağrı yollarlar. Bu çağrılar, bir metodun sonuçlarına göre olmaktadır. Bir Objenin ne yapabildiği metotlarında ortaya çıkmaktadır. Bir metodun tanımlanmasının avantajlarını şu şekilde sıralayabiliriz:
• Aynı program parçalarını tekrar tekrar kodlamak yerine metotları kullanmak daha avantajlıdır. Böylelikle metot içerisinde yapmak istediğimiz değicilik, metodun çağrıldığı tüm bölümlerde etkinliğini göstermiş olur.
• Karmaşık programlamalar ufak parçalara bölünmüş olur ki anlaşılması kolaylaşmış olur.
• Dışa doğru bir Nesnenin sunduğu özellikler metotlarında gizlidir.
<html>
<body>
<table >
<script language="JavaScript">
<!--
for(i = 1; i < 6; i++) {
z = Math.round(Math.random() * 50);
document.write("<tr><td>Sayi " + i + ":</td><td>" + z + "</td></tr>");
}
//-->
</script>
</table>
</body>
</html>
sayilar.html
Musa ÇAVUŞ 116
Şekil79
random() metodu 0-1 arasında bir sayı üretmektedir, bunu 50 ile çarptığımda bu
sayı 0-50 arasında bir sayı olmaktadır, tam sayı istediğim içinde round()
metoduyla bunu sağladım. Math bir sınıftır ve random() ile round() Math
sınıfının birer metodudur. Đlginç olan Math sınıfından bir nesne oluşturmadan
doğrudan metotlarını çağrılabilmesidir. Normalde böyle bir çağırma hata
vermesi gerekiyor. Bu tür nesneler statik olduğu için böyle bir kullanımda
bulunabiliriz.
Kitabımda JavaScript sınıflarından örnekler veriyorum fakat detaylara
inmiyorum, daha çok güncel kullanılan programlama şekillerine değiniyorum.
Ayrıntılı bilgi için Google Amcaya başvurmanızı öneririm. JavaScript ve
HTML referansı olarakta http://www.w3schools.com/jsref/default.asp
sayfasından yararlanabilirsiniz.
5.4 DOM (Document Object Model)
Musa ÇAVUŞ 117
Çoğu kez nesneler oluşturacaksınız ve sınıf metotlarını kullanmaksınızdır.
Mutlaka hazır olan nesnelerin metotlarını da kullanacaksınızdır, çünkü bunu
yapmazsanız JavaScript ile tarayıcınıza bir görüntü bile veremezsiniz. DOM,
ağaç yapısına benzer bir yapıda kullanabileceğiniz nesneleri
kütüphaneleştirmiştir. DOM teknolojisinin öncelikle JavaScript ile hiç bir
bağlantısı yoktur.
<html>
<body>
<table >
<form action="wohin.php" method="get"
onReset="return confirm(
'Bilgiler sifirlanacaktir, emin misiniz?')">
<tr>
<td>
Ad
</td>
<td>
<input type="text" name="ad" />
</td>
</tr>
<tr>
<td>
Soyad
</td>
<td>
<input type="text" name="soyad" />
</td>
</tr>
<tr>
<td>
<input type="reset" />
</td>
<td>
<input type="submit" />
</td>
</tr>
</form>
Musa ÇAVUŞ 118
</table>
</body>
</html>
formsifirla.html
Şekil80 Tarayıcınız Şekil80’i gösterdiğinde siz Araçlar-> DOM Inspector seçeneğini
seçin.
Musa ÇAVUŞ 119
Şekil81 Çıkan pencerede DOM Inspector, sayfanızın ağaç yapısını göstermektedir.
Ağacın en üst kısmında document terimini görüyorsunuzdur. Sizce document ne
olabilir? document web sayfasını gösteren bir nesnedir. document nesnesinin
içinde HTML tagının olduğunu görürsünüz. HTML tagının içinde HEAD tagını
görürsünüz ve hangi tagın içerisinde hangi tagların ya da metinlerin olduğunu
DOM Inspector bize bir ağaç yapısı olarak gösterir. DOM Inspector’unda bir
tagı seçince tarayıcıda o bölge işaretleniyor:
Musa ÇAVUŞ 120
Şekil82
DOM modeline göre bir web sayfası tarayıcıda gösterildikten sonra o sayfanın
tüm elemanları hafızada birer nesne olarak saklanır ve document nesnesi ile tüm
elemanlara ulaşabilinir. JavaScript’te DOM modelinden kullanabileceğimizi
kullanışlı nesneler var. Ben önemlilerini bu kitapta anlatacaığım.
document nesnesi Bu nesne sayfanızdaki HTML taglarına ulaşabilmek için JavaScript’te oldukça
çok kullanılır. windows nesnesinin bir nesnesidir. Siz window.document ya da
sadece document olarakta document nesnesini çağırabilirsiniz. Çok önemli bir
nesnedir.
<html>
<script language="JavaScript">
Musa ÇAVUŞ 121
function resimYukle() {
// document.forms[0].elements[0].value = "Oylesine bir yazi";
document.getElementsByName("f1")[0].elements[0].value = "Oylesine bir
yazi";
// document.f1.elements[0].value = "Oylesine bir yazi";
document.getElementById("h").innerHTML="Yeliz";
document.getElementsByTagName("h1")[1].innerHTML = "Resim degisti";
window.document.images[0].src = "yeliz.jpg";
}
</script>
<body>
<h1 id="h">Ecrin</h1>
<form name="f1">
<input>
</form>
<h1>Resim</h1>
<img src="ecrin.jpg" width="400" onclick="resimYukle()">
</body>
</html>
dom1.html
Musa ÇAVUŞ 123
Şimdi yapacağım açıklamayı iyi okuyun ve anlayın, çünkü bunu anlarsanız
bundan sonraki adımlar sizin için çok kolay olacaktır. Açıklamayı bile bile
alışılmışın dışında biraz uzun tuttum.
Websayfasına document nesnesiyle ulaşabiliriz. “//” olarak tanımlanan satırlar
JavaScript tarafından açıklama olarak gözetilir. document nesnesinden sonra
nokta konarak document nesnesinin alt nesnelerine ya da değişkenlerine
ulaşabiliriz. resimYukle() fonksiyonundaki ilk satıra bakarsanız, document
nesnesinden sonra . koydum ve forms[0] yazdım. forms document nesnesinden
saklanan bir dizi nesnesidir. forms nesnesi içerisinde document nesnesinin
gösterdiği web sayfasındaki tüm Form tagları saklanmaktadır. Köşeli parantez
açarak dizideki nesnelere ulaşmak istiyorum. Đçerisine sıfır yazdım ve ilk Form
nesnesine ulaşmak istediğimi vurguladım. forms[0] nesnesinden sonra nokta
koydum ve elements yazdım. elements nesneside forms[0] nesnesinin gösterdiği
Form nesnesinin taglarıdır. dom1.html’de tek bir tag vardır o da <input> tagıdır.
Burada köşeli parantez içerisine sıfır yazarak ilk elemana ulaştım. Bir
yazsaydım forms[0] nesnesinin ikinci tagına ulaşırdım. dom1.html’de forms[0]
nesnesinin ikinci bir tagı olmadıgı için JavaScript kodumuz hata verecekti.
elements[0] dizisinden sonra yine bir nokta koydum ve value yazdım. value
elements[0] dizisinin bir değişkenidir ve elements[0] nesnesinin değerini
değiştirir. elements[0] nesnesinin bir <input> tagına işaret ettiğini anımsarsanız,
bu tagın bir metin kutusu olduğunu hatırlarsınız.
Đkinci satırın JavaScript tarafından işlenmesini istediğim için “//” işareti
koymadım. Đkinci satır az önce anlattığım metin kutusuna ulaşmanın farklı bir
tekniğidir. Bu sefer document nesnesinden sonra getElementsByName()
metodunu kullandım. Parametre olarak f1 yazdım, çünkü ben biliyorum ki
benim web sayfamda kullandığım tek bir Form nesnesi var ve adı f1.
getElementByName() metoduyla taglara, tagların isimleriyle ulaşabiliyoruz.
Aynı isimden birden fazla Form nesnesi olabileceği için köşeli parantez
kullanarak dizinin ilk elemanını sıfır yazarak seçmiş oldum.
Bir başka yöntem ise Form nesnesinin adını doğrudan bir nesne olarak
kullanmaktır. Bunu da üçüncü satırda örnekledim. Document nesnesinden sonra
Form nesnenesinin adı f1yazdım.
Form nesneleri dışındaki taglarada ulaşam şekilleri vardır. Bunun için dördüncü
satıra bakın. HTML kodunda h1 tagının id parametresine h yazmıştım. Bu taga
document nesnesinin getElementById() metoduyla ulaşılabilinir.
getElementById() metodunun parametresine h yazmamız yeterlidir. h1 tagının
içeriğini değiştirebilmek için bu metot bize innerHTML değişkenini
Musa ÇAVUŞ 124
sunmaktadır. innerHTML değişkeninin değerini değiştirmekle h1 tagının
içeriğini değiştirmiş oluyoruz.
Diyelim ki taglara tag ismiyle ulaşmak istiyoruz o zaman ne yapacağız. Beşinci
satırda böyle bir örnek satır kodu verdim. getElementByTagName() metodunun
parametresine h1 yazarak h1 olan tüm tagları bir dizi halinde elde edebiliyorum.
HTML kodundaki ikinci h1 tagına ulaşabilmek için köşeli paranteze 1 değerini
yazıyorum.
Son olarak resimYukle() fonksiyonu çağrıldığında sayfamdaki resmimi
değiştirmek istediğim için document nesnesinin images dizisine başvuruyorum.
document nesnesinden sonra images yazıyorum ve köşeli parantezin içine 0
yazarak ilk resim tagına ulaşmış oluyorum. src parametresinin değierini
değiştirmeklede yeni resmi yükleyebilme fırsatını kazanmış oldum. dom1.html dosyasına çift tıkladığınızda tarayıcınız bir sayfa gösterecektir.
Resime tıklandığında resimYukle() fonksiyonu çağrılacaktır ve sayfanın içeriği
değişecektir.
window nesnesi windows nesnesi, JavaScript’teki en önemli nesnedir. DOM modelinde bu
nesne en üstte yer alır. windows nesnesinin, alt nesneleriyle JavaScript’te çok
önemli şeyler yapabiliyorsunuz. Örneğin az önce anlattığım document nesnesi
gibi. Aynı şekilde window nesnesininde önemli metotları vardır. Dahan önce
bunlardan alert() ve prompt() gibi metotlarını kullanmıştık. Önemli gördüğüm
metotları az sonra göreceğiz. Geniş bir örnekle başlayalım:
<html>
<body>
<script language="JavaScript">
var mPencere;
function yeniPencere() {
mPencere = open("","BosPencere");
}
function kapatPencere() {
pencere.close();
}
function boskapatPencere() {
if(mPencere.closed != true) mPencere.close();
Musa ÇAVUŞ 125
}
function init() {
mPencere = open("","BosPencere");
mPencere.close();
}
</script>
<body onLoad=init()>
<table border="4">
<form name="f1">
<tr><td>Metin</td>
<td><input type="button" value="OK"
onClick='window.open("metin.txt","MetinPencere")' /></td></tr>
<tr><td>Grafik</td>
<td> <input type="button" value="OK"
onClick='self.open("yeliz.jpg","ResimPencere")' /></td></tr>
<tr><td>Yeni bir HTML sayfasi</td>
<td><input type="button" value="OK"
onClick='self.open("clientfe.html","ClientPencere")' /></td></tr>
<tr><td>Ayni dosya ayni pencerede</td>
<td><input type="button" value="OK"
onClick='self.open("pencere1.html","AyniPencere")' /></td></tr>
<tr><td>Bos pencere ac</td>
<td><input type="button" value="OK" onClick="yeniPencere()" /></td></tr>
<tr><td><input type="button" value="BosPencereKapat"
onClick="boskapatPencere()" /></td>
<td><input type="button" value="AnaPencereKapat"
onClick="window.close()" /></td></tr>
</form>
</table>
</body>
</html>
pencere1.html
Musa ÇAVUŞ 126
Şekil84 Koda baktığımızda pencereleri oluşturmak için open() metodunu görürsünüz.
widnows nesnesinin en önemli metotlarından biri open metodudur. Metodun ilk
parametresine açmak istediğiniz dosyanın adını veriyorsunuz. Đkinci
parametresine ise açılacak pencereye bir isim veriyorsunuz. Đkinci parametresi
aynı olan bir open() metodu daha kullandığımızda açılacak dosya daha önce o
isim adı altında açılmış bir pencerede açılacaktır. open() metodunu window
nesnesinden sonra da kullanabilirsiniz, self nesnesini kullanarakta olabilir ya da
ne window nesnesi kullanırsınız ne de self nesnesini kullanırsınız. Hepsi
sonuçta aynı kapıya bakıyor.
boskapatPencere() fonksiyonu çağrıldığında, mPencere değişkeni açık mı kapalı
mı onu closed boolean değişkeniyle kontrol ediyoruz. closed değişkeninin
değeri false ise pencere kapalı demektir, eğer kapalıysa close() metoduyla bu
pencerenin kapatılmasını kodladım. mPencere değişkenine daha init()
fonksiyonunda veya yeniPencere() fonksiyonunda open() metoduyla bir
window nesnesi atamıştık. Bu sayede mPencere nesnesinin bir close() metodu
olabiliyor.
<body> tagında onLoad parametresini kullanarak sayfamız yükleneceği zaman
init() fonksiyonunu çağırtarak bir pencere açtırdım ve onu yeşillik olsun diye
close() metoduyla kapattırdım.
open() metoduna bir üçüncü parametre daha verebiliyoruz.
Musa ÇAVUŞ 127
<html>
<script language="JavaScript">
function f1() {
open("metin.txt", "f1", "width=600, height=250, resizable=yes,"
+ " directories=yes, menubar=yes, location=yes");
}
function f2() {
open("ucak.jpg", "f2", "width=600, height=250, resizable=no, "
+ " directories=no, menubar=no, location=no");
}
</script>
<body>
<a href="javascript:f1()">Metin</a>
<br />
<a href="javascript:f2()">Resim</a>
</body>
</html>
pencere2.html
Şekil85 open() metodunun üçüncü parametresi bir pencerenin görünümüyle ilgilidir.
Üçüncü parametredeki width değişkeni pencerenin genişliğini, height
pencerenin yüksekliğini, resizable pencereyi büyütebilir küçültebilir miyiz,
directories düğmeler var mı, menubar menubarı var mı, location internet adresi
girebileceğimiz çubuk var mı, bunları ifade etmektedir.
Bu HTML kodunda farklı olarak iki link kullandım ve <a> taglarının href
parametresine javascript:f1 ve javascript:f2 değerlerini yazdım. JavaScript’te
Musa ÇAVUŞ 128
yazdığımız her hangi bir fonksiyonu href parametresinden çağırabilmek
istiyorsak javascript yazıyoruz ve iki nokta üst üste koyduktan sonra ulaşamak
istediğimiz fonksiyonun adını yazmamız yeterli olmuş oluyor.
Kullanmış bulunduğum üçüncü parametredeki değişkenler tarayıcıya göre farklı
sonuçlar verebilmektedir. Bu yüzden bu değişkenler kullanıldığında farklı
tarayıcılarla dikkatlice denenmesinde fayda görüyorum. Kullanabileceğiniz
başka değişkenleri http://www.w3schools.com adresinde referans halinde
bulabilirsiniz.
windows nesnesi tarayıcılar arasında farklılıkları çözmek için metodlar
sunmaktadır. Mesela moveBy() ve moveTo() metodları gibi. moveBy() metodu
pencereyi verilen koordinatlara doğru hareket ettirirken moveTo() metodu
mutlak değerı baz alarak bir hareketlendirme gerçekleştirir.
<html>
<body>
<form name="meinFormular">
<input type="button" value="moveBy" onClick='moveBy(120, 50)' />
<input type="button" value="moveTo" onClick='moveTo(200, 200)' />
<input type="button" value="resizeBy" onClick='resizeBy(200, 200)' />
<input type="button" value="resizeTo" onClick='resizeTo(100, 200)' />
<input type="button" value="Gule gule" onClick='setTimeout("self.close()",
"1000")' />
</form>
</body>
</html>
pencere3.html
Musa ÇAVUŞ 129
Şekil86 resizeTo() ve resizeBy() metodlarıda isimlerinden anlaşılacağı gibi pencerenin
boyutunu değiştiriyor. Birinci parametre x koordinatını verirken ikinci
parametre y koordinatını vermektedir.
location ve history location nesnesinin href değişkenine verdiğimiz yeni adres sayesinde JavaScript
sayfamızı farklı bir sayfaya iletebilir.
<html>
<body>
<a href="javascript:window.location.href='http://www.musa-
cavus.com'">Tikla</a>
</body>
</html>
location.html
Musa ÇAVUŞ 130
Şekil86 history nesnesinin benim gördüğüm en çok kullanılan bir metodu var o da
back(). Bu metotla bir önceki sayfaya gidilebilinmektedir ve güzel tarafı hangi
sayfadan gelindiğini bilinmeden yapılmasıdır.
<html>
<body>
<a href="javascript:history.back()">geri</a>
</body>
</html>
history.html 5.5 Cookie Cookie sayesinde, metin dosyalarını tarayıcıdan bilgisayara kayıt edebilirsiniz.
Sorunsuz görünen bu yöntem gerçekte kullanıcı profillerini oluşturmak için
kullanılır. Diyelim siz bir online shop sayfasındasınız ve gezdiğiniz sayfaları
online shop sahibi bilmek istiyordur. Buna göre sizin bilgisayarınızda size ait
bilgiler saklanmaktadır ve siz o sayfayı tekrar ziyaret ettiğinizde sayfaya girişte
size özgü reklamlar gözükmektedir. Ya da yine bir online sayfasında olunu, siz
bir kaç ürün seçtiniz, fakat daha ödeme yapmadınız ve tarayıcınız birden
kapandı. Tekrar online sayfasına girdiğinizde bir bakıyorsunuz ki taryıcınız
sizin seçtğiniz tüm ürünleri kayıt etmiş. Bunu Cookie teknoloji kullanarak
yapabiliyorsunuz. Yine başka bir örnek verecek olursam, siz bir online shop
sayfasına giriyorsunuz ve sayfayaya kullanıcı adınız ve şifrenizle giriş
yapıyorsunuz. Sayfadan çıkıyorsunuz ve iki gün sonra geldiğinizde aynı sayfaya
giriyorsunuz. Bir de ne görüyorsunuz, ana sayfada adınız yazıyor ve önünde
Musa ÇAVUŞ 131
hoşgeldiniz kelimesini buluyorsunuz. Cookie’lerin yönetimi tarayıcılar
üstlenmiştir ve çeşitili tarayıcılar Cookie’leri çeşitli yerlere kayıt etmektedirler.
Örneğin IE, belli bir dizinde her Cookie için bir metin dosyası kayıt eder.
Firefox’ta Cookie’lere farklı ulaşabiliyoruz. Araçlar-> Seçenekler-> Gizlilik-
>Çerezleri göster düğmesini tıklıyorsunuz.
Şekil87 Çerez burada Cookie oluyor. Tarayıcıların Cookie’leri yönetim biçimi sizi
korkutmasın, çünkü JavaScript’te genelde Cookie’lerle işlemleri aynı yöntemle
programlamaktadır.
Cookie’lerin en az bir ismi ve bir değeri vardır. Cookie’nin ismi üzerinden
değerini okutabilirsiniz ve gereken programlama işlemlerini yapabilirsiniz.
Cookie’lerle işlem görürken çok önemli bir bilgi, o Cookie’nin ne kadar geçerli
olduğunun tanımlanmasıdır. Bunun için expires diye bir değişken vardır ve
geçerlilik tarihi özel bir formatta kayıt edilmesi gerekmektedir.
<html>
<script language="JavaScript">
Musa ÇAVUŞ 132
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (
name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape (value) +
((expires)
? "; expires=" + expires.toGMTString()
: "") +
((path)
? "; path=" + path
: "") +
((domain)
? "; domain=" + domain
: "") +
((secure)
? "; secure"
: "");
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(
document.cookie.substring(offset, endstr));
}
Musa ÇAVUŞ 133
function cookieYaz() {
gecerliTarih = new Date(2010, 6, 12, 1, 0, 0);
document.cookie = SetCookie(
"user", document.mF.id.value, gecerliTarih);
document.cookie = SetCookie(
"pw", document.mF.pw.value, gecerliTarih);
}
function cookieOku() {
deger = GetCookie("user");
if(deger != null)
document.mF.id.value=deger;
deger = GetCookie("pw");
if(deger != null)
document.mF.pw.value=deger;
}
</script>
<body onLoad="cookieOku()">
<form name="mF" onSubmit="cookieYaz()">
<table>
<tr>
<td>Kullanici Adi</td>
<td><input name="id"></td>
</tr>
<tr>
<td>Sifre</td>
<td><input name="pw" type="password"></td>
</tr>
<tr>
<td><input type="Submit" value="Ok"></td>
<td><input type="reset" value="Iptal"></td>
</tr>
</table>
</form>
</body>
</html>
cookie.html
Musa ÇAVUŞ 134
Şekil88 Ok düğmesine basmadan önce Seçenekler-> Araçlar-> Seçenekler-> Gizlilik-
>Çerezleri göster düğmesini tıklayın ve Tüm çerezleri sil düğmesini tıklayın.
Daha sonra cookie.html dosyasını tarayıcınızda açın ve Kullanıcı Adi ile Sifre
bilgilerini girerek Ok düğmesine basın. Seçenekler-> Araçlar-> Seçenekler->
Gizlilik->Çerezleri göster düğmesini tıklayın ve kendi Cookie’nizin orada
olduğunu görebilirsiniz. Cookie’leri JavaScript ile normal yoldan
silemiyorsunuz, ancak aynı Cookie ismini kullanarak eski bir geçerlilik tarihi
verirseniz Cookie’ler JavaScript içerisinden silinmiş olur.
document nesnesinin bir cookie nesnesi vardır ve Cookie’lerle yapmak
istediğimiz tüm işlemleri bu nesne ile yapıyoruz. Bilgiler String olarak
saklanmaktadır ve bunun için String nesnesinin tüm metodlarını kullanabiliriz.
length değişkenini biliyorsunuz String nesnesindeki metinin uzunluğunu
veriyor. substring() metodunun ilk parametresi String nesnesindeki metindeki
belirli bir kısmını iletiyor. substring() metodunun birinci parametresi belirli bir
kısmın başlangıcı olup ikinci parametresi o belirli bir kısmın sonudur. Diyelim
ki sizin String nesnesinin içindeki metin “Helal kardes” olsun. Siz substr(1,4)
yazdığınızda bu değer “elal” olacaktır, çünkü JavaScript bu durumda sıfırdan
saymaya başlar. indexOf() metodu, ilk parametredeki verilen değeri ikinci
parametredeki değerden başlamak şartıyla arar ve bulursa hangi pozisyonda
bulunduğunu iletir.
GetCookie(), SetCookie() ve getCookieVal() fonksiyonlarını ben
programlamadım, çünkü tekeri tekrar icat etmeye gerek yoktur. Bu kodu
internetten çektim. Bir ara birisi bunu yapmış ve tüm JavaScript Cookie
işlemlerinde bu kodlama kullanılıyor. Tabi siz diyorsanız, yok abi ben herşeyi
Musa ÇAVUŞ 135
kendim yapacağım, o sizin bileceğiniz iş. Benim fazladan programladığım iki
fonksiyon var, onlarda cookieYaz() ve cookieOku() fonksiyolarıdır.Đçinde
SetCookie() ve GetCookie() fonksiyonlarını kullanmaktan başka bir şey
yapmadım. SetCookie() fonksiyonunu kullanarak cookie nesnesine aktarmak
istediğimi bilgiyi aktarıyorum ve GetCookie() fonksiyonunu kullanarakta
cookie nesnesinden kullanmak istediğim bilgiyi okuyorum o kadar.
5.6 Nesne oluşturma Daha öncede belirttiğim gibi JavaScript nesnelere dayalı bir programlama dili
değildir. Yalnız bir yöntemle JavaScript’te sınıflar yazabiliriz. Bu sınıflardan
bazı kısıtlamalarda olsa nesneler oluşturabiliriz. Önce bir kurucu metot
yazıyoruz ve kurucu metot ile ile oluşturduğumuzu new anahtar kelimesiyle bir
nesne haline dönüştürüyoruz.
<html>
<body>
<script language="Javascript">
function konus(cumle) {
document.write(cumle + "<br />");
}
// Kurucu metot
function Insan(yas, ad) {
this.yas = yas;
this.ad = ad;
this.konus = konus;
}
//Nesne olusumu
aile = new Array();
aile["baba"] = new Insan(40,"Hasan");
aile["anne"] = new Insan(34,"Seyhan");
aile["ogul1"] = new Insan(4,"Tuncay");
aile["ogul2"] = new Insan(3,"Fikret");
document.write(aile["anne"].ad + ": ");
aile["anne"].konus("Yemek hazir");
document.write(aile["baba"].ad + ": ");
aile["baba"].konus("Oglen yemegi mi?");
Musa ÇAVUŞ 136
document.write(aile["ogul1"].ad + ": ");
aile["ogul1"].konus("Ben Cola icerbilir miyim?");
document.write(aile["baba"].ad + ": ");
aile["baba"].konus("Sen kac yasindasin?");
document.write(aile["baba1"].ad + ": ");
</script>
</body>
</html>
nesneolusumu1.html
Şekil89 Kurucu metotlar, birçok programlama dilinde büyük harfle başladığı için bende
büyük harfle başladım, fakat JavaScript’te istediğinizi yapmakla özgürsünüz.
Kurucu metotları normal fonksiyonlardan ayırmakta this anahtar kelimesinin
rolü büyüktür. this, oluşturacağımız nesnenin göstergesidir. Kurucu metodunda
kullanılan this anahtar kelimesinden sonraki değişkenler oluşturulacak nesnenin
özellikleridir. Örneğimizdeki Insan kurucu metodun yas, ad ve konus gibi
özellikleri vardır. Đlginç olan konus fonksiyonunu normal bir değişkenmiş gibi
atama yapabilmemizdir. konus() fonksiyonu parametresiz atandığı için konus
değişkeni konus() fonksiyonunun bir göstergesi olarak atanmaktadır. Kurucu
metot ile Insan adında bir sınıfın yas değişkeni, ad değişkeni ve konus
metodunu oluşturmuş oldum.
Örneğe devam bakarsak, Array sınıfından bir aile nesnesi oluşturdum. aile
değişkeninden sonraki kullandığım köşeli parantezlere farklı olarakString
değerleri atadım. Array sınıfı bize bu fırsatı sunmaktadır. Daha sonra her bir
aile ferdine new anahtar kelimesiyle bir Insan nesnesini oluşturdum ve atadım.
Musa ÇAVUŞ 137
konus() metodu çağrıldığında ekrana aile ferdi için kullandığım cümle
gelmektedir.
JavaScript’te kalıtım yoktur ama protyping vardır. Daha önce oluşturulmuş bir
nesneye biz metodlar ya da değişkenler ekleyebiliyoruz.
<html>
<body>
<script language="Javascript">
function konus(cumle) {
document.write(cumle + "<br />");
}
// Kurucu metot
function Insan(yas, ad) {
this.yas = yas;
this.ad = ad;
this.konus = konus;
}
//Nesne olusumu
familie = new Array();
familie["baba"] = new Insan(40,"Hasan");
familie["anne"] = new Insan(34,"Seyhan");
familie["ogul1"] = new Insan(4,"Tuncay");
familie["ogul2"] = new Insan(3,"Fikret");
document.write(familie["anne"].ad + ": ");
familie["anne"].konus("Yemek hazir");
document.write(familie["baba"].ad + ": ");
familie["baba"].konus("Oglen yemegi mi?");
document.write(familie["ogul1"].ad + ": ");
familie["ogul1"].konus("Ben Cola icerbilir miyim?");
document.write(familie["baba"].ad + ": ");
familie["baba"].konus("Sen kac yasindasin?");
document.write(familie["ogul1"].ad + ": ");
Insan.prototype.adres="Istanbul";
familie["ogul1"].konus("Benim dogum yerim "+familie["ogul1"].adres);
</script>
</body>
</html>
Musa ÇAVUŞ 138
nesneoluşumu2.html
Şekil90 Bir önceki örnekle bu örneğin tek farkı Insan kurucu metodundan sonra
prototype adlı bir tanımlamanın kullanılmasıdır. prototype tanımlamasından
sonra yaptığımız tanımlama Insan nesnelerine eklenmektedir. Bu işlemi
JavaScript’in standart sınıflarında uygulayabilirsiniz.
Musa ÇAVUŞ 140
6.1 Đstisna kullanımı JavaScript’te oluşan hataları istisnaları kullanarak program kodunun çökmesini
engelleyebilirsiniz. Adamlar bizim için her şeyi düşünmüşler, bize düşen sadece
öğrenmek kalıyor.
try ve catch Hatalar sadece geriye dönen değerlere göre hata vermezler, ayrıca kodu kontrol
ederler ve oluşan hatalar sonucu programı farklı bir program bloguna
yönlendirilir. Diyelim ki, programınızda bir matematiksel işlem
gerçekleştirmekteyiz:
<html>
<script language="Javascript">
try {
document.write(eval("15 * 5") + "<br />");
document.write(eval("a * b") + "<br />");
document.write(
"try blogun icerisinde")
}
catch(EvalError) {
alert(EvalError.toString());
}
document.write("hata olusmasina ragmen yazi cikiyor");
</script>
</html>
istisna1.html
Şekil91
Musa ÇAVUŞ 141
Şekil92
try, 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>
<script language="JavaScript">
function mesaj() {
alert("Dugmeye tiklandi");
}
</script>
<body>
<form name="f1">
<input type="button" name="b1" value="OK" />
Musa ÇAVUŞ 142
</form>
<script language="JavaScript">
document.f1.b1.onclick = mesaj ;
</script>
</body
</html>
event1.html
Şekil93
Şekil94
OK düğmesine basılınca alert() fonksiyonu ekranda bir görüntü getirmektedir.
Bu bildiğimiz bir görüntü fakat bizim için önemli nokta kod bölümü.
document.f1.b1 kısmıyla düğmemize ulaşıyoruz ve noktadan sonra onclick
geliyor. Bu JavaScript’in bir eventhandler’i. onclick olayınada mesaj()
fonksiyonunu atıyoruz. Atamada parantezleri kullanmıyoruz yoksa fonksiyonu
o noktada çağırmış olurduk. JavaScript’teki eventhandler’ler HTML’deki gibi
aynı ismi taşırlar, tek şartı ise hepsini ufak yazma zorunluğunun olmasıdır.
Musa ÇAVUŞ 143
<html>
<script language="JavaScript">
window.onkeypress = dugme;
function dugme(ev) {
document.getElementById("cevap").innerHTML = ev.which;
}
</script>
<body>
<h1>Bir dugmeye basin</h1>
<span id="cevap"></span>
</body>
</html>
event2.html
Şekil95
event2.html’deki Eventhandler, window nesnesindeki onkezpress
Eventhandler’dir. windows nesnesininher hangi bir yerinde bir tuşa basılınca
dugme fonksiyonu çağrılıyor ve dugme fonksiyonu cevap id’sine sahip tagı
çağırarak içeriğini ev.which’te yazan değere göre değiştiriyor. ev parametresi
onkeypress Eventhandler’in gönderdiği bir nesnedir. ev nesnesinin which adlı
bir değişkeni vardır ve burada basılan düğmenin kodu yer almaktadır. Ben
örneklerimde Firefox kullandığım için örnekleri de Firefox’a göre anlatıyorum.
Bu sistem IE’de çalışmayacaktır, çünkü IE JavaScript’te Eventhandler
kullanımını farklı beklemektedir.
Musa ÇAVUŞ 144
6.3 Event nesnesinin değerlendirme Kullanacağımız değişkenler sayesinde bu bilgilere Event nesnesinin değerlerine
ulaşabiliriz.
<html>
<style>
* {
background-color : green;
color : yellow;
}
#cevap {
position:absolute;
left:0px;
top:0px;
background-color:red;
color:yellow;
}
</style>
<script language="JavaScript">
function pozisyon(ev) {
var text ="";
text += "Pencereye koordinatlar (pageX, pageY): "
+ ev.pageX + ", " + ev.pageY + ".<br />";
text += "Ekrana gore koordinatlar (screenX, screenY): "
+ ev.screenX + ", " + ev.screenY + ".<br />";
text += "Klavye ve fare kodu (which): "
+ ev.which+ ".<br />";
text += "Olay tipi (type): " + ev.type + ".<br />";
document.getElementById("cevap").style.width=450;
document.getElementById("cevap").style.left = ev.pageX;
document.getElementById("cevap").style.top = ev.pageY;
document.getElementById("cevap").innerHTML = text ;
}
document.onmouseup = pozisyon;
</script>
<body>
<h1>Lutfen tiklayin</h1>
Musa ÇAVUŞ 145
<div id="cevap"></div>
</body>
</html>
degerlendirme.html
Şekil96
Fare imlecinin pozisyonunda fare ile oluşturduğum olay hakkında bilgi
gösteriliyor. pageX ve pageY açılan pencereye göre gerçekleştirilen olayın
koordinatlarını veriyor. screenX ve screenY ekranın koordinatlarına göre
gerçekleştirilen olayın koordinatlarını veriyor. which değişkenini daha önce
görmüştük bu sefer Eventhandler fare ile ilgili olduğu için farede basılan tuşun
koordinatını vermektedir. type ise ne tür bir olay olduğunu iletmektedir.
style.width ve style.left gibi kodlamaları görünce diyeceksiniz ki bu da nedir?
document.getElementById(“cevap”) kısmına kadar her şeyi anlamış olmalıyız.
Anlamadıysanız kitabı tekrar okumakta ve örnekleri tekrar incelemekte fayda
görüyorum. document.getElementById(“cevap”) çağrısından sonra style
yazarak bu çağrı ile elde ettiğim tagın style’ını değiştirmek istediğimi ifade
etmiş oluyorum. style’den sonra width yazarak kullanılan style’ın genişliğini
değiştirebiliyorum. left ve top top değişkenleri stylesheet’in (x,y)
Musa ÇAVUŞ 146
koordinatlarını belirtmemi sağlıyor. style nesnesiyle tagların css özellikleriin
çok kolaylıkla değiştirebilirsiniz.
Böylelikle JavaScript bölümü bitmiş oldu. Đnanıyorum ki artık iyi bir JavaScript
programcısı oldunuz. JavaScript’in her şeyini belki bilmiyorsunuzdur fakat
piyasada kullanılan yöntemlerin çoğuna hâkim durumundasınız. Bu bölümden
sonra AJAX konusuna değineceğim
Musa ÇAVUŞ 148
7.1. AJAX (Asynchornous JavaScrıpt and XML) AJAX teknolojisiyle ilk karşılaştığımda dedim ki, birileri XML, JavaScript,
HTML, CSS, DHTML gibi teknolojilere bakmıştır ve bunların hepsine yeni bir
isim olan AJAX ismini vermiştir, çünkü AJAX bu teknolojilerden oluşmaktadır.
AJAX’ın temelinde JavaScript yatmaktadır. Bu bölüme geldiyseniz JavaScript’i
sular seller gibi biliyorsunuz demektir.
Đlk AJAX uygulamamızı hemen vermek istiyorum. Ayrıntıları şimdilik
anlamanıza gerek yok, şu an önemli olan bir kaç adımla AJAX uygulamasının
gerçekleştiğini görmektir. Đleriki derslerde AJAX teknolojisini inceledikçe eksik
bölümler daha iyi oturacaktır.
Birinci adımda web sayfasına ihtiyaç duyarız. Bunun için ufak denemelerimiz
için Notepad yeterli olacaktır. Ben Notepad++ kullanıyorum, hem beleş hemde
çok kullanışlı bir kod yazma platformu.
<html>
<script language="Javascript" src="sehirler.js"></script>
<body>
<br>
<form name="f">
<select name="sehir" size="1" onclick="yolla()">
<option>Adana</option>
<option>Balikesir</option>
<option>Bursa</option>
<option>Edirne</option>
<option>Giresun</option>
<option>Hatay</option>
<option>Kayseri</option>
<option>Konya</option>
<option>Manisa</option>
<option>Nigde</option>
<option>Ordu</option>
<option>Rize</option>
<option>Sivas</option>
<option>Urfa</option>
<option>Yozgat</option>
<option>Zonguldak</option>
Musa ÇAVUŞ 149
</select>
</form>
<br>
<div id="sc"></div>
</body>
</html>
sehirler.html
Şekil97
Oluşturduğum sayfada seçme kutusu kullandım. Bunu <select> tagı ile
tanımlayabiliyorsunuz. EventHandler olarak onclick tanımlaması yaptım ve her
tıklandığında yolla() fonksiyonu çağrılacaktır. Seçme kutusunu bilgilerle
doldurabilmek için HTML’de <option> tagı kullanılır.
Şimdi bir şekilde HTML sayfamızda bir tıklamayla Server’a mesajı iletmemiz
gerekiyor ve alınan mesaja göre HTML kodunun sc id’li <div> tagında mesaj
yazdırmamız gerekiyor.
function yolla() {
alert("merhaba");
Musa ÇAVUŞ 150
}
sehirler.js
Şekil98
yolla fonksiyonunu basit tuttum, siz seçme kutusunda her hangi bir şey
seçerseniz ekrana merhaba mesajı gelecektir.
AJAX teknolojisini uygulamak için sehirler.js örneğimizi biraz daha
geliştirmemiz gerekmektedir:
var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne= new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function yolla() {
alert("merhaba");
}
sehirler.html resNesne değişkenini tanımladıktan sonraki satırda ne tür bir tarayıcımın
kullanıldığını kontrol ediyorum. navigator.appName.search() fonksiyonuyla
tarayıcı uygulamasının adında Microsoft yazını aratıyorum, eğer varsa
ActiveXObject sınıfıyla bir nesne oluşturulması gerekmektedir, değilse
XMLHttpRequest sınıfıyla bir nesne oluşturulur. IE’nin yeni sürümü de ikinci
metodu kullanmaktadır. Senaryomuza göre, AJAX nesnesini oluşturduktan
sonra tıklanan şehri fonksiyonumuzda elde etmemiz gerekiyor ve bunu
Server’da çalışan programa yollamamız gerekmektedir.
Musa ÇAVUŞ 151
var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function yolla() {
alert("merhaba");
for(i = 1; i <= 16; i++) {
if(this.document.f.sehir.options[i - 1].selected) {
resNesne.open('get', 'sehir.php?nerede=' + i,true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
break;
}
}
}
function handleResponse(){
if(resNesne.readyState == 4) {
document.getElementById("sc").innerHTML = resNesne.responseText;
}
}
sehirler.html
for döngüsüyle f sehir seçme kutusunun içindeki tüm seçenekler kontrol
ediliyor ve birisi seçili konumdaysa resNesne bir open metoduyla web
server’daki bir linki çağırıyor ve web server ile iletişime geçmiş oluyor. Birinci
parametredeki get, iletişimin get HTTP metoduyla olacağını gösteriyor. Đkinci
parametredeki sehir.php, web serverdaki bir PHP program parçasına işaret
ediyor. ? işaretinden sonra gelen nerede kelimesi PHP programının içine
göndereceğimiz değeri ayırt edebilmemiz içindir. nerede kelimesinden sonra
eşitlik operatörüyle değer atanır. Üçüncü parametre olan true iletişimin
asenkron olduğuna işarettir.
Bir başka adım ise, başka bir Eventhandler’in oluşturulmasıdır.
onreadystatechange değişkenine handleResponse fonksiyonunu atıyoruz. Server
cevap verince handleResponse() fonksiyonu çağrılmış oluyor.
Musa ÇAVUŞ 152
onreadystatechange değişkeni AJAX için eklenmiştir ve sadece JavaScript’te
vardır. Buna benzer bir atamayı daha öncek ikonularda yapmıştık.
Son adımda nesneyi send() fonksiyonuyla yolluyoruz. Parametredeki null
ifadesi, yollamanın get metoduyla olmasından kaynaklanmaktadır. Web
server’den gelen cevabı resNesne.responseText değişkeniyle elde ederiz. Web
server ve Client sürekli iletişimde bulundukları için Client tarafı Web
server’dan sürekli cevap alabilir ve handleResponse() fonksiyonunu gereksiz
yere işleme sokabilir. Bunun olmaması için readState değişkenini 4 değeriyle
kontrol ettirdim. 4 değer yollanan cevabın istenilen yere ulaştığını ve geri
geldiğinin ifadesidir. AJAX teknolojisini kullanabilmek için yapmanız gereken
bu adımları izlemektir.
PHP örneğini çok kısa ve anlaşılır tutmaya çalıştım, kitabın konusu PHP
olmadığı için PHP anlatmayacağım. PHP örneklerini, AJAX örneklerini
anlamanız için vermekteyim. Neden PHP anlatılmadı da, CSS, HTML, XHTML
gibi teknolojilere değinildi diyebilirsiniz. Bunun nedeni bu teknolojileri PHP
gibi Server tarafında çalışan teknolojiler olmaması ve AJAX’ın birer parçaları
olmasında yatıyor. AJAX’ın en büyük avantajlarından birisi, Server tarafında
hangi program çalışırsa çalışsın, AJAX için Server’dan alacağı bilgi önemlidir.
<?
echo "Bilgilendirme:";
switch($_REQUEST['nerede']) {
case 1: echo "Bir sehir"; break;
case 2: echo "Bir sehir"; break;
case 3: echo "Sehir degil"; break;
case 4: echo "Bir sehir"; break;
case 5: echo "Bir sehir"; break;
case 6: echo "Sehir degil"; break;
case 7: echo "Bir sehir"; break;
case 8: echo "Bir sehir"; break;
case 9: echo "Sehir degil"; break;
case 10: echo "Bir sehir"; break;
case 11: echo "Bir sehir"; break;
case 12: echo "Bir sehir"; break;
case 13: echo "Bir sehir"; break;
case 14: echo "Sehir degil"; break;
case 15: echo "Bir sehir"; break;
Musa ÇAVUŞ 153
case 16: echo "Bir sehir"; break;
}
?>
sehir.php
PHP programlama dilini derinden incelemeyeceğimi demiştim fakat ne
yaptığımı size de anlatmak istiyorum. PHP ile Java Script’in birçok yapısı
aynıdır, o yüzden anlamakta zorluk çekmeyeceğinize inanıyorum. <? ve ?>
işaretleriyle PHP bölümü tanımlamış oluyorsunuz. echo komutuyla Web
Server’ın Client’e vereceği cevabı belirtmiş oluyoruz. PHP, $_REQUEST
dizisinde AJAX tarafından yollanan parametreleri bir dizi halinde tuttuğu için
bu dizinin nerede olan dizisini sorguladım. Buna göre de switch bloğu elde
edilen değere göre seçenekteki cevabı Client’e yollamaktadır.
Üç dosyamızı bitirdiğimize göre sehir.html dosyasını tıklayınca kurduğumuz
senaryo çalışması gerekiyor fakat çalışmadığını göreceksiniz, neden? Biz,
programlamayı bitirdik fakat AJAX için bir Web Server kurmadık. AJAX ile
yazdığımız Client tarafı PHP ile yazdığımız Server tarafına bir Web Server ile
bağlantıya geçecek ve bunu yapabilmek için bir Web Server’a ihtiyaç
duymaktayız.
PHP hakkında sizin bilmenizi istediğim bir şey daha var. O da <? yazarken bazı
Server’ların <? yerine <?php kabul etmesidir. Az sonra anlatacağım XAMPP’ı
ben Windows XP altında çalıştırırken PHP dosyalarımı kodladığımda <?
başlayarak yazıyordum ve çalışıyordu. Windows 7 altında denediğimde
çalışmadı. Araştırmalarım sonucu <?php yazınca çalıştı. Sizde böyle bir
problemle karşılaştığınızda benim gibi saatlerce aramayın ve bu çözümü
uygulayın. Bunun farklı bir çözümü var fakat kitap PHP kitabı değil.
Yazdığımız PHP kodunun çalışabilmesi için bir Server’a ve Server tarafında bu
kodu anlayacak bir uygulamaya ihtiyacımız var. Şimdi diyeceksisiniz hoca iyi
hoşta ben ne anlarım Server, PHP anlaması bilmem neden. Ben anlatacağım
korkmayın. Bir sonraki XAMPP bölümünü okuyun, orada size kişisel
bilgisayarınızda hem Server hem PHP anlayan çok hızlı bir mekanizmayı
göstereceğim.
XAMPP
http://www.apachefriends.org/en/xampp.html adresinden XAMPP programını
indirin. Bu program paketi kişisel bilgisayarınızda hazır çalışabilir bir web
server kurulmasını sağlıyor. Ben bu sayfadan XAMPP programını indirdiğimde
Musa ÇAVUŞ 154
dosya adı xampp-win32-upgrade-1.7.2-1.7.3 şeklindeydi. Kurulumdan sonra
web server’ınızda güvenlik açığı olduğunu bilmelisiniz, çünkü XAMPP
projesinde güvenlikten ziyade işlenebilirlik ve rahat erişim ön plandadır.
Đndirdiğim dosyaya çift tıkladım:
Şekil99
Destination folder olarak C:\xampp yazdım. XAMPP bu dizini seçmemi tavsiye
etti bende bundan dolayı bu dizini seçtim. Install düğmesine bastım:
Musa ÇAVUŞ 156
Şekil101 Control Panel’de bizi ilgilendiren Apache web serveri ve MySql veritabanı.
Web server olan Apache’yi çalıştırmak için Start düğmesine basmamız
yeterlidir:
Musa ÇAVUŞ 157
Şekil102 Tarayıcıyla web server aynı makinede çalışıyorsa, tarayıcınızın adres kısmına
http://localhost yazın.
Musa ÇAVUŞ 158
Şekil103 Eğer buna benzer bir sayfa ile karşılaştıysanız XAMPP kurulumu başarıyla
sağlanmıştır. sehirler.html, sehirler.js ve sehir php dosyalarını XAMPP
dizininde bulunan htdocs dizininde ajax/sehirler dizini oluşturarak buraya
kopyalıyorum.
Fırefox’un adres satırını http://localhost/ajax/sehirler/sehirler.html yazın. Çıkan
sayfada ben Merdiven seçeneğini seçtim:
Şekil104
Musa ÇAVUŞ 159
Şekil105 Seçenekleri tıklarken merhaba diye bir mesaj penceresi açıldı ve mesaj
penceresini kapattıktan sonra tarayıcı seçeneğim hakkında bana bilgi verdi.
Başka bir seçenek seçtiğinizde, tarayıcınız o seçenekle ilgili bilgileri Server’a
yollayacaktır. Server’da hazırlanan PHP programı gelen bilgiye göre tarayıcıya
cevap verecektir. Burada önemli olan gelen cevabı tarayıcı yeni bir pencerede
ya da sayfada göstermemesidir. Gelen cevabı tarayıcı AJAX teknolojisi
sayesinde aynı sayfada göstermektedir. Bana göre AJAX teknolojisinin en
büyük avantajı aynı sayfadaki Server sorgulamalarına cevap alabilmesidir.
Server tarafında Web Server olmadan da AJAX’ı çalıştırabiliriz nasıl mı?
<html>
<head>
<title>Resim bilgileri</title>
<script language="JavaScript" src="resim.js"></script>
</head>
<body>
<img src="elma.jpg" width="300" onmouseover="sndReq(1)"
onmouseout="bos()">
<br>
<img src="armut.jpg" alt="" onmouseover="sndReq(2)"
onmouseout="bos()" />
<div id="bilgi"></div>
Musa ÇAVUŞ 160
</body>
</html>
resim.html
var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function sndReq(transfer) {
if (transfer == "1") {
resNesne.open('get', 'bilgi1.txt', true);
}
else {
resNesne.open('get', 'bilgi2.txt', true);
}
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse(){
if(resNesne.readyState == 4) {
document.getElementById("bilgi").innerHTML = resNesne.responseText;
}
}
function bos(){
document.getElementById("bos").innerHTML = "";
}
resim.js
elma
bilgi1.txt
armut
Musa ÇAVUŞ 161
bilgi2.txt
Şekil106 resim.html dosyasına tıkladığımda tarayıcı bana iki resim gösteriyor ve ben fare
ile elma resminin üzerine gelince aşağıda elma yazıyor. Armut yazan resime
geldiğimde armut yazıyor. Herhangi bir dizinden resim.html’yi
çalıştırabilirsiniz, PHP gibi bir dil kullanmadığım için AJAX verdiğim metin
dosyasında yazanı cevap olarak algılıyor.
Web Form’ları AJAX ile Web Server’ine iletilen bilgilerin geri alınması, Web Form’larından
bilgilerin iletilmesi ve geri alınmasına çok benziyor. Bu bölümde AJAX ile
Web Form’larıyla nasıl kombine edildiğini göstereceğim. Form’lara daha önce
değinmiştim ve gerekli konularda açıklamalarda getirdim. Şimdiye kadar bir
Form kullanırken bilgileri Server’e nasıl yollarız buna değinmedim. Hazırlanan
Form’daki bilgilerin hangi Server’e gideceğini <form> tagındaki action
parametresinde belirtiyoruz. Form bilgileri buraya vereceğimiz adrese
gönderilecektir. method parametreside bilgilerin hangi yöntemle
gönderileceğine işarettir. get değerini koyarsak Form sayfasında belli
büyüklükteki bilgileri yollayabiliriz ve yollanan bilgiler genelde adres kısmında
Musa ÇAVUŞ 162
gözükür. post değeri ise öyle değildir, daha büyük kapasiteli bilgiler
yollayabilirsiniz ve yollanan bilgiler açık olarak gösterilmez. Form bilgilerin
yollanması için <input> tagının type parametresinde submit yazması gerekiyor.
Bunu kodladığınızda tarayıcınızda bir düğme belirecektir. Düğmenin görevi,
basıldığında Form’daki bilgileri <form> tagındaki action parametresinde
belirtilen adrese yollaması olacaktır.
<html>
<head>
<title>login</title>
</head>
<body>
<form action="login.php" method="get">
<input type="text" name="kullaniciadi"> <br />
<input type="password" name="sifre"><br />
<p><input type="submit" value="Tamam" /></p>
</form>
</body>
</html>
login.html
<?
if(("ahmet" == $_GET['kullaniciadi']) && ("mahmut" == $_GET['sifre'])) {
echo "<h3>Sifreyi bildin aferin</h3>";
}
else {
echo "<h3>Giris bilgilerinizde bir yanlislik var.</h3>";
}
?>
login.php
Musa ÇAVUŞ 163
Şekil107 login.php ve login.html dosyalarını bilgisayarımdaki XAMPP’daki htdocs/ajax
dizininin altına kopyaladım ve tarayıcımdan http://localhost/ajax/login.html
diye bir çağrıda bulundum. login.html dosyasında, iki <input> tagım var,
kullanıcı adı ve şifreyi yazıyorum daha sonra Tamam düğmesine basarak
bilgileri yolluyorum. login.php dosyası yine bir PHP kodudur. Oldukça basit
tutmaya çalıştım, çünkü kitabın amacı PHP’yi anlatmak değil sadece PHP’den
yararlanmak.
PHP’de $_GET dizisinde Client tarafından yollanan parametrelerin bir listesi
bulunmaktadır. Client tarafından yollanan kullaniciadi parametresini köşeli
parantezde tırnak açarak kullanaciadi yazarak elde ediyoruz. JavaScript’teki if
kıyaslaması gibi PHP’de bir kıyaslama yapabiliyorsunuz. Bende kullaniciadi
parametresini ahmet değeri ile kıyasladım. Yani dedim ki Client tarafından
kullaniciadi ahmet ise o zaman kıyaslama sonucunu true kabul et. Aynı şekilde
sifre parametresi içinde yaparak mahmut değeriyle kıyasladım. Eğer
kıyaslamada iki parametrede true değerini veriyorsa o zaman PHP echo
fonksiyonuyla Client’e Sifreyi bildin aferin yazısını <h3> tagıyla yollamaktadır.
kullaniciadi ya da sifre parametresinden birisi uymuyorsa Client tarafına Giris
bilgilerinizde bir yanlışlık var diye bir mesaj yollanacaktır. Tarayıcınızda ikinci
sayfada ona göre bir yazı gösterecektir.
Şimdi bu işlemi AJAX kullanarak yapalım. login.php dosyasını hiç
değiştirmiyorum onu aynen bırakıyorum.
<html>
<head>
Musa ÇAVUŞ 164
<title>login</title>
<script language="JavaScript" src="login.js"></script>
</head>
<body>
<form name="f">
<input type="text" name="kullaniciadi"> <br />
<input type="password" name="sifre"><br />
<p><input type="button" value="Tamam" onclick="yolla()"/></p>
</form>
<div id="sc"></div>
</body>
</html>
login.html var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function yolla() {
resNesne.open('get', 'login.php?kullaniciadi=' +
document.f.kullaniciadi.value+
'&sifre='+document.f.sifre.value,true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse(){
if(resNesne.readyState == 4) {
document.getElementById("sc").innerHTML = resNesne.responseText;
}
}
login.js
Musa ÇAVUŞ 165
Şekil108
login.html’deki <form> tagındaki action ve method parametrelerini kaldırdım,
çünkü bunları AJAX teknolojisini kullanarak gerçekleştirdim ve login.js
dosyasına aktardım. login.html’de bilmeniz gereken bir nokta, submit değeri
yerine button yazdım. submit otomatik olarak <form> tagında yazan action
parametresindeki değere bilgileri yolluyordu, bunu button düğmesiyle onclick
Eventhandler’ini kullanarak yolla() fonksiyonunun içinde gerçekleştirdim.
yolla() fonksiyonuna bakarsanız içinde kullandığım open() metodunda
kullaniciadi ve sifre parametrelerin değerini Server’e yolladığımı görürsünüz.
Server yolladığım değerlere göre bir cevap vermektedir ve handleResponse()
fonksiyonuna geri yollamaktadır. Tarayıcı, DOM modeline göre sc ıd’sine sahip
<div> tagında, gelen cevabı göstermektedir. AJAX kullanılarak yapılan bu örnekte Tamam düğmesine basıldığında tarayıcı
yeni bir sayfa açmamaktadır, her şey aynı sayfada olmaktadır. Ajax ve CSS Daha önce CSS’e bir giriş yapmıştım ve önemli konulara değinmiştim. Şimdi
CSS ile AJAX’ı kombine ederek avantajlarını göstereceğim. Şimdiye kadar
yaptığım AJAX uygulamaları çalışıyordu fakat canlılık yoktu. Kullanacağımız
CSS ile bu uygulamalar hem canlılık kazanacak hemde CSS AJAX’a neler
katıyor bunu görmüş olacaksınız. Bunu görebilmek için bir örnek daha önce
Musa ÇAVUŞ 166
kodladığımız resim.html’yi örnek olarka vermek istiyorum.. Daha önceki
kodlarda biraz değişiklik yaptım:
<html>
<head>
<title>Resim bilgileri</title>
<script language="JavaScript" src="resimcss.js"></script>
<link href="resim.css" type="text/css" rel="stylesheet" />
</head>
<body>
<img id="resim1" src="elma.jpg" width="300"
onmouseover="sndReq(1)" onmouseout="bos()">
<br>
<img id="resim2" src="armut.jpg" alt=""
onmouseover="sndReq(2)" onmouseout="bos()" />
<div id="bilgi"></div>
</body>
</html>
resimcss.html
body {
background:#dddddd;
font-size:14px;
}
#resim1{
position:absolute;
top:100px;
left:100px;
}
#resim2{
position:absolute;
top:100px;
left:400px;
}
#bilgi{
position:absolute;
top:50px;
Musa ÇAVUŞ 167
left:450px;
color:red;
border:solid;
border-width:1pt;
width:200px;
height:30px;
}
resim.css resimcss.js dosyasında hiç bir değişiklik yapmadım. resimcss.html dosyasında
tek bir değişiklik yaptım o da resim.css dosyasını resimcss.html dosyasına
<link> tagıyla bağlamak. resim.css dosyası yeni oluşturduğum bir dosya. Bu
dosyada anlatmadığım parametre position, top, left, border, border-width, width
ve height parametreleridir. position parametresiyle bir tagın konumunu
belirliyorsunuz, absolute diyerek mutlak pozisyonda yer almasını istemiş
oldum. top parametresi, tagın x koordinatını ve left parametresi tagın y
koordinatını belirtmemizi sağlıyor. border parametresiyle çerçeve şeklini,
border-widht ile çerçeve kalınlığını, width ile çerçeve genişliğini ve height ile
çerçeve yüksekliğini tanımlamış oluyoruz.
Şekil109 Hadi bakalım bu bölüde hayırlısıyla bitirdik. Darısı diğer bölümlerin başına
Musa ÇAVUŞ 169
8.1 HTTP ve XMLHttpRequest Bu bölümde biraz Sniffing göstermem gerekiyor ki HTTP belleğinize daha iyi
otursun. Kod bölümünde aslında yeni gösterdiğim fazla bir şey yok, sadece
daha önce gösterdiklerime biraz ilave edeceğim ve açıklayacağım. Benim analiz
etmek istediğim , yazdığım AJAX uygulaması ile Server arasındaki veri
transferleri.
<html>
<head>
<title>HTTP Degerlendirmesi</title>
<script language="JavaScript"
src="xmlhttprequestobjekt.js"></script>
<script language="JavaScript" src="httprequest.js"></script>
<script language="JavaScript">
window.document.onclick = sndReq;
</script>
<link href="httprequest.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Sayfaya tiklayin</h1>
<div id="cevap">
<h3>Server cevabi</h3>
<div id="bilgi"></div>
</div>
</body>
</html>
httprequest.html
httprequest.html kodunu görür görmez manzarayı çakmış olmalısınız. Kod çok
kolay ve anlaşılır.
body {
background:#dddddd;
font-size:14px;
font-family:"Engravers MT";
color:#1111ee;
}
Musa ÇAVUŞ 170
h1{
font-size:24px;
text-align:center;
}
h2{
font-size:20px;
}
h3{
font-size:18px;
}
h4{
font-size:16px;
}
#cevap{
position:absolute;
top:80px;
left:250px;
width:550px;
height:320px;
border:solid;
border-width:1pt;
text-align:justify;
background:blue;
color:white;
}
httprequest.css font-size yazı tipinin büyüklüğünü verirken, font-familiy yazı tipini veriyor.
Yazı tipinin büyüklüğünü piksel olarak verdim ve font-size parametresinden
sonra bir sayı yazarak ingilizce pixel kelimesinin kısaltması olan px
kullanılıuyor.
function olsXMLHttpRequestObject(){
var resNesne = null;
try {
resNesne = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error){
Musa ÇAVUŞ 171
try {
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error){
try {
resNesne = new XMLHttpRequest();
}
catch(Error){
alert(
"XMLHttpRequest-Nesnesi olusturulamiyor");
}
}
}
return resNesne;
}
function OlusturAJAXObjekt(){
this.olsXMLHttpRequestObject = olsXMLHttpRequestObject;
}
o = new OlusturAJAXObjekt();
resNesne = o.olsXMLHttpRequestObject();
xmlhttprequestobjekt.js xmlhttprequestobjekt.js kodunda 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);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("bilgi").innerHTML =
resNesne.responseText +
"<br>Transfer durumu: " + resNesne.readyState +
"<br>Durum: " + resNesne.status +
Musa ÇAVUŞ 172
"<br>Durum bildirisi: " + resNesne.statusText +
"<hr><h4>Server tarafindan iletilen tum Header'ler</h4>" +
resNesne.getAllResponseHeaders();
}
}
httprequest.js Tarayıcıda çıkan sayfaya tıkladığımızda Server’dan gelen cevabın Header’ini
tarayıcıda görüyoruz. Header nedir? HTTP, Web’deki kullanılan protokoldür.
Temelde web tarayıcısıyla web Server arasındaki iletişimi sağlayan protokoldür.
Bir yönden çok hızlıdır, fakat diğer yönden durumsuz olduğu için takip edilmesi
çok zordur. Örneğin oturumlar kayıt edilemediği için bu protokol bizi
zorlamaktadır.AJAX programcısı olarak, HTTP mantık olarak nasıl çalıştığını
bilmelisiniz, ancak JavaScript ile neler yapıldığını böyle anlayabilirsiniz.
Request, Client tarafından Web Server’ine yollanan bir sorgulama olup
Response Server tarafından Client tarafına verilen cevaptır. Web Request ve
Response ile işlemektedir. Diyelim ki tarayıcınızın adres kısmında bir adres var.
Bu adresi tarayıcınıza girdiğinizde ve aratmaya başladığınızda, Client olan
tarayıcınız o adrese bir Request yollayacaktır. Web Server sorgulamaya cevap
olarak eğer varsa bir Response yollar. AJAX’ta bu döngü sürekli ve
çaktırmadan oluyor, çünkü AJAX’ın temelinde kullanıcının bu bilgileri bilmesi
istenmemektedir.
<?
echo "Ne haber Genclik?</h3>";
?>
httprequest.php
Musa ÇAVUŞ 173
Şekil110 resNesne.status bize 200 değerini verirse resNesne.statusText OK olacaktır.
Web Server, tarayıcıya yolladığı mesajın görüntülenmesine izin vermiştir
anlamını taşıyor. resNesne.readyState yani transfer durumunun 4 olması zaten
bunu ifade etmektedir. Web Server ile Client arasındaki bir sorgulama için
birçok iletişim olmaktadır. Client sorgulamayı yaptığında, Web Server, lütfen
bekleyin diye sürekli mesaj yollayabilir. Ancak 4 değerini yolladığı an Client
tarafı gelen cevabın tarayıcıda gösterileceğine dair izin aldığını bilir ve yayınlar.
JavaScript’in geliştirilmesinin asıl sebeplerinden biri XMLHttpRequest
nesnesinin varlığıdır. Bu nesne sayesinde JavaScript popüler olup AJAX
teknolojisinin oluşmasını sağlamıştır. En önemli özellikleri, Callback
fonksiyonlarını kayıt etmesidir, örnekte handleResponse fonksiyonudur. Ayrıca
HTTP’nin HEADER dediğimiz alanına ulaşabilmesidir, örneğin resNesne.state
gibi.
Musa ÇAVUŞ 174
AJAX sorgulaması
AJAX sorgulamasının sıralaması hep aynıdır, aklınızda kalması için 5 adımı
size toparlıyorum:
1- XMLHttpRequest nesnesi oluşturulur.
2- Callback fonksiyonu XMLHttpRequest nesnesine referans olarak kayıt
edilir. Örneğin resNesne.onreadystatechange = handleResponse; gibi.
XMLHttpRequest nesnesinin readyState değişkeninin 4 değerini alması,
Web Server’in yeşil ışık yakması anlamını taşır ve tarayıcı bu ışıktan
sonra gelen cevabı bünyesinde göstermek için hazırlanır. Bundan dolayı
neredeyse tüm AJAX uygulamaları bu değişkeni kontrol ederler.
3- XML HttpRequest nesnesinin open() metoduyla bir bağlantı kurulur.
4- Sorgulama send() metoduyla gönderilir.
5- XMLHttpRequest’in değişken değerlerine göre cevap değerlendirilir.
Musa ÇAVUŞ 176
9.1 DHTML nedir?
DHTML özet olarak, JavaScript, HTML ve Stylesheet’lerin birleşmesidir.
AJAX’ta, hatırladığınız gibi birçok var olan teknolojilerin bir araya gelmesiyle
oluşmuştur. DHTML, DOM ile beraber çalışmaktadır. DOM teknolojisi
üzerinden değişiklik yapılmaktadır, getElementById() metodunu kullanmak
gibi.
<html>
<head>
<title>Resimleri yukleme/title>
<script language="JavaScript"
src="xmlhttprequestobjekt.js"></script>
<script language="JavaScript" src="dhtml1.js"></script>
<link href="dhtml.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Server'deki resimler</h1>
<div id="resim1">Resim 1</div>
<div id="resim2">Resim 2</div>
<div id="cevap">
<div id="bilgi"></div>
</div>
</body>
<script language="JavaScript" src="olay.js"></script>
</html>
dhtml1.html function kaydet(){
if (document.addEventListener){
document.getElementById("resim1").onmouseover = sndReq1;
document.getElementById("resim2").onmouseover = sndReq2;
}
else {
status = "Hata";
}
}
kaydet();
Musa ÇAVUŞ 177
olay.js
body {
background:#dd11dd;
font-size:12px;
font-family:"Times New Roman";
color:#44aa00;
}
h1{
font-size:21px;
text-align:center;
}
h2{
font-size:17px;
}
h3{
font-size:15px;
}
h4{
font-size:13px;
}
#cevap{
position:absolute;
top:50px;
left:50px;
}
#resim1{
position:absolute;
top:50px;
left:650px;
background:yellow;
width:200px;
height:50px;
border:solid;
border-width:1pt;
text-align:center;
font-size:32px;
Musa ÇAVUŞ 178
}
#resim2{
position:absolute;
top:115px;
left:650px;
background:green;
width:200px;
height:50px;
border:solid;
border-width:1pt;
text-align:center;
font-size:32px;
}
dhtml.css
olay.js dosyasını en aşağıda koda bağladım, çünkü resim1 ve resim2 nesnelerine
onmouseover Eventhandler’ini kayıt etmek isteseydim JavaScript sorun
çıkartırdı. Bunun nedeni, JavaScript, Eventhandler kayıt edilirken nesnelerin
varlığını istemektedir. Bu da resim1 ve resim2 nesnelerini oluşturduktan sonra
olabilir. addEventListener değişkeniyle sayfamıza bir Eventhandler kayıt
edebilir miyiz bunu kontrol ediyoruz. IE için bu yöntem geçersizdir, ben Firefox
kullandığım için bu yöntemi kullandım.
function sndReq1() {
resNesne.open('get','dhtml1.php?&resim=1', true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function sndReq2() {
resNesne.open('get','dhtml1.php?resim=2', true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("bilgi").innerHTML = resNesne.responseText;
}
Musa ÇAVUŞ 179
}
dhtml1.js
<?
if ($_REQUEST['resim'] == 1) {
echo "<img src='domates.jpg' />";
}
else {
echo "<img src='patlican.jpg' />";
}
?>
dhtml1.php dhtml1.php kodu, gelen resim değerine göre bir <img> tagı yollamaktadır ve
tarayıcı bu tagı resım id’li <div> tagında göstermektedir. Normalde bu
mantıktaki işlemleri daha önce yapmıştık, burada kullanılan sistemin bir
bölümünde DHTML vardır, DOM yoluyla işlem görülmektedir.
Şekil111
DHTML bize resimlere ulaşabilmek için JavaScript sayesinde images nesnesini
sunar. Bu nesne sayesinde HTML sayfamızdaki <img> resimlerine çok
kolaylıkla ulaşabiliriz ve istediğimiz işlemleri yapabiliriz.
Musa ÇAVUŞ 180
Windows’ta bir program yükleneceğinde eğer uygulama arka planda bir şeyler
yapıyorsa ön tarafta bir kum saati çıkartıyor. Sıradaki örneğimizide bu şekilde
düşündüm. Diyelim siz bir sorgulama yolluyorsunuz ve kullanıcıyı sıkmamak
için, program arka planda işlem görürken ön tarafta işlem yapıldığını gösteren
bir saat koymak istiyorsunuz:
<html>
<script language="JavaScript" src="image1.js"></script>
<script language="JavaScript">
window.document.onkeypress = sndReq;
</script>
<body>
<h1>Bir tusa basiniz</h1>
<span id="cevap"></span>
<img src="bos.gif" height="30"
style="position:absolute;top:80px;left:400px;">
</body>
</html>
image1.html <img> tagında style parametresine <img> tagında gösterilecek gif dosyasının
yerini ve büyüklüğünü belirttim.
var resNesne = null;
function erzXMLHttpRequestObject(){
var resNesne = null;
try {
resNesne = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error){
try {
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error){
try {
resNesne = new XMLHttpRequest();
}
catch(Error){
Musa ÇAVUŞ 181
alert("XMLHttpRequest nesnesi olusturulamiyor");
}
}
}
return resNesne;
}
function sndReq() {
resNesne.open('get', 'image1.php',true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("cevap").innerHTML = resNesne.responseText;
document.images[0].src="bos.gif";
}
else{
document.images[0].src="saat.gif";
}
}
resNesne=erzXMLHttpRequestObject();
image1.js Bu kodun büyük bir bölümünü tanıyorsunuz. handleResponse() fonksiyonuna
iyi bakın. readyState değişkeni 4 değerini almamışsa tarayıcıdan saat.gif
dosyasını göstertmesini istiyorum. Eğer Server’dan 4 değeri geliyorsa, yani
Server diyorsa tamam kardeş sana yeşil ışık yaktım o zaman cevap id’sine sahip
<div> tagının içindeki metini Server’dan aldığım cevap ile değiştiriyorum.
<?
sleep(6);
echo "Biraz beklettim, ama manzarayi caktin sanirim?";
?>
image1.php
sleep() fonksiyonu çağrıldığı noktada verilen parametredeki sayı saniyesi kadar
durulmasını söyler.
Musa ÇAVUŞ 182
Şekil112 DHTML teknolojisiyle sayfamızdaki Style’lerede ulaşabiliriz. style özelliğini
kullanarak bunu çok kolay gerçekleştirebilirsiniz:
<html>
<link rel="stylesheet" href="stil1.css" type="text/css">
<script language="JavaScript" src="stil1.js"></script>
<body onClick="sndReq()">
<h1>Sayfaya tiklayin</h1>
<span id="cevap"></span>
<span class="stil1" id="durum">Lutfen bekleyin</span>
</body>
</html>
stil1.html .stil1 {
color : white;
background-color : blue;
visibility : hidden;
position : absolute;
top : 100px;
left : 500px;
}
stil1.css
Musa ÇAVUŞ 183
visibility parametresine hidden değeri vererek bu selektörün gösterdiği taglar
görünmez olmaktadır.
var resNesne = null;
function olsXMLHttpRequestObject(){
var resNesne = null;
try {
resNesne = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error){
try {
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error){
try {
resNesne = new XMLHttpRequest();
}
catch(Error){
alert("XMLHttpRequest nesnesi olusturulamadi");
}
}
}
return resNesne;
}
function sndReq() {
resNesne.open('get', 'image1.php',true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("cevap").innerHTML = resNesne.responseText;
document.getElementById("durum").style.visibility = "hidden";
}
else {
document.getElementById("durum").style.visibility = "visible";
}
}
Musa ÇAVUŞ 184
resNesne=olsXMLHttpRequestObject();
stil1.js
<?php
sleep(5);
echo "Yine uzun surdu ama manzarayi kesin caktin";
?>
image1.php
Şekil112 stil1.js dosyasında style nesnesini kullanarak tagların style özelliklerini
değiştirdim. Bu nesneyle CSS’te bulunan değişkenlere çok rahatlıkla
ulaşılmaktadır. visibility değişkeninin değerini visible yaparak durum id’sine
sahip olan tagı göstermiş oldum. Diğer CSS parametrelerini de style
nesnesinden yararlanarak değiştirebilirsiniz. Denemede özgürsünüz.
Denemeden önce bu konuyla alakalı son bir örnek yapmak istiyorum:
<html>
<style type="text/css">
#bilgi {
background-color : blue;
color : white;
border : solid;
}
#P1 {
background-color : blue;
Musa ÇAVUŞ 185
width : 0px;
height : 10px;
position : absolute;
top : 100px;
left : 100px;
}
</style>
<script language="JavaScript" src="xmlhttprequestobjekt.js"></script>
<script language="JavaScript" src="ilerle.js"></script>
<body>
<form>
<input type="button" value="Buraya Bas" onClick="sndReq()" />
</form>
<div id="bilgi"></div>
<div id="P1"></div>
</body>
</html>
ilerle.html
function sndReq() {
resNesne.open('get', 'image1.php?z=' + Math.random(), true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
ilerle();
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("bilgi").innerHTML
= resNesne.responseText;
}
}
i = 0;
function ilerle() {
document.getElementById("P1").style.width = i++;
if(resNesne.readyState != 4)
setTimeout("ilerle()",5);
else {
i = 0;
Musa ÇAVUŞ 186
document.getElementById("P1").style.width = i;
}
}
ilerle.js Server’e z parametresiyle rastgele oluşturulmuş sayılar yolluyorum, fakat bu
parametre Server tarafından kullanılmıyor. Bunu bile bile yaptım, çünkü
tarayıcı aynı sorgulama olunca sorgulamayı belleğe yazıyor. Bu mekanizma ile
tarayıcı yeni bilgiler yollayacağı için sorgulamayı belleğe yazmıyor. Cache
belleğe bunu yazsaydı, AJAX sorgulamasında eski bilgiyi geri verirdi. Ufak bir
üçkâğıtçılıkla bu işi böyle hallettik.
Koda dikkatli baktıysanız kendini çağıran fonksiyon yöntemini kullandım, bunu
yaparkende 5 saliselik bir gecikmeyle fonksiyonu çağırdım. Eğer gecikme
kullanmasaydım, fonksiyonlar bu kodda üst üste binebilirdi.ilerle() fonksiyonu
her çağrıldığında P1 id’sine sahip <div> tagının CSS görüntüsü 1 piksel
genişliyor. Server’den yeşil ışık alınınca ilerleme çubuğunun değeri 0 oluyor.
Döngü kullanmak yerine kendini çağıran fonksiyonla ilerleme çubuğunun
ilerlemesini sağlamış oldum.
image1.html ve xmlhttprequestobjekt.js dosyalarını daha önce kullanmıştık,
aynı kodu burada da kullandım.
Şekil113
Musa ÇAVUŞ 188
10.1 Veri aktarımı
Tipik bir AJAX uygulmasında üç çeşit veri aktarma şekli vardır. Metin, JSON
ve XML. En az problemi metinler yollarsak en fazla problemi XML ile yaşarız.
Genelde XML teknolojisi, tüm mantığı Client tarafına yüklemek istersek
kullanılır. JSON, metin ve XML veri aktarımlarında ikisinin arasında uyumlu
olan bir teknolojidir. Şimdiye kadar olan veri aktarma şekillerinde normal
metinler kullanmıştık.
10.2 XML Internet sayfaları için HTML kendisini standartlaştırdı. Fakat veritabanı, ya da hesap tabloları gibi uygulamalar için HTML yetersiz kalıyor. W3C kurumundaki kişiler oturdular ve HTML gibi kolay olabilecek bir genel çözüm aradılar sonunda XML için karar kıldılar. Ben XML konusuna ihtiyacımız olacağı kadar değineceğim, daha ayrıntılı bilgi edinmek isteyenler http://www.w3c.org/ adresine girerek bilgilenebilirler. Burada size bir AJAX uygulaması için gereken XML bilgisini vereceğim. Bu bilgiler ışığında bile birçok XML veri aktarımına bağlı AJAX uygulamaları programlayabilirsiniz. Elementler ve değişkenler XML dokümanının içeriği, bir düzen içerisinde uygun yapılardan oluşmaktadır. Yapıların arasındaki metinler ve elementler bulunmaktadır. Elementlerin parametrik değişkenleri olabilir ki bu değişkenler elementler hakkında ek bilgi vermektedirler. <?xml version="1.0"?> <eglence tarih="31.12.10"> <misafir isim="Gizemli Kahraman"> <icecek>elma suyu</icecek> <icecek>portakal suyu</icecek> <medenidurum bekar="true" utangac="false"/> </misafir> </eglence> eglence.xml Elementlerin büyüklük küçüklük yazımı ayırt edilmesi için çok önemlidir. Bir değişken bir isimden ve birde değerden oluşmaktadır. Değişken değeri, ya tek tırnak ya da çift tırnak arasında durmaktadır ve eşit işareti de değer ile değişken
Musa ÇAVUŞ 189
arasında bulunmaktadır. Tag’ların kullanımı Elementleri sivri parantezlerin içine yazarız. Elementler iki şekilde varlık gösterirler. Birincisi başlangıç ve bitiş Tag şeklinde, Đki Tag’ın ismi de aynı fakat bitiş Tag’ın ismini yazmadan eğri bir çizgi işaretini koyarız. Tag’ların arasına da elementin bilgisini yazarız. <icecek>elma suyu</icecek> Đçerik barındırmayan bir element sadece bir Tag’dan oluşur ve Tag’ın sonundaki sivri parantezden önce eğri çizgi bulundurur. Bu tür Tag’ların parametrik değişkenleri mevcut ya da sadece bir Tag’dan oluşur <medenidurum bekar="true" utangac="false"/> Serbest şekildeki isim verme sonucu belirli bir şekilde format verme imkânsız. HTML gibi belirli sayıda Tag yoktur. XML dokümanı Internet gezginleri tarafından gösterilmek istenildiği zaman, ek olarak özel yazımlara ihtiyaç duyarız. Düzgün XML XML dokümanları bazı kuralları yerine getirmesi gerekiyor ki düzgün biçimli olsun. Düzgün bir yapıya sahip değilse, o zaman bir XML dokümanı olmamış oluyor. Her element bir başlangıç Tag’ına ve bir de bitiş Tag’ına sahip olmalıdır, değilse sadece tek bir Tag olabilir, fakat bununda bir bitişi olması gerekmektedir. XML’de özel işaretler Bazı işaretlerin XML dokümanlarında belirli anlamları olduğunu unutmamalıyız. Mesela &, <, >, “ ve , . Bunlar metinlerde özel kısaltmalarla ifade edilirler. Sırasıyla şu şekilde gösterebiliriz, &, %lt;, >, " ve '.
Musa ÇAVUŞ 190
Açıklamalar XML dokümanların içeriğinde açıklamalar yazabiliriz. Bunlar XML dokümanları işlenirken atlanırlar. XML dokümanların her tarafında bu açıklamaları kullanabiliriz. Sadece Tag’ların içerisinde kullanma imkanımız yok. <!- -Bu bir açıklamadır - -> Başlık tanımlaması Başlık tanımlaması kesinlikle bir XML dokümanında olmalıdır. Başlık tanımlaması değişkenler barındırabilir. <?xml version="1.0“ encoding=“iso-8859-1“ Bu örnekte işaret kodlamasını da değişkende tanımladım. XML dokümanının yapısal dili HTML dokümanı gibi XML dokümanlarında Tag’ların sayısı ve kombinasyonları kararlaştırılmamıştır. He uygulama için kullanıcılar istedikleri sayıda Tag’lar kullanabilirler ve tanımlanabilir. XML dosyasının bir uygulama için doğru olduğunu, o uygulamanın yapısal tanımlamasına ihtiyaç duyarız. Bu yapı belirli bir formatta yazılıdır. Đki format çok popülerdir. XML Schema ve Document Type Definition (DTD). Hangi Tag’ların olacağını, elementlerin tipini, içerik yapısını, element değişkenini, Tag içerisinde Tag var mı. Bu bilgilere uyan XML dokümanı geçerli bir dokümandır, yani valid’dir. Schema Schema’lar, XML dosyasının yapısal kavramlarını içerirler. Schema’larda bir elementin tipi ve içeriği DTD’ye göre daha ayrıntılı ele alınmaktadır. Geneldeki tipler, string, integer ve double tipleridir. date ve duration gibi tiplerde bulunmaktadır. Ek olarak kendimizde tip tanımı yapabiliriz. Schema’larla bir değerin tam sayı mı, kayan noktalı sayı mı, yoksa string mi olduğunu belirtebiliriz. Örnek bir XML dokümanımız şu şekilde olsun: <?xml version="1.0" ?> <eglence tarih="31.12.10"> <misafir isim="Cesur Hasan"> <icecek>Visne suyu</icecek> <icecek>Maden suyu</icecek> <medenidurumu bekar="true" utangac="false"/> </misafir>
Musa ÇAVUŞ 191
<misafir isim="Kuvvetli Kazim"> <icecek>Elma suyu</icecek> <medenidurumu bekar="true"/> </misaifr> <misafir isim="Pasakli Sabile"></misafir> </eglence> eglence2.xml Bunun için şöyle bir Schema hazırladım: <?xml version="1.0"?> <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <xsd:complexType name="eglenceTipi"> <xsd:sequence> <xsd:element name="misafir" type="misafirTipi" /> </xsd:sequence> <xsd:attribute name="tarih" type="tarihTipi" /> </xsd:complexType> <xsd:complexType name="misafirTipi"> <xsd:sequence> <xsd:element name="icecek" type="xsd:string" /> <xsd:element name="medenidurumu" type="medenidurumuTipi" /> </xsd:sequence> </xsd:complexType> <xsd:simpleType name="tarihTipi"> <xsd:restriction base="xsd:string"> <xsd:pattern value="[0–3][0–9].[0–1][0–9].[0–9][0–9]" /> </xsd:restriction> </xsd:simpleType> <xsd:complexType name="medenidurumuTipi"> <xsd:complexContent> <xsd:restriction base="xsd:anyType"> <xsd:attribute name="bekar" type="xsd:boolean" /> </xsd:restriction> </xsd:complexContent> </xsd:complexType> </xsd:schema> eglence2Schema.xsd Bu örnekte string tipi örneğin icecek elementi için kullanılmıştır. boolean
Musa ÇAVUŞ 192
medenidurumuTipi elementi için kullanılmıştır. misafir elementi için özel tanımladığımız misafirTipi tipi kullanılmıştır. tarihTipi tanımlamasını da çok basit olan Regular Expression tanımını kullanarak yaptım. Ay, gün ve yıl arasında bir noktanın olmasını belirttim ve günün ilk rakamının 0 ile 3 arasında bir rakam olacağını söyledim. Bir XML Schema’sında tipleri basit ve karmaşık olarak iki tip olarak sınıflandırırız.Basit tiplere simpleType, karmaşık tiplere complexType tanımlamasıylaayırırız. Basit tiplerin özelliği, alt elementlerinin ve değişkenlerinin bulunmamasıdır.Sadece metin kısmı mevcuttur. Bunun dışında karmaşık tipler, alt elementlerbarındırabilirler, değişken tanımlayabilirler, ben bu konulara fazla girmiyorum,sadece bize gerekli olanı sizlere vermek istiyorum. Basit Schema ile örneklerimizi Java ile anlatmaya çalışacağım, çünkü bu kitap bir XML kitabı değil. Namespace Namespace kavramı şu üç konuda çok önemlidir:
• XML dosyaları sadece yerel kullanılmadığı zaman. • Veriler değiş tokuş edildiğinde • XML dosyaları kombine edilince
Farklı XML dosyalarının aynı XML Tag kullanması açısından kargaşalık ortaya çıkar. Namespace ile bunu engelleyebiliriz. XML dosyasını bir Namespace ortamına ya da birden fazla Namespace ortamlarına atamak mümkün. Namespace, öneki ve bir URI bağlantısından oluşmaktadır. Namespace tüm elementlerin ön tarafına gelir ve kullanılabilir. Namespace tanımını yukarıda şu şekilde yapmıştık: xmlns:xsd="http://www.w3.org/2001/XMLSchema"> xsd ön ek olmuş oluyor, http ile başlayan kısımda URI bölümü olmuş oluyor. Bu tanımın önüne de <xsd:schema şeklinde bir tanımlama yaptım ki schema buradaki yerel addır. Ön ek istenilen şekilde seçilebilir, ben xsd seçtim, siz isminizi seçebilirsiniz. Diyelim ki biz eğlencemiz için ön ek olarak dogumgunu eki vermek istiyoruz o zaman örneğin şu şekilde bir tanımlama yapabiliriz. <dogumgunu:eglence xmlns:dogumgunu="http://www.dogumgunu.com"
dogumgunu:tarih="18.09.77"> <dogumgunu:misafir dogumgunu:ad="Musa Cavus">
Musa ÇAVUŞ 193
</dogumgunu:misafir> </dogumgunu:eglence> Namespace’lerin bir başka uygulandığı alan ise, belirli teknolojilerin Tag’larına işaret etmesidir. XML teknolojisi için sabit Namespace’ler verilmektedir ki biz bunu örnek xsd dosyamızda yaptık: <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"> XML dosyasını işleyen bir uygulama, Namespace’ler sayesinde hangi teknolojinin kullandığını bilebilir.Ön ek değil de, URI bu konuda çok önemlidir, çünkü URI sayesinde kullanılan teknoloji değişiyor ki ön eki istediğimiz şekilde kullanabiliriz. XML hakkında yeterli ön bilgi verdikten sonra bir örnekle AJAX/XML ikilisini anlatmaya başlamak istiyorum: <html> <script language="JavaScript" src="xml.js"></script> <body onKeyPress="sndReq()"> <h1>Bir tusa basin</h1> <span id="cevap"></span> </body> </html> xml.html <?xml version="1.0" ?> <db> <ds> <ad>Mustafa</ad> <soyad>Ozturk</soyad> <numara>1234</numara> </ds> <ds> <ad>Hayri</ad> <soyad>Unal</soyad> <numara>8938</numara> </ds> </db> ad.xml
Musa ÇAVUŞ 194
Basit bir XML dosyası oluşturdum. Anlattığım XML bilgisine göre bu tanımlamayı anlamışsınzdır. Benim isteğim <ad> tagındaki Hayri ismine ulaşmak, bunu nasıl yapacağız? function olsXMLHttpRequestObject(){ var resNesne = null; try { resNesne = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resNesne = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error){ try { resNesne = new XMLHttpRequest(); } catch(Error){ alert("XMLHttpRequest Nesnesi olusturulamadi"); } } } return resNesne; } function sndReq() { resNesne.open('get', 'ad.xml',true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("cevap").innerHTML = resNesne.responseXML.getElementsByTagName("ad")[1].firstChild. data; } } resNesne = olsXMLHttpRequestObject(); xml.js
Musa ÇAVUŞ 195
Şekil114 Bu örneğin şimdiye kadar gördüğümüz örnekler arasındaki tek farkı handleResponse() fonksiyonunda gerçekleşmektedir. responseText yerine responseXML nesnesini kullandığımızın farkına varmışsınızdır. Bu nesne bize DOM taslağına bağlı olarak bir düğüm yani bir node iletmektedir. node sayesinde tüm XML ağacında dolaşabiliriz. getElementBy ile başlayan tüm metodları kullanabiliriz. Burada da getElementsByTagName() fonksiyonunu kullanarak <ad> tagına sahip olan taglardan ikincisini çağırıyorum. Bir elementin içeriğini firstChild nesnesinin data değişkeniye elde edebiliyoruz. Server’de bulunan XML dokümanlarına CSS uygulayabilirsiniz. Bunu yaptığınızda CSS dosyanızı HTML kodundan ayrı tutmuş oluyorsunuz ve XML dosyası ile bağlantıda tutmuş oluyorsunuz. Az önceki örneğe bir CSS dosyası ekledim ve biraz değişiklik yaptım: <html> <link rel="stylesheet" href="ad.css" type="text/css"> <script language="JavaScript" src="ad.js"></script> <body onKeyPress="sndReq()"> <h1>Bir tusa basiniz</h1> <span id="cevap"></span> </body> </html> ad.html db { background-color : green; } ds {
Musa ÇAVUŞ 196
background-color : yellow; display : block; width : 400px; } ad { color : red; } ad.css dısplay parametesine block yazarak o yazının blok şeklinde gözükeceğini tanımlıyor. background-color parametreside arka planın rengini değiştirmektedir. <?xml version="1.0" ?> <?xml-stylesheet href="ad.css" type="text/css" ?> <db> <ds> <ad>Mustafa</ad> <soyad>Ozturk</soyad> <numara>1234</numara> </ds> <ds> <ad>Hayri</ad> <soyad>Unal</soyad> <numara>8938</numara> </ds> </db> ad.xml Đkinci satırda XML dosyasının hangi CSS dosyasıyla ilişkilendireceğimizi tanımladım. <xml.stylesheet> tagı bu işe bakıyor ve href parametresinde CSS dosyasının adını veriyoruz. XML dosyasımızı bir HTML dosyası olarak düşünün. CSS kullanırken ne yapıyorduk? CSS tarafındaki selektörlere HTML’deki tagları yazıyorduk. Burada da bu işlemi yapıyoruz. function olsXMLHttpRequestObject(){ var resNesne = null; try { resNesne = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resNesne = new ActiveXObject("MSXML2.XMLHTTP");
Musa ÇAVUŞ 197
} catch(Error){ try { resNesne = new XMLHttpRequest(); } catch(Error){ alert("XMLHttpRequest Nesnesi olusturulamadi"); } } } return resNesne; } function sndReq() { resNesne.open('get', 'ad.xml',true); resNesne.onreadystatechange = handleResponse; resNesne.send(null); } function handleResponse() { if(resNesne.readyState == 4){ document.getElementById("cevap").innerHTML = "Cevap:<br>" + resNesne.responseText; } } resNesne = olsXMLHttpRequestObject(); ad.js Tarayıcı, handleResponse() fonksiyonunda ad.xml’den gelen cevabı yani XML’in içeriğini ekrana CSS formatında gösteriyor. Okuduğu her node bilgisini bir cevap olarak yolladığına dikkat edin. XML ve AJAX hakkında fazla bir şey anlatmak istemiyorum. Verdiğim bu bilgiler bile pratik hayatınızda XML ile uygulama geliştirmenize yetecek ve artacaktır, çünkü XML işlemlerini tarayıcıdan tarayıcıya göre değişmektedir. Firefox ile çalışan bir XML uygulaması IE ile çalışmayacaktır ya da başka çalışacaktır. Çok karmaşık bir XML yapıda olan programınızı tüm tarayıcılar için uyarlamak büyük zaman alacaktır ve ben bu yüzden XML veri aktarımını kullanmanızı tavsiye etmiyorum.
Musa ÇAVUŞ 200
11.1 jQuery jQuery diline, jQuery’nin kendi web sayfasıyla başlamak istiyorum. Web adresi http://jquery.com
Şekil116 jQuery hakkında bilgi arıyorsanız ilk başvuracağınız sayfa bu sayfadır. Download linkinin altında Download | jQuery linkini tıklarsanız, Minified ve Uncompressed adı altında iki seçeneğiniz olacaktır. Uncompressed seçeneği daha okunaklıdır ve kod kısımlarında açıklamalar vardır. Minified seçeneğindeki kod ise kullanıcı sayfalarına daha çabuk iletilir, çünkü açıklama ve okunaklılık Uncompressed’deki gibi değildir. Download için yapmanız gerken çok basittir, Uncompressed linkine tıklayın:
Musa ÇAVUŞ 201
Şekil117 Tarayıcınızın özelliğine göre tıkladığınız link bendeki gibi ya gösterilecektir ya da bazı tarayıcılar bir diyalog penceresi açacaktır ve size dosyayı bilgisayarınıza kayıt edebilme özelliği verecektir. Bu dosyayı ben Firefox’ta Dosya->Sayfayı farklı kaydet linkinden jQuery dizinine kaydettim. jQuery sayfasındaki Download linkinin yanında Documentation linki vardır.
Musa ÇAVUŞ 202
Şekil118 jQuery’i ile çalışırken burayla adeta özdeşeceğiz. Tutorials linkine bakarsanız, örnekler vardır fakat örnekler için bu kitabı aldığınız için kitap boyu bu linke gerek duymayacaksınız. jQuery linkinin sağında UI linki var. jQuery UI olan bu bölüm kullanıcı arayüzleriyle ilgilenmektedir ki bunu jQuery’den sonra ele alacağım. Birde bizi ilgilendiren Plugıns bölümü vardır, bunu da sonra anlatacağım. jQuery ve jQuery UI projelerin temelinde JavaScript yatıyor. jQuery ve jQuery UI tekeri tekrar keşfetmek yerine hazır modüllerle size yardım etmektedir. Tabi siz yok abi ben herşeyi kendim yapacağım derseniz, JavaScript ile de burada anlatılacakları yapabilirsiniz. Fakat 1 gün kodlamak yerine 1 ay kodlayacağınızı da unutmayın. Buradan anlamamız gereken, jQuery ile iyi çalışabilmek için JavaScript bilmemiz gerekiyor. Eğer biraz JavaScript biliyorsanız, jQuery ile de biraz başarılı olabilirsiniz, eğer iyi bir JavaScript programcısı olduysanız jQuery’le de iyi programlar programlayabilirsiniz. JavaScript’I ben bu yüzden kitabın başında anlattım ki öncelikle işin temelini öğretmiş olayım. Kitaptaki örnekleri buraya kadar takip ettiyseniz jQuery’I öğrenmede bir zorluk çekmezsiniz ve jQuery ile çok başarılı projeler oluşturabilirsiniz. jQuery ile şimdiye kadar tanışmadıysanız, bundan sonra jQuery ile tanıştığınız için çok sefindirik olacaksınız. Neden derseniz, jQuery kullanmak bir ayrıcalıktır, çünkü size kısa yöntemlerle büyük olanaklar sağlamaktadır.
Musa ÇAVUŞ 203
jQuery ile çalışmak için nelere ihtiyacım var? Bir tarayıcıya ihtiyacınız var. Ben Firefox kullanıyorum. Siz jQuery ile proje geliştireceksiniz ve kullanıcılarınızda farklı tarayıcılar kullanıyorsa mutlaka farklı tarayıcılarda projenizi test etmelisiniz. Yoksa istenmedik sonuçlar ortaya çıkabilir. jQuery, genelde eski tarayıcıları desteklemiyor, en son güncel tarayıcılarla uyumlu çalışabiliyor. Tarayıcınızın jQuery ile çalışabilirliğini kontrol etmek için http://jquery.com/test adresine girin:
Şekil119
Musa ÇAVUŞ 204
Yeşil satırlar çoğunluktaysa tarayıcınızın jQuery’nin bir çok alanını desteklediğine inanabilirsiniz. Gerekli olanlardan XAMPP programını zaten sisteminize daha önce kurmuştunuz. 11.2 Đlk jQuery örneği jQuery’nin temellerini anlatmadan bir örnek vermek istiyorum. Amacım hızlı bir şekilde, jQuery ile neler yapılabileceğini göstermek. Anlatımı daha sonraki bölümlerde ayrıntılarla yapacağım. Özet olarak teoriden ziyade hemen pratik yaparak size jQuery’nin niğmetlerinden nasıl yararlanacağınızı göstereceğim. Ana dizinde jQuery adı altında bir dizin açın ve jquery-1.4.2.js dosyasını buraya indirin. Daha sonrada aşağıdaki kodu yazın ve aynı dizine kayıt edin. <html> <head> <title>Ilk jQuery Ornegi</title> <script src="jquery-1.4.2.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#b1").click( function() { alert('Merhaba'); } ); } ); </script> </head> <body> <h1>Dugmeyi tikla</h1> <button id="b1">Tikla beni</button> </body> </html> jquery1.html
Musa ÇAVUŞ 205
Şekil120 $ işaretiyle parantezi açtım ve içine document yazdım. jQuery’de $ işareti bizi bir çok uzun kodlamadan kurtaracaktır. getElementByTagname gibi kodlamalar tarihe karışmıştır. Fakat burada asıl önemli olan ready teriminin kullanılmasıdır. Web sayfasındaki DOM ağacı doğru yapılanmışsa ready terminin içindeki blok çalışacaktır. $(“#b1”) ile b1 id’sine sahip taga ulaşılmaktadır. Bundan sonra click terimini kullanarak bu id’ye sahip nesne tıkladığında yapılacak olayı yine yeni bir blok açarak verdim ki burada alert() fonksiyonunu kullandım. Đlk jQuery örneğimizi bu şekilde bitirmiş oluyoruz. Ayrıntılara daha sonraki bölümlerde derinlemesine inilecektir. Bu örneği biraz değiştirerek tarayıcıda üç düğmenin belirlemesini ve her düğmeye basılınca farklı bir mesajın ekranda gözükmesini istiyorum:
Musa ÇAVUŞ 206
<html> <head> <script src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ alert('Merhaba'); }); $("#b2").click(function(){ alert('Tesekkurler'); }); $("#b3").click(function(){ alert('Iyi misin?'); }); }); </script> </head> <body> <h1>Dugmeyi tikla</h1> <button id="b1"> Bana tikla </button> <button id="b2"> Benide tikla </button> <button id="b3"> Bende varim </button> </body> </html> jquery2.html
Musa ÇAVUŞ 207
Şekil121 jQuery ile yaptığım iş çok basıt, ilk örnekteki jQuery kod bölümünü üç kere kopyaladım ve oluşturduğum üç düğmeye bağladım. 11.3 DHML ve jQuery DHML teknolojisiyle jQuery’de harıkalar oluşturabilirsiniz. Tarayıcıda 4 tane düğme gözükmesini istiyorum ve her düğmeye farklı bir görev vereceğim: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <style type="text/css"> .cssSinif { background: green; font-size: 37px; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#a").click(function(event){ $("#e").addClass("cssSinif"); }); $("#b").click(function(event){ $("#e").removeClass("cssSinif"); });
Musa ÇAVUŞ 208
$("#c").click(function(event){ $("#e").hide("slow"); }); $("#d").click(function(event){ $("#e").show("fast"); }); }); </script> </head> <body> <h1>jQuery ile Web Sayfasi</h1> <button id="a"> CSS-Sinifi ekle </button> <button id="b"> CSS-Sinifi kaldir </button> <button id="c"> Gizle </button> <button id="d"> Goster </button> <hr/> <div id="e"> Bu dunya bizim kirletmeyelim </div> <hr/> </body> </html> index.html
Musa ÇAVUŞ 209
Şekil122 Đlk iki örnekten farklı olarak jQuery ile <div> tagıyla bağlantıya geçtim. $ işaretini kullanarak aynı metotla erişim sağladım. 4 tane farklı metot görüyorsunuz. Bunlar animasyon metotlarıdır ve DHTML özelliği taşırlar. addClass() metodu, parametrede verilen sınıfı ekler. Bundan dolayı “Bu dunya bizim kirletmeyelim” yazısı CSS sınıfında verilen özelliği yansıtır. removeClass() metodu ekledğimiz CSS sınıfını siler. Hide() metodu gösterilen <div> tagındaki yazıyı parametredeki değere göre saklar. hide parametresi, yavaş sakla anlamını taşır. show() metodu yazıyı parametredeki ifadeye göre gösterir. fast burada hızlı anlamını taşır. Firebug index.html dosyasındaki kodlar içerisinde DHTML ile CSS’leri göstererek, kapatarak ve açarak efektler görebildik. Şimdi arka planda neler oluyor onu göstermek istiyorum. Bunun için Firefox’unuza Firebug eklentisini ekleyin. Bir eklentinin nasıl ekleneceğini daha önceki derslerde anlatmıştım. Ben Firebug’ı Firefox’uma ekledim ve az önceki örneği çalıştırdım:
Musa ÇAVUŞ 210
Şekil122 Sağ alt köşede bir böcek resmi göreceksiniz. Onun üzerine bir tıklayın, sakın sinek minek varsa onun üzerine tıklamayın, buradaki böcekten kastım Firefox’ta bir böcek sembolü var ona tıklayın:
Musa ÇAVUŞ 211
Şekil23 CSS-Sinifi ekle düğmesine basılınca <div> tagın nasıl değiştiğine bir bakın: <div id="e" class="cssSinif"> Bu dunya bizim kirletmeyelim </div> class parametresinde otomatikman cssSinif diye bir atama olduğunu görmeniz, düğmeye basılınca arka planda böyle bir değişimin olduğunun göstergesidir.Gizle düğmesine basınca Firebug’da gösterilecek animiasyonun zaman bağlı olarak genişliğinin değiştiğini de görebilirsiniz. Diğer düğmelere basarak değişmileri inceleyin. Firebug’ın bu özelliğiyle analiz etmeniz çok kolaylaşıyor. Animasyonlu şekilde bir resmi büyültmek ve küçültmek istiyorum. Aynısını tarayıcının göstereceği bir yazı içinde gerçekleştirmek istiyorum: <html> <head> <title>Resim buyultme kucultme</title> <script type="text/javascript" src="jquery-1.4.2.js">
Musa ÇAVUŞ 212
</script> <script type="text/javascript"> $(document).ready(function(){ $("#toggle1").click(function(event){ $('#b1').slideToggle('slow'); }); $("#toggle2").click(function(event){ $('#h2').slideToggle('slow'); }); }); </script> </head> <body> <h1 id="u1">jQuery ile Resim buyultme kucultme</h1> <button id="toggle1"> Toogle Resim </button> <button id="toggle2"> Toogle Yazi </button> <br/> <img src="resim1.jpg" id="b1" /> <br/> <h2 id="h2">Acayip birsey bu ya.</h2> </body> </html> resimbuyultkucult.html
Musa ÇAVUŞ 213
Şekil124 ready(funktion(){ ile başlayan bir bloğumuzu biliyoruz. $(“#toggle1“) ile id’si toggle1 olan elemente ve $(“#toggle2“) ile id’si toggle2 olan bir elementine ulaşmış oluyorum. Elementlerin click metodudna id’si b1 ve h2 olan elementlerle işlem yapılmaktadır. Taglardaki id’lerle işlem yapabilmek için id’lerde yazan metni yazıyorsunuz önünede “#” işareti koyuyorsunuz. Bu örneğin en ilginç noktası slideToggle() metodu, çünkü bu metod her hangi bir elementi animasyon şeklinde ufaltır ya da büyültür. Parametrede slow yazdığı için siz Toogle Resim düğmesine basarsanız resim yavaşça ufalacaktır ve tekrar basınca yavaşça büyüyecektir. Aynı şeyler yazı içinde geçerlidir. Firebug açıksa değişiklikleri çok güzel izleyebilirsiniz. jQuery animasyon metotlarında zincirleme tekniği kullanmaktadır, mesela siz şu şekilde bir kod kullanırsanız her metod sırayla işlem görecektir: $('#b1').slideToggle('slow').slideToggle('fast').hide('slow'); b1 elementi önce yavaş kapancaktır sonra hızlı açılacaktır ve yavaş kayobolacaktır. Bir tagı başka bir tak bilgisiyle kuşaltmak istiyorsam wrap() metodunu kullanırız. wrap() metodunun nasıl çalıştığını Firebug ile daha güzel anlayacağız. <html>
Musa ÇAVUŞ 214
<head> <title>Kusat</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#metin1").click(function(event){ $('#metin1’).wrap("<div style='background:green'></div>"); }); }); </script> </head> <body> <h1>Elementi kusalt</h1> <span id="metin1"/>Ben kusatilacagim</span> </body> </html> kusat.html Farkına vardıysanız, metin1 id’sine ulaşabilmek için tek tırnakta kullanabiliyoruz, çüft tırnakta, hiç farketmiyor. Tarayıcı bu kodu çift tıkladığımda bir yazı gösterecek ve ben o yazının üzerine tıkladığımda wrap() metodunun içindeki tag, metin1 id’sine sahip tagı kuşatacaktır.
Şekil124
Musa ÇAVUŞ 215
kusat.html dosyasını tekrar çalıştıdığımızda Firebug’ımızı bir açalım. Đlk açtığımızda şöyle bir kod göreceğiz: <html> <head> <body> <h1>Elementi kusalt</h1> <span id=”metin1”> Ben kusatilacagim</span> </body> </html> Ben kusatilacagim yazısına tıkladığınızda Firebug şu kodu gösterecektir: <html> <head> <body> <h1>Elementi kusalt</h1> <div style=”background: none repeat scroll 0% 0% green;”> <span id=”metin1”> Ben kusatilacagim</span> </div> </body> </html> Ek olarak style parametresine bir kaç kod daha ilave edilmektedir fakat bizim isteğimiz dışında bir görüntü olmayacaktır. Taglardaki parametre değerleri jQuery ile çok kolay taglardaki parametrelerin değerlerini değiştirebilirsiniz. Sıradaki örneğimizde boş bir <img> tagı kullanıyorum ve jQuery ile parametrelerin değerlerini değiştirerek tarayıcıya resimler yüklüyorum: <html> <head> <title>Parametre</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#toggle1").click(function(){ $("img").attr({
Musa ÇAVUŞ 216
src: "r1.jpg" }); }); $("#toggle2").click(function(){ $("img").attr({ src: "r2.jpg" }); }); $("#toggle3").click(function(){ $("img").attr({ width: "300" }); }); $("#toggle4").click(function(){ $("img").attr({ width: "100" }); }); }); </script> </head> <body> <button id="toggle1"> Resim 1 </button> <button id="toggle2"> Resim 2 </button> <button id="toggle3"> Buyuk </button> <button id="toggle4"> Kucuk </button> <hr/><img/> </body> </html> parametredegiskligi.html
Musa ÇAVUŞ 217
Şekil125 $("img") koduna iyi bakarsanız # işaretini kullanmadığımı görürsünüz. Bu şekilde tüm <img> taglarına hitap etmiş oluyorum. <img> tagının parametrelerini değiştirebilmek için attr() metodu vardır. attr() metodunun içinde {} parantezlerini kullanarak hangi parametreleri değiştirmek istiyorsak o parametreyi yazarız ve iki nokta üst üste koyduktan sonra değerini tırnak içerisine yazarız. Firebug ile baktığınızda önce <img> tagını boş göreceksiniz, fakat düğmelere bastıkca parametreler eklendiğini ve değerler atandığını göreceksiniz. {} parantezlerinin burada ne işi olduğunu şimdilik anlamak tuhaf gelebilir, fakat jQuery ile nesne oluşumunu anlatırken bunu çok güzel anlayacaksınız, o yüzden şimdilik kalbinizi ferah tutun. CSS kurallarını eklemek CSS kurallarını taglara nasıl ekleyebileceğimizi bu bölümde göstereceğim. Bunun için çok basit bir metod vardır css().
Musa ÇAVUŞ 218
<html> <head> <title>CSS</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $("document").ready(function(){ $("h1:eq(1)").css({ background:"yellow", color:"white", textAlign:"center" }); $("h2").css({ background:"black", color:"red", textAlign:"center" }); }); </script> </head> <body> <h1>Birinci satir</h1> <h1>Ikinci satir</h1> <h1>Ucuncu satir</h1> <h1>Dorduncu satir</h1> <h2>ve</h2> <h1>Besinci satir</h1> </body> </html> css.html
Musa ÇAVUŞ 219
Şekil126 css() metodunun içine {} parantezini kullanarak eklemek istediğiniz CSS parametrelerini ekleyebilirsiniz. h1:eq(1) yazarak sayfadaki ikinci <h1> tagıyla işlem yapacağımı söylüyorum. Firebug ile burada da kod değişikliğini görebilrisiniz. jQuery ile neler yapabileceğinizi az buçuk gösterdim. Bunlar jQuery ile yapabileceğinizin çok ufak bir bölümü, bundan sonraki konularda ayrıntılara gireceğim.
Musa ÇAVUŞ 221
12.1 Nesneler ve sınıflar JavaScript ve jQuery’de hazır metotları olan nesneleri kullanmamız bize çok kolaylık sağladığını gördük. Bunu DOM teknolojisini kullanarak ya da kendi oluşturduğumuz sınıflarla yapabiliyoruz. JavaScript’i anlatırken nesnelerin ve sınıfların ne olduğunu anlatmıştım ve örneklerde vermiştim. JavaScript’te anlattıklarım jQuery’de aynen geçerlidir. jQuery’de bunun dışında tanımlanmış şekilde de bir nesne oluşturabilirsiniz. Kurucu metoda da hiç ihtiyacınız kalmaz ve nesneleri oluşturmanız çok kolay olmuş oluyor. jQuery, JavaScript’in bir çocuğudur unutmayın bunu. <html> <head> <title>Nesne olusumu</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var x = { ad:"Perihan", yas:12, konus:function(){ alert("Zipla"); } }; alert(x.yas); x.konus(); </script> </head> <body> <h1>Nesneleri blok halinde olusturma islemi</h1> </body> </html> bloknesneolusumu.html
Musa ÇAVUŞ 222
Şekil127 {} parantezleriyle bir blok açıyoruz ve bu blok içerisinde oluşturmak istediğimiz nesnemizin değişkenlerini ve metotlarını tanımılıyoruz. Değişkenleri ve metotları tanımlarken iki nokta üst üste koyuyoruz. Daha sonra değişkenin değerini ya da metodun tanımlamasını yazıyoruz. Değişken ve metot tanımlamaları arasını virgül ile ayırıyoruz. Blok tanımlaması bittikten sonra bunu bir değişkene atıyoruz ve bu değişken bizim nesnemiz olmuş oluyor. Daha önce yaptığımız css.html örneğine bakarsanız orada da böyle bir tanımlama yaptığımızı görürsünüz: $("document").ready(function(){ $("h1:eq(1)").css({ background:"yellow", color:"white", textAlign:"center" }); css() metoduna verilen parametre bir nesneden başka bir şey değil. Kıyaslamak açısından kurucu metodu kullanarak ve blok sistemiyle iki nesne oluşturmak istiyorum: <html> <head> <title>Nesne Erisimi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> function Kisi(ad, yas){ this.ad = ad; this.yas = yas; }; var x = {
Musa ÇAVUŞ 223
ad: "Burhan", yas: 43 }; var y = new Kisi("Fevziye", 56); alert(x["yas"]); alert(y["ad"]); </script> </head> <body> <h1>Nesne bolumlerine erisim</h1> </body> </html> nesneerisimi.html
Şekil128 x ve y nesnelerin değişkenlerine ya da metotlarına farklı olarak köşeli parantezler sayesinde de erişim sağlayabiliyoruz. jQuery’de bu tür erişimleri çok göreceksiniz. 12.2 Fonksiyon ve metotlar Fonksiyonların ve metotların neler olduğunu JavaScript’te gördük. Fonksiyonları iki çeşit çağırabiliyoruz. Birincisi fonksiyon doğrudan çağırıyoruz, ikincisi fonksiyon referansıyla çağırıyoruz. jQuery’de referans ile
Musa ÇAVUŞ 224
çağırma çok kullanılmaktadır. JavaScript’te doğrudan çağırma daha çok kullanılıyor. Đki çağırma şeklinin olduğu bir örneği verirsem daha iyi anlaşılacaktır: <html> <head> <title>Fonksiyon cagirma</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> function cikti(){ $("#cikti").html("fonksiyon cikti()"); } $(document).ready(function(){ // cikti(); $("#b1").click(cikti); }); </script> </head> <body> <h1>Fonksiyon cagirma</h1> <button id="b1"> Tikla </button> <div id="cikti"> </div> </body> </html> fonksiyon.html
Musa ÇAVUŞ 225
Şekil129 cikti() fonksiyonunu click() metodunun içerisinde parantez olmadan çağırıyoruz. Bu çağırma şekli referans ile çağırma şeklidir. cikti(); şeklindeki çağırma şekliyse doğrudan çağırma şeklidir. Kafanıza mutlaka takılmıştır neden bazı yerlerde funktion yazıyor ve bazı yerlerde funktion() yazıyordur diye. funktion() olarak tanımlanan fonksiyonlar anonim fonksiyonlardır. Bu fonksiyonlar sadece o yerde kullanılmaktadır. Anonim fonksiyonları değişkenlere atayabiliriz veya buradaki gibi metotlara parametre olarak verebiliriz. Callback ve iç fonksiyonlar jQuery’de iç fonksiyonlar çok kullanılmaktadır. Đç fonksiyonlar, bir fonksiyonun içinde olan başka fonksiyonlardır. Callback fonksiyonlarda genelde iç fonksiyonlarla beraber kullanılmaktadır. <html> <head> <title>Callback</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>Callback</title> <script type="text/javascript"> function benimFonksiyon(icerik){ $("#cikti").html(icerik); } function getText(metin){
Musa ÇAVUŞ 226
return function(){ benimFonksiyon(metin); }; } $(document).ready(function(){ $("#b1").click(getText("Ormanlik")); $("#b2").click(getText("Gul bahcesi")); }); </script> </head> <body> <h1>Callback</h1> <button id="b1"> Tikla </button> <button id="b2"> Tikla </button> <div id="cikti"> </div> </body> </html> callback.html
Şekil130 $("#b1").click(getText("Ormanlik")); kodunda click() metodunun parametresine, referans içerikli bir fonksiyon yazmak yerine doğrudan çağrılan
Musa ÇAVUŞ 227
bir fonksiyonun yazıldığını görüyorsunuz. getText() fonksiyonu aslında içeriğinde benimFonksiyon() fonksiyonun referansını iletmektedir, çünkü fonksiyon() olarak tanımlanan anonim fonksiyonların bir başka özelliği tanımlandıkları yerde referans özelliği taşımalarıdır. queue() ve dequeue() Fonksiyonları sıralı olarak çağırmak istiyorsak queue() ve dequeue() fonksiyonları yardımımıza koşacaktır. queue() ve dequeue() fonksiyonlarını kullanmadan önce fonksiyonları normal yol ile çağıran bir örnek göstermek isityorum ki queue() ve dequeue() fonksiyonların çalışma prensiplerini daha iyi anlamış olursunuz: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery ile animasyon</title> <script type="text/javascript"> $(document).ready(function(){ $("*").css({ background: "#ecaae2", color: "#1e1e1e" }); $("#resim1").css({ position: "absolute", left: "20px", top: "160px" }); $("#resim2").css({ position: "absolute", left: "450px", top: "60px" }); $("#b1").click(function(){ $("#resim1").animate({ left: '+=200px' }, 2000); $("#resim1").animate({ top: '300px' }, 600); $("#resim1").slideUp("slow"); $("#resim1").slideDown("slow");
Musa ÇAVUŞ 228
$("#resim1").animate({ left: '20px', top: '160px' }, 700); }); $("#b2").click(function(){ $("#resim2").animate({ left: '+=200px' }, 2000).animate({ top: '300px' }, 600).slideUp("slow").slideDown("slow").animate({ left: '400px', top: '60px' }, 700); }); }); </script> </head> <body> <h1>jQuery ile animasyon</h1> <img src="resim1.jpg" id="resim1" style=""/> <img src="resim2.jpg" id="resim2" style="position:absolute;left:20px;top:60px"/> <button id="b1"> Tikla </button> <button id="b2"> Tikla </button> </body> </html> animasyon.html
Musa ÇAVUŞ 229
Şekil131 animate() metodu verilen koordinatlar doğrultusunda nesneyi kaydırmaktadır. Yaptığım sadece animasyon metotlarını ard arda çağırmak oldu. Çağıracağım fonksiyonları bir yığına koymak istersem queueu() metodunu kullanmak zorundayım. Yığından çağrılacak fonksiyonlarıda dequeueu() metoduyla çağırırım. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>queue() ve dequeue()</title> <script type="text/javascript"> $(document).ready(function(){ $("*").css({ background: "#ab1b52", color: "#1e1e1e" }); $("#resim1").css({
Musa ÇAVUŞ 230
position:"absolute", left:"20px", top:"160px" }); $("#resim2").css({ position:"absolute", left:"450px", top:"60px" }); $("#resim1").queue(function(){ $(this).slideUp("slow"); $(this).slideDown("slow"); }); $("#resim1").queue(function(){ $(this).fadeOut("slow"); $(this).fadeIn("slow"); }); $("#resim2").queue(function(){ $(this).fadeOut("slow"); $(this).fadeIn("slow"); }); $("#b1").click(function(){ $("#resim1").dequeue(); }); $("#b2").click(function(){ $("#resim2").dequeue(); }); }); </script> </head> <body> <h1>jQuery ile animasyon</h1> <img src="resim1.jpg" id="resim1" style=""/> <img src="resim2.jpg" id="resim2" /> <button id="b1"> Tikla </button> <button id="b2"> Tikla
Musa ÇAVUŞ 231
</button> </body> </html> kuyruk.html
Şekil132 queueu() metoduna fonksiyonları koyarken önce bir anonim fonksiyon tanımlıyoruz, sonra this referansıyla çağırmak istediğimiz metodu parametresiyle yazıyoruz ve noktalı virgül ile bitiriyoruz. thıs referansı animasyon gösterisi yapılacak resme işaret etmektedir. 12.3 Diziler Diziler, ayni verileri kayıt ederlerse çok avantajlıdır. Dizilerdeki özellik, bir isim ve bir belirteç ile dizi içerisindeki değerlere ulaşabilmemizdedir. Đsimden sonra köşeli parantez içerisine belirteçle koyarak bunu yapabiliriz. new Array() olarak nasıl bir dizi oluşturduğumuzu JavaScript bölümlerinde gösterdim. Başka bir usül ise eşittir işaretinden sonra köşeli parantez kullanmaktır.
Musa ÇAVUŞ 232
<html> <head> <title>Dizi olusumu</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var a = new Array(); var b = [5, 89, 43, 33]; alert(a.length); alert(b.length); }); </script> </head> <body> </body> </html> diziolusumu.html
Şekli133 b değişkenine hazır verileri köşeli parantez içerisinde atadım ve uzunluğunu alert() fonksiyonuyla ekranda gösterttim. Dizilere erişim Dizilerdeki en büyük avantaj, dizilerin içindeki değerlere döngüler vasıtasıyla ulaşabilinmesidir. <html> <head>
Musa ÇAVUŞ 233
<title>Dizi erisim</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var sayilar = new Array(); var sayicek = [1, 2, 3, 4, 5, 6, 7]; $(document).ready(function(){ for (i = 0; i < 7; i++) { sayilar[i] = Math.round(1 + Math.random() * 148); } for (i in sayilar) { $("#cikti").append("Sayi " + sayicek[i] + ": "); $("#cikti").append(sayilar[i] + "<br>"); } }); </script> </head> <body> <h1>Sayilar</h1> <div id="cikti"> </div> </body> </html> dizierisim.html
Şekil134
Musa ÇAVUŞ 234
Bu örnekte iki dizi oluşturdum. Birincisini kurucu metot ile oluşturdum. Đkincisini de köşeli parantezle. Birinci döngüde tesadüf olarak 7 sayı seçilmektedir. Đkinci döngüdyse append() metoduyla birinci döngüde seçilen 7 sayıyla sayicek dizisi birleştirilerek tarayıcıda gösterilmektedir. each() jQuery döngülerin zahmetinden kurtarmak için each() fonksiyonunu bize sunuyor. Jeneriklik özelliği gösteren each() fonksiyonuyla dizilere erişim sağlayabildiğimiz gibi nesnelere de erişim sağlayabilmekteyiz. <html> <head> <title>each()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> function isim() { this.yas = 15; this.ad = "Tarik"; } var sayi=[1,2,3,5,7,11,13,17,19,23,29]; var kisi = new isim(); $(document).ready(function(){ jQuery.each(sayi,function(belirtec,value){ $("#cikti1").append((belirtec + 1),". Sayi: ", value, "<br />"); }); jQuery.each(kisi,function(belirtec,value){ $("#cikti2").append("Belirtec: ", belirtec,", Deger: ", value, "<br />"); }); }); </script> </head> <body> <h1>Sayilar</h1> <div id="cikti1"></div> <h1>Nesne</h1>
Musa ÇAVUŞ 235
<div id="cikti2"></div> </body> </html> each.html jQuery.each() fonksiyonu bizden iki parametre beklemektedir. Birinci parametre erişim sağlamak istediğimiz dizi ya da nesne. Đkinci parametre olarak bir callback ya da anonim bir fonksiyon giriyoruz. Biz ikinci parametrede ne yapılacaığını ifade ediyoruz. belirtec değişkeni dizideki ya da nesnedeki belirteci belirtmektedir ve value ise belirtilmektede olan sıradaki elemanın değerini vermektedir. jQuery.each(sayi,function(belirtec,value){} yapısını şu şekilde düşünebilirsiniz: for (belirtec=0;belirtec<sayi.length;belirtec++) Bu çok karmaşık ben bunu for döngüsüyle daha kolay yaparım derseniz, doğru dersiniz, fakat nesnelere ulaşmada ya da belirtecin bir tam sayı olmadığı durumlarda each() fonksiyonu çok kolaylık sağlar. Örneğin kisi nesnesinin değişkenlerine ulaşmak gibi. each() fonksiyonu, nesne elemanlarını sanki bir dizi elemanıymış gibi işleme sokar ve bize iletir. Nesnelerde belirtecler birer metindir.
Musa ÇAVUŞ 236
Şekil135 12.3 jQuery alanı jQuery Framework’unda tüm genel değişkenler jQuery alanı denilen bir yerde kayıt ediliyor ve bu değişkenlere, jQuery() veya $() şeklinde ulaşabilirsiniz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery() ve $()</title> <script type="text/javascript"> $(document).ready(function(){ $("#resim1").click(function(){ jQuery("#resim").fadeOut();
Musa ÇAVUŞ 237
}); jQuery("#resim2").click(function(){ $("#resim").fadeIn(); }); }); </script> </head> <body> <h1>jQuery() $()</h1> <img src="resim1.jpg" id="resim" style=""/><hr /> <button id="resim1"> Tikla </button> <button id="resim2"> Tikla </button> </body> </html> jqueryalan.html $() ve jQuery() şeklindeki tanımlamalar arasında hiç bir fark yok. Parametrelerine bakarsanız bir selektör kullanıldığını göreceksiniz. Đkinc bir parametre daha verebilirsiniz fakat bunu başka bir örnekle göstermek istiyorum. fadeIn() ve fadeOut() metodları animasyon şeklinde gösterilen nesneyi yok eder ve gösterir. Animasyonla ilgili metodları örneklerimde şimdiden kullanıyorum çünkü görsel olarka örnekler insanların beyninde daha iyi kalırlar. Yalnız animasyon konusunu daha sonra ayrıyeten ele alacağım.
Musa ÇAVUŞ 238
Şekil136 $() ve jQuery() tanımlamalarının ikinci parametrelerinde kayıt edilecek verilerin context’lerini gireriz, yanı verilerin kayıt edilecek bölgeleri diyebiliriz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery Context</title> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ $("#cikti").html(jQuery("input:text", document.forms[0]).val()); }); $("#b2").click(function(){ $("#cikti").html(jQuery("input:text", document.forms[1]).val()); }); }); </script> </head> <body> <h1>jQuery Context</h1> <form> <input/> </form> <form> <input/> </form><hr/> <button id="b1"> Tikla </button> <button id="b2"> Tikla </button> <div id="cikti"> </div> </body> </html> jquerycontext.html
Musa ÇAVUŞ 239
Şekil137 Đkinci parametreyi girmezsek veriler bulunduğumuz web sayfasında saklanırlar. Verdiğimizde bir DOM ya da jQuery nesnesi oluştururuz ve veriler bu nesnelerde saklanırlar. document.forms[0] denildiğinde, context sayfadaki birinci Formdur. val() metoduda seçilmiş nesnenin içeriğindeki değeri iletir. Birinci Tikla düğmesine basılınca birinci Form seçilir, ikinci Tikla düğmesi tıklanınca ikinci Form seçilir ve bunlar sadece ikinci parametre sayesinden ayrılmaktadır. Dinamik element jQuery’de tagları dinamik olarak oluşturabilirsiniz. String formatında oluşturduğunuz veriyi appendTo() metoduyla her hangi bir taga ekleyebilrisiniz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>jQuery() ve $()</title> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ var sayi = Math.random(); $("<tr><td>Sayi</td><td>" + sayi + "</td></tr>").appendTo("#t1"); }); }); </script> </head>
Musa ÇAVUŞ 240
<body> <h1>jQuery() ve $()</h1> <table id="t1"/> <button id="b1"> Tikla </button> </body> </html> jqueryelemanolustur.html
Şekil138 Tıkla düğmesine bastığımda Tıkla düğmesinin altında bir satır oluşacaktır ve bu oluşan satır aslında bir tablo satırıdır. Her tıklamada yeni bir tablo satırı oluşturuyor. Firebug ile bu oluşumu daha iyi izleyebilirsiniz. $() tanımlamasının içine yazılan String HTML kriterlerine uygun olmalıdır. Diyelim ki bu örnekteki bir <td> tagını kapatmadınız o zaman çalışmaz. Ya da bir <div> tagının içine bir <body> tagı koymaya çalışırsanız kod yine çalışmayacaktır. Parametrelerdeki detaylarla ilgileniyorsanız http://api.jquery.com/jQuery/ sayfasını inceleybilirsiniz. Ben sadece çok kullanlan yöntemlere değiniyorum.
Musa ÇAVUŞ 241
Şekil139 eq() DOM elementleriyle işlem yapabilmek için eq() çok yararlı bir metottur. Metodun parametresi, aynı guruptaki elementlerin belirtecidir. Burada <img> tagı aynı gurup olmuş oluyor ve i değişkeniyle eq() metodundan yararlanarak tüm <img> tagların CSS özelliklerini değiştirmiş oluyoruz. <html> <head> <title>eq()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ for (i = 0; i < $("img").length; i++) { $("img").eq(i).css("left", 50 + (i * 200) + "px");
Musa ÇAVUŞ 242
$("img").eq(i).css("top", 50 + (i * 80) + "px"); } }); </script> <style type="text/css"> img { position: absolute; } </style> </head> <body style="text-align:center;font-size:12px"> <img src="krom.jpg" /><img src="kiristal.jpg" /><img src="krom.jpg" /><img src="kiristal.jpg" /> </body> </html> eq.html
Şekil140 length değişkeniyle sayfadaki <img> tagların sayısının ne kadar iletildiğine dikaat edin. get()
Musa ÇAVUŞ 243
DOM elementlerine ulaşmanın bir başka yoluda get() metodunu kullanmaktır. DOM nesnelerine dogrudan erişebilmek için bu yöntem çok uygundur. get() metoduyla $() parantezinde belirtilen tüm tagları elde ederiz. <html> <head> <title>get()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var resim = $("img").get(); for (i = 0; i < resim.length; i++) { resim[i].style.left = 50 + (i * 200) + "px"; resim[i].style.top = 50 + (i * 80) + "px"; } }); </script> <style type="text/css"> img { position: absolute; } </style> </head> <body style="text-align:center;font-size:12px"> <img src="kiristal.jpg" /><img src="krom.jpg" /><img src="kiristal.jpg" /><img src="krom.jpg" /> </body> </html> get.html
Musa ÇAVUŞ 244
Şekil141 get() metoduyla resim değişkenine sayfadaki tüm <img> taglarını DOM elementi şeklinde aktarmış oldum. eq() metoduyla jQuery nesnesi üzerinden ulaşırken get() metoduyla dogrudan DOM elementlerine ulaşabilinmektedir. index() index() metoduyla bir elementin sayfadaki pozisyonunu bulabiliriz. <html"> <head> <title>index()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("img").css("width", "250px"); $("img").click(function(){ var index = $("img").index(this); $("#cikti").text("belirtec " + index); }); }); </script> </head>
Musa ÇAVUŞ 245
<body style="text-align:center;font-size:12px"> <img src="krom.jpg" /><img src="kiristal.jpg" /><h1 id="cikti"></h1> </body> </html> belirtec.html
Şekil142 index(this) ifadesindeki this tetikleyici nesne demektir. Ben ikinci resime tıkladığımda buradaki tetikleyici ikinci resim olmuş oluyor. text() metoduyla cikti id’sine sahip <h1> tagındaki yazıyı belirtec 1 olarak değiştirebildim. data() ve removedata() Bazı durumlarda özel bir element için web sayfasında ek bilgiler kayıt etmek isteyebilirsiniz. data() metodu bize bu olanağı tanımaktadır. <html> <head> <title>Veri Kayiti</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(e){
Musa ÇAVUŞ 246
var deger; switch ($("button").index(this)) { case 0: deger = $("img").data("bilgi"); break; case 1: $("img").data("bilgi", "Bu bir deger"); deger = $("img").data("bilgi"); break; case 2: $("img").removeData("bilgi"); deger = undefined; break; } $("span").text("" + deger); }); }); </script> </head> <body> <h1>Veri Kayiti</h1> <img src="resim1.jpg"><hr/> <button> Metainfo ojlustur </button> <button> Metainfo olustur ve deger ata </button> <button> Metainfo sil </button> <h2>Metainfo degeri: <span></span>.</h2> </body> </html>
Musa ÇAVUŞ 247
Şekil143 data() metodunun birinci parametresi anahtar kelimedir, ikinci parametreyse saklanacak olan değerdir. undiefined terimi tanımlanmamış anlamına gelmektedir. removedata() metoduylada, data() ile oluşturulan veri silinebilmektedir. Framework çakışması jQuery ile başka bir Framework’u aynı kod içerisinde kullanma isteğinde bulunabilirsiniz. Böyle durumlarda başka Framework, jQuery ile aynı alanı kullandığından çakışmalar ortaya çıkabilir. Örneğin Prototype Framework’u jQuery gibi $ işaretini kullanmaktadır. Bunu çözebilmek için noConflict() metodunu kullanabiliriz. <html> <head> <title>jQuery noconflict/title>
Musa ÇAVUŞ 248
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var $degisken = jQuery.noConflict(); $degisken(document).ready(function(){ jQuery("img").css({ border: "9px outset", cursor: "move", opacity: 0.5 }); }); </script> </head> <body> <img src="resim.jpg"> </body> </html> jquerynoconflict.html noConflict() metodu sayesinde $ işareti yerine $degisken kullanılabilir. $ jQuery’de noConflict() metoduyla kapanmış oluyor. Yapılması gereken yukarıdaki gibi jQuery.noConflict() tanımlanmak istenilen değişkene atanmasıdır. Atanan değişkeni $ yerine kullanbilirsiniz. 12.4 Prototyping ve extend() JavaScript’i anlatırken prototyping sistemini anlatmıştım. Tekrardan jQuery ile bu konuya değinmek istiyorum. JavaScript dili, daha öncede bahsettiğim gibi nesneye dayalı bir proglramlama dili değildir, fakat yine de bir nesne oluşturmanıza izin vermektedir. jQuery’nin bir sütunu bu oluştururken diğer sütununu prototyping oluşturmaktadır. Prototyping ile var olan nesnelere veriler ekleyerek yeni nesneler oluşturabiliyoruz. Plugin konusunu ancak bu konuyu iyi anlarsanız anlayabilirsiniz. Prototyping’i, nesneye dayalı programlamadaki kalıtıma benzetebilirsiniz. <html> <head> <title>Prototyping</title> <script type="text/javascript" src="jquery-1.4.1.min.js"> </script> <script type="text/javascript"> var x; function Adam(ad) {
Musa ÇAVUŞ 249
this.ad = ad; } $(document).ready(function() { x = new Adam("Ahmet"); $("#cikti").html(x.ad); Adam.prototype.yas=212; $("#cikti").append(x.yas); var y = new Adam("Mehmet"); y.yas = 100; $("#cikti").append(y.yas); } ); </script> </head> <body> <div id="cikti"></div> </body> </html> prototyping.html
Şekil144 var x ile bir değişken tanımladım ve function Adam(ad) derken this anahtar kelimesini kullanarak bir nesne oluşturdum. new oepratörü ile oluşturduğum Adam nesnesini x değişkenine atadım. x nesnesinin ad parametresini html() fonksiyonuyla cikti id’sine sahip <div> tagına ekledim. html() fonksiyonu id’si verilen tagın html kısmını verilen parametreye göre değiştirir. append() fonksiyonuysa var olan html metinine ekleme yapar. Adam nesnesinden sonra
Musa ÇAVUŞ 250
nokta koyarak protoype yazdım ve ondan sonra da yas yazarak bu değişkene 212 değerini atadım. Böylelikle var olan Adam nesnesine bir yas değişkeni eklemiş oldum. Prototyping’e göre bundan sonraki oluşturulan Adam nesnelerinde yas değişkeni olacaktır. 12.5 extend() extend() fonksiyonu kullanılan nesneyi geliştirmektedir. Aşağıdaki örnekte jQuery nesnesi geliştirilmiştir. <html> <head> <title>extend()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> jQuery.extend({ sayi: function(){ return Math.random(); } }); $(document).ready(function(){ $("#cikti").text(jQuery.sayi()); }); </script> </head> <body> <div id="cikti"> </div> </body> </html> extend1.html extend() fonksiyonunda parametre olarak bir nesne oluşturuyorum ve bu nesnedeki fonksiyon jQuery’nin bir metodu olmuş oluyor.
Musa ÇAVUŞ 251
Şekil145 jQuery’yi geliştirmek normalde uygulanmayan bir yöntemdir ve daha çok pluginler geliştirilir. Bunun için bir örnek vermek istiyorum. Vereceğim örnek plugin değil. Sadece o yöne giden bir örnek. <html> <head> <title>extend()</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> jQuery.fn.extend({ mavi: function(){ return this.each(function(){ this.style.color = "blue"; }); }, kirmizi: function(){ return this.each(function(){ this.style.color = "red"; }); }, yesil: function(){ return this.each(function(){ this.style.color = "green"; }); }
Musa ÇAVUŞ 252
}); $(document).ready(function(){ $("h1").mavi(); $("h2").yesil(); jQuery("h3").kirmizi(); }); </script> </head> <body> <h1>Ben</h1> <h2>burada</h2> <h3>ne</h3> <h2>yapiyorum</h2> <h3>sen</h3> <h1>bunu</h1> <h2>biliyor musun?.</h2> </body> </html> extend2.html
Şekil146
Musa ÇAVUŞ 253
jQuery nesnesinden sonra fn kullanıyoruz buna plugin konusunda değineceğiz ve fn’den sonra extend() fonksiyonunu kullanarak jQuery’nin altına organize edilmiş nesnelerine metodlar ekleyebiliyoruz. extend() fonksiyonuna eklemek istediğimiz metodun adını yazıyoruz ve iki nokta üst üste koyarak o fonksiyonun ne yapacağını tanımlıyoruz. Mesela ben bir metod için mavi yazdım ve fonksiyonun ne yapacağını iki nokta üst üsteden sonra tanımladım. Buradaki each metodunu hatırlayacaksınız, dizilere ve nesnelere erişmek için kullanılıyor. Tek parametre kullanılıdığında this ile gösterilen tüm nesnelere erişim sağlanmatakdır. mavi() fonksiyonu örnekte <h1> tagı için kullanılmıştır ve each() fonksiyonu tüm <h1> taglarına erişmektedir. “Ben” ve “bunu” metinleri bu yüzden mavi olarak ekrana gelecektir. Tanımladığımız metotları kullanmak çok kolaydır. Noktadan sonra sadece metodun adını yazıyoruz ve parantezi kapatıp açıyoruz.. Kitabın burasına geldiyseniz, artık sizin elinize çok az kişi su dökebilir ve siz Türkiye’nin sayılı jQuery uzmanlarından olmuş oluyorsunuz. Kimsenin dökememesi için kitabı lütfen sonuna kadar çalışmaya devam edin.
Musa ÇAVUŞ 255
13.1 Selektörler Selektör, websayfasındaki ağaç yapısındaki elementlerin seçilmesidir. jQuery’de bir çok ortamda temel selektörler, diğer adıyla temel seçiciler kullanılmaktadır. Bunlar CSS’deki selektörlerle aynıdır. Eğer CSS ile tanışıklığınız varsa bu selektörler çok tanıdık gelecektir. Tanımıyorsanız, problem değil, çünkü ben şimdi size tanıtacağım. Aşağıdaki örnekte zamanla kullandığımız selektörleri bir örnekte topladım: <html> <head> <title>Temel Selektorler</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("*").css("color", "magenta"); $("#b1").css("border", "16px solid blue"); $("hr").css({ 'background-color': 'grey', 'height': '7px', 'width': '400px' }); $(".sinif").css("fontSize", "22px"); $(".sinif1.sinif2").css({ 'background-color': 'yellow', 'color': 'red', 'fontSize': '30px' }); $("div,p,h1").css("border", "3px solid gray"); }); </script> </head> <body> <h1>Temel Selektor</h1> <span class="sinif1">Bir Logo</span> <img src="selektor.jpg" id="b1"/><hr/> <div class="sinif2 sinif2"> Ne haber? </div> </body>
Musa ÇAVUŞ 256
</html> selektorler.html
Şekil147 $(“*”) şeklindeki bir selektör tüm taglara erişim sağlamaktadır. Ben bu şekilde tüm tagların renklerini CSS kullanarak değiştirmiş oldum. Yıldız karakteri hepsi demektir. $(“#b1”) ile belirli bir tagı seçebiliyorum, buradaki “#” işareti belirli bir tag olduğunda kullanılır ve taglardaki id parametresinin değeri “#” işaretinden sonra yazılır. $(“hr”) şeklindeki bir kullanım tüm <hr> taglarına erişim sağlamaktadır. Yıldızdan farklı olarak bir gruplama söz konusudur. $("div,p,h1") kullanımıyla parantez içerisinde verilen tag gruplarına erişim sağlamaktadır. $(".sinif") kullanımında tanımlamadan önce bir nokta kullandım. Nokta, bize class parametresi içeren taglara erişmemiz içindir. $(".sinif1.sinif2") olarak tanımlama yaptığımızda sınıf içerisindeki bir sınıfa erişmiş oluyoru ki bunu class=”sinif1 sinif2” biçiminde algılayabilirsiniz. Selektörleri sadece bu şekilde kullanmıyoruz. Đleri düzeyde kullanmak istersek, bir kaç kombinasyonla bunu yapabiliriz. Kombinasyonlu selektörleri aşağıdaki örnekte verdim ve uzun bir örnek oldu, çünkü tüm selektör tiplerini tek bir örnekte topladım. Đsterseniz örneğin bölümlere bölebilirsiniz. Bu örneği anlarsanız selektörleri çok iyi anlamışsınız demektir.
Musa ÇAVUŞ 257
<html> <head> <title>Duzen Selektor</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("h1 div").css({ border: "1px magenta", background: "blue", color: "white", textAlign: "center" }); $("div span").css({ border: "2px green", background: "yellow", color: "white" }); $("ul li").css("color", "blue"); $("p > img").css({ border: "2px solid yellow", width: "100px" }); $("label + input").css("border", "1px solid blue"); $("#id1 ~ div").css("background", "gray"); }); </script> </head> <body> <h1> <div> Ankara </div> </h1> <ul> <li> Konya </li> <li> Danimarka </li> <li> Sivas </li>
Musa ÇAVUŞ 258
</ul> <div> <span>Belcika</span> </div> <ol> <li> Tahta </li> <li> Ucak </li> <li> Buraya tikla </li> </ol> <form> <label> Name: </label> <input name="ad" /> <label> Email: </label> <input name="email" /><input type="submit" /> </form> <p> <img src="selektor.jpg"/> <div> Logo </div> </p> <span id="id1">Hadi ya</span> <div> Nerede </div> <div> Gercekten mi <div> yaptin </div> </div> <span>Burada</span> <div> oluyorum
Musa ÇAVUŞ 259
</div> </body> </html> duzenselektor.html
Şekil148 $("h1 div")> kullanımı <h1> tagının bir altında olan <div> taglarına erişim sağlamaktadır. $("p img") kullanımı <p> ata tagınn <img> çocuk taga erişimi sağlamaktadır. $("label + input") kullanımı <label> ve <input> taglarının ard arda kullanıldığı durumlarda erişim sağlanmaktadır. $("#id1 ~ div") kullanımı #id1 id’li tagdan sonra gelen tüm <div> tagları için geçerlidir. ~ işareti ile bu işlemi yapabiliyoruz. 13.2 Filtreler Temel filtreler
Musa ÇAVUŞ 260
Filtreler, jQuery’ide iki nokta üst üste kullanılarak gruplar oluşturulabiliyor. Đlk aşamada temel filtreleri göstermek istiyorum ve temel filtrelerin hepsini tek bir örnekte toplayarak bunun daha iyi anlaşılacağından eminim. Örnek yine bira uzun gelebilir. Anlaşılması ise çok kolaydır: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $(":header").css({ background: 'black', color: 'white' }); $("td:even").css({ color: 'yellow' }); $("td:odd").css({ color: 'gray' }); $("tr:odd").css({ fontSize: '20px' }); $("tr:first").css({ fontSize: '14px' }); $("td:lt(2)").css({ background: '#aaa' }); $("td:gt(3)").css({ background: '#ff0000' }); $("td:eq(2)").css({ color: 'red' }); }); </script> </head> <body> <h1>Baslik I</h1> <h2>Baslik II </h2> <table> <tr> <td>1</td>
Musa ÇAVUŞ 261
<td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> temelfiltreler.html
Şekil149 Kodu ilk filtreden incelemeye başlıyoruz. $("tr:first") kullanımında görüldüğü gibi tr ile first arasında iki nokta üst üste kullanılmıştır. Burada diyoruz ki: “<tr> tagının ilk alt tagına eriş”, çünkü first kullanılmıştır ve first ilk demektir. first yerine last kullansaydınız son alt tag olacaktı. $("td:even") ile <td> tagı 2’ye bölünebilen bir sayıysa işleme koy anlamını taşımaktadır. <table> tagının oluşturduğu tabloyu düşünün. <td> tagı birinci sütun ise örnekte olduğu gibi
Musa ÇAVUŞ 262
işleme konuyor ve yazı sarı oluyor.odd anahtar kelimeside even anahtar kelimesinin tam tersine 2’ye bölünemeyen saıylarda geçerlidir. lt(2) ile 2 sayısından küçük olanlar işleme sokuluyor. gt(3) ise 3 sayısından büyük olanlara işaret ediyor. eq(2) ise 2 sayısına eşit olanlara işaret etmektedir.Dikkat edilmesi gereken nokta jQuery sıfırdan saymaya başlıyor. $(":header") kullanımında iki nokta üst üsteden önce hiç bir anahtar kelime kullanılmamış. Bu gibi durumlarda kategorize edilmemektedir ve örnektede olduğu gibi tüm header’ler yani tüm başlık tagları işleme konulmaktadır. Parametre filtreler jQuery’deki kullanışlı filtreler parametre filtreleridir. Regular Expression gibi kullanaiblirsiniz ve Reqular Expression gibi karmaşık bir yapıya sahip olmak yerine çok basit bir yapıya sahiptirler. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("[target]").css({ background: 'cyan' }); $("[src$=png]").css({ height: '250px' }); $("[target=ortam]").css({ color: 'white' }); $("[target^=blog]").css({ color: 'yellow' }); $("[target*=alternatif]").css({ background: 'gray' }); }); </script> </head> <body> <a href="http://www.google.com">link1</a> <br/> <a href="http://www.musa-cavus.com" target="ortam">link2</a> <br/>
Musa ÇAVUŞ 263
<a href="http://www.hotmail.com" target="ortam">link3</a> <br/> <a href="http://www.facebook.com" target="blog">link4</a> <br/> <a href="http://www.facebook.com.tr" target= "blogalternatif">link5</a> </body> </html> parametrefıltre.html
Şekil50 Parametrik filtrelerde parametreyi köşeli parantezin içerisine yazıyoruz. $("[target]") şeklindeki bir kullanımla diyoruz ki parametresi target olan taga erişim sağlansın. ("[target*=alternatif]") kullanımındaki src parametresinin yanı sıra yıldız kullanıldığı için src parametresinin değerinin her hangi bir yerinde alternatif kelimesi varsa o tag işleme konur. Yıldız yerine $ işareti kullanıldığında değerin içinde en sonda gelmesi gerekiyorö ^ işareti değerin başında veriyi istemektedir ve son olarak ! kullanılsaydı veri parametre değerinde olmaması gerekiyordu ki ancak o zaman o parametrenin bulunduğu taga erişim sağlanırdı. Filtrelerle selektörleri de kombine edebiliriz. Bunun için kısa bir örnek hazırladım:
Musa ÇAVUŞ 264
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("td:[id]").css({ background: 'green' }); }); </script> </head> <body> <table> <tr><th id="h1">1</th><th id="h2">2</th></tr> <tr><td id="d1">icerik 1</td><td id="d1">Icerik 2</td></tr> </table> </body> </html> parametrefiltre2.html
Şekil151
Musa ÇAVUŞ 265
Örnekte bilmemiz gereken tek bir satır var, hatta o satırda tırnak içerisinde kullanılan mantığı anlamamız yeterlidir. $("td:[id]") ile <td> tagında id parametresi geliyrosa o taga erişim sağlanmaktadır. Çocuk filtreler Bu jQuery o kadar kapsamlı ki çoluk çocuklada uğraşıyor. Çocuk filtreler, ebeveynlerden yönlendirilerek kullanılmaktadır. Đlk çocuk, ikinci çocuk element gibi özellikler uygulayabilirilz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("div:nth-child(2)").css({ background: 'red' }); $("p:first-child").css({ color: 'magentha' }); $("p:last-child").css({ color: 'blue' }); }); </script> </head> <body> <div> 1 <p> 2 <div> 3 </div> </p> 4 <p> 5 </p> 6 </div> </body>
Musa ÇAVUŞ 266
</html> cocukfiltre.html
Şekil152 $("p:last-child") kullanımıyla <p> tagının ilk çocuğuna erişiyoruz, last-child dediğimizde son çocuk oluyor. div:nth-child(1) dediğimizde <div> tagının ikinci çocuğuna erişim sağlanmış oluyor. Sayısayl parametre bize çocuklar arasındaki sıralamayı veriyor. Form fıltreleri Form filtresi demekle, belirtli bir anahtar kelimesiyle formdaki bir elemente ulaşmaktır. Bu konu ikiye ayrılmaktadır, Form için filtreler ve form filtreleri. Form için filtrelere örnek verecek olursak, input, text, password, submit, checkbox. Bunların örnekte kullanışı aşağıdaki gibidir. Đki nokta üst üste koyuyorsunuz ve form için filtreyi yazıyorsunuz. <html> <head> <title>Form Filtresi</title>
Musa ÇAVUŞ 267
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $(":input").css({ border: '1px red solid' }); $(":submit").css({ background: 'red' }); }); </script> </head> <body> <form> <table> <tr> <td> Ad </td> <td> <input type="text"/> </td> <td> <input type="submit" value="OK" /> </td> </tr> </table> </form> </body> </html> formfiltresi.html
Musa ÇAVUŞ 268
Şekil153 Form filtreler hakkında daha detaylı bilgi için jQuery sayfasına ya da dökumanına bakmayı öneririm. Bunun yanında bir de form filtreleri vardır. jQuery’deki bu filtreleri formlardaki elementlerin durumunu bize iletmektedir. Örneğin aktif olan tüm elementleri seçmek gibi. Bu filtresnin adı enabled anahtar sözcüğüdür. <html> <head> <title>Form filtresi 2</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("form :checkbox:first").parent().append('Bana iyi bak').css({ background: "yellow", border: "1px red solid" }); }); </script> </head> <body> <h1>Filtreler</h1> <form>
Musa ÇAVUŞ 269
<table width="500"> <tr> <td> </td> <td> <input type="checkbox" name="agb" /> </td> <td> </td> <td> <input type="checkbox" name="nl" /> </td> </tr> </table><i </form> </body> </html> formfiltresi2.html
Şekil154
Musa ÇAVUŞ 270
$("form :checkbox:first").parent().append('Bana iyi bak') ile checkbox elementlerden ilk elemente ulaşıyoruz ve onun ebeveynine append() ile bir metin yazıyoruz. Filtreleme metotları Filtreleme metotları, jQuery’deki filtremelerin yaptığı işleri yapmaktadır fakat kod içerisinde kullanım şekli farklıdır. not() metodu <html> <head> <title>not filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("div").not(".kapali, #sen").css("background", "red"); }); </script> <style type="text/css"> div { font-size: 42px; border: 1px solid; width: 300px; } .kapali { background: #8f8; color: white; } #sen { background: #99f; color: yellow } </style> </head> <body> <div> Bir <span class="kapali">Yuzuk</span>, <span id="du">mu</span> istedin, <span id="sen">sen</span>
Musa ÇAVUŞ 271
tabi getirdim <span class="kapali">kapali</span> kutu icerisinde </div> </body> </html> notmetodu.html
Şekil155 $("div").not(".kapali, #sen").css("background", "red"); derken öncelikle $("div") ile <div> tagını seçiyoruz. Örnekte sadece bir tek <div> tagı var. not() fonksiyonuyla <div> tagına ait seçilmeyecek tagları, id’lerini veya class’larını yazarak belirtebiliyoruz. slice() metodu
Musa ÇAVUŞ 272
Basit ve etkili filtre metotlarından biri de slice() metodudur. slice() metoduyla başlangıç değerini vererek bir filtreleme yapılabilinmektedir. Aynı zamanda değerler aralığınıda filtreleyebiliyoruz. <html> <head> <title>slice filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("span").slice(2).css("color", "red"); $("span").slice(1,3).css("background", "cyan"); }); </script> <style type="text/css"> div { font-size: 42px; border: 1px solid; width: 300px; } </style> </head> <body> <div> Bir <span>Yuzuk</span>, <span>mu</span> istedin, <span>sen</span> tabi getirdim <span>kapali</span> kutu icerisinde </div> </body> </html> slicefiltremetodu.html
Musa ÇAVUŞ 273
Şekil155 filter() metodu not() metodunun tam tersidir. filter() metodunda parametre olarak verilen elementler seçilmektedir. <html> <head> <title>slice filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("span").filter("#evet").css("color", "blue"); }); </script>
Musa ÇAVUŞ 274
<style type="text/css"> div { font-size: 42px; border: 1px solid; width: 300px; } </style> </head> <body> <div> Bir <span>Yuzuk</span>, <span>mu</span> istedin, <span id="evet" >sen</span> tabi getirdim <span>kapali</span> kutu icerisinde </div> </body> </html> filterfiltremetodu.html
Musa ÇAVUŞ 275
Şekil156 is() filtresi boolean özelliğinde bir metottur. true ya da false iletir. <html> <head> <title>is filtresi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ if ($(this).is(":first-child")) { alert("Ilk dugme"); }
Musa ÇAVUŞ 276
if ($(this).is(":last-child")) { alert("Ikinci dugme"); } }); }); </script> </head> <body> <button> Tikla </button> <button> Tikla </button> </body> </html> is filtresi
Şekil157 $(this) tanımlamasıyla basılan button düğmesine işaret edilmektedir. is() fonksiyonundaki parametreler eşliğinde basılan düğmenin ilk düğme mi yoksa ikinci düğme olduğu filtrelenmiştir.
Musa ÇAVUŞ 278
14.1 Temel bilgi CSS’i nasıl kullanacağımızı daha önceki bölümlerde göstermiştim. CSS işleminizi bitirdikten sonra mutlaka tüm kullanılacak tarayıcılarda CSS kodu test edilmesi gerekmektedir, çünkü tarayıcılar aynı kod için farklı sonuçlar üretebilirler. Bunun nedeni tarayıcılarn CSS ile yapılan işlemlere farklı şekilde erişmeleridir. jQuery ile bu problemin büyük bir bölümünü ortadan kaldırabilirsiniz. jQuery ile CSS kombine edilmiş sayfalar en cazip olan sayfalardır. O yüzden bu bölümü çok iyi anlamaya gayret edin ki zaten anlayacağınıza inaniyorum. Hani dedim bir teşvik vereyim. Kitabın sonuna az kaldı bundan sonrası hikaye demeyin, kitabın ilk satırı ne kadar önemliyse son satırıda o kadar önemli. Đlk 100 sayfayı ilginç tutup son taraflarda hikaye anlatmak yerine kitabı baştan sona heyecanlı kılmayı tercih ettim. Bu bölümde jQuery ile CSS kullanımı anlatacağım. jQuery’nin CSS fonksiyonlarını http://api.jquery.com/category/css/ adresinde bulabilirsiniz:
Şekil157
14.2 CSS erişimi
Musa ÇAVUŞ 279
CSS özelliklerine erişimi bu bölümde anlatacağım. Standart metotlarla CSS kodunu nasıl değiştirebiliyoruz veya nesıl yeni CSS nesneleri ekleyebiliyoruz bunların hepsini göstereceğim. css() metodu css() metodunu daha önce örneklerimizde sık sık kullanmıştım ve şimdi tekrar ele alarak detayına iniyorum. css() metodunu iki şekilde kullanabiliriz. Birinci şekildeki kullanımda verdiğimiz parametreye göre değer elde ederiz. Đkinci kullanım şekliyse, iki parametre kullanarak CSS parametresinin değerini düzenleriz. Kullanılacak ilk parametre CSS’deki parametredir ve ikinci parametre ise onun değeridir. Birden fazla CSS parametresine değer atamak istiyorsak parametre olarak bir nesne kullanmamız gerekemketedir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>css() metodu</title> <script type="text/javascript"> $(document).ready(function(){ $("*").css({ 'backgroundColor': "yellow", color: "gray" }); $("button:first").click(function(){ $("#cikti").text($("h1:first").css("color")); }); $("button:last").click(function(){ $("h1:first").css("color", "blue"); }); }); </script> </head> <body> <h1>Hak yerde kalmaz</h1> <h1>Bu da gecer gardas</h1> <button> Renk sorgula </button> <button> Renk duzenle
Musa ÇAVUŞ 280
</button> <div id="cikti"> </div> </body> </html>
Şekil158 css("color") ile color değişkeninin değerini elde ediyoruz. css("color", "blue") ile color değişkenine blue değerini atıyoruz. $("*").css( ile başlayan kod bölümünde ise bir nesne atıyoruz. Burada dikkat edilecek husus CSS değişkenleriyle değerlerini iki nokta üst üste ayırarak yazıyoruz ve her değiştirmek istediğimiz değere atanacak değişkeni belirttikten sonra virgül ile ayırıyoruz. Buraya kadar her şey çok basit, fakat ilk bakışta gözüktüğü gibi net değil, çünkü bir kaç tuzağı var. CSS kodundan farklı olarak, değişken atamaları virgül ile ayrışmaktadır ve atanan değer tırnak içerisinde atanmaktadır, yani bir String olarak atanmaktadır. Nesne oluştururken orada ‘background-color’ şeklinde bir tanımlama yaparken color tanımlamasında tek tırkank kullanmadan bir tanımlama yaptım. Bunu size bu iki kullanım arasındaki farkı gösterebilmek için uyguladım. Tek tırnak ile yapılan tanımlamalarda CSS koduyla yapılan özdeş tanımlamaları
Musa ÇAVUŞ 281
yapabiliyoruz. Tek tırkan koymadan background-color yazsaydım koddan istediklerim çalışmayacaktı. color tanımlaması yapılınca jQuery’de bir nesne kullanmış oluyorum ve jQuery’e özgü bir tanımlama yapmış oluyorum. addClass() ve removeClass() jQuery’le dinamik olarak CSS sınıfları ekleyebilirsiniz veya silebilirsiniz. addClass() metodu sınıf ekler, removeClass() ise parametrede verilen sınıfı siler. Aşağıdaki kodda <h1> tagı parametresiz ve belirli bir sınıfa ait değil. Ancak düğmelerinden birisine basılınca bir sınıf eklenecek ya da bir sınıf silinecek. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>addClass() ve removeClass()</title> <style type="text/css"> .mavi { color: blue; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("h1:first").addClass("mavi"); }); $("button:eq(1)").click(function(){ $("h1:first").removeClass("mavi"); }); }); </script> </head> <body> <h1>Calisan demir paslanmaz</h1> <button> Sinif ekle </button> <button> Sinif sil </button> </body> </html>
Musa ÇAVUŞ 283
Şekil160 Sınıf ekle düğmesine basınca Firebug’da <h1> tagına yeni bir sınıfın nasıl eklendiğini çok güzel izleyebilirsiniz. Düğmelere 10 defa bassanız bile birden fazla eklenme ya da birden fazla silinme olmyacaktır. hasClass() metodu Bir grup elementin veya bir grup tagın CSS sınıfı var olup olmadığını hasClass() ile kontrol edebiliriz. hasClass() metodunda parametre olarak test etmek istediğimiz sınıfın adını yazıyoruz. Aşağıda mavi yazarak mavi CSS sınıfını kontrol ettirmiş oluyorum. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>hasclass metodu</title> <style type="text/css"> .mavi { color: blue; } </style>
Musa ÇAVUŞ 284
</head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("h1").addClass("mavi"); }); $("button:eq(1)").click(function(){ if ($("h1").hasClass("mavi")) { $("h1").removeClass("mavi"); } }); }); </script> </head> <body> <h1>Acele ile menzil alinmaz</h1> <button> Mavi sinif ekle </button> <button> Mavi sinif sil </button> </body> </html> hasclass.html
Musa ÇAVUŞ 285
Şekil161 toggleClass() metodu addClass() ile sınıf ekleyebiliyoruz ve removeClass() ile sınıfı siliyoruz. tooggleClass() metodu bir iki metodun bir kombinasyonudur. Eğer sınıf varsa siler, yoksa ekler. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>toggleClass() metodu</title> <style type="text/css"> .mavi { color: blue; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){
Musa ÇAVUŞ 286
$("h1").toggleClass("mavi"); }); }); </script> </head> <body> <h1>Bedava sirke baldan tatlidir</h1> <button> Sinif ekle/sil </button> </body> </html> toggleclass.html
Şekil162 Düğmeye basılınca yazı mavi oluyor ve tekrar basılınca yazı siyah oluyor. 14.3 Pozisyon belirleme metotları Web sayfalarını oluşturmada ve dinamik olarak yapılan değişikliklerdeki en büyük problem elementlerin pozisyonlamasında çıkmaktadır. CSS’ten önce görünmez HTML tabloları kullanılıyordu. CSS ile bu probleme çok iyi hakim
Musa ÇAVUŞ 287
olabiliyoruz ve jQuery CSS ile yapılan pozisyonlamayı bize metotlar halinde sunmaktadır. position() ile pozisyonlama position() metodundaki left ve top değişkenleriyle pozisyonlamayı çok iyi kontrol edebiliriz. left ve top değişkenleri bize sorguladığımız elementin pozisyonunu, o elementin parentini referans alarak iletir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>position() metodu</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ var position = $("h1:last").position(); $("#cikti").text("x: " + position.left + ", y: " + position.top); }); }); </script> </head> <body> <h1>Cok gezen cok bilir</h1> <h1>Cok bilen cok yanilir</h1> <button> Ikinci atasozun poziyonu </button> <div id="cikti"> </div> </body> </html> position.html
Musa ÇAVUŞ 288
Şekil163 offset() ve offsetParent() metotları position() metoduyla bir elementin pozisyonunu bulabiliyoruz da ya parentin pozisyonunu bulmak istiyorsak veyahut sayfaya göre elementin pozisyonunu bulmak istiyorsak ne edecegız? <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>offset() ve offsetParent()</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ var offset = $("h1:first").offsetParent();
Musa ÇAVUŞ 289
$("#cikti1").text("parent x: " + offset.position().left + ", parent y: " + offset.position().top ); var offset = $("h1:first").offset(); $("#cikti2").text( "x: " + offset.left + ", y: " + offset.top ); }); }); </script> </head> <body> <h1>Dag dag ustune olur, ev ev ustune olmaz</h1> <button>Tikla</button> <div id="cikti1"></div> <div id="cikti2"></div> </body> </html> offset.html
Şekil164 offset() metodu tagın sayfadaki pozisyonunu verir. <h1> tagının sayfadaki x koordinatı 8 piksel ve y koordinatı da 8 piksel olduğunu görüyorsunuz. Kullanımı position() metodu gibidir, left ve top değişkenlerini aynı şekilde kullanabiliyoruz. offsetParent() metodu ise bir nesne iletir ve ancak bu nesnenin
Musa ÇAVUŞ 290
left ve top değişkenlerini kullanarak elementin pozisyonu hakkında bilgi alabiliriz. Aşağı yukarı ve sağ sol kaydırma çubuğu Aşağı yukarı ve sağ sol kaydırma çubuğunu kontrol edebilmek için jQuery, scrollTop() ve scrollLeft() metotlarını sunmaktadır. scrollTop() ve scrollLeft() metotlarına bir parametre değeri verirsek seçtiğimiz elementi kaydırabiliriz. Parametresiz olarak kullanırsak, kaydırılmış elementin pozisyon değerlerini alırız. Sizde birilerini ya da bir şeyleri oraya buraya kaydırmak istiyorsanız bu örnek tam size göredir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>scrollTop() ve scrollLeft()</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("div:eq(0)").scrollTop(45); $("div:eq(0)").scrollLeft(90); $("#cikti").text("scrollTop: " + $("div:eq(0)").scrollTop() + ", scrollLeft: " + $("div:eq(0)").scrollLeft()); }); $("div:eq(0)").css({ 'width': '400px', 'height': '100px', 'overflow': 'auto', 'position':"absolute", 'left':"20px", 'top':"100px" }); }); </script> </head> <body> <button> Kaydir </button>
Musa ÇAVUŞ 291
<div> <img src="birresim.jpg" alt="" /> </div> <div id="cikti"> </div> </body> </html> kaydır.html
Şekil165 Kaydırma çubuklarının ortaya çıkma nedeni, CSS parametresinde overflow değişkenine auto değeri vermemizden kaynaklanmıştır. $("div:eq(0)") tanımındaki width değeri 400 piksel ve height değeri 300 pikseldir. overflow değişkenindeki auto değeri, ne zaman <div> tagının içindeki bir element bu sınırları aşarsa kaydırma çubuğunu açığa çıkarmasını sağlamaktadır. 14.4 Yükseklik ve genişlik
Musa ÇAVUŞ 292
Birçok değişiklik için yükseklik ve genişlik önemlidir. jQuery bu elementlerin bu özellikleri içinde gerekli metotları sunmaktadır. height() ve width() metotları Bu iki metoda parametre verirsek, elementlerin yüksekliğini ve genişliğini değiştirmiş oluyoruz. Parametresiz kullanırsak elementlerin genişliğini ve yüksekliğini elde etmiş oluruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>height() ve width()</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("img").width(1000); $("#cikti").text("Genislik: " + $("img").width()); }); $("button:eq(1)").click(function(){ $("img").height(100); $("#cikti").text("Yukseklik: " + $("img").height()); }); }); </script> </head> <body> <button>Genislik</button> <button>Yukseklik</button> <hr /><img src="birresim.jpg" /> <div id="cikti"></div> </body> </html> genislikyukseklik.html
Musa ÇAVUŞ 293
Şekil166 Đç ve dış boyut Görüntülü elementlerde genişlik ve yükseklik dışında kenar, çerçeve genişliği gibi özelliklerede dikkat etmelisiniz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>Ic ve dis boyut</title> </head> <script type="text/javascript"> $(document).ready(function(){
Musa ÇAVUŞ 294
$("div:first").css({ 'width': '200px', 'height': '100px', 'margin': '30px', 'padding': '50px', 'border-style': 'solid', 'border-width': '5px' }); $("#cikti").html("width: " + $("div:first").width() + "<br>innerWidth: " + $("div:first").innerWidth() + "<br>outerWidth: " + $("div:first").outerWidth() + "<br>outerWidth(true): " + $("div:first").outerWidth(true) + "<br>height: " + $("div:first").height() + "<br>innerHeight: " + $("div:first").innerHeight() + "<br>outerHeight: " + $("div:first").outerHeight() + "<br>outerHeight(true): " + $("div:first").outerHeight(true)); }); </script> </head> <body> <div> jQuery </div> <div id="cikti"> </div> </body> </html> icdisboyut.html innerWidth() iç genişliği, outerWidth() dış genişliği, innerHeight() iç yüksekliği, outerHeight() dış yüksekliği değerini iletiyor. Bu metotlarda parametre olarak true verirsek, kenar kalınlığınında göz önünde bulundurulmasını istemiş oluruz.
Musa ÇAVUŞ 296
Bunun temelinde CSS yatmaktadır. jQuery’deki kardeşler oturmuşlar ve bizler için kullanışlı CSS nesneleri oluşturmuşlar. Daha sonra bu nesneleri jQuery nesneleriyle ilişkilendirmişler ve bizim haftalarca programlamamız gereken nesneleri bize hediye edivermişler. Hediyeyi bir kütüphane şeklinde http://jqueryui.com/ adresinde bulabilirsiniz.
Şekil168 jQueryUI ile sayfanızda çok kısa sürede görsel anlamda büyük değişiklikler gerçekleştirebilirsiniz. Benim bu bölümde başlıkta da değindiğim gibi jQuery ile kullanabileceğiniz temalara değinmek olacaktır. Ana sayfadaki “Explore the theme gallery” linkini tıklarsanız ThemeRoller sayfasına gelmiş olursunuz. Kendiniz tema oluşturabileceğiniz gibi hazır oluşturulmuş temalarda değişiklik yaparakta temalar oluşturabilirsiniz. Açılan sayfada Gallery linkini tıklayın:
Musa ÇAVUŞ 297
Şekil169 Sol taraftaki örnekleri tıkladığınızda canlı olarak tıkladığınız temanın sayfanıza nasıl etkili olabileceğini görmüş olursunuz. Diyelim ki UI darkness temasını seçtik. Tıklayın bu tema üzerine ve tıkladıktan sonra onun altında bir download düğmesi var oraya tıklayın:
Musa ÇAVUŞ 298
Şekil170 Yeni sayfada jQueryUI’nin hangi bölümlerini istiyorsanız onu seçebilirsiniz ve Download düğmesine tıklayarak temayı indirebilirsiniz. Ben hepsini seçili bıraktım ve bilgisayarıma indirdim ve çalışma dizinimde dosyayı açtım. Şimdi size hiç bir yerde bulamayacağınız kullanım göstereceğim. Türkiye’deki hiç bir kitapta bulamazsınızda yurt dışında da çok zor bulursunuz, ben daha görmedim. Şekil169’a tekrar dönersek en aşağıda Framework Icons bölümü var:
Musa ÇAVUŞ 299
Şekil171 Biraz düşünce gücü kullanarak bu Icon’ları kendi web sayfanızda da jQuery eşliğinde kullanabilirsiniz. FireBug Icon’una tıklayın ve her hangi bir resim seçin:
Musa ÇAVUŞ 300
Şekil172 Düzenle sekmesini seçin ve <li> tagı ile başlayan bölümü kodunuza kopyalayın. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <title>ThemeRoller</title> <link href="css/ui-darkness/jquery-ui-1.8.4.custom.css" type="text/css" rel="stylesheet"> </head> <script type="text/javascript"> $(document).ready(function(){ }); </script> </head> <body> <li title=".ui-icon-circle-plus" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span></li>
Musa ÇAVUŞ 301
<div class="ui-state-default ui-corner-all">ThemeRoller</div> </body> </html> temaroller.html
Şekil173 Ek olarak bir de <div> tagı oluşturdum. Yaptığım çok basit, kütüphanedeki class adını burada kullandım. Size tavsiyem bu tür efektler oluşturabilmek için, jQueryUI sayfasına girin ve Gallery bölümünden kafanıza göre bir birleşim seçin. Daha sonra da bu göstermiş olduğum adımları uygulayarak sayfanıza entegre edin. Göreceksiniz çok kısa zamanda sayfanız yüksek derecede canlılık kazanacaktır. jQueryUI sayfasındaki Roll your Own sekmesini tıklayarak isteğinize göre de her türlü efektler oluşturabilirsiniz.
Musa ÇAVUŞ 303
15.1 Düğüm içeriği sorgulama ve değiştirme HTML metinlerini değiştirme ve sorgulama html() ve text() html() ve text() ile HTML metinlerini değiştirebiliriz ve sorgulayabiliriz. html() ile text() arasındaki fark, html() HTML koduna göre işlem yaparken text() içeriklere normal metinmiş gibi davranır. Bu fonksiyonları parametresiz kullandığımızda metin sorgulaması yapıyoruz ve parametre kullandığımızda metinleri değiştirebiliyoruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > $(document).ready(function(){ $("button:first").click(function(){ var str = $("p:first").html(); $("#cikti").append(str); }); $("button:eq(1)").click(function(){ $("div:gt(0)").html( "<i>Yagmur yagiyor</i>"); }); $("button:last").click(function(){ $("div:gt(0)").text( "<i>Yagmur yagiyor</i>"); }); }); </script> </head> <body> <p> Benim dunyam </p> <button>html() sorgulama</button> <button>html() metini</button> <button>text() metini</button> <div id="cikti"></div> <div></div><div></div><div></div> </body> </html> htmltext.html
Musa ÇAVUŞ 304
Şekil174
Form bilgilerini kontrol etme val() Form bilgilerine ulaşabilmek için val() fonksiyonunu kullanabiliriz. Çok basit bir fonksiyondur. Parametreli kullanılınca her hangi bir forum alanına bilgi ekleyebiliriz, parametresiz kullanırsak form elementinin değerini sorgulayabiliyoruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > $(document).ready(function(){
Musa ÇAVUŞ 305
$("button:first").click(function(){ var str = $("input:first").val(); $("#cikti").append(str); }); $("button:eq(1)").click(function(){ var str = $("input:first").val("eklenti"); $("#cikti").text(str); }); }); </script> </head> <body> <button>Icerik sorgula</button> <button>Icerik ekle</button> <form action="" method="" accept-charset="utf-8"> <input type="text" /> </form> <div id="cikti"></div> </body> </html> val.html
Şekil175
Musa ÇAVUŞ 306
Web sayfasına düğüm ekleme jQuery DOM sistemine sonradan içerik ekleyebilmemiz için bir kaç fonksiyon sunmaktadır.append() ve appendTo() ile prepend() ile prependTo() fonksiyonlarıyla bu işlemi esnek bir şekilde gerçekleştirebiliriz. append() ile bilgiyi eklenecek yerin arkasına, prepend() ile de ekelencek yerin önüne ekleyebiliyoruz. appendTo() ve prependTo() fonksiyonlarıylada eklenecek yeri parametre olarak vermekteyiz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > $(document).ready(function(){ $("button:first").click(function(){ $("#cikti").append(" - append() ile eklme yapildi"); }); $("button:eq(1)").click(function(){ $("#a").appendTo("#cikti"); }); $("button:eq(2)").click(function(){ $("#cikti").prepend(" - prepend() ile ekleme yapildi "); }); $("button:eq(3)").click(function(){ $("#a").prependTo("#cikti"); }); }); </script> </head> <body> <button>append()</button> <button>appendTo()</button> <button>prepend()</button> <button>prependTo()</button> <hr /> <span id="a" style="color:white;background:red"> alpha </span> <span id="b" style="color:blue;background:yellow"> beta </span> <span id="c" style="color:green;background:lightgray"> gamma </span> <div id="cikti" style="color:yellow;background:gray"> Hedef</div> </body> </html> ekleme.html
Musa ÇAVUŞ 307
Şekil176 Öncesine ya da sonrasına düğüm ekleme jQuery bize başka düğümlerin arkasına ya da önüne düğüm ekleyebileceğimiz metotlar sunmaktadır. Bunun için hedef düğümü vermeniz yeterlidir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("#cikti").after('<span style="color:white;background:red">Arkasina</span>'); }); $("button:eq(1)").click(function(){ $("#cikti").before('<span
Musa ÇAVUŞ 308
style="color:red;background:yellow">Onune</span>'); }); $("button:eq(2)").click(function(){ $('<span style="color:blue;background:gray">Arkasina</span>').insertAfter('.k1'); }); $("button:eq(3)").click(function(){ $('<span style="color:blue;background:gray">Onune</span>').insertBefore('.k1'); }); }); </script> </head> <body> <button> after() </button> <button> before() </button> <button> insertAfter() </button> <button> insertBefore() </button> <hr/> <div id="cikti" style="color:red;background:yellow"> Hedef </div> <hr/><hr class='k1'/><hr/> </body> </html> afterbefore.html
Musa ÇAVUŞ 309
Şekil177 after() metodu hedeften sonra düğüm eklerken before() fonksiyonu hedeften önce düğüm ekler. insertAfter() ve insertBefore() after() ve before() metotlarının yaptıkların yapmaktadırlar. Arlarında sadece kullanım tarzı ayrılığı vardır. Örnekte bu ayrılıkları belirttim. Düğüm kuşatma jQuery ile düğümleri kuşatarak çocuk düğümler haline getirebilirsiniz. Đngilizcede kuşatma kelimesinin karşılığı wrap kelimesidir. wrap() metoduna parametre olarak beraber kuşatmak istediğiniz tagı yazıyorsunuz.. wrapAll() metodunda ise uyan tüm elementlerin tek bir tag içerisine sarılması sağlanmaktadır. Parametre olarak yine beraber sarmak istediğimiz tagı yazıyoruz. <html> <head>
Musa ÇAVUŞ 310
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("span").wrap("<h3>"); }); $("button:eq(1)").click(function(){ $("span").wrap($("<div />")); }); $("button:last").click(function(){ $("span").wrapAll("<h1>"); }); }); </script> </head> <body> <button>wrap() HTML</button> <button>wrap() Element</button> <button>wrapAll()</button> <hr /> <span>Benim</span> <span>Ev</span> <span>Nerede</span> </body> </html> kusatma.html
Musa ÇAVUŞ 311
Şekil178 Elementleri değiştirme replaceAll() ve replaceWith() metotlarıyla web sayfasındaki elementler ile değiştirmek istediğiniz elementi değiştirebilirsiniz. replaceWith() metodu, uyan tüm elementleri DOM elementleriyle değiştirebilme özelliği vermektedir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script>
Musa ÇAVUŞ 312
<script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function(){ $("h1:first").replaceWith( "<h6>" + $("h1:first").text() + "</h6>"); }); $("button:eq(1)").click(function(){ $("<hr/>").replaceAll("br"); }); }); </script> </head> <body> <h1>Moralim cok iyi</h1> <br><button>H1 --> H6</button> <br><button>BR --> HR</button> </body> </html> degistir.html
Şekil179
Musa ÇAVUŞ 313
Elementleri silme Eğer jQuery vasıtasıyla bir DOM ağacına dinamik olarak düğüm ekleyebiliyorsak, mutlaka bu düğümüde dinamik olarak silebilme özelliğine sahip olmalıyız. empty() ile tüm alt düğümleri silebiliyoruz ve remove() ile de düğümleri silebiliyoruz. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" > var element=null; $(document).ready(function(){ $("button:first").click(function(){ $("h1").empty(); }); $("button:eq(1)").click(function(){ element=$("h1").remove(); }); $("button:eq(2)").click(function(){ $("#ekle").after(element); }); }); </script> </head> <body> <h1><div>MNOPRS</div></h1> <h1>TUVYZ</h1> <h1>Bunu bilemeyen geveze</h1> <button>empty()</button> <button>remove()</button> <button>after()</button> <div id="ekle"></div> </body> </html> bosalt.html
Musa ÇAVUŞ 314
Şekil180 empty() yazan düğmeye tıkladığınızda tüm içeriğin silindiğini göreceksiniz. Sayfayı tekrar yüklediğinizde ve remove() düğmesine tıkladığınızda yine her şeyin silindiğini göreceksiniz. Daha sonra after() düğmesine tıklatığınızda silinenlerin geri geldiğini göreceksiniz. Bunun nedeni remove() metoduyla silinen tagların DOM objesinde saklanmasındandır. Elementleri kopyalama Bir elementi bir yerden silerek bir başka yere aktabiliyoruz ve aynı şekilde bir elementi bir yerden silmeden başka bir yere clone() metoduylada kopyalayabiliyoruz. <html> <head>
Musa ÇAVUŞ 315
<script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var element = null; $(document).ready(function(){ $("button:first").click(function(){ element = $("img:first").clone(); $("#i2").after(element); }); $("button:last").click(function(){ element = $("img:first").clone(true); $("#i2").after(element); }); }); </script> </head> <body> <img src="birresim.jpg" width="100" id="resim"/> <br/> <button> clone() </button> <button> clone(true) </button> <div id=i2></div> </body> </html> kopya.html
Musa ÇAVUŞ 316
Şekil181 Parametre olarak true verdığimizde elemente ait olan Eventhandler’leride kopyalayabiliyoruz. Parametre olarak false yazarsa ya da hiç bir parametre vermezsek Eventhandler’leri kopyalayamiyoruz. 15.2 Arama jQuery belirli bir yapıyı aramak için bir çok güçlü metot sunmaktadır. JavaScript ve DHTML’de neredeyse arama için hiç bir fonksiyon bulunmamaktadır. jQuery bu alanda böylece büyük bir güç olmaktadır. Đlk olarak children() metodunu göstermek istiyorum: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var element=null; $(document).ready(function(){ $("span").css("height","100px"); $("button:first").click(function(){ element=$("div:first").children();
Musa ÇAVUŞ 317
$("#cikti").text("Cocuk elementlerin sayisi: " + element.length); for(i=0;i < element.length;i+=2) $("#i2").after(element[i]); }); $("button:last").click(function(){ element=$("div:first").children("#i1"); $("#cikti").text("Cocuk elementlerin sayisi: " + element.length); $("#i2").after(element); }); }); </script> </head> <body> <div> <span>Birinci cocuk</span><br /> <span id="i1">Ikinci cocuk</span><br /> <span>Ucuncu cocuk</span> </div> <button>Tum cocuklar</button> <button>Tek cocuk</button> <div id="cikti"></div> <hr id="i2"> </body> </html> cocuk.html
Musa ÇAVUŞ 318
Şekil182 Đlk <div> tagların arasındaki tagları sayarsak 5 tane alt tag yani 5 çocuk tagının olduğu görürüz. Bu yüzden “Tüm cocuklar” düğmesine dıklanınca “Cocuk elementlerin sayisi: 5” diye bir yazı çıkmaktadır. children() metodunun length değişkeniyle kaç tane çocuk element olduğunu bulabiliyoruz. Đkinci düğmeye bastığınızda element sayısı 1 gösterilmektedir. parent() ve parents() metotları da children() metodu gibi çalışmaktadır o yüzden onlar için örnek vermedim. Çocuk yerine ebeveyn bulunmaktadır. Kardeşleri arama Elementlerin kardeşleri arasındada arama yapabiliriz. Evlat babayı anladıktan kardeş aramada ne işimiz olabilir demeyin, ailedeki tüm fertlerle ilgilenmek gerekiyor. Az sonra vereceğim örnek biraz uzunca olacak fakat bir o kadarda anlaşlılması çok kolay. Kardeşler arasında yapabileceğiniz arama tekniklerinde kullanabileceğiniz tüm metotları bu örnekte bulabilirsiniz. Çıktısına bakarak bile örneğin ne demek istediğini çok kolayca anlayabilirsiniz.
Musa ÇAVUŞ 319
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> var element = null; $(document).ready(function(){ $("h1").css("font-size", "14px"); $("h1:eq(2)").css("background-color", "yellow"); $("#cikti1").text($("h1:eq(2)").next().text()); $("#cikti2").text($("h1:eq(2)").nextAll().text()); $("#cikti3").text($("h1:eq(2)").prev().text()); $("#cikti4").text($("h1:eq(2)").prevAll().text()); $("#cikti5").text($("h1:eq(2)").siblings().text()); }); </script> </head> <body> <div> <h1>Kardes1</h1> <h1>Kardes2</h1> <h1>Kardes3</h1> <h1>Kardes4</h1> <h1>Kardes5</h1> <h1>Kardes6</h1> <h1>Kardes7</h1> <h1>Kardes8</h1> </div> <hr><h3>Akrabalik</h3> <hr> <table border="1"> <tr> <td> next() </td> <td id="cikti1"> </td> </tr> <tr> <td> nextAll() </td> <td id="cikti2"> </td>
Musa ÇAVUŞ 320
</tr> <tr> <td> prev() </td> <td id="cikti3"> </td> </tr> <tr> <td> prevAll() </td> <td id="cikti4"> </td> </tr> <tr> <td> siblings() </td> <td id="cikti5"> </td> </tr> </table> </body> </html> kardesler.html
Musa ÇAVUŞ 321
Şekil183 Kardes3’ü programda seçtim ve oradan itibaren diğer kardeşlere nasıl ulaşıldığını bu programda çok güzel görebiliyoruz. next() metodu bir sonraki kardeşi elde etmemizi sağlıyor. Örneğimizde next() metodunu çağırınca Kardes4 elde edildiğini görüyorsunuz. nextAll() metodu bulunduğumuz noktadan sonraki tüm kardeşleri iletiyor. prev() bir önceki kardeşi. prevAll() metodu bulunduğumuz noktadan önceki tüm kardeşleri ve siblings() metodu ise tüm kardeşleri iletiyor.
Musa ÇAVUŞ 323
16.1 Event Objesi JavaScript’i anlatırken EventHandler bölümüne değinmiştim. Burada jQuery ile EventHandler’leri işlemeyi anlatacağım. Đlk konu olarakta Event. jQuery’deki Event sistemi, JavaScript’teki Event sistemini kapsamaktadır ve daha da kolaşlaştırmıştır. Bir Event objesini oluşturmak jQuery ile çok kolaydır. Mesela new jQuery.Event(“click”) yazarak bir objeyi oluşturabiliyoruz. Parametre olarak ne yapmak istediğimizi iletiyoruz. <html> <head> <title>Event-Objesi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $( function(){ $("h1:first").click(function(event){ $("#cikti").html(event.type); }); } ); </script> </head> <body> <h1>Tikla beni</h1> <div id="cikti"></div> </body> </html> eventobjesi.html jQuery’de EventHandler’ler için EventHelper metotları var. jQuery.Event() şeklinde bir kod yazmak yerine EventHelper’leri kullanmak hayatımızı çok daha kolaylaştırıyor. Yaptığım çok basittir. click() metodunu çağırarak bunu <h1> tagına bağladım ve <h1> tagına tıklanınca click() metodunda belirtilen kod işlem görecektir. Bu sistemle yapılan Event’ede ulaşabilmekteyim. click() metodundaki anonim fonksiyona parametre olarak event yazmamız yapılan Event’i kullanmamız için yeterlidir. event.type yazarak Event’in tipini tarayıcıda yazılmasını istemiş oldum.
Musa ÇAVUŞ 324
Şekil184 jQuery’deki Event metotlarına genel bir bakış atmak istiyorsanız http://api.jquery.com/category/events/ adresinde görebilirsiniz.
Musa ÇAVUŞ 325
Şekil185 16.2 Event özellikleri Event objesinin birçok metodu vardır ve bizim için çok kullanışlıdır.event.type, Event tipini bize iletmektedir. event.target Event’i oluşturan DOM elementini iletiyor. event.relatedTarget fare hareketlerinde farenin daha önce hangi elementte olduğunu bilmemizi sağlar. event.pageX ve event.pageY ile ekran koordinatlarını alırız ki Internet Explorer ile diğer tarayıcılar arasında normalde koordinat problemi çıkarken jQuery ile bu problem çok kolay çözülmüş durumundadır. Siz normal JavaScript kullanarak ekran koordinatlarını bilmek isterseniz mutlaka Internet Explorer ve diğer tarayıcılar arasında rakamsal farklılıklar göreceksiniz. Şimdi event’in bir kaç metodunu bir uygulamada göstermek istiyorum: <html> <head>
Musa ÇAVUŞ 326
<title>Event-Objesi</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#r1").click(function(event){ var koordinat = "( " + event.pageX + ", " + event.pageY + " )"; $("#cikti").html("e.pageX, e.pageY: " + koordinat + "<br />Event Dugumu: " + event.target.nodeName); }); }); </script> </head> <body> <table> <tr> <td> <img src="r1.jpg" id="r1"/> </td> <td id="cikti"> </td> </tr> </table> </body> </html> eventobjesi2.html
Musa ÇAVUŞ 327
Şekil186 Resmin üzerine tıklanınca, tıklanan yer ve tıklanan DOM objesindeki düğüm hakkında bilgi gösterilmektedir. Örneğimizdeki <img> tagı tıklanan DOM objesindeki düğüm olduğu için bu bilgi tarayıcı ekranına gelmiştir. 16.3 Event durdurma Bazı durumlarda gidiş hattı durdurmak isteyebilirsiniz. jQuery bunun için metotlar sunmaktadır. event.preventDefault() metodunu çağırarak yapılan her hangi bir Event’i durduruyorsunuz. <html> <head> <title>Event-Objekt</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); alert("Izin yok. " + event.isDefaultPrevented()); }); }); </script> </head>
Musa ÇAVUŞ 328
<body> <a href="http://www.musa-cavus.com">Buraya tikla</a> </body> </html> eventdurdurma.html
Şekil187 event.isDefaultPrevented()) ile de durdurmanın olduğunu kontrol edebiliyorsunuz. 16.4 Event ortamındaki özel metotlar Bu bölümde jQuery’de çok esnek olan özel metotları göstereceğim. ready() metodu Bir çok örnekte ready() metodunu kullandığımı görmüşünüzdür. Ya da kısaltma olarak ${} şeklinde bir kullanımın olduğunu gördünüz. Bir tarayıcı DOM’unu tam kurduktan sonra o tarayıcıdaki DOM’a erişebiliriz. ready() metodu bunu kontrol etmektedir. onLoad EventHandler’ini biliyorsunuzdur, bu EventHandler ready() metodu gibi güvenilir değildir. Bir çok durumda kontrol edilmeden geçiş sağlamaktadır. ready() metodu ise tam kontrol eder ve DOM’a erişmemizi öyle sağlamaktadır. ready() metoduyla bir çok örnek yaptığım için burada ek olarak bir örnek göstermiyorum.
Musa ÇAVUŞ 329
bind() ve unbind metotları bind() metoduyla bir Event’i bir taga her hangi bir zaman aralağında bağlayabilirsiniz. unbind() ile de bu bağlantıyı koparma gücünüz vardır. <html> <head> <title>bind ve unbind</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ function info(event){ $("#cikti").html(event.data.text); } $("img").css("width", "300px"); $("button:first").bind("click", function(){ $("img:first").bind("mouseover", { text: "Bu bir resim" }, info); $("img:first").bind("mouseout", { text: "" }, info); }); $("button:last").bind("click", function(){ $("img:first").unbind("mouseover"); $("img:first").unbind("mouseout"); }); }); </script> </head> <body> <button> bind() </button> <button> unbind() </button> <hr/><img src="r1.jpg" /> <div id="cikti"> </div> </body> bindveunbind.html
Musa ÇAVUŞ 330
Şekil188 bind() yazan düğmeye basınca, Beyaz resmine mouseover ve mouseout Event’lerini bağla ve verdiğim metini tarayıcıda göster. unbind() düğmesine basınca mouseover ve mouseout Event’lerini Beyaz resminden çıkart. Program bu iki emri yerine getirmektedir. Üçüncü parametredeki info değeri dikkatinizi çekmiştir. info, info fonksiyonunun bir referansıdır. bind() fonksiyonunda üçüncü parametre olarak her hangi bir fonksiyon referansı verebiliriz ve verilen fonksiyon işlem görmektedir. info fonksiyonundaki event.data.text, parametrede verilen “text:” işaret etmektedir. Ben oraya “text:” yerine “selamkelam:” yazsaydım fonksiyonda event.data.selamkelam yazmam gerekecekti. Sadece bir kez one() Kullanım açısından bind() metoduyla özdeş olan one() metodunun bind() metodundan farkı sadece bir kez işlev görmesidir.
Musa ÇAVUŞ 331
<html> <head> <title>one</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ function info(event){ $("#cikti").html(event.data.text); } $("img").css("width", "300px"); $("img:first").one("mouseover", { text: "Bir resim" }, info); $("img:first").one("mouseout", { text: "" }, info); }); </script> </head> <body> <img src="r1.jpg" /> <div id="cikti"> </div> </body> one.html
Musa ÇAVUŞ 332
Şekil189 Fareyle resime girdiğimizde bir bilgi çıkıyor. Fare ile resimden çıkınca boş bir metin gösteriliyor. one() metodu sayesinde bu olayı bir defa gerçekleştirebiliyoruz. Tabi ki saksınızı çalıştırarak bunu farklı şekillerde yapabilirsiniz. Kodunuza bir sayaç koyarak tıklama miktarını sayabilirsiniz ya da daha akrobasik hareketlerde bulunabilirsiz. jQuery’ciler böyle bir kolaylık sağladıktan sonra tekeri tekrar icetmeye ne hacet var. Tetikleyiciler Event’leri belli veri değişiklerinden sonra başlatmak isteyebiliriz. jQuery’deki gençlik bunun için tetikleyici metodunu bize sunmaktadır. Bize bir de iyilik yaparak metodun adını tetikleyicinin ingilizcesi olan trigger koymuşlardır. Đngilizce bilerek bir çok metodu anlayabilirsiniz, yalnız ingilizce bilmek demek programlamayı biliyorum demek değildir. <html>
Musa ÇAVUŞ 333
<head> <title>tetikleyici</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("img").css({width:"80px" }); $("img").click(function () { $(this).css({width:"200px" }); }); $("img").dblclick(function () { $(this).css({width:"80px" }); }); $("button:first").click(function () { $("img").trigger('click'); }); $("button:last").click(function () { $("img").trigger('dblclick'); }); }); </script> </head> <body> <h1>Resimleri buyultmek icin uzerine tiklayin</h1> <h1>Cift tiklarsaniz resim ufalacaktir</h1> <img src="r1.jpg" /><img src="konya.jpg" /><hr /> <button>Resimleri buyult</button> <button>Resimleri ufalt</button> </body> </html> trigger.html Resime tıklandığında resim büyümektedir. Tıklamak demek click() metodu demektir. Bunu <img> tagına bağladım. Daha sonra ilk düğmeye basılınca <img> tagının click() metodunu çağır degim. Bunu da trigger metodunda örnekte kullandığım gibi gerçekleştirebiliyorum. Trigger() metoduna parametre olarak hangi Event’i çağırmak istiyorsam onu yazıyorum.
Musa ÇAVUŞ 334
Şekil190 toggle() Bu bölümün sonunda çok güzel bir örnek vermek istiyorum. Biraz animasyonculuğa hazırlıktır. Üç tane farklı renkte düğme var ve tıkladıkça rengi ve şekli değişecek. Örnek uzun gibi gelsede çoğu tanıdığınız bildiğiniz şeyler. Ben toggle() metodu üzerinde duracağım. Öncelikle örneği vermek istiyorum: <html> <head> <title>toggle</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("div").css({ width: "80px", height: "40px", margin: "5px",
Musa ÇAVUŞ 335
float: "left", background: "blue", border: "10px outset", cursor: "pointer" }); $("div").toggle(function(){ $(this).css({ "border": "5px inset", "background": "red" }); }, function(){ $(this).css({ "border": "10px outset", "background": "yellow" }); }, function(){ $(this).css({ "background": "blue" }); }); }); </script> </head> <body> <div> </div> <div> </div> <div> </div> </body> </html> toogle.html
Musa ÇAVUŞ 336
Şekil191 Tüm <div> taglarına bir css objesi yerleştiriyoruz. jQuery ile toggle metodunda üç parametre uyguluyoruz. Birinci parametre ilk tıklama, ikinci parametre ikinci tıklama, üçüncü parametrede üçüncü tıklamada oluşacak işlemi programlamamızı sağlamaktadır. $(this) ile diyoruz ki şu an ait olduğum taga ulaş ve ona ulaştıktan sonra css( yaparak o tagın css hayatını değiştiriyoruz. Çok şnemli noktalardan birisi ise şudur ki, her <div> tagı kendisine kaç kere tıklandığını bilmektedir.
Musa ÇAVUŞ 338
17.1 jQuery ve animasyonlar Ziyaret edilen web sayfalarında animasyonların oluşu, ziyaretçileri çok etkilemektedir. jQuery Framework’u, jQuery ile animasyon görüntüleri geliştirmenizi sağlamaktadır ve jQuery Framework’teki en basit konulardan biridir. http://api.jquery.com/category/effects linkine girerek var olan animasyon metotlarını görebilirsiniz. Bilmem biliyor musun, fakat jQuery dokümentasyanu aynı zamanda görüntülü örneklerde içermektedir. Az önce veridğim linke tıklayın ve çıkan sayfada dequeue() metoduyla gösterilen linke tıklayın:
Şekil192 Örneği ve uygulanışını canlı olarak jQuery sayfasında görebilirsiniz. Keratalar gerçekten güzel bir sayfa yapmışlar, ben şahsen hayran kaldım. show() ve hide() metotları Zamana göre görüntüleme ve saklama animasyonculuğun temel işlevleridir. jQuery için bu bir çocuk oyuncağı kadar kolaydır. Bunun için show() ve hide() metotları vardır. <html> <head>
Musa ÇAVUŞ 339
<script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){ $("div.k1").css({width:"80px", height:"40px", margin:"5px", float:"left", background:"blue", border:"5px outset" }); $("button:first").click(function(){ $("div.k1").show(); }); $("button:eq(1)").click(function(){ $("div.k1").show("slow"); }); $("button:eq(2)").click(function(){ $("div.k1").show(5000,function(){ $("#cikti").text("5 saniye surdu"); }); }); $("button:eq(3)").click(function(){ $("div.k1").hide(); }); $("button:eq(4)").click(function(){ $("div.k1").hide("fast"); }); $("button:eq(5)").click(function(){ $("div.k1").hide(3000,function(){ $("#cikti").text("3 saniye surdu"); }); }); }); </script> </head> <body> <button>Goster</button> <button>Animasyonlu goster</button> <button>Zaman animasyonlu goster</button> <button>Sakla</button> <button>Animasyonlu sakla</button> <button>Zaman animasyonlu sakla</button> <hr /><div id="cikti"></div><hr /> <div class="k1"></div><div class="k1"></div> <div class="k1"></div> </body>
Musa ÇAVUŞ 340
</html> showhide.html
Şekil193 Goster dugmesinin ardında show() metodu gizli. Bağlı bulunduğu taglar gösterilmiyorsa göstermek için gereken bir metottur. Animasyonlu göster düğmesine bastığımızda show() metodunun parametreli çağrıldığını görüyoruz. Parametre olarakta slow, Đngilizceden Türkçeye meal yaparsak usulca demek oluyor. Gösterilmeyenleri usulca göstermek için slow yazabiliyoruz. Tabi dersek, ben bu işin zamanını kendim belirtlemek istiyorum. O zamanda parametre olarak salise bir değer verin. Ben 5000 verdim, bu demek oluyor ki 5000 salise vatandaş tam gösterim için harcayacaktır. Đkinci parametre olarakta bir Callback fonksiyonu verdim. Đkinci parametre animasyon süresi bittikten sonra işleve girmektedir. hide() metoduda gizle demektir, show() metodunda geçerli olan tüm parametre kuralları hide() içinde geçerlidir. Örnekte hide(‘fast’) kullandım. fast, hızlı demek olduğu için hızlı bir şekilde gizleme yapmış oluyorum. slideDown(), slideUp() ve slideToggle()
Musa ÇAVUŞ 341
Normalde aşağıdaki örnek herşeyi açıklıyor. Ben yinede bir kaç açıklama getirmek istiyorum. Çizilen dikdörtgeni veya resimi aşağıdan yukarıya saklamak için slideUp() metodunu kullandım. Paramtre değerini daha önce anlatmıştım. slideDown() metoduyla aşağıya doğru resim ve dikdörtgen çizilmektedir. slideToggle() metoduylada zamanı verebiliyoruz. show() ve hide() metotlarındaki gibi ikinci bir parametre değeri de verebiliriz. Görevi ise aynı show() ve hide() metotlarındaki görevi gibidir. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $("img").css("width", "300px"); $("div.k1").css({ width: "80px", height: "40px", margin: "5px", background: "green", border: "5px outset" }); $("button:first").click(function(){ $("div.k1").slideDown("slow"); }); $("button:eq(1)").click(function(){ $("div.k1").slideUp("fast"); }); $("button:eq(2)").click(function(){ $("img").slideDown("slow"); }); $("button:eq(3)").click(function(){ $("img").slideUp("slow"); }); $("button:eq(4)").click(function(){ $("div.k1").slideToggle(5000); $("img").slideToggle(10000); }); }); </script> </head> <body> <button> Dikdortgeni goster
Musa ÇAVUŞ 342
</button> <button> Dikdortgeni sakla </button> <button> Resimi goster </button> <button> Resimi sakla </button> <button> Resmi ve Diktdortgene Toggle efekti uygula </button> <hr/> <div class="k1"> </div> <img src="r1.jpg" /> </body> </html> Slide.html
Şekild194 Saydam efektleri, fadeIn(), fadeOut() ve fadeTo() jQuery saydam efektleri içinde kolay metotlar sunmaktadır. fadeIn() ve fadeOut() metotları saydamlaştırarak göstermektedir ve gizlemektedir. fadeTo()
Musa ÇAVUŞ 343
metodu ise belirli bir zamana göre ve belirli bir sınıra göre saydamlaştırmaktadır. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $("img").css("width", "300px"); $("div.k1").css({ width: "80px", height: "40px", margin: "5px", background: "green", border: "5px outset" }); $("button:first").click(function(){ $("div.k1").fadeIn("slow"); }); $("button:eq(1)").click(function(){ $("div.k1").fadeOut("fast"); }); $("button:eq(2)").click(function(){ $("div.k1").fadeTo(3000, 0.2); $("img").fadeTo(2000, 0.5); }); }); </script> </head> <body> <button> Dikdortgeni yavas saydam sakla </button> <button> Dikdortgeni hizli saydam goster </button> <button> Toggle </button> <hr/> <div class="k1"> </div> <img src="r1.jpg" />
Musa ÇAVUŞ 344
</body> </html> slide.html
Şekil1195 Yine bu metotlarda da ikinci parametrede kullanılabilecek Callback fonksiyonu geçerlidir. Zincirlenmiş animasyonlar Animasyon jQuery ile çok kolay olduğunu gördünüz. Özellikle tarayıcıların animasyonlara getirdiği sınırlamaları jQuery ile aşabiliyorsunuz, çünkü jQuery kendin bünyesinde bu sınırlamaları işliyor ve siz bunları gös önünde bulundurmaya gerek duymuyorsunuz. Gereksiz cümleler kullanmayı sevmediğim için hemen zincirleme animasyonu için örneğe geçmek istiyorum. <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script>
Musa ÇAVUŞ 345
<script> $(document).ready(function(){ $("img").css("width", "300px"); $("button:first").click(function(){ $("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow").hide("normal").show(5000); }); $("button:last").click(function(){ $("img:last").fadeOut("fast"); $("img:last").fadeIn(2000); $("img:last").slideUp("slow"); $("img:last").slideDown("slow"); $("img:last").hide("normal"); $("img:last").show(5000); }); }); </script> </head> <body> <button> Zincirli animasyon I </button> <button> Zincirli animasyon II </button> <hr/><img src="r1.jpg" /> <hr/><img src="r2.jpg" /> </body> </html> zincirleme.html
Musa ÇAVUŞ 346
Şekil196 jQuery olmadan zincirleme animasyonlarını programlamak çok güçtür. jQuery’deki zincirleme animasyon özelliğin beni cezbeden noktası bir animasyon bittikten hemen ardından diğer animasyona geçilmesidir. Örnekte iki şekil zincirleme animasyonu uyguladım. Birinci düğmeye bastığınızda, animasyon metotları sırasıyla çağrılmaktadır. Koda baktığınızda bu metotları bir nokta ayırarak çağırmaktayım. Bunun nedeni her animasyon metodu bir jQuery nesnesini bize iletmektedir. Böylece biz bir diğer animasyon metodunu nokta kullanarak o nesnenin bir metoduymuş gibi çağırabilmekteyiz. Đkinci yöntemde ise her animasyonu ayrı bir satırda çağırarak aynı elemente uyguladım. Bu da zincirleme animasyonunu sağlamış oluyor. Animasyonları durdurmak
Musa ÇAVUŞ 347
Bir animasyon işliyorsa bunu stop() metoduyla durdurabilirsiniz. Yukarıdaki örneği ele alırsak birinci animasyonu işlevi esnasında durduran bir örnek göstereceğim: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $("img").css("width", "300px"); $("button:first").click(function(){ $("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow").hide("normal").show(5000); }); $("button:last").click(function(){ $("img:last").fadeOut("fast"); $("img:last").fadeIn(2000); $("img:last").slideUp("slow"); $("img:last").slideDown("slow"); $("img:last").hide("normal"); $("img:last").show(5000); }); $("button:eq(2)").click(function(){ $("img:first").stop(); }); }); </script> </head> <body> <button> Zincirli animasyon I </button> <button> Zincirli animasyon II </button> <button> Birinci animasyon dursun </button> <hr/><img src="r1.jpg" /> <hr/><img src="r2.jpg" /> </body> </html>
Musa ÇAVUŞ 348
Şekil197 Bazen animasyonu durdurma gecikmelere sebebiyet verir fakat yine de sonunda animasyon durdurulmuş olur. animate() ile kendiniz bir animasyon metodu jQuery’nin bize sunduğu animasyon metotları, bir çok animasyon özelliğini bize sunmaktadır ve aklınıza gelen bir çok animasyon efektinide sağlamaktadır.Fakat bazı durumlarda gönül ister ki kendimiz bir animasyon metodu yazalım. Örneğin bir elementin pozisyonunu bir yerden başka bir yere saydamlaşırken bir yandan da sürüklemek istiyorsunuz. JavaScript ile bunu programlamaya çalışırsanız çok vaktinizi alacaktır ve bir kaosa sürüklenerek metotları rekursıv olarak çağırmaya başlayacaksınızdır. Đyi ki jQuery var ve bize animate() adında bir metot sunmaktadır.
Musa ÇAVUŞ 349
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script> $(document).ready(function(){ $(".d1").css({ width: "80px", height: "40px", margin: "5px", background: "green", border: "5px outset", position: "absolute" }); $("img").css({ width: "200px", position: "absolute" }); $("#i1").css({ width: "200px", left: "100px", top: "50px" }); $("#i3").css({ width: "200px", left: "100px", top: "150px" }); $("button:first").click(function(){ $("div#i1").animate({ width: "20%", opacity: 0.4, borderWidth: "1px" }, 1500); }); $("button:eq(1)").click(function(){ $("img#i3").animate({ width: "100%", opacity: 0.3, top: "200px" }, 5000); }); }); </script>
Musa ÇAVUŞ 350
</head> <body> <button> Dikdortgen 1 animasyon </button> <button> Resim 2 animasyon </button> <hr/> <div class="d1" id="i1"> </div> <img src="r1.jpg" id="i3" class="img1" /> </body> </html> animate.html
Şekil198
Musa ÇAVUŞ 351
http://api.jquery.com/animate sayfasından animate() metodu hakkında Đngilizce ayrıntılı bilgi bulabilirsiniz. Đngilizce dilini tam anlamıyla bilmenize gerek yok, oradaki örneklerde faydalı olan örneklerdir. Tabi benim verdiğim örneğe oradakiler eline su dökemez, çünkü Türkçe. animate() metodu çok esnek ve çok güçlü bir metottur. Bu metotla istediğiniz animasyonu oluşturabilirsiniz. button:first bloğuna bir bakalım. Orada bir animate() metodu kullandim. Đlk parametre olarak bir CSS nesnesini değişik parametrelerle görüyorsunuz. Đkinci parametre olarakta zaman aralığını görüyorsunuz. Olay çok basit, bizim dikdörtgenin ilk halini tanımlamış oluyoruz. animate() metodu bizim dikdörtgenin son hali olmuş oluyor, ikinci parametredeki zaman aralığıda dikdörtgenin son haline kavuşma süresidir. jQuery bu bilgiler eşliğinde bir animasyon oluşturuyor. animate() metoduyla zincirleme animasyonlarda yapılabilir. Her animate() metodunun ardından bir nokta koyarak bir animate metodu daha çağırabilirsiniz, çünkü animate() metodu bir jQuery nesnesi iletmektedir.
Musa ÇAVUŞ 353
18.1 jQuery ve Ajax Daha önce Ajax’ı göstermiştim. jQuery burnunu her tarafa sokarak işimizi kolaylaştırdığı gibi Ajax dunyasınada burnunu sokmuştur ve Ajax kullanımını kolaylaştırmıştır. Bize kalan sadece nasıl olduğunu öğrenmektedir. Gerçekten şoke olacaksınız jQuery ile Ajax kullanımının ne kadar kolay olduğunu görünce. jQuery’nin , Ajax ile bize sunduğu metotlar şu sayfada görebilrisiniz http://api.jquery.com/category/ajax/
Şekil199 Daha önce anlattığım Ajax’ı anladıysanız buradaki jQuery metotları sizin için çocuk oyuncağı gibi gelecektir. Şimdi bir örnekle başlamak istiyorum: http://localhost/ajax/ajax1.html <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){
Musa ÇAVUŞ 354
$("button:first").click(function(){ $.get("ajax.txt", function(data){ $("#cikti").text(data); }); }); $("button:eq(1)").click(function(){ $.post("ajax.txt", function(data){ $("#cikti").text(data); }); }); }); </script> </head> <body> <button>AJAX-Sorgulama $.get()</button> <button>AJAX-Sorgulama $.post()</button> <div id="cikti"></div> </body> </html> ajax1.html Bu dünyada bildigim iki sey var, birincisi erkekler kadinlardan akillidir, ikincide erkekler kesinlikle kadinlardan akillidirlar. ajax.txt
Şekil200 Daha önce XAMPP kurulumunu ve kullanımını göstermiştim. htdocs dizini altına ajax diye bir dizin açtım ve ajax1.html ile ajax.txt dosyalarını bu dizine kopyaladım. http://localhost/ajax/ajax1.html linkini yazıncada yukarıdaki şekili elde ettim. Koda baktığınızda yaptığım çok basit. $.get() ve $.post() fonksiyonlarını kullanarak birinci parametrede çağırmak okutmak istediğim dosya adını veriyorum, ikinci parametredeki data değişkenide okunan dosyanın içeriğini bana sunmaktadır. jQuery ile Ajax bu kadar basit. Đki saat hikâye anlatmama gerek yok. Yüzlerce sayfa yazarak Ajax nimetinin nasıl kullanıldığını da
Musa ÇAVUŞ 355
göstermeme gerek yok. Yukarıdaki kodla bir süre Ajax kodu yazabilirsiniz. jQuery ile kalın kitapları alarak Ajax kodu yazma mazilerde kaldı. Size bir kaç örnek daha vereceğim sonra iş başvurusunda ben Ajax biliyorum diyebilirsiniz. Yeşillik olsun diye bir başka örnek vermek istiyorum: <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){ $("button:first").click(function(){ $.get("ajax2.txt", function(data){ $("#cikti").html(data); }); }); $("button:eq(1)").click(function(){ $.post("ajax2.txt", function(data){ $("#cikti").html(data); }); }); }); </script> </head> <body> <button>$.get()</button> <button>$.post()</button> <div id="cikti"></div> </body> </html> ajax2.html <b>Bu dünyada bildigim iki sey var,</b><br> <font color=red>birincisi erkekler kadinlardan akillidir, ikincide erkekler </font> kesinlikle kadinlardan akillidirlar. ajaxhtml.html
Musa ÇAVUŞ 356
Şekil201 Bu örneğin bir önceki örnekten tek farkı text() metodu yerine html() metodunu kulllanmam oldu. html() metodu gelen bilgiyi HTML olarak algılıyor ve tarayıcı ona göre gösteriyor. Metot çok kolay ve içerik çok büyük farklılık arz ediyor. Webserver’e Ajax ile bilgi nasıl yollanır? Diyelim ki, ad, soyad ve numara gibi bilgileri Web Server’e yollamak istiyorsunuz ve yolladığınız bu bilgiler ışığında tarayıcıda bilgiler göstermek istiyorsunuz. Bunu da Ajax ile gerçekleştirme düşüncesindesiniz. O zaman bu örneğe iyi bakın. Tabi diğer Ajax örneklerindeki gibi Server tarafında basit bir metin dosyası bulundurmamız mantıksız olur. Server tarafında bir program parçası olması gerekiyor ki bizim yolladığımız bilgileri alsın ve işledikten sonra tekrar bize geri yollasın. Daha önceki Ajax anlatımıdan PHP kodu kullanmıştım burada da PHP kodu kullanacağım. PHP kodunun ne yaptığını anlamanız yeterlidir, çünkü kitap PHP kitabı değil. Ajax için Server tarafında çalışan program parçası hiç önemli değildir, siz istiyorsanız başka bir dilde kullanabilirsiniz. Ajax Server tarafını kapalı bir kutu gibi görmektedir. Siz nasıl ki telefon açtığınızda karşı taraftaki kişinin cinsi, ırkı önemli değil sadece söyledikleri önemliyse, Ajax içinde aynı kriterler geçerlidir. Göstereceğim örnekte kullanıcı adı ve şifre yollayacağım eğer Server tarafı onaylarsa tarayıcıda onaylandı diye bir belirteç gözükecek, onaylamazsa yanlış kullanıcı adı ve şifre diye bir hata mesajı çıkacak. Bu bildiğiniz bir
Musa ÇAVUŞ 357
sorgulamadır, tek farkı yeni bir tarayıcı penceresinde değil de aynı pencerede gerçekleşmesidir. <?php $kullaniciadi = "musa"; $sifre = "cavus"; $login=false; if (($kullaniciadi == $_GET['username']) && ($sifre == $_GET['password']) ){ $login=true; } if($login) { echo "Login basarili"; } else { echo "Login basarisiz sifrenizi ya da kullanici adinizi kontrol edin"; } ?> login_get.php <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script> $(document).ready(function(){ $("button:first").click(function(){ $.get("login_get.php", { username: $("input:first").val(), password: $("input:last").val() }, function(data){ $("#cikti").html(data); } ); }); }); </script> </head> <body>
Musa ÇAVUŞ 358
<h1>Kullanici adinizi ve sifrenizi girin</h1> <form name="f1"> <table width="200" border="1"> <tr> <td>Kullanici Adi</td><td><input type="text" size="30"></td> </tr> <tr> <td>Sifre</td> <td><input type="password" size="30"></td> </tr> </table> </form> <button>Giris</button> <div id="cikti"></div> </body> </html> login.html
Şekil202
Musa ÇAVUŞ 359
Öncelikle korkmamanız için PHP kodunu anlatmak istiyorum. Yaptığım çok basit. $_GET['username'] ve $_GET['password’] ile kullanıcı adını ve şifreyi elde ediyorum. Daha sonra bunları $kullaniciadi ve $sifre değişkenleriyle kontrol ediyorum. Eğer girilen kullanıcı adı ve şifre bunlarla özdeşiyorsa $login değişkenin değeri true oluyor ve echo ile başarılı olduğuna dair bir satır tarayıcıya geri yollanıyor. Eğer $login değişkeni false kalıyorsa o zaman else anahtar kelimesinden sonra gelen echo ile yazılacak satır tarayıcıya yollanıyor. PHP kodunu çok basit tuttum, veritabanı bağlamadım. Önemli olan sistemi kavramaktır yoksa burada manzak projeler yapmak değildir. ajax3.html dosyasındaki en önemli yer şurasıdır: { username: $("input:first").val(), password: $("input:last").val() } Bu satırlarla Server’e jQuery ile bir nesne yollatıyorum. username değişkenine ilk input elementinden değer aktarılıyor. Aynı şekilde password değişkenine son input elementinden değer aktarılıyor. Düğmeye basılınca bu veriler Server’e aktarılıyor. jQuery ve Ajax hakkında bu kadar bilgi yeterli. Bu bilgilerle kaliteli Ajax projeleri gerçekleştirebilirsiniz. Herşeyi bilemezseniz fakat kaliteli projeler yapabilmek için herşeyi de bilmeye gerek yoktur.
Musa ÇAVUŞ 361
19.1 Genel bir bakış jQuery Framework’unun yanı sıra bir de jQuery UI var. Bu Framework görsellik için kullanılmaktadır. Wıdgets de denilmektedir. jQuery çekirdeğini ve CSS sistemini kombine ederek bu Framework oluşturulmuştur. Gerçekten jQuery’deki ağabeyler herşeyi bizim için düşünmüşler. Bazen diyorum bu adamların hiç mi çoluk çocuğu yok nereden buluyorlar bu kadar vakti. Tanımasam Avrupalı ve Amerikalıları amenna diyeceğim, biliyorum bizlerden zeki olmadıklarını. Neyse konudan sapmayalım. jQuery UI için http://jqueryui.com yazın ve sayfaya bir girin:
Şekil203 jQuery UI size çok güçlü bir Framework sunmaktadır ve bu Framework’u kullanmak çok kolaydır. Benimde en çok hoşuma giden yönü budur. jQuery UI Kütüphanesi normal jQuery kütüphanesinde mevcut değildir. Bu yüzden bunu indirmeniz gerekmektedir. Yukarıdaki şekilde Build custom download linkine tıkladığınızda işe başlamış olacağız. Şimdilik oraya tıklamadan önce web sayfasını size biraz gezdireyim. Sol alt köşede Browse all effects & widgets linki var, tıklayın onu.
Musa ÇAVUŞ 363
Şekil205 Đlginç olan dokümanda örnekler var ve siz bu örnekleri canlı olarak deneyebilirsiniz. Çıkan penceredeki kareyi fare ile istediğiniz yere sürükleyerek kendi sisteminizde kullanmak istediğiniz bölümü kullanmadan önce deneyebiliyorsunuz. Aynı sayfada view source linkine tıkladığınızda gördüğünüz efekti sisteminize yüklemek için koduda görüyorsunuz. Koda baktığınızda göreceksiniz ki ekrandaki kareyi sürükleyebilmek için draggable() metodunu kullanıyorsunuz o kadar. Dedim ya jQuery UI kullanarak efektleri çok kolay gerçekleştirebiliyorsunuz. Nerede görülmüş tek bir metot kullanarak her hangi bir elementi sürükleyebilmeniz. Seneler öncesi böyle bir olayı JavaScript ile programlamak istediğimde bir sürü kod yazmıştım. Fareye basıldı mı, fareyi nereye sürükledin gibi unsurlara muhakkak dikkat etmek gerekiyordu. jQuery UI’de bunları unutuyorsunuz. 19.2 jQuery UI nasıl kullanılır? Daha önce belirttiğim gibi jQuery UI'yi kullanabilmek için bir kütüphane indirmelisiniz. Download linkine tıklayın.
Musa ÇAVUŞ 364
Şekil206 Sağ tarafta 1.8.5 olan son versiyonu seçerek Download linkine tıklayın. Bu rakam jQuery’deki gençler yenilikler getirdikçe değişebilir. jquery-ui-1.8.5.custom.zip bir dosya indirdim. Zip formatındaki dosyayı Zip halinden kurtarın ve onu örnekleri deneyeceğiniz dizine kopyalayın. Ben örneklerimin bulunduğu dizinin içine bir de jquery-ui-1.8.5.custom dizini açarak açılan tüm dosyaları onun içine kopyaladım. Daha önce böyle bir şeyler yapmıştık hatırlıyorsanız. Şimdi tekrar yapıyoruz. Zip dosyasını açtıktan sonra sıradaki kodu yazın. Zip dosyasının içinde neler var neler yok bilmeseniz de olur. Tabi bakmakta yarar var zarar gelmez. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"> </script>
Musa ÇAVUŞ 365
<script type="text/javascript"> $(document).ready(function(){ $("#draggable").draggable(); }); </script> </head> <body> <h1>Yukari</h1> <img id="draggable" src="r1.jpg" /><h1>Asagi</h1> </body> </html> drag.html
Şekil206 Heyecanlanmadınız değil mi? Đnanılması güç fakat işte bu kadar basit. Bir kaç satır kodla tarayıcıdaki resimi sürükleyebiliyorsunuz. Kodda dikkat etmeniz
Musa ÇAVUŞ 366
gereken, CSS dosyasını, JavaScript dosyasını ve jQuery dosyasını kod içerisinde yerini belirtmenizdir. CSS için <link> tagını kullandık, unuttuysanız CSS için kısa bir giriş yapmıştım orada bulabilirsiniz. JavaScript dosyalarını da nasıl bağlanacağını her örnekte görmüşünüzdür.<img> tagına bir id verdim ve adını draggable koydum. Sonra jQuery bölümünde <img> tagına draggable() metodunu bağladım ve hoptirinanay sizin resminiz sürüklenme özelliği kazanmış oldu. Benim tavsiyem resmi sürüklerken Firebug ile bir bakın HTML tarafında neler oluyor. Beyin hücreleriniz konuyu daha iyi anlayacaktır. 19.3 Çeşitli jQuery UI elementleri Normalde fazladan bilgiye ihtiyacınız yok. Sayfaya girin ve oradan istediğiniz Widget’e bakın sonra kodu indirin ve oradaki örnekte olduğu gibi kendi sisteminizde kullanın. Dedim ki biraz daha jQuery UI’den örnek vereyim ki heyecan dorukta olsun. Şimdi tekrar http://jqueryui.com/download adresine girin ve Theme yazın bölümün altındaki yerden UI darkness seçerek download yapın. Bu özellik sayesinde indirdiğiniz jQuery UI, UI darkness efekt özelliği gösterecektir. Hemen ilk örneğimiz olan takvim örneğinde bunu bir göstereyim. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#datepicker").datepicker(); }); </script> </head> <body> <p>Tarih: <input id="datepicker" type="text"></p> </body> </html> takvim.html
Musa ÇAVUŞ 367
Şekil207 Darkness UI seçtiğim için bu efekti içeren bir takvim görmüş oluyorum. Seçenek bölümünde bir sürü seçebileceğiniz efektler var, değişik deneyler yapabilirsiniz. Takvimide nasıl oluşturduğumu anlamışınızdır umarım, çünkü sadece tek bir metot olan datepicker() metodunu kullandım. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#i1").accordion();
Musa ÇAVUŞ 368
}); </script> </head> <body> <h1>Benim Web Sayfam</h1> <div id="i1"> <h3>Benim ozel sayfam</h3> <div> <a href="http://rjs.de">www.musa-cavus.com</a> </div> <h3>Bir liste</h3> <div> <hr/>Domates <hr/>Biber <hr/>Patlican <hr/> </div> </body> </html> accordion.html
Şekil208
Musa ÇAVUŞ 369
Bu da başka bir örnek. Örneği çalıştırın ve ne kadar etkili bir Widget olduğunu görün. Tek bir metot olan accordion() metodu il id’sine sahip <div> tagına bağlayarak bu efekti gerçekleştirmiş oldum. accordion() metodunu daha çok kullanmak istiyorum diyorsanız http://jqueryui.com/demos/accordion linkine girin. Kullanabileceğiniz parametreler, renkler ve biçimleri orada bulabilirsiniz. Tek tek anlatmama gerek yok zaten orada her şey var.Ben size sadece bu işin temelini ve mantığını öğretmeye çalışıyorum. Şimdi size biraz daha fazla bir şey göstereceğim. Hem Tab kullanabileceksiniz hemde kullandığınız tab elementinin boyutunu değiştirebileceksiniz. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#tabs").tabs().resizable(); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Bolum 1</a></li> <li><a href="#tabs-2">Bolum 2</a></li> <li><a href="#tabs-3">Bolum 3</a></li> </ul> <div id="tabs-1"> <p>Ben birinci bolumum sen kimsin?</p> </div> <div id="tabs-2"> <p>Ben ikinci bolumum sen birinci bolum musun?</p> </div> <div id="tabs-3"> <p>Kavga yapmayin bende ücüncü bolumum</p> </div> </div>
Musa ÇAVUŞ 370
</body> </html> tabs.html
Şekil209 Görüldüğü gibi efektleri noktalar sayesinde ard ardına ekleyebiliyoruz. tabs() metodundan sonra resizable() metodunu nokta kullanarak istediğimiz sonuca ulaştık. Zincirlemede yapabiliyoruz gördüğünüz gibi. 19.4 jQuery UI değerlerini elde edebilme Bazı durumlarda jQuery UI elementlerinin aralarında iletişim sağlamak isteyebiliriz. Örneğin bir araç çubuğu sağa sola çekilirken bir Dialog kutusunun boyutunun değişmesini isteyebiliriz. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js">
Musa ÇAVUŞ 371
</script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#i1").dialog({ title: 'Dialog Baslik', position: 'center', width: '300', height: '200' }); $("#s1").slider(); $("#s2").slider({ slide: function(event, ui){ var genislik = 300 + $("#s2").slider('option', 'value'); $("#i1").dialog('option', 'width', genislik); } }); $("#s2").css({ width: "400px" }); $("#s3").slider({ slide: function(event, ui){ var yukseklik = 200 + $("#s3").slider('option', 'value'); $("#i1").dialog('option', 'height', yukseklik); }, orientation: 'vertical', min: -50, max: 50, value: 0 }); }); </script> </head> <body> <h4>Default Slider</h4> <div id="s1"> </div> <h4>Default Slider CSS</h4> <div id="s2"> </div> <h4>Slider</h4> <div id="s3">
Musa ÇAVUŞ 372
</div> <div id="i1"> Web sayfami ziyaret edebilirsiniz... <a href="http://www.musa-cavus.com">tikla</a> </div> </body> </html> slider.html
Şekil210 Araç çubuğunu oluşturmak çok kolay slider() metodunu kullanınca <div> tagını kaydırma özelliği vermiş oluyrsunuz. Bir değer alabilmek için slider() metodunu iki parametreli olarak kullanıyorsunuz ve ilik parametreye option yazarken ikinci parametreye value yazıyorsunuz. Bunu dokümanlarda da görebilirsiniz ve sadece slider() metodu için geçerli değildir, bir çok jQuery UI elementleri içinde geçerlidir. Đlk parametre option, ikinci parametre value ve son parametreye de bir değer verirseniz araç çubuğunun genişliğini belirtmiş oluyorsunuz. Şimdi $("#s2").slider kısmına iyi bakın orada slide: diye bir kısım var. Bu şekilde bir Event oluşturuyoruz ve bu Event çubukta her kaydırma yapılınca
Musa ÇAVUŞ 373
çağrılmaktadır.Araç çubuğunun yatay ya da dikey olmasını orientation seçeneğinden ayarlayabilirsiniz. Genişlik, ilk değer gibi değerleri de değiştirme imkanınız var ki bunları lütfen dokümana bakarak uygulayın ve değişiklilk yapıın ki örnekler beyninize daha iyi yerleşsin. 19.5 Efektler http://jqueryui.com/docs/Effects/Methods adresine girerseniz efektlerle ilgili süper bir dokümentasyon göreceksiniz. Ben hepsini göstermeyeceğim efektlere bir giriş niteliğinde giriş yapacağım. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var opt = {}; function temizle(){ setTimeout(function(){ $("#i1").removeAttr('style').hide().fadeIn(); opt = {}; }, 2000); }; $("button:first").click(function() { $("#i1").effect('explode',opt,1500,temizle); return false; }); $("button:eq(1)").click(function() { $("#i1").effect('puff'); return false; }); $("button:eq(2)").click(function() { $("#i1").effect('pulsate',opt,2000,temizle); return false; }); $("button:eq(3)").click(function() { $("#i1").effect('slide',opt,2500,temizle); return false;
Musa ÇAVUŞ 374
}); $("button:eq(4)").click(function() { opt = { to: {width: 200,height: 60} }; $("#i1").effect('size',opt,5000,temizle); return false; }); }); </script> </head> <body> <button>Explode</button><button>Puff</button> <button>Pulsate</button><button>Slide</button> <button>Size</button><hr /> <img id="i1" src="r2.jpg" width="300"/> </body> </html> efekt.html
Şekil211
Musa ÇAVUŞ 375
Explode düğmesine basınca resmi patlatıyor gibi bir efekt uygulamış oldum. Bu patlama şu kodla gerçekleşiyor: $("#i1").effect('explode',opt,1500,temizle). Zaten efektlerle effect() metodu ilgileniyor, parametrede yapacağımız değişikliğe görede efekt değişiklikleri elde ediyoruz. Birinci parametre efektin kendisi, ikinci parametre seçenekler, üçüncü parametre efektin hızı ve son parametre Callback fonksiyonudur. Örnekte bir kaç efekt kullandım. temizle Callback fonksiyonuda belli bir süre sonra resmi eski haline getirmektedir. Bu bölümü fazla uzatmıyorum, çünkü çok kolay. Yapmanız gereken sadece jQuery UI sayfasındaki örnekleri incelemek ve uygulamak.
Musa ÇAVUŞ 377
20.1 Temel bilgiler Çekirdek olarak jQuery ve jQuery UI’yi gördük. Bu iki Framewörk geliştirileibilir özelliklere sahiptirler ki bunlara Plugins denilmektedir. http://plugins.jquery.com/
Şekil212 Plugins, JavaScript kütüphanesinden oluşmuşturlar. Şu an yeterli derecede Plugins vardır ve aklınıza gelebilecek her türlü konu için mutlaka bir Plugin bulabilirsiniz. Nerede bulurum bunu diye sorarsanız, yukarıda linkini verdim. O linke girerseniz sadece aramayı bileceksiniz ve istediğiniz Plugin sizin olabilir. Aynı zamanda sizde bir Plugin yazarsanız bu sayfaya koyabilirsiniz. Bu bölümde sizlere Plugin nasıl yazılır, sayfadaki Plugin’ler nasıl kullanılır ve kendi yazdığınız Plugin’i jQuery Plugin sayfasına nasıl koyabilirsiniz onu göstereceğim. 20.2 Plugin kullanmak Bir Plugin’e ihtiyaç duydunuz ve jQuery’nin bize sunduğu Plugin sayfasından bu Plugin’i kullanmak istiyorsunuz.
Musa ÇAVUŞ 378
http://plugings.jquery.com/ adresine girdiğinizde sol tarafta Browse Plugin bölümünde anahtar kelimeleri göreceksiniz. Data anahtar kelimesinin üzerine bir tıklayın.
Şekil213 Data anahtar kelimesinin geçtiği tüm bölümler sıralanmış oldu. Tarayıcınızdan geri düğmesine tıklayın ve sağ taraftaki Projects Types bölümünden Drag-and-Drop linkini tıklayın:
Şekil214
Musa ÇAVUŞ 379
Yine burada da seçilen projeye göre bölümleri görmüş oluyorsunuz. Aynı şekilde aramada yapabilirsiniz. Ben sol üst bölümdeki Search bölümünden TreeVıew arattırdım ve ilk TreeView örneğine tıkladım:
Şekil215 Bu Plugin’i yukarıdaki gördüğünüz sayfadan indirebilirsiniz, web sayfasına girebilirsiniz. Plugin’in ne kadar oy aldığını görebilirsiniz ve ona göre kafanızda bir resim çizebilirsiniz. Mesela dersiniz bu amca benim için yeterli bir Plugin geliştirmemiş ben başka amcaya bakayım. Try out a demonstration linkine tıklayarak kullanmak istediğiniz Plugin hakkında görsel bir görünüm örneği görmüş oluyorsunuz:
Musa ÇAVUŞ 380
Şekil216 Plugin’in dokümanı iyi değilse ya da yoksa listelemede sonlara doğru yer alır. Tabi Plugin’in çalışabilirliği de listelemede çok önemlidir. Dokümansız Plugin genelde hiçbir işe yaramaz, çünkü doküman olmadan Plugin’in nasıl çalıştığını ve ne işe yaradığını nereden bileceksiniz. TreeView’in dokümanı çok güzel yapılmış, aynı jQuery’deki gençlerin uygulamış olduğu metodu izlemiş. Bakmakta yarar var. Şimdi TreeView Plugin’ini bir bilgisayarınıza indirin. Homepage linkini tıklayarak bu indirmeyi oradaki Download linkine tıklayarak gerçekleştirebilirsiniz. Đndirdiğiniz dosyayı örnekleri uyguladığınız dizine açın. Dokümanı inceledim ve şöyle bir kod yazdım: <html> <head> <link rel="stylesheet" href= "jquery-treeview/jquery.treeview.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script src="jquery-treeview/jquery.treeview.js" type="text/javascript"></script> <script> $(document).ready(function(){
Musa ÇAVUŞ 381
var agacim=$("#cikti").treeview({ animated: "fast", collapsed: true }); var yeniListe = $("<li><span class='folder'>Web sayfalari</span><ul>" + "<li><span class='file'>" + "<a href='http://www.musa-cavus.com'>www.musa-cavus.com</a>" + "</span></li>" + "<li><span class='file'>" + "<a href='http://jquery.com'>jquery.com</a>" + "</span></li>" + "<li><span class='file'>" + "<a href='http://www.w3c.org'>w3c</a>" + "</span></li>" + "</ul></li>") .appendTo(agacim); agacim.treeview({ add: yeniListe }); }); </script> </head> <body> <div id="cikti"></div> </body> </html> treeview.html
Şekil216
Koda bakarsanız üç ekleme yaptım. Birincisi CSS eklemesi, ikincisi bizim jQuery dosyasını ekledim ve üçüncü olarak TreeView JavaScript’ini ekledim.
Musa ÇAVUŞ 382
treeview kullanımı bu Plugin’ini yazan kişiye bağlıdır. Bende dokümandaki örneğe bakarak ve orada yazılan çizilenlere bakarak kendi kodumda kullandım. 20.3 Plugin oluşturmak Başkasının Plugin’lerini kullanarak bir parazit terliksisi gibi yaşamak istemiyorsunuzdur. O yüzden size kendi Plugin’inizi nasıl oluşturacağınızı göstereceğim. Kendin pişir kendin ye. <html> <head> <link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"> </script> <script type="text/javascript" src="jquery.dragwithstatuslight.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").css({'width':'300px'}); $("img").dragwithstatuslight(); }); </script> </head> <body> <img src="r1.jpg" /><img src="r2.jpg" /> <img src="r3.jpg" /><img src="r4.jpg" /> </body> </html> plugin.html jQuery.fn.dragwithstatuslight = function() { return this.each(function(){ $(this).css({ border:"5px outset", cursor:"move" }); $(this).draggable( { start: function(event, ui) { $(this).css({opacity : 0.5});
Musa ÇAVUŞ 383
}, stop: function(event, ui) { status=""; $(this).css({opacity : 1}); }, drag:function(event, ui) { status="X/Y : " + event.pageX + "/" + event.pageY; } }); } ); }; jquery.dragwithstatuslight.js
Şekil217 Plugin can alıcı noktası jquery.dragwithstatuslight.js dosyasındadır. Plugin yazıyorsanız mutlaka bu dosyada kullanacağınız metot jQuery.fn ile başlamalıdır. Ayrıca metodun bulunduğu dosya ayrı bir JavaScript dosyası olmalıdır ki Plugin’i kullanacak kişi Plugin’i kendi koduna bağlayabilsin. Bu JavaScript dosyasıda mutlaka jquery ile başlamalı ve kendine özgü isim ile devam etmelidir. Bizim örneğimizde jquery.dragwithstatuslight.js şeklinde olmuştur. Oluşturduğum örnekte draggable() metodunu kullandım. Sürüklemek istediğim nesneye bir çerçeve konmasını istedim. Fareninde sürükleme aşamasında, sürükleme şeklini almasıda gerekiyordu. Yine sürüklenen nesnenin sürüklenme anında renginin açmasını ayarladım. Kendi kodumuzda tüm bağlamaları yaptıktan sonra dragwithstatuslight() metodunu diğer metotlar gibi çok kolay kullanabiliriz. Örnekte $("img").dragwithstatuslight(); şeklinde bir kullanımla yazdığım Plugin’deki metodu kullanmış oldum.
Musa ÇAVUŞ 384
20.4 Plugin’i yayınlamak Süper zekânızı çalıştırdınız ve bir Plugin yazdınız. Bunu da dünya bilsin istiyorsunuz. En iyi yöntem jQuery’nin sayasından bunu yapmanızdır ki buna jQuery fırsat tanımaktadır. jQuery’nin Plugin sayfasına giriyorsunuz ve sol taraftaki User login bölümünden Login/Register linkini tıklıyorsunuz. Karşınıza çıkan pencereden Create a new account, yani usta beni de sayfana üye yap diyorsunuz. Kayıt işlemlerinden sonra kullanıcı adı ve şifrenizi girerek sol tarafta Add Plugin linkini tıklayın. Karşınıza bir form çıkacaktır onu doldurun ve Submit düşmesine basın. Bastıysanız dünya sizin yazdığınız Plugin’e ulaşabilecektir. Form’a bilgiler girebilmek için daha önce yazılmış Plugin’leri örnek alın ki zorlanmayın. Ve mutlu son. Şimdi uzman bir jQuery programcısı konumundasınız. Bu kitapla başta jQuery olmak üzere JavaScript, Ajax, CSS, HTML, DHTML, XHTML gibi teknolojilere hakim konuma gelmiş oldunuz. Bir iş başvurusunda bu teknolojilerden birini görürseniz hemen başvurun, çünkü siz bunları biliyorsunuz. Umarım sizlere çok katkıda bulunmuşumdur, bulunamadıysam suç sizde kitabı iyi okuyarak uygulamamışsınızdır. Hadi beni fazla yormayın, zaten bu kitabı yazarak çok yoruldum. Ne diyeyim çokta zevkliydi yazmak.
top related