jQuery

Kendinize Güvenerek
jQuery

Bilgisayar Mühendisi
Musa ÇAVUŞ

KENDĐNĐZE GÜVENEREK

jQuery

4
Musa ÇAVUŞ

Almanya, 2010

Kendinize Güvenerek jQuery

Musa ÇAVUŞ

Bedava Dağıtım:

Kasım - 2010

© Musa Çavuş

6
Musa ÇAVUŞ

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

Sayfa Tasarımı:

Musa Çavuş

Web Adresi: www.musa-cavus.com, E–posta: jquery@musa-cavus.com

8
Musa ÇAVUŞ

Önsöz
İlk kitabım olan “Kendinize Güvenerek Java” kitabından sonra “Farklı Ol Mal
Olma” adlı kişisel gelişim kitabımı yazdım ve dedim ki ülkemdeki insanlara
faydalı olabilmen için bir teknik kitabı daha yazmalısın ve bu seferki kitap hem
büyük bir açığı kapatmalı hemde çok yarar sağlamalı.

Türkiye’nin, Web dünyasında gün geçtikçe çok geliştiğini biliyoruz. Web
tasarımı alanında Türkçe kaynakların eksikliklerin olduğunu gördüm. Amerika
ve Avrupa’da şu an büyük siteler görsellikleri için güçlü kütüphaneler
kullanmaktadırlar. jQuery bu kütüphanelerin başında gelmektedir. Maalesef
jQuery alanında Türkiye’de hiçbir Türkçe kaynak kitap mevcut değildir. Ben bu
kitabın bu açığı kapatacağını düşünüyorum.

Her kesimdeki insanın bu kitaptan faydalanması için yine Türkiye’de bir ilke
imza atarak Türkiye’deki ilk jQuery kitabını bedava dağıtmak istiyorum. Bunun
için kendi emeğimle İnternet ortamında kitabımı yaygınlaştırmaya karar
verdim. Sizlerden isteğim eğer kitabımı okuduysanız ve beğendiyseniz bir
dostunuza iletmeniz olacaktır. Ya da http://www.musa-cavus.com adresinden
kitabımı indirme tavsiyesinde bulunmanızdır. Kitabı bedava dağıtmam, kitabın
basit konulara değinmesi anlamını taşımamaktadır. jQuery dilini iyi
öğrenmeninde temelinde JavaScript dilini iyi bilmeniz yatar. Bunun için kitapta
öncelikle JavaScript konusuna ağırlık verdim. Daha sonra AJAX konusuna
değindim ve son olarak jQuery konusuna geçiş yaptım. JavaScript’in bu kitapta
ne işi var canım demeyin, çünkü JavaScript jQuery ile et ve tırnak gibi ayrılmaz
iki parçadır.

Eğer ilk kitabım olan “Kendinize Güvenerek Java” kitabımı okudysanız benim
anlatım tarzımı az çok biliyorsunuzdur. Genelde kitabımda gereksiz anlatımlara
değinmiyorum, çünkü gereksiz bilgilerle beyin hücrelerinizi boşu boşuna
meşgul etmek boşa vakit kaybıdır. Daha çok örnekler eşliğinde konuları
anlatıyorum ve bir konuda daha önce anlatmadığım konulara değinmiyorum. O
yüzden size tavsiyem, kitabı baştan sona doğru okumanız ve uygulamanız
olacaktır. Bazen kitaptaki örnekler uzun gelebilir, fakat sizde göreceksiniz ki
örneklerin uzun olmasına rağmen bir zorluk çekmeyeceksiniz, çünkü örnekleri
hem basit tuttum hemde daha önce anlattığım bölümleri koydum.

Musa ÇAVUŞ - 2010

10
Musa ÇAVUŞ

Bölüm 1
JavaScript’e giriş

11
Musa ÇAVUŞ

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

Fazla lafı uzatmadan ve gereksiz yazılarla sizi meşgul etmeden hemen ilk
örneğimiz olan JavaScript kullanmadan basit bir HTML örneğine geçiyorum.:

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

Editör olarak herhangi basit bir metin editörü kullanabilirsiniz. Windows
altındaki Notepad çok basit bir editördür fakat sizin ilk aşamada tüm
değişiklikleri kendiniz kodlayacağınızdan JavaScript’i daha verimli
öğrenebileceksiniz. Ben biraz daha kolaylık ve renklilik olsun diye Opensource
olan Notepad++ editörünü kullanıyorum.

Yukarıdaki kodu jsyok.html dosyasına kayıt edin ve fare ile çift tıkladığınızda
standart tarayıcınız açılacaktır ve şu yazıyı göreceksiniz.

Bu sayfada JavaScript kullanilmiyor.

Kitaptaki HTML kodlarını açıklamıyorum, çünkü sizin HTML bilgisine sahip
olduğunuzu varsayıyorum. Bundan sonraki örnekleri verirken, önce örneği
yazacağım ve ardından ekran çıktısını ekleyeceğim. Yukarıdaki örneği
JavaScript ile nasıl yapabiliriz?

JavaScript kullanabilmenin birkaç yolu vardır. Bunlardan ilki <script> </script>
arasına yazacağımız komutlarla olabilmektedir.

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

12
Musa ÇAVUŞ

Şekil1

Html kodunda <script> ile </script> tagları arasında alert() fonksiyonunu
kullandım. alert() fonksiyonunun özelliği, parametre olarak verdiğiniz metini
Şekil1’deki gibi ekranda göstermesidir. Sarı bir üçgen içerisinde bir ünlem,
yanında bizim alert() fonksiyonuna parametre olarak verdiğimiz metin, bir
“Tamam” düğmesi ve başlık olarak “[JavaScript Uygulaması] yazısı. Ben
uygulamalarımı çalıştırırken Firefox kullanıyorum. JavaScript öğrendikten
sonra, size tavsiyem, örneklerinizi birkaç tarayıcıdan geçirmek olsun, çünkü
JavaScript her tarayıcıya göre farklı sonuç verebilmektedir. Uygulamalarınızın
sonuçlarından emin olabilmek için birkaç tarayıcıdan geçirmelisiniz. Sizin
uygulamanızı, web sayfanızı ziyaret eden kişilerin ne tür bir tarayıcı
kullandığını önceden kestiremediğiniz için bunu yapmanız gerekmektedir.

JavaScript programlamasını bizler daha çok Đnternet ortamında kullanırız. Bu
yüzden Đnternet hakkındaki bilgilerimiz temel seviyede yeterlilik göstermelidir.
Đnternet sadece “World Wide Web” değildir, Mesela ftp’de Đnternet ortamında
kullanılan bir protokoldür ve www protokolünden çok daha önce kullanılmıştır.
Tarayıcınızın adres kısmına ftp://ftp.microsoft.com/ yazın ve arama tuşuna
basın. Ben bunu yaptığımda karşıma şu bilgiler çıktı:

13
Musa ÇAVUŞ

Şekil2

ftp gibi birçok Đnternet hizmetleri mevcuttur. Hepimizin kullandığı E-Mail.
Uzaktaki bilgisayarları kullanabilmek için kullandığımız telnet protokolü. ssh,
scp ve usenet gibi.Yalnız Đnternet ortamı www sayesinde bu popülaritesini
kazandı. Biz www özelliğini tarayıcımızda http protokolüyle kullanabiliriz.
Yine adres çubuğunda http://www.hotmail.com.tr girdiğimde şöyle bir görüntü
elde ediyoruz:

14
Musa ÇAVUŞ

Şekil3

Karıştırmamamız gereken nokta http ile html’dir. http Đnternet’te yayımlanan
web sayfalarına ulaşmak için gereken bir protokoldür. html ise web sayfalarının
içeriğini görebilmemiz sağlayan bir tarayıcı dilidir.

Şekil3’te çıkan görüntünün üzerine sağ fare ile tıkladığınızda ve çıkan popup
mönüsünden “Sayfa kaynağını göster” seçeneğini seçtiğinizde karşınıza
Şekil3’teki sayfanın HTML, CSS ve JavaScript kodu gelecektir.

15
Musa ÇAVUŞ

Şekil4

Günümüzdeki önemli web saylarını JavaScript olmadan düşünmek mümkün
değildir. Herkes bu yüzden tarayıcısında JavaScript özelliğini kullanmaktadır,
ama bazı kişiler buna rağmen JavaScript’lere izin vermek istememektedirler.Bu
kullanıcılar için şöyle bir kod eklentisi yapabilirsiniz:

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

<noscript> tagı JavaScript desteklemeyen tarayıcılarda taglar arası verilen
metini ekranda göstermektedir.

16
Musa ÇAVUŞ

<script> tagını kullanırken “language” parametresiyle hangi dili kullandığımızı
belirtebiliriz. <script> tagı bir HTML tagıdır, JavaScript tagı değildir. Bu
parametrede “VBScript” ya da JavaScript’in eski adı “LiveScript” yazabilir. Biz
örneklerimizde standart olan “JavaScript” terimini kullanacağız. Bu noktada
HTML kodu kullandığımız için, büyük küçük yazımı önemli değil, siz
“JavaScript” terimini istediğiniz gibi yazabilirsiniz.

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

language.html

language parametresinin kullanılmadığı durumlarda “type” parametresini
kullanarak mime-type’ını tanımlamamız gerekiyor. mime-type, dosya formatını
tanımlamaktadır. Uluslararası bir standarttır ve bu standart ile bir çok formatı
tanımlayabilirsiniz, mesela XML, HTML, grafik formatları gibi.

<html>
<body>
<script type="text/javascript">
</script>
</body>
</html>

mimetype.html

type parametresi, ana kategori ve alt kategori olarak iki bölümden oluşmaktadır.
Yukarıdaki kodda ana kategori text terimi olmakla beraber, alt kategori
javascript terimidir.

Web sayfaların %95’i language terimini parametre olarak kullanırlar. Daha
önceki örneklerde farkına vardıysanız, ne language ne de type parametresi
kullandım ve kodumuz çalıştı. O zaman ne diye bu kadar çene yoruyorum
dersiniz? Web sayfanızı XHTML kullanarak gerçekleştirmek istiyorsanız type
parametresini kullanmak zorundasınız. JavaScript versiyon farklılıklarını

17
Musa ÇAVUŞ

gözetmek istersenizde genelde language parametresini kullanmalısınız. Onun
dışında bu parametreleri kullanmadan web sayfaları oluşturabilirsiniz.

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

JavaScript’leri web sayfalarında kullanmak istiyorsanız bunları kütüphanelerde
saklamayı tavsiye ederim. Böylece projeler daha okunaklı olabilir ve bir
fonksiyona istediğiniz kadar kullanabilirsiniz. Yazdığınız kütüphaneyi HTML
içerisinde kullanmak istiyorsanız, <script> tagında “src” parametresini
kullanarak, kütüphane dosyasının yerini ve adını yazıyorsunuz.

<html>
<script language="JavaScript" src="benimFonksiyonlarim.js"></script>
<body>
hosgeldin();
</script>
</body>
</html>
kutuphaneKullanimi.html

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

benimFonksiyonlarim.js

18
Musa ÇAVUŞ

Şekil5

benimFonksiyonlarim.js dosyası ile kutuphaneKullanimi.html dosyası aynı
dizinde olduğundan, “src” parametresine sadece benimFonksiyonlarim.js
yazmak yeterlidir. Kütüphanede, örnekte olduğu gibi fonksiyonlar ya da
değişkenler kullanabilirsiniz. Fonksiyonlar ve değişkenler daha sonraki
konularda ele alınacaktır, şimdilik kütüphane kullanımı nasıl oluyor onu
bilmeniz yeterlidir. “src” bağlantısını gerçekleştirdikten sonra,
kutuphaneKullanimi.html dosyasında hosgeldin() fonksiyonunun adını yazarak
çağırabilirsiniz. Daha önce belirttiğim gibi bunun avantajı bir çok HTML
dosyasından bu bağlantıyı gerçekleştirerek, hosgeldin() fonksiyonunun
çağrılabilmenizdir.
Kullandığımız kütüphaneyi incelerseniz, özel bir yapıya sahip değildir.
Kullanmak istediğim fonksiyonu yazdım o kadar. Đcabında istediğim
değişkenleri de sırasıyla tanımlayabilirdim. Kafanıza göre takılabilirsiniz.

1.3 JavaScript versiyonları

19
Musa ÇAVUŞ

JavaScript, bir çok programlama dili gibi çeşitli versiyonlarla varlığını
göstermektedir. Geleneğe uyalım diye böyle bir şey olmamıştır. Her versiyonda
yeni teknolojileri bünyesinde barındırmaktadır. Eski tarayıcılar JavaScript’in
yeni versiyonlarını tanıyamadığı için, kullanılacak yeni teknolojileride
tanıyamayacaktır.

<script language="JavaScript1.5">
location.href="index15.html";
</script>
</script>
</script>
</script>
</script>
</script>
versiyon.html

“language” parametresiyle JavaScript’in versiyonunu belirtebiliyoruz.
location.href çağırısıyla web sayfasının hangi sayfaya iletileceğini söylüyoruz.
Diyelim ki bizim tarayıcımız JavaScript 1.3 versiyonunu destekliyor, o zaman
sayfa index13.html sayfasına iletilir ve tarayıcı index13.html dosyasını işleme
koyar.
Internet Explorer “JavaScript1.0” ifadesini tanımamaktadır. Aynı şekilde yeni
tarayıcılardan bazılarda “JavaScript1.4” ve “JavaScript1.5” ifadelerini
tanımamaktadır. Bu ifadeleri tanımadıkları için <script> tagında yazılan kod
parçası işleme sokulmamaktadır. Şu da bir gerçek eski tarayıcıları kullanan
kişilerin sayısı oldukça azdır ve emin olun ki bu oran %1 bile değildir. Aslında
bu konuyu koymayacaktım fakat sizi daha derin konulara girmeden önce basit
konularla ısındırmak istiyorum. Programcı olabilmek için her konuyu bilmenize

20
Musa ÇAVUŞ

gerek yoktur sadece ihtiyacınız olan konuları bilseniz yeterlidir. Sakin her
konuyu mutlaka bilmeliyim diye düşünmeyin, çünkü her şeyi bilemezsiniz fakat
nasıl yapıldığını bilebilirsiniz.

1.4 JavaScript desteği var mı?
JavaScript herkes tarafından kabul görmüş durumdadır, fakat yine de
kullanıcılardan bazıları JavaScript’i tarayıcısında engellemiş durumundadır.
Acaba bunu ortaya çıkartabilir misiniz? Cevap evettir.

<html>
<head>
<meta http-equiv="refresh" content="5;URL=jsyok.html">
</head>
location.href="jsdestekyok.html";
</script>
<body>
<a href="jsyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi tiklayin ve
JavaScript olmayan sayfaya yonlendirilin</a><br />
<a href="jsdestekyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi
tiklayin ve JavaScript olan sayfaya yonlendirilin</a>
</body>
</html>
Đlet.html

Bu sayfanın header kısmında bir meta tag vardır. http-equiv parametresi
sayfanın ne yapacağını söylüyor ve content kısmındaki 5 rakamı saniye
düzeyindeki zamanlamadır. Bir de URL ifadesindeki jsyok.html dosyası yer
almaktadır. Bunun anlamı, sayfaya gelen ziyaretçi 5 saniye sonra verilen adrese
iletilsin demektir. location.href = “jsdestekyok.html” ile ziyaretçinin tarayıcısı
JavaScript destekliyorsa “jsdestekyok.html” sayfasına git denilmektedir.
JavaScript sayfada yoksa 5 saniye sonra jsyok.html sayfasına iletim
gerçekleşecektir. Tarayıcılarda otomatik iletim engellenebildiği için bu
anlattıklarım çalışmaz. Bunun için ek olarak ziyaretçiye link şeklinde iki olanak
sunmalıyız. Kullanıcı bu durumda JavaScript desteği almak istiyorsa gerekli
linki tıklar ve JavaScript destekli sayfaya geçer. Đstemiyorsa JavaScript olmayan
sayfaya geçer.

21
Musa ÇAVUŞ

1.5 Güvenlik
Gerçekte JavaScript güvenlik sistemini delebilir. Bunlara bir kaç örnek verecek
olursam, Đnternet adresini gösteren linkleri gizlemek, girdiğiniz sayfada birden
bir sürü popup penceresinin açılması, istenilmeden web sayfasının kapanması,
ardı ardına açılan pencerelerle sisteminizin kilitlenmesi. Son yazdığıma aşağıda
bir örnek var, yalnız sisteminizi seviyorsanız ve tüm bilgilerinizi
yedeklediyseniz bu örneği deneyebilirsiniz, çünkü çok basit ve tehlikeli bir
yöntem.

<html>
<body>

<script>
while(true) open("","");
</script>
</body>
</html>
guvenlikacigi.txt

Đçinde yazanları ileriki bölümde ayrıntılı anlatacağım. Bu kodun yaptığı bir
döngü içerisinde sonsuza kadar pencere açmaktır.
JavaScript ile harddiskinizin istenilen bölümüne bilgi yazamazsınız ya da
istenilen bölümden çok kolay bilgileri okuyamazsınız. Eğer olumlu
kullanıldığında çok faydalı bir dildir. Tabi bu JavaScript’in hiç zarar vermez
anlamını taşımasın. JavaScript’i ufak görmeyin, kitabın diğer bölümlerinde
jQuery kütüphanesi anlatılacaktır. JavaScript, jQuery’nin temelini
oluşturmaktadır. jQuery ile de acayip sayfalar programlayabilmektesiniz.
Acayip diyorum, çünkü gerçekten acayip sayfalar oluşturabildiğinize kendiniz
bile inanamayacaksınız.

22
Musa ÇAVUŞ

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

23
Musa ÇAVUŞ

XHTML, HTML, XML ve CSS hakkında temel bilgiler vermek istiyorum,
çünkü kitaptaki konular derin olmasa bile ara sıra bu teknolojilerle beraber
çalışmaktadır. Bunun sebebi, günümüz web sayfalarında bu teknolojilerin
genelde beraber kullanılmasında yatmaktadır.
Ayrıca diğer bölümlerde bu teknolojilerin kullanıldığı yerlerde burada
anlattığımın dışında komutlar kullanırsam onları da o bölümlerde anlatacağım.
Böylece kitabın bu bölümünde bu konularla fazla vakit harcamamış oluruz.

2.1 HTML
Modern web sayfaları HTML teknolojisini sadece yapısal anlamda
kullanmaktadırlar. Yani gereken komutlar kullanılıyor ve görsel kısım CSS
teknolojisiyle düzenleniyor. JavaScript komutlarıylada programlama kısmı
gerçekleştiriliyor. Bu yüzden HTML ile kullanacağımız az sayıda önemli
komutlar kalmaktadır. Bunlarda yapısal komutlardır. Tabi aranızda HTML
dilini su gibi içmek isteyen varsa, piyasada bu konuda oldukça çok kitap var.
Ben diyorum ki gerek yok, alem uzaya çıkıyor siz hala tekeri yeniden mi
keşfetme peşindesiniz?

<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
</body>
</html>
yapi.html

24
Musa ÇAVUŞ

Şekil6

HTML sayfasındaki tüm içerik <html> tagın içine konmaktadır. <html> tagı
HTML sayfasının kök tagıdır. Ondan sonra <head> tagı gelmektedır. <head>
tagında HTML sayfasının baş kısmı yer alır. Gördüğünüz gibi <title> tagı da bu
kısımda yer almaktadır. <title> tagı ile tarayıcınızın başlığını
belirtebiliyorsunuz. Sekme özelliği gösteren tarayıcılarda da sekmedeki metni
de buradan değiştirebiliyorsunuz. <body> kısmında HTML sayfasındaki görsel
kısım yer almaktadır. <html>, <head>, <title>, <body> tagları HTML
sayfasının temel yapısıdır. Bunların yanı sıra doküman tipini belirten bir üst
yazı vardır. Onu burada vermek istemiyorum, çünkü başlangıç seviyedeki
kişiler için kafa karıştırıcı bir bilgidir. Tarayıcılar, doküman tipini belirten
yazıyı yazmasanız, tolerans uygulayarak, bunu bir hata olarak
görmeyeceklerdir. Zaten bu yüzden bunu bilmesek olur. Önemli gördüğüm
tagları, örnekler eşliğinde kısaca ve derine inmeden anlatacağım ki fazla
kafanızı karıştırmak istemiyorum.

Başlıklar

25
Musa ÇAVUŞ

HTML sayfalarında yazıların üzerine başlık atabilmeniz için 6 büyüklükte
başlık tagı mevcuttur. Bunlar, <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>
taglarıdır. <h1> en büyük başlıktır. <h6> ise en küçük başlıktır.

<html>
<head>
<title>
</title>
</head>
<body>
<h1>Baslik</h1>
<h2>Baslik</h2>
<h3>Baslik</h3>
<h4>Baslik</h4>
<h5>Baslik</h5>
<h6>Baslik</h6>
</body>
</html>
baslik.html

26
Musa ÇAVUŞ

Şekil7

Paragraf
Bir Paragraf başı yapmak istiyorsanız <p> tagını kullanabilirsiniz. <p> tagının
bittiğini göstermek için </p> tagını isteğe bağlı kullanabilirsiniz, mecburiyet
yoktur.

<html>
<head>
<title>
</title>
</head>
<body>
<h3>Baslik</h3>

27
Musa ÇAVUŞ

<p>Burada Paragraf basliyor
<p>Burada bir Paragraf daha basliyor
<p>Bende bir Paragraf basiyim
</body>
</html>
paragraf.html

Şekil8

Satır başı
Metinlerinizi bitirdikten sonra yeni bir satıra geçmek istiyorsanız <br> tagını
kullanabilirsiniz. Paragraftan farklı olarak <br> tagını istediğiniz yere
koyabilme özelliği taşımasıdır. <br> tagı metininizi, satır atlamadan ikinci satıra
geçirmektedir. Diyelim ki Windows’daki Notepad programını kullanıyorsunuz.
Bir alt satıra geçebilmek için ne yapıyorsunuz? Enter tuşuna basıyorsunuz.
HTML’yi geliştiren gençlerde bu işleme <br> demişler.

<html>
<head>

28
Musa ÇAVUŞ

<title>
</title>
</head>
<body>
Satir Basi<br>
<br>Bugun hava cok guzel<br>
Nasilsin?
</body>
</html>
satirbasi.html

Şekil9

Listeler
Metinlerinizi gruplayarak göstermenin yolu listeleri kullanmaktan geçer. <li>
tagı ile bir listedeki girdiyi tanımlarsınız ve </li> bu girdiyi bitirmiş olursunuz.
<li> tagından önce kullanacağınız tag listenin şeklini gösterir. <ul> tagı listenizi
siyah noktalı bir liste yapar. <ol> tagı ise listenizi sayısal bir liste yapar. Liste
içerisinde listede kullanabilirsiniz. Bunun için <li> tagından sonra <ol> ya da

29
Musa ÇAVUŞ

<ul> kullanabilirsiniz. Liste şekli olarak sadece <ul> ve <ol> yoktur, fakat
bizim için bu tagları bilmek yeterlidir.

<html>
<head>
<title>
</title>
</head>
<body>
<ul>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ul>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
<ul>
<li>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
</li>
<li>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
</li>
</ul>
</body>

30
Musa ÇAVUŞ

</html>
listeler.html

Şekil9

Tablolar
HTML’de tablolar başlı başına bir konudur, fakat burada da bu konuya
ihtiyacımız olduğu ve kafa karıştırmayacak kadar değineceğim.
Bir tabloyu <table> tagı ile tanımlayabilirsiniz. Tablodaki her satır için <tr>
tagını ve her sütün içinde <td> tagını kullanıyoruz.

<html>

31
Musa ÇAVUŞ

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

Şekil10

32
Musa ÇAVUŞ

Đlk <tr> taglı bölüme bakarsanız, üç tane <td> tagı kullandım. Tablonun ilk
satırında üç tane sütun oluşturmuş oldum. Đkinci satır içinde üç sütun
oluşturmak istediğim için, aynı şekilde üç tane <td> tagı kullandım. Sütunları
</td> ile satırları ise </tr> ile kapatmalıyız. Son olarak tablonun bittiğini
gösteren </table> tagını kullandım. Örnekteki border parametresi tablonun
çerçeve kalınlığını göstermektedir. Ben 1 değerini verdim ki satır ve sütunları
görsel olarak ayırt edebilelim.

div ve span
HTML’de bilmemiz gereken en önemli taglardır, çünkü CSS teknolojisi ile çok
kullanıyoruz. <div> tagı ile HTML dokümanını bölümlere ayırabiliyoruz.
<span> tagıylada metin bölümlerini ayırabiliyoruz Daha sonraki bölümlerde,
özellikle CSS konusunda <div> ve <span> taglarıyla daha detaylı bir anlatım
yapacağım.

<html>
<head>
<title>
</title>
</head>
<body>
<div style="background:red;height:100px;width:200px;"></div>
Selam <span style="color:green">Ne Haber</span>
</body>
</html>
divspan.html

33
Musa ÇAVUŞ

Şekil11

<div> tagı kullanarak kırmızı bölümü bir blok olarak HTML sayfasında
ayırdım. <div> tagında style parametresini kullanarak bu bloğu boyadım,
yüksekliğini ve genişliğini verdim. Bunu CSS bölümüne değindiğimde daha iyi
anlayacaksınız.
<span> tagında da style parametresini kullanarak içerisinde bulunan kelimenin
yeşil renk olmasını sağladım.

HTML için bilmeniz gereken bu kadar. Sizi fazla sıkmadan hayatta
kullanabileceğiniz en önemli tagları anlattım. Gerçekten diğer tagları bilmenize
gerek yok. Beyninize giden oksijeni gereksiz bilgilerle doldurmayın.

2.2. XHTML

Web ortamında XHTML uzundur varlık göstermesine rağmen, web sayfalarının
çoğu HTML dilini kullanmaktadırlar. Bunun nedeni HTML, hataları tolerans
göstermesinden kaynaklanmaktadır. Aşağıdaki ilk örnek basit bir HTML
sayfasının kodudur, ikinci örnekse aynı kodu XHTML ile nasıl kodlandığını
göstermektedir.

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

34
Musa ÇAVUŞ

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

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

Şekil12

35
Musa ÇAVUŞ

htmlsayfa.html ve xhtmlsayfa.html dosyalarına tıkladığınızda Şekil12’deki aynı
görüntüyü görürsünüz. htmlsayfa.html dosyasına baktığımızda en üstte
“<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
“ yazısını görüyoruz. Bu HTML 4.01 standartlarına göre doküman tipini
belirtmektedir. Şimdiye kadar böyle bir tanımlama kullanmamamıza rağmen
nasıl oldu da yazdığımız kodlarla HTML sayfalarımızı çalıştırabildik? HTML
bu gibi hatalara tolerans göstermektedir. Yine xhtmlsayfa.xhtml dosyasının en
üstünde buna benzer bir tanımlama görüyoruz. XHTML’de bu tanımlamayı
yapmaya mecburuz. Üstelik HTML tanımlamasına göre de biraz daha uzun. Đki
dosya arasındaki ikinci farklılık <html> tagındaki farklılıktır. XHTML’deki
<html> tagına xmlns parametresi eklenmiştir. Bu parametreyi, XHTML
kullanırken mecburen tanımlamak zorundayız. Kopyalama metoduyla ya da
farklı araçlarla bu satır otomatik olarak eklenebilir. XHTML’de mecburi olarak
<head> ile tanımlanmış bir başlık kısmı ve <body> ile tanımlanmış bir gövde
alanı olması gerekmektedir. Biz bunlara head ve body alanı diyoruz. Pencerenin
başlık kısmı olan <title> bile mecburi olarak tanımlanması gerekiyor.
HTML dosyasında bu gibi mecburiyetler yoktur. <html> tagının altına
bile metinler yazabilirsiniz ya da <title> bölümünü boş bırakabilirsiniz. HTML
bunların hepsine tolerans gösterecektir. XHTML’de ise bu gibi hatalara yer
verilmemektedir.

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

36
Musa ÇAVUŞ

Şekil13

XHTML’de </html> tagından sonra “alo” yazdım ve XHTML buna tolerans
göstermeyerek Şekil13’de gördüğünüz gibi bir hata mesajı iletti.
XHTML’lerde parametre atamalarında da dikkat etmelisiniz. Tüm atamaları ""
işaretleri arasına yapmanız gerekiyor. HTML’de böyle bir kısıtlamada yoktur.
Dikkat etmeniz gereken bir başka nokta, XHTML’de büyüklük küçüklük
yazmaları. Örneğin <H1>Baslik</H1> gibi bir kodlama XHTML’inizin hata
vermesine sebep verecektir.
XHTML’de tüm taglar kapatılması gerekiyor. HTML’de <br> çok
kullanılır, bunu XHTML’de <br /> ya da <br> </br> şeklinde tanımlamalısınız.
Görüldüğü gibi XHTML hiç bir noktada tolerans göstermemektedir. Bu da
XHTML’in web dünyasında fazla tercih edilmemesini doğurmuştur.

2.3. Hatasız web sayfası

Hatalardan sonra web sayfamızın hatasız olduğunu nasıl anlarız diye bir soru
gelebilir. Bunun için W3C yani HTML standartlarını belirleyen kurum bizim
için bir sayfa geliştirdi. Sayfaya http://validator.w3.org adresinden
ulaşabilirsiniz.

37
Musa ÇAVUŞ

Şekil14

Address seçeneğine www.google.com yazarsanız ve Check düğmesine
basarsanız şöyle bir ekran çıktısı alırsınız:

38
Musa ÇAVUŞ

Şekil15

Şimdi diyebilirsiniz, google gibi dünyaca ün salmış bir firma nasıl olurda
sayfasında 37 hata yapmış olabilir? Hemen sevinmeyin google amcanın hatasını
bulan ilk insanım diye. Oraya başka adresleri yazsanız hatalar olduğunu
göreceksinizdir. W3C standartlarının o kadar önemli olmadığını buradan
görebilirsiniz.
http://validator.w3.org adresinde sisteminizde bulunan dosyaları da
upload ederek kontrol ettirebilirsiniz. Yalnız bunun için Firefox eklentisi daha
kullanışlıdır. Yapmanız gereken Web Developer’i Firefox ortamına yüklemek
olacaktır. Firefox’unuzu açın ve Mönü kısmından Araçlar, daha sonra da
Eklentileri tıklayın.

39
Musa ÇAVUŞ

Şekil16

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

Şekil17

40
Musa ÇAVUŞ

Kurulum bittikten sonra Firefox yeniden başlatılacaktır. Araçlar->Web
Geliştirici-> Çeşitli-> HTML denetle sekmesini tıkladığınızda sayfanız W3C
sayfasına yönlendirilecektir ve bir denetleme yapılacaktır.

Şekil18

2.4. Web sayfalarında Style Sheet kullanımı

HTML’in durağan sayfalarına canlılık katabilmek için Style Sheet teknolojini
çok kolay sayfalarımıza entegre ederek kullanabiliriz. Style Sheet teknolojisinin
en büyük avantajı JavaScript gibi doğrudan HTML sayfasına kodlanabilmesidir.
Yapılması gereken çok basittir, <style type=”text/css”> tanımlaması
yaptığımızda Style Sheet teknolojisini kullanabiliriz. Başka bir metot ise
aşağıdaki gibidir:

html>
<head>
<title>CSS-Dosyasi</title>
<link href="benimcss.css" type="text/css" rel="stylesheet">
</head>

41
Musa ÇAVUŞ

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

Style Sheet’leri başka bir dosyada sakladığınızda o dosyanın adını “link” tagını
kullanarak “href” parametresinde tanımlayabilirsiniz. “type “ ve “rel”
taglarınıda yukarıdaki örnekteki gibi tanımlarsanız benimcss.css dosyasını
HTML sayfanızda kullanabilirsiniz. Şu an böyle bir dosyamız olmadığı için
ekran görüntüsü Style Sheet olmadan durağan bir görüntü verecektir.

Şekil19

Style Sheet kullanarak bu sayfayı canlandırmayı diğer bölümde anlatacağım.
Style Sheet teknolojisinin birde üçüncü kullanım şekli vardır. Bunu daha önceki
örneklerimizde kullanmıştım. Kullandığımız HTML tagında “style” parametresi
ile Style Sheet teknolojisini kullanabiliriz.

42
Musa ÇAVUŞ

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

Şekil20

Gördüğünüz gibi “style” parametresinde Style Sheet dilini kullandım ve
tarayıcının arka planının yeşil göstermesini sağladım. Bu tür kullanımlar çok
basittir fakat tavsiye edilmiyor, çünkü CSS kullanımdaki avantajları
kullanmamış oluyorsunuz. CSS’teki en büyük avantaj HTML yapısını ve
görselliği ayırmasıdır. Bunu bir sonraki bölümde daha iyi anlayacağız.

2.5. CSS

43
Musa ÇAVUŞ

CSS (Cascadıng Style Sheets) web tasarımcıların işini çok kolaylaştırmaktadır.
JavaScript ile CSS’i kombine ettiğinizde büyük avantajlar elde etmiş olursunuz.
CSS ile web sayfasındaki görünümler genelleştiriliyor. Bunu yapabilmeniz için
CSS’i anlamanız gerekiyor. Ben burada CSS konusuna kısa değinmek
istiyorum, çünkü kitabımızın konusu CSS değil fakat JavaScript ile kullanımını
gösterebilmek için CSS’e kısa bir giriş mutlaka yapılması gerekmektedir.
Alışılmışın dışında biraz geniş bir açıklama yapmak istiyorum. Lütfen iyi
okuyun ve doğru uygulayın, çünkü bu bölümde verilen bilgiler önemlidir. En
azından CSS nasıl çalışıyor onu bilseniz bile diğer bölümlere geçebilirsiniz.

<html>
<head>
<title>CSS</title>
</head>
<style type="text/css">
<!--
h1, h4 {
background : pink;
}
h1.a {
color : purple;
}
.b {
font-size : 49px;
visibility : hidden;
}
#b {
background : #aa1611;
}
*{
background : #a06611;
}
a:hover{
background : #007011;
}
a{
color : #ffffff;
text-decoration : none;

44
Musa ÇAVUŞ

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

Şekil21

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

45
Musa ÇAVUŞ

kitaptaki CSS ile JavaScript örneklerini anlamış olursunuz. CSS’te mantık çok
basittir, önce değiştirmek istediğimiz alanı belirtiriz, sonra “{}” parantezleri
içerisinde bu alanlarla ne yapmak istediğimizi tanımlarız. h1 ve h4 alanlarında
bir tanımlama yapabilmek için “h1, h4” yazarız. Bu kısma selektör deniliyor.
Örnekte h1 ve h4 alanlarının arka plan rengini değiştirmek istediğim için
“background” tanımlaması yaptım. Đki nokta üstü üste “background”
tanımlamasına iki nokta üst üsteden sonra yazdığım değeri atamaktadır. Noktalı
virgülle bir tanımlamayı bitirmiş oluyoruz. Lütfen eşittir işareti yerine iki nokta
üst üste kullanıldığına dikkat edin. Bazı tarayıcılar eşittir işaretini kabul ettikleri
için bu hataya düşebilirsiniz ve eşittir işaretini kabul etmeyen bir tarayıcı ile
karşı karşıya kaldığınızda hatanın nereden kaynaklandığını bulamayabilirsiniz.
Selektör tanımlamalarının içerisinde kullanılan tanımlamalar aslında kendini
açıklayıcı bir nitelik taşımaktadır. Örnekte kullandığım, “font.size”,
Đngilizceden tercüme edersek yazı tipi büyüklüğü anlamına gelir. “visibility”
görünürlük manasını taşır. “color” renk demektir. Bu anlamlar doğrultusunda da
sayfamızda değişiklikler olmaktadır.
“h1.a” değişken selektörüdür. HTML kodunda “<h1 class=”a”...” olarak
tanımlanan bölgeye bu değişken selektörü hükmetmektedir. “h1” HTML
tagında “class” parametresini kullanarak “h1.a” değişken selektöründeki
tanımlamaların burada uygulanmasını bu şekilde sağlamış olduk. “.b” gibi
selektörler “class” parametresinin değeri “b” olan tüm HTML tagları işlem
görür. Bizim örneğimizdeki <span> ve <i> tagında olduğu gibi. Başka bir
selektör şeklide “#” ile başlayan selektörlerdir. Bu selektörler, HTML taglarında
“id” parametresi kullanılan taglarla işlem görmektedirler. “*” selektörü HTML
taglarında kısıtlama getirilmiyorsa hepsi için geçerlidir. Çok ilginç bir
selektörde “a:hover” selektörüdür. Fare ile çıkan web sayfasında “Tıkla”
kelimesinin üzerine geldiğinizde renginin yeşil olduğunu göreceksinizdir. Ek bir
programlama yapmadan ve sadece CSS tanımlaması kullanarak bu özelliği web
sayfanıza katabiliyorsunuz.
Firefox’unuza kurduğunuz Web Geliştiricisindeki CSS’le ilgili yardımınıza
koşacak bir çok özellik vardır. Benim tavsiyem bunları tıklayarak bir bakış açısı
elde etmenizdir. Araçlar->Web Geliştirici->CSS Hata yok->CSS’yi Düzenle
seçeneğini seçtiğinizde, canlı olarak yaptığınız tüm değişiklikleri sayfanızda
görebiliyorsunuz.

46
Musa ÇAVUŞ

Şekil21

2.6. XML

Web sayfaları için XML öğrenmenin ne anlamı olduğunu düşünebilirsiniz.
Birincisi XHTML kullanıyorsanız, XML hakkında bilgi sahibi olmalısınız.
XHTML için XML öğrenmek gerekiyorsa XHTML kullanmam olur biter
diyebilirsiniz. Fakat web sayfalarını programlarken orada şurada XML ile ilgili
mutlaka bağlantıya geçeceğiz, çünkü sistemler aralarındaki iletişimi XML ile
gerçekleştiriyorlar. Bunun için XML temellerini bilmemiz gerekmektedir. Basit
bir XML örneği verecek olursak şu şekildedir:

<?xml version="1.0" encoding="UTF-8"?>
<websayfasi>
<sayfa>
<baslik>Musa Cavus</baslik>
<url>http://www.musa-cavus.com</url>
<aciklama>Kisisel Sayfa</aciklama>
</sayfa>
<sayfa>
<baslik>Google Amca</baslik>
<url>http://www.google.com</url>
<aciklama>Googlenin Ingilizce sayfasi</aciklama>

47
Musa ÇAVUŞ

</sayfa>
</websayfasi>

websayfasi.xml

Bu dosyayı Firefox ile açmaya çalışırsanız şöyle bir görüntü elde edersiniz:

Şekil22

XML’de, XHTML’de olduğu gibi kurallara uymak vardır, tolerans yoktur.
Kurallara uyulmazsa dokümanınız XML dokümanı olmaktan çıkar. XML
dokümanının XHTML’den farkı tagların daha önceden belli olmamasıdır. XML
dokümanında taglarda istediğiniz kelimeyi kullanabilirsiniz. websafaysi.xml
dokümanını size farklı bir şekilde göstermek istiyorum. Bunun için
Firefox’unuza ilk önce DOM Inspector Plugin’ini kurmalısınız. Firefox’unuza
daha önce Web Developer’i eklemiştik ve görsel olarak nasıl eklendiğini
göstermiştim. DOM Inspector’uda aynı şekilde arattırın ve Firefox
uygulamanıza kurun. Kurma işlemi bittikten sonra Araçlardan “Dom Inspector”
sekmesini tıklayın.

48
Musa ÇAVUŞ

Şekil23

DOM Inspector ile XML dokümanını incelediğimizde, bu yapının bir ağaca
benzediğini görürüz. Kök, düğümler ve yapraklar vardır. Düğümlere XML
dilinde “node” deniliyor. JavaScript içerisinde “node” objesini sıklıkla
kullanacağız.
XML dokümanı Firefox ile normal açtığımızda ağaç yapısını gördük.
Bunu Firefox bize bir metin satırı olarak iletmişti. XML dokümanına stil
bağlarsak HTML sayfası olarak görebiliriz. Bu stillerden birisi CSS
teknolojisidir.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="websayfasi.css" type="text/css" ?>
<websayfasi>
<sayfa>
<baslik>Musa Cavus</baslik>
<url>http://www.musa-cavus.com</url>
<aciklama>Kisisel Sayfa</aciklama>
</sayfa>
<sayfa>
<baslik>Google Amca</baslik>

49
Musa ÇAVUŞ

<url>http://www.google.com</url>
<aciklama>Googlenin Ingilizce sayfasi</aciklama>
</sayfa>
</websayfasi>
websayfasi1.xml

XML dokümanına bir CSS dosyasını bağlamak çok kolaydır. Yukarıda “<?xml-
stylesheet” ile başlayan satırda “href” parametresine CSS dosyasını
belirtiyorsunuz, o kadar. Ben örnek bir CSS dosyası tanımladım:

*{
background-color: #11ff55;
}
sayfa {
display: block;
width: 300px;
height: 180px;
background-color: rgb(55, 215, 151);
font-size: 17px;
text-align: center;
display: block;
}
baslik {
display: block;
color: blue;
}
aciklama {
display: block;
}
websayfasi.css

Doküman XML olduğu için etkilemek istediğiniz tagıın adını selektör kısmına
yazmanız yeterlidir. Mesela “sayfa” tagının ekrandaki görünümü için selektör
olarak “sayfa” yazdım ve “{}” parantezlerinin arasına o bölüm ile ilgili görsel
tanımlamaları verdim. Tanımlamaları açıklamıyorum, çünkü CSS ile ilgili
tanımlamalar, fakat isimlerinden ne işe yaradığını anlayabilirsiniz.

50
Musa ÇAVUŞ

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

Şekil24

Bu sayfayı bir de DOM Inspector ile incelemek istiyorum. DOM, HTML
dokümanındaki ağaç yapısına verilen addır. DOM ağacıda diyebilirsiniz.

51
Musa ÇAVUŞ

Şekil24

Bir öncekinden farkı üst tarafında “xml-stylesheet” yazması gibi gelebilir fakat
öyle değildir. “Document” yazan yazının yanındaki şekle tıklayın ve oradan
“Stylesheet” sekmesini seçin. Sağ tarafta CSS dokümanında kullandığınız
kuralları göreceksiniz. Sağ taraftan “sayfa” seçeneğini seçerseniz şu görüntüyü
elde edersiniz:

52
Musa ÇAVUŞ

Şekil25

Analizler için DOM Inspector biçilmiş kaftandır. Örneğin “background-color”
seçeneğine çift tıklayın ve “Edit Style Rule” penceresine “rgb(99, 215, 15)”
değerini girin. Göreceksiniz ki “Tamam” düğmesine basar basmaz tarayıcınız
yeni değerlere göre websafaysi1.xml dokümanını gösterecektir.

53
Musa ÇAVUŞ

Bölüm 3
JavaScript Kullanımı

54
Musa ÇAVUŞ

3.1 Değişkenler

Değişkenler, ana hafızada programın çalışma esnasında değerleri saklayan
alanlardır. Saklanan alanlara, değerleri, eşittir işareti ile atayabiliyoruz.
Değerleri de daha önce tanımladığımız değişken ismiyle çağırabiliyoruz.
JavaScript programcısı veri tipiyle ilgilenmez, çünkü JavaScript bu işlemi
otomatik yapmaktadır. Bunun avantajı olduğu gibi çok büyük dezavantajı da
vardır.

<html>
<body>
benimDegiskenim = 21;
alert(benimDegiskenim);
benimdegiskenim = 213;
alert(benimDegiskenim);
</script>
</body>
</html>
veritipidezavantaj.html

Şekil26

veritipidezavantaj.html dosyasını çift tıkladığınızda ekrana iki defa 21 sayısının
geldiğini göreceksiniz. benimDegiskenim değişkenine 21 atadık sonra alert()
fonksiyonuyla bu değişkeni parametre olarak verdik. Daha sonra
benimdegiskenim değişkenine 213 atadık ve alert() fonksiyonuyla
benimDegiskenim değişkenini parametre olarak vermemize rağmen neden
ekranda ikinci defa 21 sayısı gözüktü dersiniz? Bunun nedeni JavaScript’in
büyüklük küçüklük yazımına dikkat etmesidir. Đkinci değişkeni tanımlarken “d”
harfini küçük yazdık. Tip tanımlaması yapmadığımız için yazım hatası

55
Musa ÇAVUŞ

gözümüzden kaçtı. Özellikle büyük JavaScript programlarında bu tür hataların
olma olasılığı çok yüksektir.
JavaScript’te satır kodlaması “;” yani noktalı virgül ile biter. alert()
fonksiyonu, parametre olarak verilen değeri ekranda Şekil26’da gördüğünüz bir
pencere stilinde gösterir.

var tanımlaması

<html>
<body>
degisken = 5.67;
alert(61 * degisken);
degisken = 234 /119;
a = "abc";
var b = true;
</script>
</body>
</html>
veritipleri.html

Şekil27

JavaScript’te değişkenlere istediğimiz değerleri atayabildiğimizi gördük.
Değişken atamalarında veritipleri.html örneğindeki gibi matematiksel işlemler
yaparak bunları gerçekleştirebiliriz. “var” tanımlamasına ne gerek var
denilebilir. “var” tanımlaması bir değişkenin değişken olduğunu tanımlar. “var”
kullanılmadan yapılan tüm değişken tanımlamaları JavaScript dünyasında genel
değişken olarak algılanır. Mesela fonksiyon içerisinde “var” sözcüğü
kullanılmadan yapılan bir tanımlama o değişkenin genel bir değişken olduğunu
gösterir. Başka programlama dillerinde bu böyle değildir, fonksiyon içerisinde
yapılan tanımlamalar sadece fonksiyon içerisinde kalmaktadır. “var”

56
Musa ÇAVUŞ

sözcüğüyle bunu değiştirebiliyoruz ve değişkenin sadece fonksiyona ait
olduğunu söylemiş oluyoruz.

3.2 Diziler (Arrays)

Diziler, JavaScript’te zor konular kategorisinde yer alır. Ben doğru anlatılırsa
zor olmayacağı inancındayım. Ayrıca diziler size büyük kolaylıklar
sağlamaktadır ve rutin olan işlemleri döngüler eşliğinde halledebilirsiniz. Dizi,
bir çok veri tipinin bir değişkende tutulması ve verilere bir indeks ile erişim
sağlanan mekanizmadır. Ufak bir kod ile dizileri anlatmaya başlamak istiyorum:

<html>
<body>
dizi = new Array();
document.write(dizi[0]);
dizi[0] = 5;
dizi[0] = "Kalem";
</script>
</body>
</html>
diziler1.html

Şekil28

57
Musa ÇAVUŞ

JavaScript’te bir değişken tanımlarken bir isim ve eşitlik işaretinin sağ tarafına
değerini yazarız. Dizilerde ise bu böyle değildir. Değişken adını yazdıktan sonra
eşitliğin sol tarafına “new Array()” yazarak bunun bir dizi olduğunu belirtmiş
oluruz. Anahtar kelime burada “new” kelimesidir. Array() ise bunun bir dizi
nesne olduğunu gösteriyor. Bu satırlar, Array tipinden yeni bir nesne oluştur
denilmek istenildi. Nesneleri daha sonra anlatacağım, o yüzden aman ben nesne
nedir bilmiyorum diye korkmayın. Hepsini öğreneceksiniz.
document.write() fonksiyonu tarayıcıya bir metin yazmak istediğinizde
kullanacağınız bir fonksiyondur. Parametre olarak verilen metin tarayıcıda
gösterilmektedir. dizi değişkenli dizimizi oluşturduktan sonra ben dizinin ilk
elemanına “5” değerini atadım. Bunu yaparken dizi değişkeninin hemen
ardından bir köşeli parantez açtım ve “0” yazarak köşeli parantezi kapattım.
JavaScript’te diziler sıfırdan başladıkları için ilk değeri sıfırıncı elemana
koyabiliyorsunuz. JavaScript’te bir değişkene istediğiniz tipte bir değer
atayabildiğiniz için daha sonraki satırlarda dizi dizisinin ilk elemanına “Kalem”
değerini atadım ve tarayıcının göstermesini sağladım.

Döngülere diğer konularda değineceğim fakat dizilerin bir avantajını
gösterebilmek için döngülerden yararlanmak istiyorum. Şimdilik sadece döngü
içerisinde dizinin nasıl kullandığını anlasanız yeterli olur.

<html>
<body>
a = new Array(10);
a[0] = 1;
a[1] = 2;

alert(a.length);
i = 0;
while(i < a.length) {
document.write(a[i] + "<br>");
i++;
}
</script>
</body>
</html>
diziler2.html

58
Musa ÇAVUŞ

Şekil29

Şekil30

“a” dizisininin boyutunu “new Array(10)” tanımlamasında parantez içerisine
“10” değerini yazarak onluk bir dizi olarak ayarlayabiliyorsunuz. Daha sonra
dizinin birinci elemanına “1” değerini atadım ve ikinci elemanına “2” değerini
atadım. length() fonksiyonu dizinin boyutunu sayısal olarak vermektedir. Bizim
örneğimizde bu değer 10’dur, çünkü dizinin boyutunu 10 olarak ayarlamıştık.
Ekrana alert() fonksiyonuyla önce dizinin boyutu olan 10 getirilmektedir.
Tarayıcı ise dizinin ilk iki değeri atandığı için atanan sayıları göstermektedir.
Dizinin diğer elemanlarına değer atanmadığı için “undefined” yazısı
gelmektedir. Yani tanımlı değil yazısı gelmiştir.
JavaScript kodunda “a[20]=10” gibi bir tanımlama yapsaydık dizinin
boyutu, ilk başta 10 olarak tanımlamamıza rağmen 21 olacaktı.

59
Musa ÇAVUŞ

<html>
<body>
a = new Array(10);
a[0] = 1;
a[1] = 2;
a[20] = 21;
alert(a.length);
i = 0;
while(i < a.length) {
document.write(a[i] + "<br>");
i++;
}
</script>
</body>
</html>
diziler3.html

Şekil31

60
Musa ÇAVUŞ

Şekil32

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

3.3 Operatörler

JavaScript dilinde diğer dillerde olduğu gibi operatörler mevcuttur. Ben bunları
bu bölümde yüzeysel olarak göstereceğim ve diğer konularda örnekler
derinleştikçe operatörleri kullanarak daha geniş açıklamalar yapacağım. Burada
sadece operatörlere değineceğim.

61
Musa ÇAVUŞ

Atama operatörü

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

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

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

<html>
<body>
abi = 34;
abla = 32;
ben = 25;
if (abi > 17) {
document.write("Abim araba surebilir");
document.write("<br>");
}

if (abi >= 18) {
document.write("Abim araba surebilir");
}

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

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

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

62
Musa ÇAVUŞ

</script>
</body>
</html>

operatorler1.html

Şekil33

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

63
Musa ÇAVUŞ

Bir de && ve || operatörleri çok kullanırız, fakat bunlarda if cümleciklerinde
anlatacağım. Diğer bazı operatörleri de örneklerde yeri geldiğince, ihtiyaca
göre değineceğim. Operatör tablosunu da fikir edinmeniz açısından ve ihtiyaç
duyulduğunda bakılması için aşağıda sunuyorum:

Operatör Açıklama
++, -- artırma, eksiltme
+, - toplama, çıkartma
~ bit tümleme
! logik tümleme
*, /, % çarpma, bölme, kalan
+ Metinleri birleştirme
<< sola kaydırma
>> sağa kaydırma
<, <=, >, >= nümerik eşitleme
= =, != eşitlik, eşit değil
& bit düzeyinde ve işlemi
^ bit düzeyinde xor
| Bit düzeyinde veya işlemi
&& logik ve işlemi
|| logik veya işlemi
= atama işlemi

Aritmetiksel operatörler

Sayısal değerler arasında hesaplamalar yapabilmek için aritmetiksel
operatörlere ihtiyaç duyarız. Toplama işlemi “+”, çarpma işlemi “*”, çıkarma
işlemi “-“, bölme işlemi “”, modül işlemi “%” işaretleriyle yapılmaktadır.
Ayrıca özel aritmetiksel operatörlerde kullanılabilinmektedir.

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

a = a * (3 + 5)

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

i++; i = i + 1 anlamına gelmektedir
j--; j = j – 1 anlamına gelmektedir

64
Musa ÇAVUŞ

Artırma ve eksiltme işlemlerinde çoğunlukla i ve j harfleri kullanılmaktadır.
Hangi nimete hikmet böyle yapılıyor, bunu bende bilmiyorum. “++” ve “--“
kullanılırken dikkat edilmesi gereken nokta, bu işaret kombinasyonunu
değişkenden önce mi sonra mı kullandığımızdır. Bu işaretleri değişkenden önce
kullanırsak, değişkendeki değer önce değişir ve değişken, o değer ile işlem
görür. Sonra kullanırsak tam tersi olur. Gördüklerimizin hepsini bir örnek ile
daha iyi pekişeceğinin kanısındayım.

<html>
<body>
i = 340;
j = 10;
document.write(++i);
document.write(++j);
document.write(i);
document.write(j);
document.write(i+j);
document.write(i---++j);
</script>
</body>
</html>

operatorler2.html

65
Musa ÇAVUŞ

Şekil34

Mantıksal Operatörler

Birden çok şartı tanımlanmış kalıplar doğrultusunda bağlamak istiyorsanız
bu operatörleri kullanmanız gerekmektedir. Örneğin 8 ve 11 ile bölünen sayıları
bulmak istedğimizde ya da birden fazla şartı birbirine bağlamak istediğimizd bu
operatörleri kullanırız. Java’da mantıksal operatörler olarak şunlar vardır: &
(Ve), | (Veya) , ^ (Xor), ! (Değil).
Xor: Đki tanımlamada true ya da i false ise bu işlem bize false sonucu verir.
Diğer durumlarda true değerini iletir.
Ve: Tanımlamalardan birisi false ise sonuç false olur. Diğer durumlarda
true.
Veya: Tanımlamalardan birisi true ise, sonuç true olur. Diğer durumlarda
false.
Değil: Tanımlamanın tersidir.
Ve ve Veya işlemlerinde derleyici birinci tanımlamayı göz önüne alır. Mesela
diyelim iki tanımlama var ve biz bunlarla bir Ve işlemi gerçekleştiriyoruz.
Şöyle ki: false & true. Açıklamamıza göre Ve işlemlerinde tanımlamalardan
birisi false ise sonuç false olacaktır.

<html>
<body>

document.write(true | false);

document.write(true & false);

document.write(!false);

document.write(true ^ false);

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

66
Musa ÇAVUŞ

</body>
</html>
operatorler3.html

Şekil35

true ve false işlemi Veya işlemine sokulunca sonuç true oluyor. true ve
false Ve işlemine sokulunca sonuç false oluyor. false değerinin değili true
olmuştur. true ve false Xor işleminden geçtiğinde şartımıza göre true sonucunu
vermektedir. 1 ile 3 sayılarını Veya işleminden geçirince neden 3 olmaktadır? 1
sayısı, 2 tabanlı sayı sistemine göre “01” şeklinde ifade edilir.3 sayısıda, “11”
şeklinde ifade edilir. 0 bilgisayar dilinde false, 1 ise true değerini alır. Böylece
1, sayısını “false true” şeklinde hayalımizde düşünecek olursak, 3 sayısını “true
true” olarak düşünebiliriz. 1 sayısındaki ilk değer olan false ile 3 sayısındaki ilk
değer olan true değerlerini Veya işleminden geçirdiğimizde true değerini
alacağız. Yine 1 sayısındaki true değeriyle, 3 sayısındaki ikinci değer olan true
değerini Veya işleminden geçirecek olursak sonuç true olacaktır. Yani 1 ile 3
sayısının Veya işleminden bize “true true” gibi bir ifade çıkacaktır. Bunun
sonucu “11” olacaktır. “11” olan ikilik sayı sayı sistemini 10 tabanındaki bir
sayı sistemine çevirecek olursak bize 3 rakamını verecektir. “|”, “&” ve “^“
işlemleri bit işlemleri olduğu için dikkat ettiyseniz true ve false işlemlerinde “1”
ya da “0” sonucu oluşmaktadır. “1” true “0” ise false demektir.

Nasıl mantık operatörlerini öğrenerek mantığınız alt üst oldu mu? Ve ve Veya
işlemi bilgisayar dünyasının temellerinden biridir. Yalnız şu da bir gerçek bit
işlemleri için ben şimdiye kadar hiç bir program yazmadım, sizde
yazmayacaksınız diye düşünüyorum. Peki niye anlatıyorum bunları, dedim ya
yeşillik olsun ve JavaScript’e ısınalım. Diyelim ki siz bir boksörsünüz ve

67
Musa ÇAVUŞ

ısınmadan dalıyorsunuz rakibinize, kaslarınızda mutlaka bir incinme meydana
gelecektir. Bende şimdi hemen dalsam derin konulara sizinde beyin
hücrelerinizde bir incinme meydana gelecek. Zaten farkına vardıysanız bir
konuyu fazla saçmalamıyorum, sadece gerektiği kadar anlatıyorum. Bana
güvenin.

3.4. Açıklamalar
JavaScript kodlarınızda iki şekilde açıklama yapabilirsiniz. Birincisi “//” işareti
kullanarak sadece o satırda geçerli olmak şartıyla yapabileceğiniz açıklamalar.
Açıklamaların ikinci şekli “/* */” aralığında yapılmaktadır. Bu açıklama türüyle
daha çok satırda açıklama yapabilirsiniz ve her satır için “//” işareti
tanımlamanız gerekmemektedir.

<html>
<body>

// Bu bir aciklamadir

/*
document.write(4);
*/

</script>
</body>
</html>
aciklama.html

3.5 if ve switch karar yapıları

Bu karar yapılarıyla programımızın akışını değiştirebiliriz. if, Türkçe olarak
“eğer” demektir. Programınızı kodlarken, programınıza “eğer şu olursa şunu
yap” gibi direktif vermek isteyebilirsiniz. JavaScript’te bunu yapabilmeniz için
“if” ya da “switch” karar yapılarını kullanabilirsiniz. Döngülerinde kendilerine
özgü karar yapıları vardır, fakat bunu döngülerde ele alacağım.if komutuyla
ilgili kolay bir örnekle başlamak istiyorum:

68
Musa ÇAVUŞ

<html>
<body>
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
}
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
}
if(a != 20) {
document.write("a degiskeni 20 sayisina esit degil");
}
</script>
</body>
</html>
if.html

Şekil36

69
Musa ÇAVUŞ

if yapısı çok basittir, öncelikle “if” yazıyoruz sonra bir parantez açıyoruz,
parantezin içerisine büyüklük, küçüklük veya eşitlik operatörü kullanılan bir
kıyaslama ifadesi yazarak parantezi kapatıyoruz. Kıyaslama doğruysa “{}”
arasında olan blok işlem görüyor, yanlış ise “{}” arasındaki blok işlem
görmüyor. if yapısından sonraki blok tek satırlık bir kod ise “{}” parantezlerini
koymaya gerek yok, birden fazla satırsa mutlaka “{}” parantezlerini
kullanmalıyız.
Örnek “a” değişkenine “9” değerini atadım. “10” sayısından küçük mü
büyük mü onu kontrol ettim. En sonunda da “20” sayısına eşit değil mi onu
kontrol ettim. Çoğunlukla if yapısı, else yapısıyla birleştirilir. “else” Türkçe
olarak “değilse” manasını taşımaktadır. “Eğer ….. yap, değilse ….. yap” gibi
düşünebilirsiniz. Daha da genişleterek, “Eğer ….. yap, değilse eğer ….. yap,
değilse …. yap” şeklinde de bir yapı genellikle kullanılmaktadır.

<html>
<body>
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
}else
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
}else {
document.write("a degiskeni 20 sayisina esit");
}
</script>
</body>
</html>
ifelse.html

70
Musa ÇAVUŞ

Şekil37
Birinci blokta “a” değişkeninin “10” sayısından küçüklüğünü kontrol ettim.
Đkinci blok, eğer birinci if karar yapısı işlem görmediyse “else if” yani “değilse
eğer” şeklinde işleme giriyor ve “a” değişkenini “10” sayısından büyüklüğünü
kontrol ediyor. Son blok ise, ilk iki blok işlem görmediyse “else” yani “bunların
hiçbiri doğru değilse” işleme giriyor.
Birden çok kıyaslama işlemini birleştirmek istersek yardımımıza “&&”
ve “||” işaretleri koşmaktadır.

<html>
<body>
a = 9;
if (a < 10 && a > 5) {
document.write("a degiskeni 10 sayisindan kucuk"+
" ve 5 sayisindan buyuk");
}

if (a > 10 || a < 20) {
document.write("a degiskeni 10 sayisindan buyuk"+
" ya da 20 sayisindan kucuk");
}
</script>
</body>
</html>
ifbirlestir.html

71
Musa ÇAVUŞ

Şekil38
“&&” işareti iki kıyaslamanın arasına “ve” bağlacı koymaktadır. “a” değişkeni
“10” sayısından küçükse “ve” “5” sayısından da büyükse bloktaki işlemi yap
denilmektedir. “||” işareti iki kıyaslama arasına “ya da” bağlacı koymaktadır.
“a” değişkeni “10” sayısından büyük “ya da” “20” sayısından küçükse sıradaki
blok işlem görmektedir. Bu şekilde birden fazla kıyaslamayı aynı if karar
yapısına dahil edebiliyorsunuz.
if karar yapısını mutlaka iyi anlayın, çünkü insan beynide buna göre
düşünmektedir ve karalarını vermektedir.

switch

“switch” işlemi,” if” işlemine bir alternatiftir. Bazı durumlarda “switch”
kullanmak daha kolaydır. Açık söylemek gerekirse ben şimdiye kadar hiç
kullanmadım, sadece kullanan kişilerin kodlarında değişiklik yapacağımda
kullandım.

<html>
<body>
a = 1;
switch (a) {
case 0 : document.write("0" + "<br>");
break;
break;
break;

72
Musa ÇAVUŞ

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

Şekil39

JavaScript, switch ile başlayan cümlelerde sırayla tüm case bloklarını
taramaktadır. Eğer uyan bir case bulursa, bu bloğun içerisindeki kodu break
ifadesini buluncaya kadar işleme sunmaktadır. break ifadesini kullanmazsak, bir
sonraki case bloğu otomatikman işlem görmektedir. Bir sonraki case ifadesinin
doğru ya da yanlış olması bu durumda hiç önemli değildir. switch işlemlerinin
if karar yapısına göre en büyük dezavantajı esnek olmamasıdır ve sadece tek bir
değeri kıyaslamasıdır. Mesela if karar yapısında bir değişken aralığını kontrol
edebilirken switch yapısında böyle bir olanağınız yoktur. 1 ile 100 arasındaki
tüm sayıların bir değişkenden küçük mü değil mi olduğunu kontrol edebilmek
için switch yapısında aralıkta bulunan tüm sayıları kod halinde teker teker
yazmalısınız.
JavaScript’te diğer programlama dillerinden farklı olarak switch karar
yapılarında dizgiler ya da başka bir tabirler String kullanabilirsiniz.

<html>
<body>
a = "Veli";
switch (a) {
case "Ali" : document.write("Ali" + "<br>");
break;
case "Veli" : document.write("Veli" + "<br>");
break;

73
Musa ÇAVUŞ

case "Selami" : document.write("Selami" + "<br>");
break;
case "Hayri" : document.write("Hayri" + "<br>");
break;
default: document.write("Isimsiz Kahraman" + "<br>");
}
</script>
</body>
</html>
switchdizgi.html

Şekil40

3.6 Döngüler

Bakın bu da çok önemli bir konudur. Döngüler belirli kodları tekrarlayarak
işleme sunarlar. Bir döngü, blok içeriği ve önermeden oluşur. Döngü önermesi,
döngünün ne kadar süreceğini belirtir.

while döngüsü

while döngüsüne girilmeden önce, döngü önermesi kontrol edilmektedir.
Eğer döngü önermesi doğru ise, döngü bloğu işlenmektedir, değilse döngü sona
erdirilmektedir. if önermelerinde olduğu gibi döngü önermesi true olmalıdır.

<html>
<body>
i = 0;
while(i < 10) {
document.write(i + "<br>");
i++;
}

74
Musa ÇAVUŞ

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

Şekil41

while döngüsünde, önermeyi while yazdıktan sonra parantez açıyoruz ve
parantezin içerisine kodluyoruz. Önerme true değerini alıncıya kadar döngü
dönüyor. Örnekte i değişkenine 0 değerini atadım ve while döngüsündeki
önermeye, i değişkeni 10 sayısından ufak mı önermesini kodladım. Ekrana i
değişkeni 10 sayısından ufak olduğu sürece i değişkeninin o anki değerini
yazdırttım.

do - while döngüsü
Bu döngüde ilginç olan, önermenin döngü sonunda kontrol edilmesinde
yatmaktadır. Bu yüzden döngü içerisindeki blok bir kere mutlaka işlem
görmektedir.

<html>
<body>
i = 50;
do {
document.write(i + "<br>");
i++;
}

75
Musa ÇAVUŞ

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

Şekil42

Döngünün sonunda önerme kontrol
edildiği için, döngü önermeye kadar devam etmiştir. Önerme ilk kontrolde false
çıktığı için döngüden çıkılmıştır. Dikkat edilmesi gereken önemli husus ise,
döngünün sonunda noktalı virgülü unutmamamız.

for döngüsü
while döngüsünün özelleştirilmiş halidir. Daha çok sayaçlı işlemlerde
kullanılmaktadır ve benim en çok kullandığım döngüdür.

<html>
<body>
for (i = 1; i <= 10; i++)
document.write("Sayi: " + i + "<br>");
</script>
</body>
</html>
for.html

76
Musa ÇAVUŞ

Şekil43
for döngüsünün ilk kısmında değişken tanımı yapılıyor ve değeri aktarılıyor.
Đkinci kısmında önerme belirtiyor. Üçüncü kısmında ise değişken bir artırılıyor.
Değişkeni artırma işlemi bloğun sonunda yapılmaktadır. Kısımlar noktalı
virgüllerle ayrılmaktadır. for döngülerin avantajları kendisini dizilerde
göstermektedir.

<html>
<body>
firma = new Array();
firma[0] = "Teneke Fabrikasi<br />";
firma[1] = "Kaporta sokaka 32<br />";
firma[2] = "42123 Konya<br />";
firma[3] = "Telefon: 0332393202322";
for(i = 0; i < firma.length; i++){
document.write(firma[i]);
}
</script>
</body>
</html>
fordizi.html

77
Musa ÇAVUŞ

Şekil44

length() fonksiyonuyla for döngüsünü dizinin uzunluğu kadar döndürüyorum ve
dizideki tüm bilgileri ekrana yazdırmış oluyorum.
Dizilerle çalışan for döngüleri için kolaylık olması açısında bir operatör vardır.
Bu operatör in operatörüdür.

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

78
Musa ÇAVUŞ

Şekil45

i değişkeninden sonra in operatörü kullanıyorsunuz ve ondan sonrada hangi
diziyi döngü içerisinde işleme sokacaksanız onu tanımlıyorsunuz. Bu kullanım
tarzı for döngüsü sadece dizilerle kullanılacaksa geçerlidir.

break ve continue
Herhangi bir döngü içerisinde break komutu kullanılırsa, program döngünün
o noktasından sonra çıkar ve döngüden sonraki koda geçer.

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

79
Musa ÇAVUŞ

Şekil46

Sonsuz bir döngünün bloğuna bir if cümleciği yazdım. Eğer i değişkeni
sıfır değerinden ufaksa break komutunun işlenmesini istedim.
Yine herhangi bir döngü içerisinde belirli bir noktadan sonraki kısmın
işlev görmesini istemiyorsak ve döngünün buna rağmen dönmesini istiyorsak
continue komutunu kullanırız.

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

80
Musa ÇAVUŞ

Şekil47

Bu döngüde ki değişkeni ikiye bölünmekte, eğer kalan 1 ise anlıyoruz ki bu
sayı tek bir sayıdır ve bu blokta continue komutu kullanıyoruz. Böylelikle
ekrana i değişkeninin çift bir sayı olduğu yazılmıyor.

3.7 Fonksiyonlar

Muhtemelen program parçanızda birkaç adımınız vardır ve bu adımları
birleştirerek bir isim altında toplamak isteyebilirsiniz. JavaScript’te de diğer
programlama dillerinde olduğu gibi bunun için fonksiyonlar vardır.
Aynı program parçalarını tekrar tekrar kodlamak yerine fonksiyonları
kullanmak daha avantajlıdır. Böylelikle fonksiyon içerisinde yapmak
istediğimiz değişiklik, fonksiyon çağrıldığı tüm bölümlerde etkinliğini
göstermiş olur.• Karmaşık programlamalar ufak parçalara bölünmüş olur ki
anlaşılması kolaylaşmış olur. Bir fonksiyon birden fazla bileşenden
oluşmaktadır. Fonksiyon başı ve fonksiyon bloğu ana bileşenlerdir. Fonksiyon,
fonksiyon başı, sonuç tipi, fonksiyon ismi ve parametre listesinden
oluşmaktadır. Basit bir örnekle fonksiyonlara giriş yapmak istiyorum:

<html>
<body>
function test() {
document.write("Selam ne haber");
}
test();
</script>
</body>
</html>
fonksiyon.html

81
Musa ÇAVUŞ

Şekil48

Kodlamanın bir fonksiyon olduğunu function anahtar kelimesiyle belirtiyoruz.
Daha sonra belirttiğimiz fonksiyona bir isim veriyoruz. Ben örnek
fonksiyonumuza test adını verdim. Şimdilik parametre kullanmadığım için
parantezi açtım ve hiçbir şey yazmadan kapattım. Ardından “{}” parantezini
kullandım. “{}” parantezleri arasına fonksiyonunuzun tüm kodunu
yazabilirsiniz. Son olarak test(); şeklinde yazdığım fonksiyonu çağırıyorum ve
tarayıcı fonksiyonun içindeki işlemi ekrana yansıtıyor. test(); çağrısını
kodunuzda istediğiniz kadar kullanabilirsiniz. Ne kadar çok kullanırsanız,
tarayıcınız o kadar çok “Selam” ne haber” mesajını gösterecektir.
Fonksiyonların en büyük avantajı karmaşık kod parçalarını tek bir isim altında
toplamasıdır.

Fonksiyonlarda parametre kullanımı

Fonksiyonlarımızda parametre kullanabiliriz. Parametreleri de fonksiyon
içerisinde işleve sokabiliriz.

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

82
Musa ÇAVUŞ

Şekil49

a ve b değişkenlerini topla() fonksiyonunda parametre olarak kullandım.
JavaScript’te fonksiyon parametreleri virgül ile ayrılıyor. a ve b değişkenlerini
topla() fonksiyonunda parantezler arasına yazdım ve topla() fonksiyonunu
çağırırken parametre olarak 5 ve 6 değerlerini verdim. Böylelikle a değişkeninin
değer 5 ve b değişkeninin değeri 6 olmuş oluyor. Fonksiyon içerisinde de 5 ve 6
değişkenini toplattım ve tarayıcıda gösterttim. a ve b değişkenlerini toplarken
parantez içerisinde topladım, çünkü parantez kullanmasaydım, write()
fonksiyonu bu iki değişkeni String olarak algılayacaktı ve 11 sayısı yerine 5 ve
6 sayısının yan yana gelmesinden oluşan 56 sayısını gösterecekti. Đsterseniz
parantezleri kaldırın ve örneğinizi tekrar çalıştırarak sonucu izleyin.

Farklı sayıda parametre kullanmak şartıyla aynı fonksiyon adını
kullanabilirsiniz.

<html>
<body>
function topla(a, b) {
document.write(a+" ve "+b+" sayisinin toplami :"+(a+b));
}

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

83
Musa ÇAVUŞ

Şekil50

c değişkeni ekleyerek aynı fonksiyon ismi adı altında bir fonksiyon tanımlaması
yapılabiliniyor.

Fonksiyonlarda parametrik olarak verilen değişkenler sadece o fonksiyon için
geçerlidirler. Genel değişkenler gibi her tarafta kullanılamazlar.

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

84
Musa ÇAVUŞ

Şekil51

Fonksiyondaki a değişkeni ile fonksiyon dışında kullanılan a değişkeni farklı
değişkenlerdir. Fonksiyon içerisinde kullanacağınız parametreler sadece
fonksiyon için geçerlidir. Fonksiyon içinde yapılan değişken değer değişimleri
fonksiyon dışında bir etkiye sahip değildir.

return

Bir fonksiyonun değeri return anahtar kelimesiyle iletilmektedir. Fonksiyon
içerisinde yaptığınız işlemlerin sonucunu return anahtar kelimesinden sonra
yazın ve noktalı virgül ile kapatın. Bu fonksiyonun değeri olmuş oluyor.
Fonksiyonun değerini, fonksiyon dışında kullanmak isterseniz, bir değişkene
fonksiyonu atamanız yeterlidir.

<html>
<body>
function modlama(a, b) {
return a % b;
document.write("Gereksiz bir yazi");
}
deger = modlama(17, 6);
document.write(deger);
</script>
</body>
</html>
fonksiyondeger.html

Şekil52

return anahtar kelimesi çağrıldıktan sonra fonksiyondan çıkılır. Yukarıdaki
örnekte de gördüğünüz gibi return işleminden sonraki satır işlem
görmemektedir, çünkü fonksiyon matematiksel işlemi değer olarak iletmektedir
ve fonksiyondan çıkılmaktadır.

85
Musa ÇAVUŞ

Kendini çağıran fonksiyon

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

<html>
<body>
i = 1;
function islem(son) {
if(i < son) {
i=i+i;
islem(son);
}
else
document.write("sonuc: " +
": " + i + "<br />");
}
islem(100);
</script>
</body>
</html>
fkendinicagir.html

Şekil53

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

86
Musa ÇAVUŞ

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

<html>
<body>
i = 1;
j = 1;
function islem(son) {
if(i < son) {
i=i+i;
islem(son);
}
else
document.write("sonuc: " +
": " + i + "<br />");
document.write(j+++". fonksiyondayim");
}
islem(100);
</script>
</body>
</html>
fkendinicagir.html

Şekil54

87
Musa ÇAVUŞ

3.8 Eventhandler

Artık ısındık diyebiliriz, kitabın bundan sonraki konuları derinleşmeye
başlayacak ve sizde görsel olarak farklı program parçaları kodlayabileceksiniz.
Isınmasaydık bundan sonraki bölümlerde sorun yaşardık.
Tarayıcınızda fareyi hareket ettirmeniz, tarayıcınız tarafından bir olay olarak
algılanır. Bir düğmeye basmanız tarayıcıdan bir olay olarak algılanır. Bu tür
olayları JavaScript’te kullanabilirsiniz. Bu mekanizmaya Eventhandler
deniliyor. HTML 4.0 ‘dan sonra Eventhandler mekanizması HTML’e ait oldu.
http://www.w3.org/TR/html4/interact/scripts.html adresinde Attribute
definitions standartlaşmış Eventhanler’leri bulabilirsiniz. Ben size bunların bir
kaçını örneklerlede göstereceğim.
Eventhandler, on ön ekiyle başlar ve hangi olayla bağlantı kurulacaksa o olayın
Đngilizce kelimesiyle devam eder. Mesela onload, yüklenince manasına
gelmektedir ya da onmousedown, fare düğmesine basılınca anlamı taşımaktadır.
Örneklerime geçmeden bazı problemlere değinmek istiyorum. W3C’de
standartlaşmış Eventhandler’leri tüm tarayıcılar olduğu gibi desteklemiyorlar.
Bazı tarayıcılar, bir kısmını farklı desteklerken bazıları hiç desteklemiyor. Bu
yüzden bir sayfada Eventhandler kullanacaksanız, sayfanızı tüm tarayıcılarla
denemenizi öneririm.

Şekil55

88
Musa ÇAVUŞ

onMouseOver ve onMouseOut ile ilgili bir örnek vermek istiyorum:

<html>
function resimcerceve(){
document.resim.border=9;
}
function resimcerceveyok() {
document.resim.border=0;
}
</script>
<body>
<h3>Fareyi resime hareket ettirin</h3>
<a href="#" onMouseOver="resimcerceve()"
onMouseOut="resimcerceveyok()">
<img src="turkiye.jpg" name="resim" border="0" /></a>
</body>
</html>
resimevent.html

Şekil56

Fare ile Türk bayrağının bulunduğu resmin üzerine geldiğinizde resmin
etrafında bir çerçeve oluşmaktadır. HTML tagı olan <a> tagının arasına yine
HTML tagı olan resim tagı <src> tagını koydum. Resim tagının name
parametresinde resim tagının isminin resim olduğunu belirttim. <a> tagında
onMouseOver ve onMouseOut Eventhandler’lerini kullandım. onMouseOver
Eventhandler’i, fare ile resmin üzerine gelince aktif oluyor ve kendisine atanan

89
Musa ÇAVUŞ

fonksiyonu çağırmaktadır. Burada resimcerceve() fonksiyonunu atadım.
Fonksiyonum parametresiz olduğu için fonksiyonun parametresiz halini atadım.
resimcerceve() fonksiyonuna baktığımızda tek bir işlem yaptığını görürsünüz.
resim isimli objeye ulaşıyor ve çerçevesinin kalınlığını 9 yapıyor. document
tanımlamasının sayfamız olduğunu düşünün, resim ise o sayfadaki resim isimli
obje. Daha sonra da bu objenin çerçevesini border değişkenini değiştirerek
değiştirebiliyoruz. onMouseOut Eventhandler’i de, fareyi resimden çekince
aktif olmakta ve resimcerceveyok() fonksiyonunu çağırmaktadır. Bu
fonksiyonda resmin etrafındaki çerçeveyi 0 yaptım.
Farkına vardıysanız W3C standartlarındaki gibi onmouseout gibi bir yazım
kullanmadım ve onMouseOut yazdım. HTML olduğu için tolerans ediliyor ve
büyüklük küçüklük fark etmiyor. XHTML kullansaydınız o zaman onmouseout
yazmanız gerekiyordu yoksa hata oluşurdu. W3C sayfasındaki
Eventhandler’leri bu şekilde sayfanıza ekleyebilirsiniz. Kullanımları çok basittir
fakat sayfanıza canlılık katmaktadırlar.

3.9 Form ve Eventhandler

Eventhandler’leri Form’larda kullanmak bize büyük avantajlar sağlayabilir.
HTML bize Form kullanmamızı sağlıyor biliyorsunuz. Form’larla kullanıcılar
metin kutularını doldurabilirler, seçenekler seçebilirler ve bunları Server
tarafındaki bir program parçasına yollayabilirsiniz. Hemen bir örneğe bakalım:

<html>
function aktif(metin) {
document.getElementById("bilgi").innerHTML=metin;
}
function pasif() {
document.getElementById("bilgi").innerHTML="";
}
</script>
<body>
<form>
Kullanici Adi:
<input type="metin" name="userid"
onFocus="aktif('Kullanici adinizi girin')"

90
Musa ÇAVUŞ

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

Şekil57

Kod parçası ilk başta biraz karışık gibi gözükebilir, özellikle Form’larla
çalışmamış kişiler yadırgayabilirler fakat anlaşıldıktan sonra çok basit olduğunu
göreceksiniz. <form> tagıyla bir Form tanımı yapıyoruz. <input> tagı giriş
yapacağımız bir nesnenin olduğunu gösteriyor. type parametresinde <input>
tagının göstereceği nesnenin tipini belirtebiliyoruz. Đlk nesnenin metin kutusu
olmasını istediğimin için type parametresine text yazdım. Đkinci nesnenin ise bir
şifre metin kutusu olmasını istedim ve type parametresini password olarak
ayarladım.
Asıl bundan sonrası çok ilginç ve bizi ilgilendiriyor. Metin kutusunda onFocus
Eventhandler’ini kullandım. onFocus Eventhandler’i kullanıcı metin kutusunu
seçerse aktif hale geliyor ve daha önce tanımladığım aktif() fonksiyonunu
çağırıyor. Bu sefer tanımladığım fonksiyonu parametrik yaptım. Parametrede
yazılan metinle beraber aktif() fonksiyonu çağrılıyor ve getElementById()
fonksiyonunun yardımıyla bilgi nesnesine ulaşılıyor. Ulaştığımız nesnenin
innerHTML değişkeninin değerini değiştiriyoruz. innerHTML değişkeni
ulaştığımız nesnenin HTML içeriğine müdahale ederek değiştirmektedir.

91
Musa ÇAVUŞ

Senaryoyu başar alırsak görüyoruz ki, kullanıcı metin kutusunu seçer seçmez
kullanıcıyı bilgilendirebilmek için tarayıcı bir yazı gösteriyor. onBlur
Eventhandler’ide onFocus Eventhandler’in tam tersidir. Metin kutusu seçili
değilken aktif olmaktadır. Aynı şekilde pw nesnesi de işlemektedir.

92
Musa ÇAVUŞ

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

93
Musa ÇAVUŞ

4.1 Hata arama

Tüm programlama dillerinde olduğu gibi JavaScript’te de programlarken hata
yapabiliriz ve kodumuz hatalı olduğu için isteğimiz dışında çalışır. Bu bölümde
yaptığınız hataları nasıl bulabilirsiniz onu öğreneceksiniz. Sıradaki örneğimize
bir bakalım:

<html>
<body>
<table border width="100">
sayi = Math.round(Math.random()* 30);
document.write("Cikis degeri: " + sayi );
for(sayac=0;sayac < say;sayac++) {

document.write("<tr><td>Sayi:</td><td> ", sayac,
"</td></tr>");
}
</script>
<table>
</body>
</html>
hatabul.html

Şekil58

94
Musa ÇAVUŞ

Math.random() fonksiyonu 0-1 arası rastgele bir sayı üretmektedir.
Math.random() fonksiyonu çıkan sayıyı tam sayıya yuvarlamaktadır. Ben 0-30
sayısı arasında rastgele bir sayı seçebilmek için işlemi 30 ile çarptım ve sayi
değişkenine atadım. for döngüsü sayi değişkenindeki tam sayı kadar dönecek
ve tarayıcı tablo satırı gösterecektir. Fakat gördüğünüz gibi kod hatalı olduğu
için isteğimiz gerçekleşmiyor. Firefox tarayıcısı da hatalı bir kod olmasına
rağmen bize hiçbir hata mesajı vermemektedir.
Yukarıdaki mönüden Araçlar->Hata konsolu seçeneğini seçerseniz karşınıza
şöyle bir pencere çıkacaktır:

Şekil59

Bu konsol hata bulmada çok işinizi görebilir. Đsterseniz sadece hataları
görebilirsiniz ya da sadece uyarılar ve iletileri görebilirsiniz. Đsterseniz de
hepsini birden görebilirsiniz. Örneğimiz için bakarsak “say is not defined” diye
bir hata mesajının olduğunu ve hangi satırda olduğunu görüyoruz. Diğer
tarayıcılarında buna benzer hata konsol penceresi vardır. Ben Firefox’u
kullandığım için onu gösterdim.

95
Musa ÇAVUŞ

Hatanın nereden kaynaklandığını buna rağmen bulamadıysanız kodunuzun bazı
bölümlerinde tarayıcınızda görmeniz için değerleri yazdırtın.

<html>
<body>
<table border width="100">
sayi = Math.round(Math.random()* 30);
document.write("Cikis degeri: " + sayi );
alert(sayi);
for(sayac=0;sayac < say;sayac++) {

document.write("<tr><td>Sayi:</td><td> ", sayac,
"</td></tr>");
}
</script>
<table>
</body>
</html>
hatabulalert.html

Şekil60

alert() fonksiyonuyla ekrana rastgele üretilen sayının çıktısını verdirttim, bu
şekilde kodumun hatalı olan bölümü alert() fonksiyonundan sonra olduğunu
anlamış oluyorum, çünkü kodum alert() fonksiyonuna kadar çalışıyor. alert()
fonksiyonunu döngünün içerisine koyduğumda ekrana alert() fonksiyonunun
görüntüsü çıkmıyor. Buradan yine anlaşılıyor ki döngüde bir hata var. Bu da
hata bulmak için bir alternatiftir, fakat güçlü bir yöntem debugger kullanımıdır.

96
Musa ÇAVUŞ

4.2 Debugger

Şimdiye kadar olan metotlarda hataları, tarayıcıdan gelen mesajlara göre ya da
geleneksel programlama şeklinden bulduk. Şimdi bir Debugger ile bir hatayı
nasıl bulabiliriz onu göstereceğim. Şimdi size vereceğim bilgiyi hiç bir kitapta
bulamazsınız, o yüzden burayı iyi okuyun, çünkü size hata bulmada çok
yardımcı olacak.
Bunu yapmadan önce Firefox tarayıcınıza Venkman adlı bir Debugger
yüklemenizi öneririm. Firefox tarayıcınızda, Araçlar ->Eklentiler seçeneğini
tıklayın ve VenkMan programını Firefox uygulamasına ekleyin.

Şekil61

Kurulum bittikten sonra hatabul.html dosyasına çift tıklayarak Firefox ile tekrar
açın ve Araçlar->JavaScript Debugger seçeneğini seçin.

97
Musa ÇAVUŞ

Şekil62

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

Şekil63

98
Musa ÇAVUŞ

Venkman oldukça kaliteli bir Debugger olmasına rağmen arada sırada
çökebiliyor. Onun dışında JavaScript’lerde hata bulabilmede yardım çantası gibi
düşünebilirsiniz.
JavaScript Debugger’de Open Windows sekmesini tıkladığımızda
tarayıcımızdaki açık sekmeleri görürüz. Open Windows sekmesini seçtikten
sonra hatabul.html dosyasını çift tıklayın:

Şekil64

Debugger tıklanan HTML sayfasının kodunu sağ bölgesinde göstermektedir.
Debugger ile çalışınca, hatalı kodun hata olduğundan şüphe edilen satıra kadar
kodun çalışması istenilir ve Debugger’ın kodu o satıra kadar çalıştırıp durması
için bir kesme noktası konur. Buna Breakpoint denilmektedir. 6. Satırın sol
tarafındaki boşluğa fare ile tıkladığımızda bir F harfi belirir. Future Breakpoint
demektir, yani gelece kesme noktası.

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

jQuery

Recommended

Recommended

More Related Content

Similar to jQuery

Similar to jQuery (20)

More from Erol Dizdar

More from Erol Dizdar (20)

jQuery