JAVASCRİPT

Önsöz................................................................................................................................... 4
Javascript’le Tanışalım ........................................................................................................ 5
Javascript’in Temel İlkeleri ................................................................................................ 14
Javascript Yazım Kuralları ..........................................................................................................14
Javascript Değişkenleri (Variable) .............................................................................................18
Dizi-Değişkenler (Array) ........................................................................................ 22
Javascript’te İşlemler (Operator) ..............................................................................................23
Atama (Assignment) İşlemleri: .............................................................................. 23
Aritmetik İşlemleri: ............................................................................................... 24
Karşılaştırma İşlemleri:.......................................................................................... 25
Alfanümerik İşlemleri: ........................................................................................... 28
Şartlı İşlemler: ....................................................................................................... 30
Mantıksal İşlemler:................................................................................................ 31
İşlemlerde Sıra: ..................................................................................................... 32
Program Akış Denetimi..............................................................................................................33
If (Eğer .. ise) ......................................................................................................... 33
If ... Else (Eğer .. Diğer) .......................................................................................... 36
Program Döngü Denetimi .........................................................................................................38
“for” döngüsü........................................................................................................ 38
Şartlı döngü: while ................................................................................................ 40
do...while .............................................................................................................. 45
“Break” ve “Continue” ........................................ Hata! Yer işareti tanımlanmamış.
“Switch” ................................................................................................................ 47
Javascript’te Fonksiyon ..................................................................................................... 50
Fonksiyona değer gönderme ve değer alma .............................................................................51
charAt(i) ................................................................................................................ 54
parseInt(i,n) ........................................................................................................... 55
Fonksiyon ile HTML unsarlarının ilişkisi .....................................................................................56

1
 Date(): getYear(), getMonth(), getDate(), getDay(), getTime(), getHours(),
getMinutes(), getSeconds() .................................................................................. 58
toString(), toLowerCase(), toUpperCase() ............................................................ 58
setTimeout(“fonksiyonun_adı”, milisaniye) ......................................................... 59
Değişkenleri Değerlendirme (Eval) ....................................................................... 59
Javascript’in Nesneleri, Olayları ve Özellikleri .................................................................. 61
Nesneler ............................................................................................................................ 62
Olaylar ............................................................................................................................... 65
onClick ................................................................................................................... 66
onSubmit ............................................................................................................... 68
onReset ................................................................................................................. 69
onChange .............................................................................................................. 69
onFocus, onBlur .................................................................................................... 70
onMouseOver, onMouseOut ................................................................................ 72
onLoad, onUnLoad ................................................................................................ 74
onError, onAbort ................................................................................................... 74
Nesneler ve Olayları Birleştirelim ..................................................................................... 75
Browser Nesneleri .....................................................................................................................76
Pencere (window) ................................................................................................. 76
Mesaj Kutuları ....................................................................................................... 79
Çerçeve Nesnesi .................................................................................................... 79
Belge (Document) Nesneleri .....................................................................................................80
Form Nesneleri ..........................................................................................................................80
Formun unsurları .................................................................................................. 81
Radyo Düğmesi (Radio) ......................................................................................... 83
Select ..................................................................................................................... 85
Password ............................................................................................................... 86
Gizli Nesneler (Hidden) ......................................................................................... 88
Javascript Nesneleri...................................................................................................................88
String Nesnesi ....................................................................................................... 88

2
Javascript ile Dinamik HTML ............................................................................................. 90
Sonuç................................................................................................................................. 92

3
Önsöz

Javascript, C dilinden türetilmiştir. HTML ilk çıktığı zamanlarda yetersiz kalıyordu. Bu düşünceden yola
çıkan Netscape firması, LiveScript adıyla bir “Düz yazı dili” geliştirdi. Aynı yıllarda Sun firmasının
geliştirdiği, “Java” dilinin reklamından yararlanarak 1995 Aralık ayında bu dili piyasaya Javascript
adıyla sürdü. O sırada Microsoft da Internet Explorer adlı Browser’ına bu imkanı kazandırmak
istiyordu, ama Netscape bir yıla yakın Javascript’i paylaşmaya yanaşmadı. Microsoft, Netscape’in
Javascript yorumlama kodunu almadan, IE’i Javascript’i anlar hale getirdi; fakat ortaya çıkan dile JScript
adını verdi. Jscript 1.0 ile Javascript 1.0 tümüyle aynı idi ve her iki program da hem Javascript, hem de
JScript anlayabiliyordu. Fakat bu durum çok uzun sürmedi; her iki firma da kendi Script diline diğer
programın tanımadığı özellikler kazandırdılar. Bu arada Microsoft, IE’ye, JScript’te de, Javascript’te de
olmayan becerilerle donattığı VBScript’i tanıma özelliği kazandırdı.

Özetlersek:

1. Javascript, HTML’in içine gömülür.

2. Javascript Browser’a bağımlı olarak yorumlanır, yani Javascript’in bazı komutları her tarayıcıda başka
sonuç verebilir veya hiç sonuç vermeyebilir.

3. Javascript ile, ortaya uzatması .EXE olan bir dosya çıkartmazsınız; Javascript kodları HTML’in içine,
kendisini HTML’den ayırteden <SCRIPT>...</SCRIPT> etiketlerinin arasına yazılır yada, Javascript kodları
uzantısı .js olan ayrı bir dosya olarak kaydedilip HTML sayfasına dahil edilebilir.

4. Javascript, ancak bir olay halinde işler: bu olay ziyaretçinin Browser programının bir iş yapması, bir
işi bitirmesi veya ziyaretçinin bir yeri tıklaması ya da klavyesinde bir tuşa basması demektir.

4
Javascript’le Tanışalım

Javascript programı yazmak için herhangi bir derleyici programa gerek yoktur. Javascript, HTML’in bir
parçasıdır ve içinde bulunduğu HTML ile birlikte Web Browser programı tarafından yorumlanır.
Dolayısıyla, Javascript programı yazmak demek, bir Web sayfası hazırlamak ve bu sayfadaki HTML
kodlarının arasına Javascript kodları girmek demektir.

O halde, ilk Javascript programımızı yazalım. Şu kodu yazıp, [Link] adıyla kaydedin:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Merhaba Dünya</title>
</head>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<BUTTON onclick="alert('Merhaba Dünya!')">TIKLAYINI!</BUTTON>
</FORM>
</BODY>
</HTML>

Sonra ya bu dosyayı iki kere tıklayın; ya da favori Browser programınızı çalıştırın ve bu dosyayı açın.
Karşınıza çıkacak düğmeyi tıklayın. İşte sonuç:

5
Yazdığınız kodu biraz irdeleyelim. Bütün Web sayfaları gibi, Javascript kodunuzun yer aldığı sayfa da
tipik bir HTML kod kümesi:

1. Browser programına kendisinin bir HTML dosyası olduğunu birinci satırda beyan ediyor; ve bittiği
yer açıkça gösteriliyor.

2. HTML kodu iki bölüm içeriyor: Başlık (Head) ve gövde (Body) bölümleri. Her bölümün nerede
başladığı ve nerede bittiği açıkça belirtiliyor.

3. Gövde bölümünde bir Form unsuruna yer veriliyor; fakat bu formun tek ögesi var: Düğme (Button).

4. Daha önce Web sayfalarınıza düğme koyduysanız, bu düğmenin onlardan farklı bir tarafı var: Türü,
değeri, vs. belirtilmiyor; sadece “onclick="alert('Merhaba Dünya!')" şeklinde bir ifadeye yer veriliyor.

5. Ve ilk Javascript programınızda ne Javascript’in adı geçiyor; ne de HTML ile Javascript bölümlerini
birbirinden ayırteden, <SCRIPT>..</SCRIPT> etiketine yer veriliyor!

Özellikle bu son husus, size şunu gösteriyor: Günümüzde Netscape ve IE Javascript ile o kadar içiçe
geçmiş ve Javascript ile o kadar Browserların Belge Nesnesi Modeli (Document Object Model) ile
kaynaşmıştır ki, kimi zaman HTML’in işlevi nerede bitiyor, Javascript’in işlevi nerede başlıyor, kolaylıkla
ayırt edilemez.

Javascript’ten söz ederken, bu dilin imla kuralları olmakla birlikte bu kurallara yüzde 100 uymanın
zorunlu olmadığını ifade ettik. Kural olarak, Javascript bölümü, HTML’in içine <SCRIPT>..</SCRIPT>

6
etiketlerinin arasına gömülür. İşte size bütün kuralları yerine getirilmiş bir Javascript bölümü yazma
örneği:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE=”Javascript”>
function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz
{ //bu, fonksiyonun başlama işareti
alert (“Merhaba Dünya!”) //fonksiyonun komutu ve komutun gerektirdiği metin
} //bu fonksiyonun bitme işareti
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<BUTTON onclick=merhaba()>TIKLAYINI!</BUTTON>
</FORM>
</BODY></HTML>

Bu metni [Link] adıyla kaydeder ve Browser’ınızda açarsanız, görüntünün ve işlevin tıpatıp

aynı olduğunu göreceksiniz. İki metin arasındaki fark, ikincisinin Javascript yazma kurallarına yüzde 100
uymasından ibaret. Bununla birlikte Javascript ile HTML’i birbirinden dikkatlice ayırmanız gereken
durumlar, ikisinin birbiriyle kaynaştığı noktalardan daha çoktur.

Bir de şunu deneyin: önce [Link] adıyla şu metni kaydedin:

function merhaba() {
alert("Merhaba, Dünya!") }

Sonra, [Link] dosyasında şu değişikliği yapın ve [Link] adıyla kaydedin:

7
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT SRC="[Link]" LANGUAGE=”JavaScript”>
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="TIKLAYIN!"
onclick="merhaba()">
</FORM>
</BODY>
</HTML>
Ve [Link]’i açtığınızda yine aynı görüntü ve aynı işlevle karşılaştığınızı göreceksiniz. Bu üçüncü
yöntemde sadece Javascript kodlarını içeren ve dosya adının uzatması “.js” olan bir düzyazı dosyasını
HTML’e dışardan da eklemiş olduk.

Javascript, bütün bilgisayar dilleri gibi yorumlanabilmesi (çalışabilmesi) için kendi imla ve dilbilgisi
kurallarına son derece bağlı kalınmasını ister. Bunu sınamak isterseniz, şu ana kadar oluşturduğunuz
herhangi bir HTML dosyasında Javascript bölümündeki bir parantezi veya süslü parantezi kaldırın;
dosyayı başka bir isimle kaydedin ve Browser’ınıza açtırmaya çalışın! [Link] dosyasında
“onclick=”merhaba()” komutunun bir parantezini kaldırdığımızda, butonun işlem yapmadığını
görebilirsiniz.

Javascript dilinde açıklama //” işaretiyle başlar ve satır sonunda sona erer. [Link]’de
Javascript kodlarının bütün satırlarında böyle yorumlar koyulmuştur. Eğer yorumlarınız bir satırdan
uzun olacaksa, bunu şöyle belirtebilirsiniz:

/* yorumun birinci satırı

yorumun ikinci satırı

yorumun üçüncü satırı */

8
Javascript veya başka bir dille program yazarken, iyi programcılar, programlarını kendilerinden başkası
denetlemeyecek ve yeniden kullanmayacak da olsa, önemli işleri yaptıkları satırlara mutlaka yorum
koyarlar. Bunun yararını, kendi yazdığınız bir programı bile bir yıl sonra yeniden açtığınızda
görürsünüz!

Javascript kodları, ya ilk yazdığınız programda olduğu gibi, ziyaretçinin sayfanızda bir yeri tıklaması
veya klavyede bir tuşa basmasıyla harekete geçer; ya da HTML sayfası ziyaretçinin Browser’ında
görüntülendiği anda otomatik olarak çalışmaya başlar. Otomatik çalışan Javascript kodu ise iki ayrı
yöntemle çalıştırılabilir: HTML kodları icra edilmeden önce (yani sayfanız ziyaretçinin Web
Browser’ında görüntülenmeden önce, veya sayfa görüntülendikten sonra.

Şimdi şu kodları girin:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript">
alert("Merhaba Dünya!")
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
</BODY></HTML>

Bu dosyayı da [Link] adıyla kaydedin ve Browser’ınızda açın. Sayfanızın içeriğini oluşturan

“Merhaba Dünya” yazısı ile Javascript programınızın icra ettirdiği uyarı kutusunun
görüntülenmelerindeki sıraya dikkat edin.

9
10
Bu dosyada, küçük bir değişiklik yapalım ve kodlarımıza şu şekli verelim:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript">
function merhaba()
{
alert("Merhaba Dünya!")
}
</SCRIPT>
</HEAD>
<BODY onLoad="merhaba()">
<B>Merhaba Dünya</B><br>
</BODY>
</HTML>

[Link] adıyla kaydedeceğiniz bu dosyayı Browser’ınızda açtığınızda, sayfa metni ile uyarı
kutusunun görüntülenme sırasına dikkat edin. Merhaba4’de önce uyarı kutusunun görüntülenmesinin
sebebi, Browser’ın HTML kodundaki komutları yukarıdan aşağı sırayla yerine getirmesi ve bu arada
karşısına çıkan Javascript komutunu da icra etmesidir. Oysa merhaba5’te, Javascript komutunu bir
fonksiyon olarak tanımladınız ve bu fonksiyonun icrasını HTML’in BODY etiketinin içeriğinin Browser’ın
penceresine yüklenmesine bağladınız. Bunu Javascript’in “onLoad” komutuyla yaptık.

Javascript komutları, daima HTML sayfasının bir unsuruna bağlı olarak verilir. Yani Javascript’in
konusu veya hedefi, Web Browser programının (Netscape veya IE’nin) bilgisayarın ekranında
oluşturduğu pencerenin içindeki belgenin bir ögesi. Bu öge, şimdilik ya bu belgenin içindeki FORM
unsurunun bir bölümü (örneğin, düğmesi), ya da sayfanın BODY bölümünün bizzat kendisi oldu.

Bu ögeler, unsurlar, unsurların bölümlerine programcılık dilinde “Nesne” (Object) denir. Ya

kendisi bir nesne oluşturabilen veya içinde çalıştığı programın ya da işletim sisteminin nesnelerini konu
alan ve bu nesnenin unsurlarını, ögelerini, parçalarını hedef olarak alan dillere Object-oriented (nesne-

11
yönelimli) diller denir. Bu dillerle yazılan programlara (isterse bir Script dilinin düz yazı şeklindeki
komutları olsun) Object-oriented Program (OOP) adı verilir.

Javascript programları da OOP sınıfına girdiği için, Javascript programcısı olacaksanız,

programlarınızın mutlaka Web Browser’ın bir nesnesinin bir özelliğini belirlemeye veya değiştirmeye
ve Web Browser’ı bir nesne oluşturmaya ve nesnenin şu özelliğini şöyle veya böyle yapmaya yönelik
olması gerektiğini akıldan hiç çıkartmamalısınız. Bu nesne, Browser’ın penceresinin menü çubuğunun
olması ya da olmaması, pencerenin bilgisayar ekranında ne büyüklükte olması, pencerenin alt
çerçevesindeki statü mesajının içeriğinin değiştirilmesi bile olabilir. Javascript programı açısından
HTML etiketleri ile oluşturacağınız hemen herşey nesnedir. Bu nesnelerin nasıl etkileneceği ise
Javascript programının içeriğini oluşturur.

Özetlersek, Javascript ile Web Browser programını penceresini ve Browser programının

yorumladığı HTML etiketlerinin oluşturacağı sayfa ögelerini, bu ögelerin biçimini, değerini belirler,
sorgulayabilir ve değiş[Link] kodu, DOM’u hedef alır: bu bağlamda DOM, bir
Browser’ın penceresi ve penceresinin içindeki herşey demektir. Ama henüz herşey için bir olay ve
metod standardı geliştirilmiş değil.

“Olay” (Event) ve “Metod” (Method) burada dikkat etmeniz gereken iki kelime. Olay, Web
Browser’ın veya kullanıcının yaptığı bir iş, eylem, hareket demektir; “Metod” ise programcı olarak sizin
bu “Olay”ı veya nesnenin bir özelliğini (Property) kullanarak, Belge’nin bir unsuruna yaptırtabileceğiniz
iş, eylem, hareket veya değişikliktir.

Diyelim ki, HTML sayfanızda şöyle bir bölüm var:

<FORM NAME=form01> WEB KİTAPÇISI

<INPUT TYPE=”checkbox” NAME=”roman”>Roman
<INPUT TYPE=”checkbox” NAME=”hikaye”>Hikaye
<INPUT TYPE=”checkbox” NAME=”biyografi”>Biyografi
<TEXTAREA NAME=”sonuc” ROWS=”6” COLS=”6”>Burada sonuç
gösterilecek</TEXTAREA>
</FORM>

Şimdi bu HTML kodu sayfanızda şu Nesne’leri oluşturur:

1. Bir adet Form

2. Dört adet “checkbox” türü INPUT alanı

3. Bir adet metin alanı

12
Şimdi dikkat: Sizin açınızdan “form01” isimli bu formu oluşturan FORM ögesi, Javascript açısından
“document.form01” adlı nesnedir. Ziyaretçinin içine işaret koyduğu kutu, Javascript tarafından
“[Link]” diye tanınır. Sizin “sonuc” isimli metin alanınızın içinde yazılı olacak
metin ise Javascript bakımından “[Link]” (value=değer) diye bilinir.

HTML dilini geliştirenler, türü “checkbox” olan INPUT nesnesinin başına gelebilecek “olay” türlerinin
neler olabileceğini düşünürken, “Mesela,” demişler, “Kullanıcı bu kutuyu tıklayabilir!” Yani, bu
nesnenin Browser açısından yol açabileceği “olay”lardan biri tıklanması halinde olan olaydır.
Tıklamanın İngilizcesi ne? “click!” O halde bu olayın adı “Click,” bu olayı yönlenrdiren metodun adı ise
“onClick”tir (on, İngilizce -de, -da eki veya üzerinde, halinde kelimesinin karşılığıdır). Bu durumda
“onClick,” olayı, bu kutu açısından bir olaydır ve Javascript prnogramcısı olarak bu olayı yakalayabilir,
kullanabiliriz. Başka bir deyişle, Browser’a, Javascript yoluyla “Ey Browser; kullanıcı benim INPUT
nesnelerimden “roman” adlı olanı tıkladığı zaman şu, şu işi yap!” emrini verebiliriz. Bu noktada
bilgisayar programının, hangi dille yazılırsa yazılsın, alt alta gelmiş komutlar listesi olduğunu
hatırlatalım.

Peki, yine aynı örnekte, Browser’a Javascript yoluyla ne gibi bir iş yaptırtabiliriz? Mesela, “Ey Browser,
kullanıcı benim INPUT nesnelerimden ‘roman’ adlı olanı tıkladığı zaman benim ’sonuc’ adlı TEXTAREA
nesnemin değerini ‘Roman’ yap!” diyebiliriz. Biliyorsunuz ki, TEXTAREA nesnelerinin değeri, ekranda
çizdikleri kutunun içine koydukları içerik demektir. Tabiî aynı mantıkla, “hikaye” kutusu işaretlenince
Sonuç kutusuna “Hikaye,” “biyografi” kutusu işaretlenince de Sonuç kutusuna “Biyografi” yazdırtmak
elimizde.

Javascript herşeyi, bir HTML ögesine göre tanımlar, adlandırır ve bilir. Unutulmaması gereken kural:
“Javascript, sayfanın bir şeyini alır, sayfanın bir şeyine hitabeder!”

Sorun, sadece Javascript’in on-onbeş kelimesini, yedi-sekiz işlemini öğrenmek değil, aslında HTML
belgesinin nesnelerinin olaylarını ve metodlarını öğ[Link]ısıyla, önce Javascript’in on-onbeş
kelimesi ve yedi-sekiz işleminden ibaret temel kurallar ele alınacak; sonra bunlarla Belge Nesneleri'ne
hangi olay halinde ne yapılabilecek ve bunu nasıl yapılabileceği görülecektir.

13
Javascript’in Temel İlkeleri

Web Browser programları, Javascript komutlarını yorumlayabilmek için, HTML’in içinde <SCRIPT
LANGUAGE=”Javascript”> etiketini ararlar ve </SCRIPT> etiketini gördükleri anda bu yoruma son verir;
HTML yorumuna dönerler.

Javascript Yazım Kuralları

Browser’ların Javascript yorumlama bölümleri, kodların arasında yer alan yorum ifadeleri ile boşlukları
atar; geri kalan kelimeleri beşe ayırarak ele alırlar:

1. Belirleyiciler (Identifier):

Javascript dilinin değişkenleri, metodları ve nesnelerini belirleyen isimlere Belirleyiciler denir.

Bu sınıfa giren bütün kelimeler ya harfle ya da alt çizgi (_) ile başlar. Rakam veya diğer işaretler birinci
karakter olarak kullanılamaz, fakat daha sonra kullanılabilir. Javascript, aynı kelimenin büyük harfle
yazılanı ile küçük harfle yazılanını farklı isimler olarak görür. Bu sınıfta giren kelimelerin içinde boşluk
olamaz.

Javascript kodlarınız sizin bilgisayarınızda değil, ziyaretçinin bilgisayarında çalıştırılacağına

göre, kullandığınız karakterlerin ziyaretçinin bilgisayarında nasıl bir değer taşıyacağını düşünmeniz
gerekir. Bu bakımdan güvenli yol, Bu sınıfa giren kelimelerde, İngilizce alfabede bulunmayan, Türkçe ve
diğer dillerdeki high-ASCII karakterleri (ı, İ, ğ, Ğ, Ş, Ş ile ü, Ü, ö, Ö, ç ve Ç) kullanmamaktır.

Aşağıda doğru ve yanlış belirleyici kelime örneklerini bulacaksınız:

Doğru Yanlış

sonucgoster sonuc goster

ikincidegisken 2ncidegisken

_gelen #gelen

Anahtar kelime grubundaki kelimeler de bu sınıfta kullanılamaz.

2. Anahtar Kelimeler (Keyword):

Javascript dilinin önceden tanımlanmış ve programın yorumunda özel anlam kazandırılmış

kelimelerine Anahtar Kelime denilir. Aşağıda bu kelimelerin yanında kelime anlamlarını göreceksiniz;
fakat ilerledikçe bu kelimelerin Javascript’te kullanıldıkları yere göre anlamlarını ve nerelerde
kullanıldıklarını göreceğiz.

14
break (kes) new (yeni)

continue (devam et) null (boş değer)

else (başka bir durum) return (dön)

false (yanlış) this (bu)

for (için) true (doğru)

function (işlev) var (variable, değişken)

if (eğer) while (... iken)

in (içinde) with (ile)

int (integer, tam sayı)

typeof (türü)

void (geçersiz)

do (yap)

labeled (etiketli)

switch (değiştir)

3. Ayrılmış Kelimeler (Reserved):

İkinci gruba girsin-girmesin bazı kelimeler, ilerde Javascript programlama ve yorumlama

işlerinde kullanılabileceği düşüncesi ile, bir kenara ayrılmıştır; Javascript kodlarında kullanılamazlar. Bu
listede yer alan ve halen Anahtar Kelime listesine girmiş bir kelime değişken, fonksiyon, nesne veya
metod adı olarak kullanılırsa, program hata verir; henüz anahtar kelime listesine alınmamış olmakla
birlikte “rezerv edilmiş” bu kelimelerin geçtiği komut satırı ise görmezden gelinir.

Javascript programlarınızda kullanmayacağınız kelimelerin listesi şöyledir:

abstract (soyut) break (kes)

boolean (Boolean Mantığı) byte (bayt)

15
case (hal) interface (arayüz)

catch (yakala) labed (etiketli)

char (karakter) long (uzun)

class (sınıf) native (kendinden olan)

const (sabit) new (yeni)

continue (devam) null (boş değer)

default (varsayılan) package (paket)

delete (sil) private (özel)

do (yap) protected (korunmuş)

double (çift) public (genel)

else (başka bir durum) return (dön)

extends (uzanır) short (kısa)

false (yanlış) static (sabit)

final (sonuncu) super (kuvvet)

finally (sonunda) switch (değiştir)

float (kesirli) synchronized (uyumlu)

for (için) this (bu)

function (işlev) throw (içine kat)

goto (--ya git) throws (içine katar)

if (eğer) transient (geçici)

implements (uygular) true (doğru)

import (ithal et) try (dene)

in (içinde) typeof (türü)

instanceof (--nın oluşumu) var (değişken)

int (integer, tam sayı) void (geçersiz)

16
while (iken) with (ile)

4. Değerler (Literal):

Javascript kodu icra edildiği sırada değişmeyen rakam veya metinlere Değer denir. Javascript
kodlarında beş tür değer bulunur:

a. Tamsayı Değerler (Integer Literal):

Tamsayılar, 10 tabanlı (ondalık, decimal), 8 tabanlı (octal) veya 16 tabanlı (hexadecimal)

olabilir. 8 tabanlı sayıları belli etmek için sayıdan önce sıfır, 16 tabanlı sayıları belli etmek için sıfır ve x
harfi kullanılır. Hexadecimal sayılarda 9’dan büyük sayılar A, B, C, D, E ve F harfleri ile yazılır. (Sayının
basamaklarını okuma kolaylığı sağlamak için, nokta değil, virgül ile ayırmalısınız.) Örnek: Decimal
46,789; Octal 072,765; Hexadecimal: 0x7B8.

b. Kesirli Değerler (Floating-point literal):

Tam sayı bölümünü bir ondalık nokta (virgül değil) ile kesir bölümü izleyen sayılar. Örnek:
3987.786, -1.1.

c. Boolean Mantık İfadeleri (Boolean Literal):

Javascript dilinde, Boolean Mantığı, iki sonuç verir: True (Doğru) ve False (Yanlış). Javascript,
True (Doğru) değerini 1, False (Yanlış) değerini 0 rakamıyla tutar. Bir denklemin sonucunun doğru veya
yanlış olduğunu irdelerken, Javascript metninde bu iki kelime küçük harfle yazılmalıdır. Dolayısıyla
büyük harfle yazılmış TRUE ve FALSE kelimeleri, değişken, fonksiyon, nesne ve metod adı olarak
kullanılabilir. Tabii, bir süre sonra kafanız karışmazsa!

d. Alfanümerik (Karakter) Değerler (String literal):

İki adet çift-tırnak (“) veya tek-tırnak (‘) içine alınan her türlü ifade, Javascript için String
değeridir. (Çeşitli Türkçe bilgisayar kaynaklarında “String literal” terimi “karakter değişken” olarak
belirtilmektedir. “Karakter” bu değerlerin örneğin sayı değerlerden farkını anlatmıyor. Bazı
kaynaklarda ise hem rakam, hem de harf içerdikleri, buna karşılık sayı olmadıkları gerçeğini belirtmek
amacıyla, daha aşina olduğumuz alfanümerik terimini görmek mümkün. Ben bu ikincisini
benimsiyorum.) Bir Javascript metninde alfanümerik değerleri bir tek tırnakla, bir çift tırnakla
gösteremezsiniz. Başta nasıl başladıysanız, programın sonuna kadar bütün alfanümerik değerleri aynı
tür tırnak içinde göstermelisiniz. Alfanümerik değer olarak verdiğiniz karakterler, daha sonra bir HTML
sayfada bir nesnenin bir unsurunun değeri (örneğin bir TEXTAREA’nın içeriği) olarak kullanılacaksa ve
HTML sayfa, meta etiketlerinde kendisinin Türkçe olarak yorumlanmasını sağlayacak ifadeye sahipse,
Türkçe karakter ve diğer yüksek ASCII kodlardaki karakterleri içerebilir. Örnekler: “Bugün hava çok
güzel” ‘Bugün hava güzel değil’ “123 adet yumurta” ’23,234,678.987’

e. Özel Karakterler

17
 Özellikle alfanümerik değerleri verirken, Browser’a metin görüntüleme konusunda biçim veya
hareket komutları da vermek isteyebilirsiniz. Bunu, bazı kod harflerin önüne ters-bölü işareti koyarak
yapabilirsiniz. Bu tür özel karakterler şunlardır:

\b - Klavyede Geri (backspace) tuşunun görevini yaptırır.

\f - Yazıcıya sayfayı bitirmeden çıkarttırır (formfeed).

\n - Yazı imlecini yeni bir satırın başına getirir (new line)

\r - Klavyede Enter-Return tuşunun görevini yaptırır.

\t - Sekme (tab) işaretini koydurur.

\\ - Yazıya ters-bölü işareti koydurur.

\’ - Yazıya tek-tırnak işareti koydurur.

\” - Yazıya çift-tırnak işareti koydurur.

Javascript’e bu tür özel karakterlerle HTML sayfasına bir metin yazdıracağınız zaman, bu yazının
<PRE>..</PRE> etiketleri arasında olması gerekir. Aksi taktirde Javascript ne yazdırırsa yazdırsın, HTML
bu özel karakterleri dikkate almayacaktır.

Javascript Değişkenleri (Variable)

Değişken, adı üstünde, Javascript yorumlayıcısı tarafından bilgisayarın belleğinde tutulan ve

içerdiği değer programın akışına göre değişen bir unsurdur. Değişkenlerin bir adı olur, bir de değeri.
Program boyunca beğişkenin adı değişmez; fakat içeriği değişebilir.

Değişkenlere isim verirken Belirleyici isimleri kurallarına riayet etmeniz gerekir. Yani bir
değişkenin adı rakamla veya alt çizgi (_) dışında bir işaretle başlayamaz. Javascript, büyük harf-küçük
harf ayırt ettiği (case-sensitive olduğu) için, örneğin SONUC ve sonuc kelimeleri iki ayrı değişken
gösterir. Bir değişkeni tanımlarken, büyük harf kullandıysanız, program boyunca bu değişkeni büyük
harle yazmanız gerekir.

Değişken tanımlamak, bilgisayar programcılarına daima gereksiz bir yük gibi görünür. Birazdan
göreceğiz, Javascript sadece değişkenleri tanımlamayı zorunlu kılmakla kalmaz, fakat nerede
tanımlandığına da özel bir önem verir. Javascript’e bir Belirleyici’nin değişken olarak kullanılacağını
bildirmek için “var” anahtar-kelimesini kullanırsınız:

var sonuc

var adi, soyadi, adres, siraNo

var i, j, k

18
var mouseNerede, kutuBos, kutuDolu

Gördüğünüz gibi, bir “var” satırında birden fazla değişken tanımlayabilirsiniz.

Bazı diğer programlardan farklı olarak Javascript, size değişkenleri hem beyan, hem de içeriğini
belirleme işini aynı anda yapma imkanı veriyor (initialization):

var sonuc = ”Merhaba Dünya!”

var adi = ”Abdullah”, soyadi = ”Aksak”

var i = 100, j = 0.01, k = 135

var kutuBos = false, kutuDolu = true

Gerekiyorsa, bir değişkeni önce tanımlar, sonra değerini belirleyebilirsiniz:

var kutuBos = false, kutuDolu

kutuDolu = true

Javascript, programcıya bir değişkeni tanımlamadan “initalize etme” (içine doldurma) imkanı da verir;
bu durumda o değişken genel (global) nitelik kazanır. Buna birazdan değineceğiz; ama iyi programlama
tekniği ve özellikle daha sonra hata arama zorunluğu sebebiyle, değişkenlerin açık-seçik tanımlanması
en doğru yoldur.

Bir değişkeni tanımlayarak içini doldurmadan (initialization’dan) önce içindeki değeri sorgulamaya
kalkarsanız, Browser’ın Javascript yorumlayıcısı o noktada durur ve tanımlanmamamış (undefined)
değişken hatası verir.

Javascript programlarında beş tür değişken bulunabilir:

1. Sayı (number): -14, 78, 87678

Sayı türündeki değişkenler, tam sayı, ondalık sayı, pozitif sayı veya negatif sayı olabilir. Sayı
değişkenlerle aritmetik işlemler yapılabilir.

var eni = 9, boyu = 4

var alani = eni * boyu
[Link](alani)
Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye “alani” adlı değişkenin değerini (36)
yazdıracaktır.

2. Boolean değişken: true, false

19
Javascript, tanımlanırken değeri “true” (doğru) veya “false” (yanlış) olarak belirtilen değişkenleri
otomatik olarak Boolean değişken olarak sınıflandırır ve sorguladığınızda “true” için 1, “false” için 0
değerini verir.

3. Alfanümerik (String) Değişken: “Merhaba Dünya!”

Alfanümerik değişken, kendisine tek veya çift tırnak içinde verilen bütün karakterleri tutar, ve
sorulduğunda aynen bildirir. Alfanümerik değişkenin içi boş olabilir (var adi = “”, soyadi = “”).
Alfanümerik değişkenler, tabir yerinde ise “toplandığında” değişkenlerin değerleri sırayla birbirine
eklenir:

var adi = “Osman”, soyadi = “Ali”

var adisoyadi = adi + soyadi

[Link](adisoyadi)

Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye “adisoyadi” adlı değişkenin değerini
(OsmanAli) yazdıracaktır. Araya boşluk koymanın tekniğine ilerde değineceğiz!

4. İşlev (Function) Değişken:

Javascript’in hayatî noktası fonksiyonlardır. Javascript’e fonksiyonlarla iş yaptırırız. Kimi fonksiyonu,

Javascript’i tasarlayanlar bizim için tanımlamışlardır; bunlara metod denir. (Kimi metod, ne yapacaksa
bizim hiç bir katkımızı beklemeden yapar; kimi metod mutlaka bizden bir katkı bekler.) Kimi
fonksiyonları biz tanımlarız ve komutlarını biz veririz. Bunlara “Programlanan Fonksiyonlar” denir.
Başlarda yazdığınız ve [Link] adıyla kaydettiğiniz dosyada biz “merhaba()” adlı bir fonksiyon
oluşturduk; sonra bu fonksiyona bir otomatik fonksiyon olan alert() metodunu kullanmasını bildirdik;
bu otomatik fonksiyona da görevini yaparken kullanmasını istediğimiz değeri verdik!

5. Nesne (Object) değişkenleri: window, document

Bu tür değişkenlere değişken adını vermek bile gerekmez; çünkü bunlar Browser’ın nesneleridir. Fakat
Javascript kodlarımızda bu nesneleri de değişken gibi kullanabiliriz. Bu sınıfa giren özel bir değişken ise
değerini “null” (içi boş) kelimesiyle belirlediğiniz değişkenlerdir.

Javascript, değişkenlerini bu beş sınıfa ayırmakla birlikte sizden değişkenlerinizini sınıflamanızı

beklemez. Sınıflamanın önemi, daha sonra, programın ileri bir aşamasında bir değişkenin değeri ile
yaptıracağınız işlemde ortaya çıkacaktır. Bir değişken, kendi sınıfının yapamayacağı bir işleme veya
sorgulamaya tabi tutulursa, Javascript size pek de kibarca olmayan bir hata mesajı ile değişkeni doğru
kullanmadığınızı hatırlatacaktır.

Bununla birlikte bir fonksiyonda sayı olarak tanımlanmış ve doldurulmuş bir değişken, aynı
fonksiyonda daha sonraki bir işlemde veya başka bir fonksiyonda alfanümerik değişken olarak
tanımlanabilir ve doldurulabilir. Bu değişken sorgulandığında değerini, yetki alanı (scope) çerçevesinde
bildirir.

20
Değişkenlerin yetki alanı veya geçerli olduğu alan (scope), oluşturulmuş ve değeri belirlenmiş olduğu
sahayı, yani kendisine atıfta bulunulduğu zaman bildireceği değerini ve bu değişkene nerelerden atıfta
bulunulabileceğini gösterir. Şimdi, HTML dosyasının baş tarafında (HEAD etiketi içinde) bir değişkeni
tanımladığınızı ve ona bir değer verdiğinizi düşünün. Daha sonra yazacağınız bütün fonksiyonlarda veya
değerini belirleyebileceğiniz otomatik fonksiyonlarda (metod’larda) bu değişkeni bir daha tanımlamaya
ve değerini belirlemeye gerek kalmadan kullanabilirsiniz; çünkü Javascript açısından bu değişken genel
(global) değişken sayılır. Daha sonra ayrıntılı olarak göreceğimiz gibi, HTML’in gövde kısmında (BODY
etiketi içinde) bir fonksiyon yazdığımızı ve bu fonksiyonun içinde bir değişken tanımladığımızı düşünün.
Daha sonra yazacağınız bir fonksiyonda bu değişkeni kullanamazsınız; çünkü Javascript bir fonksiyonun
içindeki değişkeni yerel (local) değişken sayar ve kendi yetki alanı (scope’u) dışında kullanmanıza izin
vermez. Bir yerel değişken, ait olduğu fonksiyon çağrıldığı anda oluşturulur ve fonksiyonun icrası bittiği
anda yok edilir. Dolayısıyla bir fonksiyon, başka bir fonksiyonun yerel değişkinini kullanmaya
kalktığında “undefined” (tanımlanmamış) değişken hatasıyla karşılaşırsınız.

Bir değişkeni bütün HTML sayfası boyunca kullanmayı düşünüyorsanız, bu değişkeni, HTML sayfasının
başında içinde fonksiyon bulunmayan bir SCRIPT bölümünde tanımlamalı ve doldurmalısınız. İyi bir
programlama tekniği, genel değişkenleri, açık-seçik tanımlamak ve bunu yorum satırıyla belirtmektir:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript">
var metin1 = "Merhaba Dünya!"
function merhaba()
{ alert(metin1)
}
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<INPUT TYPE="SUBMIT" NAME="btn" VALUE="TIKLAYIN!" onclick="merhaba()">

21
</FORM>
</BODY>
</HTML>

Bu kodu da [Link] adıyla kaydedebilirsiniz.

Dizi-Değişkenler (Array)

Javascript’in şu ana kadar ele aldığımız bütün değişkenleri, tekildir. Yani bu değişkenlerden Javascript
bakımından sadece bir adet vardır; dolayısıyla bir adet de değeri bulunur.

Oysa şimdi şöyle bir durum düşünün: Evcil kuşları tanıttığınız bir site yapıyorsunuz. Ele alacağınız bütün
kuşları ve özelliklerini bir tablo olarak düşünebilir misiniz? Kuş-1: Kanarya, Kuş-2: Bülbül, Kuş-3:
Muhabbet Kuş-4: Papağan, gibi. Bunların hepsini tek tek tanımlamaya kalkarsak, daha sonra kullanım
zorluğu doğabilirdi. Javascript, bize “dizi-değişken” (Array) yoluyla, örneğin bir “kuş” değişkeni
oluşturup, bunun içine istediğimiz kadar değer koyma imkanı veriyor. Bir dizi-değişkenin bireylerinin
değerlerini dizi-değişkenin endeksi ile çağırabilir veya belirleyebilirsiniz.

Bir dizi-değişken oluşturmanın formülü şudur:

var dizinin_Adı = new Array(unsur1, unsur2, unsur3...unsurN)

22
Bu formüle göre, kuş dizisini şöyle oluşturabiliriz:

var kusDizi = new Array(bülbül, kanarya, muhabbet, papagan)

Diziler (nedendir, bilinmez) sıfırdan itibaren numaralanır; yani bizim örneğimizde dizinin birinci üyesi
kusDizi[0], ikinci üyesi kusDizi[1], üçüncü üyesi kusDizi[2], dördüncü üyesi ise kusDizi[3] diye anılır.
Burada örneğin kusDizi[2] değişkeni ”muhabbet” değerini taşır. İlerde bu değeri değiştirmek ve diyelim
ki “Saka” yapmak istersek, Javascript kodumuzun uygun yerinde şunu yazarız:

kusDizi[2]=”saka”

Dizi-değişkenleri, özellikle ele almamızın bir nedeni, dizilerin Javascript açısından nesne sayılmasıdır.
Bunun önemine ve kullanıldığı yerlere daha sonra değineceğiz; şimdilik şunu belirtelim: dizi-
değişkenlerin, nesne oldukları için özellikleri (property) vardır. Örneğin, oluşturduğum dizi-değişkenin
kaç üyesi olduğu, “[Link]” özelliğinin içinde yazılıdır. İlerde dizi-değişkenlerimizin üye
sayısından çok yararlanacağız.

Javascript’te İşlemler (Operator)

Program yazmanın amacı, bilgisayara işlem yaptırtmaktır. Javascript de bu açıdan farklı değildir: bir
değişkenin değerini alırsınız, bir işlemden geçirirsiniz; sonra ortaya çıkacak yeni değeri ya bildirirsiniz,
ya da yeni bir işlemde kullanırsınız. Tabiî herşey bu kadar kolay olsa idi, herkes programcı olurdu.
Herkes programcı olmadığına göre, söz gelimi “bir değişkeni almak” için önce değişkenin değerinin
nereden ve nasıl elde edileceğini bulmanız gerekir. Ayrıca yukarıda öğrendik ki, Javascript programları
Browser’ın pencere nesnesine veya penceresinde de görüntülediği belge nesnesinin bir unsuruna
hitaebeder. Dolayısıyla hangi nesnenin ne gibi nitelikleri olduğunu öğrenmemiz gerekir ki, işleme tabi
tuttuğumuz değerleri bu unsurların işine yarayacak şekle getirelim.

Javascript, eline verdiğiniz değişkenin türüne ve değişkenin değerine göre dört tür işlem yapar. Şimdi
bunları sırasıyla ele alalım:

Atama (Assignment) İşlemleri:

Javascript’te en sık yapacağınız işlem, bir değişkene bir değer atama işlemidir: “Adı” adlı değişkenin
değeri “Hakkı” olsun! “Soyadı” adlı değişkenin değeri “Öcal” olsun, gibi. Ve tahmin ettiğiniz gibi bunu
eşittir (=) işaretiyle yaparız:

var adi = “Ahmet”, soyadi = “Arif”

var siraNo = 123, sigortaNo = “A123-2345-234”

Javascript, bir eşittir işaretiyle karşılaştığında, önce işaretin sağına bakar ve değeri okur; sonra işaretin
soluna bakar ve bu adın, meşru bir değişkene ait olup olmadığını ve bu adla bilgisayarın belleğinde bir
yer açıp açamayacağını belirler. Eğer işaretin solundaki isim, meşru, yani önceden tanımlanmış veya
değeri belirlenmiş bir değişkene ait ise, o değişkenin bilgisayarın belleğindeki adresine işaretin

23
sağındaki değeri yazar. Değişken ismi yeni bir meşru isme aitse, Javascript bu değişkeni “initalize” eder,
yani hem yer açar, hem de içine değerini yazar. Değişken ismi kabul edilebilir nitelikte değilse, yani söz
gelimi altı çizgi (_) dışında bir işaretle veya rakamla başlıyorsa, içinde boşluk varsa, veya yasaklı
kelimelerden biri ise, Javascript hata mesajı verir.

Bu noktada sık yapılan bir hata, başka bir programlama dilinden kalma alışkanlıkla değişkeni sağa,
değeri sola yazmaktır: hakki = adi, gibi. Javascript bu durumda da hata mesajı verir; çünkü “hakki”
değişkenine “adi” değerini atamak için, sayı olmayan bu alfanümerik değerin ya tek, ya da çift tırnak
içine yazılması gerekir.

Javascript’te bir değişkene değer atarken, bu değeri mevcut bir veya daha fazla değişkenden de
alabilirsiniz:

var i = j + k

var indexNo = siraNo + kategoriNo

var tutariTL = birimFiyatTL * adet

Aritmetik İşlemleri:

İşte lisede matematik dersinde kaytarmamış olduğunuza şükredeceğiniz noktaya geldik: Javascript
(veya başka herhangi bir programlama dili) siz formülünü vermedikçe hiç bir hesabı yapamaz; ama
dünyanın en çapraşık, en karmaşık formülünü de verseniz, sonucu (bilgisayarınızın hızı ile orantılı
olarak) hesaplar.

Tabiî, Javascript, dört temel işlemi yapabilir. toplama işlemini artı işaretiyle (+), çıkartma işlemini eksi
işaretiyle (-), çarpma işlemini yıldız (asterisk, *) işaretiyle, ve bölme işlemini düz bölü işaretiyle (/)
yaptırırsınız.

Javascript, artı işaretini gördüğü zaman, işaretin hem sağına, hem de soluna aynı anda bakar ve
bulduğu iki değeri, sayı ise toplar, alfanümerik ise sağdakinin soldakinin arkasına ekler:

x=3+4

Javascript, bu işlemin sonucu olarak x adlı değişkene 7 değerini atar. Fakat kimi zaman, bir değişkenin
mevcut değerini (sıfır bile olsa) belirli bir miktarda arttırmak isteyebilirsiniz. Yani Javascript’e “x’in
mevcut değerine 3 ekle!” demek isteyebilirsiniz. Bunu, “x = x + 3” diye ifade ederiz. Eğer arttırılacak
miktar 1 ise, bunu daha kısa yazmak da mümkündür: ++x.

Javascript çıkartma işleminde de aynı kuralları uygular:

x=3-4

24
x=x-3

--x

Değişkenleri 1 arttırma veya 1 eksiltmeye yarayan kısaltmanın üzerinde biraz duralım. İlerde bol bol
örneklerini göreceğimiz gibi, Javascript programlarınızda bazı değişkenleri sayaç olarak kullanmak
isteyebilirsiniz. Bir işin sonuna geldiğimizi bilebilmek için, diyelim ki 12 kişilik bir adres listesini
Javascript’e okutup, sayfaya bir tablo çizdiriyorsak, Javascript’e listenin sona geldiğini belirtebilmek için
sayaç rakamı 12 veya 0 oldu ise durmasını emretmek zorundasınız. Bu durumda sayaç olarak
kullandığınız değişkenin değerini, her adres okunduğunda 1 arttırmak veya 1 eksiltmek, en kestirme
yoldur. Diyelim ki, x’in orijinal değeri 12. Javascript x-- veya --x işlemini gördüğü anda, 12’den 1
çıkartacak ve x’in yeni değeri olarak 11’i atayacaktır. Aynı şekilde ilk değer sıfır ise, x++ veya ++x
işlemini gördüğü anda x’in yeni değerini 1 yapacaktır.

Toplama ve çıkartma işlemlerinde yapabileceğiniz başka bir kısaltma ise şöyle yazılır:

x = x + y işlemini kısaltmak için x += y

x = x - y işlemini kısaltmak için x -= y

Bu bölümü bitirmeden önce, bir sayının değerini negatif yapmaktan da söz edelim. Bir değişkene
negatif değer atamak için, sayının önüne eksi işareti koymanız yeter: x = -5 gibi. Bir değişkene başka bir
değişkenin değerini negatif olarak atamak istiyorsanız, x = -y gibi yazabilirsiniz. y değişkeninin değeri
zaten negatif ise, x’e atanan değer pozitif olur.

Belki belirtmek bile gerekmez ama, Javascript, bölü işaretinin solundaki sayıyı, sağındaki sayıya böler;
yıldız (asterisk) işaretinin sağındaki ve solundaki sayıları birbiri ile çarpar.

Javascript, alfanümerik değerlerle çıkartma, çarpma ve bölme işlemleri yapmaz; sonucun yerine “NaN”
(Not a Number, Sayı Değil) yazar.

Karşılaştırma İşlemleri:

Javascript dahil, bütün bilgisayar programlarının ortak özelliği, programın bir noktada karar vermesidir:
“Filanca değişken şu değerde ise, falanca değişken ile şunu yap; o değerde değil de, bu değerde ise
bunu yap!” gibi. Bu tür komutlarda Javascript, sözünü ettiğiniz değişkenin değerini bulup, onu
verdiğiniz bir başka ölçütle karşılaştıracak ve varacağı sonuca göre emrettiğiniz işi yapacaktır.
Dolayısıyla Javascript’te bir takım karşılaştırma işlemlerine ihtiyacınız var demektir.

Javascript’in karşılaştırma operatörleri genellikle “if” (eğer..ise) ifadesiyle birlikte kullanılır; ve bu

soruyu soran satıra “true” (doğru) veya “false” (yanlış) sonucunu verir. Önce, bu işlemleri yaptırtan
operatörleri ve işlevlerini sıralayalım:

== Eşit operatörü. İşaretin sağında ve solundaki değerlerin eşit olması halinde true
(doğru) sonucunu gönderir.

25
 != Eşit değil operatörü. İşaretin sağında ve solundaki değerlerin eşit olmaması halinde
true (doğru) sonucunu gönderir.

> Büyüktür operatörü. Soldaki değer, dağdaki değerden büyük ise true (doğru) sonucunu
gönderir.

< Küçüktür operatörü. Soldaki değer, dağdaki değerden küçük ise true (doğru) sonucunu
gönderir.

>= Büyük veya eşit operatörü. Soldaki değer, dağdaki değerden büyük veya bu değere eşit
ise true (doğru) sonucunu gönderir.

<= Küçük veya eşit operatörü. Soldaki değer, dağdaki değerden küçük veya eşit ise true
(doğru) sonucunu gönderir.

Daha sonra örneklerini göreceğiz; ve karşılaştırma işleminden sonra ne olduğunu, Javascript’in nasıl bir
yol izlediğini ele alacağız. Şimdi sadece böyle bir karşılaştırma işleminde nasıl sonuç verdiğini görmekle
yönetinelim. Düz yazı programınızda şu HTML kodunu yazın ve [Link] adıyla kaydedin:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Karşılaştırma</TITLE>
<SCRIPT LANGUAGE="Javascript">
var x, y, z
x=7
y=7
z = 13
</SCRIPT>
</HEAD>
<BODY>
<PRE>

26
<SCRIPT LANGUAGE="Javascript">
[Link]("x = " + x)
[Link]("y = " + y)
[Link]("z = " + z)
[Link]("x değişkeni y değişkenine eşit mi, (x==y)? ")
[Link](x==y)
[Link]("y değişkeni z değişkenine eşit mi, (y==z)? ")
[Link](y==z)
</SCRIPT>
</PRE>
</BODY>
</HTML>

Bu kod bir tarafta açıkken, oluşturduğunuz dosyayı Browser’da açın ve sonuca bakın; sonra kodunuzda
x, y ve z değişkenlerinin değerini değiştirerek, Browser’a sayfayı yenilettirin; sonucun nasıl değiştiğini
inceleyin. Javascript’in sonuç true (doğru) ise nasıl ilerlediğini, sonuç false (yanlış) ise nasıl ilerlediğini
daha sonra ayrıntılı olarak göreceğiz. Fakat derhal öğrenmeniz gereken kuralı burada belirtelim:
Javascript, karşılaştırma sonucu doğru ise, karşılaştırma komutundan sonraki ilk emri (veya emir

27
grubunu), değilse bir sonraki emri (veya emir grubunu) icra eder. Bunun ayrıntılarını da ele alacağız.
Şimdilik sadece bu kuralı bir kenara yazın!

Bu konuyu bitirmeden, bir de ne ile neyi karşılaştırabileceğinizden söz edelim. Javascript 1.0’de
elmalarla (sayılarla) armutları (alfanümerik değişkenleri) karşılaştırabilir ve doğru sonucunu verebilirdi.
Yani, Javascript 1.0 açısından 7 ile “7” eşitti; Javascript önce karşılaştırılan değişkeni sayıya çevirip
çeviremeyeceğine bakar; çevirebiliyorsa, karşılaştırmayı yapardı. Daha sonraki sürümlerinde durum
değişti; Javascript’i tasarlayanlar bu çevirme işlemini programcıya bıraktılar; dolayısıyla Javascript
elmalarla armutları ayırteder oldu!

Alfanümerik İşlemleri:

Javascript’in alfanümerik değişkenlerin değerleri ile sadece toplama işlemi yaptığını söylemiştik. Bu
durumda buna toplama değil birleştirme, ekleme işlemi denir.

Aşağıdaki kodu düz yazı programınızla oluşturup, [Link] adıyla kaydederseniz ve Browser’ınızda
incelelerseniz, Javascript’in alfanümerik değerleri nasıl birleştirdiğini görmüş olursunuz:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Birleştirme</TITLE>
<SCRIPT LANGUAGE="Javascript">
var a, b, c, d
a = "www"
b = "pcworld"
c = "com"
d = "tr"
[Link]("a değişkeninin değeri: \""+a+"\".")
[Link]("b değişkeninin değeri: \""+b+"\".")
[Link]("c değişkeninin değeri: \""+c+"\".")
[Link]("d değişkeninin değeri: \""+d+"\".")
[Link]("\nŞimdi bunları birleştirelim:\n")

28
[Link]("a + b = ")
[Link](a + b)
[Link]("\nAralarına nokta koyalım: ")
[Link](a + "." + b)
[Link]("\nŞimdi c değişkenini, noktasıyla birlikte ekleyelim: ")
[Link](a + "." + b + "." + c)
[Link]("\nŞimdi de d değişkenini, noktasıyla birlikte ekleyelim: ")
[Link](a + "." + b + "." + c + "." + d)
[Link]("\nİşte a + b + c + d'nin sonucu: ")
[Link](a + "." + b + "." + c + "." + d)
</SCRIPT>
</PRE>
</BODY>
</HTML>

Bu dosyada, iki tür yazdırma komutu kullandığımıza dikkat ediyor musunuz: “[Link]()” ve
“[Link]()”. Bu iki komut arasındaki farkı bulabilir misiniz? (İpucu: “[Link]()”
yönteminde satırbaşı yaptırtmak için “\n” kullanıyoruz!)

29
Şartlı İşlemler:

Javascript’te karşılaştırma yaparken şartlı (..ise ..yap!) işlemler de yaptırabilirsiniz. Şartlı işlemlerde ?
(soru işareti) ve : (iki nokta üstüste) işaretlerini kullanırsınız.

[Link] dosyasının bütün “[Link]..” kodlarını silin ve yerine şu satırı yazarak,

[Link] adıyla kaydedin.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript">
var x, y, z
x = "Ali"
y = "Ali"
z = "Veli"</SCRIPT>
</HEAD>
<BODY >
<PRE>
<SCRIPT LANGUAGE="JavaScript">
sonucMsg = (y==x)?"y degiskeni x degiskenine esit!" : "y degiskeni x degiskenine esit
degil!"
alert(sonucMsg)
</SCRIPT>
</PRE>
</BODY>
</HTML>

Kod dosyası düz yazı programında açıkken, [Link]’i Browser’da açın. Uyarı kutusunda, iki
değişkenin eşit olması şarti halinde görüntülenmesini istediğiniz mesajı göreceksiniz. Dosyada

30
değişkenlerin değerini değiştirerek, sonucu inceleyin. Bunu sağlayan şartlı işlem komutu üç bölümden
oluşuyor: şartın doğru olup olmadığını sorguladığınız, soru işaretine kadar olan karşılaştırma bölümü;
iki nokta üstüste işaretine kadar olan şart doğru ise uygulanacak bölüm, sonra satır sonuna kadar olan
şart yanlış ise uygulanacak bölüm. Yukarıda, “Javascript bir karşılaştırma yaptıktan sonra karşılaştırma
sonucu doğru ise, karşılaştırma işleminden sonraki ilk komutu icra eder” demiştik. Burada da, x
değişkeni ile y değişkeni aynı olduğu zaman, soru işaretiyle biten karşılaştırma işleminden hemen
sonraki ilk komut (veya ifade) seçiliyor; değişkenler aynı olmadığı taktirde, iki nokta üstüste işaretinden
sonra gelen komut (veya ifade) seçiliyor.

Mantıksal İşlemler:

Javascript, karşılaştırma işlemini Boolean (.. ve .. doğru ise ... yap!) mantıksal işlemlerini kullanarak da
yapabilir. Burada, Boolean mantığından kısaca söz edelim.

Şimdi, bir baba, kızı Ayşe ile oğlu Ali’ye diyor ki, “İkiniz de sınıfını geçerseniz, bu yıl sizi Antalya’ya deniz
kenarında bir ay geçirmek üzere teyzenizin evine göndereceğiz!” Ali sınıfını geçer, Ayşe geçemezse iki
çocuk da teyzelerine gidemeyecekler; Ali sınıfını geçer, Ayşe de geçerse, iki çocuk da Antalya’ya
gidecek; Ali de, Ayşe de sınıflarını geçemezse, iki çocuk da yaz tatilini oturdukları yerde geçirecekler.

31
Javascript’in Boolean mantığını sorgulama işaretleri şunlardır:

&& Mantıksal Ve: iki koşul da doğru.

|| Mantıksal Veya: ya birinci, ya da ikinci koşul doğru.

! Mantıksal Değil: Tek koşula uygulanır; koşul doğru ise sonuç false (yanlış), koşul yanlış ise sonuç
true (doğru) olur.

Bu mantığı, şimdi Boolean ifadesi haline getirelim:

Ali=geçti && Ayşe=geçti : çocukların ikisi de tatile gidiyor.

Ali=geçti || Ayşe=geçti : çocukların ikisi de tatile gidemiyor.

!(Ali=geçti) : çocukların ikisi de tatile gidemiyor.

!(Ayşe=geçti) : çocukların ikisi de tatile gidemiyor.

İşlemlerde Sıra:

Javascript’te işlemler yukarıdan aşağı ve soldan sağa yapılır, ama aritmetik işlemlerde bu kuralın bazı
istisnaları vardır. Javascript kodlarınızda beklediğiniz sonuçları alamıyorsanız, önce işlemlerinizi işlem
sırasına uygun yazıp yazmadığınızı kontrol edin.

Javascript’te işlemlerin genel sırası şöyledir: Atama işlemleri, şartlı işlemler, mantıksal ve/veya/değil
işlemleri, karşılaştırma işlemleri, aritmetik işlemler, fonksiyonlar.

Javascript’te aritmetik işlemler ilke olarak soldan sağa doğru yapılır. Örneğin

x=a*b+c

denklemi çözülürken, önce a ile b çarpılır, elde edilecek sayıya c eklenir.

Fakat bir denklemde parantez içine alınmış ifade varsa, Javascript önce parantezin içini halleder.
Örneğin

x = a * (b + c)

denklemin önce b ile c toplanır, elde edilecek sayı a ile çarpılır.

Eğer bir işlemde Javascript aritmetik işlemleri sıraya sokmak zorunda kalırsa, toplama, çıkartma,
çarpma ve bölme sırasıyla yapar. İşlemlerin sırası konusunda kuşkunuz varsa, mümkün olduğu kadar
çok parantez kullanın.

32
Program Akış Denetimi

Javascript veya bir başka programlama dili ile yazacağınız programda, zaman zaman programın akışını,
programa bırakmanız gerekir. Programcı olarak siz, programın izleyeceği alternatif yolları belirlersiniz;
fakat bu yollardan hangisini izleyeceğine, sizin koyduğunuz şartları değerlendirerek program kendisi
karar verir. Programcılığın gerçek anlamda zevki de bu noktada başlar. Şimdi Javascript’in programın
akışını kontrolde kullanacağınız unsurlarını tanımaya başlayalım.

Aşağıda yazacağımız iki Javascript kodunda Browser’a, ziyaretçinin ekranındaki bir form unsurunun
içini doldurtma tekniğini kullanacağız. Henüz ele almadığımız bu tekniğin ayrıntılarını FORM nesnesinin
özelliklerine değinirken ele alacağız.

If (Eğer .. ise)

Javascript programının, bir değişkenin değerine göre yönlenmesini sağlayan ilk aracı, “if” (eğer)
ifadesidir. İşte size program akışını “if” yoluyla kontrol eden bir HTML sayfası:

<!DOCTYPE html>
<html lang="tr">
<HEAD>
<meta charset="UTF-8">
<TITLE>Javascript'te Mukayese</TITLE>
<SCRIPT LANGUAGE="Javascript">
function goster(secme)
{
var endeks, secilenYemek
endeks=[Link]
secilenYemek=[Link][endeks].text
if (secilenYemek == "Adana Kebap")
{
[Link]=secilenYemek + " seçtiniz! Bravo!"
}
if (secilenYemek == "Yogurtlu Iskender")
{
[Link]=secilenYemek + " seçtiniz. Sizi tebrik ederiz!"

33
 }
if (secilenYemek == "Biber Dolma")
{
[Link]=secilenYemek + " seçtiniz. Zevkinize hayranız!"
}
if (secilenYemek == "Yaprak Sarma")
{
[Link]=secilenYemek + " yapması biraz zordur; ama çok
lezizdir"
}
}
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="tarifForm">
<P>Hangi yemeğin tarifini istiyorsunuz? Lütfen istediğiniz yemeği seçin:</P>
<SELECT NAME="yemeklistesi" onChange="goster(this)">
<OPTION SELECTED> Bir yemek seçiniz
<OPTION> Adana Kebap
<OPTION> Yogurtlu Iskender
<OPTION> Biber Dolma
<OPTION> Yaprak Sarma
</SELECT>
<P></P>
<INPUT NAME="tarif" VALUE="" SIZE=55>
</FORM>

34
</BODY>
</HTML>

Bu sayfayı [Link] adıyla kaydedin ve Browser’inizde açın. Şimdilik, yemek tariflerini

vermediğimize aldırmayın. Daha sonra bunu yapmanın yolunu da göreceğiz. Bu sayfadaki Javascript
kodunda “goster()” isimli bir fonksiyon var; bu fonksiyon kendisini harekete geçmeye çağıran nesnenin
kendisine “secme” adı altında bir takım bilgiler göndermesini şart koşuyor. Sayfamızda yer alan ve adı
“tarifForm” olan FORM nesnesi, kendi unsurlarından SELECT nesnesindeki her değişiklikte, “goster”
fonksiyonunu harekete geçiriyor. “yemeklistesi” isimli SELECT etiketinin içindeki onChange (değişiklik
halinde) isimli Javascript komutu, bir metod’tur ve burada kendi unsurlarını ve değerlerini topluca
“gonder” fonksiyonuna gönderecektir. (Şimdilik bu metod ve metodu kullanırken yazdığımız THIS
ifadesi üzerinde durmayın. Sırası gelecek.)

Fonksiyonun başında iki değişken tanımlıyoruz: endeks ve secilenYemek. Endeks değişkeninin değeri,
fonksiyona gönderilecek nesnelerden birinden alınıyor. Bu nesne “selectedIndex” adını taşıyor.
“selectedIndex” denen şeyin, HTML belgesinin Form nesnesinin bir özelliği (property) olduğunu
belirtmekle yetinelim; ayrıntılarını Form nesnesinin özelliklerini incelerken göreceğiz. Bir Form’un
içinde SELECT nesnesi varsa, Browser mevcut SELECT ögelerini dizi-değişken yaparak 0’dan itiberen
numaralar ve kullanıcının seçtiği SELECT ögesinin numarası “selectedIndex” adıyla bir kenara kaydeder.

Fonksiyonumuzdaki ikinci değişken olan “secilenYemek” değişkeni de değerini, SELECT nesnesinin

seçilen ögesinin metninden alıyor. Şimdilik bu tanımlar sizin için anlam ifade etmiyorsa, üzerinde
durmayın; iki değişkenimize ziyaretçinin sayfada yapacağı tercihe bağlı olarak değerler kazandırdığımızı
düşünün. Şimdi dikkatimizi şu satıra verelim:

if (secilenYemek == "Adana Kebap")

35
Yukarıda öğrendiğimize göre, bu satırdaki ifadede Javascript’e ne demiş oluyoruz? “Ey Javascript,
‘secilenYemek’ adlı değişkenin değerine bak; orada gördüğün metin, ‘Adana Kebap’ alfanümerik değeri
ile aynı ise, bu satırdan hemen sonraki işi yap! aynı değilse, ber sonraki satıra git, oradaki işi yap!”
diyoruz. Buradaki “aynı ise” ifadesini, “==” işaretleriyle sağladığımızı biliyorsunuz; “hemen sonraki iş”
ifadesinin de bir karşılaştırma komutu doğru sonuç verirse, Javascript’in bu karşılaştırma komutundan
hemen sonra gelen satırdaki işi yapmasından kaynaklandığını hatırlıyorsunuz. Ziyaretçi “Adana Kebap”
seçeneğini seçti ise, “Seçim, Adana Kebap ise” sorgulamasının sonucu doğru olacak, ve Javascript

[Link]=secilenYemek + " seçtiniz! Bravo!"

komutunu icra ederek, ekrana “secilenYemek” değişkeninin değeri yazacak ve buna “seçtiniz! Bravo!”
kelimelerini ekleyecektir. Sorgulamanın sonucu doğru değil ise, yani ziyaretçi Adana Kebap’ı
seçmemişse, Javascript bir sonraki satırına atlayacaktır. Burada “bir sonraki satır” ile şu anda içinde
bulunduğumuz “if” ifadesinin açılan ve kapanan süslü parantezle belirlenen sınırının bittiği yeri
kastediyoruz. Yazma kolaylığı bakımından ve açtığımız parantezi kapattığımızdan emin olmak için süslü
parantezleri ayrı satırlara yazarız. Ama bu şart değildir. Yani istese idik, burada üç satıra yayılan
“sonraki satır” aslında tek satırda yazılabilirdi.

Javascript’in, ziyaretçinin Adana Kebap’ı seçmemesi halinde atlayacağı bir sonraki satırda da bir “if”
ifadesi var. Javascript bu kez bu sorgulamanın sonucunu alacak ve bu sorgulama doğru sonuç verirse
(yani ziyaretçi Yoğurtlu İskender’i seçmişse), hemen sonraki satırı, seçmemişse, bir sonraki satırı icra
edecektir. Böylece dört sorgulamayı da bitiren Javascript, çalışmasına son verecektir. Taa ki, ziyaretçi,
yeni bir tercih yapıncaya kadar. SELECT etiketinin içindeki onChange (değişiklik halinde) yönlendiricisi,
bu kutuda olacak her değişiklikte, formun SELECT nesnesinin ögelerini topluca “gosder” fonksiyonuna
gönderecektir.

Bir “if” sorgusunun içinde bir veya daha fazla “if” bulunabilir. Böyle iç-içe “if” ifadesi yazarsanız,
herbirinin icra alanının başladığı ve bittiği yeri gösteren süslü parantezlerine dikkat edin.

If ... Else (Eğer .. Diğer)

Kimi zaman bu kadar çok seçeneğe tek tek “if” ifadesi yazmak gerekmeyen durumlar olabilir.
Javascript’e “Eğer şu değişkenin değeri şu işe şunu yap, diğer bütün durumlarda ise şunu yap!” demek
istiyebilirsiniz. “If... Else” ifadesi ile bunu sağlarız.

denetim1.’in dört “if” ifadesini de silin ve yerine şunları yazın:

if (secilenYemek != "Adana Kebap")

36
 {
[Link]=secilenYemek + " tarifini veremiyoruz!"
}
else
{
[Link]="Adana Kebap Tarifini asağıda sunuyoruz:"
}

Bu sayfayı [Link] adıyla kaydedin ve Browser’inizde açın. Şimdi dikkatimizi şu satıra verelim:

if (secilenYemek != "Adana Kebap")

Yukarıda öğrendiğimize göre, bu satırdaki ifadede Javascript’e “Ey Javascript, ‘secilenYemek’ adlı
değişkenin değerine bak; orada gördüğün metin, ‘Adana Kebap’ alfanümerik değeri ile aynı değil ise,
bu satırdan hemen sonraki işi yap!” demiş oluyoruz. Buradaki “aynı değil ise” ifadesini, “!=”
işaretleriyle sağlıyoruz; “hemen sonraki iş” ifadesinin de bir karşılaştırma komutu doğru sonuç verirse,
Javascript’in bu karşılaştırma komutundan hemen sonra gelen satırdaki işi yapmasından
kaynaklandığını hatırlıyorsunuz. Ziyaretçi “Adana Kebap” seçeneğini seçmedi ise, “Seçim, Adana Kebap
değil ise” sorgulamasının sonucu doğru olacak, ve Javascript

[Link]=secilenYemek + " tarifini veremiyoruz!"

37
komutunu icra ederek, ekrana “secilenYemek” değişkeninin değeri yazacak ve buna “tarifini
veremiyoruz!” kelimelerini ekleyecektir. Sorgulamanın sonucu doğru değil ise, yani ziyaretçi Adana
Kebap’ı seçmişse, Javascript sorgulamanın sonucunun “diğer” sınıfına girdiğini anlayacak ve “Else”
ifadesini icra edecektir. Yani ekrana “Adana Kebap Tarifini aşağıda sunuyoruz:” yazacaktır. (Tarifi
vermediğimizin üzerinde de durmayın. İlerde bu tür uzun ifadeleri Javascript ile sayfaya yazdırmanın
yollarını da göreceğiz.)

Özetlersek, “if” ifadesinde ileri sürdüğünüz şart doğru ise ilk komut dizisi, doğru değilse “Else”
bölümündeki komut dizisi icra edilir.

Program Döngü Denetimi

Javascript’te bazen işler yukarıdaki örnekte olduğu gibi açık ve belirgin şartlara bağlı ve bir kere icra
edilecek türden olmayabilir. Javascript, bir işi belirli (veya kendi belirleyeceği) kere yapmasını
isteyebilirsiniz. Bu tür tekrarlanan işleri Javascript’e bir kaç satırlık bir kodla yaptırtmak çoğu kez bizi
sayfalar dolusu kod yazmaktan kurtarır.

“for” döngüsü

Diyelim ki, sitenizde santigrad dereceyi fahrenhayt dereceye çeviren tablo sunmak istiyorsunuz. 0’dan
100’e kadar bütün santigrad derecelerin (fahrenhayt = santigrad * 9 / 5 + 32 ) formülüyle karşılığını
bulup, bir tabloya yazabilirsiniz. Hesabı yapmanın güçlüğünün yanı sıra, HTML kodunuz tam 100 adet
<TR><TD>..</TD><TD>..</TD></TR> kodu içerecektir. Oysa bunu iki satırlık bir Javascript kodu ile
Browser’a yaptırabilirsiniz. Aşağıdaki kodu, [Link] adıyla kaydedin ve Browser’ınızda açın:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te döngü</TITLE>
<SCRIPT LANGUAGE="Javascript">
[Link]("<TABLE Border=\"1\">")
[Link]("<TR><TD>Santigrad</TD><TD>Fahrenhayt</TD></TR>")
for (santigrad = 0; santigrad <= 100; ++santigrad)
{
fahrenhayt = santigrad * 9 / 5 + 32
[Link]("<TR><TD>" + santigrad + "</TD><TD>" + fahrenhayt + "</TD></TR>")
}

38
[Link]("</TABLE>")
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Burada “for” ifadesiyle tekrarlanan bir döngü oluşturuyoruz. “for” döngüsüne geçmeden Javascript’e,
sayfaya bir kaç HTML komutu göndermesini bildiriyoruz; bu komutlar sayfada bir tablo başlatıyor;
tablonun birinci sırasına iki kutu oluşturarak, içlerine “Santigrad” ve “Fahrenhayt” yazıyor. Şimdi asıl,
“for” ifadesi üzerinde duralım:

“for” ile oluşturacağımız döngü, bir sayaca göre ilerler. Burada sayaç olarak “santigrad” adında bir
değişken oluşturuyoruz, Javascript’e “Santigrad adında bir değişken yap, içine 0 değerini koy; ve bu
değişken 100’den küçük veya 100’e eşit ise bazı işler yap!” demiş oluyoruz. Bu arada Javascript, diğer
dillerin benzeri komutuna göre bize bir kolaylık sağlıyor: Javascript’in her döngü yapacağı işten sonra
santigrad’ın mevcut değerine 1 eklemesini aynı satırda ve kolayca sağlıyoruz. “for” işleminin
başladığını belirten açılan süslü parantezden sonra Javascript’e her döngüde yapacağı iki işi
bildiriyoruz:

fahrenhayt = santigrad * 9 / 5 + 32
Bu komutla Javascript, “fahrenhayt” adını verdiği bir değişken oluşturuyor ve ilk değer olarak,
santigrad değişkeninin değerini 9 ile çarpıp, 5’e bölüyor, bulduğu sayıya 32 ekliyor. ilk turda, santigrad

39
değişkeninin değeri 0 olduğuna göre, fahrenhayt değişkeninin değeri 32 olarak bulunuyor; ve
Javascript ikinci işe geçiyor:

[Link]("<TR><TD>" + santigrad + "</TD><TD>" + fahrenhayt + "</TD></TR>")

Bu iş ise, sayfaya bir tablo sırası ile bir tablo kutusu göndermek; bu kutunun içine santigrad
değişkeninin değerini yazmak; sonra bu kutuyu kapatıp yeni bir kutu açmak; bu kutunun içine
fahrenhayt değişkenini değerini yazarak, kutuyu ve tablo sırasını kapatmaktan ibaret.

Javascript, birinci turu bitirdiğinde, “for” komutunun tayin ettiği ölçüde sayaç değişkeninin arttırıp
veya azaltıp, ikinci tura başlayacaktır. Bu ne zamana kadar böyle devam edip gidecektir? Sayaç
değişkeninin değeri, tayin ettiğiniz sınına ulaşıncaya kadar. Nedir bu sınır: santigrad değişkeninin
değerinin 100’e eşitlenmesi. Bu kadar uzun bir tablo vermek istemiyorsanız, bu değeri istediğiniz bir
sayıya indirebilirsiniz ve sayacı birer birer arttırma yerine, mesela beşer beşer attırabilirsiniz. Sayacı
beşer-beşer arttırmak için “for” komutunun son argümanını “santigrad +=5” şeklinde yazmalısınız.

“Break” ve “Continue”

Şartlı döngüde, tekrar eden iş, şartın yerine geldiği noktada kendiliğinden kesilecektir. Aynı
otomasyonu “for” döngüsünde break (kes) ve continue (devam et) komutlarıyla biz de sağlayabiliriz.

Javascript, Break ile karşılaştığı anda döngüyü keser ve icraata döngüden sonraki ilk ifadeden devam
eder. Continue ise Javascript’in döngünün o andaki adımını durdurup, döngünün başına dönmesini
sağlar; döngü baştan devam eder.

[Link] adıyla kaydettiğiniz dosyada, fahrenhayt’ı hesaplattırdığınız komutla, bunu HTML

belgesine yazdırdığınız komut arasına şu satırı koyarak, dosyayı, [Link] adıyla saklayın.

if (santigrad == 5) continue

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te döngü</TITLE>
<SCRIPT LANGUAGE="Javascript">
[Link]("<TABLE Border=\"1\">")
[Link]("<TR><TD>Santigrad</TD><TD>Fahrenhayt</TD></TR>")
for (santigrad = 0; santigrad <= 100; ++santigrad)
{

40
fahrenhayt = santigrad * 9 / 5 + 32
if (santigrad == 5) continue
[Link]("<TR><TD>" + santigrad + "</TD><TD>" + fahrenhayt + "</TD></TR>")
}
[Link]("</TABLE>")
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Browser’da incelediğinizde, Fahrenhayt derecenin 5 santigrad derece için hesaplanmadığını

göreceksiniz. Eklediğiniz satırdaki “continue” komutu, santigrad 5’e eşitlendiğinde, döngüyü olduğu
yerde keserek, bir sonraki adımdan yeniden başlattı.

Eklediğiniz bu satırdaki “continue” kelimesini “break” diye değiştirir, dosyayı [Link] adıyla
kaydeder ve sayfayı Browser’da açarsanız, bu kez listenin 4’de kesildiğini göreceksiniz; çünkü break
komutu döngüyü olduğu yerde durdurup, Javascript’i bir sonraki adımdan devama zorladı.

41
Şartlı döngü: while

Javascript kodu yazarken öyle durumlar olabilir ki, programın sayaç değişkeninin her değeri için
yapmasını istediğiniz işi yapmasındansa, sadece belirli bir şart karşılanıyorsa yapmasını tercih
edebilirsiniz. Bunu “while” (...iken) ifadesiyle sağlarız. Bu yöntemle Javascript’e “filanca işi yap, ama
falanca şart varsa (veya yoksa)” demiş oluruz.

“while” ile kuracağınız döngünün şartı rolünü oynayacak değişkenin daha önceden oluşturulması,
içeriğinin başka bir yöntemle belirlenmesi ve değiştirilmesi gerekir; “for” döngüsünün aksine “while”
şartlı döngüsü bunu sizin için otomatik olarak yapmaz. Ayrıca koyduğunu şarta bağlı olarak, “while”
döngüsü sırasında yapılmasını istediğiniz iş hiç yapılmayabilir.

Diyelim ki, bir elektronik ticaret siteniz var; ve müşteri adayı ziyaretçileriniz, bazı malları Web
sayfanızda toptan ısmarlayabilirler. Böyle bir siparişi alabilmek için, o maldan stokunuzda yeterli
miktarda bulunması gerekir. Aşağıdaki kodu [Link] adıyla kaydederseniz, ısmarlanan bir miktar
üzerinden kaç sipariş karşılayabileceğini sayfanız otomatik olarak hesaplayacaktır.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te döngü</TITLE>
<SCRIPT LANGUAGE="Javascript">
var stok = 700

42
</SCRIPT>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript">
function hesapla(miktar)
{
var endeks, talepMiktar, satis

endeks=[Link]
talepMiktar=[Link][endeks].text
satis = 0
while (talepMiktar < stok)
{
stok = stok - talepMiktar
satis++
}
[Link]=talepMiktar + " ton itibariyle "+ satis + " adet sipariş için
stokumuz var!"
}
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="miktarForm">
<P>Alacağınız miktarı lütfen seçiniz:</P>
<SELECT NAME="miktar" onChange="hesapla(this)">

43
<OPTION SELECTED> Miktarı seçiniz
<OPTION>100
<OPTION>200
<OPTION>300
<OPTION>400
</SELECT>
<P></P>
<INPUT NAME="sonuc" VALUE="" SIZE=55>
</FORM>
</BODY>
</HTML>

Bu kodun da bir çok unsuru üzerinde durmayalım; bizi döngü açısından ilgilendiren bölümlerini ele
alalım. Gördüğünüz gibi üç değişken tanımlıyoruz; “stok” değişkeninin değerini biz veriyoruz;
miktarTalep değişkeni ise sayfamızdaki Form nesnesinin “miktar” adlı SELECT nesnesinden alınıyor. Bu
arada, işlemi yapan fonksiyonun içinde “satıs” adlı bir değişken oluşturuyoruz ve değerinin, döngünün
içinde birer birer artmasını sağlıyoruz. Bu kodun mantığı, müşterinin sipariş vereceği miktarda,
stokumuzdan kaç adet toptan satış yapılacağını bilmek olduğuna göre, Javascript, döngünün içinde
çalışırken şöyle düşünecektir:

44
“Benden, stok değişkeninin değerinden talepMiktar değişkeninin değeri kadar çıkartmam; sonra da
satıs adlı değişkenin değerini bir adet arttırmam isteniyor. Ama bunu ancak ve sadece talepMiktar
değişkeninin değeri stok değişkeninin değerinden az iken yapabilirim!”

Nitekim Javascript, talepMiktar değişkeninin değeri stok değişkeninin değerine eşit veya fazla hale
geldiği anda, döngüye son verecek ve “while” ifadesinin dışına çıkacaktır. Döngüden çıktığı anda
Javascript’in yapacağı iş ise ekrandaki Form’un sonuc adlı kutusuna kendisine bildirilen metni
yazmaktan ibaret!

do...while

“while” döngüsünün, koyduğunuz şarta göre bazen hiç icra edilmeyebileceğini söyledik. Yukarıdaki
örnekte müşteri öyle bir rakam verir ki, sipariş miktarı stoktan yüksek olduğu için, hesaplama hiç
yapılmaz ve müşteriye kaç parti sevkiyat yapacağımızı değil, sevkiyat yapamayacağımızı bildiririz. Fakat
bazı durumlarda döngünün bir kere işlemesi, fakat ikinci ve daha sonraki seferler için bir değişkenin
değerine bakması gerekebilir. Akla gelecek ilk örnek, bir elektronik ticaret sitesinde, müşteriye bir malı
almak isteyip istemediği sorusudur. Bu soruyu bir kere sormak zorundayız; müşteri bu soruya “Hayır!”
yanıtını verirse, alış-veriş sorusunu soran döngüyü durdurmamız gerekir; müşteri alışverişe devam
etmek istediğini bildirirse, döngü devam edecek ve müşteriye alış-veriş sorusu yeniden sorulacaktır.

Bunu, do...while (Yap ... iken) komut grubuyla yapabiliriz. Do (Yap) komutu bir kere icra edilir ve ondan
sonra while (..iken) şartı aranır. Bu şart yerine geliyorsa, Do’daki komut yeniden icra edilir, şartın
değişip değişmediğine yeniden bakılır.

Düz yazı programında aşağıdaki kodu yazın ve [Link] adıyla kaydedin:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te döngü</TITLE>
<SCRIPT LANGUAGE="Javascript">
gecici = "Bir"
do
{
yanit = prompt(gecici + " gömlek almak ister misiniz?", "Evet")
gecici = "Bir başka"
}

45
while (yanit == "Evet")
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Bu programda Browser’ın kullanıcıdan bilgi alma aracı olan Prompt kutusunu kullanıyoruz; müşteri
adayına “bir” gömlek almak isteyip istemediğini soruyoruz. Buradaki “bir” kelimesi, geçici
değişkenimizden alınıyor; müşteri ikinci alış-verişini yapmaya karar verirse, bu değişkenin değerini “Bir

46
başka” olarak değiştiriyoruz. Bu programda, müşteri-ziyaretçinin ilk “Evet” yanıtı halinde sayfamızda
yapılabilecek siparişi alma, fiyatı bildirme, onay isteme ve benzeri işlerin hiç biri yok; Javascript sadece
aynı soruyu yeniden soruyor; taa ki ziyaretci Prompt kutusuna “Evet” dışında bir şey yazıncaya kadar.
Do komutu, while bölümüne yazdığınız şart değişinceye kadar icra edilecektir. (Tabiî, buradaki örnekte
bütün süreç, müşteri-ziyaretçinin Prompt kutusunda Cancel (İptal) düğmesine basmasıyla da sona
erecektir; ama bu Prompt kutusunun bir özelliğidir.)

“Switch”

Javascript’in switch (değiştir) komutu, programın bir değişkenin değerine göre, belirli bir işi yapmasını
sağlar. Sözgelimi, elektronik satış sitenizde, müşteri-ziyaretçiniz, alacağı gömleğin beden ölçüsünü
seçecek ve siz de bu ölçüye göre, siparişi kaydedecek ve müşteriye siparişin alındığını bildireceksiniz.
Javascript programının mantığı şöyle olacak: “Müşteri büyük beden’i seçti ise Büyük bedenle ilgili işleri
yap; küçük bedeni seçti ise küçük bedenle ilgili işleri yap; orta bedeni seçti ise orta bedenle ilgili işleri
yap!"

Javascript’e switch komutu, bir veri kümesi gösterilerek verilir ve bu veri kümesi içinde hangi değere
göre ne yapacağı case (halinde) ifadesiyle bildirilir: “Değerin A olması halinde şu işi yap; değerin B
olması halinde şu işi yap!” gibi. Şimdi şu kodu düzyazı programında yazın ve dosyayı [Link] adıyla
kaydedin:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te Switch</TITLE>
<SCRIPT LANGUAGE="Javascript">
var olcu
olcu = prompt("Ölçünüzü belirtin: B-Büyük K-Küçük O-Orta", "O")
switch (olcu)
{
case "O" :
case "o" :
alert ("Orta boy gömlek siparişiniz alındı!")
break
case "B" :

47
case "b" :
alert ("Büyük boy gömlek siparişiniz alındı!")
break
case "K" :
case "k" :
alert ("Küçük boy gömlek siparişiniz alındı!")
break
default: alert ("Lütfen beden ölçünüzü belirtiniz!")
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Bu sayfayı Browser’da açtığınızda, karşınıza bir diyalog kutusu gelecektir.

48
Bu kutuda varsayılan değer olarak Orta Boy ölçü için O harfi bulunuyor. isterseniz, komutta değişiklik
yaparak. bu kutuya istediğiniz değeri girebilirsiniz. Javascript, bu kutunun sağlayacağı değeri, “olcu” adı
altında, switch komutuna iletiyor; switch komutu da “olcu” bilgisinin üç ayrı halinde üç ayrı yanıt
veriyor. Böyle bir programı gerçek hayatta uygularken, yapılacak iş olarak sadece bir Alert kutusuyla
yetinmeyerek, söz gelimi bu noktada Javascript’i farklı fonksiyonlara sevkederek, diyelim ki bir sipariş
belgesi hazırlatabilirsiniz. Bu örnekte Javascript, olcu bilgisinin farklı hallerinde sadece farklı uyarı
kutuları vermekle yetiniyor. Bu programda dikkatinizi çeken bir diğer nokta, her bir hale ilişkin case
grubunda yer alan break komutu olmalı. Olcu isimli switch döngüsünün işi gerekli mesajı verdikten
sonra bittiğine göre, Javascript’in diğer case’leri değerlendirmesini önlememiz gerekir; bunu break ile
sağlıyoruz.

Ayrıca bu programda, ziyaretçi ile ilişkilerde gözönünde tutmanız gereken bir ilkenin uygulandığını
görüyorsunuz: ziyaretçinin büyük beden için büyük ya da küçük harf B tuşuna basacağını bilmediğimiz
için, kendimizi her iki ihtimale karşı da hazırlıyoruz. İyi bir programcılık tekniği, özellikle ziyaretçilerden
girdi beklediğiniz hallerde, büyük harf-küçük harf durumlarına karşı hazırlıklı olmaktır.

49
Javascript’te Fonksiyon

Javascript, klasik HTML’in yapamadığı şeyler yapabilir; ziyaretçiden veya ziyaretçinin Browser
programından alacağı bir bilgiyi değerlendirerek bir dizi işlem yapabilir; ziyaretçiyi sitemizde belli bir
sayfaya yönlendirebilir; kısaca sayfalarımıza ziyaretçi ile etkileşme imkanı kazandırır.

Yukarıdaki çeşitli örneklerde gördüğünüz işlerin çoğu bir kere başvurulan işlerdi; fakat çoğu zaman
sayfanızdaki bir Javascript işleminin defalarca yapılması gerekebilir. Hatta öyle işlemler olur ki,
Javascript, başka bir işi yapmadan önce, mutlaka bu işlemi yapmak isteyebilir.

Bu tür tekrarlanan işleri, bu işin yapılması için gerekli bilgi kümesi ve komutlarla birlikte bir grup haline
getirsek ve bu gruba bir isim versek; sonra bu iş kümesine ihtiyaç olduğu yerde Javascript’e “Filanca
isimli grubu al; içinde belirtilen işleri yap, sonra sonucu bu noktaya bildir!” desek; acaba işlerimiz daha
kolay hale gelmez mi?

İşte bu tür, bir isim altında toplanmış işlem paketlerine Function (işlev) adı verilir; Javascript kendisine
“Şu fonksiyonu yap!” dediğiniz noktada yapmakta olduğu durdurur ve fonksiyon paketindeki işleri
yapar; bu paket ortaya bir değişken veya sonuç çıkartıyorsa, o bilgiyi edinmiş olarak fonksiyon için
yarım bıraktığı işleme geri döner. Fonksiyon yazmanızdaki birinci sebep, büyük bir ihtimalle,
Javascript’e, Fonksiyon’un sağlayacağı bilgiyi kazandırmaktır.

Genel hatlarıyla fonksiyon, şu formüle göre yazılır:

function fonksiyonun_adı (argüman1, argüman2, ... argümanN){

işlemler
}
Fonksiyonlar mutlaka SCRIPT etiketinin içinde yer alır. Daha sonra kullanılacak (çağrılacak) olsa da
bütün fonksiyonlarınını HTML dosyasının HEAD bölümüne koymanız, Browser’ın Javascript
yorumlayıcısı bakımından sürat sağlar. İyi bir programlama tekniği, bir sayfada gerekli bütün
fonksiyonları, altalta, HTML’in HEAD bölümünde yer alacak bir SCRIPT etiketi içinde beyan etmek;
sonra ihtiyaç olduğu yerde yeni bir SCRIPT etiketi koyarak bu fonksiyonu göreve çağırmaktır.

Bir fonksiyon, kendisini göreve çağıran komuttan veya fonksiyondan veri kümesi (argument) alabilir.
Buna bir değerin fonksiyona geçirilmesi, ulaştırılması, verilmesi denilir. Bir fonksiyon, bir ya da daha
fazla argüman alabilir. Fonksiyonun argümanları, bir isim altında toplanır ve bu bilgi kümesinin
bölümlerine bu isimle atıfta bulunulur.

50
Fonksiyona değer gönderme ve değer alma

Bir fonksiyon ile Javascript programının diğer işlemlerinin ilk ilişkisi fonksiyona bir değer gönderme ve
ondan bir değer almaktır. Bir fonksiyon, yaptığı işin sonucu olarak, kendisini göreve çağıran komuta
veya fonksiyona kendi adıyla bir değer verebilir.

Bir örnek üzerinde düşünmeye başlayalım. Ziyaretçinizden telefon numarasını yazmasını istiyorsunuz.
Ziyaretçi de sayfada bir INPUT kutusuna veya PROMPT diyalog kutusuna telefon numarasını yazıyor.
Bu numarayı, sayfada başka bir programda veya bölümde kullanmadan önce, gerçekten doğru yazılıp
yazılmadığını irdelemek istiyorsunuz. Ziyaretçinin verdiği telefon numarasını bir fonksiyona havale
edebilirsiniz; bu fonksiyon telefon numarası arzu ettiğimiz biçimde yazılmışsa olumlu, yazılmamışsa
olumsuz yanıt verebilir. Bütün yapacağımız şey, ziyaretçiden alacağımız bilgiyi, bu fonksiyona argüman
olarak geçirmekten ibaret; fonksiyonun sonuç olarak verdiği değer doğru ise işleme devam edeceğiz,
değilse ziyaretçiyi uyararak, doğru bilgiyi girmesini isteyeceğiz.

Şimdi düz yazı programınızda şu kodu yazıp, [Link] adıyla kaydedin:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te Fonksiyon</TITLE>
<SCRIPT LANGUAGE="Javascript">
function dogruMu(numara)
{
var karakter = null
var durum = true
if([Link] != 13)
{
durum = false // durum değişkenin değeri değişti
}
else
{
for(var i = 0; i <= 12; i++) {
karakter = [Link](i)

51
 if ( i == 0 && karakter == "(" )
continue //birinci karakter parantez ise başa dön
else //değilse devam et
if( i == 4 && karakter == ")" )
continue //beşinci karakter parantez ise başa dön
else //değilse devam et
if( i == 8 && karakter == "-" )
continue //dokuzuncu karakter çizgi ise başa dön
else //değilse devam et
if( parseInt(karakter,10) >= 0 &&
parseInt(karakter,10) <= 9 )
continue //1, 4 ve 9 dışındaki karakter sayı ise devam et
else //değilse dur
{
durum = false //değişkenin değeri değişti
break //fonksiyon kesildi
}
}
}
return(durum) //çağıran işleme durum’un değeri bildirildi
}
</SCRIPT>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE = "Javascript">

52
// Ziyaretciden telefon numarasını isteyelim
numara = prompt("Lütfen telefon numaranızı yazınız [(333)111-2222 gibi]", "")
if(dogruMu(numara))
{
[Link]("Telefon numaranızı verdiğiniz için teşekkür ederiz.")
[Link]("Müşteri temsilciniz size ilk fırsatta arayacaktır")
}
else
{
[Link]("Numaranızı örnekte görüldüğü şekilde yazmanızı rica ederiz")
}
</SCRIPT>
</PRE>
</BODY>
</HTML>

Bu sayfada, önce “if(dogruMu(numara))” şeklindeki ifadeye dikkat edelim. Javascript, bu noktada

“dogruMu” fonksiyonu çağıracak, bunu yaparken de fonksiyona “numara” adı altında bir değer
geçirecektir. (Bu değeri, çeşitli şekillerde elde edebiliriz; bir Form nesnesinde INPUT kutusundan
alabileceğimiz gibi, burada olduğu gibi PROMPT diyalog kutusuyla da alabiliriz.) Fonksiyondan bütün
beklediğimiz “if” sorgulamasına “true” (doğru) veya “false” (yanlış) şeklinde bir karşılık vermesidir.
Yukarıda “if” döngüsünü ele alırken, yanıtın doğru olması halinde ilk bölümdeki, yanlış olması halinde
“else” bölümündeki komutların uygulandığını görmüştük. Şimdi burada dogruMu() fonksiyondan
“true” sonucu dönerse, sayfaya teşekkür mesajı ve bilgi notu iki satır halinde yazılacak; “false” sonucu
dönerse, ziyaretçi numarayı doğru yazması için uyarılacaktır. (Bu örnekte program bu noktada
kesiliyor, oysa gerçek hayatta bu noktada ziyaretçiye bilgi girme aracının yeniden sunulması gerekir.)

Şimdi fonksiyona dönebiliriz. dogruMu() fonksiyonu, kendisine görev verecek işlemden veya
fonksiyondan mutlaka bir argüman verilmesini istiyor. “numara” adıyla işleme sokulacak olan bu
argüman, fonksiyon için bir nesnedir. Bu arada fonksiyonumuz kendi işleri için bir değişken oluşturuyor
(karakter), ve içine boş değer koyuyor (null); daha sonra kendisinden beklenen değeri içine koyacağı
bir değişken oluşturuyor ve içine varsayılan değer olarak “true” kelimesini koyuyor. Aksi
kanıtlanmadığı taktirde, fonksiyonu göreve çağıran “if” döngüsüne bu değer bildirilecektir.

53
Fakat önce fonksiyonun gerçekten kendisine verilen bilgilerin, arzu edilen biçime uygun olup
olmadığını sınaması gerekir. Bu bilgiyi tutan “numara” nesnesi, nesne olduğu için bazı özelliklere
sahiptir; bu özelliklerden biri de uzunluğudur. Önce bu uzunluğun 13 karakter olup olmadığına
bakıyoruz. Ziyaretçi, telefon numarasını yazdığı halde parantezleri veya kesme çizgisini unuttuysa,
verdiği bilgilerin uzunluğu 13 karakterden az olacaktır, yani “[Link]” 13 olmayacak, “durum”
değişkenin değeri “false” olarak değiştirilecektir. Yok, numaranın karakter sayısı 13 ise, fonksiyonumuz
13 karakteri, bir “for” döngüsü çerçevesinde tek tek irdelemeye başlayacaktır.

charAt(i)

Fonksiyonlarda ve diğer tür işlemlerde kullanabileceğimiz bir Javascript kısaltması, “filanca yerdeki
karakter” diyebileceğimiz “charAt(i)” ifadesidir. Burada i yerine herhangi bir rakamı yazabilirsiniz. Bu
kısaltma ancak sayı ya da alfanümerik değer içeren değişkene veya nesneye uygulanabilir.

54
Buradaki örneğimizde, Javascript, karakter adını verdiği ve içini boş bıraktığı değişkenin değeri olarak,
“numara” nesnesinin o anda, o adımda irdelediği karakterini atamaktadır. Şimdi kendimizi Javascript’in
yerine koyalım, ve buradaki “for” döngüsünün birinci adımında ne yapacağımızı belirtelim:

“Hımm.. karakter değişkeninin değeri olarak numara nesnesinin i’nci karakterini atamam isteniyor.
Peki i nedir? 0. O halde karakter, nesnenin 0 numaralı ögesi olacaktır. Nedir bu: Açılan parantez. Güzel.
O halde, karakter eşittir açılan parantez. Sonra, eğer i değişkeni sıfır ve karakter açılan parantez ise
devam etmeliymişim! İkisi de doğru; o halde devam. O da ne? Devam etmem gereken yerde
“continue” komutu var. Yani, işi burada kes, “for” döngüsünün başına git ve yeniden başla diyorlar.
Peki, hadi en başa dönelim. i’yi bir adet arttıralım, 2 yapalım; 2, 12 olmadığı ve 12’den küçük olduğuna
göre devam edelim..”

İkinci adımda Javascript, karakter değişkeninin değeri olarak numara nesnesinin ikinci karakterini
atayacak ve, i artık sıfır olmadığı için ilk continue’den geri dönmeyecek ve birinci Else’i izleyen işi
yapacaktır. Bu işin ilk şartı i’nin dört olmasıdır. i bu anda 2 olduğuna göre, Javascript bu kez hiç bir
“continue”dan geri dönmeyecek ve en sondaki parseInt() işlemlerine ulaşacaktır. Ne zaman 1’nin
değeri dört olursa, ikinci if’in ikinci şartı olan dördüncü karakterin kapanan parantez olup olmadığı
irdelenecektir. Ziyaretçinin verdiği telefon numarasında dördüncü karakter kapanan parantez değil ise,
fonksiyon kesilecek ve durum değişkeninin değeri “false” olacak ve bu değer, fonksiyonu göreve
çağıran if döngüsüne bildirilecektir. Fonksiyon aynı sorguyu, dokuzuncu karakterin kesme çizgisi olup
olmadığını belirlemek için de yapacaktır.

parseInt(i,n)

Fonksiyona dikkat ederseniz, 0, 4 ve 9’ncu karakterlerdeki açılan ve kapanan parantez ve kesme çizgisi
irdelemelerinde başa dönmeyen döngülerde, Javascript en sonda if ile başlayan parseInt() şeklinde bir
ifadeyi icra ediyor.

Javascript, kendisine alfanümerik olarak verilen bir değişken değerini tamsayı (integer) veya kesirli
sayıya (float) çevirebilir. Alfanümerik değerleri tam veya kesirli sayıya çevirmek için, parseInt ve
parseFloat ifadelerini kullanırız. (Javascript’in sayı olarak verilen değişkeni alfanümerik değere (string)
çevirmesi için kullanılmaya hazır bir metod yoktur; bunun için toplama işlemi içeren bir fonksiyon
yazmanız gerekir.) Her iki metotta da, çevirme işleminin 10 tabanlı (decimal), 8 tabanlı (octal) veya 16
tabanlı (hexadecimal) olymasını istediğinizi, çevrilmesini istediğiniz alfanümerik değerden (veya bu
değeri temsil eden değişkenin adından) sonra bir virgül koyarak, 10, 8 veya 16 rakamı ile belirtmeniz
gerekir.

parseInt() metodu ile bazı çevirme işlemlerine örnek verirsek, parseInt(“123456.3333”), 123456
sonucunu verir. Çünkü bu metod kendisine verdiğiniz alfanümerik değerin içinde rakam ile artı ve eksi
işaretlerinden başka bir şey gördüğü noktada durur; o noktaya kadar gördüğü unsurları bir tamsayı
değişkeni olarak size geri verir.

55
parseFloat() metoduna da bir örnek verirsek, parseFloat(“123456.3333”), 123456.3333 sonucunu
verir. Çünkü bu metod kendisine verdiğiniz alfanümerik değerin içinde rakam ile artı ve eksi
işaretlerinin yanı sıra nokta işaretinden başka bir şey gördüğü noktada durur; o noktaya kadar gördüğü
unsurları bir kesirli sayı değişkeni olarak size geri verir.

Her iki metod da, çevirme işlemini başarıyla yaparlarsa, kendilerini görevlendiren işleme (bizim
örnekte bunu bir if döngüsü yapıyor) 1, başarıyla yapamazlarsa 0 değeri döndürürler. Yani, if döngüsü,
parsInt() metodu başarılı olursa 1, başarılı olamazsa 0 sonucunu alacaktır. Biliyoruz ki, if açısından 1,
true-doğru, 0 ise false-yanlış demektir.

Buradaki örnek kodda, 1, 2, 3, 5, 6, 7, 8, 10, 11, 12 ve 13’ncü karakterler, parseInt() metodu ile sayıya
çevriliyor ve elde edilen sayının 0 ile 9 arasında olup olmadığına bakılıyor; sonuç doğru ise döngü bir
sonraki karakteri almak üzere başa dönüyor; sonuç yanlış ise döngü o naktada break ile kesiliyor,
durum değişkenin değeri “false” yapılıyor ve fonksiyon bu sonucu kendisini görevlendiren işleme
teslim ederek, kapanıyor.

Fonksiyon ile HTML unsarlarının ilişkisi

Javascript açısından, yukarıdaki gibi uzun fonksiyon ile tek satırlık bir metod’un farkı yoktur: ikisi de
kendisinden beklenen bir değeri, bu değeri bekleyen işleme teslim etmek zorundadır. Bunu ister 150
satırlık komut kümesiyle yapsınlar, isterse tek satırlık bir komutla, Javascript, isteyen bütün
fonksiyonlara ve metodlara kendi nesnelerini ve onların metodlarını kullanma imkanı verir; hatta
bilgisayarın kaynaklarından yararlanmalarını bile sağlar.

Böylece Javascript açısından Browser ve onun görüntülediği HTML belgesinin nesne olarak özelliklerine
ve bilgisayarın kaynaklarını kullanmaya biraz daha yaklaşmış oluyoruz.

Şimdi yeni bir fonksiyon yazarak, Browser’ın, bilgisayarın işletim sisteminden saat ve tarih bilgisi
edinerek, Javascript’e ulaştırmasını sağlayalım. Bunun için düz yazı programınızda şu kodu yazın ve
[Link] adıyla kaydedin.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te Fonksiyon</TITLE>
<SCRIPT LANGUAGE="Javascript">

56
// fonksiyonu tanimlayalim:
function tarihsaat()
{
var saat = new Date()
[Link]()
[Link] = [Link]()
kronometre = setTimeout("tarihsaat()",1000)
}
</SCRIPT>
</HEAD>
<BODY onLoad="tarihsaat()">
<FORM method="POST" name="saatForm">
Şu anda saat: <input type=text size=50 maxlength=50 name="saatkutusu">
</FORM>
</BODY>
</HTML>

Bu Javascript kodunda tanımladığımız değişkenin, Javascript’in otomatik bir metodundan değişken

elde ettiğini görüyorsunuz.

57
Date(): getYear(), getMonth(), getDate(), getDay(), getTime(), getHours(), getMinutes(), getSeconds()

Bu metod, Javascript’in Browser’dan, Browser’ın işletim sisteminden, işletim sisteminin de bilgisayarın

temel girdi/çıktı işlemlerini yapan (BIOS) çipinden, saati ve tarihi içeren bilgiyi almasını sağlar. Gerçi
metod Date (günün tarihi) adını taşıyor, ama Date(), Javascript açısından class (sınıf) sayılır ve edinilen
bilgi sadece ay, gün ve yıl bilgisini değil, o andaki saati, dakikayı ve saniyeyi de içerir.

“saat” adını verdiğimiz bu değişken, Date() metodunun sağladığı bütün bilgileri içerdiği için, içinden
saate ilişkin bilgiyi söküp almamız gerekir. Date() sınıfının sağladığı bilgiyi, get... yoluyla alırız.

Burada önce biraz, hem İngilizce’den hem de Javascript dilinden Türkçe’ye tercüme yapalım:

Year: Yıl (1900’den sonra)

Month: Ay (0=Ocak - 11=Aralık)

Date: Gün (1-31)

Hours: Saat (0-23)

Minutes: Dakika (0-59)

Seconds: Saniye (0-59)

Time: Zaman (Bu bilgilerin tümü: Gün, Ayın Adı, günün tarihi, saat:dakika:saniye, Yaz saati/kış saati ve
yıl)

Bu durumda getYear(), size bilgisayarın BIOS’nun ayarlı oluduğu yılı (örneğin 1999) değerini; getHours()
ise bu komutun icra edildiği andaki saati (örneğin, 19) kazandıracaktır. Gördüğünüz gibi, getTime()
metodu, bize olağanüstü zengin bilgi kazandırabilir.

Bizim örnek kodumuzda, “saat” değişkeninin içinden getTime() yöntemi ile, hemen her türlü tarih ve
saatle ilgili bilgi demetini alıyoruz; ve bunu bir başka metod’un işlemine tabi tutuyoruz.

toString(), toLowerCase(), toUpperCase()

Javascript’in kullanılmaya hazır işlevleri (metodları) arasında Date (Tarih) nesnesine uygulanabilecek
olanlarından biri toString() metodudur. Kelime anlamı String’e çevir, alfanümerik’e çevir olan bu
metodla, saat nesnesinin tamamen kendine özgü biçimi, Javascript tarafından HTML’in anlayabileceği
şekle çevrilmiş olur. Buradaki örnek kodda, “saat” değişkeninin içeriğini toString() metoduna tabi
tutarak, alfanümerik değere çeviriyoruz ve bunu, HTML sayfasındaki Form nesnesinin “saatkutusu”
isimli INPUT ögesinin içeriği haline getiriyoruz.

Javascript’te, çevirme amaçlı iki metod daha vardır. toString() metodu sadece Date nesnesine
uygulanabilir, ama toLowerCase() (küçük harfe çevir) ve toUpperCase() (büyük harfe çevir) metodları
bütün alfanümerik değerlere uygulanabilir. Nesneleri daha ayrıntılı ele aldığımız bölümde, alfanümerik

58
değerlere uygulanabilecek, kullanılmaya hazır fonksiyonlar diyebileceğimiz başka metodlar
bulunduğunu da göreceğiz ve hepsini birarada inceleyeceğiz.

setTimeout(“fonksiyonun_adı”, milisaniye)

Örnek fonksiyonumuza dönersek; çevirme ve bulunan alfanümerik değeri HTML’in Form nesnesinin bir
ögesinin içeriği olarak atama işleminden sonra, “kronometre” adını verdiğimiz bir değişken görüyoruz;
fakat bu değişkenin değeri oldukça farklı bir ifade içeriyor: setTimeout().

setTimeout(), kendi kendisinin zamanlamasını belirleyen bir metoddur. Buradaki örnekte,

“kronometre” değişkeninin değeri olarak, “tarihsaat” fonksiyonumuzun, her 1000 milisaniyede bir
yenilenmesini istiyoruz. Bunun sonucu, Javascript, fonksiyonu her bin milisaniyede bir çalıştıracak, ve
bunun sonucu olarak HTML sayfasındaki formda saatkutusu isimli kutunun değeri sürekli
yenilenecektir.

Bu metoddan yararlanarak, Javascript’e, sözgelimi her sabah 6:30’da bir iş yaptırabiliriz. Bunun için,
söz gelimi setTimeout metodunu içeren değişkeni, şöyle bir döngü içine koyabiliriz:

if (([Link]() == 6) && ([Link]() == 30))

{
//burada ne gibi işler yapılacaksa o işe ait komutlar olabilir, örneğin:
[Link] = [Link]()
//sonra setTimeout metodunu içeren zamanlama ifadesi gelir:
kronometre = setTimeout("tarihsaat()",10000)
}

Böyle bir döngü içine alındığı zaman kronometre sadece sabah 6:30’da saati ve tarihi gösterecektir.

Değişkenleri Değerlendirme (Eval)

Buradaki örneğimizde yer almamakla birlikte bu bölümü bitirmeden bir metoddran daha söz edelyim.
Javascript’in kendi hazır fonksiyonları içinde en az kullanılanı hangisidir diye sorarlarsa Değerlendirme
Fonksiyonu olan eval()’dir derseniz, yanılmamış olursunuz. Buna karşılık, Javascript’in hemen hemen
en kullanışlı fonksiyonlarından biri de eval() fonksiyonudur.

Bir kere, eval(), programcıyı satırlarca kod yazmaktan kurtarır. Diyelim ki, Javascript programınızın bir
yerinde

59
 var toplamTutar = “((siparisMiktarı * fiyatTL) * vergi)”
if (vergiYok) {
toplamTutar = “(siparisMiktarı * fiyatTL)”
}
.......

şeklinde bir kodunuz var. Daha sonra programın herhangi bir yerinde,

[Link](eval(toplamTutar))
demekle, bütün bu üç-dört satırlık kodu yazmış olursunuz. eval() sizin için değişkenlerin değerlerini
bulup, sonucu değerlendirip, arzu ettiğiniz yere yazacak veya iletecektir. Bu fonksiyondan ilerde
yararlanacağız.

60
Javascript’in Nesneleri, Olayları ve Özellikleri

Bilgisayar programcılığı da giyim-kuşam dünyası gibidir: modayı takip eder. Günümüzde programcılığın
en moda unsuru Nesneye Yönelik programcılıktır dersek, gerçeği ifade etmiş oluruz.

Javascript programcılığında nesne (object), ve nesnenin özellikleri (properties), genellikle HTML

belgesinin adı (name) ve değeri (value) olan herşeydir. Bir HTML unsurunun etiketinde NAME ve
VALUE bölümleri varsa, bu unsur, Javascript için nesne sayılır.

Bu tanıma göre Form, Javascript için bir nesnedir. Ayrıca Form nesnesinin bir ögesi olan INPUT, kendisi
de ad ve değer alabildiğine göre, Javascript için bir nesne sayılır; fakat bu nesneye daima içinde
bulunduğu nesne “dolayısıyla” atıfta bulunabilirsiniz. Bu tür atıflarda bulunurken, şu kurala uymanız
gerekir:

nesneAdı.özellikAdı

Bir nesnenin durumunu, değerini veya bir özelliğini değiştiren Javascript’in kendi içinde kullanılmaya
hazır işlevleri; tarih gibi, Browser’ın masaüstündeki penceresinin bir özelliği gibi değerleri belirleyen
otomatik işlevleri; nesnelerin değerlerini belirli bir düzen içinde arttıran veya azaltan süreçleri; ve
Javascript’in hazır şablonlarından yeni bir nesne üreten işlemleri, metod adı altında toplarız. Her
nesnenin kendine ait bir metodu olabilir; bir metod birden fazla nesne ile birlikte kullanılabilir. Bu gibi
ifadeleri şöyle yazarız:

nesneAdı.metodAdı (argüman)

Javascript ve niteliklerini etkilediği HTML, bir işletim sistemi ortamında, Grafik Kullanıcı Arayüzü (GUI)
ile çalışan bir Browser programının içinde yer alırlar. Browser programları kendiliklerinden veya GUI
sonucu, öyle bazı olaylara (örneğin Mouse işaretçisinin bir nesnenin üzerine gelmesi veya bilgisayar
kullanıcısının Mouse’un veya klavyenin bir düğmesini tıklaması gibi) yol açarlar ki, bu olay işletim
sistemi-GUI-Browser yoluyla HTML belgesi (ve dolayısıyla Javascript) açısından önem taşıyabilir.
Bunlara Event (olay) denir, ve Javascript’e bu olayın olması halinde icra edilmek üzere özel emirler
verilebilir. Bu tür komutların yazılmasında şu yöntem izlenir:

event=”fonksiyon_veya_metod (argüman)”

61
Aslında yukarıda özetlediğimiz üç unsuru, nesne, nesne özelliği ve Browser olaylarını buraya kadar bir
çok örnekte gördük ve kullandık. Bu bölümde, bu kitapçığın elverdiği ölçüde her üçünü ayrı ayrı ve
ayrıntılı ele alacağız.

Nesneler

Javascript ile yazacağımız programlar, Netscape veya Internet Explorer programlarının belge nesne
modeli (Document Object Model) denen kurallar içinde hareket etmek zorundadır. Daha yüksek
programlama dillerine, örneğin C++, Delphi veya Java gibi dillerle program yazmışsanız, programcı
olarak başka bir programın modeli ile sınırlı olmadığınızı, hatta işletim sisteminin programlar için
sağladığı arayüzle (API) kendinizi sınırlı hissetmeyebileceğinizi bilirsiniz. Fakat Javascript dahil tüm
Script dilleri, Browser’ın sunduğu hiyerarşik nesne modeli ile sınırlıdır.

Javascript’te “document” nesnesi kavramını öğrenirken, ilk kavranması gereken unsur, “container”
(içinde tutan, kap) meselesidir. Hatırlayacağınız gibi, yukarıdan beri Javascript’e ekrana bir şey
yazdıracağımız zaman, şuna benzer bir komut veriyoruz:

[Link](“<H1>Merhaba Dünya!</H1>”)

Burada kullandığımız write()metodu, “document” nesnesine, o da Browser’ın “window” (pencere)

nesnesine aittir. “window” nesnesini zikretmiyoruz; çünkü zaten onun içindeyiz. Ama yeni bir Browser
penceresi açtırmak istersek, bunu da açıkça belirtmemiz gerekir. Aşağıdaki kodu, düz yazı
programınızda yazarak, [Link] adıyla kaydederseniz ve Browser’ınızda açarsanız, size yeni
bir “window” nesnesi oluşturma imkanı verecektir:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Javascript'te Yeni Pencere</TITLE>
<SCRIPT LANGUAGE = "Javascript">
var windowNesnesi
function yeniPencere()
{
windowNesnesi = [Link]("", "YeniPencere", "toolbar=0, width=300, height=150,
resizable=1")
[Link]("<H2>İşte yeni Pencereniz.. Tebrikler!</H2>")

62
 }
function kapaPencere()
{
[Link]()
}
</SCRIPT>
<BODY OnUnload="kapaPencere()">
<H1>Bu düğmeyi tıklarsanız, yeni pencere açılır.</H1>
<FORM>
<INPUT Type="button" Value="Yeni Pencere Aç" OnClick="yeniPencere()" </INPUT>
</FORM>
</BODY>
</HTML>

Burada “windowNesnesi” adlı değişkinin değerine dikkat ediyor musunuz: Browser’ın kendi içinde
bulunan “[Link]()” metodunu kullanarak, araç çubuğu bulunmayan, eni 300 yüksekliği 150

63
piksel ve ziyaretçi tarafından ölçüleri değiştirilebilen bir yeni Browser penceresi açıyor. Aslında bu
noktada windowsNesnesi adlı değişken, bu nesnenin buradaki temsilcisi sayılır; yeni nesneye ne
yaptırtmak isterseniz, burada, windowNesnesi değişkinini kullanarak yapabilirsiniz. Bir başka dikkat
edilmesi gereken nokta, yeni Window nesnesini oluşturduktan sonra bir daha “window” nesne adını
kullanmıyoruz, sadece document adlı container’in (kabın) adına referans yapıyoruz.

Yukarıdaki şemada gördüğümüz nesnelerin HTML karşılıkları şöyledir:

Javascript Nesnesi HTML Karşılığı

Pencere (Window) Yok

Çerçeve (Frame) <FRAME>

Belge (Document) <BODY>

Form <FORM>

Düğme <INPUT TYPE=”button”>

İşaretleme Kutusu <INPUT TYPE=”checkbox”>

Gizli (Hidden) <INPUT TYPE=”hidden”>

Dosya Çıkart (file upload) <INPUT TYPE=”file”>

Parola (password) <INPUT TYPE=”password”>

Radyo düğmesi (Radio) <INPUT TYPE=”radio”>

Başa dön (Reset) <INPUT TYPE=”reset”>

Seç (Select) <SELECT>

Gönder (Submit) <INPUT TYPE=”submit”>

Metin (Text) <INPUT TYPE=”text”>

Metin Alanı (Textarea) <TEXTAREA>

Bağ (Link) <A HREF=””>

Bağlantı (Anchor) <A NAME=””>

Applet <APPLET>

Resim (Image) <IMG>

Plugin <EMBED>

64
Alan (Area) <MAP>

Bu nesneleri ve metodları ile yanıt verdikleri Window olayları (event) konusuna geçmeden önce bir iki
noktayı belirtelim:

Window nesnesinin HTML karşılığı bulunmamakla birlikte BODY etiketinin onLoad ve unonLoad
olaylarında işleyen bir fonksiyonla yeni window nesnesi oluşturmanız (yukarıdaki örnekte olduğu gibi)
daima mümkündür. Ayrıca, içinde bulunduğunuz veya yeni açmak istediğiniz bir Browser penceresinin
alt çervesindeki Status (durum) mesajı alanına istediğiniz mesajı yazdırabilirsiniz:

[Link] = ’Benim sayfama hoş geldiniz!’

Internet, HTML sayfası ve bağlı belgelerle bilgisayar dosyalarını alıp vermek demektir. Mahal (Location)
nesnesi, Browser’ın görüntülediği belgenin nereden geldiğini gösterir. Gerçi, HTML size görüntülediği
belgenin nereden geldiğini bildirmez, ama Browser, bunu “[Link]” nesnesi olarak
tutar. Bu değer ya “http:” ya da “file:” (ikisi de küçük harf ve sonlarında iki nokta üstüste var) olur.
Örneğin:

if ([Link] == “http:” {
alert (“Bu belge Internet’ten geliyor.”) }
Else { alert (“Bu belge sabit diskten geliyor.”)}

şeklinde bir kodla, belgenin mahallini araştırmak mümkündür.

Tarih (History) nesnesi ise, her iki Browser’ın, ziyaret edilen siteler ve sayfalar listesinde ileri veya geri
gitmekte kullandığı nesnedir. HTML’de bu listeye erişmeyi sağlayan etiket bulunmamakla birlikte
Javascript bu listeyi kullanabilir. Örneğin:

function gerigit() { [Link](-1) }

şeklindeki bir fonksiyon ve bu fonksiyonu çağıran bir düğme (onClick=gerigit() gibi) Tarin nesnesinden
yararlanmasını sağlayabilir.

Olaylar

Browser programları, olaylı bir yaşama sahiptir! Ya bilgisayar sistemi, ya da kullanıcı (ziyaretçi), sürekli
bir takım olayların (Event) oluşmasına sebep olurlar. Ya Mouse’un bir düğmesine basılır “Click” adı
verilen olay oluşur; ya klavyede bir tuşa basılır, “KeyDown” olayı oluşur. Bir HTML sayfasının
yüklenmesi biterse “Load,” sayfadan çıkma işlemi tamamlanırsa “unLoad” olayı olur.

Her Pencere, Browser veya Kullanıcı olayına karşılık, Javascript’in bir Olay Yönlendiricisi (Event
Handler) vardır. Olay Yönlendirici, olayın adını taşır. Örneğin, kullanıcının Mouse’un bir düğmesini
tıklaması, Click, bu olayı karşılayan ve yönlendiren metod ise onClick (tıklandığında, tıklama halinde)

65
adını taşır. Javascript programcısı olarak bu olayların tümü bizi ilgilendirmediği gibi, nesnelerimiz de
çoğunlukla bu olaylara ilgi göstermezler.

<[Link] --- RESİMALTI: Javascript açısından Browser Nesneleri ve karşılık verdikleri Browser ve
GUI Olayları (Event).>

Event Handler’ları, bir tür adlandırılmış ama içi boş fonksiyonlar gibi düşünebilirsiniz. Programcı olarak
bize düşen, bu olay karşısında olay yöndendiricisinin ne yapmasını istediğimi belirtmekten ibarettir.
Event Handler’lar, daha önceden hazırladığımız bir fonksiyonu göreve çağırabilir; veya hemen oracıkta
bir Javascript metodunu da devreye sokabiliriz. Mesela:

<INPUT TYPE=”text” SIZE=50 MAXLENGTH=100 NAME=”soyadi”

onChange=”denetle(this)”>
Ziyaretçi bu INPUT kutusuna soyadını yazdığında, kutunun içeriği değişmiş olacak ve bu Change
(değişiklik) olayı, kendisini yöndendiren onChange sayesinde, önceden hazırladığımız “denetle()” isimli
fonksiyonu çağıracaktır. Burada gördüğünüz “this” (bu) kelimesi, Javascript’e fonksiyonun istediği
değer kümesi olarak bu nesnenin içeriğini vermesini bildiriyor. İlerde örneklerde bunu sık sık
kullandığımızı göreceksiniz.

Sık kullandığımız olayları ve yönlendirilcilerini daha yakından tanıyalım:

onClick

Ziyaretçinin, Mosue işaretçisi tıklanabilir bir nesne üzerinde iken Mouse’nun düğmesine basması, Click
olayını doğurur; bu olayı onClick yönlendirir. Düğmeler, işaretleme kutuları, radyo düğmeleri ve
bağlantılar tıklanabilir. Olayın oluşması için varsayılan Mouse düğmesinin basılması ve bırakılması
gerekir. Düğme basılı durursa, Click olayı gerçekleşmiş olmaz.

onClick yönlendiricisine, “Click” olayı halinde ne yapmasını istediğinizi ait olduğu nesnenin HTML
etiketi içinde bildirmeniz gerekir. Aşağıdaki kodu düz yazı programınızda yazar ve [Link] adıyla
kaydederseniz, onClick yönlendiricisi için program yazmış olacaksınız:

<!DOCTYPE html>

<html lang="tr">

66
<head>

<meta charset="UTF-8">

<TITLE>JavaScript'te onClick</TITLE>

<SCRIPT LANGUAGE="JavaScript">

//onClick icin fonksiyon

function sayfa1()

resim1Pencere = [Link]("[Link]", "Sayfa1", "toolbar=0, width=200,

heigth=400,resizeable=0");

</SCRIPT>

</HEAD>

<BODY>

<H1>Butonu tıklayınız!</H1>

<INPUT TYPE="button" NAME="PEN1" VALUE="PEN1" onClick=sayfa1()>

</BODY>

</HTML>

67
onSubmit

Javascript’in, HTML’i tamamladığı noktaların başında Form ve Form yoluyla elde edilecek bilgilerle ilgili
işlemler gelir. Bu işlemlerin başında ise Form’daki bilgilerin Server’a gönderilmeden önce, daha
Browser’da iken doğrulanması ve hatalardan arındırılması vardır. Javascript, bunu ziyaretçinin formda,
Submit (Gönder) olayına yol açan herhangi bir düğmenin tıklanması halinde yapar. Bir form, ziyaretçi
tarafından türü Submit olan bir düğmenin tıklanması halinde, Browser tarafından HTTP protokolü ile
Server’a gönderilir. Javascript, onSubmit yönlendiricisi ile bu olaya ilişkin işler yapabilir, fonksiyonlar
icra edebilir. Fakat burada dikkat edeceğiniz nokta, “Submit” olayına engel olmamak veya bu işlemi
şarta bağladı iseniz, bu şartın yerine gelmesini sağlamaktır. Bunu bir örnek üzerinde görelim. Diyelim
ki, HTML sayfanızda, şuna benzer bir FORM etiketi var:

<FORM ACTION=”form_islem.php” METHOD=”post” onSubmit=”onayla()”>

Burada adı geçen “onayla()” fonksiyonu HTML’in HEAD bölümünde yer alıyor ve şuna benzer komutlar
içeriyor:

//onSubmit olayını yönlendirme fonksiyonu

function onayla() {
confirm(‘Bu siparişi vermek istediğinizden emin misiniz?’);
}

İlk bakışta böyle bir “tuzak,” formun bir kere daha onaylandıktan sonra gönderileceğini düşündürebilir.
Burada gördüğünüz “confirm” komutu, Javascript’e, Browser’ın kullanıcıdan OK (Tamam) ve Cancel
(İptal) yazılı bir kutu ile onay almasını sağlar. Kullanıcı OK düğmesini tıklarsa, Browser, Javascript’e
“true” (doğru), kullanıcı Cancel (İptal) düğmesini tıklarsa “false” (yanlış) değeri gönderecektir;
sanılabilir ki, Javascript’e “true” değeri dönerse formu gönderilecek, fakat “false” değeri dönerse form
gitmeyecektir.

Bu doğru değil! Her iki değerde de form gidecektir; çünkü, yukarıdaki kodda Browser’ın Confirm
kutusunun oluşturacağı değerin türü ile onSubmit olay yönlendiricisi arasında bir bağ kurulmuyor;
başka bir deyişle onSumbit’e kendisine dönmesi gereken bir sonuç olduğu bildirilmiyor. Bunu “return”
anahtar kelimesiyle sağlarız. “return” (anlamı: geri dön) kelimesi, bir fonksiyona kendisini göreve
çağıran unsura mutlaka bir değer göndermesi gerektiğini bildirir. “return” kelimesini kullanarak, Form
etiketini şöyle yazabiliriz:

<FORM ACTION=”form_islem.php” METHOD=”post” onSubmit=”return onayla()”>

Dolayısıyla “onayla()” fonksiyonuna da kendisini göreve çağıran komuta bir sonuç ulaştırması
gerektiğini bildtirmemiz gerekir:

68
//onSubmit olayını yönlendirme fonksiyonu
function onayla() {
return confirm(‘Bu siparişi vermek istediğinizden emin misiniz?’);
}

Bu durumda kullanıcı/ziyaretçi “confirm” kutusunun OK (Tamam) düğmesini tıklarsa onSubmit

yönlendiricisi Form’u belirtilen CGI programına, işlenmek üzere, gönderecek; Cancel (İptal) düğmesi
tıklanırsa, onSubmit yönlendiricisi submit olayını durduracaktır.

onReset

Formlara koyduğunuz Reset (Başa dön) düğmesi, bir Form’daki bütün bilgilerin silinmesini sağlar;
Browser’ın Geri düğmesini tıklamak dahil, hiç bir eylem ziyaretçinin yanlışlıkla bastığı Sil düğmesinin
sildiğini geri getiremez. Fakat programcı olarak siz böyle bir hatayı önleyebilirsiniz. Çünkü Sil
düğmesinin oluşturduğu “reset” olayını yönlendiren onReset, size bu imkanı verir. Tıpkı onSubmit’teki
gibi FORM etiketinize onReset tarafından devreye sokulacak bir doğrulama fonksiyonu koyabilirsiniz.
Form etiketiniz şöyle olabilir:

<FORM ACTION=”form_islem.php” METHOD=”post” onReset=”return sahiMi()”>

Bu fonksiyonu da HTML’in HEAD bölümünde şöyle yazabilirsiniz:

//onReset olayını yönlendirme fonksiyonu

function sahiMi() {
return confirm(‘Bu formdaki büktün bilgileri silmek istediğinizden emin misiniz?’);
}

Ziyaretçiniz doldurduğu formda, Gönder yerine yanlışlıkla Sil’i tıkladıysa, böylece bir şansa daha
kavuşmuş olur.

onChange

HTML sayfanızda olabilecek tek değişiklik, ziyaretçinin içine bir şeyler yazabildiği veya bazı işaretler
koyabildiği üç alandır: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Metin ve
metinalanın içini tıklayarak Browser Penceresi’nin odak noktasını buraya getiren ziyaretçi klavyesine
basarak, bu alanlara metin girebilir; bu HTML sayfasında “change” (değişiklik) olması anlamına gelir
Select etiketinin sağladığı şıklardan birini seçen ziyaretçi de sayfada değişiklik olayına yol açar.
“change” olayı halinde, onChange bu olayı yönlendirir. Javascript programcısı olarak siz bu
yönlendiriciye belirli bir fonksiyonu çalıştırmasını bildirebilirsiniz.

69
Bunu da bir örnekle ele alalım. Diyelim ki Frame (Çerçeve) esasına dayanan bir ana sayfanız var;
ziyaretçinin bir çerçevedeki “select” etiketinin seçeneklerinden birini seçmesi halinde bir diğer
çerçevenin içeriği değişsin istiyorsunuz. Ana sayfanızda bir FRAMESET var ve bu üç çerçeveli bir sayfa
oluşturuyor. Burada Browser’ın “document” (sayfa) hiyerarşisi içinde Frameset “Parent” (ebeveyn;
çünkü diğer bütün Frame'leri o doğuruyor!) ve “Frame 0” (1’nci çerçeve) “Frame 1” (2’nci çerçeve) ve
“Frame 2” (3’ncü çerçeve) vardır. “document” nesnesi çerçeveleri bir dizi-değişken içinde tuttuğu ve
Array (dizi değişken) numaralanmaya 0'dan başladığı için çerçevelerimiz 0’dan itibaren numaralanıyor.
Buna göre sağ Frame'in içeriğini değiştireceğimiz zaman bu çerçeveye "Frame 2" adıyla gönderme
yapmalıyız. Frame 1'e şöyle bir FORM koyarsak, daha sonra bu formun değişiklik olayını onChange ile
sağ çerçevenin içeriğini değiştirmeye yönlendirebiliriz:

<FORM METHOD="post">
<P><SELECT NAME="hedef" SIZE="1"
onChange="[Link][2].[Link]=[Link][[Link]].
value">
<OPTION>Seç bakalım
<OPTION VALUE="[Link]">Test 1
<OPTION VALUE="[Link]">Test 2
<OPTION VALUE="[Link]">Test 3
</SELECT>
</FORM>

Burada, SELECT nesnesinin içeriği, ziyaretçinin herhangi bir seçeneği seçmesi halinde değişmiş oluyor;
bu “change” olayı üzerine bu olayı yönlendirmek üzere kullandığımız onChange ise karşısındaki
Javascript komutunu icra etmeye başlıyor. Bu uzun kodda, “this” (bu) anahtar kelimesinin yeniden
kullanıldığını görüyorsunuz. Bu kelime, herhangi bir Javascript fonksiyonuna (adı fonksiyon olmamakla
birlikte burada yazdığımız kod da bir fonksiyonun görevini yapıyor) ihtiyacı olan bilgileri bu nesneden
almasını bildiriyor. “Bu” diye nitelediğimiz nesne, içinde bulunduğumuz FORM’un SELECT ögesidir.
SELECT ögesinin OPTION’ları, bu nesnenin OPTIONS dizi-değişkeninde numaralanır ve seçilen
OPTION’ın numarası “selectedIndex,” içeriği ise “.value” adıyla adlandırılır. Nesneleri ve özelliklerini
ele aldığımız bölümde bu konuya yeniden döneceğiz.

onFocus, onBlur

Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu tıklayın; çubuğun renginden
işletim sisteminin dikkatinin bu programın penceresinde yoğunlaştığını göreceksiniz. Bir de
masaüstünde boş bir yeri tıklayın; bu pencere sistemin odak noktası olmaktan çıkacaktır. HTML
sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne

70
olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Çünkü ziyaretçinin sadece bu
etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri
tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz
de bu olayı yönlendiren onFocus’u kullanabiliriz. Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu
nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma)
olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu,
[Link] adıyla kaydederseniz ve Browser’da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi
de kullanmış olacaksınız:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>JavaScript'te onFocus ve onBlur</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function goster()
{
[Link]="Adınız kayda geçmiştir."
}
function uyar()
{
[Link]="Lütfen yanlışlık yapmayınız!"
}
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="isimForm">
<P>Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:
<BR><INPUT TYPE="text" NAME="ad" VALUE="Adınızı buraya yazınız" SIZE=25
onBlur="goster()">

71
<P>Şimdi de aşağıdaki kutuya mesleğinizi yazın:
<BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleğinizi buraya yazınız"
SIZE=25 onFocus="uyar()">
</FORM>
</BODY>
</HTML>

Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin
kutusunun “blur” olayına onBlur’ün çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak
üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık
veriyor.

onMouseOver, onMouseOut

Javascript dünyasında en çok kullanılan iki “event” varsa, birincisi Mouse işaretçisinin bir nesnenin
üzerine gelmesi (“MouseOver” olayı), ikincisi ise Mouse iuşaretçisinin bir nesnenin üzerinden çekilmesi
(“MouseOut” olayı) sayılabilir. Bu iki olayı onMouseOver ve onMouseOut yönlendiricileri ile
karşılayabiliriz. Gerçekte bu iki olayla, Mouse işaretçisi bir bağlantı satırı veya grafiğinin ve bir grafik
haritasının (Map, Area) üzerine geldiği veya üzerinden çekildiği zaman ilgilenebiliriz; çünkü diğer HTML
unsurları ve Javascript nesneleri ile Mouse işaretçisinin işaretleme ilişkisi yoktur.

Bu olayı ve yönlendirilmesini, şu küçük programda görebiliriz:

72
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>JavaScript'te Fonksiyon</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function faregelince()
{
[Link] = "En güzel site için burayı tıklayın!";
return true
}
function faregidince()
{
[Link] = "En güzel siteye gitme fırsatını kaçırdınız!"
return true
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="[Link] NAME="bag" onMouseOver="return faregelince()"
onMouseOut="return faregidince()">PC World-Türkiye</A>
</BODY>
</HTML>

Bu kodu [Link] adıyla kaydeder ve Mouse işaretçisini PCWORLD-TÜRKİYE bağlantısının

üzerine getirirseniz, tarayıcının alt çerçevesindeki statü mesajı yerinde "En güzel site için burayı
tıklayın!", geri çektiğinizde de "En güzel siteye gitme fırsatını kaçırdınız!" mesajını görmemiz gerekir
ama günümüzdeki tarayıcılar status kısmını göstermiyor.

73
onLoad, onUnLoad

Javascript açısından Browser’ın bir HTML sayfasını görüntülemeyi bitirmesi sayfanın “load” (yükleme),
başka bir sayfaya geçilmesi ise önceki sayfanın “unload” (yüklenmişlikten çıkması) sayılır; ve bu iki olayı
onLoad ve onUnLoad yönlendiricileri ile karşılayabiliriz. HTML dosyasının iki bölüm (HEAD ve BODY)
olduğunu biliyorsunuz. Browser açısından asıl sayfa, BODY bölümüdür; HEAD bölümündeki komutlar
sayfanın nasıl görüntüleneceğine ilişkin komutlar içerir.

<BODY onLoad=”fonksiyon1()”>

Yada şu şekilde eklenebilir.

<BODY onUnLoad=”fonksiyon2()”>

onError, onAbort

Ziyaretçinin Browser’ı açmak üzere olduğu sayfayı transfer hatası yüzünden açamaz, HTML veya
Javascript kodunu doğru yorumlayamazsa, Error (hata) olayı oluşur. Javascript, sadece kendisine ilişkin
hata durumlarını onError ile yakalayabilir.

Javascript’in Browser penceresiyle ilgili hatasını yakalamak istediğiniz kod, HTML’in HEAD bölümünde,
SCRIPT etiketleri içinde ve “[Link]” kelimeleri küçük harfle yazılmış olarak bulunmalıdır:

[Link]=hataHalinde()
function hataHalinde (message, url, lineNumber)
{
messageList = new Array()
urlList = new Array()
lineNumberList = new Array()
messageList[[Link]] = message
urlList[[Link]] = url
lineNumberList[[Link]] = lineNumber
alert(messageList[0] +
"\ndosya adı " + urlList[0] +
"\nsatır sayisi " + lineNumberList[0])

74
 return true
}

Bu kodu üzerinde çalıştığınız Javascript kodu içeren bir HTML sayfasına yerleştirdiğiniz taktirde
olabilecek hatalar bir Uyarı kutusuyla size bildirilir. Sayfanın ve Javascript’in hatasız çalıştığını
anladıktan sonra bu kodu kaldırabilirsiniz.

Javascript, sayfalarınızdaki grafik unsurların da hata halini yakalayabilir. HTTP iletişiminde, en sık
görülen transfer hatası grafik unsurların aktarılması sırasında olur; ayrıca HTML tasarımı sırasında
grafik dosyalarının sayfaya veya sitenin kök dizinine göre göreli adresinin yazılmasında sık yapılan
hatalar, grafik unsurların aktarılmasını engeller. Bu tür hatalarda ziyaretçinizi şu Javascript koduyla
uyararabilirsiniz:

<IMG NAME=”resim01” SCR=”[Link]” orError=”alert(‘[Link] aktarılamıyor; özür

dileriz’)”>

Sayfalarınıza koyduğunuz grafik unsurlar ziyaretçilerinizin sabrını taşırır da, grafiklerin sonuna kadar
aktarılmasını beklemeden Browser’ın Stop düğmesini tıklarlarsa, bunun sayfanız için kötü sonuçları
olabilir. Grafik unsurlara bağlantı belirten alan haritaları (AREA, MAP) etiketleri koymuş olabilirsiniz.
Ziyaretçinin Browser’ının Stop düğmesini tıklaması, Javascript açısından abort (yarıda kes) olayının
doğması demektir; bunu onAbort ile yönlendirebilirsiniz. Bu yönlendiriciden yararlanarak ziyaretçiye
sayfanın eksik olduğunu bildirmeniz yerinde olur. Bunun için IMG etiketini şöyle yazabilirsiniz:

<IMG NAME=”resim01” SCR=”[Link]” onAbort=”alert(‘Sayfanının bütün unsurları

aktarılamadı; beklediğiniz sonucu alabilmek için bütün unsurların aktarılması yerinde olur’)”>

Nesneler ve Olayları Birleştirelim

Şimdi Javascript açısından Browser nesnelerinin neler olduğunu biliyoruz; Browser’ın Javascript
açısından ne gibi olaylar oluşturduğunu ve bu olayları nasıl kullandığımızı küçük örneklerle gördük.
Olaylardan yararlanarak Javascript’le nesneleri etkileyen programlar yazabiliriz; fakat bunun için
nesnelerin ne gibi özellikleri olduğunu ve bunları nasıl etkileyebileceğimizi de bilmemiz gerekir. Bu
bölümde nesnelerin Javascript ile etkilenebilir özelliklerinin neler olduğunu ele alacağız.

Nesnelerin ayrıntılarına girmeden önce bir noktaya açıklık getirelim: Javascript ile bir HTML unsurunu
etkileyebilmek, örneğin bir çerçevenin (Frame) içeriğini değiştirebilmek için mutlaka o nesnenin bir
olaya karşılık verir olması gerekmez. Çerçeveler HTML etiketleri ile şekillenirler; herhangi bir olaya

75
karşılık vermezler. Dolayısıyla olaylara yanıt vermeyen nesneleri, olaylara yanıt veren nesneler yoluyla
etkileyebiliriz; bunun için de bir çok HTML nesnesinin özellikleri bilmemiz gerekir.

Bu açıdan bakınca, olaylara yanıt versin-vermesin, HTML nesnelerimizi, Browser Nesneleri, Belge
Nesneleri, Form Nesneleri ve Javascript Dil nesneleri olarak dört ana gruba ayıracağız.

Browser Nesneleri

Browser’ın Javascript dilinde adı Navigator’dır. Ziyaretçinin Browser programı ister Netscape Navigator
olsun, isten Internet Explorer olsun, Javascript için Navigator’dır; nesnelerine de Navigator Nesneleri
denir. Bunların başında, Browser’ın pencereleri ve Çerçeveler gelir.

Pencere (window)

Şu ana kadar yazdığımız bir çok Javascript kodunda Navigator penceresinin bazı özelliklerini kullandık:
width (genişlik), height (yükseklik), toolbar (araç çubuğu) gibi. Şimdi bu özellikleri toplu olarak
sıralayalım:

width Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel

olarak genişliği.

height Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel

olarak yüksekliği.

toolbar Navigator’ın araç çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

menubar Navigator’ın menü çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

scrollbars Navigator’ın sağ ve alt kenardaki kaydırma çubuklarının gösterilmesi (=1) veya
gizlenmesi (=0).

resizable Navigator penceresinin büyütülebilir-küçültülebilir olması (=1) veya olmaması

(=0).

status Navigator penceresinin alt kenarındaki mesaj çubuğunun gösterilmesi (=1)

veya gizlenmesi (=0).

location Navigator penceresinin URL adres çubunun gösterilmesi (=1) veya gizlenmesi
(=0).

directories Netscape’de ikinci araç çubunun gösterilmesi (=1) veya gizlenmesi (=0).

copyhistory Mevcut Navigator penceresinin history kaydının (daha önce ziyaret edilen URl
adreslerinin tutulduğu çizelgenin) yeni pencereye de kopyalanması.

outerWidth Navigator penceresinin piksel olarak genişliği.

76
outerHeight Navigator penceresinin piksel olarak yüksekliği.

left Navigator penceresinin ekranın sol kenarından piksel olarak uzaklığı.

top Navigator penceresinin ekranın üst kenarından piksel olarak uzaklığı.

alwaysRaised Navigator penceresinin masaüstünde açık bütün pencerelerin üzerinde

kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)

z-lock Navigator penceresinin içi tıklansa bile masaüstünde açık bütün pencerelerin
altında kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)

(Evet-Hayır anlamına değer alan özellikleri 1 ve 0 ile belirtebileceğiniz gibi yes (evet) ve no (hayır) ile de
belirtebilirsiniz.)

Javascript’in yeni Navigator penceresi açma metodu, [Link]() şeklinde yazılır:

yeniPencere = [Link](“[Link]”, “YeniPencereninAdı”, “toolbar=1,

menubar=yes, resizable=no”)

Burada, yeni pencereye vermek istediğiniz adın tek kelime olduğuna, özelliklerin bir çift-tırnak içinde
toplandığına dikkat edin.

Navigator pencereleri, [Link]() metodu ile kapatılır. xxxx yerine açık pencerenin adını yazmanız
gerekir. Aksi taktirde Javascript komutunu icra ettiğiniz pencerenin kendisi (yani Browser) kapanır.
(Bazı Browser’ların bazı sürümleri Javascript tarafından açılmamış Navigator pencerelerinin Javascript
ile kapatılmasına izin vermezler.)

Bu nesnenin ve her iki metodun da kullanımını daha önce gördük. Mevcut bir HTML belgesinin adını
vermeden, yeni pencereyi açtırıp, içine Belge nesnesini kullanarak HTML komutları yazdırmayı, aşağıda
Belge Nesnesi bölümünde ele alacağız.

Bu arada, Browser’ın kendisinin bazı özellikleri ile Javascript açısından nesne olduğunu tekrarlayalım.
Bu açıdan Browser’ın Javascript için şu özellikleri vardır:

appname Browser’ın adı

appVersion Browser’ın sürümü

appCodeName Browser’ın kod adı

userAgent Browser’ın Server’a kendisini tanıtırken verdiği isim.

Şu kısa kodu [Link] adıyla kaydeder ve farklı Browser’larla açarsanız, Netscape ve IE hakkında
bilgileri bir kutu içinde görebilirsiniz:

77
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dinamik Cerceve</title>
<SCRIPT LANGUAGE = "JavaScript">
function siziTaniyalim () {
var BrowserAdi = ""
BrowserAdi += "Browser: " + [Link] + "\r"
BrowserAdi += "Sürümü:" + [Link] + "\r"
BrowserAdi += "Kod Adı: " + [Link] + "\r"
BrowserAdı += "userAgent: " + [Link] + "\r"
alert(BrowserAdi)
}
</SCRIPT>
<BODY>
<H1>Browser’ınızı Tanıyor Musunuz?</H1>
<FORM>
<INPUT Type="button" Value="Browser Hakkında Bilgi Ver" OnClick="siziTaniyalim()"
</INPUT>
</FORM>
</BODY>
</HTML>

78
Mesaj Kutuları

Navigator penceresi, üç tür mesaj kutusu açabilir. Bunlar basit bilgi verme kutusu (alert), doğrulama
kutusu (confirm) ve kullanıcının bilgi girme kutusudur (prompt).

Bunların genel yazım kuralı şöyledir:

[Link](mesaj)

return [Link](mesaj)

return [Link](mesaj, varsayılanCevap)

Bu üç kutunun çeşitli kullanım şeklini, başka vesilelerle, daha önceki örneklerde gördük.

Çerçeve Nesnesi

Bir Navigator penceresinde birden fazla HTML belgesi görüntüleme imkanı veren çerçeve (Frame)
tekniği, tasarım açısından kolaylık sağlar. Bununla birlikte halâ bazı Web ziyaretçilerinin çerçeveden
hoşlanmadıkları da gerçektir.

Çerçevelerin, Navigator açısından nasıl bir hiyerarşı işlediğini daha önce gördük. Javascript açısından
her bir çerçeve bir pencere sayılır; bunlara atıfta bulunurken şu adlandırma uygulanır:

top En üst pencere. yani Browser’ın kendisi.

parent Herhangi bir Frame’i oluşturan Frameset. Çerçeve çerçeve içinde ise, bir
çerçevenin içinde bulunduğu çerçeve parent sayılır. Sayfada bir Frameset
varsa, bütün çerçeveler için “top” aynı zamanda “parent” sayılır.

self Çerçevenin kendisi.

79
Belge (Document) Nesneleri

Web sayfasının Javascript dilinde adı Belge’dir. İster metin, ister sadece Javascript kodu, ister sadece
grafik içersin, <HTML> diye başlayan ve </HTML> diye biten herşey, Javascript gözüyle belgedir.

Javascript’in gözüyle dünyaya bakarsanız, dünyayı içiçe kaplardan ibaret görürsünüz. En dış kabın adı,
Navigator; içindeki ikinci kabın adı Belge’dir. Belge’nin içinde ise, yine birbirinin içinde olmak şartıyla,
HTML ile oluşturulan nesneler vardır. Sayfanızda örneğin faturaForm adlı bir form varsa, bu Javascript
için [Link] demektir, ziyaretçinin doldurduğu bilgilerle Server’a gönderilmesi için
[Link]() metodunun kullanılması gerekir.

Form Nesneleri

Javascript’in icad edilme nedenlerinin başında, ziyaretçi ile etkileşme gelir; ziyaretçi ise Web
tasarımcısı olarak size bilgileri ancak ve sadece Form ile ulaştırabilir. Bu sebeple Javascript açısından
HTML’in en önemli nesneleri, Form nesneleridir.

HTML, kendi formunu kendisi oluşturur; bu bakımdan Javascript’e bir görev düşmez. Javascript
formdaki bilgilerin işlenmesi sırasında devreye girer. Önce Form nesnesinin özelliklerini hatırlayalım:

<FORM

NAME=formun_adı

ACTION=CGI_programı

ENCTYPE=kodlama_türü

METHOD= GET veya POST

TARGET= pencere_adı

onSubmit=”metodun_adı”>

</FORM>

Bu durumda, tam teşekküllü bir form etiketi şöyle olabilir:

<FORM NAME=”form1” ACTION=”[Link]

METHOD= GET></FORM>

Bu, gerçek bir bilgi derleme formu örneği. Fakat Form nesnesi, Server’a bilgi göndermek amacı dışında
da kullanılabilir; bir form nesnesi olan IPNUT’un bir türü olan düğmeleri (button) farklı amaçlı
Javascript fonksiyonlarına bağlanabilir.

80
Form, gerçek amacıyla kullanıldığı durumlarda, Javascript, formdaki bilgilerin Server’a gönderilmeden
önce sınanmasını sağlayabilir. Bunun bir örneğini, ziyaretçinin telefon numarasını doğru biçimde yazıp
yazmadığını sınadığımız kodda görmüştük. Burada kısaca, Javascript açısından form nesnesinin
unsurlarını nasıl tanıyabileceğimizi ele alalım. Benzeri sınama kodları yazarken, bu unsurlara referans
yapacağınız zaman, bu unsurların adlarını ve değerlerini bulma yöntemini bilmeniz gerekir.

Form etiketi içindeki bütün unsurlar element adlı dizi-değişkenin içine yazılırlar ve içerikleri
[Link][i].value (i, unsurun sıra numarası olmak üzere) metoduyla bilinirler. Diyelim ki
“bilgiForm” adlı formunuzun birinci unsuru “<INTPUT TPYE=”text” NAME=”musteriAdi”...> şeklinde bir
etiket. Bu etiketin oluşturacağı kutuya ziyaretçinin yazacağı isim, Javascript açısından
[Link][0].value veya [Link] şeklinde bilinir.

Formun unsurları

Şimdi bir form içeren sayfa örneği yapalım; Javascript ile formun tamamen doldurulmuş olup
olmadığını sınayalım. Böylece ziyaretçinin göndereceği formun eksik olduğunu anlamakta geç
kalmamış oluruz. Aşağıdaki kodu, [Link] adıyla kaydedip, Browser’da bir yerini eksik olarak
duldurun ve Gönder düğmesini tıklayın.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Form</title>
<script LANGUAGE="JavaScript">
function denetle() {
var num = [Link]
var dogruMu = true
for (var i=0; i<num; i++) {
if (([Link][i].value == null ||
[Link][i].value == "") &&
(typeof [Link][i] != 'submit' ||
typeof [Link][i] != 'reset'))
{

81
 dogruMu = false
alert("Formdaki " + [Link][i].name +
" alanı doldurulmamış bulunuyor. Lütfen doldurunuz!")
break }
}
return dogruMu
}
// -->
</script>
</head>
<body>
<form name="form1" method="POST" onSubmit="return denetle()">
<h2>Abone Formu</h2>
<p>Adınız:<br>
<input type=text size=25 maxlength=256 name="Abone_Adı"><br>
İlgi Alanı:<br>
<input type=text size=25 maxlength=256 name="İlgi"><br>
<strong>Oturduğunuz İl: <br></strong>
<input type=text size=25 maxlength=256 name="İl"><br>
<strong>Elektronik Posta Adresiniz: <br></strong>
<input type=text size=25 maxlength=256 name="ElektronikAddress"></p>
<input type=submit value="Gönder"> <input type=reset value="Sil">
</form>
</body>
</html>

82
Radyo Düğmesi (Radio)

Ziyaretçinin bir HTML sayfasında bir çok şık’tan birini seçmesini sağlayan radyo düğmesi (radio) isimli
işaretleme yönteminde ise, aynı adı taşıyan bütün radyo düğmelerinden biri işaretlenince, Browser
diğerlerini işaretlenmemiş hele getirir; dolayısıyla bu düğmenin değeri (.value özelliği) kullanılabilir.
Aşağıdaki kodu yazar ve [Link] adıyla kaydederek, Browser’da açarsanız, seçtiğiniz radyo
düğmesinin değerinin uyarı kutusunda kullanıldığını göreceksiniz.

83
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<TITLE>Radyo Dugmesi Örnegi</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function radyoDegeri(radyoNesnesi) {
var deger = null
for (var i=0; i<[Link]; i++) {
if (radyoNesnesi[i].checked) {
deger = radyoNesnesi[i].value
break }
}
return deger
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><input type=radio name="sanatci" value="Türkü">Neşet Ertaş</p>
<p><input type=radio name="sanatci" value="Şarkı">Zeki Müren</p>
<p><input type=radio name="sanatci" value="Pek anlamadım!">Sezen Aksu</p>
<input type=button value="Ne tür müzik seviyorum?"
onClick="alert(radyoDegeri([Link]))">
</FORM>
</BODY>
</HTML>

HTML kuralları gereği, bir grup oluşturan radyo düğmeleri aynı adı taşırlar. Burada “this” anahtar
kelimesi ile içinde bulunduğumuz yani “bu formun,” “sanatcı” dizi-değişkeninin tümüyle fonksiyona
gönderilmesini sağlıyoruz. “radyoDegeri” adlı fonksiyonumuz zaten böyle bir öbek bilgi bekliyor ve
aldığı tüm radyo düğmesi nesnesine “radyoNesnesi” adını verip, önce büyüklüğüne bakıyor. Bir dizi-

84
değişkenin büyüklüğü eleman sayısıdır; ki bu bizim örneğimizde üçtür. “i” sayacı 0, 1 ve 2 değerleri için
sınanıyor ve bunlardan birinin işaretli olması bekleniyor. İşaretli radyo düğmesi bulunduğu anda değeri
“deger” değişkenine yazılıyor ve döngü kesiliyor (break). Gerisi, uyarı kutusunun “değer” değişkeni
ziyaretçiye göstermesinden ibaret.

Select

Form nesnelerimizden bir diğeri ise SELECT etiketiyle oluşturduğumuz seçme kutusu. NAME, SIZE, ve
MULTIPLE özelliklerine sahip olan bu nesne, onBlur, onChange, onFocus olay-yönlendiricileri ile
kullanılabilir. SELECT nesnesinin değeri, kendisinin ayrılmaz parçası olan OPTION etiketinin VALUE
özelliğinden gelir. Yukarıdaki [Link] kodunu, aşağıdaki şekilde değiştirip, [Link] adıyla
kaydedin:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Seçme Kutusu Ornegi</title>
<SCRIPT LANGUAGE = "JavaScript">
function secDegeri(secNesnesi) {
return [Link][[Link]].value
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><SELECT NAME="sanatci" SIZE=1>
<OPTION value="Türkü">Neset Ertas</OPTION>
<OPTION value="Sarki">Zeki Müren</OPTION>
<OPTION value="Pek anlamadim!">Sezen Aksu</OPTION></P>
<input type=button value="Ne tür müzik seviyorum?"
onClick="alert(secDegeri([Link]))">
</FORM>

85
</BODY>
</HTML>

Burada ziyaretçi açısından seçme işlemi, seçme kutusunun sağındaki seçme okuna basarak yapılıyor;
fakat bizim açımızdan da önemli bir değişiklik var. Seçilen unsur, SELECT nesnesinin dizi-değişkenine
değil, “selectedIndex” adlı endeksin değer (.value) özelliğine yazılıyor. Dolayısıyla, bir if döngüsü ile
arama yapmak gerekmiyor; bu değeri uyarı kutusuna sadece ayıklama işlemiyle belirleyip geri
gönderiyoruz. Burada dikkat edeceğiniz husus, fonksiyona verilen “bu form” nesnesinin “sanatcı” adlı
SELECT nesnesinin bilgi kümesi içinde sadece biri, “selectedIndex” adlı endekse sahiptir. Fonksiyon bu
bilgi kümesini “secNesnesi” adıyla ele alıyor ve içindeki “options” dizi-değişkenin ziyaretçinin seçtiği ve
dolayısıyla sıra numarası “selectedIndex” olarak işaretlenmiş olanın değerini (.value) alıyor ve bunu
doğruca Uyarı kutusuna gönderiyor.

Password

Form nesnesinin Javascript yoluyla mutlaka kullanmak isteyeceğiniz bir ögesi, Password (Parola)
nesnesidir. Ziyaretçinin, Password olarak nitelediğiniz INPUT kutusuna yazdığı metin, kendisine *
olarak görünür; fakat Browser ve dolayısıyla Javascript bu metni bilir.

Aşağıdaki kodu [Link] adıyla kaydederseniz, Password nesnesinin de değerini elde ederek,
kullanabileceğinizi göreceksiniz.

86
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8"><title>Parolayı Görüntüle</title>
<SCRIPT LANGUAGE = "JavaScript">
function parolaNedir()
{
alert("\nisim --->" + [Link] +
"\ndeger --->" + [Link])
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<BR>
<B>Lütfen parola olarak herhangi bir kelime yazıp düğmeyi tıklayın:</B>
<BR><BR>
<INPUT TYPE="password" NAME="gizli" SIZE="15">
<INPUT TYPE="button" NAME="goster" VALUE="Metni görmek için tiklayin"
onClick="parolaNedir()">
</FORM>
</BODY>
</HTML>

Burada herhangi bir form unsuru gibi, form1’in “gizli” adlı nesnesinin değerini alarak Uyarı kutusunda
gösteriyoruz. Gerçek bir programda, bu değeri bir liste ile karşılaştırarak, kullanabilirsiniz. Ancak bu
karşılaştırma işleminin ziyaretçinin bilgisayarında değil, Server’da yapılması gerekir; bunun için
Password nesnesinin değerinin bir CGI programında veya ASP uygulamasında değerlendirilmesi
gerekir. Browser’lar bunu bildikleri için Password nesnesini daima Server’a yollarlar. Bunu sınamak
istiyorsanız, yukarıdaki kod Browser’ınızda açıkken, düğmeyi tıklamayın, klavyede Enter tuşuna basın!

87
Javascript Nesneleri

Bu noktaya kadar ele aldığımız bütün nesneler, Javascript’e HTML ve Browser tarafından sunuluyordu.
Fakat Javascript, kendi kendisine nesneler de oluşturabilir. Örneğin, Javascript bir alfanümerik
değişkeni ele aldığı anda bu onun için bir String nesnesi olur; ve dolayısıyla, bir değişkenden öte bazı
özellikler ve metodlar kazanır. Dizi-değişkenler de oluşturuldukları anda Array nesnesi olurlar; yeni
özellikleri ve metodları olur.

String Nesnesi

Javascript kodunuzun ya HTML’in HEAD bölümünde genel nitelikli, ya da herhangi bir fonksiyonun
içinde yerel nitelikli bir değişken tanımladığınız zaman bu türüne göre bir String (alfanümerik, karakter)
değişken olur. Örneğin:

var kitabınAdi = “Gazap Üzümleri”

ifadesi bize içeriği “Gazap Üzümleri” olan bir değişken kazandırır. İçeriğinin niteliği nedeniyle bu
değişken, String değişkendir. Fakat şu aşağıdaki ifadeye bakarsanız, Javascript’e yeni bir String nesnesi
oluşturması için de emir verebiliriz:

var kitabinAdi = new String(“Gazap Üzümleri”)

“new,” (=yeni) hatırlıyorsanız, Javascript‘e yeni bir nesne oluşturması için verdiğimiz komuttu. Burada
Javascript’e yeni bir String nesnesi oluşturmasını; bunun içeriğini “Gazap Üzümleri” yapmasını, ve bu
nesneyi, “kitabinAdi” isimli değişkene atamasını söylüyoruz. değişken oluşturma açısından ikisi
arasında hiç bir fark olmamakla birlikte, bu ikinci yöntem bize, alfanümerik değişkenlerin özel niteliğini,
nesne olduklarını gösteriyor. Bu sayede alfanümerik değişkenlerin (yani String nesnelerinin) bazı ilave
özelliklerinden yararlanabiliriz. Bu özelliklerin sık kullanılanlarını şöyle sıralayabiliriz:

88
length Nesnenin uzunluğunu belirtir. Örneğin [Link], bize 14 değerini
verir.

charAt(i) i ile belirttiğiniz pozisyondaki karakteri verir. kitabı[Link](1) bize “a”

değerini verir.

indexOf(nnn) nnn ile belirttiğiniz karakterlerin String içinde ilk geçtiği konumun endeksini
verir. kitabınAdı.indexOf(“za”) ifadesi, 2 değerini verir. (G, 0 olmak üzere
saymaya başlayın!)

lastIndexOf(nn) nnn ile belirttiğiniz karakterlerin String içinde geçtiği son konumun endeksini verir.
kitabı[Link](“a”), bize 3 değerini verir.

substring(i,j) String nesnesinin i’de başlayan ve j’de biten bölümünü verir.

[Link](0,3) ifadesi bize “Gaz” değerini verir.

Bu özellikler, sadece bir alfanümerik değişken veya öğrendiğimiz yeni adıyla String nesnesinde değil,
String olabilecek herhangi bir metinde de vardır. Örneğin “Gazap Üzümleri”.length, 14; “Gazap
Üzü[Link](1) ise “a” değerini verebilir.

String nesnelerinin kendilerine özgü metodları da vardır. Bunları da kısaca ele alalım:

.bold() Bağladığınız String nesnesini koyu yapar. Örneğin kitabı[Link](), size

“<B>Gazap Üzümleri</B>” metnini verir.

.fontcolor(“renk”) String nesnesinin görüntülenme rengini belirler. Örneğin

kitabı[Link](“red”) size “<FONT COLOR=”red”>Gazap
Üzümleri</FONT>” değerini verir.

.fontsize(“ölçü”) String nesnesinin görüntülenmesinde harf büyüklüğünü belirler. Örneğin

kitabı[Link](“24”) size “<FONT SIZE=”24”>Gazap Üzümleri</FONT>”
değerini verir.

.italics() String nesnesinin itelik harfle görüntülenmesini sağlar. Örneğin

kitabı[Link]() size “<I>Gazap Üzümleri</I>” değerini verir.

.toLowerCase() String nesnesinin görüntülenmesi sırasında bütün harflerinin küçük harf olmasını
sağlar. Örneğin kitabı[Link] () size “gazap üzümleri“ değerini verir.

.toUpperCase() String nesnesinin görüntülenmesi sırasında bütün harflerinin büyük harf olmasını
sağlar. Örneğin kitabı[Link] () size “GAZAP ÜZÜMLERİ “ değerini
verir.

89
Javascript ile Dinamik HTML

Bu kadar uğraşıp, Javascript öğrenmemizin, iki amacı olabilir; ziyaretçi ile etkileşme ve HTML yapılması
imkanı bulunmayan görsel etkileri oluşturma. Ziyaretçinin Form yoluyla size vereceği bilgileri, yapacağı
tercihleri ve bunları tutan değişkenlerin değerlerini nasıl belirleyeceğimizi ve kullanabileceğimizi ana
hatlarıyla gördük. Buraya kadar edindiğimiz bilgilerden yararlanmak ve bunları sayfalarımızın içeriğine
bağlı olarak gerçek durumlara uygulamak tabir yerinde ise kolay. Javascript’in Browser ve HTML
olaylarını (MouseOver, Click, Change gibi) yönlendirmekte kullandığı yönlendiricilerinden
(onMouseOver, onClick, onChange gibi) yararlanarak, sayfalarımızda belki de Javascript’i icad
edenlerin hiç de niyet etmedikleri bir tarzda da kullanabiliriz. Bu bölümde Javascript ile
oynayabileceğimiz görsel oyunları veya Javascript-Layer ve Javascript-CSS ilişkilerini ele alacağız.

Fakat önce kısaca Dinamik HTML’in (DHTML) imkan ve yeteneklerinden söz edelim. HTML ile DHTML
arasındaki fark, ikincisinin stil komutları, iki boyutlu tasarıma üst üste yığılan katmanları ekleyerek
üçüncü boyutu getiren ve veritabanı ile çoklu-ortam ürünleri ile klasik Web unsurları arasında bağ
kuran teknolojiler içermesidir. DHTML, HTML’e ek etiket getirmez; mevcut etiketlere ilave özellik ve
nitelik kazandırır. Bunu CSS (Cascading Style Sheets) teknolojisi sağlar. Ayrıca DHTML yoluyla, HTML’in
bilinen etiketlerinin bilinen özellikleri, ziyaretçinin sayfanızda yapacağı tercihlere, tutum ve
davranışlarına göre dinamik olarak değişmesini programlayabilirsiniz. Başka bir deyişle, DHTML, HTML
etiketlerinin program yoluyla dinamik hale getirilmesi demektir.

Browser dünyasında IE, bir HTML sayfasındaki bütün unsurların programlanmasına imkan veren ve
adına Element Modeli denen bir yöntem uygulayabilir. Fakat bunu yaptığınızda, bu kez Netscape’in bu
modeli tanımayan yorum tarzına takılabilirsiniz. Başka bir ifadeyle, IE için bir sayfanın tümü,
programlandığı belirtilmeden programlanabilir. Bir örnek verelim. H1 etiketini tanırsınız ve sürekli
kullanırsınız; H1 olarak etiketlenmiş bir metnin MouseOver olayı ile ilgisi olamaz, diye düşünebilirsiniz.
O halde şu kodu herhangi bir sayfaya yerleştirin:

<H1 onMouseOver="[Link] ='red';" onMouseOut="[Link] ='black';">Beni Kırmızı

Yap!</H1>

Sonra bu sayfayı önce IE ile sonra Netscape ile açın; her ikisinde de Mouse işaretçisini “Beni Kırmızı
Yap!” kelimelerinin üzerine getirin ve geri çekin. Bu deneyden sonra hayalkırıklığına kapılmayın; aynı
etkiyi Netscape ile de sağlamanız mümkün; fakat bunu Javascript programı ile yapabilirsiniz.

90
<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<TITLE>Merhaba Dünya!</TITLE>

</HEAD>

<BODY>

<H1 onMouseOver="[Link] ='red';" onMouseOut="[Link] ='black';">Beni Kırmızı

Yap!</H1>

</BODY>

</HTML>

91
Sonuç

İster başlangıç düzeyinde, ister ileri düzeyde, hangi düzeyde olursa olsun, hatasız Javascript programı
yazmak için dikkat edilmesi gerekenler:

1. Browser’ın Javascript yorumlayıcısı (belki de şimdilik) programcının ne demek istediğini anlama

imkanına sahip değildir; bu sebeple onun anlayacağı şekilde, yani nasıl yazılması gerekiyorsa, öyle
yazın. Yazım hatası yapmayın. Bir değişkeni nasıl tanımlamışsanız, baştan sona o yazılışla yazın.

2. Açtığınız etiketin kapanması gerekiyorsa kapatın. Özellikle </SCRIPT> etiketini unutmayın. Javascript
programcının en çok hata yaptığı nokta büyüktür, küçüktür işaretleri arasında satırlar dolusu kod varsa,
açtığı etiketi kapatmamaktır.

3. Parantezleri, özellikle fonksiyonların süslü parantezlerini kapatmayı unutmayın. Çift-tırnak ve tek-

tırnak işaretlerinin kapatılması da çok kolaylıkla unutulur.

3. Tam veya kesirli sayı değişkenlerine alfanümerik (karakter, String) değişkeni muamelesi yapmayın.
Örneğin, (.bold gibi) metin biçimlendirme metodları sayı tutan değişkenlere uygulanamaz; sayı
olmayan değişkenler de içlerinde rakam olsa bile aritmetik işlemden geçirilemez.

4. Javascript, işlem mantığı hatasını bulamaz. Mesela bir dörtgenin alanını bulurken, kenarlardan
birinin yüzde 20’sini alıp, diğer kenarla çarpıyorsanız, Javascript’in “Dörtgen alanı öyle hesaplanmaz!”
demesini boşuna beklersiniz. İşlemlerinizin mantık akışı ve matematik doğruluğunu sağlamak sizin
görevinizdir.

5. Deneyip, yanılmaktan daha iyi öğrenme yöntemi yoktur; hata yapmaktan korkmayın. Deneyin;
yanlışı düzeltin; bir daha deneyin.

Ve bol bol Script yazın.

92