İbrahim Çelikbilek (Kodlab) - JavaScript

+JAVASCRIPT-kunye 7/30/09 9:33 PM Page i
JAVASCRIPT
‹BRAH‹M
ÇEL‹KB‹LEK
Yay›n Da¤›t›m Yaz›l›m ve E¤itim

Hizmetleri San. ve Tic. Ltd. fiti.
+JAVASCRIPT-kunye 7/30/09 9:33 PM Page ii
KODLAB 11
JAVASCRIPT
‹BRAH‹M ÇEL‹KB‹LEK
ISBN 978-605-4205-11-0
Yay›nc›l›k Sertifika No: 13206
1. Bask›: A¤ustos 2009
Yay›n Yönetmeni: Suat Özdemirci

Kapak Tasar›m: Nebi Y›karo¤lu
Sayfa Düzeni: Fikret Eldem
Sat›fl: Hüseyin Üstünel
Bask›: fiefik Matbaas›, Tel: (212) 671 59 81
Bu kitab›n bütün yay›n haklar› Kodlab Yay›n Da¤›t›m Yaz›l›m ve E¤itim Hizmetleri
San. ve Tic. Ltd. fiti.’ne aittir. Yay›nevimizin yaz›l› izni olmaks›z›n k›smen veya ta-
mamen al›nt› yap›lamaz, kopya çekilemez, ço¤alt›lamaz ve yay›nlanamaz.
KODLAB Yay›n Da¤›t›m Yaz›l›m ve E¤itim Hizmetleri San ve Tic Ltd.fiti

Yerebatan Caddesi Salk›m Sö¤üt Sokak Keskinler ‹fl Han› No: 8
D: 401 Sultanahmet / ‹STANBUL
tel: (212) 514 55 66 fax: (212) 514 66 61

e-posta: bilgi@kodlab.com web: www.kodlab.com
+JAVASCRIPT-kunye 7/30/09 9:33 PM Page iii
‹brahim Çelikbilek
1980 Kars do¤umlu. 2002 y›l›nda F›rat Üniversitesi T.E.F bitirdi. Çeflitli e¤itim ku-
rulufllar›nda yaz›l›m uzmanl›¤› ile ilgili dersler verdi. 2005 y›l›nda Suflehri Atatürk
Endüstri Meslek Lisesine Bilgisayar Ö¤retmeni olarak atand›. ASP.NET ve C# ko-
nular›nda seminerler verdi ve makaleler yazd›. Web programlama alan›nda birçok
uygulama gelifltirdi.
+JAVASCRIPT-kunye 7/30/09 9:33 PM Page iv
iv
+JAVASCRIPT-kunye 7/30/09 9:33 PM Page v
ÖNSÖZ
Bu kitapta JavaScript’in temelleri ve ileri düzey uygulamalar en basit seviyeden bafl-
lanarak ad›m ad›m ayr›nt›l› bir flekilde anlat›lm›flt›r. Konular› dikkatli bir flekilde ta-
kip ederseniz JavaScript’i tam anlam›yla ö¤renebilir ve uygulama gelifltirebilirsiniz.
Konu anlat›mlar›nda bol bol örnekler bulunmakta ve bu örneklerin konular› daha iyi
anlaman›z için çok önemli oldu¤unu düflünüyorum.
Gelifltirdi¤iniz web sayfalar›na etkileflim katmak için bolca JavaScript kodu yazmal›-
s›n›z. Kesinlikle haz›r kod kullanmay›n, JavaScript ile ilgili merak etti¤iniz tüm ko-
nular bu kitapta mevcuttur. JavaScript yard›m›yla kullan›c› hareketlerine tepki göste-
ren dinamik sayfalar gelifltirebilirsiniz.
Ayr›ca DHTML, AJAX uygulamalar›n›n yap› tafl› JavaScript’tir. Bu kitapta DOM
nesnelerinden ayr›nt›l› bir flekilde bahsedilmifltir. DOM nesneleri anlat›l›rken kafa ka-
r›fl›kl›¤›na neden olmamak için sadece W3C DOM modeli kullan›lm›flt›r. DHTML ve
AJAX uygulamalar› gelifltirmek için JavaScript bilmeniz flartt›r.
JavaScript ile ilgili ya da programlama konular› ile ilgili sorular›n›z› www.kodlab.com
sitesinde bulunan yazara sor k›sm›ndan bana iletebilirsiniz.
Faydal› olmas› dile¤iyle...
‹brahim Çelikbilek
+JAVASCRIPT-kunye 7/30/09 9:33 PM Page vi
vi JAVASCRIPT
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page vii
‹Ç‹NDEK‹LER
1 JAVASCRIPT’E G‹R‹fi 1
Javascript Kodlar›n› HTML Sayfas› ‹çerisine Eklemek 3
Kodlar Aras›na Aç›klama Sat›rlar› Eklemek 6
Kodlar›m›z› Eski Sürüm Taray›c›lardan Saklama 7
Sayfa Aç›l›fl›nda Javascript Kodlar›n›n Çal›flt›r›lmas› 8
2 JAVASCRIPT TEMELLER‹ 9
De¤iflkenler 9
De¤iflken Tan›mlarken Dikkat Etmeniz Gereken Kurallar 10
De¤iflkenlere De¤er Atamak 11
Veri Türleri 11
number 12
boolean 12
string 12
Diziler (Array) 13
undefined 13
null 14
Veri Türü Dönüflümleri 15
3 OPERATÖRLER 17
Atama Operatörleri 17
Aritmetiksel ‹fllemler ve String (+) 18
De¤er Artt›rma ve Azaltma Operatörleri 19
Karfl›laflt›rma Operatörleri 20
Mant›ksal Operatörler 21
Typeof Operatörü 22
fiarta Ba¤l› Komut Çal›flt›rma (Ternary Operatörü) 22
‹fllem Önceli¤i 23
Javascript ile Sayfaya HTML ‹çeri¤i Yazmak 24
‹ki Metin Aras›nda Boflluk B›rakma ve
Sayfa Ak›fl›n› Bir Alt Sat›ra ‹ndirme, Tafl›ma 26
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page viii
viii JAVASCRIPT
<body> Etiketleri ‹çerisine Javascipt Kodu Yazma 27

<Head> Etiketleri Aras›na ve <Body> Etiketleri ‹çinde Farkl›
Bölgelere Javascript Kodu Yazma 28
Karakter Katarlar›n›n Biçimlerini De¤ifltirme (String Metodlar›) 29
sub() 29
sup() 29
bold() 30
italics() 30
toLowerCase() 30
toUpperCase() 30
fontcolor() 30
fontsize() 31
strike( 31
charAt() 31
charCodeAt() 31
concat() 32
replace() 32
match() 32
slice() 32
indexof() 33
substring() 33
substring (baslangic,bitis) 33
substring (baslangic) 33
substr () 33
4 D‹Z‹LER (ARRAY) 35
Dizi De¤iflkenine Eleman (De¤er) Girme 36
Dizi Tan›mlarken Boyutunu Belirleme 37
Dizi De¤iflkenleri ‹çindeki Elemanlara Ulaflma ve Elemanlar› De¤ifltirme 38
Dizi De¤iflkenlerine Eleman Eklemek, Silmek 40
‹ndeks Numaras› ile Diziye Eleman Eklemek 40
push() 40
unshift( ) 41
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page ix
‹Ç‹NDEK‹LER ix
splice( ) 42
Dizi Eleman›n› Silmek (Dizi ‹çinden Koparmak) 42
Diziye Eleman Eklemek 43
Ayn› Anda Diziden Eleman Silmek ve Eklemek 43
concat( ) 45
pop( ) 46
shift( ) 46
delete Operatörü 47
Dizi De¤iflkenleri ‹çerisindeki Elemanlar› S›ralamak ‹çin
Kullan›lan Metodlar 48
sort( ) 48
reverse ( ) 51
Dizi De¤iflkenleri ‹çerisinde Eleman Aramak ‹çin
Kullan›lan Metodlar 51
indexOf ( ), lastindexOf 51
Dizi De¤iflkenlerin ‹çindeki Nesnelerin Metinsel Veriye
Dönüflümü ile ‹lgili Metodlar 52
toString(), join() 52
Çok Boyutlu Diziler 53
5 KOfiUL ‹FADELER‹ VE DÖNGÜLER 55
Koflul ‹fadeleri 55
if ‹fadesi 55
if else Yap›s› 56
else if Yap›s› 57
switch ‹fadesi (Durum-Koflul) 59
Döngü ‹fadeleri 61
for Döngüsü 61
while Döngüsü 64
do..while Döngüsü 66
Döngülerde Kullan›lan Deyimler 67
break Deyimi 67
continue Deyimi 68
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page x
x JAVASCRIPT
6 FONKS‹YONLAR 71
Fonksiyon Tan›mlama 72
Fonksiyonlarda Geriye De¤er Döndürme 77
Rekursive Fonksiyonlar 80
Haz›r Fonksiyonlar 81
eval() 81
isFinite() 83
isNaN( ) 83
escape ( ) ve unescape( ) 83
parseint( ) ve parseFloat( ) 84
String( ) ve Number( ) 85
De¤iflkenlerin Geçerli Olduklar› Alan 86
7 OLAYLAR (EVENTS) 89
Eventhandler (Olay Yönlendiricileri) 89
onLoad, onUnLoad Olaylar› 90
onClick, onDbClik Olaylar› 92
onSubmit Olay› 94
onReset Olay› 95
onChange Olay› 96
onFocus Olay› 98
onBlur Olay› 99
onError, onAbort Olaylar› 100
onSelect Olay› 102
onResize Olay› 103
onKeyDown Olay› 103
onKeyPress Olay› 107
onKeyUp Olay› 108
onMouseDown Olay› 109
onMousemove Olay› 109
onMouseout Olay› 109
onMouseOver Olay› 109
onMouseUp Olay› 109
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xi
‹Ç‹NDEK‹LER xi
8 HATA DENET‹M‹ 113

try-catch Hata Yakalama Bloklar› 113
try-catch -finally Yap›s› 115
throw 116
9 JAVASCRIPT NESNELER‹ 119
Javascript Nesnesi Yaratmak 120
Nesne (Object) Yaratmak 120
Oluflturdu¤umuz Nesnelere Özellik Eklemek 121
Oluflturdu¤umuz Nesnelere Metod (Fonksiyon) Eklemek 123
Javascript Haz›r Nesneler 125
String Nesnesi 125
String Nesnesinin Metodlar› 125
Array Nesnesi 126
Boolean Nesnesi 126
Boolean Nesnesi Özellikleri 126
Boolean Nesnesi Metodlar› 127
Date Nesnesi 127
Date Nesnesinin Önemli Metodlar› 127
Number Nesnesi 134
Number Nesnesi Özellikleri 134
Number Nesnesi Metodlar› 135
Math Nesnesi 136
Math Nesnesi Metodlar› 136
10 DÜZENL‹ ‹FADELER (RegExp NESNES‹) 145
RegExp Nesnesi Olufltural›m 146
g-(global) 146
i-(ignoreCase) 147
m-(multiline) 147
Nesne Özellikleri 147
global 147
ignoreCase 148
multiline 148
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xii
xii JAVASCRIPT
input 148
lastindex 149
lastMatch 150
leftContext 150
rightContext 151
Nesne Metodlar› 152
compile () 152
exec () 152
test() 153
search () 155
match () 155
replace() 156
split() 156
Düzenli ‹fade Olufltururken Kullan›lan Özel Karakterler 157
Konum Belirleyen Karakterler 157
^ Karakteri 157
$ Karakteri 157
\b Karakteri 158
\B Karakteri 158
?= Karakteri 159
?! Karakteri 160
Gözükmeyen Karakterleri Düzenli
‹fade ‹çinde Temsil Eden Karakterler 160
Di¤er Özel Karakterler 161
Tekrarlama Miktarlar›n› Ayarlayan Karakterler 164
Grup Oluflturma ve Grup ‹çi Karakterler 166
e-mail Do¤rulama ‹fllemleri 167
Tarih Do¤rulama ‹fllemleri 170
11 TARAYICI NESNELER‹ 177
window Nesnesi 177
defaultStatus 177
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xiii
‹Ç‹NDEK‹LER xiii
name 181
outerHeight, outerWidth 181
closed 181
Open ( ) 181
URL 181
NAME 181
close ( ) 185
focus ( ) 189
blur( ) 189
alert( ) 191
prompt( ) 192
Confirm( 193
resizeBy( ) 194
resizeTo( ) 194
moveBy( ) 195
moveTo( ) 196
ScrollBy( ) 197
ScrollTo( ) 198
navigator Nesnesi 198
appCodeName 198
appName 198
appVersion 198
browserLanguage 199
cookieEnabled 199
3. screen Nesnesi 200
availHeight 200
availWidth 200
Height 200
Width 201
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xiv
xiv JAVASCRIPT
colorDepth 201
history Nesnesi 202
length 202
back() 202
forward() 202
go() 203
location Nesnesi 204
hash 205
href 207
search 208
protocol 208
pathname 209
assign( ) 210
reload( ) 210
replace( ) 211
document Nesnesi 211
anchors[] 211
links[] 212
body 213
title 215
getElementById() 216
getElementByName() 217
getElementByTagName() 219
write(), wr›teln() 221
Event Nesnesi 221
altKey Özelli¤i 221
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xv
‹Ç‹NDEK‹LER xv
ctrlKey Özelli¤i 223

shiftKey Özelli¤i 224
keyCode Özelli¤i 225
Button Özelli¤i 228
screenX, screenY Özellikleri 230
clientX, clientY Özellikleri 231
12 ZAMANLAYICILAR 233
Javascript’te Zamanlay›c›lar 233
setTimeout() 233
clearTimeout() 236
setinterval() 238
clearinterval() 240
13 FORMLAR 245
<form> Nesnesi 246
method 246
elements[] 247
Form Nesnesi Metodlar› 249
submit() 249
reset() 251
<INPUT> Nesnesi 252
Form Elemanlar› (Nesneleri) ‹çin Ortak Özellikler 253
type 253
›d 253
name 253
disabled 254
accesskey 255
tabindexS 257
Form Elemanlar› (Nesneleri) 257
text (Metin Kutusu) Nesnesi 257
value Özelli¤i 257
text Nesnesi Özellikleri 258
size Özelli¤i 258
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xvi
xvi JAVASCRIPT
maxLength Özelli¤i 259

readOnly Özelli¤i 260
text Nesnesi Metodlar› 262
blur() 262
focus() 262
select() 262
password (fiifre Metin Kutusu) Nesnesi 263
checkbox (Onay Kutusu) Nesnesi 264
checked Özelli¤i 264
checkbox Nesnesi Metodlar› 266
blur() 266
focus() 266
click() 266
radio (Seçenek Dü¤mesi) Nesnesi 268
checked Özelli¤i 268
hidden (Gizlenmifl Form Eleman›) Nesnesi 272
file Nesnesi 273
image Nesnesi 273
submit Nesnesi 273
reset Nesnesi 274
button Nesnesi 274
textarea Nesnesi 276
textarea Nesnesi Metodlar› 281
blur() 281
focus() 281
select() 281
select Nesnesi 281
Option Nesnesi 282
options[] 282
Select Nesnesi Metodlar› 287
add() 287
remove() 287
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xvii
‹Ç‹NDEK‹LER xvii
14 ÇERÇEVELER 291
frameset Nesnesi 291
frameset Nesnesinin Özellikleri 292
id 292
cols 292
rows 294
frameborder 296
border 296
bordercolor 296
frame Nesnesi 297
noframes Etiketi 301
iframe Nesnesi 302
15 ÇEREZLER 307
Çerez Oluflturma 307
Çerezi Okumak 309
+JAVASCRIPT-icindekiler 7/30/09 9:34 PM Page xviii
xviii JAVASCRIPT
+JAVASCRIPT-BOLUM1 7/30/09 9:20 PM Page 1
JAVASCRIPT’E
1
G‹R‹fi
Javascript Kodlar›n› Kodlar›m›z› Eski Sürüm
HTML Sayfas› ‹çerisine Eklemek 3 Taray›c›lardan Saklama 7
Kodlar Aras›na Sayfa Aç›l›fl›nda Javascript
Aç›klama Sat›rlar› Eklemek 6 Kodlar›n›n Çal›flt›r›lmas› 8
Javascript taray›c›da çal›flan bir script dilidir. Browser (taray›c›) javasc-

ript komutlar›n› yorumlayarak ifllevlerini yerine getirir.
HTML sadece sayfam›z› oluflturmam›za yarayan ve sayfam›zdaki nes-
nelere k›s›tl› özellikler katmam›za yarayan text tabanl› bir etiket dilidir.
‹çerisinde programlama dili olmas› için gereken de¤iflkenler, karar ya-
p›lar›, döngüler vb gibi yap›lar› içermez. HTML ile oluflturdu¤unuz
web sayfalar› dura¤an yani kullan›c›lar›n hareketlerine duyarl› olmayan
sayfalar olacakt›r.
WEB SAYFASI à ‹çerik + Sunum + Etkileflim
Yukar›ya bakt›¤›m›zda içerik k›sm›n› HTML ile oluflturdu¤umuzu bili-

yoruz. HTML içerik saklar, fakat saklad›¤› içeriklerin özelliklerini de-
¤ifltirmek ya da ayarlamak için çok k›s›tl› imkânlar sunar.
‹flte burada devreye var olan içeri¤in sunulmas› gelmektedir. Sunum ifl-
lemi CSS ile yap›lmaktad›r. fiu anda içerik ve sunum ifllemini anlad›¤›-
m›za göre biraz etkileflime bakal›m.
2 JAVASCRIPT
Etkileflim dedi¤imizde web sayfas›n›n kullan›c› hareketlerine tepki gös-

termesi ya da dura¤an olmayan nesneler akl›m›za gelmektedir. ‹flin bu
k›sm›n› Javascript yard›m›yla yapmaktay›z.
Programlama dillerinde yaz›lan kodlar tek bafllar›na çal›fl›rlar. Kodlar›

çal›flt›rmak istedi¤inizde hata ay›klama ve compile (derleme) ifllemi
gerçeklefltirilerek makine diline ya da arakoda çevrilirler. Fakat Javasc-
ript HTML içerisine eklenir ve taray›c› taraf›ndan yorumlanarak yaz›lan
kodlar›n ifllevleri yerine getirilir.
Javascript ile kullan›c› hareketlerine duyarl› olan ve kullan›c› ile iletifli-

me geçebilen sayfalar oluflturabiliriz. Sayfam›zdaki CSS kodlar›n› çal›fl-
ma an›nda de¤ifltirebiliriz. Çal›flt›¤› browserin yüklü oldu¤u bilgisayar-
la ilgili çeflitli bilgilere (iflletim sistemi, saat, taray›c› özellikleri gibi)
ulaflabilir ve sayfam›za görsel nitelikli nesneler ekleyebiliriz.
Son zamanlarda popüler olan AJAX sayfan›n tamam›n› yenilemeden sa-

dece belirli bir region (alan) yenilemek için kullan›l›r. Bu uygulamala-
r›n yap›tafl› da Javascript’tir.
Javascript dedi¤imizde DOM modelinden bahsetmek gerekir. DOM

(Document Object Model) Doküman Nesne Modeli, bu model saye-
sinde Javascript ile sayfa üzerindeki tüm sayfa nesnelerine (elemanlar›-
na) ulaflmam›z mümkündür. DOM yeni versiyon hemen hemen tüm ta-
ray›c›lar taraf›ndan desteklenmekle beraber eski tip taray›c›larda farkl›-
l›k gösterebilmektedir. Bu durumda Javascript içerisinde taray›c› model
ve versiyonunu tespit edip alternatif kodlar yazmam›z gerekebilir.
Temel bir HTML yap›s› afla¤›da gözükmektedir.
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
</body>
</html>
Yukar›daki yap›da;
<head></head>: Sayfa bafll›¤›. Bu etiketler aras›nda css, title, meta
JAVASCRIPT’E G‹R‹fi 3
etiketleri tan›mlan›r. Özet olarak sayfada gözükmeyen tan›mlama blok-

lar›n›n yer ald›¤› k›s›md›r.
<body></body>: Sayfan›n gövdesi. Bu etiketlerin aras›nda ise pencere-

de gösterilecek içerik yaz›l›r.
Javascript kodlar›n›n nereye ve nas›l yaz›laca¤› afla¤›da anlat›lacakt›r.
Javascript kodlar›m›z› HTML içerisine eklemekteyiz. HTML sayfas›n›

aç›p bir text editöründe (notepad ++), Dreamweaver ve benzeri prog-
ramlarda Javascript kodlar›m›z› yazabiliriz.
Javascript kodlar›m›z› <script></script> taglar› aras›na yaz›yoruz.

Script tag› içerisinde script dili ve tipini belirlemeliyiz.
<script language=”javascript” type=”text/javascript”>
// Kodların Yazılacağı Bölüm
</script>
language: Javascript sürümünü belirtmek için kulland›¤›m›z bir para-

metredir. E¤er belirtilen sürüm taray›c›lar taraf›ndan desteklenmiyorsa
script blo¤u çal›flt›r›lmaz. Bunu engellemek için bu parametreye sadece
“javascript” yazmak uygun olacakt›r. E¤er yeni ç›kan bir sürüm kulla-
nacak isek o sürümle beraber gelen tüm metod, yöntem ve özellikler
sayfada kullan›labilir.
type: ‹çeri¤in tipini tan›mlamak için kullan›l›r. Standart script bloklar›

aras›na yazd›¤›m›z içerik text ve Javascript’tir.
Javascr›pt Kodlar›n› HTML

Sayfas› ‹çerisine Eklemek
Javascript kodlar›n› dört farkl› yere ekleyebiliriz:
1. Javascript kodlar›m›z› <head> etiketleri aras›na yazabiliriz. Head etike-
ti içerisine yazarsak sayfa yüklenmeye bafllanmadan önce Javascript
kod bloklar›m›z yorumlanacakt›r.
4 JAVASCRIPT
<head>
<meta http-equiv=”Content-Type” content=”text/html; â
charset=iso-8859-1” />
<title>Untitled Document</title>
<script type=”text/javascript” language=”javascript”>
// Bu kısıma kodlar yazılacak...
</script>
</head>
2. Javascript kodlar›m›z› <body> etiketleri aras›nda tan›mlayabiliriz. Bu

durumda kodlar›m›z sayfa yüklenirken yorumlanacakt›r.
<body>
<script type=”text/javascript” language=”javascript”>
</script>
</body>
3. Javascript kodlar›m›z› d›flar›da (.js) uzant›l› bir dosya içerisinde sakla-

yarak HTML sayfas› içerisinden bu kodlar› ça¤›rabiliriz. Bu kodlar› ça-
¤›rmak demek sayfa kodlar› aras›na dahil etmek demektir. Bunu yapar-
ken <script> tag›m›z›n src (source) özelli¤ini kullan›yoruz
// Javascript Kodu yazılmaz
</script>
Burada script etiketinin kapat›ld›¤›na dikkat edin. ilk.js dosyas› içeri-

sinde Javascript kodlar›n› bar›nd›ran bir sayfad›r ve uzant›s› js’dir. Bu
flekilde ilk.js dosyas› içerisinde ki Javascript kodlar›n› sayfam›za dahil
etmifl olduk.
Dikkat Edilecek Hususlar
• Kaynak dosyan›n uzant›s› (js) olmak zorundad›r.
• src parametresine relative (göreceli) yol tan›mlamas› yap›lmal›d›r.
• Kaynak dosya <script></script> taglar› içermez.
• E¤er src parametresi kullan›lm›flsa <script></script> bloklar› aras›-

na kod yaz›lmaz, yaz›lsa da bu kodlar› browser dikkate almayacakt›r.
Javascript kodlar›n›n bir kaynak dosya da saklanmas›n›n avantajlar›
vard›r:
• Örne¤in belirli bir ifllem yapacaks›n›z. Sayfan›zda ve var olan tüm alt
sayfalarda bu ifllemi gerçeklefltiren kodlar› kullanacaks›n›z. E¤er kay-
nak dosya kullanmazsan›z ana sayfa ve tüm alt sayfalara bu kodlar› ek-
lemeniz gerekecektir. Bu durumda sonradan bir de¤ifliklik yapma ihti-
yac› duyarsan›z o zaman tüm sayfalardaki kodlar› de¤ifltirmeniz gereke-
cek. Bununda epey bir zaman alaca¤› kesin. Ama e¤er bir kaynak dos-
yada bu kodlar› saklar ve her sayfaya src parametresi ile bu kaynak
dosyay› eklerseniz, defliklik yapaca¤›n›z zaman sadece kaynak dosyay›
de¤ifltirmeniz yeterli olacakt›r.
• Kod karmaflas›ndan kurtulmak ve hata tespiti için kaynak dosya kullan-
mak daha avantajl› olacakt›r.
4. HTML içindeki olay yönlendiricilere Javascript kodlar› yazabilirsiniz.
Javascript’te eventhandler dedi¤imiz olay yönlendiricileri mevcuttur.
Yani bir event (olay) gerçekleflir; sonra bu olaya karfl› yaz›lan kodlar
çal›fl›r. Javascript’te olay yönlendiricilere ister kodun kendisini ister Ja-
vascript kodlar›n›z› bar›nd›ran fonksiyon ad›n› yazabilirsiniz.
Sayfam›za bir buton ekleyelim ve olay yönlendiriciye Javascript kodu

yazmay› görelim:
<body>
<input type=”Button” value=”tıkla”
onclick=”alert(‘merhaba’)” />
</body>
onClick olay yönlendiricisine Javascript kodu yaz›lm›fl.
fiunu söyleyelim; dikkat edilirse <script> taglar› kullan›lmad› ve direk

bir eventhandler içerisine bir Javascript deyimi yaz›ld›. Asl›nda olay
yönlendiricilere Javascript yazmak kodlar ço¤ald›kça kar›fl›kl›¤a neden
olabilir bu yüzden fonksiyonlar kullan›l›r.
6 JAVASCRIPT
• Javascript olay yönlendiricilerine fonksiyon da atanabilir.

function mesaj()
{
alert(“merhaba”);
}
</script>
<body>
<input type=”button” value=”buton” onclick=”mesaj()” />
</body>
Burada onClick olay› oldu¤unda bir fonksiyon ça¤r›lmakta yani çal›fl-

t›r›lmaktad›r.
Kodlar Aras›na Aç›klama

Sat›rlar› Eklemek
Javascript kod bloklar›n›z aras›na aç›klama sat›rlar› (comment) ekle-
yebilirsiniz. Aç›klama sat›rlar› Javascript taraf›ndan iflleme al›nmaz.
E¤er tek bir aç›klama sat›r› oluflturmak istiyorsan›z;

//
karakterini kullanabilirsiniz. Bu sat›rdaki kodlar Javascript taraf›ndan

dikkate al›nmayacakt›r. Aç›klama sat›rlar›n› kullanarak kodlar›n›z ara-
s›na notlar ekleyebilirsiniz. Örne¤in kodlar›n›z aras›na neyi niçin ne za-
man yapt›m fleklinde notlar al›rsan›z daha sonra bu notlar kodlar› açt›-
¤›n›zda size yard›mc› olacakt›r.
E¤er birden fazla aç›klama sat›r› oluflturmak isterseniz;

/*
*/
sembollerini kullanman›z gerekecektir. Bu sembollerin aras›nda bulu-

nan tüm sat›rlar Javascript taraf›ndan dikkate al›nmaz.
Örnek

function mesaj()
{
// Tek satırlık açıklama
/*
Birden fazla satırlık açıklama
*/
}
</script>
Kodlar›m›z› Eski Sürüm

Taray›c›lardan Saklama
Javascript’i tan›mayan eski taray›c›lar script bloklar› aras›na yazd›¤›-
m›z kodlar› bir text gibi iflleme tabi tutmadan sayfaya yazd›racakt›r. Bu
durum hofl bir durum olmaz. Eski taray›c›lardan Javascript kodlar›n›
saklamak yani bu kodlar› tan›m›yorsa o zaman aç›klama sat›r› gibi gör-
mesini sa¤lamak için kodlar›m›z›  sembolleri aras›na yaz-
mam›z gerekir.


</script>
‹ki sembol aras›ndaki kodlar eski taray›c›lar taraf›ndan HTML Com-

ment (HTML aç›klama sat›r›) olarak alg›lanacakt›r. fiu anda kullan›lan
taray›c›lar zaten Javascript kodlar›n› tan›maktad›r. Ama yine de yaz-
makta fayda var.
8 JAVASCRIPT
Sayfa Aç›l›fl›nda Javascr›pt

Kodlar›n›n Çal›flt›r›lmas›
Javascript olay tabanl› çal›flan bir dildir. Event (olay) gerçekleflti¤inde
daha önceden olay için fonksiyon içerisine yazd›¤›m›z kodlar çal›fl›r.
E¤er script taglar› içerisine fonksiyon kullanmadan kodlar› yazarsak
sayfa yüklendi¤inde bu kodlar herhangi bir olay›n fonksiyonuna ba¤l›
olmad›¤› için hemen çal›flacakt›r.
Örnek
<script type=”text/javascript”>

</script>
JAVASCRIPT
2
TEMELLER‹
De¤iflkenler 9 boolean 12
De¤iflken Tan›mlarken Dikkat string 12
Etmeniz Gereken Kurallar 10 Diziler (Array) 13
De¤iflkenlere De¤er Atamak 11 undefined 13
Veri Türleri 11 null 14
number 12 Veri Türü Dönüflümleri 15
De¤iflkenler
De¤iflkenlerin olmad›¤› bir programlama dili olamaz. De¤iflken isimleri
bilgi saklamak için bellekte ayr›lan alanlara verilen isimlerdir. De¤iflken-
leri içi bofl kutular gibi düflünebilirsiniz ve bu kutular›n birer ad› vard›r.
Derleme (Compile) ifllemi yap›lan programlama dillerinde de¤iflkene

de¤er atamadan önce;
De¤iflkenin;
Ad›, de¤iflkenin saklayaca¤› veri türü belirlenmelidir.
Örne¤in, VB.NET’te de¤iflken tan›mlarken;

Dim a As Integer
a=5
Burada de¤iflkenin ad› ve veri türü belirlenmifl ve daha sonra de¤er atan-
m›flt›r.
10 JAVASCRIPT
Veri türü: De¤iflken içerisinde hangi türde verilerin saklanaca¤›d›r.

(Say›, metin...)
Scope: De¤iflkenin geçerli olaca¤› yani o de¤iflkeni kullanabilece¤imiz

aland›r.
Javascript’te de¤iflkene de¤er atad›¤›n›zda veri türü otomatik olarak be-

lirlenmifl olur. Javascript’te veri türleri kat› kurallara tabi de¤ildir. Bu
durumda de¤iflken tan›mlarken ve kullan›rken dikkatli olmam›z gerekir.
E¤er bir fonksiyon içerisinde de¤iflken tan›mlam›flsan›z o de¤iflken sa-
dece o fonksiyon için geçerlidir (scope).
De¤iflken Tan›mlarken
Dikkat Etmeniz Gereken Kurallar
1. De¤iflken isimleri harf ya da _ (alt çizgi) karakterleri ile bafllamal›d›r.
De¤iflken isimleri numeric bir de¤erle bafllayamaz daha sonra say› içe-
rebilir. De¤iflken isimlerinde Türkçe karakterler ve boflluk karakteri kul-
lan›lmaz.
ad doğru
adı yanlış
123 yanlış
a2 doğru
_2a doğru
2. Javascript büyük-küçük harf ayr›m› yapar (case sensitivity) .Yani AD

de¤iflkeni ile ad, aD, Ad de¤iflkenleri farkl› de¤iflkenlerdir.
3. De¤iflkenler ilk defa tan›mlanacaksa var sözcü¤ü kullan›lmal›d›r. Bura-
da var sözcü¤ünü kullanman›z flart de¤il, ama de¤iflkeni ilk defa nerde
tan›mlay›p de¤er atad›¤›n›z› anlamak için iyi bir yöntemdir.
var ad;
4. De¤iflken ismi olarak Javascript rezerve sözcükleri kullan›lmaz. Yani

Javascript taraf›ndan kullan›lan özel sözcükler kullan›lmaz.
Bunlara örnek olarak; loop, var, short, float, fonksiyon, if, for...
5. De¤iflkene karakter katarlar› (metin, metin gruplar›) atan›rken karak-
ter katar› çif t›rnak ya da tek t›rnak içerisine al›nmal›d›r.
JAVASCRIPT TEMELLER‹ 11
var adi=”ahmet” do¤ru

var adi= ‘Ahmet’ do¤ru
var adi= Ahmet yanl›fl
De¤iflkenlere De¤er Atamak

Javascript’te de¤iflkenin veri türü de¤iflkene de¤er atand›¤›nda otomatik
olarak seçilir. De¤iflkene tan›mlama an›nda ya da tan›mlad›k tan sonra
de¤er atanabilir.
Örnek

var ad;
ad=”saeml”;
var sayi=55;
var as=”123”;
var soyadi=”aksu”;
</script>
De¤iflkenlere metin ya da metin gruplar› atarken çift t›rnak ya da tek t›r-

nak kullanabilirsiniz. HTML imleri aras›na Javascript yazd›¤›m›zda bu
konunun önemi anlat›lacakt›r.
Veri Türleri
Yukar›daki örneklerden anlafl›laca¤› gibi Javascript’te de¤iflkenler ta-
n›mlan›rken herhangi bir veri türü belirtilmez, aksine de¤iflkene veri
atand›¤›nda javascript taraf›ndan de¤iflkenin veri türü belirlenir. Javasc-
ript’te bir de¤iflkene tüm veri türlerlerinde bilgi atanabilir. Program ak›-
fl›nda bir de¤iflkenin veri türü içerisine atad›¤›m›z veriye göre otomatik
olarak de¤iflir.
Örnek
var ad=55;
// ad değişkeninin veri türü number olacaktır.
ad=”can”
// ad değişkeninin veri türü içerisine string bir değer
atandığından stringe çevrildi
12 JAVASCRIPT
Sonuçta ad de¤iflkeni de¤eri can ve veri türü string olacakt›r.
number
Say›sal veri türüdür. Tamsay› ve ondal›kl› say›lar› tan›mlamak için kul-
lan›l›r. 8 (octal) ve 16 (hexadecimal) tabanl› say›lar› da number ile ta-
n›mlayabilirsiniz. 8 tabanl› say›lar› tan›mlamak için say›n›n bafl›na 0, 16
say› taban›ndaki say›lar› tan›mlamak için say›n›n bafl›na 0x konulur.
Örnek

var a=23; // tamsayı
var a=2.3 //ondalıklı sayı
var a=023 // 8 tabanında sayı
var a=0x56 // 16 tabanında sayı
</script>
16 say› taban›nda 0-9 aras› rakamlar ve A-F aras› harfler kullan›l›r. Say-
fa tasarlarken renklerin hexadecimal kodlamalar›n› kullanaca¤›m›zdan
Javascript’te bir de¤iflkeni 16 say› taban›nda bir say› olarak tan›mlama-
m›z iflimizi kolaylaflt›r›r.
boolean
Mant›ksal veri türüdür. De¤iflkenin de¤eri true (do¤ru) ya da false
(yanl›fl) olabilir. true ya da false kelimeleri küçük harfle yaz›lmad›r.
E¤er küçük harfle yaz›lmazsa javascript bunlar› de¤iflken olarak alg›la-
yacakt›r. Boolean veri türü karfl›laflt›rma ifllemlerinde çokça kullan›l›r.
Örnek

var a=true;
var b=false;
</script>
str›ng
Karakter katarlar› (metin, metin gruplar›) string olarak tan›mlanabi-
lir. Burada flunu belirteyim; say›sal de¤erleri de string olarak tan›mlaya-
bilirsiniz. Javascript say›sal de¤erleri de metin olarak kabul eder. Bir

de¤iflkene t›rnaklar içerisinde say›sal de¤erler atarsan›z bu de¤iflken ile
matematiksel ifllem yap›lamaz.
Örnek
var a=”hasan”;
var soyadi=”can”;
var sinif=”11A”;
var deger=”1231”
// deger değişkeni içerisindeki 1231 javascript tarafından
// karakter katarı olarak algılanır.
var adi=’efe’;
// Bir değişkene string bir değer atanırken ‘’ tek tırnak
kullanılabilir.
</script>
Diziler (Array)
Bu veri türü, bir isim alt›nda toplanm›fl olan bir grup veriyi s›ral› bir fle-
kilde saklamak için kullan›l›r.
Örnek

var sayi=new Array(1,2,3,4);
var dizi=new Array(“12”,”harun”,”emre”,”as4”,12,12.3);
</script>
undef›ned
E¤er bir de¤iflkeni var sözcü¤ü ile tan›mlay›p de¤er atamadan b›rak›r-
san›z (daha önceden biliyoruz Javascript’te veri tipleri de¤er atan›nca
belirlenir) bu durumda de¤iflkenin veri tipi undefined (tan›mlanmam›fl)
olacakt›r.
Örnek
var adi;
var soyadi;
document.write(adi);
14 JAVASCRIPT
Sayfam›z› çal›flt›rd›¤›m›zda taray›c›da undefined yazacakt›r. Bu flu an-

lama gelir de¤iflkenin veri türü tan›mlanmam›fl. E¤er tan›mlanmam›fl
yani de¤er atanmam›fl bir de¤iflkeni bir deyimde ya da ifadede kullan›r-
sak hata mesaj› al›r›z.
Örnek
var a=5;
var b;
document.write(a*b);
a de¤iflkeni number ve 5 de¤erini alm›fl fakat b de¤iflkenine de¤er atan-

mad›¤› için veri türü undefined olacakt›r. E¤er a*b iflleminin sonucunu
sayfaya yazd›rmak istersek NaN fleklinde bir sonuç al›r›z. (Not A Nume-
ric) Yani say›sal de¤il.
null
Yukar›da bir de¤iflkene de¤er atamad›¤›m›zda ve bu de¤iflkeni deyim,
ifade, formül içerisinde kulland›¤›m›zda hata verdi¤ini görmüfltük. E¤er
kulland›¤›m›z de¤iflkenin bir bafllang›ç de¤eri yoksa o zaman null veri
türünü kullanabiliriz
Bir de¤iflkene bafllang›ç de¤eri olarak null de¤erini atarsan›z de¤iflkenin

veri türü null olacakt›r. Bu de¤iflkeni bir ifade ya da deyimde kullan›r-
san›z ifade ya da deyim içerisinde kulland›¤›n›z di¤er de¤iflkenlere gö-
re null veri türüne sahip de¤iflkenin veri türü otomatik olarak de¤iflir.
Örnek

var a=null;
var b=25;
var c=a+b;
document.write(c);
</script>
Sonuç olarak c=25 olacakt›r. Çünkü null veri türüne sahip olan a de¤ifl-
keni ile number veri türüne sahip olan b de¤iflkeni toplan›rken, javasc-
ript a de¤iflkenine atanan null de¤erini 0 de¤erine dönüfltürür. (a=0)
Örnek

var a=null;
var b=”abc”;
var c=a+b;
document.write(c);
</script>
Sonuç olarak c=”abc” olacakt›r. Çünkü null veri türüne sahip olan a de-
¤iflkeni ile bir karakter katar› aras›nda birlefltirme ifllemi yap›ld›¤› için a
de¤iflkeni s›f›r uzunlukta bir de¤ere dönüfltürülür: (a=””)
Veri Türü Dönüflümleri

Javascript’te program kodlar›n›n ak›fl›nda de¤iflkenin veri türü, içerisi-
ne atanan de¤ere göre de¤iflebilir. Javascript bu konuda bize esnek bir
yap› sunmakla beraber programc›n›n dikkatli olmas› gerekecektir.
Örnek

var a=”ali”;
var a=3;
var a=true;
var a=new Array(“a”,1);
// Sonuç olarak a değişkenin veri türü Array olacaktır.
</script>
De¤iflkenler bir deyim ya da formül içerisinde kullan›ld›klar› zaman oto-

matik olarak veri türü de¤iflimine u¤rarlar. Hemen örnekle aç›klayal›m.
Örnek

var a=”ali”;
var b=3;
var c=a+b;
document.write(c);
</script>
16 JAVASCRIPT
Örne¤imize bakarsak a de¤iflkenin veri türü string ve b de¤iflkeninin ve-

ri türü number olarak belirlenmifl. Javascript için + operatörü öncelikli
olarak birlefltirme operatörüdür. E¤er + operatörünün solunda ya da sa-
¤›nda bir string ifade varsa javascript birlefltirme ifllemi yapar ve num-
ber olarak tan›mlanm›fl b de¤iflkenini string’e çevirir.
Sonuç olarak c=”ali3” olmufl olur.
Javascript her zaman numeric de¤erleri karakter grubuna çevirmez. (-, *)

operatörleri say›sal ifllemler için kullan›lacakt›r.

var a=”2”;
var b=3;
var c=a*b;
document.write(c);
</script>
Örne¤imizde a de¤iflkeni string ve b de¤iflkeni number olarak belirlen-

mifl. Javascript için * operatörünün tek görevi aritmetiksel ifllem yap-
makt›r. a*b iflleminde javascript a de¤iflkeninin içerisinde aritmetiksel
olarak kullanabilece¤i bir de¤er oldu¤undan a de¤iflkeninin veri türünü
sadece yap›lacak bu ifllem için number’a çevirir ve çarpma ifllemi ya-
par. Yap›lan veri türü de¤ifltirme ifllemi kal›c› de¤ildir.
Sonuçta c=6 olacakt›r.
Burada akl›n›za flu soru gelebilir. Peki, a de¤iflkeninin içerisinde num-

ber’a çevrilemeyecek bir de¤er varsa o zaman çarpma iflleminin sonucu
ne olacakt›r? string ile number çarp›lamayaca¤›ndan NaN (Not A Nu-
meric) hatas› verilecekti.

var a=”2a”;
var b=3;
var c=a*b;
document.write(c);
// sonuçta c’nin değeri NaN olur.
</script>
OPERATÖRLER
3
Atama Operatörleri 17 fiarta Ba¤l› Komut Çal›flt›rma
Aritmetiksel ‹fllemler ve (Ternary Operatörü) 22
String (+) 18 ‹fllem Önceli¤i 23
De¤er Artt›rma ve Javascript ile Sayfaya
Azaltma Operatörleri 19 HTML ‹çeri¤i Yazmak 24
Karfl›laflt›rma Operatörleri 20 Karakter Katarlar›n›n Biçimlerini
Mant›ksal Operatörler 21 De¤ifltirme (String Metodlar›) 29
Typeof Operatörü 22
Bir deyim, ifade, formül içerisinde matematiksel ya da mant›ksal ifllem-

leri yerine getiren karakter ya da karakter gruplar›d›r.
Atama Operatörleri
Karakter Görevi
= De¤iflkene de¤er atamak için kullan›l›r.
Örnek
a= 7 , a=”as”
+= Birikimli toplama, a+=1 ifadesi a=a+1 fleklindeki ifadenin
k›salt›lm›fl›d›r.
Örnek
a = 2 ise a + = 5 à a= 7 olur.
-= Birikimli ç›karma, a-=1 ifadesi a = a - 1 fleklindeki ifadenin
Örnek
a = 2 ise a - = 5 à a= -3 olur.
18 JAVASCRIPT
Karakter Görevi
*= Birikimli çarpma, a*=1 ifadesi a = a * 1 fleklindeki ifadenin
Örnek
a = 2 ise a*=5 à a= 10 olur.
/= Birikimli bölme, a/ =5 ifadesi a = a / 5 fleklindeki ifadenin
Örnek
a=8 ise a/=2 à a=4 olur.
%= Birikimli kalan bulma. Sa¤daki de¤eri soldakine böler ve
kalan› verir.
Örnek
a=8 ise a%=3 à a=2 olur.
Aritmetiksel ‹fllemler ve
Str›ng (+)
Karakter Görevi
+ String ifllemler için öncelikli kullan›l›r. String ifllemlerde birlefltirme,
matematiksel ifllemlerde toplama yapar.
- Ç›karma ifllemi yapar.
* Çarpma ifllemi yapar.
/ Bölme ifllemi yapar.
% Mod ifllemi yapar. Bir bölümden oluflan kalan› verir.
Örnek
document.write(34%3);
</script>
34 say›s› 3 bölündü ve kalan 1 olarak gösterildi.
OPERATÖRLER 19
De¤er Artt›rma ve
Azaltma Operatörleri
Bu operatörler number ya da de¤iflkenin de¤erini artt›r›p azaltmaya yarar.
Burada de¤iflken olarak a karakterini kullanal›m;
Karakter Aç›klama
++ ++a ise a=a+1 ya da a++ ise a=a+1
-- --a ise a=a-1 ya da a-- ise a=a-1
De¤iflkeni tek bafl›na kullan›p de¤iflkenin de¤erini artt›rabilir ya da azal-

tabilirsiniz. Bu durumda artt›rma ya da azaltma karakterlerinin de¤iflke-
nin önüne ya da sonuna yaz›lmas› bir fley de¤ifltirmeyecektir.
Fakat artt›rma ya da azaltma ifllemini de¤iflken bir formülde, deyimde

ya da bir javascript metodunda kullan›lm›flken yaparsan›z; artt›rma ya
da azaltma karakterlerinin de¤iflkenin önüne ya da sonuna yaz›lmas› so-
nucu de¤ifltirecektir.

var a=1;
document.write(++a);// 1.durum sonuç:2
document.write(a++);// 2.durum sonuç:1
</script>
‹ki durumda da a de¤iflkeninin de¤eri sonuçta 2 olacakt›r. Fakat ben bir

metod içinde kulland›¤›m için;
1. Durumda: Yazma ifllemi öncesinde artt›rma (increment) gerçekleflti-
¤i için ekranda 2 de¤eri gözükecektir. Sonuçta document.write() me-
todu a de¤iflkeninin yeni de¤erini yazd›rm›fl oldu.
2. Durumda: Yazma ifllemi öncesinde artt›rma (increment) gerçekleflme-
di¤i için ekranda sadece 1 gözükecektir. Sonuçta a de¤iflkeninin de¤eri
yine artt›r›l›yor ama ifllem s›ras› farkl› oldu¤u için document.write()
metodu a de¤iflkeninin yeni de¤erini de¤il, eski de¤erini yazd›r›yor.
NOT Artt›rma operatörü için anlat›lanlar azaltma operatörü için de geçerlidir.

20 JAVASCRIPT
Karfl›laflt›rma Operatörleri
Karakter Görevi
== Eflit (equal) anlam›na gelir. Bu operatör de¤iflken ya da de¤erlerin
veri türlerini dikkate almaz. (string ya da number ayr›m› yapmaz.)
Örnek
3==3 do¤rudur. “3”==3 do¤rudur, “saeml”=”Saeml” yanl›flt›r.
= = = Kesin eflit anlam›na gelir ve (==)‘den daha kat› kurallara sahiptir.
Veri türlerine bakarak kesin eflitlik arar.
Örnek
3===3 do¤ru, ama “3”===3 yanl›fl. “as “===”As” yanl›fl.
Örnek
a=”as”;
if(a===”As”)
{
alert(“Şart Doğru”);
}
</script>
if blo¤u aras›ndaki kod çal›flmayacakt›r.

!= Eflit de¤il anlam›na gelir.
Örnek
5!=3 do¤ru, 5!=”5” yanl›fl, “as”!=”As” do¤ru
!= = Kesin eflit de¤il anlam›na gelir. Veri türleri dikkate al›nacakt›r.
Örnek
5!==3 do¤ru, 5!==5 yanl›fl, “as”!==”As” do¤ru
> Büyüktür
< Küçüktür
< = Küçük eflit
>= Büyük eflit
OPERATÖRLER 21
Mant›ksal Operatörler
Bu operatörler karfl›laflt›rma yap›lar›nda kullan›lan operatörlerdir. Bir-
den fazla flart› ba¤lamak için kullan›l›rlar.
Karakter Görevi
&& ve (and) anlam›ndad›r. Toplam flart›n do¤ru olmas› için ve
operatörü ile ba¤lanm›fl tüm flartlar›n do¤ru olmas› gerekir.
Örnek
var a=2;
var b=3;
if(a==2 && b==4 )
{
alert(“Şart bloğu Doğru”);
}
</script>
Birinci flart do¤ru, ikinci yanl›fl oldu¤undan toplam flart yanl›fl olur.
|| veya (or) anlam›ndad›r. Toplam flart›n do¤ru olmas› için veya
operatörü ile ba¤lanm›fl flartlardan herhangi birinin do¤ru
olmas› yeterlidir.
Örnek
var a=2;
var b=3;
if(a==2 || b==4 )
{
alert(“Şart bloğu Doğru”);
}
</script>
fiart blo¤u a de¤iflkeninin de¤eri 2 ya da b de¤iflkeninin de¤eri

3 mü? fleklinde okunur. Birinci flart do¤ru ikinci flart yanl›flt›r.
Ba¤laç olarak or (veya) operatörü kullan›ld›¤›ndan flart›n tamam›n›n
do¤ru olmas› için bir flart›n do¤ru olmas› yeterlidir. Sonuçta toplam
flart do¤ru olmufl olur.
22 JAVASCRIPT
Karakter Görevi
! Oluflan mant›ksal sonucu ters çevirir. ! (flart) fleklinde kullan›l›r.
! do¤ru à yanl›fl
! yanl›fl à do¤ru
!(4 >5) sonuç do¤ru
!(4 <5) sonuç yanl›fl
Typeof Operatörü
Parametre olarak verilen de¤erin veri türünü geri döndürür.
document.write(typeof(“efe”));
</script>
Sayfada string yazd›¤›n› göreceksiniz
E¤er bir dizi de¤iflkeniniz varsa geriye object de¤erini döndürür. Çün-
kü dizi de¤iflkenleri object olarak oluflturulur.
Örnek

var mydizi=new Array(1,2);
document.write(typeof(mydizi));
// sonuç:object
</script>
Bir dizi oluflturdum ve dizinin veri türünü görmek için typeof operatö-
rünü kulland›m. Geriye dönen de¤er object fleklinde olacakt›r.
fiarta Ba¤l› Komut Çal›flt›rma

(Ternary Operatörü)
E¤er program ak›fl›nda bir flarta ba¤l› olarak iki komut sat›r›ndan birini
çal›flt›rmak istiyorsak üçlü operatörü kullanabiliriz.
Genel yap›s›:
( şart ) ? değişken1 = değer1 : değişken1 = değer2
OPERATÖRLER 23
Örnek
(şart)?a=5:a=10; flart do¤ruysa a de¤iflkeni 5 de¤erini, flart yanl›flsa
a de¤iflkeni 6 de¤erini al›r.
( şart ) ? değişken1 = değer1 : değişken2 = değer2
Örnek
(şart)?a=5:b=10; flart do¤ruysa a de¤iflkeni 5 de¤erini, flart yanl›flsa
b de¤iflkeni 10 de¤erini al›r.
Ya da üçlü operatörü bir de¤iflkene atay›p afla¤›daki gibi kullanabilirsiniz.
değişken = ( şart ) ? değer1 : değer2
Örnek
a=(1<2)?5:7; bu durumda flart do¤ruysa a=5, flart yanl›flsa a=7 de¤e-
rini al›r. fiart do¤ru oldu¤una göre a=5 olur.
fiart olarak true (do¤ru) ya da false (yanl›fl) döndüren bir de¤iflken kul-
lan›labilir.
Örnek

a=true;
c=(a)? “evet”:”hayır”;
document.write(c);
</script>
Yukar›daki kodlara bak›l›rsa flart boolean cinsinde bir de¤iflkendir. Say-

fa çal›flt›r›l›rsa “evet” yaz›ld›¤› görülür. Bu flart k›sm›n›n do¤ru oldu¤u
anlam›na gelir.
‹fllem Önceli¤i
‹fllem önceli¤i Javascript’in deyim ifade ve matematiksel ifllemlerde,
hangi operatörlere öncelik verdi¤i anlam›na gelir. ‹fllem önceli¤i flu s›ra
ile gerçekleflir:
1. Parantez ifllemleri
24 JAVASCRIPT
2. Fonksiyonlar
3. Aritmetiksel ifllemler
4. Karfl›laflt›rma ifllemleri
5. Mant›ksal ifllemler
6. fiart ifllemleri
NOT Javascript’te ifllem öncelik yönü soldan sa¤a do¤rudur. Yani ifllemler sol-
dan sa¤a do¤ru yap›l›r.
Javascr›pt ile Sayfaya

HTML ‹çeri¤i Yazmak
Sayfa içerisinde <head> taglar› aras›na yerlefltirdi¤imiz <script> tag-
lar› ile sayfaya bir metin yazd›rabiliyorduk Ama bu durumda <head>
taglar› içindeki javascript kodlar› sayfan›n gövdesinden daha önce yo-
rumland›¤›ndan document.write() ile yazd›rd›¤›m›z metinler, sayfa-
n›n en bafl›na yaz›l›yordu.
‹stersek javascript kodlar›n› <body> etiketleri içerisine yaz›p, sayfa ak›-

fl›nda javascript ile istedi¤imiz yere metin yazd›rabiliriz.
Javascript ile HTML üretmek demek asl›nda Javascript içerisinde HTML

etiketlerini kullanarak sayfaya içerik yazmak demektir. Javascript’te
HTML etiketleri bir string gibi t›rnak içerisine al›nmal›d›r.
Örnek

document.write(“<b> Merhaba </b>”);
</script>
Sayfaya merhaba yaz›s› kal›n yazd›r›lmak isteniyor. Bu durumda HTML

etiketi olan <b> kullanmam gerekecek ve en önemlisi HTML etiketlerini
t›rnak içerisine yazmam flartt›r. Bu örnek afla¤›daki gibi de yaz›labilir.
document.write(“<b>”+”Merhaba”+”</b>”);
</script>
OPERATÖRLER 25
Dikkat etmiflsinizdir. <b> etiketlerini ayr› birer t›rnak içerisine ald›m ve

+ operatörünü (string birlefltirme) kulland›m. Bu kodlar da ayn› ifllemi
görecektir.
Ekrana yazd›rd›¤›m›z yaz›ya bir renk ve font verelim;

document.write(“<font color=’red’
face=’verdana’>”+”Merhaba”+”</font>”);
</script>
Sayfaya Merhaba metni k›rm›z› ve verdana fontunda yazd›r›lacakt›r.

document.write() metoduyla ekrana yazd›raca¤›m metin için <font>
etiketini kullanarak biçim ve renk özelliklerini tan›mlad›m. Font etike-
tinin property (özelliklerine) de¤er atarken çift t›rnak yerine tek t›rnak
kullanmam›z gerekir.
<font> etiketi içinde özelliklere de¤er atarken tek t›rnak kullan›lm›flt›r.

Çünkü bir ifade içinde kapsay›c› t›rnaklar d›fl›nda kapsay›c› t›rnaklarla ay-
n› biçimde t›rnak kullan›lmaz. Yani kapsay›c› t›rnak çift t›rnak ise ifade-
nin içindeki t›rnaklar tek t›rnak olmal›d›r. Bunun terside do¤rudur örne-
¤in kapsay›c› t›rnak tek t›rnak ise ifade içindeki t›rnaklar çift olmal›d›r.
Örnekte javascript içerisinden bir tablo olufltural›m;

document.write(“<table border cellspacing=’0’”);
document.write(“<tr>”);
document.write(“<td>”+”merhaba”+”</td>”);
document.write(“<td>”+”javascript”+”</td>”);
document.write(“</tr>”);
document.write(“<tr>”);
document.write(“<td>”+”merhaba”+”</td>”);
document.write(“<td>”+”javascript”+”</td>”);
document.write(“</tr>”);
document.write(“</table>”);
</script>
Tablo oluflturmak için kullanmam›z gereken taglar çift t›rnak içerisinde

yaz›lm›flt›r. Taglar içindeki özelliklere de¤er atan›rken tek t›rnak kulla-
26 JAVASCRIPT
n›lm›flt›r. Burada birbiri ard›na document.write() metodu içerisinde

tag kullan›rsak, browser bu taglar› arka arkaya okuyaca¤› için problem
ç›karmadan kodlar›n gere¤ini yerine getirir.
Sonuçta ekrana tablo çizilmifl olur.
merhaba javascript
merhaba javascript
‹ki Metin Aras›nda Boflluk B›rakma

ve Sayfa Ak›fl›n› Bir Alt Sat›ra
‹ndirme, Tafl›ma
Örnek

document.write(“saeml”+”okulu”);
</script>
Sonuçta ekranda iki string ifadenin birleflik yazd›r›ld›¤› görülüyor. Bu

stringleri ayr› yazd›rmak istersek bu durumda araya bir boflluk koyma-
m›z gerekir.
Bu bofllu¤u koyarken fluna dikkat edin. E¤er çift t›rna¤› (“”) aç›p kapa-
t›rsan›z, iki t›rnak aras›na boflluk koymadan kullan›rsan›z bu 0 uzunluk-
ta bir karakter katar› olur ve boflluk içermez.
Ama e¤er iki çift t›rnak (“”) aras›na bir boflluk eklerseniz çift t›rnaklar
içinde bofl bir karakter saklar.
Örnek

document.write(“saeml”+” “+”okulu”);
</script>
Sayfa ak›fl›n› bir alt sat›ra indirmek demek; document.write() meto-

duyla sayfaya metin yazd›r›ld›ktan sonra di¤er yazd›rma metodunun
metni yazd›rmak için bir alt sat›r› kullanmas› demektir. Bir baflka tan›m-
OPERATÖRLER 27
la sayfan›n ak›fl›na bir alt sat›rdan devam etmesini sa¤lamakt›r. Bir met-
ni alt sat›ra yazmak için <br> etiketinin kullan›ld›¤›n› an›msay›n.
Örnek

document.write(“saeml”+” “+”okulu”+”<br>”);
document.write(“ajax,javascript “);
</script>
Sonuç
saeml okulu
ajax,javascript
<body> Etiketleri ‹çerisine

Javascr›pt Kodu Yazma
Örnek
<body>
javascript Dersleri <br />
Flex 3 MXML dersleri <br />
document.write(“Javascript tarafından sayfaya
yazdırıldım”+”<br>”);
</script>
spry dersleri
</body>
Sonuçta sayfa afla¤›daki flekilde olacakt›r.

javascript Dersleri
Flex 3 MXML dersleri
Javascript taraf›ndan sayfaya yazd›r›ld›m
spry dersleri
Dikkat edilirse <body> taglar›n›n›n içerisine javascript kodlar›m›z› yaz-

d›k. Bu durumda javascript kodlar› sayfa ak›fl›nda bulundu¤u yere
document.write() metoduyla metni yazacakt›r.
28 JAVASCRIPT
<Head> Etiketleri Aras›na ve

<Body> Etiketleri ‹çinde Farkl›
Bölgelere Javascr›pt Kodu Yazma
Sayfa üzerinde <head> etiketleri aras› dahil, sayfa gövdesinde birden
fazla yere javascript kodlar› yaz›labilir. Yani <script> blo¤u içindeki
kodlar› istedi¤imiz kadar bölmemiz mümkündür. Ama de¤iflken ve di-
¤er tan›mlamalar <head> etiketleri aras›ndaki <script> blo¤unda olur-
sa problem yaflamayacaks›n›z.
Örnek
<head> etiketleri aras›nda de¤iflken tan›mlamalar›n› yapal›m.
<head>
var a=5;
var b=10;
var adi=”harun”;
</script>
</head>
<body> etiketleri aras›nda <head> etiketleri aras›nda tan›mlad›¤›m›z de-

¤iflkenleri sayfaya yazd›ral›m;
<body>
document.write(a+b+”<br>”);
document.write(adi);
</script>
</body>
Dikkat ederseniz de¤iflkenler <head> blo¤undaki <script> etiketinde

tan›mlanmas›na ra¤men <body> içindeki ikinci <script> blo¤undan
de¤iflkenleri ça¤›rabiliyorum.
E¤er bir de¤iflken <head> tag› içerisindeki <script> taglar›n›n içinde

tan›mlanm›flsa, o de¤iflkeni sayfa içindeki tüm <script> taglar› içinde
kullanabilirsiniz.
OPERATÖRLER 29
Karakter Katarlar›n›n
Biçimlerini De¤ifltirme
(Str›ng Metodlar›)
Bilgileri formatlarken javascript içerisinde HTML etiketleri kullan›yor-
duk. Bu ifllemi javascript metodlar›yla da gerçeklefltirebiliriz. Bu du-
rumda formatlanacak bilgiler kesinlikle de¤iflkenlerde saklanmal›d›r.
Çünkü bu yöntemler de¤iflkenlere uygulanabilir.
Örnek

var soyadi=”emir”;
document.write(adi.italics()+” “+soyadi.fontcolor(“blue”));
</script>
Sonuçta adi de¤iflkeni içerisindeki metin italic ve soyadi de¤iflkeni

içerisindeki metin mavi olarak ekrana yazd›r›ld›.
sub()
document.write(adi+soyadi.sub());
</script>
soyadi de¤iflkeni içerisindeki metni alt eleman yapar.
sup()
var soyadi=soyadi”emir”;
document.write(adi+soyadi.sup());
</script>
soyadi de¤iflkeni içerisindeki metni üst eleman yapar.

30 JAVASCRIPT
bold()
document.write(adi.bold());
</script>
adi de¤iflkeni içerisindeki metni kal›n yapar.
›tal›cs()
document.write(adi.italics());
</script>
adi de¤iflkeni içerisindeki metni italik yapar.
toLowerCase()
document.write(adi.toLowerCase());
</script>
adi de¤iflkeni içerisindeki metni küçük harfe çevirir.
toUpperCase()
document.write(adi.toUpperCase());
</script>
adi de¤iflkeni içerisindeki metni büyük harfe çevirir.
fontcolor()
document.write(adi.fontcolor(“blue”));
</script>
OPERATÖRLER 31
adi de¤iflkeni içerisindeki metnin rengini mavi yapar.
fonts›ze()
document.write(adi.fontsize(“20px”));
</script>
adi de¤iflkeni içerisindeki metnin büyüklü¤ünü ayarlar.
str›ke()
document.write(adi.strike());
</script>
adi de¤iflkeni içerisindeki metnin üzeri çizilir.
charAt()
document.write(adi.charAt(0));
//sonuç:h
</script>
adi de¤iflkeni içerisindeki 0 indeks numaral› eleman› geri döndürür.
charCodeAt()
document.write(adi.charCodeAt(0));
//Sonuç:104
</script>
adi de¤iflkeni içerisindeki 0 indeks numaras›na sahip eleman›n unicode

de¤erini döndürür.
32 JAVASCRIPT
concat()
document.write(adi.concat(soyadi));
//sonuç:harunemir
</script>
adi de¤iflkeni içerisine, soyadi de¤iflkenin içerisindeki veriyi ekler.
replace()
document.write(adi.replace(“har”,”car”));
// sonuç:carun
</script>
adi de¤iflkeni içerisinde “har” karakter katar›n› arar. Bulursa “car”

karakter katar› ile de¤ifltirir. E¤er aranan karakter katar› bulunmazsa
metin oldu¤u gibi b›rak›l›r.
match()
document.write(adi.match(“un”));
// sonuç:un
</script>
adi de¤iflkeni içerisindeki metni, match() ile belirtilen karakter katar›

ile karfl›laflt›r›r.‹ki karakter katar›n›n eflleflen k›sm›n› geriye döndürür.
Eflleflen karakter grubu yoksa “null” de¤erini döndürür.
sl›ce()
document.write(adi.slice(0,3));
// sonuç:har
</script>
OPERATÖRLER 33
adi de¤iflkeni içeresinde 0 indeks numaral› karakterden bafllayarak 3

karakter keser, yani geri döndürür.
›ndexof()
document.write(adi.indexOf(“u”,3));
// sonuç:3
</script>
adi de¤iflkeni içerisinde 0 indeks numaral› elemandan bafllayarak “u”

karakterini arar. E¤er bulursa geriye indeks numaras›n›, bulamazsa -1
de¤erini döndürür. indexof() metodu ile lastindexOf() metodlar›-
n›n yapt›klar› ifl ayn› olmakla beraber arama yönleri farkl›d›r.
substr›ng()
var a=”abcdef”;
document.write(adi.substring(1,3));
// sonuç:bc
</script>
substr›ng (baslangic,b›t›s)
substring() metodu karakter katar›ndan belirtilen index numaralar›n›
kullanarak karakter ya da karakter grubu almaya, koparmaya yarar. Ve-
rilen baslangic index numaras›na sahip karakter dahil, bitis index nu-
maras›na kadar olan karakterleri metinden kopar›r yani al›r. (Bitis index
numaras›na sahip eleman› almayacakt›r.)
substr›ng (baslang›c)
E¤er bu metod ile bir tane parametre kullan›rsan›z a de¤iflkeninin içeri-
sine girdi¤iniz bafllang›ç index numaras›ndan bafllayarak a de¤iflkeninin
en büyük index numaras›na sahip karakterine kadar tüm karakterleri al-
m›fl olursunuz.
substr ()
var a=”abcdef”;
34 JAVASCRIPT
document.write(adi.substr(1,3));
// sonuç:bcd
</script>
substr() metodu karakter katar›ndan birinci parametre olarak verilen

bafllang›ç index numaras›ndan bafllayarak ikinci parametre olan karak-
ter say›s› kadar metin parças› kopar›r.
Yukar›da string metodu örneklerle anlat›ld›. Unutmaman›z gereken

bu metotlar›n kal›c› olarak ifllem yapmamas›d›r.
D‹Z‹LER (ARRAY)
4
Dizi De¤iflkenine Ayn› Anda Diziden
Eleman (De¤er) Girme 36 Eleman Silmek ve Eklemek 43
Dizi Tan›mlarken Dizi De¤iflkenleri ‹çerisindeki
Boyutunu Belirleme 37 Elemanlar› S›ralamak ‹çin
Dizi De¤iflkenleri ‹çindeki Kullan›lan Metodlar 48
Elemanlara Ulaflma ve Dizi De¤iflkenleri ‹çerisinde
Elemanlar› De¤ifltirme 38 Eleman Aramak ‹çin
Dizi De¤iflkenlerine Kullan›lan Metodlar 51
Eleman Eklemek, Silmek 40 Dizi De¤iflkenlerin ‹çindeki
Dizi Eleman›n› Silmek Nesnelerin Metinsel Veriye
(Dizi ‹çinden Koparmak) 42 Dönüflümü ile ‹lgili Metodlar 52
Diziye Eleman Eklemek 43 Çok Boyutlu Diziler 53
Bir de¤iflken ad› alt›nda birden fazla veri saklamak için diziler kullan›l›r.
Programlama yaparken birbirleriyle ba¤lant›l› olan birden fazla veriyi
tekbir de¤iflken ad› alt›nda toplay›p o de¤iflkeni kullanmak iflimizi çok
kolaylaflt›r›r.
Özetle dizi içerisinde birden fazla veri saklayan de¤iflkenlerdir. Dizi de-
¤iflkenlerinin içerisindeki her bir ayr› veriye element ya da eleman denir.
Bu elemanlara uluflmak için indeks numaras› (s›ra numaras›) kullan›l›r.
NOT Javascript’te indeks numaralar› 0’dan bafllar.
Yeni bir dizi oluflturmak için new operatörü kullan›l›r.

var gunler=new Array();
Yukar›da gunler isimli bir dizi oluflturmufl oldum. Oluflturmufl oldu¤um
dizi, 0 boyutlu bir dizi yani içerisinde hiç eleman bulunmamaktad›r. Bo-
yut, dizinin içerdi¤i yani sahip oldu¤u eleman say›s›d›r. Dizi tan›mlamak
için baflka bir yöntem de new operatörü kullanmadan direk dizi de¤iflke-
ni içerisine de¤erleri atamakt›r.
var gunler=[];
36 JAVASCRIPT
Dizi De¤iflkenine Eleman

(De¤er) Girme
1. Dizi de¤iflkenine elaman girmek için dizi de¤iflkeni oluflturdu¤unuz sa-
t›rda dizi de¤iflkenine de¤erler girebilirsiniz. Genelde dizi de¤iflkenleri-
nin sabit oldu¤u durumlarda kullan›l›r.
var bilgi=new Array(“bilgisayar”,3,4,true);//1.yöntem
var bilgi=[“bilgisayar”,3,4,true];//2.yöntem
bilgi dizisini ister 1. yöntemle isterseniz 2. yöntemle oluflturabilirsiniz.

Dikkat ederseniz dizi de¤iflkeni ile ayn› sat›rda yani dizi de¤iflkeni olufl-
turuldu¤unda de¤erler atan›yor.
2. Dizi de¤iflkenlerine indeks numaralar›n› kullanarak de¤er atayabiliriz.
Javascript’te indeks numaralar› 0’dan bafllar.
Örnek
var bilgi=new Array();
// 0 boyutlu bir dizi oluşturduk.
bilgi[0]=”bilgisayar”;
bilgi[1]=3;
bilgi[2]=4;
bilgi[3]=true;
Bir dizi de¤iflkeni içerisinde farkl› veri türlerine sahip elemanlar olabilir.
var bilgi=new Array(“bilgisayar”,3,4,true);
Dizi de¤iflkeninin veri türü belirtilmemifl, bu dizi de¤iflkeni içerisinde

farkl› veri türlerine sahip veriler saklayabiliriz. Javascript bu konuda
çok gevflek davranacakt›r. Javascript dizi de¤iflkenleri içerisinde, bir de-
¤iflken ya da operatör kullanabilirsiniz.
var sayi=5;
var bilgi=new Array(“bilgisayar”,3+4,sayi,true);
Dizi de¤iflkeni içerisinde + operatörü ve sayi isimli de¤iflkenler kulla-

n›lm›flt›r.
D‹Z‹LER (ARRAY) 37
var sayi=5;
var bilgi=new Array(“dhtml”+”javascript”,3+4,sayi,true);
Dikkat ederseniz + operatörü hem string birlefltirme hem de matematik-

sel ifllem için kullan›lm›flt›r.
Dizi Tan›mlarken
Boyutunu Belirleme
Dizinin boyutu içerisinde saklad›¤› eleman say›s› demektir. ‹sterseniz
dizi tan›mlarken boyutunu belirleyebilirsiniz.
Örne¤in;
var hesap = new Array (3) yaz›lm›flsa bu yaz›mdaki 3 say›s› dizideki

eleman say›s›n› gösterir. Yani bu durumda dizide toplam 3 eleman var-
d›r. ‹lk eleman›n indeks numaras› 0’d›r.
Dizinin boyutunu belirledikten sonra e¤er isterseniz eleman girerek bo-

yutu de¤ifltirebilirsiniz.
Örnek

var deger=new Array(3);
/*
dizinin boyutu 3 olarak belirlendi
dizi 3 elemana sahip olacaktır.
*/
deger[0]=”a”;
deger[1]=5;
deger[2]=true;
document.write(deger.length+”<br>”);// sonuç:3
deger[3]=false;
document.write(deger.length);// sonuç:4
</script>
Dizi boyutunu 3 olarak belirlememize ra¤men diziye bir eleman daha

ekledik. Bu duruma javascript izin verecektir. Sonuçta dizinin boyutu 4
olmufl olur.
38 JAVASCRIPT
Dizi De¤iflkenleri ‹çindeki

Elemanlara Ulaflma ve
Elemanlar› De¤ifltirme
Dizi içerisindeki elemanlara ulaflmak için [] operatörü kullan›l›r. Dizi
içerisindeki elemanlara bu operatörün içerisine indeks numaras› yaz›la-
rak eriflilir.
Örnek

var veri=new Array(“javascript”,true,false,4,3.4);
document.write(veri[3]);
// sonuç:4
</script>
Yukar›daki veri dizisinde toplam 5 eleman bulunmakta ve biz 3 indeks

numaras›na sahip eleman› ça¤›r›yoruz. Dizi de¤iflkenlerinde ilk elema-
n›n indeks numaras› 0 ve son elaman›n indeks numaras› toplam eleman
say›s›ndan 1 eksiktir.
Dizi içerisinde bir eleman›n de¤erini de¤ifltirmek istiyorsak;

veri[0]=10;
// sonuç:10
</script>
Bu durumda dizinin 0 indeks numaral› eleman›n›n içeri¤ini de¤ifltirdik.

Yeni de¤eri sayfaya yazd›rd›k. De¤ifltirdi¤imiz verilerin veri türleri
önemli de¤ildir. Yani string bir veriyi number bir veriyle de¤ifltirebiliriz.
Bir dizi eleman›n› bir de¤iflkene atayabiliriz.

var sayi=veri[3];
document.write(sayi);
// sonuç:4
</script>
sayi isimli de¤iflkene veri dizisinin 3 indeks numaral› eleman› olan 4

say›s› atan›yor.
Javascript’te diziler birer nesne olarak oluflturulur. Dolay›s› ile dizilerin

özellik ve metodlar› vard›r. Dizi de¤iflkenlerinin boyutunu ö¤renmek için
yani kaç eleman bar›nd›rd›¤›n› ö¤renmek için length özelli¤i kullan›l›r.
Örnek
document.write(veri.length);
// sonuç:5
</script>
Örnek olarak bir dizi de¤iflkeni oluflturup içerisindeki de¤erleri sayfaya

yazd›ral›m;

var veri=new Array(“javascript”,2,3,true,2+3,””);
document.write(“Dizinin eleman sayısı =”+ ve-
ri.length+”<br>”);
document.write(“<u>Dizideki elemanlar”+”</u><br>”);
for(var i=0;i<veri.length;i++)
{
document.write(veri[i]+”<br>”);
}
</script>
veri.length özelli¤inin ald›¤› de¤er 6 olacakt›r. Dizideki en son ele-

man s›f›r uzunlukta bir karekter katar›d›r (“”). Ama sonuçta dizi için bir
elemand›r.
Birinci sat›rda dizi de¤iflkeni oluflturulmufl ve içerisine elemanlar yaz›l-

m›flt›r. For döngüsü belirli bir flarta ba¤l› olarak içerisindeki komutlar›
tekrar etmek için kullan›l›r. i’nin bafllang›ç de¤eri 0’d›r. Her döngüde
de¤eri 1 artt›r›lacakt›r. Bu döngü i’nin de¤eri toplam eleman say›s›ndan
40 JAVASCRIPT
1 eksik oluncaya kadar devam eder ve her döngüde dizi içerisinden bir
eleman ekrana yazd›r›l›r. Bu döngü sayesinde dizi elemanlar›n› sayfa-
m›za yazd›rabiliriz.
Sayfada;
Dizinin eleman sayısı =6

Dizideki elemanlar
javascript
2
3
true
5
fleklinde bir ç›kt› görece¤iz.
Dizi içerisindeki elemanlar›n listesine dizinin sadece ad›n› kullanarak

ulaflabilirsiniz.
Örnek

var veri=new Array(“javascript”,2,3,true,2+3,””);
document.write(veri);
</script>
Dizi De¤iflkenlerine
Eleman Eklemek, Silmek
Dizi de¤iflkenlerine eleman eklemek için farkl› yöntemler kullan›labilir.
‹ndeks Numaras› ile

Diziye Eleman Eklemek
var veri=new Array(1,2,3,4,5);
document.write(“Dizinin Boyutu = “+veri.length+”<br>”);
veri[5]=”efe”;
document.write(“Dizinin Boyutu = “+veri.length);
</script>
push()
push() metodu dizi de¤iflkeninin en sonuna de¤er eklemek için kullan›l›r.
diziadi.push(“değer1”,”değer2”);
Örnek

veri.push(“zeynep”);
veri.push(“emir”);
//sonuç:1,2,3,4,5,zeynep,emir
</script>
NOT push() metodu ile tek seferde birden fazla veri eklenebilir.
Örnek

veri.push(“zeynep”,”emir”);
//sonuç:1,2,3,4,5,zeynep,emir
</script>
unsh›ft( )
Bu metod dizi de¤iflkeni içerisine eleman eklemek için kullan›l›r.
push() metodundan farkl› olarak elemanlar› dizinin en sonuna de¤il en
bafl›na ekler.
diziadi.unshift (“değer1”,”değer2”);
Örnek
veri.unshift(“zeynep”);
veri.unshift(“emir”);
42 JAVASCRIPT
//sonuç:emir
</script>
Burada ilk önce “zeynep” metni diziye 0 indeks numaras›na sahip ola-
rak atand›. Daha sonraki sat›rda “emir” eleman› diziye 0 indeks numa-
ras›na sahip eleman olarak atand›. Sonuçta “emir” eleman› 0 ve “zey-
nep” eleman› 1 index numaras›na sahip oldu.
E¤er bu iki ayr› de¤eri tek sat›rda diziye eklemek isteseydik;

veri.unshift(“zeynep”,”emir”);
//sonuç:zeynep
</script>
Yukar›da “zeynep”,”emir” de¤erleri bir blok olarak diziye eklenecekti.

spl›ce( )
Dizi de¤iflkeni içerisine eleman eklemek ve ç›kartmak için kullan›lan
metodtur.
Dizi Eleman›n› Silmek

(Dizi ‹çinden Koparmak)
diziadi.splice (parametre1,parametre2);
parametre1: Dizi de¤iflkeni içerisinde silme ifllemine bafllanacak ele-

man›n indeks numaras›d›r.
parametre2: Silinecek eleman say›s›d›r.
Örnek
var myarray=new Array(1,”ali”,3,4,5);
myarray.splice(1,1);
document.write(myarray);
// sonuç:1,3,4,5
</script>
Dizimizde 1 indeks numaras›na sahip olan eleman “ali” eleman›d›r. Bu

elemandan bafllamak üzere sadece 1 eleman silinecektir. Dolay›s›yla
“ali” eleman› dizi içerisinden silinmifl olacakt›r.
Diziye Eleman Eklemek

diziadi.splice (parametre1,0,”değer1”,”değer2”);
Parametre1: De¤er atamaya hangi indeks numaras›ndan bafllanacak.
0: Diziden eleman silmek için buraya 0 d›fl›nda bir say› eklemeniz ge-
rekecektir. Fakat 0 eklerseniz hiçbir eleman silinmeyecektir.
De¤er1,de¤er2... Belirlenen indeks numaras›ndan bafllanarak eklenecek

veriler.
Örnek

myarray.splice(2,0,”emre”,”kadir”);
// sonuç:1,ali,emre,kadir,3,4,5
</script>
“emre”,”kadir” de¤erleri 2 indeks numaras›ndan bafllanarak diziye ek-

lenecektir. Yani diziye ekleyece¤imiz ilk eleman›n indeks numaras› 2
olacakt›r.
Ayn› Anda Diziden

Eleman Silmek ve Eklemek
Parametre1Parametre2
Diziden hem eleman silmek hemde diziye eleman eklemek için;

diziadi.splice (parametre1,parametre2,”değer1”,”değer2”);
Parametre1: Dizi de¤iflkeni içerisinde silme ifllemine bafllanacak ele-
man›n indeks numaras›d›r.
Parametre2: Dizi de¤iflkeni içerisinde bafllang›çtan itibaren kaç tane
eleman silinece¤idir.
44 JAVASCRIPT
değer1, değer2... Silme iflleminden sonra Parametre1 ile belirlenen

indeks numaras›na göre eklenecek verilerdir.
Örnek

myarray.splice(2,1,”c#”,”asp.net”);
// sonuç:1,ali,c#,asp.net,4,5
</script>
Silme ifllemine 2 indeks numaras›ndan bafllanacak ve 1 eleman siline-

cektir. Silinen eleman 3 de¤eridir. Ekleme ifllemine 2 indeks numaras›n-
dan bafllanacak ve “c#”,”asp.net” verileri diziye eklenecektir.
Bu metodu kullan›larak dizide silme ifllemi yapt›¤›n›zda splice() me-

todu sildi¤i yani diziden ald›¤› elemanlar› geriye döndürür.
Örnek

var myarray=new Array(2,1,”c#”,”asp.net”);
var my_dizi=myarray.splice(1,3);
for(var i=0;i< my_dizi.length;i++)
{
document.write(my_dizi[i]);
document.write(“<br>”);
}
/*
sonuç:
1
c#
asp.net
*/
</script>
splice() metodu ile myarray isimli dizi de¤iflkeninde 1.indeks numa-

ral› elemandan bafllanarak üç tane eleman al›nacakt›r. Bunlar 1, “c#”,
“asp.net” de¤erleri olacakt›r. Bu de¤erler splice() metodunun geriye
döndürdü¤ü de¤erlerdir. my_dizi isimli de¤iflken içerisinde birden fazla

s›ral› veriyi saklad›¤›ndan dizi de¤iflkeni olmufl olur.
concat( )
Birden fazla dizi de¤iflkenini tek bir dizi içerisinde toplamaya yarayan
metoddur. (Toplama: dizilerin elemanlar›n› birlefltirmek)
‹sterseniz birden fazla dizi içerisindeki elemanlar› birlefltirip, yeni olufl-
turdu¤unuz diziye atayabilirsiniz.
Örnek
var myarray=new Array(2,1,”c#”,”asp.net”);
// myarray isimli bir dizi değişkeni tanımladım
var my_dizi=[“flex”,”flash”,true,3+4];
// my_dizi isimli bir dizi değişkeni tanımladım
var yeni_dizi=myarray.concat(my_dizi);
for(var i=0;i< yeni_dizi.length;i++)
{
document.write(yeni_dizi[i]);
}
/*
sonuç:
2
1
c#
asp.net
flex
flash
true
7
*/
</script>
Yukar›daki örne¤imizde myarray isimli dizi de¤iflkeni içerisine my_di-

zi isimli dizi de¤iflkeni içerisindeki veriler ekleniyor ve oluflan bu yap›
yeni_dizi isimli de¤iflkene atan›yor.Bu durumda yeni_dizi de¤iflke-
ni, dizi de¤iflkeni olmufl olur.
46 JAVASCRIPT
pop( )
Dizi içerisindeki en son eleman› (en büyük indeks numaras›na sahip ele-
man) silmeye yarar.
Örnek

var bilgi=new Array(2,1,”c#”,”asp.net”);
// bilgi isimli bir dizi değişkeni tanımladım
bilgi.pop();
// dizinin son indeks numaralı elemanı silindi.
for(var i=0;i< bilgi.length;i++)
{
document.write(bilgi[i]+ “ “);
}
/*
sonuç:
2 1 c#
*/
</script>
sh›ft( )
Dizi içerisindeki ilk eleman› yani 0 indeks numaral› eleman› silmeye
yarar.
Örnek

bilgi.shift()
// dizinin 0 indeks numaralı elemanı silindi.
{
}
/*
sonuç:
1 c# asp.net
*/
</script>b
delete Operatörü
delete operatörü bir dizi de¤iflkeni içerisinde belirtilen indeks numara-
s›na sahip eleman›n indeks numaras›n› saklayarak sadece o indeks nu-
maras›n›n temsil etti¤i veriyi siler. Kalan indeks numaras› tan›mlanma-
m›fl bir veriyi temsil edecektir. Dizinin boyutu de¤iflmez.
Örnek

delete bilgi[1];
/*
delete operatörü ile dizi içerisindeki 1 indeks numaralı
elemanın verisi silindi.Ama dizi içerisinde 1 indeks numarası
boş bir veriyi temsilen hala var.
*/
{
}
document.write(“bilgi dizisinin eleman sayısı = “+bilgi.length)
/*
sonuç:
2 undefined c# asp.net
bilgi dizisinin eleman sayısı=4
*/
</script>
bilgi dizisinin eleman say›s› yine 4 olacakt›r. Çünkü delete operatö-

rü ile silinen verinin indeks numaras› saklanmaktad›r.
48 JAVASCRIPT
Dizi De¤iflkenleri ‹çerisindeki

Elemanlar› S›ralamak ‹çin
Kullan›lan Metodlar
sort( )
Dizi içerisindeki elemanlar› s›ralamak için kullan›l›r.
Örnek

var myarray=new Array(“css”,”ders”,”okul”,”zeynep”,”aspx”);
myarray.sort()
/*
myarray dizisi string veriler içermektedir.sort() metodu
parametresiz
kullanılırsa ascending(küçükten büyüğe) şeklinde bir sıralama
yapar
*/
for(var i=0;i< myarray.length;i++)
{
if(i==myarray.length-1)
{
// if yapısı en son elemandan sonra “-” karakterinin
// konulmasını engeller
document.write(myarray[i]);
}else
{document.write(myarray[i]+ “-”);}
}
/*
sonuç:
aspx-css-ders-okul-zeynep
*/
</script>
Dizi içerisindeki verilerin hepsinin küçük harfle bafllad›¤›na dikkat

edin.
S›ralama yap›l›rken;
Say›lar›n ascii kod karfl›l›¤› büyük ve küçük harflerden daha düflüktür.

Büyük harflerin ascii kodlar› küçük harflerden say›sal olarak küçüktür
ve s›ralamada bu önemlidir. Yani küçükten büyü¤e (ascending) s›rala-
ma yap›l›rken ilk önce say›sal de¤erler kendi aralar›nda daha sonra bü-
yük harfle bafllayan karakterler kendi aralar›nda ve sonra küçük harfle
bafllayan karakterler kendi aralar›nda s›ralan›rlar.
S›ralama yap›l›rken bir karfl›laflt›rma yap›lmaktad›r. Bu karfl›laflt›rmada

tüm veri türleri string olarak de¤erlendirilir. Say›lar kendi aralar›nda s›-
ralan›rken string veri türüne çevrildiklerinden karfl›laflt›rma ona göre
yap›l›r. Yani ilk önce ilk basamaklara, e¤er ilk basamaklar eflitse ikinci
basamaklara... fleklinde devam eder.
Örne¤in ascending (küçükten büyü¤e) s›ralamada;

var myarray=new Array(8,10,50,160,83,19);
myarray.sort()

{
document.write(myarray[i]+” “);
}
// sonuç :10 160 19 50 8 83
</script>
Say›sal de¤erler string türüne çevrildi¤inden, ilk önce ilk karakterlere

bak›l›r. En küçük olanlar 1 ile bafllayanlar 10, 160, 19. Bu üç de¤erin ilk
karakterleri eflit, ama ikinci karakterlere bak›ld›¤›nda 10, 160, 19. Bu
durumda en küçük s›ralamas› 10, 160, 19 olacakt›r.
Örnek
var myarray=new Array(8,10,50,160,”Az”,”AZ”,”css”,”ajax”,”MEM”);
myarray.sort();
{
50 JAVASCRIPT
document.write(myarray[i]+”,”);
}
// sonuç :10,160,50,8,AZ,Az,MEM,ajax,css,
</script>
sort() metodu ile ascending (küçükten büyü¤e) s›ralama yap›l›yor.
Say›lar kendi aralar›nda s›ralanm›fl, burada fluna dikkat etmeniz gereke-

cektir.
AZ, Az hangisi daha küçük derseniz; ilk harfler büyük ve eflit, ikinci
harflere geçildi¤inde büyük “Z” harfi “z” harfinden daha küçük oldu-
¤undan “AZ” karakter katar› “Az” de¤erinden daha küçüktür.
Numeric bir s›ralama yap›lmak isteniliyorsa, yani say›lar string olarak

de¤erlendirilmesin, say›sal de¤erlerine göre s›ralama yap›ls›n istenilirse
ekstra fonksiyon yazmam›z gerekecek.
Küçükten büyü¤e
myarray.sort(function(a,b){return(a-b)})
{
}
// sonuç:8 10 19 50 83 160
</script>
Büyükten küçü¤e
myarray.sort(function(a,b){return(b-a)})
{
}
// sonuç:160 83 50 19 10 8
</script>
reverse ( )
Bu metod dizi içerisindeki s›ralamay› ters çevirir. Yani ilk bafltaki ele-
man en sona, en sondaki eleman ilk bafla gelir. Bu metod azalan s›ra-
lama (descending) için kullan›labilir.

var myarray=new Array(“css”,”javascript”,1,3,58);
myarray.reverse();
for(var i=0;i<myarray.length;i++)
{
}
sonuç:58 3 1 javascript css
</script>
Dizi De¤iflkenleri ‹çerisinde

Eleman Aramak ‹çin
Kullan›lan Metodlar
›ndexOf ( ), last›ndexOf
Bir dizi de¤iflkeni içerisinde bir verinin olup olmad›¤›n›, varsa hangi in-
dex numaras›na sahip oldu¤unu anlamak için kullan›l›r.
Örnek
var a=[“css”,”dhtml”,1,5,3];
document.write(a.indexOf(1));
// a isimli dizide 1 elamanı vardır ve index numarası 2’dir.
// sonuçta ekrana 2 değeri yazılır
</script>
a dizisi içerisinde 1 say›sal de¤eri indexOf() metoduyla aranm›fl ve so-

nuçta bu verinin var oldu¤u ve 2 index numaras›na sahip oldu¤u anla-
fl›lm›flt›r.
E¤er aranan de¤er dizide yoksa indexOf() metodu geriye -1 de¤erini
döndürür.
52 JAVASCRIPT
Örnek

document.write(a.indexOf(10)+”<br>”);
// a isimli dizide 10 değeri olmadığından sonuç:-1
document.write(a.indexOf(“CSS”));
// indexOf() metodu büyük küçük harf ayrımı yapar.
/*
dizi içerisindeki eleman(“css”) ile
“CSS” değeri eşleşmediğinden
sonuç:-1
*/
</script>
lastindexOf() fonksiyonu ile indexOf() fonksiyonlar› asl›nda ayn›

ifllevi yerine getirir. Fakat indexOf() arama ifllemine 0 indeks numara-
l› elemandan bafllarken lastindexOf() ise son elemandan bafllar, man-
t›klar› ayn›d›r.
Dizi De¤iflkenlerin ‹çindeki

Nesnelerin Metinsel Veriye
Dönüflümü ile ‹lgili Metodlar
toStr›ng(), jo›n()
toString() metodu dizi içerisindeki elemanlar› string veri türüne çevi-
rip elemanlar aras›na virgül koyacakt›r. Asl›nda zaten default olarak di-
zi de¤iflkenlerin içindeki nesneleri s›ralarken araya virgül konur. E¤er
siz ay›raç olarak baflkaca bir operatör ya da metin kullanmak isterseniz
join() metodunu kullanman›z gerekecektir. join() metodu hem dizi
içerisindeki elemanlar› stringe çevirir hem de elemanlar›n aras›na iste-
nilen parametre ya da operatörü yerlefltirir.
Örnek
document.write(a.join(“*”));
// sonuç:css*dhtml*1*5*3
</script>
Çok Boyutlu Diziler

Javascript’te çok boyutlu dizi oluflturabilirsiniz. Asl›nda çok boyutlu di-
ziden kas›t bir dizi eleman› olarak baflka bir dizi de¤iflkeninin ad›n›n
atanmas›d›r. Yani bir dizinin baflka bir dizi içerisinde eleman olarak bu-
lunmas›d›r.
var a=new Array(“css”,”ders”,78,1,new Array(true,false));
Yukar›daki dizinin boyutu 5 olacakt›r. Dizinin en büyük indeks numa-

ras›na sahip eleman› 4’tür.
a[0]=”css”
a[1]=”ders”
a[2]=78
a[3]=1
a[4]=new Array(true,false)
4 indeks numaras› bir dizi de¤iflkenini temsil etmektedir.
a dizisi içerisindeki 4 indeks numaras›na sahip dizi eleman› içindeki

elemanlara ulaflmak için;
a[4][0] 4 indeks numaras›na sahip dizinin 0 indeks numaral› eleman›
a[4][1] 4 indeks numaras›na sahip dizinin 1 indeks numaral› eleman›
Örnek

var a=new Array(“css”,”ders”,78,1,new Array(true,false));
document.write(a[4][0]+” “+a[4][1]);
// sonuç:true false
</script>
Örnek

var a=new Array(1,[true,false],new Array(“formlar”,”çerçeve”));
54 JAVASCRIPT
document.write(“a dizisinin ilk elemanı : “+a[0]+”<br>”);

document.write(“a dizisi içindeki 1 indeks numaralı dizinin
ilk elemanı :”+a[1][0]+”<br>”);
document.write(“a dizisi içindeki 2 indeks numaralı dizinin
ilk elemanı :”+a[2][0]+”<br>”);
document.write(a[4][0]+” “+a[4][1]);
</script>
Sayfada afla¤›daki flekilde bir sonuç al›r›z:

a dizisinin ilk elemanı : 1
a dizisi içindeki 1 indeks numaralı dizinin ilk elemanı :true
a dizisi içindeki 2 indeks numaralı dizinin ilk elemanı :formlar
KOfiUL ‹FADELER‹
5
VE DÖNGÜLER
Koflul ‹fadeleri 55 Döngü ‹fadeleri 61
if ‹fadesi 55 for Döngüsü 61
if else Yap›s› 56 while Döngüsü 64
else if Yap›s› 57 do..while Döngüsü 66
switch ‹fadesi (Durum-Koflul) 59 Döngülerde Kullan›lan Deyimler 67
break Deyimi 67
continue Deyimi 68
Bir komut grubunu program kodlar› ak›fl›nda herhangi bir flarta ba¤l›
olarak çal›flt›rmak istiyorsak, karar (s›nama) yap›lar›n› kullanmam›z ge-
rekir. Belirledi¤iniz flartlara ya da durumlara göre kodlar› çal›flt›rmak ya
da çal›flt›rmamak isteyebilirsiniz. Bu durumda karar, yani s›nama yap›-
lar›n› kullanabilirsiniz.
Karar yap›lar› boolean tipi verilerle çal›fl›r. Yani koydu¤unuz flart ya da

flart gruplar› do¤ru ise bu durumda geriye true döner ve karar yap›s›
içindeki kodlar çal›fl›r. E¤er flart ya da flart gruplar› yanl›fl ise geriye fal-
se döner bu durumda karar yap›s› içindeki kodlar çal›flmaz.
Koflul ‹fadeleri
›f ‹fadesi
if yap›s›nda e¤er flart ya da flart grubu do¤ru ise yani sonuçta true de-
¤eri döndürüyorsa süslü parantez içindeki kodlar çal›flt›r›l›r, tersi du-
rumda çal›flt›r›lmaz.
56 JAVASCRIPT
if(koşul ya da koşul gurubu)

{
// Koşul ya da koşul gurubu doğru olduğunda
// çalışacak kod gurubu
}
• if kesinlikle küçük yaz›lmal› ve koflul ya da koflul gruplar› parantez içi-

ne al›nmal›d›r.
• Koflul ya da koflul gruplar› geriye boolean tipi bir de¤er döndürmelidir.
(true ya da false)
Örnek
var a=4;
var b=prompt(“Bir sayı giriniz ?”,””);
if(a==4)
{
alert(“Kullanıcının girdiği sayı 4”)
}
E¤er kullan›c› 4 de¤erini girerse flart do¤ru olacak ve “Kullan›c›n›n gir-

di¤i say› 4” fleklinde bir mesaj penceresi gösterilecektir. Kullan›c› 4 de-
¤erinden farkl› bir de¤er girerse bu durumda flart do¤ru olmayacak ve
alert() metodu çal›flmayacakt›r.
E¤er if deyimini tek bafl›na kullan›rsan›z bu durumda sadece flart›n do¤-

ru olma durumunda istedi¤iniz kodlar› çal›flt›rabilirsiniz. E¤er biz flart›n
yanl›fl olma durumunu da kontrol alt›na almak istersek yani flart›n yanl›fl
olma durumunda belirli bir kod grubu çal›flt›rmak istersek if else yap›-
s› kullanmal›y›z.
›f else Yap›s›
if(Şart)
{
// Şart doğru ise çalışacak kodlar
}else{
// Şart yanlış ise çalışacak kodlar
}
KOfiUL ‹FADELER‹ VE DÖNGÜLER 57
Örnek
var a=4;
if(a==b)
{
alert(“Girilen değer 4”);
}else{
alert(“Girilen değer 4’den farklı”);
}
Örnekte flart›n hem do¤ru hem de yanl›fl olma durumunu kontrol etmifl
oluyoruz. Kontrol etmekten kas›t o duruma kod yazmak demektir.
NOT E¤er if ya da else deyimlerinden sonra bir tane kod yaz›lacaksa süslü
parantez {} kullanmayabilirsiniz.
Örnek
var a=4;
if(a==b)
alert(“Girilen değer 4”);
else
alert(“Girilen değer 4’den farklı”);
else ›f Yap›s›
Bir if yap›s› içerisinde tekrar s›nama yapmak için kullan›l›r. Bir koflul
blo¤u içinde yeni bir koflul oluflturmak için kullanabilirsiniz. Özetle bir
koflulun yanl›fl olma durumuna göre tekrar s›nama yapmak için kullan›l›r.
if(şart1)
{
// şart1 doğru ise çalışacak kodlar
}else if(şart2){
// şart1 yanlış ve şart2 doğruysa çalışacak kodlar
}else if(şart3){
// şart1,şart2 yanlış ve şart3 doğruysa çalışacak kodlar
}
58 JAVASCRIPT
Örnek
var a=4;
if(a==b)
{
alert(“kullanıcının girdiği sayı 4”);
}else if(a<b){
alert(“kullanıcının girdiği sayı 4’den büyük”);
}else if(a>b){
alert(“kullanıcının girdiği sayı 4’den küçük”);
}
Örnekte ana s›nama yap›s› içerisine 2 tane daha s›nama yap›s› oluflturul-
mufltur. if blo¤unun hemen alt›ndaki else if yap›s› ba¤l› oldu¤u ana if
yap›s›n›n yanl›fl oldu¤u durumda çal›flacakt›r. En alttaki else if yap›s›
ise hem üstündeki else if yap›s›n›n hem de ana if yap›s›n›n yanl›fl ol-
du¤u durumda çal›flacakt›r.
! D‹KKAT! if - else if - else yap›lar› hep beraber kullan›labilir.
Örnek
var isim=prompt(“Bir sayı giriniz ?”,””);

var kucuk_isim=isim.toLowerCase();
// isim değişkeni içerisindeki değer
// küçük harfe çevriliyor.
if(kucuk_isim==”ahmet”)
{
alert(“ahmet bey hoş geldiniz”);
}else if(kucuk_isim==”mehmet”){
alert(“mehmet bey hoş geldiniz”);
}else{
alert(isim+” “+”hoş geldiniz”);
}
Bu örnekte kullan›c›dan bir isim istenmektedir. Kullan›c›dan al›nan

isim küçük harfe çevrilerek kucuk_isim adl› de¤iflkene atanm›flt›r. S›-
namalarda bu de¤iflken kullan›lm›flt›r.
Ana if blo¤undaki flart sa¤lan›rsa “ahmet bey hofl geldiniz” fleklinde bir
mesaj kutusu gösterilmektedir. E¤er ana if blo¤undaki flart yanl›fl ise
else if yap›s›na geçilir. E¤er else if yap›s›ndaki flart do¤ru ise bu du-
rumda yine karfl›lama mesaj› ç›kacakt›r. Ana if blo¤undaki ve else if
yap›lar›ndaki koflullar do¤ru de¤ilse o zaman en altta bulunan “de¤ilse”
yani else içindeki kodlar çal›flacakt›r.
NOT Bir koflul yap›s›na istedi¤iniz kadar alt koflul (else if) ekleyebilirsiniz.
Ama bir koflul yap›s›nda bir tane if ve else bloklar› kullan›l›r.
sw›tch ‹fadesi (Durum-Koflul)

Bir s›nama yap›s›d›r. De¤iflkenin alabilece¤i muhtemel de¤erlere yani
durumlara kodlar yaz›l›r.
Kullan›m› ise;
switch(deyim)
{
case deger1:
// deyim=deger1 ise çalışacak kodlar
break;
case deger2:
break;
case deger3:
break;
default:
// Yukarıdaki şartlar doğrulanmamış ise
// çalışacak kod gurubu
}
Deyim k›sm›na durumunu s›nayaca¤›m›z de¤iflken ya da sonuç döndü-

ren bir ifade veya fonksiyon yazabilirsiniz.
• Her bir s›nama kesinlikle case ile bafllamal› ve break ile bitmelidir.
E¤er break anahtar sözcü¤ünü kullanmazsan›z flart do¤ru olsa bile bü-
tün case yap›lar›na bofl yere bak›lm›fl olur.
• case ve break sözcükleri küçük harfle yaz›lmal›d›r.
60 JAVASCRIPT
• switch yap›s› içerisinde hiçbir flart blo¤u do¤ru de¤ilse default anah-
tar sözcü¤ünün alt›ndaki kodlar çal›fl›r. Bu ifadenin kullan›lma zorunlu-
lu¤u yoktur.
• Bir switch yap›s› içerisinde farkl› veri türleri kullan›labilir.
Örnek
var isim=prompt(“isminizi giriniz”,””);

switch(isim.slice(0,1))
{
case “a”:
alert(“isminizin ilk karakteri a”);
break;
case “b”:
alert(“isminizin ilk karakteri b”);
break;
case “c”:
alert(“isminizin ilk karakteri c”);
break;
default:
alert(“isminizin ilk karakteri”+” “ +isim.slice(0,1));
}
prompt() metoduyla oluflturulan girdi kutusuyla kullan›c›dan ismi isten-

mektedir. Daha sonra slice() metodu ile isim de¤iflkeninin ilk karakte-
ri kesilerek deyim k›sm›na yaz›lm›flt›r. E¤er kullan›c›n›n girdi¤i ismin ilk
karakteri “a” ise alert() metoduyla “isminizin ilk karakteri a” fleklinde
bir mesaj kutusu gösterilecektir. Kullan›c›n›n girdi¤i ismin ilk karakteri-
nin “b” ya da “c” olma durumlar›nda da benzer mesaj pencereleri göste-
rilecektir. E¤er hiçbir flart sa¤lanmazsa default anahtar sözcü¤ünün al-
t›ndaki kod ile kullan›c›ya isminin ilk karakteri gösterilmektedir.
NOT Girdi kutular›nda e¤er Cancel

dü¤mesine bas›l›rsa girdi ku-
tusunu atad›¤›m›z de¤iflkene
null de¤eri gönderilir.
Ayr›ca prompt() metoduyla
al›nan girdiler string veri türü-
ne sahiptir.
var isim=prompt(“isminizi giriniz”,””);
Kullan›c› Cancel dü¤mesine t›klarsa isim=null olur.
Burada dikkat etmeniz gereken switch koflul ifadesinin, s›namalarda

kesin eflitli¤i kullanmas›d›r. (= = =)
Döngü ‹fadeleri
Bir komutu ya da komut blo¤unu birden çok kez çal›flt›rmak için döngü-
ler kullan›l›r. Yapt›rmak istedi¤iniz ifllemleri birden fazla tekrarlatmaya
yarar. Örne¤in ekrana 1-100 aras›ndaki say›lar› yazd›rmak istiyorsunuz.
Bu durumda document.write() metoduyla;

document.write(1);
document.write(2);
document.write(3);
document.write(4);
document.write(5);
document.write(6);
.......................;
.......................;
document.write(100);
Yukar›daki gibi 100 sat›r kod yazman›z gerekecek. Bir ifllemi 1000 ya
da daha fazla kez tekrar etmeniz gerekebilir. Bu durumda yukar›daki ifl-
lem içinden ç›k›lmaz bir hale gelir. Yukar›daki kodlara dikkat ederseniz
hepsinde ortak olan bir deyim var. O da document.write() metodu-
dur. Yukar›daki yap›y› döngülerle 2 sat›r kod yazarak halledebiliriz.
for Döngüsü
En çok kullan›lan döngülerden biridir. Bir de¤iflken oluflturursunuz bu
de¤iflken ile ilgili bir flart belirtirsiniz ve de¤iflken bu flarta uydukça dön-
gü çal›fl›r. (‹çindeki komutlar› tekrarlar.)
for(değişkenin başlangıç değeri; Koşul; Arttırma/Azaltma)

{
// Komutlar
}
62 JAVASCRIPT
Yukar›daki yap›da for döngüsü parantezler içinde bizden 3 tane de¤er

isteyecektir. for döngüsünü tekrar ettirmek için bir de¤iflken oluflturma-
m›z ve oluflturdu¤umuz bu de¤iflkene bir bafllang›ç de¤eri vermemiz ge-
rekir. De¤iflken ismi tamamen size kalm›fl.
Koflul: Bu de¤iflken ile ilgili 2’inci parametrede bir koflul istenecektir.

De¤iflken koflula yani flarta uydu¤u sürece döngü çal›fl›r. Bu durumda
koflul k›sm› ile döngünün ne kadar yani kaç defa çal›flaca¤›n› ayarl›yo-
ruz. Koflul deyimi geriye boolean bir de¤er döndürmelidir.
Artt›rma/Azaltma: Oluflturdu¤umuz de¤iflkenin de¤erini döngünün

her tekrar›nda artt›rabilir ya da azaltabiliriz. ‹stersek 2’fler 3’er olarak
döngüde kulland›¤›m›z de¤iflkenin de¤erini artt›rabilri/azaltabiliriz.
E¤er bu k›sm› bofl geçersek ve de¤iflkenin bafllang›ç de¤eri koflula uyu-
yorsa sonsuz bir döngü olur, ki buda kullan›lmaz.
Artt›rma/Azaltma ifllemi döngüye ilk giriflte uygulanmayacakt›r. Yani

ilk döngüde de¤iflkenin de¤eri bafllang›ç de¤eridir. Döngü her bafla dön-
dü¤ünde ilk yap›lacak ifl, artt›rma/azaltma ifadesini çal›flt›rmakt›r. De¤ifl-
kenin bafllang›ç de¤eri ilk baflta bir defa çal›flt›r›l›r daha sonra her dön-
güde bu de¤iflkenin ald›¤› de¤ere artt›rma/azaltma ifllemi uygulan›r.
Yukar›daki örnekte 100 sat›rda yapt›¤›m›z ifllemi döngüyle yapal›m:

for(var i=1;i<101;i++)
{
document.write(i+”<br>”);
}
Bu durumda sayfaya 1-100 aras›ndaki say›lar alt alta yazd›r›lacakt›r.
Döngüde kullanmak için i isimli bir de¤iflken oluflturdum ve bu de¤ifl-

kene bafllang›ç de¤eri olarak 1 atad›m.
Hemen koflula bakal›m:
1<101 flart› do¤ru oldu¤undan document.write(1) olacak ve sayfaya

1 yazd›r›lacakt›r.Döngü bafla döndü¤ünde de¤iflkenin de¤eri 1 artt›r›la-
cak ve 2 olacakt›r. 2<101 flart› do¤ru oldu¤undan document.write(2)
olacak ve sayfaya 2 yazd›r›lacakt›r.
Bu flekilde döngü devam edecektir.
i de¤iflkeninin de¤eri 100 oldu¤unda bu durum flarta uygun oldu¤undan

sayfaya 100 de¤eri yazd›r›lacakt›r. Döngü bafla döndü¤ünde i de¤eri 1
artt›r›ld›¤› için 101 olacak 101<101 do¤ru olmad›¤›ndan döngüden ç›-
k›lacakt›r.
Sonuçta ekrana 1-100 aras› say›lar› yazd›rm›fl olduk.

1
2
3
...
...
...
100
yazd›r›lm›fl oldu.
Örnek
1- 100 kadar say›lar› toplama ifllemini döngü ile yapal›m.
var a=0;
{
a=a+i;
}
document.write(“1-100 arası sayıların toplamı”+”=”+a);
// sonuç:5050
Burada a diye bir de¤iflken oluflturdum ve bu de¤iflkene 0 bafllang›ç de-

¤erini verdim. Döngüye bakarsak i de¤iflkenine 1 de¤erinden bafllay›p
100 de¤erine kadar de¤er atanmakta.
Örne¤in ilk döngüde;
a=0+1... a=1;
a=1+2....a=3;
a=3+3....a=6
...............
64 JAVASCRIPT
................
................
a=4950+100 (i de¤iflkenin de¤eri 100 olmufltur)
Bu durumdan sonra i de¤eri 101 olaca¤›ndan döngüden ç›k›lacak ve
sonuç: 5050 olacakt›r.
Yukar›daki örneklerde döngü de¤iflkeninin de¤erini 1 artt›r›yorduk. De-

¤iflkenin de¤erini istedi¤imiz kadar artt›rabilir ya da azaltabiliriz. i++
yerine i=i+1 fleklinde açarak yazmak mümkün olacakt›r.
Örnek: 1-20 aras›ndaki çift say›lar› toplayan kodlar› yazal›m.
var a=0;
for(var i=2;i<101;i=i+2)
{
a=a+i;
}
document.write(“1-100 arası çift sayıların toplamı”+”=”+a);
// sonuç:2550
wh›le Döngüsü
Koflul do¤ru oldu¤u sürece while döngüsü komut ya da komut blokla-
r›n› tekrarlar. For döngüsünden farkl› olarak parantez içine sadece 1 ta-
ne ifade yaz›l›r.
Döngü değişkeni tanımlama ve değer atama

while(şart)
{
Komutlar;
Değişkenin değerini arttırma/azaltma
}
Burada for döngüsünden farkl› olarak parantezler içine sadece koflul

yaz›l›r. Döngü de¤iflkeninin de¤erini artt›rma/azaltma ifllemi while
içinde yap›lacak ifllemler bittikten sonra yap›lmal›d›r. De¤iflken tan›m-
lama ve de¤er atama ifllemi while döngüsünden önce yap›lmal›d›r.
while deyimi küçük harfle yaz›lmal› ve koflul k›sm›na geriye boolean

bir de¤er döndüren ifade yaz›lmal›d›r. Koflul do¤ru oldu¤u sürece dön-
gü çal›fl›r, e¤er koflul geriye false de¤eri döndürürse döngüden ç›k›l›r.
Örnek
1- 20 aras›ndaki say›lar› ekrana yazd›ral›m.
var k=1;
while(k<21)
{
document.write(k+”<br>”);
k++;
}
Döngü de¤iflkeninin bafllang›ç de¤erini de¤ifltirmelisiniz. (Artt›r-

ma/azaltma) E¤er döngü de¤iflkeninin bafllang›ç de¤eri flarta uyuyorsa
ve att›rma/azaltma ifllemi yap›lmam›fl ise sonsuz döngüye girilir.
Burada döngü de¤iflkeni olarak k kulland›m. Döngü de¤iflkeni ismi ola-

rak istedi¤iniz karakteri de¤iflken isimleri kurallar›na uygun olarak ta-
n›mlayabilirsiniz.
Örnek
Bir string içerisinde bir karakterin kaç kere kullan›ld›¤›n› bulal›m.
var str=”saeml okulu”;

var i=0;
var adet=0;
while(i<str.length)
{
if(str.charAt(i)==”u”)
{
adet++;
}
i++;
}
document.write(“u harfi sayısı = “+” “+adet);
Burada yap›lan ifllem str isimli de¤iflkende bir karakterin var olup ol-
mad›¤›n› e¤er var ise kaç defa kullan›ld›¤›n› bulma ifllemidir.
66 JAVASCRIPT
str.length() metoduyla karakter katar›n›n boyutu yani uzunlu¤u bu-

lunur. Stringlerde indeks numaralar› dizilerde oldu¤u gibi 0’dan baflla-
yacakt›r. Bu durumda str.length=11 olacakt›r.
Birinci döngüde i de¤iflkeninin de¤eri 0 olur. 0 <11 flart› do¤ru oldu-

¤undan döngü çal›fl›r.
if deyimi içerisindeki flart str.charAt(0)==”u” fleklinde olacakt›r.

Bu durumda str.charAt(0) metodu str de¤iflkeni içerisindeki 0 indeks
numaras›na sahip karakteri geriye döndürür. Bu karakter “s”dir.
“s”= = “u” flart› do¤ru olmad›¤›ndan if blo¤undan ç›k›l›r ve döngü de-

¤iflkeni olan i de¤eri bir artt›r›larak döngünün bafl›na dönülür. Döngü
ve if yap›s› yukar›daki gibi çal›flmas›na devam eder.
i=8 olunca;
8<11 flart› do¤ru oldu¤undan döngü flart› sa¤lan›r.
if yap›s›na bakarsak str.charAt(8)=”u” flart sa¤lanaca¤›ndan if blok-

lar› aras›na girilir ve bafllang›çta 0 de¤erini verdi¤im adet de¤iflkeni bir
artt›r›l›r. Çünkü “u” harfinden bir tane bulunmufltur.
Bu durum i=10 içinde tekrarlanacakt›r ve sonuçta 2 tane “u” karakteri

oldu¤u bulunur.
do..wh›le Döngüsü
do..while döngüsünün while döngüsünden fark›, koflul do¤ru olsun ya
da olmas›n döngü içerisindeki komutlar›n en az 1 defa çal›flt›r›lmas›d›r.
Program içerisinde çal›flmas› gereken kod bloklar›n› flarta ba¤l› olma-

dan en az bir defa çal›flt›rmak istersek do-while kullanmam›z gereke-
cektir. Döngü içerisindeki kod bloklar›n›n ikinci, üçüncü defa ya da da-
ha fazla çal›flmas› için flart›n do¤ru olmas› gerekir.
Örnek
var i=21;
do
{
document.write(i);
}while(i<20);
Dikkat ederseniz i=21 oldu¤undan döngü flart›na kesinlikle uymuyor.

Ama s›nama ifllemi en altta yap›ld›¤›ndan do..while döngüsü içerisin-
deki komut bir defa çal›flt›r›l›r ve döngüden ç›k›l›r.
while() deyiminden sonra noktal› virgüle dikkat edin.
Örnek
0-20 aras›ndaki say›lar› sayfaya yazd›ral›m;
var i=0;
do
{
document.write(i+”<br>”)
i++;
}while(i<21);
do .. while döngüsünde döngü de¤iflkeni do anahtar sözcü¤ünün üs-

tünde ve de¤er artt›rma/azaltma ifllemi döngü içerisinde yap›lmal›d›r.
Döngülerde
Kullan›lan Deyimler
Döngüden ç›kmak ya da döngü bafl›na gitmek için kullan›lan deyimler.
break Deyimi
Bu deyim döngüyü durdurmaya, terk etmeye yarar. Yani döngünün her-
hangi bir yerine bu deyim yaz›l›rsa döngüden ç›k›l›r. Bazen döngüler bir
ifade içerisinde bir karakter arama ya da dizi içerisinde karakter arama
ifllemleri için kullan›labilir. Bu deyimi kullanmazsak aranan karakter
bulunsa bile döngü sürmeye devam edecektir.
Özet olarak istedi¤iniz bir flart›n döngü içinde oluflmas› durumunda

döngünün çal›flmas›na son verebilir, yani döngüden ç›kabilirsiniz.
68 JAVASCRIPT
Örnek
Dizi içerisinde “a” karakterinin var olup olmad›¤›na bakal›m. E¤er var-
sa bir mesaj kutusu gösterdikten sonra döngüden ç›kal›m.

var my_dizi=new Array(“r”,”b”,”a”,”d”,”e”);
for(var i=0;i<my_dizi.length;i++)
{
if(my_dizi[i])==”a”)
{
alert(“dizi içerisinde a karakteri var”);
break;
}
}
</script>
Sonuç olarak bir mesaj kutusu ile “dizi içerisinde a karakteri var” yaz›-
s› kullan›c›ya gösterilir.
NOT Ayr›ca break deyimi ile sonsuz döngülerden ç›kmam›z mümkün olacakt›r.
E¤er sonsuz bir döngü oluflmuflsa bu döngü ilk önce taray›c›y› ifllemez ha-
le getirir ve daha kötüsü bilgisayar› kilitleyebilir.
cont›nue Deyimi
Bu deyim döngü içinde herhangi bir noktada kullan›ld›¤›nda o noktada
kodlar›n çal›flt›r›lmas›na son verilir ve döngü bafl›na geri dönülür. Bafl-
ka bir ifadeyle kullan›ld›¤› yerde program ak›fl› b›rak›l›r ve ak›fla dön-
güyü oluflturan deyimden (for, while gibi) devam edilir.
Örnek
0-20 aras›ndaki say›lar› (15 say›s› hariç) sayfaya yazd›ral›m.
{
if(i==15)
{
continue;
}
document.write(i+”<br>”);
}
</script>
70 JAVASCRIPT
FONKS‹YONLAR
6
Fonksiyon Tan›mlama 72 isNaN( ) 83
Fonksiyonlarda Geriye escape ( ) ve unescape( ) 83
De¤er Döndürme 77 parseint( ) ve parseFloat( ) 84
Rekursive Fonksiyonlar 80 String( ) ve Number( ) 85
Haz›r Fonksiyonlar 81 De¤iflkenlerin Geçerli
eval() 81 Olduklar› Alan 86
isFinite() 83
Bir ifllevi yani görevi yerine getiren kod bloklar›d›r. Tekrar tekrar çal›fl-
t›rma ihtiyac› duydu¤unuz kod bloklar›n› bir isim alt›nda bir araya geti-
rip, istedi¤iniz zaman bu ismi kullanarak kod blo¤unu çal›flt›rabilirsiniz.
Çok kulland›¤›n›z kodlar› özel bir blok oluflturup bunun içerisine yazar-
s›n›z ve bu kod grubuna bir isim verirsiniz. Uygulamada bu kod grubu-
nun yapt›¤› ifle ihtiyaç duyarsan›z bu kod grubunu tekrar yazmadan sa-
dece ismiyle ça¤›r›p iflleminizi gerçeklefltirirsiniz.
Javascript’te fonksiyonlar›n yapt›¤› ifl yukar›dakilerle s›n›rl› kalmaz. Ja-
vascript nesne tabanl› bir dildir. Bir olay karfl›l›¤›nda çal›flt›rmak istedi-
¤imiz kodlar› bir fonksiyon içerisine yaz›p belirlenen olay oldu¤unda
bu fonksiyonun çal›flmas›n› sa¤layabiliriz. (Fonksiyon ça¤r›l›r.)
Fonksiyonlara girdi olarak de¤erler verebilir ve istedi¤imiz ifllemleri
yerine getirmesini sa¤layarak ç›kt› alabiliriz. Girdiler parametre olarak
tan›mlan›r.
‹sterseniz girdi vermeden de ç›kt› alabilirsiniz. Fonksiyon ç›kt› vermek
zorunda de¤ildir. Fonksiyonlar ça¤r›ld›¤›nda bir ç›kt› vermeden sadece
içine yaz›lan kod bloklar›n› çal›flt›rabilir.
72 JAVASCRIPT
Fonksiyonlar› iki gruba ay›rabiliriz. Kullan›c›n›n kendi tan›mlad›¤›

fonksiyonlar ve önceden yaz›lm›fl haz›r fonksiyonlar.
Fonksiyon Tan›mlama
Fonksiyon kesinlikle function bildirimi ile bafllamal›d›r ve bu bildirim
küçük harfle yaz›lmal›d›r.
function fonksiyonadı(Parametreler)
{
// Kod blokları
}
E¤er bir fonksiyon birden fazla parametre alacaksa parametreler yani

girdiler aras›nda virgül konmal›d›r. Fonksiyonlar di¤er Javascript kod-
lar› gibi <script> bloklar› aras›nda yer almal›d›r.
Fonksiyon isimleri birbirleriyle ayn› olamaz yani bir HTML dosyas›nda

ayn› isimli iki tane fonksiyon olmamal›d›r. Fonksiyon parametre alma-
sa da fonksiyon ad›ndan sonra parantezler aç›l›p kapat›lmal›d›r. Fonksi-
yon tek bir komutu çal›flt›rsa bile kartezyen parantezleri olmal›d›r.
Parametreler: Fonksiyonlara yukar›da anlatt›¤›m gibi girdi de¤erleri

verebilirsiniz. ‹flte bunlara parametre denir. Parametreler kullan›c› tara-
f›ndan fonksiyon ça¤r›l›rken girilen de¤erleri (girdileri) fonksiyon için-
de temsil edeceklerdir.
Bir fonksiyonu Javascript kod bloklar› içerisinden ad›n› yazarak ça¤›ra-

bilirsiniz, yani içindeki kodlar›n çal›flmas›n› sa¤layabilirsiniz.
hesap(a)
fonksiyon hesap(sayi)
{
//kodlar
}
Burada dikkat ederseniz a de¤iflkeni sayi parametresine atan›yor. De-

¤iflken isimlerinin ayn› olmas› gerekmez yani;
hesap(a)
fonksiyon hesap(a)
FONKS‹YONLAR 73
{
//kodlar
}
Faktoriyel hesaplayan fonksiyon

var sayi=prompt(“Bir sayı giriniz”,””);
faktoriyel(sayi);
function faktoriyel(say)
{
var k=1;
say++;
for(var i=1;i<say;i++)
{
k=k*i;
}
document.write(“Girilen sayının Faktöriyeli”+” “+k);
}
</script>
Kullan›c›dan al›nan de¤er sayi isimli de¤iflkene atand›. Daha sonra

faktoriyel (say) ifadesi ile sayi de¤iflkeni say parametresine gön-
derilerek fonksiyon ça¤r›ld›. ‹fllemler yap›ld›ktan sonra sonuç ekrana
yazd›r›ld›.
Yukar›da yazd›¤›m›z fonksiyon d›flar›dan parametre beklemektedir. Çün-

kü fonksiyon içerisine yazd›¤›m›z kodlar d›flar›dan al›nacak parametre ile
ilgili yaz›lm›flt›r. Yani bu kodlar d›flar›dan al›nacak parametereye ba¤l›
çal›fl›r. Bu durumda fonksiyonu ça¤›r›rken parametre vermeniz gerekir.
Ama fonksiyon içinde d›flar›dan al›nacak parametrelere ba¤l› kod yazma-
m›flsan›z fonksiyon ça¤›r›rken parametresiz ça¤›rman›z gerekecektir.
Örnek
1-10 aras› say›lar ekrana yazd›ral›m.
say();
// say() isimli fonksiyon çağrıldı
74 JAVASCRIPT
function say()
{
var k=1;
while(k<11)
{
document.write(k+”<br>”);
k++;
}
}
</script>
Örnek
D›flar›dan girilen 2 say›n›n karesini al›p toplayan program› yazal›m.
var say_bir=prompt(“1.sayıyı giriniz”,””);
var say_iki=prompt(“2.sayıyı giriniz”,””);
kare(say_bir,say_iki);
// kare() isimli fonksiyon çağrıldı
function kare(x,y)
{
var sonuc=x*x+y*y;
document.write(sonuc);
}
</script>
Örnek
Obeb Hesaplayan Fonksiyon
Obeb ortak bölenlerinin en büyü¤ü anlam›na gelmektedir.
obeb(12,40);
// obeb() fonksiyonu çağrıldı
function obeb(a,b)
{
// eğer bir sayı diğerinin katı ise bu durumda
// obeb sayılardan küçük olana eşittir.
if(a>b)
FONKS‹YONLAR 75
{
if(a%b==0)
{
document.write(“obeb : “ + b);
// fonksiyonu terk edelim
return;
}
}
if(b>a)
{
if(b%a==0)
{
document.write(“obeb : “ + a);
// fonksiyonu terk edelim
return;
}
}
// - Eğer Sayılar Birbirinin Katı değilse - //
var mydizi=new Array();
// a>b ise
if(a>b)
{
var x=0;
for(var i=1;i<(b+1);i++)
{
if((a%i==0)&&(b%i==0))
{
mydizi[x]=i;
}
x++;
}
}
// b>a ise
if(b>a)
{
var x=0;
for(var i=1;i<(a+1);i++)
{
if((a%i==0)&&(b%i==0))
{
76 JAVASCRIPT
mydizi[x]=i;
}
x++;
}
}
// mydizi içerisindeki enson eleman
// ortak bölenlerin enbüyüğü olacaktır.
document.write(a+” “+”ve”+” “+b+” “+”sayıları için
OBEB=”+mydizi[mydizi.length-1])
}
</script>
obeb() isimli bir fonksiyon oluflturdum ve bu fonksiyona ortak bölen-

lerinin en büyü¤ü bulunacak iki tane parametre verdim.
Burada flunu bilmemiz gerekir; e¤er iki say› birbirinin kat› ise bu du-
rumda bu iki say›n›n obeb’i en küçük olan say›ya eflittir. Program›n ilk
bafl›nda bu s›nanm›flt›r. E¤er a>b ve a, b’nin kat› ise; bu durumda obeb
b’ye eflittir. Ya da b>a ve b, a’n›n kat› ise obeb a’ya eflit olacakt›r. Yu-
kar›da anlat›lan durumlardan biri gerçekleflmiflse return deyimi kulla-
n›larak fonksiyon terk edilecektir.
E¤er say›lar aras›nda kat olma durumu yoksa ifllem biraz daha zor bir
hale gelir, ki bu durumda di¤er s›namalara geçmek gerekir.
“E¤er say›lar birbirinin kat› de¤ilse” k›sm›n›n alt›ndaki kodlara geçelim;
Say›lar›n ortak bölenlerini saklamak için bir dizi de¤iflkeni tan›mlama-

s› yapaca¤›m;
var mydizi=new Array();
Daha sonra a>b ve b>a için iki s›nama daha yap›lm›flt›r ve ben bunlar-
dan bir tanesini ayr›nt›l› bir flekilde anlataca¤›m. Di¤eri de zaten ayn›
mant›kla çal›flacakt›r.
if(a>b)
{
var x=0;
FONKS‹YONLAR 77
{
if((a%i==0)&&(b%i==0))
{
mydizi[x]=i;
}
x++;
}
E¤er a>b ise bir döngü kullan›p iki say›y› 1’den b’ye kadar olan say›la-
ra bölece¤iz. Bu bölmelerde a ve b say›lar›n› kalans›z bölen bir i de¤e-
ri bulunursa bu de¤er if deyimi ile yakalan›p mydizi dizi de¤iflkeni
içerisine atanacak.
i de¤iflkeninin bafllang›ç de¤eri 1 oldu¤u için bu de¤iflkeni mydizi dizi

de¤iflkenine eleman atarken kullanamayaca¤›m. mydizi de¤iflkenine
eleman atamak için x de¤iflkeni tan›mlad›m. Bu de¤iflken 0 bafllang›ç de-
¤erini almakta ve döngü her döndü¤ünde de¤eri 1 artmaktad›r. Dizi içe-
risine, iki say›y› böldü¤ünde kalan olarak 0 veren say›lar› atm›fl oldum.
‹ki say›y› da bölen en büyük say›, mydizi dizi de¤iflkeni içindeki en bü-
yük say› olacakt›r. Bu dizi içerisindeki en büyük say› tabiki i’nin de¤e-
ri sürekli artt›¤›ndan dizi ye en son eklenen say› olacakt›r.
document.write(a+” “+”ve”+” “+b+” “+”sayıları için
OBEB=”+mydizi[mydizi.length-1])
Yukar›daki kodla bu de¤eri sayfaya yazd›rm›fl oldum.
Örnekte fonksiyon yine <script> bloklar› aras›ndan ça¤r›lm›flt›r.
Fonksiyonlarda Geriye
De¤er Döndürme
Fonksiyonlara girdi yani parametre verseniz de vermeseniz de geriye
de¤er döndürmek zorunda de¤iller. Bir fonksiyon, ekrana veri yazd›rma
ve di¤er ifllemleri kendi içinde yapabilir. Fonksiyonun geriye de¤er
döndürmesi ça¤r›ld›¤› yani çal›flt›r›ld›¤› yere de¤er döndürmesi anlam›-
78 JAVASCRIPT
na gelir. Ayr›ca return deyimi fonksiyonu çal›flmas›n› durdurmaya ya-

ni fonksiyondan ç›kmaya yarar.
Örnek
function deger()
{
return 10;
}
var a=deger();
document.write(a);
Yukar›daki deger() fonksiyonu, herhangi bir parametre almamaktad›r.

Fonksiyon içinde kullan›lan return 10; komutu ile fonksiyon ça¤r›l-
d›¤› yere 10 de¤erini döndürecektir.
return deyimi boflluktan sonra noktal› virgüle kadar olan k›sm› geriye
döndürecektir. Fonksiyondan geriye dönen de¤er 10 olacak ve bu 10 de-
¤eri a de¤iflkenine atanacakt›r. Daha sonra a de¤iflkeni sayfaya yazd›r›l-
m›flt›r.
Bir fonksiyon içerisinde e¤er return anahtar sözcü¤ü kullan›lm›fl ise

return’den sonra gelen kodlar çal›flt›r›lmayacakt›r. Yani return ister
geriye de¤er döndersin, ister döndermesin fonksiyon içerisinde çal›flt›-
r›ld›¤› yerde fonksiyon bitirilir, yani çal›flmas›na son verilir.
Örnek
function deger()
{
return 10;
document.write(“javascript”);
/*
return fonksiyonun çalışmasını
bitirdiğinden ekrana javascript metni yazılmayacak
*/
}
var a=deger();
document.write(a);
FONKS‹YONLAR 79
Fonksiyondan geriye de¤er döndürmeden ç›kmak için yani fonksiyonun

çal›flmas›n› sona erdirmek için return deyimi kullan›labilir. Böylece
fonksiyon çal›flt›ktan sonra bile belirli bir flart gerçekleflmedi¤inde fonk-
siyondan ç›k›labilir.
Örnek
function deger(a)
{
if(a==5)
{
return;
}
// fonksiyona parametre olarak 5 değeri
// gönderilirse fonksiyondan çıkılacak
}
Örne¤imizde a parametresine 5 de¤erini gönderirseniz fonksiyondan ç›-

k›lacak, yani fonksiyon terk edilecektir.
return deyimi ile geriye dönen de¤er bir ifade ya da formülde kullan›-
labilir.
function deger(num)
{
return num*num;
}
document.write(2*deger(2));
Bir de¤iflkenin ald›¤› de¤eri ya da mant›ksal ya da matematiksel bir ifa-

denin sonucunu return deyimi ile geriye döndürülebilirsiniz.
Örnek
function deger(num)
{
var a=num+1;
return a;
/*
return deyimi ile
80 JAVASCRIPT
fonksiyonda değer almış a değişkeninin

değeri geriye döndürülmekte
*/
}
document.write(deger(2));
Rekurs›ve Fonksiyonlar
Fonksiyon kod blo¤u içerisinden kendi kendisini ça¤›r›yorsa bu yap›ya
recursive fonksiyon ad› verilir.
Örnek
function azalt(num)
{
if(num==0)
{
return;
// döngüden çık;
}
document.write(num+”-”);
num—;
azalt(num);
}
azalt(10);
// sonuç: 10-9-8-7-6-5-4-3-2-1-
Örne¤imizde azalt() fonksiyonuna parametre olarak 10 de¤eri gönde-

rilmifltir. (num=10)
Bu durumda num de¤iflkeninin de¤eri 0 olmad›¤› için sayfaya 10- met-

ni yaz›lm›flt›r. Bir sonraki kod sat›r›nda num de¤iflkeninin de¤eri 1 azal-
t›larak azalt(9) fleklinde fonksiyon tekrar ça¤r›lm›flt›r. if blo¤undaki
koflul gerçekleflmedi¤inden sayfaya 9- metni yaz›lm›flt›r. En son num de-
¤iflkeni de¤eri 0 oldu¤unda fonksiyondan ç›k›lacakt›r.
Örnek
Bir fonksiyon içerisinden baflka bir fonksiyonu ça¤›rabiliriz.
ab üst alma
FONKS‹YONLAR 81
ust_basla(2,3);
function ust_basla(a,b)
{
if(b==0)
{
document.write(a+ String(b).sup()+”=”+”0”);
}else{
ust(a,b);
}
}
function ust(a,b)
{
var k=1;
{
k=k*a;
}
document.write(a+ String(b).sup()+”=”+k);
}
// sonuç: 23=8
</script>
Burada sayfa yüklendi¤inde ust_basla(2,3) fonksiyonu ça¤r›l›yor.

ust_basla(2,3) fonksiyonunda e¤er b=0 flart› sa¤lan›rsa say›n›n kuv-
veti 1 olacakt›r. E¤er flart sa¤lanmazsa di¤er ifllemlerin yap›lmas› için
ust(a,b) fonksiyonu ça¤r›lmaktad›r. Üst alma ifllemi ust() fonksiyo-
nunda yap›l›p sonuç yine ayn› fonksiyonda ekrana yazd›r›lmaktad›r.
Haz›r Fonksiyonlar
eval()
De¤iflkenleri de¤erlendirmek için kullan›l›r.
Örnek
var a=”2”;
var b=”3”;
82 JAVASCRIPT
// sonuç:23
document.write(eval(a)+eval(b));
// sonuç:5
</script>
document.write() metodu ile a+b iflleminin sonucunu sayfaya yazd›r-

d›¤›m›zda sonuç 23 olacakt›r.Çünkü a ve b de¤iflkenlerine atanan de¤er-
ler string de¤erlerdir.
eval() fonksiyonunu kullan›rsak a ve b de¤iflkenlerine atanm›fl verile-

rin t›rnak içerisinde olmalar›na ra¤men matematiksel ifllemlerde kulla-
n›labileceklerini anlar ve toplama iflleminde bu iki de¤iflkeni number’a
çevirir.
Örnek
var a=prompt(“bir sayı giriniz”);
// prompt()ile oluşturulan girdi kutusuna
// sayısal bir değer girseniz bile prompt() metodunun
// geriye döndürdüğü degerin veri türü string olacaktır.
var b=3;
document.write(eval(a)+b);
</script>
prompt() metodu ile kullan›c›dan bir de¤er istendi¤inde kullan›c› girdi

kutusuna ister number ister string bir de¤er girsin sonuçta geriye dönen
de¤erin veri türü string olacakt›r. Bu durumda içerisinde sadece rakam
olan string veriler eval() fonksiyonu ile yap›lan ifllem için number’a
çevrilebilir. Sonuçta girilen say› ile 3 de¤eri toplan›r.
Örnek
var kullanici_sifresi=”123af”;
document.write(eval(“kullanici_”+”sifresi”));
// sonuç:123af
</script>
FONKS‹YONLAR 83
eval() fonksiyonu içerisine yaz›lan string leri birlefltirir ve online_sif-

resi isimli de¤iflkenin de¤erini sayfaya yazd›r›r.
›sF›n›te()
Verilen say›n›n sonlu bir say› olup olmad›¤›n› bulmak için kullan›l›r.
Yani isFinite() fonksiyonu say›n›n pozitif s›n›r› afl›p aflmad›¤›n› an-
lamak için kullan›l›r.
Bir de¤iflkenin pozitif alabilece¤i maximum de¤er 1,79e+308. E¤er de-

¤iflkene atanan de¤er pozitif s›n›r› aflm›flsa, yani sonsuz bir say› ise is-
finite() fonksiyonu geriye false, aflmam›flsa true gönderir.
Örnek
document.write(isFinite(23)+”<br>”);// sonuç:true
document.write(isFinite(2.3)+”<br>”);// sonuç:true
document.write(isFinite(5-2)+”<br>”);// sonuç:true
// fonction içerisinde matematiksel işlem
// sonucunu değerlendirmek mümkün
document.write(isFinite(“Merhaba”)+”<br>”);// sonuç:false
document.write(isFinite(1.79e+400)+”<br>”);// sonuç:false
</script>
›sNaN( )
Kendisine verilen de¤erin say›sal yani number olup olmad›¤›n› kontrol
edecektir. E¤er verilen de¤er number ise false de¤ilse true de¤eri
döndürür. NaN (Not a Numeric) say›sal de¤il anlam›na gelmektedir.
Örnek
document.write(isNaN(“A”)+”,” +isNaN(2));
// sonuç:true,false
</script>
escape ( ) ve unescape( )
escape() fonksiyonu karakterleri özel olarak kodlamak için unesca-
pe() fonksiyonu bu özel kodlamay› çözmek için kullan›l›r. Sunucuya
84 JAVASCRIPT
bilgi gönderirken URL sonuna ekledi¤imiz ve problem yaflad›¤›m›z ($,

#, &, boflluk) gibi karakterleri kodlamak için ve bu kodu çözmek için
kullan›l›rlar.
Örnek
// escape()
document.write(escape(“ “)+”<br>”);// sonuç:%20
document.write(escape(“#”)+”<br>”);// sonuç:%23
document.write(escape(“&”)+”<br>”);// sonuç:%26
document.write(escape(“$”)+”<br>”);// sonuç:%24
</script>
// unescape()
document.write(unescape(“%20”)+”<br>”);// sonuç:boşluk
document.write(unescape(“%23”)+”<br>”);// sonuç:#
document.write(unescape(“%26”)+”<br>”);// sonuç:&
document.write(unescape(“%24”)+”<br>”);// sonuç:$
</script>
parse›nt( ) ve parseFloat( )
parseInt() kendisine verilen string de¤erin (karakter kümesi’nin) sa-
y›sal olan k›sm›n› yani numeric olan k›sm›n› alacakt›r. parseInt()
fonksiyonu string içerisinde ondal›kl› k›s›mlar› almaz. Çünkü parse-
Int() geriye integer, yani tamsay› döndürür.
Örnek
document.write(parseInt(“21aaaa”)+”<br>”);
// sonuç:21
document.write(parseInt(“a21aaaa”)+”<br>”);
// karakter katarında ilk karakter harf olduğundan
// parseInt() fonksiyonu geriye NaN döndürür.
document.write(parseInt(“23.2333”)+”<br>”);
// karakter kümesinden 23 degeri alındı.Nokta karakteri
// parseInt() fonksiyonu tarafından numeric olarak kabul edilmez.
FONKS‹YONLAR 85
// parseInt() fonksiyonu geriye tamsayı döndürür.sonu:23

</script>
parseFloat() kendisine verilen string de¤erin (karakter kümesi’nin)

say›sal olan k›sm›n› yani numeric olan k›sm›n› alacakt›r. parseFlo-
at() fonksiyonu parseInt() fonksiyonundan farkl› olarak string içe-
risinde ondal›kl› say› olmas› durumun da bu ondal›kl› k›sm› da al›r.
parseFloat() geriye tamsay› ya da floating point yani ondal›kl› sa-
y› döndürebilir.
Örnek
document.write(parseFloat(“21aaaa”)+”<br>”);
// sonuç:21
document.write(parseFloat(“a21aaaa”)+”<br>”);
// karakter katarında ilk karakter harf olduğundan
// parseFloat() fonksiyonu geriye NaN döndürür.
document.write(parseFloat(“23.2333”)+”<br>”);
// parseFloat()fonksiyonu geriye ondalıklı sayı döndürebilir.
// sonuç:23.2333
</script>
Str›ng( ) ve Number( )
String() verilen de¤eri string veri türüne çevirir.
Number() verilen de¤eri number veri türüne çevirir.
Örnek
var str1=”12”;
var str2=”abc23”;
document.write(Number(str1)+1);
/*
str1 değişkeninin veri türü string olmasına ragmen
Number() fonksiyonu ile number veri türüne çevrilmiştir.
*/
document.write(Number(str2)+1);
/*
86 JAVASCRIPT
str2 değişkenini Number() fonksiyonu ile number veri türüne

çeviremezsiniz.
*/
</script>
Örnek
var num1=5;
var num2=23;
document.write(String(num1)+num2);
// sonuç:523
</script>
num1, num2 de¤iflkenlerinin veri türü number oldu¤undan bu iki de¤ifl-

ken aras›nda + operatörü kullan›l›rsa toplama ifllemi gerçekleflir. Fakat
örne¤imizde num1 de¤iflkeni string veri türüne çevrildi¤inden + opera-
törü birlefltirme ifllemi yapar.
De¤iflkenlerin Geçerli
Olduklar› Alan
Javascript’te kulland›¤›m›z de¤iflkenleri bir genel de¤iflkenler yani
<script> blo¤u içinde tan›mlanan, birde yerel (local) de¤iflkenler ya-
ni fonksiyon içinde tan›mlanan olarak ikiye ay›rabiliriz.
Genel de¤iflkenleri fonksiyonlar›n içinde kullanman›z mümkündür. Ya-

ni <script> bloklar› aras›nda tan›mlanan de¤iflkenler fonksiyonlar için-
de kullan›labilir. Önceden ald›klar› de¤erleri fonksiyon içine tafl›yabilir-
ler. Fonksiyon içinde genel de¤iflkenlerin de¤erleri de¤ifltirilebilir.
Yerel, yani local de¤iflkenler fonksiyon içerisinde tan›mlanan de¤iflken-

lerdir. Sadece fonksiyon içerisinde kullan›labilirler. <script> taglar›
içerisinden fonksiyon içinde tan›mlanan ve de¤er alan bir de¤iflkene
ulaflmak (sayfaya yazd›rmak, ifllemek) mümkün de¤ildir.
Örnek
var a=5;
FONKS‹YONLAR 87
var b=10;
// genel değişkenler tanımlandı
function islem()
{
a=”ajax”;
b=”dhtml”;
// genel değişkenlerin fonksiyon içerisinde
// değerleri değiştirilebilir.
var c=”asp.net”;
// fonksiyon içerisinde tanımlanan c değişkeni
// local bir değişkendir.
}
islem();
document.write(a+”<br>”);// sonuç:ajax
document.write(b+”<br>”)// sonuç:dhtml
document.write(c)
// fonksiyonun çalışması bittiğinde c değişkeni hafızadan silinir
// c değişkenine fonksiyon dışından ulaşamazsınız.
</script>
88 JAVASCRIPT
OLAYLAR
7
(EVENTS)
Eventhandler onSelect Olay› 102
(Olay Yönlendiricileri) 89 onResize Olay› 103
onLoad, onUnLoad Olaylar› 90 onKeyDown Olay› 103
onClick, onDbClik Olaylar› 92 onKeyPress Olay› 107
onSubmit Olay› 94 onKeyUp Olay› 108
onReset Olay› 95 onMouseDown Olay› 109
onChange Olay› 96 onMousemove Olay› 109
onFocus Olay› 98 onMouseout Olay› 109
onBlur Olay› 99 onMouseOver Olay› 109
onError, onAbort Olaylar› 100 onMouseUp Olay› 109
Olaylar› k›saca kullan›c›n›n herhangi bir nesne üzerinde gerçeklefltire-

bilece¤i bir eylem olarak tan›mlayabiliriz. Javascript olay yönelimli ça-
l›flacakt›r. Javascript’te yazd›¤›m›z kodlar›n büyük bir bölümünü olay-
lara yazaca¤›z. Kullan›c›n›n mouse SOL tufluna t›klamas› klavyeden her-
hangi bir tufla basmas›, sayfan›n yüklenmesi, sayfan›n kapat›lmas› gibi
bunlar›n hepsi olay olarak karfl›m›za ç›kmaktad›r.
Eventhandler
(Olay Yönlendiricileri)
Bir olay meydana geldi¤inde fonksiyonlar› çal›flt›rmam›z› sa¤layan
eventhandler’lard›r.
Olay yönlendiricileri önceden tan›mlanm›fl olay isimleridir. Bu olay

isimlerinden hangi olaya kod yazaca¤›n›z› seçmeniz mümkündür.
Bir HTML eleman›na, olay yönlendiricisi afla¤›daki gibi eklenir.

<etiket eventhandler=”javascript kodu”>
90 JAVASCRIPT
Bir etikete olay yönlendiricisini yaz›p daha sonra bu olay gerçekleflti¤in-

de çal›flmas›n› istedi¤imiz kodlar› karfl›s›na t›rnak içerisine yazabiliriz.
<a href=”islem.aspx” onclick=”alert(‘bağlantıya â
tıkladınız’)”>islem.aspx sayfası</a>
Burada olay yönlendirici olarak onclick kullan›lm›flt›r. onclick olay›

meydana geldi¤inde kulan›c›ya bir mesaj penceresi gösterilecek ve da-
ha sonra islem.aspx sayfas› aç›lacakt›r.
E¤er a etiketinin href özelli¤ini kullanmayacaksan›z bu durumda:

<a href=”javascript:;” onclick=”kodlar”></a>
fleklinde kullan›rsan›z href özelli¤ini etkisizlefltirmifl olursunuz. (Her-

hangi bir ifllem yapmaz.)
Olay yönlendiricisine kodlar›n›z› yazd›¤›n›z fonksiyon ad›n› yazabilir-

siniz.
<etiket eventhandler=”hesap()”>
Bu durumda olaya karfl›, çal›flmas›n› istedi¤imiz kodlar, fonksiyon içe-

risine yaz›lmal›d›r.
Olay sonucunda çal›flacak kodlar› direk eventhandler karfl›s›na ya da

bir fonksiyon içerisine yazabilirsiniz. Bu durumda fonksiyon içerisine
yazmak daha mant›kl› olacakt›r. Bir HTML içerisine Javascript yazmak
kodlar›n yaz›l›fl›n› ve okunuflunu zorlaflt›racakt›r. Fonksyion içerisine
yazd›¤›n›z kodlar› di¤er nesnelerin baflka olaylar› içinde çal›flt›rman›z
mümkün olacakt›r.
onLoad, onUnLoad Olaylar›

Bir nesnenin yüklenmesinin bitmesi onLoad, nesnenin ekrandan kald›-
r›lmas› onUnLoad olay›n› meydana getirir. Genel olarak <body> taglar›
içinde kullan›l›rlar. Taray›c› bir HTML sayfas›n› yüklemeyi bitirdi¤in-
de onLoad olay›n›, sayfa gösterilirken yani yüklendikten sonra sayfay›
kapatmas› onUnLoad olay›n› oluflturur. Örne¤in bir resim sayfaya yük-
lendi¤inde onLoad olay› meydana gelecektir.
body, frame, frameset, img taglar› için kullan›labilirler.
OLAYLAR (EVENTS) 91
Örnek
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
charset=utf-8” />
function mesaj()
{
window.defaultStatus=”Sayfaya Hoş geldiniz”;
}
</script>
</head>
<body onload=”mesaj();”>
</body>
</html>
Sayfa taray›c›ya yüklendi¤inde taray›c› durum çubu¤unda “sayfaya hofl

geldiniz” yaz›s› ç›kacak.
Örnek
Taray›c› penceresi kapat›ld›¤›nda kullan›c›ya bir mesaj kutusu gösteri-
lecektir.

<head>
charset=utf-8” />
function unload_mesaj()
{
alert(“Sayfamıza bir daha bekleriz”);
}
</script>
92 JAVASCRIPT
</head>
<body onunload=”unload_mesaj();”>
</body>
</html>
Ayr›ca sayfa yüklenmesi, kapat›lmas› gibi pencere ile ilgili olaylara

eventhandler kullan›lmadan da fonksiyon atanabilir.
Örnek

<head>
charset=utf-8” />
window.onload=function load_mesaj()
{
alert(“Merhaba”);
}
</script>
</head>
<body >
</body>
</html>
Bir olaya programatik olarak fonksiyon tan›mlamak mümkündür.
window.onload >>> pencerenin onload olay› anlam›na gelmektedir.

Buna karfl›l›k bir fonksiyon tan›mlanmaktad›r.Yani sayfa yüklendi¤inde
load_mesaj() fonksiyonu çal›flt›r›lacakt›r. Bu fonksiyon çal›flt›¤›nda
kullan›c›ya “Merhaba” fleklinde bir mesaj kutusu gösterilir.
onCl›ck, onDbCl›k Olaylar›

Kullan›c›n›n herhangi bir nesne üzerinde mouse SOL tufluna t›klamas› ile
onClick olay›, bu nesne üzerine çift t›klamas›yla onDbClik olay› olu-
flur. Mouse tufluna sürekli bas›lmas› onClick olay›n› meydana getirmez.
OLAYLAR (EVENTS) 93
Bu olaylar› destekleyen HTML taglar›ndan baz›lar›:
<a>, <b>,<big>, <blockquote>, <body>, <button>, <div>,<em>,

<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>,<label>,
<legend>, <li>, <ol>, <p>, <pre>, <select>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>,
<th>, <thead>, <tr>, <tt>, <ul>
Örnek
<head>
charset=utf-8” />
function esitle()
{
document.getElementById(“txt2”).value=document.getElementB-
yId(“txt1”).value;
}
</script>
</head>
<body >
<input type=”text” id=”txt1” /><br />
<input type=”button” value=”doldur” onclick=”esitle()”/>
</body>
</html>
Sayfa üzerinde iki tane text yani metin kutumuz, bir tane de butonumuz
var. Kullan›c› butona clickledi¤inde onClick olay› meydana gelecek ve
esitle() isimli fonksiyon bu olaya karfl›l›k eventhandler taraf›ndan
çal›flt›r›lacakt›r.
Fonksiyon çal›flt›¤›nda 1. kutu içeri¤i 2. kutuya atanacak. Yani örne¤in

kullan›c› 1. kutuya “kod” yazm›flsa butona clicklendi¤inde 2. kutuya da
“kod” yaz›lacakt›r.
94 JAVASCRIPT
onSubm›t Olay›
Formlar kullan›c›dan bilgi toplamaya yarayan alanlard›r. Submit buto-
nuna t›kland›¤›nda form etiketi içerisinde action özelli¤i ile belirlenmifl
sayfaya belirtilen method ile form içerisindeki bilgiler gönderilir.‹flte
formu göndermeye yarayan submit butonuna t›kland›¤›nda Javascript
onSubmit olay›n› üretir.
Bu olay sadece <form> HTML etiketine yaz›labilir ve form nesnesi

için tan›mlanabilir.
Örnek
<head>
charset=utf-8” />
function gonder()
{
var str=”form içerisindeki veriler islem.aspx sayfasına â
gönderilecek”;
alert(str);
}
</script>
</head>
<body >
<form action=”islem.aspx” method=”post”>
<input type=”submit” value=”gonder” onclick=”gonder()”/>
</form>
</body>
</html>
Gönder butonuna t›kland›¤›nda “form içerisindeki veriler islem.aspx

sayfas›na gönderilecek” mesaj› gösterilecektir. Daha sonra bilgiler post
metoduyla islem.aspx sayfas›na gönderilir.
OLAYLAR (EVENTS) 95
onReset Olay›
Form elemanlar›n›n içerisindeki bilgileri s›f›rlamak silmek için reset
dü¤mesi kullan›l›r. Kullan›c› reset dü¤mesine t›klad›¤›nda onReset
olay› oluflur.
Örnek

<head>
charset=utf-8” />
function frm_temizle()
{
return confirm(“formu temizlemek istiyormusunuz?”);
}
</script>
</head>
<body >
<form action=”islem.aspx” method=”post”>
<input type=”reset” value=”temizle” onclick=” return
frm_temizle()”/>
</form>
</body>
</html>
Örnekte kullan›c› e¤er Temizle butonuna basarsa confirm() metoduy-

la ona gerçekten silmek isteyip istemedi¤i sorulacak ve:
96 JAVASCRIPT
E¤er Tamam derse:
confirm(“formu temizlemek istiyormusun”) metodu geriye true de¤eri

döndürür.
E¤er ‹ptal derse:
confirm(“formu temizlemek istiyormusun”) metodu geriye false de¤eri

döndürür.
confirm() metodu taraf›ndan geriye döndürülen bu boolean de¤er re-

turn taraf›ndan fonksiyonun ça¤r›ld›¤› yere gönderilir. Fonksiyonun
ça¤r›ld›¤› yere bakal›m:
onreset=”return temiz();”
frm_temizle() fonksiyonu yerine true de¤eri dönerse;
onreset=”return true” olay devam edecektir. Yani form elemanla-

r›n›n içerikleri silinir.
frm_temizle() fonksiyonu yerine false de¤eri dönerse;
onreset=”return false” olay› devam etmez. Yani formdaki bilgiler

silinmez.
Bir olay› bitirmek için eventhandler içerisine “return false;” yaz›l-

mas› yeterli olacakt›r.
onChange Olay›
Kullan›c›yla etkileflime giren form elemanlar›nda, kullan›c› seçimi de-
¤ifltirdi¤inde ya da girilen metni de¤ifltirdi¤inde onChange olay› meyda-
na gelir.
Örnek

<head>
OLAYLAR (EVENTS) 97
charset=utf-8” />
function change()
{
alert(“seçimi değiştirdiniz”)
}
</script>
</head>
<body >
<select id=”ders” onchange=”change()”>
<option>c#</option>
<option>c++</option>
<option>vb.net</option>
</select>
<input type=”checkbox” onchange=”change()” />
</body>
</html>
Kullan›c› form elemanlar›nda seçimi de¤ifltirdi¤inde onchange olay›

meydana gelecektir. Kullan›c›ya seçimi değiştirdiniz fleklinde bir
mesaj gösterilecektir.
Örnek

<head>
charset=utf-8” />
function change()
{
alert(“seçimi değiştirdiniz”)
}
</script>
</head>
<body >
98 JAVASCRIPT
<textarea onchange=”change()”></textarea><br />

<input type=”text” onchange=”change()” />
</body>
</html>
Sayfam›z:
Yukar›daki text ve textarea içindeki kullan›c› tarafl› yap›lan tüm de-

¤iflikliklerde change() fonksiyonu çal›flacakt›r.
onFocus Olay›
Kullan›c›n›n herhangi bir HTML eleman› ya da form eleman›n› seçme-
si, program kontrolünün elemanda olmas›, o elemana odaklan›lmas› du-
rumunda olay› meydana gelir. Bu olaylar› destekleyen HTML taglar›n-
dan baz›lar› flunlard›r.
<a>, <b>,<big>, <blockquote>, <body>, <button>, <div>,<em>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>,<label>,
<legend>, <li>, <ol>, <p>, <pre>, <select>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>,
<th>, <thead>, <tr>, <tt>, <ul>
layer, frame, window nesneleri bu olay› destekler.
Örnek

<head>
charset=utf-8” />
OLAYLAR (EVENTS) 99
function odaklan(x)
{
document.getElementById(x).style.backgroundColor=”yellow”;
}
</script>
</head>
<body >
<textarea id=”alan” onfocus=”odaklan(this.id)”></textarea><br />
<input type=”text” id=”kutu” onfocus=”odaklan(this.id)” />
</body>
</html>
‹ki eleman›n onFocus olaylar› için, odaklan() isimli bir fonksiyon ta-
n›mlanm›flt›r.
odaklan() fonksiyonu d›flar›dan bir x parametresi beklemektedir. Bu

parametre ile hangi elemana odaklan›ld›¤› anlafl›lacakt›r. E¤er kullan›c›
metin alan› üzerine t›klam›flsa yani odaklanm›flsa metin alan› için onFo-
cus olay› gerçekleflecek ve onfocus =”odaklan(this.id)” fleklinde
odaklan() fonksiyonu ça¤r›lacakt›r. Parametrede kullan›lan this deyi-
mi olay› oluflturan eleman› temsil etmektedir.
Olay› oluflturan eleman›n id özelli¤inde “alan” de¤eri oldu¤una göre ve

bu de¤er fonksiyona parametre olarak gönderildi¤inden fonksiyon için-
deki sat›r:
document.getElementById(“alan”).style.backgroundColor=”yellow”
fleklinde olacakt›r ve olay› oluflturan eleman›n arka plan rengi de¤ifltiri-

lecektir.
NOT Html elemanlar›n›n içerisinden bir fonksiyonu ça¤›r›rken bu fonksiyona

eleman›n herhangi bir özelli¤ini parametre olarak göndermek istersek,
eleman› temsil eden this deyimini kullanabiliriz.
onBlur Olay›
Kullan›c› bir eleman için odaklanmaya son vermifl ise, kullan›c› bu elema-
n›n seçili olma durumunu bitirmiflse yani eleman› terk etmiflse, onBlur
olay› gerçekleflir.
100 JAVASCRIPT
Örnek

<head>
charset=utf-8” />
function odaklan(x)
{
document.getElementById(x).style.backgroundColor=”yellow”;
}
function terk(x)
{
document.getElementById(x).style.backgroundColor=”white”;
}
</script>
</head>
<body >
<textarea id=”alan” onfocus=”odaklan(this.id)” â
onblur=”terk(this.id)”></textarea><br />
<input type=”text” id=”kutu” onfocus=”odaklan(this.id)”
onblur=”terk(this.id)”/>
</body>
</html>
onFocus olay›nda yapt›¤›m›z örne¤e devam edelim. Bu örnekte kulla-

n›c›n›n odakland›¤› form eleman›n›n artalan renkleri sar› olmaktayd›.
Yukar›daki örne¤imizde kullan›c›n›n terketti¤i form eleman›n›n artalan
rengi tekrar beyaz olmaktad›r.
onError, onAbort Olaylar›

onError: Taray›c› bir nesneyi yüklerken hatayla karfl›lafl›rsa onError
olay› meydana gelir. Örne¤in taray›c› sayfay› ya da bir resmi yüklerken
bir hatayla karfl›lafl›rsa onError olay› oluflur.
OLAYLAR (EVENTS) 101
Kullan›ld›¤› taglar
<img>, body(window)
Kullan›ld›¤› objeler
img
onAbort: Kullan›c›n›n taray›c›n›n Stop dü¤mesine t›klamas› onAbort

(yar›da kes) olay›n› do¤urur.
Kullan›ld›¤› taglar
<img>
Kullan›ld›¤› objeler
img
Örnek

<head>
charset=utf-8” />
function stop()
{
alert(“resim yüklenemedi”);
}
</script>
</head>
<body >
<img src=”Mavi Tepeler.jpg” width=”159” height=”120” â
onerror=”stop();” />
</body>
</html>
Resmin yolunu yanl›fl yazarak resmin yüklenememesini sa¤lad›m. Bu

bir hata oluflturaca¤›ndan stop() fonksiyonu çal›flacakt›r.
102 JAVASCRIPT
onSelect Olay›
Text ve textarea elemanlar› içerisinde bulunan metin seçilirse, bu olay
meydana gelecektir.
Örnek

<head>
charset=utf-8” />
function sec()
{
alert(“metni seçemezsiniz”);
}
</script>
</head>
<body >
<form method=”post” action=””>
<textarea cols=”8” onselect=”sec();” rows=”3”>
</textarea><br />
<input type=”text” onselect=”sec();” />
</form>
</body>
</html>
Textarea ve text elemanlar›n›n onSelect olaylar›na sec() fonksiyonu-

nu atad›m. Bu flu anlama gelmekte; Text ya da textarea içerisindeki me-
tinler seçilirse, sec() fonksiyonu çal›flacak ve “metni seçemezsiniz”
fleklinde hata mesaj›n› verecektir.
onRes›ze Olay›
Kullan›c› taray›c› penceresini resize etti¤inde bu olay gerçekleflir.
Örnek

<head>
charset=utf-8” />
function resize_event()
{
alert(“resize”);
}
</script>
</head>
<body onresize=”resize_event()”>
</body>
</html>
Kullan›c› taray›c› penceresinin boyutlar›n› de¤ifltirmek istedi¤inde onRe-

size olay› gerçekleflecek ve resize_event() isimli fonksiyon çal›fla-
cakt›r. Kullan›c› “resize” metnini içeren bir mesaj penceresi ile karfl›lafl›r.
onKeyDown Olay›
Kulan›c› bir eleman üzerinde klavyeden bir tufla bast›¤›nda ilk oluflan
olayd›r.
Örnek
104 JAVASCRIPT
<head>
charset=utf-8” />
function klavye_event()
{
alert(“Klavyeden bir tuşa basıldı”);
}
</script>
</head>
<body>
<form>
<input type=”text” onkeydown=”klavye_event()”/>
</form>
</body>
</html>
Örnek
Event nesnesinin keyCode özelli¤ini kullanarak kullan›c›n›n hangi tu-

fla bast›¤›n› bulal›m:

<head>
charset=utf-8” />
function klavye_event()
{
var a=event.keyCode;
var b=String.fromCharCode(a);
document.getElementById(“yaz”).innerHTML=b;
}
</script>
</head>
<body>
<form>
<input type=”text” onkeydown=”klavye_event()”/><br />
<div id=”yaz” style=”background-color:#CCC;”></div>
</form>
</body>
</html>
Event Nesnesi: Kullan›c›n›n hangi tufla bast›¤›na ya da ALT, SHIFT, CTRL

tufllar›na bas›l› olup olmad›¤›na ve birçok özelli¤e bu nesne ile ulaflmam›z
mümkündür. onKeyDown ve onKeyUp olaylar›nda event.keyCode özelli-
¤i hem büyük harfler için hemde küçük harfler için sadece büyük harf uni-
code de¤erini geriye döndürür.
Kullan›c› form içerisindeki text üzerinde klavyeden bir tufla bast›¤›nda

onKeyDown olay› oluflacak ve klavye_event() fonksiyonu çal›flacakt›r.
Fonksiyon içerisinde event.keyCode özelli¤i ile klavyeden girilen ka-
rakterin unicode de¤eri al›n›p a de¤iflkenine atanacak. Daha sonra
String.fromCharCode() yönetimiyle a de¤iflkeninin içindeki unicode
de¤erini karaktere çevirip b de¤iflkenine atad›k. innerHTML özelli¤i ile
div içerisine b de¤iflkeni içindeki harfi yazd›rarak ifllemi bitirmifl olduk.
NOT Yukar›da belirtti¤im gibi, on-

KeyDown olay›nda ister büyük
harf, ister küçük harf girin
event.keyCode özelli¤i büyük
harflerin unicode de¤erini üretir.
106 JAVASCRIPT
Örne¤in klavyeden küçük “a” girdi¤imizde event.keyCode özelli¤i 97

de¤erini üretmek yerine büyük “A” harfinin 65 unicode de¤erini üretti.
String. formCharCode() metodu bu durumda “A” de¤erini geriye
döndürdü¤ü için ekrana “A” yaz›ld›.
Örnek
‹sterseniz event anahtar sözcü¤ünü olaya karfl›l›k, çal›flacak fonksiyona

parametre olarak gönderebilirsiniz.
Örnek

<head>
charset=utf-8” />
function klavye_event(e)
{
var a=e.keyCode;
}
</script>
</head>
<body>
<form>
<input type=”text” onkeydown=”klavye_event(event)”/><br />
</form>
</body>
</html>
Form içerisindeki text metin kutusu üzerinde klavyeden herhangi bir tu-
fla bas›ld›¤›nda klavye_event(event) fonksiyonu çal›flt›r›l›yor. Fonk-
siyona event girdisi gönderildi¤inden e = event olacakt›r. Fonksiyon
içerisinde event deyimi e parametresi ile temsil edilecek.
onKeyPress Olay›
Kullan›c› bir tufla bast›¤›nda ya da bas›l› tuttu¤unda gerçekleflir. Bu olay
onKeyDown olay›ndan sonra gerçekleflir.
onKeyPress olay›nda event.keyCode özelli¤i hem büyük harflerin

hemde küçük harflerin unicode de¤erlerini döndürür.
Yukar›daki örne¤i onKeyPress olay› için deneyelim;
Örnek

<head>
charset=utf-8” />
function kypr(e)
{
var a=e.keyCode;
/* yaz isimli div içerisine innerHTML özelliği ile
b değişkeni içerisindeki değer yazdırılıyor.
*/
}
</script>
</head>
<body>
<form>
<input type=”text” onkeypress=”kypr(event)”/><br />
</form>
</body>
</html>
108 JAVASCRIPT
Çal›flt›ral›m
onKeyUp Olay›
Kullan›c› bas›l› olan bir tuflu b›rakt›¤›nda bu olay meydana gelir. Bu
olay di¤er klavye olaylar›ndan sonra gerçekleflir.
Afla¤›daki örnekte kullan›c› bir tufla bast›ktan sonra tuflu b›rakt›¤›nda

yazd›¤› harf, büyük harfe çevrilmekte:

<head>
charset=utf-8” />
function kyup()
{
var harf=document.getElementById(“txt1”).value;
// txt1 id’sine sahip metin kutusunun içeriği harf değişkenine atandı
document.getElementById(“txt1”).value=harf.toUpperCase();
// harf değişkeni içeriği büyük harfe çevrildi ve metin kutusuna
atandı
}
</script>
</head>
<body>
<form>
<input type=”text” id=”txt1” onkeyup=”kyup()”/>
</form>
</body>
</html>
onMouseDown Olay›
Bir nesne üzerinde farenin bir tufluna bas›ld›¤›nda bu olay gerçekleflir.
onMousemove Olay›
Fare iflaretçisi bir nesne üzerinde gezdirildi¤i zaman bu olay gerçekleflir.
onMouseout Olay›
Fare iflaretçisi bir nesne üzerinden ç›kt›¤› zaman bu olay gerçekleflir.
onMouseOver Olay›
Fare iflaretçisi bir nesne üzerine girdi¤i zaman bu olay gerçekleflir.
onMouseUp Olay›
Bir nesne üzerinde farenin bas›l› olan tuflu b›rak›ld›¤› zaman gerçekleflir.
Burada nesne sayfa ya da bir HTML eleman› olabilir. (Örne¤in link,

div.... vb)
Yukar›daki olaylarla ilgili örne¤imizi yapal›m:
Örne¤imizde bir resim için mouse olaylar›n› inceleyece¤iz. Sayfaya

yerlefltirdi¤imiz bir resim için bir olay›n kaç defa gerçekleflti¤ini gör-
müfl olaca¤›z.

<head>
charset=utf-8” />
<style>
div{color:red;}
.netin {
font-size: 14px;}
</style>
110 JAVASCRIPT
// bir olayın kaç defa gerçekleştiğini

// bulmak için aşağıdaki değişkenleri oluşturdum.
var sira1=1;
var sira2=1;
var sira3=1;
var sira4=1;
var sira5=1;
function m_down()
{
document.getElementById(“down”).innerHTML=sira1+” “+”mousedown”;
sira1++;
}
function m_move()
{
document.getElementById(“move”).innerHTML=sira2+” “+”mousemove”;
sira2++;
}
function m_out()
{
document.getElementById(“out”).innerHTML=sira3+” “+”mouseout”;
sira3++;
}
function m_over()
{
document.getElementById(“over”).innerHTML=sira4+” “+”mouseover”;
sira4++;
}
function m_up()
{
document.getElementById(“up”).innerHTML=sira5+” “+”mouseup”;
sira5++;
}
</script>
</head>
<body>
<table width=”272” border=”1” cellpadding=”0” cellspacing=”0”>
<tr>
<td height=”28” bgcolor=”#CCCCCC”><strong â
class=”netin”>Gerçekleşen Olaylar</strong></td>
<td height=”28” bgcolor=”#FFFFFF”></td>
</tr>
<tr>
<td width=”178” height=”146” >
<div id=”down”></div>
<div id=”move”></div>
<div id=”out”></div>
<div id=”over”></div>
<div id=”up”></div> </td>
<td width=”88”><img src=”resim.JPG”
width=”87”
onmousedown=”m_down();”
onmousemove=”m_move();”
onmouseout=”m_out();”
onmouseover=”m_over();”
onmouseup=”m_up();”
height=”144” /></td>
</tr>
</table>
</body>
</html>
Olaylar gerçekleflti¤i zaman olay adlar›n› ekrana yazmak için 5 tane div
oluflturduk ve bu div ler için id (kimlik) atamalar› yapt›k. Sa¤ tarafta
bulunan resme tüm mouse olaylar› için fonksiyonlar tan›mlad›k.
112 JAVASCRIPT
Bir fonksiyon ne kadar çal›flm›flsa fonksiyonu çal›flt›ran olay o kadar

oluflmufl demektir. ‹flte fonksiyonlar›n kaçar defa çal›flt›klar›n› bulmak
için her fonksiyonda kullan›lmak üzere 5 tane de¤iflken oluflturduk.
Fonksiyonlar çal›flt›kça bu de¤iflkenlerin de¤eri 1 artmakta ve fonksiyo-
nun kaç›nc› defa çal›flt›¤› (olay›n kaç›nc› defa oldu¤u) de¤iflkende sak-
lanmaktad›r.
Her olay olufltu¤unda kendisi için tan›mlanan fonksiyon çal›flacak ve

ekranda bu olay›n oldu¤unu yazmak için oluflturdu¤umuz div içerisine
innerHTML özelli¤i ile olay›n kaç›nc› defa çal›flt›¤› ve olay›n ad› yaz-
d›r›lacakt›r.
HATA DENET‹M‹
8
try-catch Hata
Yakalama Bloklar› 113
try-catch -finally Yap›s› 115
throw 116
‹leri programlama dillerinde oldu¤u gibi Javascript’te de çal›flma zama-

n›nda ortaya ç›kabilecek hatalar› tespit edebilirsiniz. Bu hatan›n nedeni
ya da çeflidine göre program ak›fl›n› de¤ifltirmeniz mümkün olacakt›r.
Kullan›c› web sayfas›n› görüntülerken herhangi bir hata ile karfl›lafl›r ise
bu durumda web sayfan›z› terk etmesi olas›d›r.
try-catch Hata
Yakalama Bloklar›
Muhtemel hata oluflabilecek kodlar try bloklar› aras›na yaz›l›r. E¤er
try bloklar› aras›ndaki kodlarda bir hata ile karfl›lafl›l›rsa, catch anah-
tar sözcü¤ünün alt›ndaki komut blo¤u çal›fl›r. Yani try bloklar› aras›na
yazd›¤›n›z kodlarda hata oluflur ise kodlar›n çal›flt›r›lmas› durdurulur ve
catch blo¤una yaz›lan kodlar iflletilir.
try
{
// Hata oluşabilecek Kodlar
}
114 JAVASCRIPT
catch(err)
{
// Hata olduğunda çalışacak Kodlar
}
try, catch anahtar sözcükleri küçük harf ile yaz›lmal›d›r. err paramet-
resiyle hata ile ilgili bilgilere ulaflabilirsiniz.
Basit bir uygulama yapal›m:
try
{
var a=b*3;
alert(a);
}
catch(err)
{
alert(“hata”);
}
</script>
Yukar›daki örne¤imize bakarsak: b de¤iflkeni formül içerisinde kulla-

n›lmas›na ra¤men tan›mlanmam›fl. Bu durumda bir hata oluflacakt›r.
try komut bloklar› aras›nda hata olufltu¤undan catch anahtar sözcü¤ün-
den sonraki komut blo¤u çal›flacak ve ekranda:
mesaj› görüntülenecektir.
Örnek
try
{
hesapla();
HATA DENET‹M‹ 115
document.write(“hesapla fonksiyonu çağrıldı”);}

catch(err)
{
alert(err.message+”\nHesapla fonksiyonu tanımlanmamış”);
}
</script>
try bloklar› aras›nda hesap() isimli bir fonksiyon ça¤r›lm›fl oysaki

böyle bir fonksiyon yok. Bu durumda catch bloklar› aras›ndaki kodlar
çal›flacakt›r. err.message ifadesi ile hata mesaj› al›nmaktad›r. Yani
message özelli¤i oluflan hata ile ilgili aç›klay›c› bir metin içerir.
try-catch -f›nally Yap›s›

Bu yap› try-catch yap›s›na benzemekle beraber, try komut blo¤unda
ister hata oluflsun ister oluflmas›n finally blo¤undaki kodlar çal›flacak-
t›r. Bu anahtar sözcü¤ünün kullan›lmas› iste¤e ba¤l›d›r. Bu anahtar söz-
cük kullan›l›rsa mutlaka catch blo¤undan sonra yaz›lmal›d›r.
try
{
// Hata oluşabilecek kodlar
}
catch(err)
{
// Hata oluştuğunda çalışacak kodlar
}
finally
{
// Hata oluşsada oluşmasada çalışacak kodlar
}
Örnek
try
{
var dizi1=new Array(“a”,”b”,”c”,”d”);
var sondizi=dizi1.concat(dizi2);
}
catch(err)
116 JAVASCRIPT
{
alert(err.message);
// sonuç:”dizi2 tanımlanmamış”
}
finally
{
alert(“Bu bloktaki kodlar her durumda çalışacak”);
}
</script>
Yukar›daki örne¤imizde dizi1 ile dizi2 içerisindeki de¤erleri birleflti-

rip sondizi isimli diziye atmak istiyoruz. Fakat dizi2 isimli bir dizi ol-
mad›¤›ndan try bloklar› aras›nda bir hata oluflacak ve s›ras›yla catch
ve finally bloklar› aras›ndaki kodlar çal›flacakt›r.
throw
Bu anahtar sözcü¤ünü kullanarak try blo¤u içinde kendimiz özel istis-
nai durumlar yani hata durumlar› oluflturabiliriz. Bu anahtar sözcük try
bloklar› içerisinde kullan›lmal›d›r.
Örnek
try
{
{
if(i==4)
{
throw(“i=4 hatası”);
alert(“Hata sonrası kodlar”);
}
}
}
catch(err)
{
alert(err)
}
</script>
HATA DENET‹M‹ 117
Sonuç
Yukar›daki örnekte try bloklar› aras›nda bir döngü oluflturulmufltur.

Döngüde i=4 oldu¤unda özel bir hata oluflturulmufl sonuçta try blo¤u
içerisinde hata meydana geldi¤inden kodlar›n çal›flt›r›lmas› durdurulur
ve catch blo¤undaki kodlar çal›flt›r›l›r. throw komutu iflletildikten son-
ra try blo¤undan ç›k›lacakt›r. throw deyiminden sonraki kodlar çal›flt›-
r›lmaz. throw(ifade) içerisine yazd›¤›n›z ifade catch(err) blo¤un-
daki err parametresine aktar›l›r.
Örnek
try
{
var hata=new Object();
hata.mesaj=”i=4”;
hata.uzunmesaj=”i değişkeninin değeri 4 olmuştur”;
{
if(i==4)
{
throw(hata);
alert(“Hata sonrası kodlar”);
}
}
}
catch(err)
{
document.write(err.mesaj+”<br>”);
document.write(err.uzunmesaj);
}
</script>
118 JAVASCRIPT
Yukar›daki örnekte hata isimli bir nesne oluflturulmufltur. i=4 oldu¤un-

da throw(hata) ifadesi ile hata isimli nesne err isimli parametreye
eflitlenmektedir. Bu durumda err parametresi mesaj ve uzunmesaj
özelliklerini içeren bir nesne olmufl olur.
Örnek
try
{
var sayi1=prompt(“sayi1 giriniz?”);
var sayi2=prompt(“sayi2 giriniz?”);
var hata=new Object();
hata.mesaj=”sonuç:0”;
hata.uzunmesaj=”Çarpanlardan biri yada ikisi 0 değerini almış”;
if(sayi1==0||sayi2==0)
{
throw(hata);
}
alert(“Çarpım Sonucu \n”+sayi1*sayi2);
}
catch(err)
{
alert(err.mesaj+”\n”+err.uzunmesaj);
}
</script>
Yukar›daki örne¤imizde kullan›c›dan iki tane say› isteniliyor ve kulla-

n›c› bunlardan birini ya da her ikisini 0 girdi¤inde try blo¤unda istisnai
bir durum yani hata oluflturuluyor. Ve hata isimli nesne err paramet-
resine atanarak hata mesajlar› kullan›c›ya gösteriliyor.
JAVASCRIPT
9
NESNELER‹
Javascript Nesnesi Yaratmak 120 Javascript Haz›r Nesneler 125
Nesne (Object) Yaratmak 120 String Nesnesi 125
Oluflturdu¤umuz Nesnelere Array Nesnesi 126
Özellik Eklemek 121 Boolean Nesnesi 126
Oluflturdu¤umuz Nesnelere Date Nesnesi 127
Metod (Fonksiyon) Eklemek 123
Number Nesnesi 134
Math Nesnesi 136
Javascript tam anlam›yla nesne yönelimli programlama yapabilece¤i-

miz bir dil olmamakla beraber içerisinde önceden tan›ml› nesneler ba-
r›nd›r›r ve nesne oluflturmam›za izin verir. Daha önceden gördü¤ümüz
diziler, fonksiyonlar... vb nesnelere örnek olarak verilebilir.
Nesne yönelimli programlamada s›n›f, nesne yap›lar›n›n anlafl›lmas› ge-

rekir. S›n›f (class) özel oluflturulmufl veri türü olarak düflünebilirsiniz.
S›n›flar içerisinde o s›n›fa ait özellikler, ki biz bunlara de¤iflken diyebi-

liriz ve yine o s›n›fa ait metodlar (yöntemler) bulunur. Nesne (object)
ise kendimizin oluflturdu¤u bu veri türüne sahip de¤iflkenler olarak ka-
bul edebiliriz. Oluflturdu¤umuz bu nesne s›n›ftaki tüm özelliklere ve
metodlara sahip olacakt›r.
Örne¤in araba kelimesi bir s›n›ft›r ve araba s›n›f›n›n ortak özellikleri

vard›r. Modeli ne olursa olsun araban›n motor özellikleri, kaporta özel-
likleri, lastik özellikleri vard›r. Bu ortak özellikler s›n›f yap›s›n›n özel-
liklerine benzemektedir. Ayr›ca araba s›n›f›n›n metodlar› vard›r. Örne-
¤in; her araban›n kap›s› aç›labilir.
120 JAVASCRIPT
Nesnelere örnek olarak bir araba firmas›n›n üretti¤i araba bir nesne, di-
¤er araba firmas›n›n üretti¤i araba di¤er nesne olarak adland›r›labilir.
Ama bu iki nesnede araba s›n›f›n›n ortak özelliklerini ve metodlar›n›
kullanacakt›r.
Nesnelerin özellik ve metodlar›na eriflmek için . operatörü kullan›l›r.

Nesneadı. özellik
Özellik asl›nda nesne ile ilgili bilgileri tafl›yan birer de¤iflkenden baflka
bir fley de¤ildir.
Nesneadı.Metod()
Metodlar›n asl›nda o nesne özelliklerini kullanarak ifllem yapan birer

fonksiyon oldu¤unu unutmayal›m.
Javascr›pt Nesnesi Yaratmak

Javascript’te var olan nesnelerden örnek oluflturmak için afla¤›daki ta-
n›mlama kullan›l›r.
nesneadi=new Javascriptnesnesi(parametreler);
Örne¤in;
var my_dizi=new Array(1,2,3);
Nesne (Object) Yaratmak

Javascript’te nesneler bafllang›ç fonksiyonu ad› verilen bir fonksiyon-
la oluflturulur. Bafllang›ç fonksiyonu ad› nesne ad› olmal›d›r. Nesnenin
özellik ve metodlar› bu fonksiyon içerisinde tan›mlanacakt›r.
Hemen dikdörtgen isimli bir nesne oluflturarak konunun daha iyi an-
lafl›lmas›n› sa¤layal›m. Dikdörtgen nesnesinin en ve boy özellikleri bu-
lunur. Bu nesneyi oluflturmak için ilk önce bafllang›ç fonksiyonunu
oluflturmam gerekecek.
function dikdörtgen(en,boy)
{
this.en=en;
javascr›pt nesneleri 121
this.boy=boy;
}
Dikkat edilirse bafllang›ç fonksiyonu ad› nesne ad›na eflit yani dikdört-
gen, bu fonksiyon d›flar›dan iki tane parametre almakta bu parametreler
nesneye özellik olarak atanmaktad›r.
Burada this kelimesi sadece bafllang›ç fonksiyonunda kullan›lmakla

beraber oluflturulan nesnenin kendisini temsil eder.
Nesnemizi oluflturduktan sonra art›k bu nesne tipinde bir de¤iflken ta-

n›mlayal›m, yani nesnenin örne¤ini yaratal›m.
var d1=new dikdörtgen(12,12);
Yukar›da nesne tipinde bir de¤iflken tan›mlad›k yani nesnenin örne¤ini

oluflturduk ve ayn› zamanda özelliklerini parametre olarak gönderdik.
Art›k d1.en=12, d1.boy=12 olacakt›r.
Nesne ile ilgili özellikleri art›k kullanabilirim.

document.write(“d1 isimli dikdörtgenin alanı=”+d1.en*d1.boy);
// sonuç:144
Oluflturdu¤umuz Nesnelere
Özellik Eklemek
Yukar›da anlat›ld›¤› gibi nesnelere özellikler bafllang›ç fonksiyonu ile
atan›r. Örne¤in grafders isimli bir nesne olufltural›m. Burada bu dersin 3
s›nav› oldu¤unu düflünürsek y1, y2, y3 özellikleri olaca¤›n› varsayal›m.
Özelliklerin önüne this kelimesi konularak bafllang›ç fonksiyonunu ta-

n›mlayal›m.
function grafders(y1,y2,y3)
{
this.y1=y1;
this.y2=y2;
this.y3=y3;
}
122 JAVASCRIPT
Dikkat edilirse grafders isimli nesneye (ayn› zamanda bafllang›ç fonk-

siyonu ad›) üç tane özellik eklenmifl. “Peki özelliklere nas›l de¤er ata-
yaca¤›z?” derseniz. Nesne bir fonksiyondan olufltu¤una göre bu özellik-
leri nesne örne¤i olufltururken d›flar›dan gönderebiliriz.
var ogr1=new grafders(12,56,67);
Burada ogr1 isimli bir grafders nesnesi oluflturulmufl ve özellikler

fonksiyona parametre olarak gönderilmifl. ‹kinci bir yöntem de fonksi-
yona parametre olarak göndermek yerine bulundu¤unuz sat›rdan nesne
özelliklerine de¤er girebilirsiniz.
var ogr1=new grafders();

/*
ogr1 isimli bir nesne oluşturdum
ogr1 nesnesi grafders nesnesinden türetildiğinden
bu nesnenin tüm özelliklerine sahip oldu
*/
ogr1.y1=23;
ogr1.y2=78;
ogr1.y3=68;
Afla¤›daki örne¤i inceleyin;

{
this.en=en;
this.boy=boy;
}
d1.renk=”mavi”;
document.write(d1.renk);
// sonuç:mavi
</script>
Dikdörtgen isimli bir nesne oluflturdum ve bu nesneye en, boy özellik-

lerini atad›m. Hemen alt›nda d1 isimli bir de¤iflkeni dikdörtgen nesnesi
olarak tan›mlad›m. d1 nesnesi oluflturuldu¤unda dikdörtgen nesnesinin
tüm özelliklerine sahip olacakt›r. Dikdörtgen nesnesinin en ve boy özel-
likleri d›fl›nda baflka özelli¤i bulunmamakta. Buna ra¤men ben d›flar›dan

(nesne tan›mlad›¤›m›z fonksiyon d›fl›ndan) d1 nesnesine renk isimli bir
özellik ekleyebilirim. Bu özellik sadece d1 nesnesi için tan›mlanm›flt›r.
Örnek
{
this.en=en;
this.boy=boy;
}
d1.renk=”mavi”;
document.write(d1.renk);
// sonuç:mavi
</script>
Örne¤in d1, d2 nesneleri dikdörtgen nesnesinden türetilmifltir. Renk

isimli özellik sadece d1 nesnesi için kullan›labilir. d2 isimli nesnenin
renk özelli¤i bulunmamaktad›r.
Oluflturdu¤umuz Nesnelere
Metod (Fonksiyon) Eklemek
Bir nesne için metod asl›nda nesne özelliklerini kullanarak ifllem yapan
fonksiyonlardan baflka bir fley olmayacakt›r.
Dikdörtgen nesnesinin özellikleri en, boy olarak belirlemifltik. Dikdört-

gen nesnesinin alan›n› bulmak istersek bir ifllem gerçeklefltirmemiz ge-
rekecek.
Örnek
{
this.en=en;
this.boy=boy;
124 JAVASCRIPT
}
var d1=new dikdörtgen();
d1.en=23;
d1.boy=2;
document.write(“d1 alanı =” + d1.en*d1.boy);
</script>
Ekrana 46 rakam›n› yazd›rm›fl olduk. Bu ifllemi dikdörtgen nesnesinin

bir metodu olarak tan›mlayabilirdik.
{
this.en=en;
this.boy=boy;
this.alan=function alan(){
return this.en*this.boy;
}
}
d1.en=23;
d1.boy=2;
document.write(“d1 alanı =” +d1.alan());
</script>
Yukar›da görüldü¤ü gibi en, boy dikdörtgen isimli nesnenin özellikleri,

alan ise bu nesnenin metodudur.
Örnek
// başlangıç (yapıcı) fonksiyon
{
this.en=en;
this.boy=boy;
}
// d1,d2 nesneleri dikdörtgen nesnesinden türetilmiştir.
d1.alan=function alan(){
return this.en*this.boy;
}
// sadece d1 nesnesi için geçerli olacak alan() metodu
tanımlanmıştır
d1.en=23;
d1.boy=2;
document.write(“d1 alanı =” +d1.alan());

</script>
Dikkat edilirse burada d1 nesnesi için özel yani sadece d1 nesnesi için
çal›flacak bir metodu bafllang›ç fonksiyonu d›fl›nda tan›mlad›k. Dikdört-
gen nesnesinden türetilen di¤er nesneler d1 için tan›mlad›¤›m alan()
isimli bu metodu kullanamazlar.
Javascr›pt Haz›r Nesneler

Javascript’te haz›r olan nesneleri kullanabilirsiniz. Asl›nda nesneleri
ikiye ay›rmak mümkündür. Taray›c› nesneleri ve Javascript’in kendi
içerisinde baz› ifllemleri yerine getirmek için kullan›lan nesneler.
Javascript nesneleri flunlard›r:
Str›ng Nesnesi
Javascript’te string veri türünde bir de¤iflken oluflturdu¤unuzda bu de-
¤iflken asl›nda string nesnesinden türetilmifl bir nesne olur. String nes-
nesinin tüm özellik ve metodlar› kullan›labilir.
Str›ng Nesnesinin Metodlar›

fromCharCode(): Kendisine verilen unicode de¤eri karaktere çevirir.
document.write(String.fromCharCode(65));
// sonuç: A
Ayr›ca birden fazla de¤er için kullanabilirsiniz.

document.write(String.fromCharCode(97,65,100));
// sonuç: aAd
Di¤er string metodlar› String Metodlar› k›sm›nda anlat›lm›flt›r.

126 JAVASCRIPT
Array Nesnesi
Dizi tan›mlarken asl›nda Javascript’te var olan Array nesnesinden bir
örnek oluflturmufl oluruz. Array nesnesinin tüm özellik ve metodlar›n›
yeni oluflturdu¤umuz dizide kullanmam›z mümkündür. Array nesnesi
ile ilgili özellik ve metodlar› Diziler konusunda incelemifltik.
Boolean Nesnesi
Javascript’te boolean veri türünde bir de¤iflken oluflturmuflsan›z, bu de-
¤iflken asl›nda boolean nesnesinden türetilmifl demektir. Yani boolean
nesnesinin tüm özellik ve metodlar›n› kullanabilirsiniz.
Boolean veri türünde de¤iflkenler sadece mant›ksal iki de¤er saklayabi-

liyorlard›. Bu de¤erler true ya da false de¤erleri olabilir.
Afla¤›daki ilk tan›mlamada a isimli bir de¤iflken boolean veri türünde

oluflturuldu¤undan a de¤iflkeni boolean nesnesinin bir örne¤i olacakt›r.
Boolean nesnesinin tüm özellik ve metodlar› a de¤iflkeni için kullan›-
labilir.
new anahtar sözcü¤ünü kullanmasakta a de¤iflkeni boolean nesnesinin

bir örne¤i olacakt›r.
var a=true;
document.write(a);
// sonuç:true
new anahtar sözcü¤ünü kullanarak tan›mlama yap›p a de¤iflkenin ald›¤›

de¤eri parantezler içerisine yazabiliriz.
var a=new Boolean(true);
document.write(a);
// sonuç:true
Boolean Nesnesi Özellikleri

Prototype: Nesneye ek olarak özellik ve yöntem eklemek için kullan›l›r.
Constructor: Oluflturulan de¤iflkenin hangi nesneden türetildi¤ini bul-

mak için kullan›l›r.
var a=true;
if(a.constructor==Boolean)
{
alert(“Boolean nesnesi”);
}
if(a.constructor==String)
{
alert(“String nesnesi”);
}
if(a.constructor==Date)
{
alert(“Date nesnesi”);
}
a de¤iflkeni boolean nesnesinden türetildi¤inden ilk if blo¤u çal›flacak

ve ekranda “Boolean nesnesi” yazacakt›r.
Boolean Nesnesi Metodlar›

toString(): Mant›ksal de¤eri string olarak verir. true ya da false
valueOf(): Boolean nesnesinin ald›¤› mant›ksal de¤eri döndürür.
Date Nesnesi
Javascript’te tarih ve zamanla ilgili ifllemler yapmak için kullan›l›r.
document.write(Date());
// Bilgisayara ait bu günün tarih ve saat bilgisini döndürür.
Sat Apr 25 21:36:26 2009
Date Nesnesinin Önemli Metodlar›

E¤er tarih isimli bir Date nesnesi oluflturursam bu nesneye otomatik
olarak bu günün tarih ve saat bilgisi atanacakt›r. ‹stersek oluflturdu¤u-
muz bu tarih ve saat bilgisini özellefltirebiliriz.
getDate(): Tarih nesnesinin içerdi¤i tarihe ait gün bilgisini verir.
var tarih=new Date();

document.write(tarih.getDate());
128 JAVASCRIPT
getDay(): Tarih nesnesinin içerdi¤i tarihe ait haftan›n günü bilgisini

verir.
document.write(tarih.getDay());
Burada flunu belirtelim. Pazar günü için getDay()=0 de¤erini gönde-

rir.Yani haftan›n bafllang›ç günü Pazar ve de¤eri 0’d›r.
Örnek
Hangi günde oldu¤umuzu Türkçe metin olarak ekrana yazd›ral›m;
gunler[0]=”Pazar”;
gunler[1]=”Pazartesi”;
gunler[2]=”Salı”;
gunler[3]=”Çarşamba”;
gunler[4]=”Perşembe”;
gunler[5]=”Cuma”;
gunler[6]=”Cumartesi”;
/*
oluşturduğum gunler dizisinde türkçe gün isimleri var
pazar metninin dizi içerisindeki indeks
numarası 0 olacaktır.
*/
document.write(gunler[tarih.getDay()]);
</script>
tarih.getDay() Haftan›n günü bilgisini geriye döndürecektir.Bu du-

rumda e¤er 0 döndürürse Pazar gününe karfl›l›k gelir. E¤er ben tarih
nesnesi ile ilgili haftan›n günü bilgisini gunler dizisi elemanlar›na ulafl-
mak için indeks numaras› olarak kullan›rsam,
Örne¤in bugün cumartesi;
tarih.getDay()=6 olacakt›r. gunler[6] ifadesi sayfaya yazd›r›lmak

istendi¤inden sayfaya Cumartesi yazd›r›lm›fl olur.
getFullYear(): Tarih nesnesinin içerdi¤i tarihe ait y›l bilgisini verir.

document.write(tarih.getFullYear());
getHours(): Tarih nesnesinin içerdi¤i saat bilgisine ait, saat bilgisini

verir.
document.write(tarih.getHours());
getMinutes():Tarih nesnesinin içerdi¤i saat bilgisine ait, dakika bilgi-

sini verir.
document.write(tarih.getMinutes());
getMonth():Tarih nesnesinin içerdi¤i tarih bilgisine ait olan ay bilgisini

verir.
document.write(tarih.getMonth());
// Sonuç: 4 (Nisan ayı)
Ocak ay› için getMonth() metodu 0 de¤eri döndürecektir. Bu de¤er di-

¤er aylar için ard›fl›k olarak devam eder ve Aral›k ay› için 11 de¤erini
gönderir.
Örnek
Y›l, ay, gün, saat ve dakika bilgilerini Türkçe metin olmak kayd›yla
sayfaya yazd›ral›m:
// Date() nesnesi oluşturalım
// aylar isimli dizi oluşturalım
var aylar=new Array();
aylar[0]=”Ocak”;
aylar[1]=”Şubat”;
aylar[2]=”Mart”;
aylar[3]=”Nisan”;
130 JAVASCRIPT
aylar[4]=”Mayıs”;
aylar[5]=”Haziran”;
aylar[6]=”Temmuz”;
aylar[7]=”Ağustos”;
aylar[8]=”Eylül”;
aylar[9]=”Ekim”;
aylar[10]=”Kasım”;
aylar[11]=”Aralık”;
// gunler isimli bir dizi oluşturalım
gunler[0]=”Pazar”;
gunler[1]=”Pazartesi”;
gunler[2]=”Salı”;
gunler[3]=”Çarşamba”;
gunler[4]=”Perşembe”;
gunler[5]=”Cuma”;
gunler[6]=”Cumartesi”;
document.write(“Bugün : “ + aylar[tarih.getMonth()] + “ “ +
tarih.getFullYear() + “ / “ + gunler [tarih.get-
Day()]+”<br>” );
document.write(“Saat “ + “ “ + tarih.getHours() + “:” +
tarih.getMinutes());
</script>
Sonuç
Bugün : May›s 2009 / Cumartesi
Saat: 12:25
aylar isimli bir dizi oluflturdum ve bu dizi içerisinde Türkçe ay bilgile-

ri bulunuyor.
‹lk ay olan Ocak için getMonth() metodu 0 de¤erini döndürecektir.Di-

¤er aylar için 1, 2, 3... ve en son ay olan Aral›k için 11 de¤erini döndü-
recektir.Bu bilgi ›fl›¤›nda dizi içerisindeki, aylar elemanlar›n› s›ralad›m.
E¤er May›s ay›nda isek bu durumda tarih.getMonth() metodu 4 de¤e-

rini döndürecektir. aylar[tarih.getMonth()] ifadesi aylar[4] flek-
linde olacakt›r. Bu dizinin 4 indeks numaral› eleman› May›s olacakt›r.
Örne¤in haziran ay›nda olsayd›k bu durumda tarih.getMonth() me-

todu 5 de¤erini döndürecekti ve aylar[tarih.getMonth()] ifadesi

aylar[5] fleklinde olacakt›. Sonuçta sayfaya “Haziran” yazd›r›lacakt›.
Tarih nesnesinin içerdi¤i saate ait saniye bilgisini verir.

document.write(tarih.getSeconds());
NOT UTC (Universal Coordinated Time) Evrensel saat koordinat› bir zaman
standart›d›r. Javascript’te bu zaman standart›n› kullanabilirsiniz.
Tarih ve Saati özellefltirmek: Yukar›da bahsedildi¤i gibi e¤er bir Da-

te nesnesi oluflturmufl iseniz bu nesneye otomatik olarak bugünün tarih
ve saati atanacakt›r. Bazen baflka tarihlerle ifllem yapmak gerekebilir.
Bu durumda nesnemize atanan bu günün tarih ve saatini de¤ifltirmek is-
teyebilirsiniz. ‹flte bu özellefltirme olacakt›r.
Nesne olufltururken y›l, ay, gün bilgilerini belirtebilirsiniz.

var tarih=new Date(2003,11,12);
alert(tarih.toLocaleDateString());
y›l, ay, gün, saat, dakika, saniye ve milisaniye belirterek Date nesnesi
oluflturabilirsiniz. Bilgilerin yaz›l›fl s›ras› afla¤›da verilmifltir.
var nesneadı = new Date(year,month,date,hour,min,sec,ms)
Di¤er ketodlar› kullanarak tarih ve saati özellefltirmeye devam edelim.
setDate(): Tarih isimli Date nesnesinin içerdi¤i tarihe ait gün bilgisi-
ni ayarlamaya yarar.

tarih.setDate(21);
/*
tarih isimli Date nesnesinin içerdiği
tarihe ait gün bilgisi 21 olarak değiştirildi.
*/
document.write(tarih.getDate());
132 JAVASCRIPT
setFullYear(): Tarih isimli Date nesnesinin içerdi¤i tarihe ait y›l, ay,
gün bilgilerini ayarlamaya yarar.
tarih.setFullYear(1999,11,12);
/*
tarihe ait yıl,ay,gün bilgileri değiştirildi
*/
document.write(tarih);
Sonuç
Sun Dec 12 1999 12:53:18 GMT+0200 (GTB Standart Saati)
setFullYear(yıl bilgisi, ay bilgisi, gün bilgisi) s›ras›yla de-

¤erler girilmelidir. Unutulmamas› gereken ay bilgisi 0-11 aral›¤›nda ol-
mal›d›r.
setHours(): Tarih isimli Date nesnesinin içerdi¤i saate ait olan saat,
dakika, saniye bilgilerini ayarlamaya yarar.
tarih.setHours(15,43,43);
/*
saat bilgisine ait olan saat,dakika,saniye bilgilerini
değiştirebiliriz
*/
Sonuç
Sun May 16 2009 15:43:43 GMT+0300 (GTB Standart Saati)
setHours(saat, dakika, saniye, ms) s›ras›yla de¤erler girilmelidir.
setYear(): Tarih isimli Date nesnesinin içerdi¤i tarihin y›l bilgisini
ayarlamaya yarar.
tarih.setYear(2005);
Sonuç
Mon May 16 2005 13:01:41 GMT+0300 (GTB Standart Saati)
setMonth(): Tarih isimli Date nesnesinin içerdi¤i tarihe ait ay,gün bil-
gilerini ayarlamaya yarar.
tarih.setMonth(11,12);
setMonth(ay,gün) s›ras›yla yaz›lmal›d›r.
setMinutes(): Tarih isimli Date nesnesinin içerdi¤i saatin dakika, sa-

niye, milisaniye bilgilerini ayarlamaya yarar.
tarih.setMinutes(43,12);
Sonuç
Sat May 16 2009 14:43:12 GMT+0300 (GTB Standart Saati)
setMinutes(dakika,saniye,ms) s›ras›yla de¤erler girilmelidir.
toLocaleDateString()
document.write(tarih.toLocaleDateString());
// tarih Date nesnesinin içerdiği tarihi string
// veri tütünde özet olarak döndürür.
Sonuç
Saturday, May 16 2009
toLocaleTimeString()
document.write(tarih.toLocaleTimeString());
// tarih Date nesnesinin içerdiği saati string
// veri türünde özet olarak döndürür.
Sonuç
13:08:58
134 JAVASCRIPT
toString()
document.write(tarih.toString());
// tarih Date nesnesinin içerdiği tarih/saati string
// veri tütünde özet olarak döndürür.
Sonuç
Sat May 16 2009 13:15:29 GMT+0300 (GTB Standart Saati)
Number Nesnesi
Javascript’te number veri türüne sahip bir de¤iflken oluflturdu¤unuzda
bu de¤iflken Number nesnesinden türetilmifl bir nesne olacakt›r.
Number Nesnesi Özellikleri
Özellik Aç›klama
constructor Nesnesin hangi nesneden türetildi¤ini verir.
MAX_VALUE Javascript’te bir number de¤iflkene atanabilecek
pozitif en büyük say›.
MIN_VALUE Javascript’te number bir de¤iflkene atanabilecek
negatif en küçük say›.
NaN Not a Number
NEGATIVE_INFINITY MIN_VALUE de¤erinden küçük say›lar› temsil eder.
POSITIVE_INFINITY MAX_VALUE de¤erinden büyük say›lar› temsil eder.
prototype Özellik, metod eklemek için kullan›l›r.
Yukar›da anlat›lan özelliklerden constructor, prototype özellikleri

d›fl›ndaki özellikler sadece Number nesnesinin kendisi için tan›ml›d›r.
Örnek
document.write(Number.MAX_VALUE);
</script>
Javascript’te number veri türündeki bir de¤iflken pozitif olarak afla¤›-

daki de¤erden daha büyük bir de¤er alamaz:
1.7976931348623157e+308
Örnek
document.write(Number.MIN_VALUE);
</script>
Javascript’te number veri türüne sahip bir de¤iflken negatif olarak afla-
¤›daki say›dan daha küçük bir de¤er alamaz.
5e-324
Örnek
var say=2*(Number.MAX_VALUE);
if(say==Number.POSITIVE_INFINITY)
{
alert(“say değişkeni;\nKullanılabilir pozitif değerden büyük”);
}
</script>
Veri türü number olan say de¤iflkenine atayabilece¤imiz en büyük po-

zitif de¤er Number.MAX_VALUE de¤eridir. E¤er say de¤iflkenine atanan
de¤er bu de¤erden büyük ise bu durumda say de¤iflkeninin içeri¤i Num-
ber.POSITIVE_INFINITY olacakt›r.
Number Nesnesi Metodlar›
Metod Aç›klama
toFixed() Ondal›kl› say›larda kullan›l›r. Virgülden sonra kaç karakter
gösterilece¤i ayarlan›r.
toPrecision() Ondal›kl› say›larda toplam basamak say›s›n› ayarlamak için
kullan›l›r. (.) nokta hariç
toString() De¤iflkenin de¤erini string olarak döndürür.
valueOf() De¤iflkenin de¤erini geriye döndürür.
136 JAVASCRIPT
Örnek 1
var num=10.32424;
alert(num.toFixed(2));
// sonuç:10.32
</script>
Örnek 2
var num=10.32424;
alert(num.toPrecision(3));
// sonuç:10.3
</script
Math Nesnesi
Javascriptin matematiksel ifllemleri yapmak için kullan›lan nesnesidir.
Sabit Özellikler Aç›klama

E E sabit de¤erini geriye döndürür. (E= 2.718)
PI PI de¤erini geriye döndürür. (3.14159)
LN2, LN10,LOG2E,LOG10E Belirlenen sabit de¤erleri geriye döndürür.
SQRT1_2 1 say›s›n›n karekökü
SQRT2 2 say›s›n›n karekökü
Math Nesnesi Metodlar›
Metod Aç›klama
abs(x) x’in mutlak de¤erini döndürür.
Örnek
var say=Math.abs(-12);
document.write(say);
// sonuç:12
</script>
Metod Aç›klama
acos(x) -1, +1 aras›nda bir say› girilebilir.
asin(x) Girilen de¤erin radyan karfl›l›¤›n› verir.
atan(x)
ceil(x) x kesirli say›s›n› yuvarlamak için kullan›l›r.
Girilen de¤eri kendisinden bir büyük tamsay›ya
yuvarlamak için kullan›l›r.
Örnek
var say=Math.ceil(12.40);
var say_1=Math.ceil(-12.40);
document.write(say +”|”+ say_1);
// sonuç:13|-12
</script>
cos(x) x say›s›n›n belirlenen aç› de¤erlerini
sin(x) radyan olarak döndürür.
tan(x)
exp(x) EX de¤erini geriye döndürür. E= 2.718

Örnek
var say=Math.exp(0);
// sonuç:2.718 sayısının 0.kuvveti
1 olacaktır.
</script>
floor(x) Girilen kesirli de¤erin tamsay› k›sm›n› geriye

döndürür.Negatif say›larda say›y› kendinden
bir önceki enbüyük tamsay›ya yuvarlar.
Örnek
var say=Math.floor(12.9444);
// sonuç:12
var say=Math.floor(-12.0444);
// sonuç:-13
</script>
138 JAVASCRIPT
Metod Aç›klama
log(x) Girilen say›n›n 10 taban›nda logaritmas›n› al›r.
max(x,y) Girilen 2 de¤erden büyük olan› döndürür.
Örnek
var say=Math.max(12,2);
// sonuç:12
</script>
min(x,y) Girilen 2 de¤erden küçük olan› geriye döndürür.

Örnek
var say=Math.min(12,2);
// sonuç:2
</script>
pow(x,y) X say›s›n›n y. kuvvetini bulur. xy

Örnek
var say=Math.pow(2,3);
// sonuç:8
</script>
random() 0 ile 1 aras›nda rastgele bir say›

üretmek için kullan›l›r.
Örnek
<!DOCTYPE html PUBLIC “-//W3C//DTD â
XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/ â
xhtml1-transitional.dtd”>
<head>
<meta http-equiv=”Content-Type” â
content=”text/html; charset=utf-8” />
var t;
function degis()
{
var say1=Math.random();
document.getElementById(“yaz”). â
innerHTML=say1;
t=setTimeout(“degis()”,1000);
}
</script>
</head>
<body onload=”degis()”>
<div id=”yaz” style=” â
background-color:#FFC; â
visibility:visible; width:150px; â
height:25px”></div>
</body>
</html>
Sayfa yüklendi¤inde (0 ile 1) aras›nda

sürekli de¤iflen bir say› üretilir ve bu say›
div içerisine yaz›l›r.
round(x) Girilen say›y› yuvarlamak için kullan›l›r.

Örnek
var a=Math.round(12.44);
document.write(a);
// sonuç:12
</script>
Pozitif say›larda e¤er virgülden sonraki

say› 0.5 de¤erinden büyük ise bir üst say›ya
yuvarlayacakt›r. E¤er virgülden sonraki say›
0.5 de¤erinden küçük ise bir alt say›ya yuvarlar
Örnek
var a=Math.round(-12.55);
document.write(a);
// sonuç:-13
</script>
140 JAVASCRIPT
Negatif say›larda ondal›kl› k›s›m

-0.5’ten büyükse bir küçük tam say›ya,
-0.5’ten küçükse bir büyük negatif
tam say›ya yuvarlar.
sqrt(x) Girilen de¤erin karekökünü al›r.

Örnek
var a=Math.sqrt(9);
document.write(a);
// sonuç:3
</script>
valueOf() De¤iflkenin de¤erini geriye döndürür.
Örnek
Javascript ile güvenlik resmi oluflturma, güvenlik resmi form ele-
manlar›na girifl yap›l›rken giriflin bir kullan›c› (insan) taraf›ndan yap›l-
mas›n› sa¤lar.
Yani kullan›c› resim içerisindeki yaz›y› metin kutusuna girmek zorun-
dad›r. Bunu herhangi bir program yapamaz.

<head>
charset=utf-8” />
<style type=”text/css”>
div
{
visibility:visible;
width:130px;
background-color:#CCC;
font-size:30px;
color:#00f;
}
</style>
function degis()
{
var str=””;
/*
üreteceğim 6 basamaklı karakter gurubunu saklamak için
str isimli bir değişken oluşturdum ve ilk anda içi boş.
*/
{
// 6 adet rasgele karakter üreteceğimden döngü oluşturdum
var say=Math.random();
// döngü her çalıştığında rasgele bir sayı
// üretilecek ve bu sayı say isimli değişkene atanacak
if(Math.round(say)==0)
{
str=str+String.fromCharCode(48+9*Math.random());
}else{
str=str+String.fromCharCode(65+25*Math.random());
}
}
document.getElementById(“yaz”).innerHTML=str;
// str değişkeni içerisindeki karakter gurubu(6 adet karakter)
div içerisine yazıldı
}
</script>
</head>
<body >
<div id=”yaz”></div><br />
<input type=”button” value=”değiştir” onclick=”degis()” />
</body>
</html>
142 JAVASCRIPT
Butona her t›kland›¤›nda güvenlik resmi de¤iflecektir.
Butona t›kland›¤›nda degis() isimli fonksiyon çal›flacak. Sonuçta 6

adet karakterden oluflan bir string üretmemiz gerekecek. Bu stringi str
isimli bir de¤iflken içerisinde saklayaca¤›z.
6 adet karakter üretece¤imden bir döngü oluflturup bu döngü içerisinde-

ki komutlar›n 6 defa tekrarlanmas›n› sa¤lamam gerekecek. Döngü içe-
risinde say isimli bir de¤iflken oluflturdum ve bu de¤iflkene Math.ran-
dom() metodunu kullanarak 0-1 aras›nda rastgele bir say› atad›m. Bunu
döngü içerisinde yapmam›z›n nedeni döngü her çal›flt›¤›nda say içeri-
sindeki de¤erin de¤iflmesi içindir.
Daha sonra bir koflul ifadesi kullanarak daha önceden oluflturdu¤um say
isimli de¤iflkeni Math.round() ile yuvarlay›p (yuvarlama sonucu 0 ya
da 1 olabilir) oluflan bu de¤erin 0’a eflit olup olmad›¤›n› kontrol ettim.
E¤er bu de¤er 0’a eflit ise say›sal bir karakter, de¤ilse büyük harf flek-
linde bir karakter üretilecektir.
String.fromCharCode() metodunun içerisine yazd›¤›m›z unicode de-

¤erin karakter karfl›l›¤›n› alabiliriz.Biz burada ascii kod karfl›l›klar› olan
karakterleri kullanaca¤›z. Türkçe karakterleri kullanmayaca¤›z. Bu me-
tod ile ascii kodlar›n karakter karfl›l›klar›n› alabiliriz.
48-57 aras› ascii kodlar à 0-9 aras›ndaki say›lar

65-90 aras› ascii kodlar à A-Z (büyük harfler)
oldu¤unu biliyoruz.
à Math.round(say) deyimi geriye 0 de¤erini döndürürse bu durumda

if koflul yap›s› içerisindeki komut çal›flacak.
String.fromCharCode(48+9*Math.random())
Bu ifadede Math.random() 0 de¤erini ald›¤›nda:

String.fromCharCode(48) à ifadesi geriye 0 de¤erini döndürür.
Bu ifadede Math.random(), 1 de¤erini ald›¤›nda:

String.fromCharCode(48+9) à ifadesi geriye 9 döndürür.
Bu durumda str isimli string de¤iflkene 0-9 aras›nda bir rakam eklen-
mifl olur.
à Math.round(say) deyimi geriye 1 de¤erini döndürürse bu sefer el-
se alt›ndaki komutlar çal›flacak ve:
String.fromCharCode(65+25*Math.random())
String.fromCharCode(65) à ifadesi geriye “A” döndürür.
String.fromCharCode(65+25) à ifadesi geriye “Z” döndürür.
Bu durumda str isimli string de¤iflkene A-Z aras›nda bir karakter ek-
lenmifl olur. Sonuçta döngü 6 defa tekrarlanaca¤›ndan 6 adet say› yada
büyük harf içeren karakter elde edilmifl olur. Elde edilen bu de¤er div
içerisine yazd›r›l›r.
144 JAVASCRIPT
DÜZENL‹
10
‹FADELER
(RegExp NESNES‹)
RegExp Nesnesi Olufltural›m 146 Nesne Metodlar› 152
Nesne Özellikleri 147 Düzenli ‹fade Olufltururken
Kullan›lan Özel Karakterler 157
Düzenli ifade nesnesi ile harf, rakam ve özel karakterler kullan›larak

düzenli bir ifade yani kal›p oluflturulur. Kal›p, string grubunu temsil
eden ifadedir.
Kullan›c›n›n form alanlar›na istedi¤iniz biçimde veri girmesi için bu

nesneyi kullanabilirsiniz. Kullan›c›n›n bizim belirledi¤imiz karakterler
dahil belirli bir formatta veri girip girmedi¤ini kontrol etmek için kulla-
n›l›r. Oluflturdu¤unuz bu düzenli ifade ile karakter katarlar›n› karfl›laflt›-
rabilir, bir eflleflme olup olmad›¤›na bakabilir, eflleflme varsa karakter
katarlar› ile ilgili belirli ifllemler yapabilirsiniz.
Do¤rulama kullan›c›n›n form üzerindeki kontrollere istedi¤imiz format-

ta yani yap›da bilgi girip girmedi¤ini kontrol etmek demektir. ‹stemci
taraf›nda ve sunucu taraf›nda do¤rulama ifllemi yap›labilir. E¤er istem-
ci taraf›nda do¤rulama ifllemi yapacaksan›z RegExp nesnesini kullan-
man›z gerekecek.
146 JAVASCRIPT
RegExp Nesnesi Olufltural›m

var difade=new RegExp(“kalıp”,”ayarlar”);
ya da
difade=/kalıp/ayarlar;
Burada difade ad›nda düzenli ifade nesnesi oluflturmufl olduk.
Kal›p düzenli ifadeyi temsil etmektedir. Düzenli ifade oluflturulurken

harf, rakam ve özel karakterler kullanabilirsiniz.
Karfl›laflt›rma iflleminin nas›l yap›laca¤›n› belirledi¤imiz parametreler,

ayarlar k›sm›na yaz›lmal›d›r.
Bu parametreler:
g-(global)
Karakter dizisinin tamam›n›n karfl›laflt›rmada kontrol edilip edilmeye-
ce¤ini ayarlamak için kullan›l›r. Yani string içerisinde düzenli ifadeyle
eflleflen tüm metin parçalar›n› aramak için gereklidir.
String içerisinde düzenli ifadeye uyan metin bulundu¤unda eflleflme ola-

cakt›r.
var str=”javascript Dersleri”
var difade=new RegExp(“ri”,”g”);
str isimli karakter katar›n›n tamam› karfl›laflt›rma iflleminde kontrol

edilecek.
E¤er string ifadenin tamam› karfl›laflt›rmada kontrol edilirse (g paramet-

resi kullan›l›rsa):
Standart olarak düzenli ifade ile string (karakter katar›) karfl›laflt›r›l›r-

sa bu durumda düzenli ifadeye uyan metin string içerisinde 0 index nu-
maral› elemandan bafllanarak aran›r. Test sonucunda bir eflleflme bulun-
duktan sonra test() metodu çal›flt›r›lmaya devam edilirse string içeri-
sindeki ilk eflleflmenin d›fl›nda var olabilecek di¤er eflleflmeler de aran›r.
DÜZENL‹ ‹FADELER (RegExp NESNES‹) 147
E¤er string ifadenin tamam› karfl›laflt›rmada kullan›lmazsa (g paramet-

resi kullan›lmazsa):
Test sonucunda bir eflleflme bulunduktan sonra test() metodu çal›flt›-

r›lmaya devam edilse bile string içerisindeki oluflacak ilk eflleflme d›fl›n-
da eflleflme aranmaz.
›-(›gnoreCase)
String içerisinde düzenli ifadeye uyan metin parçalar›yla eflleflmeler ya-
p›l›rken büyük-küçük harf olma durumunun dikkate al›nmamas› için i
parametresi kullanmal›s›n›z.
Örnek
var str=”javascript Dersleri”

var difade=new RegExp(“RI”,”i”);
m-(mult›l›ne)
Birden fazla sat›ra sahip bir string içerisinde düzenli ifadeye uyan me-
tin parçalar› aranacak ise m parametresini kullanmal›s›n›z.
Nesne Özellikleri
global
String ile düzenli ifade karfl›laflt›r›l›rken string’in tamam›n›n kontrol
edilip edilmeyece¤ini baflka bir deyiflle ayarlar k›sm›nda g parametresi-
nin tan›mlan›p tan›mlanmad›¤›n› kontrol etmek için kullan›l›r.
E¤er g parametresi tan›mlanm›fl ise true, tan›mlanmam›fl ise false de¤e-

ri geriye döndürür.
Örnek
var str=”javascript Dersleri”;
var difade=new RegExp(“ri”,”i”);
if(difade.global)
{
document.write(“g paranetresi kullanılmış”);
}else
{
148 JAVASCRIPT
document.write(“g paranetresi kullanılmamış”);

}
›gnoreCase
String içerisinde düzenli ifadeye uyan metin parçalar› aran›rken efllefl-
mede büyük-küçük harf durumuna dikkat edilip edilmeyece¤ini baflka
bir deyiflle ayarlar k›sm›nda i parametresinin tan›mlan›p tan›mlanmad›-
¤›n› kontrol etmek için kullan›l›r.
E¤er i parametresi tan›mlanm›fl ise true tan›mlanmam›fl ise false de¤eri

geriye gönderir.
Örnek
var difade=new RegExp(“RI”,”i”);
if(difade.ignoreCase)
{
document.write(“i paranetresi kullanılmış”);
}else
{
document.write(“i paranetresi kullanılmamış”);
}
mult›l›ne
Birden fazla sat›ra sahip bir string içerisinde düzenli ifadeyle eflleflen
metin parçalar› aramak için m parametresini kullan›yorduk. Bu paramet-
renin kullan›l›p kullan›lmad›¤›n› boolean olarak geriye döndürür.
›nput
String içerisinde düzenli ifadeyle eflleflen metin parças› var ise stringin
tamam›n› geriye döndürür.
Örnek
var str=”javascript Derslerim”;
difade.test(str);
document.write(RegExp.input);
Sonuç
javascript Derslerim
test() metodu daha sonra anlat›lacakt›r. Ama bu metodun string içeri-

sinde düzenli ifadeye uyan metin parçalar›n›n var olup olmad›¤›n› test
etmek için kullan›ld›¤›n› bilmenizdir. Test ifllemini gerçeklefltirmeden
di¤er özellikleri kullanamazs›n›z.
last›ndex
String içerisinde düzenli ifadeyle eflleflen metin parças›ndan sonraki ilk
karakterin index numaras›n› verir. Geriye dönen de¤er bir sonraki ara-
man›n bafllayaca¤› index numaras›d›r.
Örnek
var str=”javascRIpt Derslerim”;

difade.test(str);
document.write(difade.lastIndex);
düzenli ifadeyle eflleflen metin
javascRIpt Derslerim
index numaras› 8
i parametresini kulland›¤›m için ri ile RI metin parçalar› birbirleri ile

eflleflir. E¤er string içerisinde birden fazla eflleflme aranacak ise g para-
metresi kullan›lmal›d›r.
Örnek
{
difade.test(str); document.write(difade.lastIndex+”<br>”);
}
150 JAVASCRIPT
Sonuç
8
19
fleklinde olacakt›r.
Burada tüm eflleflmeler için ayr› ayr› lastIndex özelli¤ini kullanmak

istedi¤imizden dolay› for döngüsü oluflturduk. Sonuçta difa-
de.test() iki kere çal›flt›r›lm›fl ve iki eflleflme bulunmufltur.
‹lk eflleflmeden sonraki karakterin index numaras› 8, ikinci eflleflmeden

sonraki karakterin index numaras› 19 olacakt›r.
lastMatch
String içerisinde düzenli ifadeyle eflleflen son metin parças›n› geriye
döndürür.
Örnek
var difade=new RegExp(“er”,”g”);
difade.test(str);
document.write(RegExp.lastMatch);
// sonu: er
leftContext
Bir string içerisinde düzenli ifade ile eflleflen metin parças›n›n solunda
kalan k›sm› geriye döndürür.
Örnek
difade.test(str);
document.write(RegExp.leftContext);
// sonu: javasc
tin parças›n› geriye dönderdi? Çünkü difade.test(str) ifadesi her ça-

Burada flu soru akl›n›za gelebilir. Neden ilk eflleflmenin solundaki me-
l›flt›r›ld›¤›nda e¤er g parametresini kullanm›fl iseniz, string içerisinde bir

eflleflme arar.Yukar›daki durumda bir defa çal›flt›r›ld›¤›ndan sadece “ja-

vascript” metni içerisinde bulunan ri karakterleri ile eflleflme oldu¤un-
dan sonuçta ekrana “javasc” yaz›ld› e¤er bir string içerisindeki tüm efl-
leflmelerin solunda kalan metin parçalar›n› görmek istersek for döngü-
sü kullanmal›y›z.
Örnek

{
difade.test(str);
document.write(RegExp.leftContext+”<br>”);
}
Sonuç
javasc
javascript Dersle
r›ghtContext
Bir string içerisinde düzenli ifade ile eflleflen metin parças›n›n sa¤›nda
kalan k›sm› geriye döndürür.
Örnek

{
difade.test(str);
document.write(RegExp.rightContext+”<br>”);
}
Sonuç
pt Derslerim
m
152 JAVASCRIPT
Nesne Metodlar›
comp›le ()
Oluflturdu¤unuz düzenli ifadeyi de¤ifltirmek için compile() metodunu
kullanabilirsiniz.
Örnek
var difade=new RegExp(“web”,”g”);
if(difade.test(str))
{
alert(“eşleşme var”);
}
/*
yukarıdaki if bloğu içerisine yazılmış kodlar
çalışmaz çünkü difade.test(str) ifadesi bir eşleşme
olmadığından geriye false değeri döndürür.
*/
difade.compile(“derslerim”,”i”);
{
alert(“Düzenli ifade değiştirildi\nEşleşme var”);
}
</script>
Düzenli ifadeyi difade.compile(“derslerim”) fleklinde olufltursay-

d›k sonuçta string içerisinde düzenli ifadeyle eflleflen bir metin parças›
olmayacakt›. Çünkü “Derslerim” ve “derslerim” birbirine eflit de¤ildir.
Bu durumun önüne geçmek için efllefltirmede büyük-küçük harf ayr›m›
yap›lmamas› için i parametresi kullan›lm›flt›r.
exec ()
String içerisinde düzenli ifade ile eflleflme olup olmad›¤›n› kontrol ede-
rek var olan eflleflmeleri dizi olarak geri döndürür.
Örnek
var difade=new RegExp(“script”,”g”);
document.write(difade.exec(str));
// sonuç:script
</script>
String içerisinde düzenli ifade ile eflleflen birden fazla metin parças› var
ise exec() metodu düzenli ifade ile eflleflen ilk metin parças›n› döndü-
rür. Düzenli ifade ile eflleflen tüm metin parçalar›na ulaflmak için bu me-
tod döngü içerisinde eflleflme kadar çal›flt›r›lmal› ya da düzenli ifade
içinde ( ) karakterleri kullan›larak eflleflmeler sonuçta döndürülecek di-
ziye eklenmelidir.
Örnek
var str=”sacac aac”;
var difade=/(ac)+/;
var sonuc=difade.exec(str);
document.write(sonuc[0]+” “+sonuc[1]);
// sonuç:acac ac
</script>
Düzenli ifade içerisinde ( ) karakterleri kullan›larak eflleflmeler exec()

metodunun geriye döndürdü¤ü sonuç dizisine eklendi. Biz sonuc dizisi
içerisindeki elemanlara ulafl›p sayfaya yazd›rabiliriz. Dizi içerisindeki ele-
manlar, string içerisinde düzenli ifade ile eflleflen metin parçalar› olacakt›r.
test()
Bu metod string içerisinde düzenli ifadeyle eflleflen metin parçalar›n›n
var olup olmad›¤›n› test etmek için kullan›l›r. E¤er string içerisinde dü-
zenli ifadeyle eflleflen bir metin parças› varsa bu durumda bu metod ge-
riye true, e¤er bir eflleflme yoksa geriye false de¤erini döndürür.
düzenliifadeadı.test(düzenli ifadenin karşılaştırılacağı string)
154 JAVASCRIPT
Örnek
var str=”dhtml dersleri”;

var difade=new RegExp(“ri”);
document.write(difade.test(str));
difade.test(str) Bu ifade flu anlama gelmekte. str isimli karakter

katar› içerisinde düzenli ifade ile eflleflen metin grubu yani metin parça-
s› var m› yok mu? Bunu test et! Sonuçta var oldu¤u için geriye true de-
¤eri dönecektir.
Burada g parametresi kullan›lmad› yani e¤er string içerisinde düzenli

ifade ile eflleflen bir metin parças› bulunursa string içerisindeki di¤er efl-
leflmelere bak›lmayacakt›r.
Örnek

{
difade.test(str);
document.write(difade.lastIndex+”<br>”);
}
Sonuç
8
19
Bu örnekte fluna dikkat etmenizi istiyorum. Bir for döngüsü olufltur-

dum ve bu döngü içerisindeki komutlar› 2 kez çal›flt›racakt›r. Çünkü dü-
zenli ifade string içerisindeki metin parçalar› ile 2 kez efllefliyor.
Di¤er bir önemli nokta difade.test(str) komutu döngü içerisine

koyulmufltur. Nedeni; bu ifade her çal›flt›¤›nda string içerisinde düzen-
li ifadeyle eflleflen yeni metin parçalar›n› aramas›d›r. E¤er difa-
de.test(str) ifadesini döngü d›fl›na koymufl olsayd›m, sadece bir efl-
leflme bulacakt› ve sayfaya 2 kere 8 yaz›lacakt›.
E¤er eflleflme yukar›daki gibi en sonda ise lastIndex() metodu asl›n-

da karakter olmamas›na ra¤men eflleflmenin en son karakterinden bir
fazlas›n› gönderir. (Yani 19)
search ()
String içerisinde düzenli ifadeyle eflleflen metin parçalar›n› arar. Bulur-
sa index numaras›n›, bir eflleflme bulamazsa -1 de¤erini geriye dön-
dürür.
Örnek
var str=”javascript dersleri”;

var difade=new RegExp(“dersleri”,”g”);
var sonuc=str.search(difade);
// sonuc:11
Dikkat etmeniz gereken “dersleri” metin parças›n›n “javascript

dersleri” isimli string içerisinde aranmas›d›r. Geriye dönen de¤er
string içerisinde düzenli ifade ile eflleflen metin parças›n›n ilk karakte-
rinin index numaras›d›r.
match ()
Bu metod string içinde düzenli ifadeyle eflleflen karakter katarlar›n› dizi
olarak geriye döndürür.
Örnek
var str=”sklaklc aklll”;

var difade=/kl+/g;
var sonuc=str.match(difade);
document.write(sonuc[0]+”,”+sonuc[1]+” “+sonuc[2]+”<br>”);
Sonuç
kl,kl klll
kl,kl,klll
156 JAVASCRIPT
replace()
String içerisinde düzenli ifadeyle eflleflen karakter katar›n› baflka bir me-
tinle de¤ifltirmeye yarar.
Örnek

var difade=/javascript/;
var str2=str.replace(difade,”DHTML”);
document.write(str2);
// sonuç:DHTML dersleri
spl›t()
String içinde düzenli ifade ile eflleflen karakter katarlar›n› ay›raç olarak
kullanarak metni böler ve böldü¤ü metin parçalar›n› dizi olarak geriye
döndürür.
Örnek
var str=”javascript dersleri kitabı konuları”;
var difade=/\W+/g;
document.write(str.split(difade));
document.write(str2);
// sonuç:javascript,dersleri,kitab,konular
Yukar›daki örnekte düzenli ifade ile boflluk karakteri eflleflecektir. Bofl-

luk karakterini kullanarak metni böler. E¤er document.write() meto-
du ile sayfaya yazd›r›rsan›z böldü¤ü metin parçalar›n› araya virgül ko-
yarak listeleyecektir. (Dizilerde oldu¤u gibi) Bölünmüfl metin parçala-
r›n› dizi olarak geriye döndürdü¤ünü söylemifltik. E¤er ifadeyi bir de-
¤iflkene atarsan›z de¤iflken dizi de¤iflken olmufl olur.
Örnek
var str=”javascript-Dersleri-kitabı”;
var difade=/-/g;
var my_dizi=str.split(difade);
document.write(my_dizi[0]+”-”+my_dizi[1]+”-”+my_dizi[2]);
// sonuç:javascript-Dersleri-kitabı
Düzenli ifade “-” karakteridir. split() metodunun yapt›¤› ifllem, metin

içerisinde “-” karakterini ay›raç olarak kullanarak metni böler. Geriye
bölünmüfl metin parçalar›n› dizi olarak döndürür. Bu durumda my_dizi
bir dizi de¤iflkeni olmufltur. Sayfaya dizi elemanlar›n› yazd›rabilirsiniz.
Düzenli ‹fade Olufltururken

Kullan›lan Özel Karakterler
Konum Belirleyen Karakterler
Bu karakterler ile string içerisinde düzenli ifade ile efllefltirilecek metin
parçalar›n›n konumu ayarlan›r.
^ Karakteri
Karakter dizisinin bafllang›c› ile düzenli ifade karfl›laflt›r›lacak ise kulla-
n›l›r. Yani eflleflme olmas› için metin parças›n›n karakter dizisinin en
bafl›nda ve düzenli ifadeye uygun olmas› gerekir. E¤er nesne oluflturu-
lurken m parametresi kullan›lm›fl ise yeni sat›r karakterinden sonraki ka-
rakter dizisinin bafllang›c› ile de eflleflme gerçekleflir.
Örnek
var str=”javascript dersleri javascript”;

var difade=new RegExp(“^jav”);
difade.test(str);
// sonuç: düzenli ifade string içerisindeki
// ilk “jav” karakterleri ile eşleşeceğinden sonuç:3
$ Karakteri
Karakter dizisinin sonu ile düzenli ifadeyi karfl›laflt›rmak için kullan›l›r.
Yani eflleflme gerçekleflmesi için metin parças›n›n karakter dizisinin so-
nunda olmas› ve düzenli ifadeye uygun olmas› gerekir.
Örnek
var str=”ajavascript dersleri javascript”;

var difade=new RegExp(“pt$”);
difade.test(str);
158 JAVASCRIPT
// sonuç: düzenli ifade string içerisindeki
// son “pt” karakterleri ile eşleşeceğinden sonuç:31
\b Karakteri
String ile düzenli ifade aras›nda eflleflmeler string içerisindeki kelimele-
rin bafllang›c› ya da sonunda aran›r.
Örnek
var str=”javadersscript dersleri”;

var difade=/\bders/;
document.write(str.search(difade));
// sonuç:15
search() metodu string içinde düzenli ifadeyi arar ve eflleflme olursa

eflleflen metin parças›n›n ilk karakterini geriye gönderir.
Düzenli ifade ile string içerisindeki kelime bafllar› ve sonlar› karfl›laflt›-

r›lacak ve eflleflme buralarda aranacak.
“javaderscript dersleri”
4 15
Asl›nda string içerisinde “ders” metni ile eflleflen 2 metin parças› bulun-
makta ama düzenli ifadeyi \bders fleklinde oluflturdu¤umuzdan string
içerisinde eflleflme için sadece kelime bafllar› ve sonlar› kontrol edilecek-
tir. Bu durumda e¤er \b karakteri kullan›lmasayd› geriye dönen de¤er 4
olacakt›. Fakat \b karakteri kullan›ld›¤›ndan geriye 15 de¤eri döndü.
\B Karakteri
String ile düzenli ifade aras›ndaki eflleflmeler kelime bafl› ya da sonu
haricinde kelime içinde aran›r.
Örnek
var str=”javadersscript dersleri”;

var difade=/\Bders/;
document.write(str.search(difade));
// sonuç:4
Burada özel karakter olarak \B kullan›lm›fl. Yukar›daki düzenli ifadeyi

“string içinde düzenli ifade ile eflleflebilecek metin parçalar›n› kelime
bafl›nda ya da sonunda de¤il kelime içinde ara” fleklinde okuyabilirsiniz.
Bu durumda sonuç 4 olacakt›r.
NOT hat›rlama
str.search(difade) ifadesi string içinde düzenli ifade ile eflleflen metin
parçalar›n›n ilk karakterinin index numaras›n› geriye döndürür.
?= Karakteri
Bir string içinde belirlenen karakter dizisinin önünde düzenli ifade ile
eflleflebilecek metin gruplar› arar.
Söz dizimi:
new RegExp(“düzenli ifade(?=karakter katarı)”)
ya da
/düzenli ifade(?=karakter katarı)/
Örnek
var str=”javadersscript dersleri javascript”;
var reg_text=new RegExp(“pt(?= ders)”);
document.write(str.search(reg_text));
// sonuç:12
Burada ders karakter dizisinin önünde düzenli ifade ile eflleflen metin
parças›;
“javaderscript dersleri javascript”;
fleklinde olacakt›r ve “pt” karakter grubu içerisinde “p” karakterinin in-

dex numaras› 12 olacakt›r. “dersleri” kelimesinden sonraki “javasc-
ript” karakter grubunda eflleflme aranmaz. Çünkü flart olarak eflleflme
aranacak yer mutlaka “ders” karakter grubundan önce olmal›d›r.
160 JAVASCRIPT
?! Karakteri
String içerisinde belirledi¤imiz karakter dizisi ile takip edilmeyen me-
tinler düzenli ifade ile efllefltirilecek ise kullan›l›r.
Söz dizimi:
new RegExp(“düzenli ifade(?!karakter katarı)”)
ya da
/düzenli ifade(?!karakter katarı)/
Örnek
var str=”javadersscript dersleri javascript”;
var reg_text=new RegExp(“pt(?! ders)”);
document.write(str.search(reg_text));
// sonuç:32
En sondaki “pt” karakteri “ders” karakter grubu taraf›ndan takip edil-

memifl.
“javaderscript dersleri javascript”
“pt” karakter grubu içerisinde “p” karakterinin index numaras› 32 ola-

cakt›r.
Gözükmeyen Karakterleri Düzenli

‹fade ‹çinde Temsil Eden Karakterler
Ekranda gözükmeyen karakterleri düzenli ifade içinde temsil ederler.
\0 Null karakter ile eflleflir.
\n Yeni sat›r karakteri ile eflleflir.
Örnek
var str=”fileInfo\nSınıfı”;
var reg_text=new RegExp(“\n”);
ocument.write(reg_text.test(str));
// sonuç:true
// string içerisinde yeni satır karakteri olduğundan
// eşleşme gerçekleşti
\t Tab karakteri ile eflleflir.

Örnek
var str=”fileInfo Sınıfı”;
var reg_text=new RegExp(“\t”);
document.write(reg_text.test(str));
// sonuç:true
// string içerisinde tab tuşu kullanıldığından
// eşleşme gerçekleşti
\v Dikey tab karakteri ile eflleflir.
Örnek olarak yeni sat›r karakterinden sonraki karakterleri bir alt sat›ra
yazan basit bir uygulama yapal›m.
var str=”fileInfo\nSınıfı”;
var reg_text=new RegExp(“\n”);
reg_text.test(str);
document.write(RegExp.leftContext+”<br>”);
document.write(RegExp.rightContext);
Sonuç
fileInfo
S›n›f›
Di¤er Özel Karakterler

[abc] Belirtilen karakterlerden herhangi biri ile eflleflir. Bu flu anlama
gelmekte; bu düzenli ifade belirtilen karakterlerden herhangi
birine eflittir.
Örnek
var str=”dhtml ve javascript”;
var reg_text=new RegExp(“[html]”);
reg_text.test(str);
document.write(reg_text.exec(str));
// sonuç:h
162 JAVASCRIPT
[a-e] Belirtilen karakter aral›¤›ndaki herhangi bir karakterle eflleflir.

Örnek
var str=”dhtml ve javascript”;
var reg_text=new RegExp(“[a-c]”,”g”);
document.write(str.match(reg_text));
// sonuç:a,a,c
Birden fazla aral›¤› ayn› anda formatlaman›z mümkündür.

Afla¤›daki örne¤i inceleyelim:
[a-z0-9A-Z] bu ifade a-z, 0-9, A-Z karakterler ile eflleflir.
var str=”abcdefg01234”;
var reg_text=/[a-c0-3]/g;
// sonuç:a,b,c,0,1,2,3
Dikkat etmeniz gereken [a-e] ile [abcde] kal›plar› ayn›

anlama gelmektedir.
[âbc] Belirtilen karakterler d›fl›ndaki karakterler ile eflleflir. Oluflturulan

düzenli ifade belirtilen karakterlerden herhangi birine eflittir.
Örnek
var str=”javascript ve dhtml”;
var reg_text=/[^dhtml]/g;
// sonuç:j,a,v,a,s,c,r,i,p, ,v,e,
[â-e] Belirtilen karakter aral›¤›nda olmayan karakterler ile eflleflir.

Örnek
var str=”javascript ve dhtml”;
var reg_text=/[â-d]/g;
// sonuç:j,v,s,r,i,p,t, ,v,e, ,h,t,m,l
. (nokta) Yeni sat›r karakteri hariç herhangi bir karakterle eflleflir.
Örne¤in düzenli ifademizi r.p fleklinde oluflturursak; Toplamda 3
karakter ilk karakteri r son karakteri p olan metinler anlam›na gelir.
Örnek
var str=”javascript rapor”;
var reg_text=new RegExp(“r.p”,”g”);
// sonuç:rip,rap
\w Harf ve rakamlardan herhangi biri ve alt çizgi karakteri ile eflleflir.

Örnek
var str=”a+-_”;
var reg_text=/\w/g;
// sonuç:a,_
\W Harf, rakam ve alt çizgi d›fl›ndaki karakterler ile eflleflir.
Örnek
var str=”a+-_”;
var reg_text=/\W/g;
// sonuç:+,-
\d Sadece rakamlarla eflleflir. (0-9)
Örnek
var str=”ASP.NET 1234”;
var reg_text=/\d/g;
// sonuç:1,2,3,4
\D Rakam d›fl›nda kalan karakterler ile eflleflir.
Örnek
var str=”ASP.NET a1234”;
var reg_text=/\D/g;
// sonuç:A,S,P,.,N,E,T, ,a
\s Beyaz boflluk (white space) ile eflleflir.
Örnek
var str=”ASP.NET 1234”;
var reg_text=/\s/;
document.write(str.replace(reg_text,”-”));
// sonuç:ASP.NET-1234
a|b a ya da b karakterlerinden herhangi biri ile eflleflir.
(Karakter gruplar› içinde kullan›labilir.)
Örnek
var reg_text=/vas|der/g;
document.write(reg_text.exec(str)+”<br>”);
// sonuç:vas
// sonuç:vas,der
164 JAVASCRIPT
Düzenli ifade vas ya da der kelime gruplar›ndan herhangi

biri ile eflleflir. exec() metodu düzenli ifade ile eflleflen ilk metin
parças›n› geriye döndürür. Sonuç olarak “vas “ metin parças›
döndü. Çünkü bu ilk eflleflmeyi oluflturan metin grubu idi.
E¤er match() metodu ile tüm eflleflmeleri listelersek
bu durumda vas, der olarak ç›kt› al›r›z.
Tekrarlama Miktarlar›n›
Ayarlayan Karakterler
Tekrarlama miktar›n› belirleyen karakterler düzenli ifade içinde kendin-
den önce gelen karakter ya da özel karakterin kaç defa tekrarlanm›fl ol-
mas› gerekti¤ini belirtir.
{x} x defa tekrarlanm›fl olmas› gerekir
Örnek
var str=”javaaascript dersleri aa”;
var reg_text=/a{3}/g;
// sonuç:aaa
Burada düzenli ifademiz a{3} bu a karakterinin 3 defa tekrarlanm›fl
olmas› anlam›na gelir. String içerisinde düzenli ifadeyle eflleflen
metin parças› “aaa”’d›r.
{x,} x defa ya da daha fazla tekrarlanm›fl olmas› gerekir.
Örnek
var str=”javaaascript dersleri aaaaaaa aaaa”;
var reg_text=/a{3,}/g;
// sonuç:aaa,aaaaaaa,aaaa
Burada düzenli ifade ile a karakterinin 3 ya da daha fazla

tekrarlanmas› ile oluflan metin gruplar›n›n eflleflti¤ini görebiliriz.
{x,y} En az x en fazla y kere tekrarlanm›fl olmas› gerekir.
Örnek
var str=”1000 yada 1 yada 1000”;
var reg_text=/\d{2,3}/g;
// sonuç:100,100
Bir rakam 2 ya da 3 defa tekrarlanm›flsa, düzenli ifadeye eflit olmufl

olur. Düzenli ifadeye eflit olan metin parçalar› ekrana yazd›r›ld›.
+ Bu karakterin önündeki karakterin 1 ya da daha fazla kez
tekrarlanm›fl olmas› gerekir.
Örnek
var str=”jsavascript jsss jcript”;
var reg_text=/js+/g;
// sonuç:js,jsss
js,jsss metin parçalar›ndaki s karakteri 1 ya da daha fazla

tekrarlanm›flt›r.
? Bu karakterin önündeki karakterin 0 ya da 1 kez tekrarlanm›fl
olmas› gerekir.
Örnek
var reg_text=/js?/g;
// sonuç:js,js,j
* Bu karakterin önündeki karakterin 0 ya da daha fazla kez

tekrarlanm›fl olmas› gerekir.
Örnek
var reg_text=/js*/g;
// sonuç:js,jsss,j
Ters bölü (\) karakteri, pefli s›ra gelen karakterin özel bir karakter olup
olmad›¤›n› ayarlamak için kullan›l›r.
Örne¤in:
• /d/: düzenli ifadesinde d normal bir karakter olarak kullan›lm›flt›r. Fa-
kat özel karakter olarak kullanmak isteseydim /\d/ fleklinde yazmam
gerekecekti.
• Ayn› zamanda ters bölü özel olan bir karakteri normal karaktermifl gibi
kullanmaya yarar. /e+/ yazarsam e karakterinin 1 ya da daha fazla kez
166 JAVASCRIPT
tekrarlanm›fl olmas› gerekir. Çünkü + özel bir karakterdir. + özel karak-

terini normal karakter olarak kullanmak isteseydim önüne \ ters bölü
koymam gerekirdi. Bu durumda /e\+/ düzenli ifadesi e+ stringi ile efl-
leflecekti.
Örne¤in string olarak “javascript dersleri 2/3” fleklinde bir metnimiz ol-
sun. Burada 2/3 ile eflleflecek düzenli ifadeyi yazal›m:
var str=”jsavascript dersleri 2/3”;
var reg_text=/2\/3/;
document.write(reg_text.exec(str));
// sonuç:2/3
3 karakterinden önceki ters bölü normal bölü karakterini özel karakter

olmaktan ç›kar›r bu ifade 2/3 ile eflleflir.
Grup Oluflturma ve
Grup ‹çi Karakterler
( ) Eflleflmeleri daha sonra kullanmak için haf›zada saklar ve
eflleflmelere $1, $2 fleklinde ulaflabilirsiniz. Eflleflme sonucunda
geriye dizi döndüren bir metod kullan›yorsan›z eflleflmelerin
diziye eklenmesi için ( ) karakterlerini kullanmal›s›n›z.
Örnek
var str=”javascript dersleri konular”;
var difade=/(\w+)\s(\w+)\s(\w+)/;
var sonuc=str.replace(difade,”$1,$3,$2”);
//sonuç:javascript,konular,dersleri
Düzenli ifadede 3 tane parantez vard›r.Bu parantezler

içerisindeki düzenli ifade ile eflleflen metin parçalar›
haf›zada saklan›r. $1, $2... fleklinde ça¤r›l›rlar.
(?: ) Eflleflmeleri daha sonra kullanmak için haf›zada saklamaz.
var str=”a1a2a3a4”;
var difade=/(?:a\d)/;
document.write($1);
//sonuç: eşleşmeler hafızada saklanmaz
Grup oluflturma karakterleri ile özel karakterler taraf›ndan ayn› anda ifl-
lem görecek, karakter gruplar› oluflturabilirsiniz.
var str=”derrrrrsleri”;
var difade=/er+/;
document.write(difade.exec(str));
// sonuç: errrrr
// + özel karakteri sadece kendisinden önceki karakter olan
//”r” karakteri için geçerlidir.
Örnek
var str=”1213131212”;
var difade=/(12)+/g;
document.write(str.match(difade));
// sonuç: 12,1212
// + özel karakteri sadece kendisinden önce kullanılan
// parantez içerisindeki karakterler için geçerlidir
Parantezlerle beraber veya(|) yap›s› kullan›labilir.
var str=”derya ve dersen”;

var difade=/der(ya|sen)/g;
document.write(str.match(difade));
// sonuç:derya,dersen
match() metodu düzenli ifade ile eflleflen metin parçalar›n› aralar›na

virgül koyarak döndürür.
Buraya kadar RegExp nesnesinde özellikleri, metodlar› ve bu nesnede

kullan›lan özel karakterleri görmüfl olduk.
Örneklerle devam edelim.
e-ma›l Do¤rulama ‹fllemleri

Basit olarak bir e-mail adresini do¤rulamak için düzenli ifade olufltural›m;
<head>
168 JAVASCRIPT

charset=utf-8” />
function emailtest()
{
var str=document.getElementById(“txt”).value;
var difade=/.+@.+\..+/;
if(!difade.test(str))
{
alert(“Doğru bir Email adresi giriniz”);
}
}
</script>
</head>
<body>
<input type=”text” id=”txt” />
<input type=”button” value=”EmailTest”onclick=”emailtest()” />
</body>
</html>
Örne¤imizi çal›flt›ral›m;
Düzenli ifademizi inceleyelim:

. + @ . + \ . . +
. + bu ifade içerisindeki . (nokta) yeni sat›r karakteri olmayan herhan-

gi bir karakterle eflleflebilir. Sonuna + kondu¤undan bu karakterin en az
bir defa tekrarlanm›fl olmas› gerekir. Özetle @ iflaretinden önce en az
bir karakter kullan›lmal›d›r. @ bir literaldir, kullan›c›n›n @ karakterini
girmesi gerekecektir. @ karakterinden sonra tekrar yukar›da anlat›lan. +
özel karakterleri kullan›lm›flt›r.
\ . asl›nda . (nokta) özel bir karakterdir. Önüne ters bölü koydu¤u-

muzdan literale yani özel olmayan bir karaktere çevrilmifltir. Böylece @
karakterinden sonra bir grup metin girilecek ve sonra nokta konacakt›r.
. + özel karakterleri ilk ifadeyle ayn›, noktadan sonra kullan›c› en az
bir karakter girecek.
Yukar›daki düzenli ifadeyi afla¤›daki flekilde de yapabilirim:

var difade=/\w+@\w+\.\w+/;
@’dan önce bir metin grubu, sonra bir metin grubu, daha sonra nokta
daha sonra bir metin grubu fleklinde olacakt›.
E mail adresi do¤rulamas› için düzenli ifade örne¤i-II;

<head>
charset=utf-8” />
function emailtest()
{
var str=document.getElementById(“txt”).value;
// Düzenli ifadeyi oluşturalım;
var difade=/^[A-Z0-9a-z_.-]+@[A-Z0-9a-z\-]+\.[a-zA-Z]{2,3}$/;
if(!difade.test(str))
{
alert(“Geçerli bir Email adresi giriniz”);
}
}
</script>
</head>
<body>
<input type=”text” id=”txt” />
<input type=”button” value=”EmailTest” onclick=”emailtest()” />
</body>
</html>
170 JAVASCRIPT
@ karakterinden önce kullan›c› 1 ya da daha fazla kez a-z, A-Z, 0-9 ,

nokta, alt çizgi ve çizgi karakterleri girebilir. Yine @ karakterinden son-
ra kullan›c› nokta hariç a-z, A-Z, 0-9, alt çizgi ve çizgi karakterleri gi-
rebilir.Daha sonra kullan›c› nokta girecek ve noktadan sonra a-z, A-Z
karakterlerinden en az 2, en fazla 3 tane girebilecek.
Tarih Do¤rulama ‹fllemleri

Örnek
<head>
charset=utf-8” />
var str=”9-60-2009”;
var difade=/^\d{1,2}-\d{1,2}-\d{4}$/;
var difade2=/-/;
{
var dizi=str.split(difade2);
// 9,6,2009 değerleri dizi değişkenine eleman olarak atandı
var gun=dizi[0];
var ay=dizi[1];
var yil=dizi[2];
var tarih=new Date(yil,ay-1,gun);
if(tarih.getDate()==gun && tarih.getMonth()+1==ay &&
tarih.getFullYear()==yil)
{
alert(“Tarih formatına Uygun”);
}else{
alert(“Tarih formatına Uygun değil”);
}
}else{
alert(“Tarih formatına Uygun değil”);
}
</script>
</head>
<body>
</body>
</html>
Kontrol edilecek tarih bilgisi str de¤iflkeni içerisindedir.
Düzenli ifademize bakarsak;
Bir ya da iki tane rakam sonra tire sonra 1 ya da 2 tane rakam, daha son-
ra tire ve daha sonra 4 rakam format›ndaki verilerle eflleflece¤i görül-
mektedir. Yukar›da anlat›lan formatta girilen metinler düzenli ifade ile
eflleflir.
difade2 düzenli ifadesi split() metodunda kullan›lmak için olufltu-

rulmufl ve sadece “-” karakteri ile eflleflmektedir.
str içindeki metnin düzenli ifadeyle eflleflip eflleflmedi¤ini kontrol et-

memiz gerekir.
E¤er efllefliyorsa;
str isimli de¤iflkeninin içerisindeki “-” karakteri ay›raç olarak kullan›-

l›p metin bölünecektir. Bölünen metin parçalar› dizi olarak geriye dön-
dürüldü¤ünden “dizi” isimli de¤iflken dizi de¤iflkeni olmufl olur. Date
nesnesi oluflturulup de¤erleri girilmifl ve if yap›s› ile s›namalar yap›l-
m›flt›r. E¤er flartlar›m›z›n hepsi do¤ru ise mesaj kutusunda “Tarih for-
mat›na Uygun” yaz›s› ç›kacakt›r.E¤er do¤rulama olmazsa “Tarih for-
mat›na Uygun de¤il” mesaj› kullan›c›ya gösterilecektir.
str içerisindeki metin düzenli ifade ile eflleflmiyorsa;
Mesaj kutusunda “Tarih format›na Uygun de¤il” yaz›s› ç›kacakt›r.
Yukar›daki kod parçam›zda gun k›sm›na 31’den büyük ya da ay k›sm›-

na 12’den büyük bir de¤er yaz›ld›¤›nda herhangi bir hata mesaj› verme-
mekte çünkü düzenli ifademizi her iki k›s›m içinde 1 ya da 2 basamak-
l› bir say› ile eflleflecek flekilde yazd›k. Yani str içerisinde “56-45-2009”
fleklinde bir de¤er girdi¤inizde tarih format›na uygun fleklinde bir mesaj
172 JAVASCRIPT
alacaks›n›z. Bu durumun önüne geçmek için kodumuzu biraz daha ge-

lifltirelim.
Örnek
<head>
charset=utf-8” />
function tarihtest(str)
{
var difade=/^\d{1,2}-\d{1,2}-\d{4}$/;
var difade2=/-/;
{
// 9,6,2009 değerleri dizi değişkenine eleman olarak atandı
if(dizi[0]>31 || dizi[1]>12)
{
return “Gün ve ay bilgileri yanlış”;
}
var gun=dizi[0];
var ay=dizi[1];
var yil=dizi[2];
var tarih=new Date(yil,ay-1,gun);
{
return str+” “+”Tarih formatına uygun”;
}else{
return str+” “+”Tarih formatına uygun değil”;
}
}else{
}
}
document.write(tarihtest(“50-12-2009”));
</script>
</head>
<body>
</body>
</html>
Kodlar›m›z› bir fonksiyon içerisine yazd›k ve bu fonksiyon parametre

olarak tarih bilgisini almakta.
à str içindeki metin düzenli ifade ile efllefliyorsa;
S›nama yap›s› ile; gün k›sm›n›n 31’den büyük olma ve ya ay k›sm›n›n

12’den büyük olma durumu yakaland›¤›nda sayfaya “gün ve ay bilgile-
ri yanl›fl” fleklinde bir yaz› yazd›r›lacakt›r. E¤er gün k›sm› 31’den bü-
yük de¤ilse ve ay k›sm› 12’den büyük de¤ilse tarih nesnesi oluflturula-
cak. Daha sonra gun, ay, yil bilgileri kontrol edilecek e¤er flartlar›n hep-
si sa¤lan›rsa ekrana “Tarih format›na uygun” metni yazd›r›lacakt›r. Bu
if yap›s›nda flartlar sa¤lanamazsa sayfaya “Tarih format›na uygun de-
¤il” fleklinde bir yaz› yazd›r›lacakt›r.
à str içindeki metin düzenli ifade ile eflleflmiyorsa sayfaya “Tarih for-
mat›na uygun de¤il” fleklinde bir yaz› yazd›r›lacakt›r.
! D‹KKAT!
Yukar›daki uygulamada örne¤in kullan›c› ay k›sm›na 2 yazd› ve gün k›sm›-
na 31 yazd›. Bu da bizim için yanl›fl olacakt›r. Çünkü flubat ay› 28 günden
oluflur. Kullan›c›n›n girdi¤i ay de¤erine göre gün de¤erinin belirli bir de¤e-
ri afl›p aflmad›¤›n› kontrol edebiliriz.
Örne¤in 2009 y›l› için;

Ocak:31 gün, fiubat:28,Mart:31, Nisan:30, May›s:31,Haziran:30,Tem-
muz:31,A¤ustos: 31,Eylül:30,Ekim:31,Kas›m:30,Aral›k:31 fleklinde
olacakt›r.
Ocak, Mart, May›s, Temmuz, Ekim, Kas›m aylar›: 31;
fiubat ay› 28 gün;
Nisan, Haziran, Eylül, Kas›m aylar› 30 gün fleklinde olacakt›r.
174 JAVASCRIPT
31 gün çeken aylar için uygulamam›za herhangi bir komut eklememize

gerek yoktur. Çünkü tüm aylar için geçerli temel kural›m›z gün say›s›
31’den büyük olamaz.

<head>
charset=utf-8” />
function tarihtest(str)
{
var difade=/^\d{1,2}-\d{1,2}-\d{4}$/;
var difade2=/-/;
{
var gun=dizi[0];
var ay=dizi[1];
var yil=dizi[2];
if(ay>12)
{
return “ay değeri yanlış”
}
var aylar=[31,28,31,30,31,30,31,31,30,31,30,31];
// aylar[0]=31 Ocak aynın gün sayısı
// aylar[11] = 31 Aralık ayının gün sayısı
{
if(ay==i&&gun>aylar[ay-1])
{
return “gün değeri hatalı”;
}
}
var tarih=new Date(dizi[2],dizi[1]-1,dizi[0]);
{
return str+” “+”Tarih formatına uygun”;
}else{
}
}else{
}
}
document.write(tarihtest(“25-2-2009”));
</script>
</head>
<body>
</body>
</html>
Düzenli ifade ilk örnekte anlat›lm›flt›r. Uygulamam›zda fonksiyon ça¤-

r›l›rken girilen metin içerisindeki ay k›sm› 12’den büyük ise fonksiyon
terk edilecek ve sayfaya “ay de¤eri yanl›fl” yazd›r›lacakt›r. E¤er ay de-
¤eri 12’ye eflit ya da 12’den küçük ise bu durumda bir sonraki komutla-
ra geçilecektir.
Aylar›n sahip olduklar› gün say›s›n› saklamak için aylar isimli bir dizi
oluflturulmufltur. Dikkat edilmesi gereken aylar[0] = “ocak” olmas›-
d›r, yani ocak metninin (ay›n›n) index numaras› “0” olacakt›r.
Bir döngü oluflturup hangi ay de¤erinin girildi¤i saptanabilir. Bu du-

rumda döngü içerisindeki komutlar toplamda 12 kez çal›flacakt›r. Giri-
len ay bilgisine ba¤l› olarak gün de¤eri dizi içerisinden ça¤r›lmakta ve
s›namalar yap›lmaktad›r.
Örne¤in ay bilgisi 2 olsun bu durum da;
i=2 oldu¤un da;
if(2 = =2 && gun > aylar[1]) birinci flart sa¤lanm›flt›r. Burada ikinci
flarta dikkat etmenizi istiyorum;
aylar[1] = 28;
if(2= = 2 && gun > 28 ), gun de¤iflkeni içerisindeki bilgi 28’den bü-
176 JAVASCRIPT
yük ise bu durumda ikinci flartta do¤ru olur ve fonksiyondan ç›k›l›r.

Sayfaya “gun de¤eri hatal› “ yaz›s› yazd›r›l›r. E¤er gun de¤iflkeni içeri-
sindeki de¤er 28’den küçük ya da eflitse flart sa¤lanmaz ve if koflul ya-
p›s› içerisine girilmez. Tarih nesnesi oluflturulacak ve s›namalar yap›la-
cakt›r. E¤er flartlar sa¤lan›rsa “tarih format›na uygun” metni sayfaya
yazd›r›l›r. E¤er tarih nesnesi oluflturulduktan sonra yap›lan s›nama yan-
l›fl ise sayfaya “Tarih format›na uygun de¤il” metni yazd›r›l›r. Di¤er ay-
lar içinde ayn› mant›kla kodlar›m›z çal›flacakt›r.
E¤er aya göre gün bilgileri do¤ru ise for döngüsü içindeki if deyimi
çal›flt›r›lmayacakt›r.
TARAYICI
11
NESNELER‹
window Nesnesi 177 location Nesnesi 204
Nesne Özellikleri 177 Nesne Özellikleri 205
Nesne Metodlar› 181 Nesne Metodlar› 210
navigator Nesnesi 198 document Nesnesi 211
Nesne Özellikleri 198 Nesne Özellikleri 211
3. screen Nesnesi 200 Nesne Metodlar› 216
Nesne Özellikleri 200 Event Nesnesi 221
history Nesnesi 202 Nesne Özellikleri 221
Javscript içerisindeki gömülü nesneler d›fl›nda, DOM nesnelerini de

kullanmam›z mümkündür.
DOM (Document Object Model) Doküman Nesne Modeli taray›c› için

nesne grubu ve bu nesnelere ulaflmak için hiyerarflik bir yap› sunmakta-
d›r. Bu kitapta konular anlat›l›rken W3C DOM modeli kullan›lm›flt›r. Bu
modeli Nescape 5-6, ‹nternet Explorer 5 ve üstü desteklemektedir.
w›ndow Nesnesi
DOM yap›s›nda hiyerarflik olarak en üstte bulunan nesnedir. Taray›c›
penceresini temsil etmektedir. Pencere nesnesi body, frameset etiketle-
rinden birini kulland›¤›n›zda otomatik olarak oluflacakt›r.
Nesne Özellikleri
defaultStatus
Pencerenin durum çubu¤unu temsil etmektedir. Durum çubu¤unda gös-
terilmesi için mesaj ayarlayabilir ya da var olan mesaj› alabilirsiniz.
178 JAVASCRIPT
window.status özelli¤i de ayn› ifllemi görmekle beraber firefox taray›-

c›larda varsay›lan olarak kapal›d›r.
window.defaultStatus=”javascript Dersleri”;
Örnek
Durum çubu¤unda kayan yaz› gösteren kodlar› yazal›m.
str=”javascript Dersleri”;
str+=” “;
var hiz=200;
function mesaj()
{
window.defaultStatus=str;
var txt=str.substring(1)+str.substring(0,1);
str=txt;
window.setTimeout(“mesaj()”,hiz);
}
mesaj();
</script>
Kayan yaz› oluflturmak için str de¤iflkeni içerisindeki metinde; öndeki

harfleri s›rayla en arkaya atarsan›z bu durumda kullan›c› yaz›y› hareket-
li olarak alg›lar.
str.substring(1) ifadesini incelersek:

TARAYICI NESNELER‹ 179
Hat›rlayaca¤›n›z gibi substring( ) metodu iki tane parametre almakta,

bu parametreler index numaralar›n› temsil etmekteydi. Bu metotla veri-
len bafllang›ç index numaras› ile bitifl index numaras›n›n bir küçü¤ü ara-
s›ndaki karakterleri almam›z mümkündür. E¤er bu metod ile bir tane pa-
rametre kullan›rsan›z str de¤iflkeninin içerisinde 1. index numaras›ndan
str de¤iflkeninin en büyük index numaras›na sahip karaktere kadar tüm
karakterleri alm›fl oluruz. Asl›nda yap›lan ifllem metinin ilk karakteri d›-
fl›ndaki tüm karakterleri almakt›r.
str.substring(0,1) ifadesini incelersek:
str de¤iflkeni içerisindeki 0 index numaras›na sahip karakteri almak

için kullan›l›r.
Daha sonra bir timer kullan›lm›fl ve mesaj() fonksiyonu 0,2 sn aral›k-

larla çal›flmas› sa¤lanm›flt›r.
mesaj() fonksiyonu her çal›flt›¤›nda str içindeki ilk karakter en sona

konulacak ve durum çubu¤una yazd›r›lacakt›r.
Örnek
Durum çubu¤una karakterlerin tek tek yaz›lmas›.
str=”javascript Dersleri”;
var hiz=100;
var txt=””;
var i=0;
function mesaj()
{
if(i==str.length)
{
i=0;
txt=””;
}
txt+=str.substring(i,i+1);
window.defaultStatus=txt;
i++;
window.setTimeout(“mesaj()”,hiz);
180 JAVASCRIPT
}
mesaj();
</script>
Örne¤imizde durum çubu¤una str de¤iflkeni içerisindeki karakterler

tek tek yaz›lmaktad›r. Oluflturan zamanlay›c› ile mesaj() fonksiyonu
içerisindeki kodlar 0,1 sn aral›klarla çal›flt›r›lacakt›r. Burada str de¤ifl-
keninin içerisinde kaç karakter oldu¤unu str.length ifadesi ile bulma-
m›z mümkün str içerisindeki en büyük index numaras›na sahip karak-
terin index numaras› str.length’den bir küçük olacakt›r.
Bu durumda str.substring(i,i+1) ifadesi ile str içindeki karakter-

ler fonksiyon her çal›flt›¤›nda tek tek al›nacak ve txt de¤iflkenine ata-
nacakt›r. Her defas›nda txt de¤iflkeni ile bir fazla karakter grubunu du-
rum çubu¤una yazd›rd›¤›m›zdan kullan›c› harflerin tek tek yaz›ld›¤› his-
sine kap›l›r.
Burada i de¤iflkeni oluflturmam›z›n nedeni:
i de¤iflkenin bafllang›ç de¤eri: 0 ve txt de¤iflkeni bafllang›çta bofltur.
str.substring(0,1) à str içerisindeki ilk karakteri alacak txt de-

¤iflkeni içerisindeki metin ile birlefltirecek (txt ilk baflta bofl) ve oluflan
de¤er txt de¤iflkenine atanacak.
i de¤iflkeninin de¤eri fonksiyonun bir sonraki çal›flmas›nda kullan›lma-

s› için 1 artt›r›ld›.
Fonksiyonun tekrar çal›fl›nca i de¤iflkeni de¤eri 1 ve txt içerisinde ilk

karakter olan “j” var.
Str.substring(1,2) à str de¤iflkeni içerisindeki ikinci karakteri al›r

ve txt ile birlefltirip tekrar txt de¤iflkenine atar. txt de¤iflkeninin de¤e-
ri txt=”ja” olur. Bu durumda durum çubu¤una “ja” yaz›l›r ve kullan›c›
bu durumu “j” karakterinin yan›na “a” karakteri yaz›lm›fl gibi alg›lar.
i de¤iflkeni str.length oldu¤unda:
str.substring(19,20) à Dikkat ederseniz str içinde 19 index nu-

maras›na sahip eleman yok. En büyük index numaras› 18, bu durumda
txt de¤iflkeninin içini boflalt›p 0 index numaral› elemandan bafllayarak

karakterleri tekrar ayn› flekilde ekrana yazd›rm›fl olaca¤›z.
name
Pencereye bir isim koymak için ya da var olan pencere ismini almak
outerHe›ght, outerW›dth
Taray›c› penceresinin d›fl yüksekli¤ine ya da geniflli¤ine ulaflabilir ya da
ayarlamak için kullanabilirsiniz. window.open() metodunda width,he-
ight ile ayn› ifllemi yapar.
closed
Aç›lan pencerenin kapat›l›p kapat›lmad›¤›n› geriye döndürür.
Nesne Metodlar›
Open ( )
Yeni bir pencere açmak için kullan›l›r.
window.open(“URL”,”name”,”özellikler”)
URL
Aç›lacak URL adresini belirtir. E¤er Bir URL vermezseniz içi bofl bir
pencere aç›l›r.Bu k›sma bir HTML sayfas› adresi ya da http:// ile bafl-
layan web sayfas› adresi yazabilirsiniz.
NAME
target özelli¤inin ayarlanmas› için kullan›l›r.
• _blank: Yeni bir pencerede içeri¤i açar.
• _parent: E¤er link çerçeve içerisinde ise içeri¤i üst çerçeve kümesinde
açar. Tüm çerçeveyi de¤ifltirir.
• _self: ‹çeri¤i, ayn› pencerede açar.
• _top: ‹çerik, ayn› pencerede en üstten bafllayarak aç›l›r.
• name: ‹smi olan herhangi bir frame içinde aç›l›r.
182 JAVASCRIPT
Özellikler
Aç›lacak pencerenin özelliklerini ayarlayabilirsiniz. Belirtilen özellikler
aras›na virgül konmal›d›r. E¤er herhangi bir özellik belirtmemifl iseniz
aç›lacak pencere tüm özelliklere sahip olacakt›r. Özellik ya da özellik-
ler belirtmiflseniz aç›lacak pencere sadece belirtti¤iniz özellik ya da
özelliklere sahip olur.
directories: yes|no|1|0 Aç›lacak pencereye, ba¤lant›lar araç çubu¤u-
nun eklenip eklenmeyece¤ini ayarlamak için kullan›l›r.
fullscreen: yes|no|1|0 Aç›lacak pencerenin tam ekran modunda gös-
terilip gösterilmeyece¤ini ayarlamak için kullan›l›r.
location: yes|no|1|0 Adres çubu¤unun gösterilip gösterilmeyece¤ini
ayarlamak için kullan›l›r.
menubar: yes|no|1|0 Menü araç çubu¤unun gösterilip gösterilmeyece¤i-
ni ayarlamak için kullan›l›r.
scrollbars: yes|no|1|0 Kayd›rma çubuklar›n›n gösterilip gösterilme-
yece¤ini ayarlamak için kullan›l›r.
status: yes|no|1|0 Durum çubu¤unun gösterilip gösterilmeyece¤ini
toolbar: yes|no|1|0 Standart dü¤meleri yani navigasyon araç çubu¤u-
nun gösterilip gösterilmeyece¤ini ayarlamak için kullan›l›r.
titlebar: Yes|no|1|0 Tam ekran modunda bafll›k çubu¤unun gösterilip
gösterilmeyece¤ini ayarlamak için kullan›l›r.
resizable: yes|no|1|0 Aç›lacak pencerenin boyutlanabilir olup olmad›-
¤›n› ayarlamak için kullan›l›r.
width: Aç›lacak pencerenin geniflli¤ini ayarlamak için kullan›l›r. En
düflük 100 de¤eri verilebilir.
height: Aç›lacak pencerenin yüksekli¤ini ayarlamak için kullan›l›r. En
düflük 100 de¤eri verilebilir.
left: Pencerenin yataydaki pozisyonunu ayarlamak için kullan›l›r.
top: Pencerenin dikeydeki pozisyonunu ayarlamak için kullan›l›r.

NOT Bu metodu bir referans ismi vererek afla¤›daki gibi kullanman›z da mümkündür.
Pencereadı = window.open(“URL”,”name”,”özellikler”)
Pencereadı: Aç›lacak pencerenin ad›, bu ad› kullanarak yeni açt›¤›n›z
pencere ile ilgili çeflitli özellik ve metodlar› kullanabilirsiniz.
Örnek 1

<head>
charset=utf-8” />
function open_page()
{
var str =”location=no,menubar=no,toolbar=no,status=no,
resizable=no,width=300,height=100”;
window.open(“js.html”,”_blank”,str);
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”open_page()”>Sayfayı Aç</a>
</body>
</html>
Sayfay› Aç linkine t›kland›¤›nda aç›lacak sayfa afla¤›daki gibi olacakt›r.

184 JAVASCRIPT
Örnek 2
<head>
charset=utf-8” />
{
var str=”location=no,menubar=no,toolbar=no,status=no, â
resizable=no,width=300,height=100”;
yeni_sayfa=window.open(“”,””,str);
yeni_sayfa.document.write(“bu sayfa yeni oluşturuldu”);
// yeni_sayfa isimli bir pencere oluşturmuş olduk.
// yeni_sayfa pencere nesnesine document.write() metodunu kullanarak
// metin yazdırdık
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”open_page()”>Sayfayı Aç</a>
</body>
</html>
yeni_sayfa bir window nes-

nesi oldu¤undan window nes-
nesinin tüm özellik ve metod-
lar›na sahip olacakt›r.
Örnek 3
Bir ana sayfam›z ve üç tane sayfam›z olsun. (js.html, css.html, d.html)
Ana sayfa üzerine aç›lan kutu ve buton yerlefltirelim. Kullan›c› gitmek
istedi¤i sayfay› aç›lan kutudan seçsin ve butona t›klad›¤›nda sayfa ayr›
bir pencerede aç›ls›n.
Ana sayfa

<head>
charset=utf-8” />
fonksiyon open_page()
{
var sayfa=document.getElementById(“sec”).value;
yeni_sayfa=window.open(sayfa,””,”location=no,menubar=no, â
toolbar=no,status=no,
resizable=no,width=400,height=100”);
}
</script>
</head>
<body >
<select id=”sec”>
<option value=”js.html”>javascript</option>
<option value=”css.html”>css</option>
<option value=”d.html”>dhtml</option>
</select>
<input type=”button” value=”sayfayı aç” onclick=”open_page()” />
</body>
</html>
close ( )
Mevcut pencereyi ya da isim verdi¤iniz baflka bir pencereyi kapatmak
186 JAVASCRIPT
Örnek 1
Mevcut pencereyi kapatal›m.

<head>
charset=utf-8” />
function close_page()
{
window.close();
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”close_page()”>Sayfayı Kapat!</a>
</body>
</html>
Örnek 2
pencere.html isimli bir sayfam›z olsun ve bu sayfada:
Pencereyi aç butonuna t›kland›¤›nda
pencere aç›lacak, Pencereyi kapat
butonuna t›kland›¤›nda aç›lan pencere
kapanacak.

<head>
charset=utf-8” />
{
yeni_pencere=window.open(“”,”_blank”,”width=300,height=100”);
yeni_pencere.document.write(“açılan pencere”);
}
{
yeni_pencere.close();
}
</script>
</head>
<body>
<input type=”button” value=”Pencereyi aç” â
onclick=”open_page()” /><br />
<input type=”button” value=”Pencereyi kapat” â
onclick=”close_page()” />
</body>
</html>
Örnek 3
window nesnesinin closed özelli¤ini bir pencerenin kapat›l›p kapat›l-
mad›¤›n› anlamak için kullanmam›z mümkündür.
closed.html isimli sayfam›z:
Kodlar›m›z
188 JAVASCRIPT
<head>
charset=utf-8” />
function closed()
{
if(yeni_pencere.closed==true)
{
document.getElementById(“yaz”).innerHTML=”pencere kapandı”;
}else
{
document.getElementById(“yaz”).innerHTML=”pencere açıldı”;
}
}
{
}
{
yeni_pencere.close();
}
</script>
</head>
<body>
<div style=”background-color:#CCC;width:200px;height:25px;”
id=”yaz”></div>
<input type=”button” value=”Pencereyi aç” â
onclick=”open_page()” /><br />
<input type=”button” value=”Pencereyi kapat” â
onclick=”close_page()” /><br />
<input type=”button” value=”closed Özelliği” â
onclick=”closed()” />
</body>
</html>
pr›nt ( )
Sayfay› yazd›rmak için kullan›lacak metoddur.
Örnek

<head>
charset=utf-8” />
function print_page()
{
window.print();
}
</script>
</head>
<body>
<input type=”button” value=”İçeriği Yazdır” â
onclick=”print_page()” />
</body>
</html>
Kullan›c› içeri¤i Yazd›r butonuna t›klad›¤›nda print diyalog kutusu

ç›kmaktad›r. Bu pencerede yazd›r dendi¤inde sayfa yazd›r›lacakt›r.
focus ( )
Mevcut pencere ya da aç›lan pencereye odaklanmak için kullan›lan me-
toddur.
blur( )
Mevcut pencere ya da aç›lan pencerenin odaklanmas›na son verir.
Örnek
(focus, blur) metodlar›n› inceleyelim.
uygulama.html
<head>
190 JAVASCRIPT

charset=utf-8” />
{
}
function focus_page()
{
yeni_pencere.focus();
document.getElementById(“yaz”).innerHTML=”focus() metodu”;
}
function blur_page()
{
yeni_pencere.blur()
document.getElementById(“yaz”).innerHTML=”blur() metodu”;
}
</script>
</head>
<body>
<div id=”yaz” style=”background-color:#CCC;color:red; â
font-size:16px;visibility:visible;”>
</div>
<a href=”javascript:;” onclick=”open_page()”>Pencereyi aç</a><br />
<a href=”javascript:;” onclick=”focus_page()”>açılan â
pencereye odaklan</a><br />
<a href=”javascript:;” onclick=”blur_page()”>açılan â
pencere için odaklanmaya sonver.</a>
</body>
</html>
alert( )
Daha önceki konular›m›zda s›kça kulland›¤›m›z alert() metodu bir
mesaj kutusu oluflturmak için kullan›l›r.
Mesaj kutusunda birden fazla sat›r göstermek istiyorsan›z \n sat›r bafl›

karakterini kullanmal›s›n›z.
alert(“javascript dersleri\nDHTML Dersleri”);
</script>
192 JAVASCRIPT
prompt( )
Kullan›c›dan bilgi almak için bir girdi kutusu oluflturur.
prompt(“mesaj”,”varsayılan değer”)
prompt() metodu ile geriye gelen de¤er mutlaka bir de¤iflkene atanma-
l›d›r. E¤er varsay›lan de¤er yaz›lmazsa metin kutusu içerisinde “unde-
fined” tan›mlanmam›fl fleklinde bir yaz› görülecektir.
var meslek=prompt(“mesleğiniz?”,”bilgisayar”);
</script>
E¤er Tamam dü¤mesine t›klan›l›rsa meslek de¤iflkenine kullan›c›n›n

girdi¤i null de¤er atan›r. Girdi kutular›nda e¤er ‹ptal (Cancel) dü¤me-
sine t›klan›rsa girdi kutusunu atad›¤›m›z de¤iflkene null de¤eri döndü-
rülür. Girdi kutular›ndan geriye dönen de¤erin veri türü string olacakt›r.
Örnek
var num=prompt(“Bir sayı giriniz”,””);
if(num===5)
{
alert(‘Doğru’);
}
</script>
Kullan›c› girdi kutusuna 5 de¤erini yazarsa if blo¤u çal›flmayacakt›r.

Çünkü kesin eflitlik s›namas›nda de¤erlerin veri türlerine ve de¤erlerine
bak›l›r.
Conf›rm( )
Kullan›c›ya tamam ve iptal (yes, no) dü¤meleri olan bir mesaj kutusu
göstermek için kullan›l›r.
confirm(“mesaj”)
confirm() metodu geriye boolean veri türüne sahip bir de¤er döndür-
dü¤ünden bu de¤erin saklanmas› için bir de¤iflkene eflitlenmelidir. Kul-
lan›c› e¤er tamam dü¤mesine t›klam›fl ise geriye true, iptal dü¤mesine
t›klam›fl ise geriye false de¤eri dönecektir. Kullan›c›n›n yapt›¤› seçime
göre program ak›fl›n› de¤ifltirmek ya da farkl› ifllemler yapmak için kul-
lanabilirsiniz.
Örnek
function page_print()
{
var secim=confirm(“sayfayı yazdırmak istiyormusunuz”);
if(secim)
{
window.print();
}
}
page_print();
</script>
194 JAVASCRIPT
Kullan›c› Tamam dü¤mesine t›klad›¤›nda bilgi de¤iflkeni true de¤eri-

ni alacak ve sayfa yazd›r›lacak. Kullan›c› ‹ptal dü¤mesine t›klam›fl ise
bilgi de¤iflkeni false de¤erini alacak ve sayfa yazd›r›lmayacakt›r.
res›zeBy( )
Pencerenin mevcut olan genifllik ve yüksekli¤ini sol üst köfleyi sabit tu-
tarak, istedi¤iniz miktarda artt›rmak/azaltmak için kullan›l›r.
resizeBy(width,height)
Örnek

<head>
charset=utf-8” />
function resizeBy_page()
{
window.resizeBy(-300,-200);
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”resizeBy_page()”>resizeBy</a>
</body>
</html>
resizeBy linkine t›kland›¤›nda pencerenin geniflli¤i 300px ve yüksekli-

¤i 200px azalt›lacak.
res›zeTo( )
Pencerenin genifllik ve yüksekli¤ini yeniden ayarlamak için kullan›l›r.
resizeTo(width,height)
Örnek

<head>
charset=utf-8” />
function resizeTo_page()
{
window.resizeTo(300,200);
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”resizeTo_page()”>resizeTo</a>
</body>
</html>
Pencerenin geniflli¤i 300px ve yüksekli¤i 200px olarak yeniden ayar-

land›.
moveBy( )
Pencerenin mevcut sol üst köflesinin (orijin noktas›) koordinatlar›n› is-
tedi¤imiz miktarda artt›rmak/azaltmak için kullan›l›r.
window.moveBy(x,y)
Örnek
<head>
charset=utf-8” />
function moveBy_page()
196 JAVASCRIPT
{
window.moveBy(300,200);
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”moveBy_page()”>moveBy</a>
</body>
</html>
moveTo( )
Pencerenin sol üst köflesinin koordinatlar›n› yeniden ayarlamak için
kullan›l›r.
window.moveTo(x,y)
Örnek

<head>
charset=utf-8” />
function moveTo_page()
{
window.moveTo(-300,-200);
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”moveTo_page()”>moveTo</a>
</body>
</html>
NOT ‹nternet Explorer 7’de e¤er birden fazla sekme aç›k ise resizeBy, re-
sizeTo, moveBy, moveTo metodlar› çal›flmayacakt›r.
ScrollBy( )
Yatayda ve dikeyde kayd›rma çubuklar›n›n mevcut konumunu artt›r-
mak/azaltmak için kullan›l›r.
window.scrollBy(h,v)
h: Yatay kayd›rma çubu¤unun hareketi için de¤er +/- olabilir.
v: Dikey kayd›rma çubu¤unun hareketi için de¤er +/- olabilir.
Yatay kayd›rma çubu¤unun bafllang›ç noktas› sol köfle, dikey kayd›rma

çubu¤unun bafllang›ç noktas› üst köfle olacakt›r.
Örnek

<head>
charset=utf-8” />
function art()
{
window.scrollBy(10,20);
}
function azal()
{
window.scrollBy(-10,-20);
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”art()”>Arttır</a><br />
<a href=”javascript:;” onclick=”azal()”>Azalt</a>
</body>
</html>
198 JAVASCRIPT
ScrollTo( )
Yatayda ve dikeyde kayd›rma çubuklar›n› istedi¤imiz konuma ayarla-
window.scrollBy(yataydaki konumu , dikeydeki konumu)
nav›gator Nesnesi
Kullan›c› taray›c›s› hakk›nda bilgi almak için kullan›l›r. Taray›c›n›n ad›
ve di¤er bilgilere bu nesne ile ulaflmam›z mümkün olacakt›r.
Nesne Özellikleri
appCodeName
Taray›c›n›n kod ad›n› verir. Örne¤in; ‹nternet Explorer, Mozilla Fi-
refox, Opera vb taray›c›larda bu özelli¤in geriye döndürdü¤ü de¤er
(Mozilla) olacakt›r.
Örnek
document.write(navigator.appCodeName);
// Mozilla
</script>
appName
Taray›c› ad›n› geriye döndürecektir.
Örnek
document.write(navigator.appName);
// Microsoft Internet Explorer
</script>
appVers›on
Taray›c› versiyonunu (ve Platform hakk›nda bilgi) geriye döndürür.
Örnek
document.write(navigator.appVersion);
</script>
Sonuç
4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727;
.NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
browserLanguage
Taray›c› dilini geriye döndürür.
Örnek
document.write(navigator.browserLanguage);
// sonuç:tr
</script>
cook›eEnabled
Taray›c›n›n çerezleri destekleyip desteklemedi¤ini geriye döndürür.
E¤er true ise taray›c› çerezleri destekler, false ise desteklemez.
Örnek
Kullan›c› taray›c›s›n›n Internet Explorer versiyonunu bulma;
// Microsoft Internet Explorer için versiyon denetlemesi
var versiyon=navigator.appVersion;
var difade=/(\d{1}\.\d{1};)/g;
var dizi=versiyon.match(difade);
var kisaversiyon=parseFloat(dizi[0]);
switch(kisaversiyon)
{
case 5.0:
alert(“Internet Explorer 5.0”);
break;
case 6.0:
break;
case 7.0:
break;
200 JAVASCRIPT
case 8.0:
break;
}
</script>
navigator.appVersion bilgisi afla¤›daki gibi olacakt›r.
4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727;

.NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Bizim için önemli olan k›sm› yani versiyon bilgisi MSIE kelimelerinin
peflinden gelen bilgidir. Bu bilgiyi almak için düzenli bir ifade olufltur-
dum ve versiyon de¤iflkeni içerisinde düzenli ifadeyle eflleflen ilk metin
parças›n› ald›m. (7.0 ;) Burada noktal› virgül dikkatinizi çekmifltir.
Noktal› virgülü eflleflme için kulland›k. Bu noktal› virgülden kurtulmak
için parseFloat( ) fonksiyonunu kullanabilirsiniz. Daha sonra s›na-
malar› yap›p sonucu yazd›rd›k.
3. screen Nesnesi
Kullan›c›n›n görüntü ekran› hakk›nda bilgi almak için kullan›l›r.
Nesne Özellikleri
ava›lHe›ght
Kullan›c› ekran›n›n yüksekli¤ini geriye döndürür. (Görev çubu¤u hariç)
Örnek
document.write(screen.availHeight);
// ekran çözünürlüğü:1280*800
// screen.availHeight geriye 770 değerini döndürür.
</script>
ava›lW›dth
Kullan›c› ekran›n›n geniflli¤ini geriye döndürür. (Görev çubu¤u hariç)
He›ght
Kullan›c› ekran›n›n yüksekli¤ini geriye döndürür.
Örnek
document.write(screen.height);
// screen.Height geriye 800 değerini döndürür.
</script>
W›dth
Kullan›c› ekran›n›n geniflli¤ini geriye döndürür.
Örnek
document.write(screen.width);
// screen.width geriye 1280 değerini döndürür.
</script>
colorDepth
Kullan›c›n›n ekran› için tan›mlanm›fl renk derinli¤ini (renk kalitesini)
bit olarak geriye döndürür.
Sistem ekran›m›z yukar›daki flekilde ayarl› olsun. Sistem ekran›nda kul-

lan›lan renk kalitesini Javascript yard›m›yla bulal›m.
document.write(screen.colorDepth);
// sonuç:32
</script>
Örnek
202 JAVASCRIPT
document.write(“Sistem Ekranında Kullanılan alan=”);

document.write(screen.availWidth+”*”+screen.availHeight+”<br>”);
document.write(“Sistem Ekran Çözünürlüğü=”);
document.write(screen.width+”*”+screen.height+”<br>”);
document.write(“Sistem Ekran Derinliği=”);
document.write(screen.colorDepth);
</script>
Sonuç
Sistem Ekran›nda Kullan›lan alan = 1280*770
Sistem Ekran Çözünürlü¤ü = 1280*800
Sistem Ekran Derinli¤i = 32
h›story Nesnesi
Taray›c›n›n geçmifl (history) kayd›nda bulunan URL dizisi ile ilgili ifl-
lem yapmak için kullan›l›r. History kayd›nda bulunan URL’ler taray›c›
penceresi içinde önceden ziyaret edilmifl sayfa adresleridir. History
nesnesini window nesnesi ile beraber kullanman›z gerekir.
window.history
Nesne Özellikleri
length
Taray›c›n›n geçmifl kayd›nda bulunan URL say›s›n› geriye döndürür.
Örnek
document.write(window.history.length);
</script>
Nesne Metodlar›
back()
Bu metod geçmifl kayd›nda bulunan bir önceki URL’yi taray›c›ya yük-
ler. Taray›c›da bulunan BACK (Geri) tuflu ile ayn› ifllemi yerine getirir.
forward()
Bu metod geçmifl kayd›nda bulunan bir sonraki URL’yi taray›c›ya yükler.
Taray›c›da bulunan ileri tuflu ile ayn› ifllemi yerine getirir. Afla¤›daki ör-
ne¤imizde ileri ve geri butonlar› yard›m›yla geçmifl kayd›nda bulunan
URL dizisi aras›nda gezinti yapabiliriz.
Örnek

<head>
charset=utf-8” />
function ileri()
{
window.history.forward();
}
function geri()
{
window.history.back()
}
</script>
</head>
<body>
<input type=”button” value=”İleri>>” onclick=”ileri()” />
<input type=”button” value=”Geri<<” onclick=”geri()” />
</body>
</html>
go()
Bu metod ile geçmifl kayd›nda bulunan istedi¤iniz URL’yi pencereye
yükleyebilirsiniz.
204 JAVASCRIPT
Örnek
Kodlar›m›z

<head>
charset=utf-8” />
function geri()
{
window.history.go(-1);
}
</script>
</head>
<body>
<input type=”button” value=”Bir önceki sayfa<<” â
onclick=”geri()” />
</body>
</html>
Yukar›daki örnekte go(-1) bir önceki URL’yi pencereye yükleyecektir.
locat›on Nesnesi
Taray›c›da görüntülenen sayfa ile ilgili adres (URL) ve konum bilgi-
lerine ulaflmak için kullan›l›r.
Ayr›ca taray›c›da yüklü olan sayfay› bu metodu kullanarak de¤ifltirme-

niz mümkündür.
Nesne Özellikleri
hash
E¤er sayfa içi bir çapa oluflturmufl iseniz diyez (#) iflaretini kullanmal›-
s›n›z. URL içerisinde # (diyez) ile bafllayan bir çapa adresi mevcut ise
çapa ile bafllayan adresi okuyabilir ya da de¤ifltirebilirsiniz.
Örnek
‹çerisinde çapa olan bir sayfa olufltural›m. Amac›m›z çapa adresini div
içerisine yazd›rmak olsun. Bunun için bir div oluflturduk. Burada dikkat
etmeniz gereken URL adresi içerisinde # ile bafllayan bir metin parças›-
n›n bulunmas› olacakt›r.
Sayfa ilk yüklendi¤inde adres sat›r›nda diyez ile bafllayan bir metin
parças› bulunmamaktad›r. Bunun için Çapaya Git linkine t›klayal›m.
Adres sat›r›na dikkat ederseniz URL içerisinde diyez ile bafllayan bir
metin parças› bulunmaktad›r.
Daha sonra Çapa ad›n› yaz linkine t›klad›¤›n›zda div içerisine adres
çubu¤unda gözüken çapa ad› yazd›r›l›r.
206 JAVASCRIPT
Kodlar›m›z

<head>
charset=utf-8” />
div
{
visibility:visible;
border-style:solid;
border-width:thin;
border-color:gray;
width:100px;
}
</style>
function goster()
{
document.getElementById(“yaz”).innerHTML=window.location.hash;
}
</script>
</head>
<body>
<div id=”yaz”></div>
<p><a name=”ust” id=”ust”></a></p>
<p></p>
<p></p>
<a href=”javascript:;” onclick=”goster();”>Çapa adını yaz</a> ||
<a href=”#ust”>Çapaya Git</a>
</body>
</html>
Bu özelli¤i kullanarak URL içerisinde bulunan diyez (#) ile bafllayan

karakter katar›n› de¤ifltirmemiz mümkündür.
href
Bu metod yüklü olan URL adresini geriye döndürür.
Örnek

<head>
charset=utf-8” />
div
{
visibility:visible;
border-style:solid;
border-width:thin;
border-color:gray;
width:500px;
}
</style>
function goster()
{
document.getElementById(“yaz”).innerHTML=window.location.href;
}
</script>
</head>
<body>
208 JAVASCRIPT
<a href=”javascript:;” onclick=”goster();”>URL’yi Göster</a>
</body>
</html>
URL’yi Göster linkine t›kland›¤›nda div içerisine yüklü olan url adresi-
nin tamam› yaz›lacakt›r.
search
URL içerisinde ? (soru iflareti) ile bafllayan metin parças›n› okuyabilir
ya da de¤ifltirebilirsiniz.
window.location.search
fleklinde kullan›l›r.
protocol
Taray›c›da yüklü olan URL adresinin protokolünü ö¤renmek için kulla-
n›l›r. (file:, http:)
Örnek
Kodlar›m›z

<head>
charset=utf-8” />
div
{
visibility:visible;
border-style:solid;
border-width:thin;
border-color:gray;
width:500px;
}
</style>
function goster()
{
if(window.location.protocol==”http:”)
{
document.getElementById(“yaz”).innerHTML=”Görüntülenen belge â
internet üzerinde saklanıyor”+”(“+ window.location.protocol+”)”;
}else{
document.getElementById(“yaz”).innerHTML=”Görüntülenen belge â
sabit disk üzerinde saklanıyor”+”(“+ window.location.protocol+”)”;
}
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”goster();”>Belge Konumunu â
Göster</a>
</body>
</html>
pathname
Taray›c›da yüklü olan sayfa ile ilgili yol ve dosya bilgilerini verir.
210 JAVASCRIPT
Nesne Metodlar›
ass›gn( )
Taray›c› penceresine yeni bir sayfa yüklemek için kullan›l›r.
window.location.assign(“URL”)
Örnek

<head>
charset=utf-8” />
function load_page()
{
var str=document.getElementById(“txt1”).value;
var str=”http://”+str;
window.location.assign(str);
}
</script>
</head>
<body>
<input type=”text” id=”txt1” />
<a href=”javascript:;” onclick=”load_page();”>Sayfayı â
Pencereye Yükle</a>
</body>
</html>
Kullan›c›n›n metin kutusuna girdi¤i URL taray›c› penceresine yüklene-

cektir.
reload( )
Taray›c› penceresinde bulunan sayfay› yeniler, yani yeniden yükler.
Örne¤imizde Sayfay› yenile linkine t›kland›¤›nda, sayfa taray›c› pence-

resine yeniden yüklenir.
Örnek

<head>
charset=utf-8” />
function reload_page()
{
window.location.reload();
}
</script>
</head>
<body>
<input type=”button” value=”Sayfayı Yenile” â
onclick=”reload_page();”/>
</body>
</html>
replace( )
Taray›c› penceresinde yüklü olan güncel sayfay› (belgeyi) bir baflka
sayfa ile de¤ifltirmek için kullan›l›r.
window. location. replace(“yeniURL”)
document Nesnesi
Belgeyi yani doküman› temsil etmektedir. Sayfadaki elemanlara ulafl-
mak için kullan›l›r. document nesnesi window alt nesnesi oldu¤undan
window.document ya da tek bafl›na document fleklinde kullanman›z
mümkün olacakt›r.
Nesne Özellikleri
anchors[]
Belge içerisinde kullan›lm›fl çapa bilgilerini bir dizi olarak saklar. Say-
fada kaç tane çapa kullan›ld›¤›n› bulan örne¤imize bakal›m.
212 JAVASCRIPT
Kodlar›m›z

<head>
charset=utf-8” />
function islem()
{
alert(“Çapa sayısı\n”+document.anchors.length);
}
</script>
</head>
<body>
<a name=”top1” id=”top1”></a>
<a href=”javascript:;” onclick=”islem();”>Çapa sayısı</a>
</body>
</html>
Linke t›kland›¤›nda afla¤›daki sonuç al›n›r.
l›nks[]
Belge içerisinde kullan›lm›fl link bilgilerini (say›s›n›) bir dizi olarak sak-
lar. Afla¤›daki örnekte sayfa içerisinde kullan›lm›fl link say›s›n› bulaca¤›z.

<head>
charset=utf-8” />
function islem()
{
alert(“Link sayısı\n”+document.links.length);
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”islem();”>Link sayısı</a>
</body>
</html>
Linke t›kland›¤›nda afla¤›daki sonuç al›n›r.
body
body eleman›na eriflmek için kullan›l›r. Örnek olarak renk de¤ifltir lin-
kine t›kland›¤›nda sayfa arka plan rengini de¤ifltirelim.
Örnek 1

<head>
charset=utf-8” />
214 JAVASCRIPT
function islem()
{
document.body.bgColor=”gray”;
// linke tıklandığında sayfa artalan rengi gri olacaktır.
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”islem();”>Renk Değiştir</a>
</body>
</html>
Örnek 2
Sayfam›zda Renk De¤ifltir isimli bir link olsun ve bu linke t›kland›¤›nda
her saniye bafl›nda arka plan rengi otomatik olarak de¤iflsin.

<head>
charset=utf-8” />
var i=0;
function islem()
{
var renk=[“gray”,”blue”,”black”,”red”];
document.body.bgColor=renk[i];
window.setTimeout(“islem()”,1000);
if(i==3)
{
i=0;
}
i++;
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”islem();”>Renk Değiştir</a>
</body>
</html>
t›tle
Belge bafll›¤›na ulaflabilir ya da de¤ifltirebilirsiniz. Örnek olarak De¤ifl-
tir linkine t›kland›¤›nda belirledi¤imiz mesajlar›n sayfa bafll›¤›nda de-
¤iflerek gösterilmesi için bir uygulama yapal›m.

<head>
charset=utf-8” />
var i=0;
function islem()
{
var mes=[“Programlama”,”javascript”,”DHTML”,”css”];
document.title=mes[i]
if(i==3)
{
i=0;
}
i++;
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”islem();”>Değiştir</a>
</body>
</html>
216 JAVASCRIPT
Nesne Metodlar›
getElementById()
S›kça kulland›¤›m›z bu metod sayfa içerisinde id özelli¤i kullan›lm›fl ele-
manlara ulaflmam›z› sa¤lar. Belirtilen id özelli¤ine sahip eleman›n refe-
rans› al›n›r. E¤er sayfa içerisinde birden fazla eleman ayn› id de¤erine sa-
hip ise bu metod tan›mlanm›fl ilk eleman›n referans›n› al›r. Bu metod ile
sayfada bulunan elemanlara ulaflabilir ve özelliklerini de¤ifltirebilirsiniz.
document.getElementById(“id”).(özellik/metodlar)
Örnek

<head>
charset=utf-8” />
function islem()
{
document.getElementById(“yaz”).innerHTML=”Olaylar(Events)”;
}
</script>
</head>
<body>
<a href=”javascript:;” onclick=”islem();”>Yaz!</a>
</body>
</html>
Sonuçta linke t›kland›¤›nda:

Olaylar(Events)
Yaz!
Yukar›daki örne¤imizde id özelli¤ine “yaz” de¤eri atanm›fl sayfa ele-

man›na, innerHtml özelli¤ini kullanarak bir metin atad›k.
getElementByName()
Sayfa içerisinde belirtilen ismi kullanm›fl elemanlar›n listesini dizi olarak
saklar. Ayn› ismi kullanm›fl elemanlara ulaflman›z mümkün olacakt›r.
document.getElementByName(“name”).(özellik/metodlar)
Afla¤›daki örne¤imizde sayfada ayn› isme sahip elemanlar›n say›s›n›

bulal›m.
Örnek

<head>
charset=utf-8” />
function islem()
{
alert(document.getElementsByName(“sec”).length);
// sonuç:2 olacaktır.
}
</script>
</head>
<body>
Renkler:<br />
<input type=”checkbox” name=”sec” value=”Kırmızı” />Kırmızı<br />
<input type=”checkbox” name=”secim” value=”Mavi” />Mavi:<br />
Renk Adı Yazınız?<br />
<input type=”text” name=”sec” />
<input type=”button” value=”işlem_yap” onclick=”islem()”
/>
</body>
</html>
Ayr›ca ayn› isme sahip elemanlar liste olarak sakland›klar›ndan item()

metoduyla bu elemanlara ulaflmam›z mümkün olacakt›r.
218 JAVASCRIPT
Örnek

<head>
charset=utf-8” />
function islem()
{
document.getElementsByName(“sec”).item(1).style.background-
Color=”gray”;
// item(1) name özelliğine “sec” değeri atanmış ikinci elemandır
}
</script>
</head>
<body>
Renkler:<br />
<input type=”checkbox” name=”sec” value=”Kırmızı” />Kırmızı<br />
<input type=”checkbox” name=”secim” value=”Mavi” />Mavi:<br />
Renk Adı Yazınız?<br />
<input type=”text” name=”sec” />
/>
</body>
</html>
Sonuç
getElementByTagName()
Sayfa içerisinde belirtilen etiket ismine sahip elemanlar›n listesini verir.
Ayn› etiket ad›na sahip elemanlara toplu bir flekilde ulaflman›z mümkün
olacakt›r.
document. getElementByTagName(“name”).(özellik/metodlar)
Afla¤›daki örne¤imizde sayfada kaç tane p eleman› kullan›ld›¤›n› bulal›m.
Örnek 1

<head>
charset=utf-8” />
function islem()
{
alert(document.getElementsByTagName(“p”).length);
// sonuç:3
}
</script>
</head>
<body>
<p></p>
<p></p>
<p></p>
/>
</body>
</html>
Örnek 2
Sayfadaki p elemanlar›n›n arka plan renklerini 1sn aral›klarla sar› yapa-
ca¤›z.
220 JAVASCRIPT

<head>
charset=utf-8” />
var i_islem=0;
function islem()
{
var say=document.getElementsByTagName(“p”).length;
document.getElementsByTagName(“p”).item(i_islem).style.backg-
roundColor=”yellow”;
i_islem++;
}
</script>
</head>
<body>
<p>Birinci Satır</p>
<p>İkinci Satır</p>
<p>Üçüncü Satır</p>
<input type=”button” value=”Renklendir” onclick=”islem()”
/>
</body>
</html>
wr›te(), wr›teln()
write() ve writeln() metodlar› sayfaya karakter grubu ya da html ele-
manlar› içeren metin (html kaynakl› içerik) yazd›rmak için kullan›l›r.
writeln( ) metodu yeni sat›r karakteri içermektedir. Yani writeln()
metodu sayfaya içeri¤i yazd›ktan sonra imleci bir alt sat›ra konumland›r›r.
Örnek
document.write(“yazı”);
document.write(“metin”,” “,”<strong>içerik</strong>”);
</script>
Sonuç
yazımetin içerik
write() metodunda ayn› anda birden fazla içerik sayfaya yazd›r›labilir

bunun için araya virgül koyup içerikleri yazmal›s›n›z.
document.write(“”) metodunda örne¤in bir string yani karakter kata-

r› yazd›racaksan›z bunu çift t›rnak içine alman›z gerekecek. E¤er docu-
ment.write() metoduyla ekrana number ya da de¤iflken yazd›racaksak
çift t›rnak kullanmayaca¤›z, çift t›rnak kullan›rsak içine yazd›¤›m›z
number ya da de¤iflken terimini karakter katar› olarak ekrana yazd›r›r,
ki biz bunu istemeyiz.
Bu metotlarla (\, “”, ‘) özel karakterlerini ekrana string olarak yazd›rmak

istersek bu karakterleri önüne \ karakterini koymam›z yeterli olacakt›r.
Event Nesnesi
Event nesnesi tetiklenen olay ile ilgili bilgi almam›z› sa¤layan bir DOM
(Document Object Model) nesnesidir. Kullan›c›n›n bast›¤› klavye tuflu,
mouse tuflu ya da mouse iflaretçisinin konumu ile ilgili bilgileri event
nesnesi sayesinde ö¤renebilirsiniz.
Nesne Özellikleri
altKey Özelli¤i
Bir olay gerçekleflti¤inde ALT tufluna bas›l›p bas›lmad›¤›n› geriye dön-
222 JAVASCRIPT
dürür. event.altKey=true|false, e¤er true de¤eri dönerse ALT tuflu

bas›l›, false de¤eri dönerse ALT tuflu bas›l› de¤ildir.
Örnek

<head>
charset=utf-8” />
div
{
width:150px;
height:100px;
}
</style>
function islem()
{
if(event.altKey==true)
{
alert(“ALT tuşu basılı”);
}else{
alert(“ALT tuşu basılı değil”);
}
}
</script>
</head>
<body>
<div onmousedown=”islem();”>Mouse ile Tıklayınız</div>
</body>
</html>
Yukar›daki örne¤imizde “Mouse ile T›klay›n›z” yazan alanda (div),

mouse SOL tuflu ile beraber ALT tufluna basarsan›z “ALT tuflu bas›l›”
fleklinde bir mesaj alacaks›n›z.
ctrlKey Özelli¤i
Bir olay gerçekleflti¤inde CTRL tufluna bas›l›p bas›lmad›¤›n› geriye dön-
dürür.
event.ctrlKey=true|false, e¤er true de¤eri dönerse CTRL tuflu ba-

s›l›, false de¤eri dönerse CTRL tuflu bas›l› de¤ildir.
Örnek

<head>
charset=utf-8” />
div
{
width:150px;
height:100px;
224 JAVASCRIPT
}
</style>
function islem()
{
if(event.ctrlKey==true)
{
alert(“CTRL tuşu basılı”);
}else{
alert(“CTRL tuşu basılı değil”);
}
}
</script>
</head>
<body>
</body>
</html>
Yukar›daki örne¤imizde “Mouse ile T›klay›n›z” yazan alanda (div),

mouse SOL tuflu ile beraber CTRL tufluna basarsan›z “CTRL tuflu bas›l›”
sh›ftKey Özelli¤i
Bir olay gerçekleflti¤inde SHIFT tufluna bas›l›p bas›lmad›¤›n› geriye
döndürür.
event.shiftKey=true|false, e¤er true de¤eri dönerse SHIFT tuflu

bas›l›, false de¤eri dönerse SHIFT tuflu bas›l› de¤ildir.
Örnek

<head>
charset=utf-8” />
div
{
width:150px;
height:100px;
}
</style>
function islem()
{
if(event.shiftKey==true)
{
alert(“SHIFT tuşu basılı”);
}else{
alert(“SHIFT tuşu basılı değil”);
}
}
</script>
</head>
<body>
</body>
</html>
Yukar›daki örne¤imizde Mouse ile T›klay›n›z yazan alanda (div), Mo-

use SOL tuflu ile beraber SHIFT tufluna basarsan›z “SHIFT tuflu bas›l›”
keyCode Özelli¤i
Bir olay gerçekleflti¤inde klavyeden bas›lan tuflun unicode de¤erini ge-
riye döndürür. onKeypress olay›nda event.keyCode özelli¤i büyük
harflerin ve küçük harflerin unicode de¤erlerini döndürecektir.
onKeyDown ve onKeyUp olaylar›nda event.keyCode özelli¤i; hem bü-

yük harfler için hem de küçük harfler için sadece büyük harf unicode
de¤erini geriye döndürür.
Örnek
onKeypress olay›nda event.keyCode özelli¤ini kullanal›m.
226 JAVASCRIPT

<head>
charset=utf-8” />
div
{
width:75px;
height:50px;
font-size:25px;
color:blue;
}
</style>
function islem(event)
{
var deger=event.keyCode;
var harf=String.fromCharCode(deger);
document.getElementById(“yaz”).innerHTML=harf;
}
</script>
</head>
<body>
<input type=”text” id=”txt1” onkeypress=”islem(event);”/>
</body>
</html>
Sonuç
Dikkat ederseniz onKeypress olay›nda keyCode özelli¤i, büyük harf ve

küçük harf unicode de¤erlerini ayr› ayr› göndermektedir. Yani metin ku-
tusuna küçük “a” yazd›¤›n›zda div içerisine küçük “a” yaz›lacakt›r. Me-
tin kutusuna büyük “A” yazd›¤›n›zda div içerisine büyük “A” yaz›l›r.
Örnek
onKeyDown olay› ile event.keyCode özelli¤ini kullanal›m.

<head>
charset=utf-8” />
div
{
width:75px;
height:50px;
font-size:25px;
color:blue;
}
</style>
function islem(event)
{
var num=event.keyCode;
var harf=String.fromCharCode(num);
document.getElementById(“yaz”).innerHTML=harf;
}
</script>
</head>
<body>
<input type=”text” id=”txt1” onkeydown=”islem(event);”/>
</body>
</html>
228 JAVASCRIPT
Kullan›c› taraf›ndan bas›lan karakterin

unicode de¤eri al›nd› ve num isimli de-
¤iflkene atand›. keyCode özelli¤i on-
KeyDown, onKeyUp olaylar›nda hem
büyük hemde küçük harfler için büyük
harflerin unicode de¤erlerini döndürür.
Örne¤imize bakarsak kullan›c› taraf›ndan metin kutusuna girilen de¤er

“a” karakteridir. Fakat event.keyCode özelli¤i onKeyDown olay› ile
kullan›ld›¤›ndan geriye “A” karakterinin unicode de¤erini döndürür.Bu
durumda div içerisinde “A” karakteri gözükecektir.
Button Özelli¤i
Bir olay gerçekleflti¤inde hangi mouse tufluna bas›ld›¤›n› geriye döndür.
Firefox-Opera taray›c›lar› için event.button özelli¤inin ald›¤› de¤erler:
Ald›¤› De¤er Aç›klama

0 Sol tufl bas›ld›¤›nda
1 Orta tufl (tekerlek) bas›ld›¤›nda
2 Sa¤ tufl bas›ld›¤›nda
Internet Explorer için event.button özelli¤inin ald›¤› de¤erler:
Ald›¤› De¤er Aç›klama

1 Sol tufl bas›ld›¤›nda
4 Orta tufl (tekerlek) bas›ld›¤›nda
2 Sa¤ tufl bas›ld›¤›nda
Örnek
Örne¤imizi Internet Explorer için yapal›m.

<head>
charset=utf-8” />
#click
{
background-color:#FFC;
border-style:solid;
border-color:#903;
width:50px;
height:50px;
border-width:thin;
}
#yaz
{
background-color:#F2F2F2;
border-style:solid;
border-color:#333;
width:170px;
height:30px;
}
</style>
function mouse_event()
{
var num=event.keyCode;
var harf=String.fromCharCode(num);
document.getElementById(“yaz”).innerHTML=””;
if(event.button==1)
{
document.getElementById(“yaz”).innerHTML=”Sol tuş basıldı”;
}else if(event.button==2){
document.getElementById(“yaz”).innerHTML=”Sağ tuş basıldı”;
}else{
document.getElementById(“yaz”).innerHTML=”Orta(Tekerlek)
tuş basıldı”;
}
}
230 JAVASCRIPT
</script>
</head>
<body>
Mouse tuşu İle tıklayınız !<br />
<div id=”click” onmousedown=”mouse_event();”></div><br />
Sonuç:<br />
</body>
</html>
Sayfam›za bakarsak:
Örne¤imizde kullan›c› Mouse tuflu ‹le t›klay›n›z metininin alt›nda bulu-

nan div üzerinde farenin hangi tufluna basarsa id=”yaz” olarak tan›m-
lanm›fl div içerisine bast›¤› tufl yazd›r›lmaktad›r.
screenX, screenY Özellikleri

Kullan›c›n›n bilgisayar ekran›na göre fare iflaretçisinin konumunu ö¤re-
nebilirsiniz.
event.screenX: Fare iflaretçisinin soldan uzakl›¤›.

event.screenY: Fare iflaretçisinin üsten uzakl›¤›.
cl›entX, cl›entY Özellikleri

Taray›c› penceresinin içerik (Doküman) k›sm›nda fare iflaretçisinin ko-
numunu ö¤renebilirsiniz.
event.clientX: Fare iflaretçisinin soldan uzakl›¤›.

event.clientY: Fare iflaretçisinin üsten uzakl›¤›.
232 JAVASCRIPT
ZAMANLAYICILAR
12
Javascript’te Zamanlay›c›lar 233
setTimeout() 233
clearTimeout() 236
setinterval() 238
clearinterval() 240
Javascript’te belirli zaman aral›klar›yla istedi¤iniz kod bloklar›n› çal›fl-

t›rmak isteyebilirsiniz ya da bir kod blo¤unu belirli bir gecikme ile ça-
l›flt›rman›z mümkündür. Anlat›lanlar ya da benzeri durumlarda window
nesnesinin metodlar› olan zamanlay›c›lar› kullanabilirsiniz.
Javascr›pt’te Zamanlay›c›lar
setT›meout()
Kod ya da kod bloklar›n› belirtilen zaman sonunda yaln›z bir kere çal›fl-
t›rmak için kullan›l›r.
window. setTimeout(“kodlar”,zaman)
ya da
var zaman= window.setTimeout(“kodlar”,zaman)
Bu metodu bir de¤iflkene atayabilirsiniz. Zamanlay›c›y› iptal etmek için

zamanlay›c› kimlik numaras›n› (yani de¤iflken ad›n›) kullanaca¤›z. Za-
man de¤eri milisaniye cinsinden bir de¤er olmal›d›r.
234 JAVASCRIPT
Örnek
window.setTimeout(“zaman()”,1000);
function zaman()
{
alert(“Zamanlayıcılar”);
}
// dikkat ederseniz 1sn sonra zaman() isimli fonksiyon 1
defa çalıştırıldı.
</script>
Dikkat ederseniz 1 sn sonunda zaman() fonksiyonu çal›flt›r›ld›. fiunu

düflünmeyin! setTimeout() kesinlikle kal›c› bir zamanlay›c› olufltur-
maz. Yani setTimeout() metodu belirtilen zaman sonunda kod grubu-
nu sadece 1 defa çal›flt›r›r. Daha sonra bu eylemi tekrar etmez.
E¤er setTimeout() metodunu bir fonksiyon içerisine koyarsan›z ve

belirli bir zaman aral›¤› ile bu fonksiyonu çal›flt›rmas›n› isterseniz bu
durumda kal›c› bir zamanlay›c› oluflturmufl olursunuz. Fonksiyon her
çal›flt›¤›nda bu metodu okuyaca¤›ndan setTimeout() metodumuz sü-
rekli çal›flacakt›r.
Örnek
Bir div içerisine 0 ile 50 aras›ndaki rakamlar› yazan kod grubunu set-
Timeout() metodunu kullanarak yazal›m.
Say dü¤mesine t›kland›¤›nda div içerisine say›lar 0’dan bafllanarak ya-

z›lacak.
Kodlar›m›z

<head>
charset=utf-8” />
ZAMANLAYICILAR 235
#yaz
{
border-style:solid;
border-color:#333;
width:50px;
height:50px;
text-align:center;
color:blue;
visibility:visible;
font-size:30px;
vertical-align:middle;
}
</style>
var i_zaman=0;
function zaman()
{
document.getElementById(“yaz”).innerHTML=i_zaman;
if(i_zaman==50)
{
return;
}
i_zaman++;
window.setTimeout(“zaman()”,1000);
}
</script>
</head>
<body>
<input type=”button” value=”|Say|” onclick=”zaman();” />
</body>
</html>
236 JAVASCRIPT
Sayfam›z›n görüntüsü:
Örne¤imize dikkat ederseniz metodumuz, zaman() isimli fonksiyon

içerisinde tan›ml›d›r. Yani zaman() fonksiyonu çal›flt›r›ld›¤›nda meto-
dumuz çal›flacak ve 1sn sonra tekrar zaman() fonksiyonunu çal›flt›ra-
cak. Bu flekilde b›rak›rsan›z 1sn aral›klarla zaman() fonksiyonu setTi-
meout() metodu taraf›ndan sürekli çal›flt›r›l›r. Örne¤imizde i_zaman
de¤iflkeninin de¤eri zaman() fonksiyonu her çal›flt›¤›nda 1 artacakt›r.Bu
durumda i_zaman=50 oldu¤unda fonksiyondan ç›k›larak setTime-
out() metodunun çal›flt›r›lmas› durdurulmufltur.
clearT›meout()
setTimeout() metoduyla oluflturulmufl zamanlama ifllemini iptal eder.
clearTimeout() metodunu kullanmak için setTimeout() metodunun
bir de¤iflkene atanm›fl olmas› gerekir.
Afla¤›daki örne¤imizde sayfam›zda bir div ve iki tane buton bulunmak-

tad›r. Say butonuna t›kland›¤›nda div içerisine say›lar pefli s›ra yaz›la-
cakt›r. Durdur butonuna t›kland›¤›nda sayma ifllemi sona erecektir.
Örnek
Kodlar›m›z
<head>
ZAMANLAYICILAR 237

charset=utf-8” />
#yaz
{
border-style:solid;
border-color:#333;
width:50px;
height:50px;
text-align:center;
color:blue;
visibility:visible;
font-size:30px;
}
</style>
var i=0;
var zaman_id;
function say()
{
document.getElementById(“yaz”).innerHTML=i;
if(i==50)
{
return;
}
i++;
zaman_id=window.setTimeout(“say()”,1000);
}
function dur()
{
window.clearTimeout(zaman_id);
}
</script>
</head>
<body>
<input type=”button” value=”Say” onclick=”say()” />||
238 JAVASCRIPT
<input type=”button” value=”Durdur” onclick=”dur()” />

</body>
</html>
set›nterval()
Kod ya da kod bloklar›n› belirtilen zaman aral›¤›nda tekrar çal›flt›rmak
için kullan›l›r. setTimeout( ) geçici bir zamanlay›c› olufltururken se-
tInterval( ) ile kal›c› bir zamanlay›c› oluflturulur.
window.setInterval(“kodlar”,zaman)
ya da
var zaman= window.setInterval(“kodlar”,zaman)
Bu metodu bir de¤iflkene atayabilirsiniz. Zamanlay›c›y› iptal etmek için

zamanlay›c› kimlik numaras›’n› (yani de¤iflken ad›) kullanaca¤›z.
Afla¤›daki örne¤imizde bir div içerisine 0’dan bafllayarak say›lar› yaz-

d›rma ifllemini setInterval() metodunu kullanarak yapaca¤›z. Za-
man de¤eri milisaniye cinsinden bir de¤er olmal›d›r.
Örnek
Kodlar›m›z
ZAMANLAYICILAR 239
<head>
charset=utf-8” />
#yaz
{
border-style:solid;
border-color:#333;
width:50px;
height:50px;
text-align:center;
color:blue;
visibility:visible;
font-size:30px;
}
</style>
var i=0;
var zaman=window.setInterval(“say()”,1000);
// zaman kimlik numarasına sahip olan zamanlayıcı
// 1sn aralıklarla say() fonksiyonunu çalıştıracak
function say()
{
i++;
}
</script>
</head>
<body>
</body>
</html>
240 JAVASCRIPT
clear›nterval()
setInterval() metoduyla oluflturulmufl kal›c› zamanlay›c›y› (zaman-
lama ifllemini) iptal eder.
Örnek
Sayfam›zda birer tane div ve butonumuz olsun. Sayfa yüklendi¤inde
div içerisine say›lar ard›fl›k olarak yaz›lacakt›r. Dur butonuna t›kland›-
¤›nda sayma ifllemi durdurulacakt›r.
Örnek

<head>
charset=utf-8” />
#yaz
{
border-style:solid;
border-color:#333;
width:50px;
height:50px;
text-align:center;
ZAMANLAYICILAR 241
color:blue;
visibility:visible;
font-size:30px;
}
</style>
var i=0;
var zaman=window.setInterval(“say()”,1000);
// zaman kimlik numarasına sahip olan zamanlayıcı
// 1sn aralıklarla say() fonksiyonunu çalıştıracak
function say()
{
i++;
}
function dur()
{
window.clearInterval(zaman);
}
</script>
</head>
<body>
<input type=”button” value=”Dur” onclick=”dur()” />
</body>
</html>
Afla¤›daki örne¤imiz zamanlay›c›lar› daha iyi anlaman›z için oluflturul-

mufltur. Sayfa yüklendi¤inde bir div sayfan›n sol bafl›ndan itibaren
400px gittikten sonra tekrar sayfa bafl›na geri dönmektedir.
Örnek

<head>
charset=utf-8” />
242 JAVASCRIPT
#kayan
{
position:absolute;
top:20px;
width:50px;
height:50px;
background-color:#B3B5FD;
}
</style>
var zaman=window.setInterval(“ileri()”,10);
var x=0;
function ileri()
{
document.getElementById(“kayan”).style.left=x;
if(x==400)
{
dur();
}
x++;
}
function dur()
{
window.clearInterval(zaman);
var zaman2=window.setInterval(“geri()”,10);
}
function geri()
{
x—;
document.getElementById(“kayan”).style.left=x;
if(x==0)
{
window.clearInterval(zaman2);
}
}
</script>
</head>
<body>
<div id=”kayan” >Kayan Layer</div>
</body>
</html>
ZAMANLAYICILAR 243
zaman kimlik numaras›na sahip zamanlay›c›, ileri() fonksiyonunu 10

milisaniye aral›klarla çal›flt›racakt›r. Div eleman›m›z›n left de¤eri bafllan-
g›çta 0px olacak ve ileri() fonksiyonu her çal›flt›¤›nda left özelli¤inin
de¤eri 1 artt›r›lacakt›r. Div eleman›m›z›n soldan sa¤a do¤ru 400px gitme-
sini istedi¤imizden x=400 oldu¤unda dur() isimli fonksiyon ça¤r›lm›flt›r.
dur() fonksiyonu içerisinde div eleman›m›z›n ileri gitmesi için olufltur-

du¤umuz ilk zamanlay›c›m›z iptal edilmifltir. Div eleman›m›z›n geri ha-
reketi yapmas› için oluflturdu¤umuz geri() isimli fonksiyonu çal›flt›ra-
cak zaman2 isimli bir zamanlay›c› oluflturduk. Bu durumda geri()
fonksiyonu her çal›flt›¤›nda div eleman›n›n geri do¤ru hareket etmesi için
left özelli¤inin de¤eri bir azalt›lacak. left=0 oldu¤unda zaman2 isim-
li zamanlay›c› iptal edilecek ve div ilk pozisyonunda durmufl olacakt›r.
Sayfa görüntüsü:
244 JAVASCRIPT
FORMLAR
13
<form> Nesnesi 246 file Nesnesi 273
<INPUT> Nesnesi 252 image Nesnesi 273
Form Elemanlar› (Nesneleri) 257 submit Nesnesi 273
text Nesnesi Metodlar› 262 reset Nesnesi 274
password (fiifre Metin button Nesnesi 274
Kutusu) Nesnesi 263 textarea Nesnesi 276
checkbox (Onay Kutusu) textarea Nesnesi Metodlar› 281
Nesnesi 264
select Nesnesi 281
checkbox Nesnesi Metodlar› 266
Option Nesnesi 282
radio (Seçenek Dü¤mesi)
Select Nesnesi Metodlar› 287
Nesnesi 268
hidden (Gizlenmifl
Form Eleman›) Nesnesi 272
Kullan›c›dan bilgi almak (toplamak) için form alanlar› oluflturmal›s›-

n›z. Kullan›c› form içerisine bilgileri girip gönder butonuna t›klad›¤›n-
da form elemanlar› içerisindeki bilgiler sunucu tarafl› çal›flan bir sayfa-
da ifllenir. Sunucu tarafl› çal›flan sayfa kullan›c›dan ald›¤› bilgilerle ilgi-
li çeflitli ifllemler yapabilir ve gerekli ise kullan›c›ya geri mesajda vere-
bilir. Form elemanlar›n› kullanmak için ilk önce form etiketi kullanma-
n›z gerekecektir.
Form alanlar› sadece kullan›c›dan bilgi al›p bir baflka sayfaya gönder-
mek için kullan›lmaz. Bunun d›fl›nda form alanlar› oluflturarak formu
baflka sayfaya göndermeden sayfan›n kendi içinde Javascript yard›m›y-
la çeflitli ifllemler yapman›z mümkün olacakt›r.
Sayfa içerisinde kulland›¤›n›z her bir form etiketi ve form elemanlar›

için DOM nesneleri oluflturulur. Bu durumda oluflturdu¤unuz form ve
form elemanlar› birer nesnedir. Nesne özellikleri ve metodlar› kullan›-
labilir.
246 JAVASCRIPT
<form> Nesnesi
Form alanlar› oluflturmak için bu etiketi kullanman›z gerekir.
Özellikleri
• action: Formun ifllenmesi için gönderilece¤i sayfa ad›.
• method: Gönderme metodu. (get/post)
• name: Formun ad›.
• enctype: fiifreleme türü.
• target: action ile belirtilen sayfan›n aç›laca¤› hedef pencere.
• id: Form için benzersiz bir kimlik.
• length: Form içerisindeki var olan eleman say›s›.
method
Form elemanlar›n›n içerdi¤i bilgilerin action özelli¤i ile belirtilen say-
faya nas›l gönderilece¤ini ayarlamak için kullan›l›r. Method özelli¤i get
ya da post de¤erini alabilir.
E¤er bu özelli¤e “get” de¤erini atam›fl iseniz form elemanlar› içindeki

bilgiler sunucu tarafl› sayfaya (bilgilerin ifllenece¤i sayfa) gönderilirken
adres çubu¤u kullan›l›r. Yani adres çubu¤undaki adrese form elemanla-
r› içindeki bilgiler eklenir ve ifllem yapan sayfaya gönderilir. Uzun bil-
giler gönderirken bu metodu kullanman›z› tavsiye etmiyorum çünkü bil-
giler düzgün olarak karfl› tarafa gitmeyebilir. Ayr›ca gönderilen bilgile-
rin adres çubu¤unda gözükmesi baz› uygulamalar için sak›ncal› olabilir.
Örnek

<head>
charset=utf-8” />
</head>
FORMLAR 247
<body>
<form action=”islem.aspx” method=”get” target=”_blank”>
<input type=”text” name=”adi” />
<input type=”submit” value=”Gönder” />
</form>
</body>
</html>
Sayfam›za geçip metin kutusuna “ahmet” yaz›p Gönder dü¤mesine t›k-

layal›m;
Form elemanlar› içine yazd›¤›m›z ahmet bilgisi adi de¤iflkenine atan-

m›fl ve islem.aspx sayfas›na gönderilmifltir.
Method özelli¤ine post de¤erini atarsan›z bilgiler http: iste¤i içerisine
kat›flt›r›l›r. Bilgiler gönderilirken adres çubu¤u kullan›lmaz ve postala-
ma fleklinde ifllem yapan sayfaya gönderilir.
Target: action özelli¤ine atanan sayfan›n hangi pencerede aç›laca¤›n›
elements[]
Form içerisinde kullan›lm›fl elemanlar› bir dizi içerisinde saklar. ‹stedi-
¤iniz form eleman›na ulaflman›z mümkün olacakt›r.
Örnek

<head>
charset=utf-8” />
function islem()
{
248 JAVASCRIPT
var str=””;
var elemansayisi=document.getElementById(“frm”).length;
var frmnesne=document.getElementById(“frm”);
for(var i=0;i<elemansayisi;i++)
{
if(frmnesne.elements[i].checked==true)
{
var txt=frmnesne.elements[i].value+”-”
str=str+txt;
}
}
// Kullanıcının tıkladığı checkbox’ları
// bir mesaj kutusu ile gösterelim
alert(“Kullandığınız Programlar\n”+str);
}
</script>
</head>
<body>
<form id=”frm”>
Web sayfası tasarlarken kullandığınız Programlar ?<br />
<input type=”checkbox” name=”sec” value=”flash” />:Flash |
<input type=”checkbox” name=”sec” value=”dreamweaver”
/>:dreamweaver |
<input type=”checkbox” name=”sec” value=”flex” />:flex |
<input type=”checkbox” name=”sec” value=”Web Developer”
/>:Web Developer<br />
<input type=”button” onclick=”islem()” value=”Kullandığınız
Programlar” />
</form>
</body>
</html>
FORMLAR 249
Yukar›daki örnekte ilk önce form nesnesinin length özelli¤i kullan›la-

rak form içerisindeki eleman say›s› bulunmufl döngünün eleman say›s›
kadar dönmesi sa¤lanm›flt›r.
For döngüsü içerisinde elements[i] dizi özelli¤i kullan›lm›flt›r. Bu

özellik ile elemanlar›n referanslar› al›nmakta ve checked özelli¤i kulla-
n›larak eleman›n seçili olup olmad›¤›na bak›lmaktad›r. E¤er eleman se-
çili ise eleman›n value özelli¤ine atanan de¤er str isimli de¤iflken içe-
ri¤ine eklenmektedir. Sonuç olarak str isimli de¤iflken içerisindeki veri
bir mesaj kutusu içerisinde kullan›c›ya gösterilmektedir.
document.getElementById(“frm”).elements[0] bu kod sat›r› form

içerisinde kullan›lan ilk elemana ulaflmaya yarar. elements[] ifadesin-
de index numaralar› 0’dan bafllayacakt›r. elements[0]_formun ilk ele-
man›, elements[1]_formun ikinci eleman› fleklinde devam eder.
Form Nesnesi Metodlar›

subm›t()
Form içerisindeki bilgileri action ile belirtilen sayfaya göndermek için
kullan›l›r. Asl›nda submit butonu bu ifllemi yapmaktayd› fakat programa-
tik olarak istedi¤iniz flartlar gerçekleflti¤inde form içerisindeki bilgileri
göndermek isteyebilirsiniz. Bu durumda bu metod iflinize yarayacakt›r.
Örnek
<head>
charset=utf-8” />
function islem()
{
var deger1=document.getElementById(“ad”).value;
var deger2=document.getElementById(“ders”).value;
var deger3=document.getElementById(“gorus”).value;
250 JAVASCRIPT
if(deger1!=”” && deger2!=”” && deger3!=””)

{
document.getElementById(“frm”).submit();
// form elemanlarının hepsi doldurulmuş ise
// formu “islem.aspx” sayfasına gönder
}else
{
alert(“form alanlarını eksiksiz doldurunuz..”)
}
}
</script>
</head>
<body>
<form id=”frm” method=”post” action=”islem.aspx”>
Ders hakkındakiGörüşleriniz ?<br />
<input type=”text” name=”ad” id=”ad”/>:AdıSoyadı<br />
<input type=”text” name=”ders” id=”ders”/>:Dersi<br />
Görüşünüz:<br />
<textarea cols=”10” rows=”4” name=”gorus” id=”gorus”></textarea><br />
<input type=”button” onclick=”islem()” value=”Gönder” />
</form>
</body>
</html>
FORMLAR 251
Kullan›c›n›n form alanlar›na girdi¤i veriler deger1, deger2, deger3

de¤iflkenlerine atanm›fl ve daha sonra bu de¤iflkenler kullan›larak s›na-
ma yap›lm›flt›r. Kullanıcı Adı Soyadı, Dersi, Görüşünüz etiketleri
ilifltirilmifl form elemanlar›n› eksiksiz doldurursa (deger1, deger2, de-
ger3 de¤iflkenlerinin içerisi bofl de¤ilse) form action ile belirlenen say-
faya gönderilecektir. Bu form elemanlar›ndan biri yada bir kaç› bofl b›-
rak›l›rsa kullan›c› bir mesaj kutusu ile uyar›lmaktad›r.
reset()
Kullan›c› taraf›ndan forma girilen verileri siler yani formu temizler. As-
l›nda reset butonu bu ifllemi yapmaktayd›, fakat programatik olarak is-
tedi¤iniz flartlar gerçekleflti¤i zaman reset butonunun yapt›¤› ifllemi
yapt›rmak istiyorsan›z bu durumda reset() metodunu kullanmal›s›n›z.
Örnek

<head>
charset=utf-8” />
function islem()
{
var sonuc=confirm(“formu temizlemek istiyormusunuz ?”);
if(sonuc)
{
document.getElementById(“frm”).reset();
}
}
</script>
</head>
<body>
Ders hakkındakiGörüşleriniz ?<br />
<input type=”text” name=”ad” id=”ad”/>:AdıSoyadı<br />
<input type=”text” name=”ders” id=”ders”/>:Dersi<br />
252 JAVASCRIPT
Görüşünüz:<br />
<textarea cols=”10” rows=”4” name=”gorus” id=”gorus”></tex-
tarea><br />
<input type=”button” onclick=”islem()” value=”Temizle” />
</form>
</body>
</html>
Sayfam›zda Temizle dü¤mesine t›klad›¤›m›zda:
Kullan›c› Temizle butonuna t›klad›¤›nda confirm() metoduyla olufl-

turdu¤umuz bir mesaj penceresi karfl›s›na ç›kmaktad›r.
E¤er kullan›c› Tamam dü¤mesine t›klarsa form temizlenecek, ‹ptal

dü¤mesine t›klarsa form temizlenmeyecektir.
<INPUT> Nesnesi
Form içerisine kontroller yerlefltirmek için kullan›lan nesnedir. Bu nes-
ne sayesinde kullan›c› ile etkileflime giren form elemanlar› form içerisi-
ne yerlefltirilir. Input nesnesinin özellikleri afla¤›da verilmifltir.
FORMLAR 253
Form Elemanlar› (Nesneleri)

‹çin Ortak Özellikler
type
Form içerisine yerlefltirilecek eleman›n türünü ayarlamak için kullan›l›r.
Bu elemanlar text, checkbox, radio, password, hidden, submit, reset,
buton, file, image olabilir.
Örnek

<input type=”text” /><br />
<input/><br />
<input type=”checkbox” /><br />
<input type=”radio” /><br />
</form>
Sayfam›za bakal›m:
Dikkat edilirse type özelli¤i belirtilmezse ya da yanl›fl yaz›l›rsa default

olarak text yani metin kutusu eklemifl olursunuz.
›d
Javascript HTML DOM ile elemanlara eriflmek için kullan›lan bu özel-
lik Form elemanlar›na benzersiz bir isim atamak için kullan›l›r.
name
Kullan›c› taraf›ndan kontrole girilen verinin ya da kontrolde yap›lan se-
çimin saklanaca¤› de¤iflken ad› mutlaka tan›mlanmal›d›r.
254 JAVASCRIPT

<input type=”text” name=”adi”/><br />
<input type=”submit” value=”Gönder” />
</form>
Kullan›c›n›n metin kutusuna girdi¤i veri metin kutusunun name özelli-

¤inde tan›mlanm›fl de¤iflkende saklan›r.
Kullan›c› metin kutusuna ahmet de¤erini girmifl ise adi=”ahmet” ola-

cakt›r.
d›sabled
Form elemanlar›n› pasif yapar yani kullan›m d›fl› b›rak›r. Bu özelli¤e
true de¤eri atarsan›z form eleman› pasif yani kullan›m d›fl›, false de¤e-
rini atarsan›z form eleman› aktif olur.
input nesnesinin disabled özelli¤inin HTML karfl›l›¤› etiket içerisin-

de afla¤›daki flekilde kullan›l›r.
<input type=”text” disabled=”disabled” />
Örnek

<head>
charset=utf-8” />
function basla()
{
document.getElementById(“meslek”).disabled=true;
}
function islem()
{
FORMLAR 255
var sonuc=document.getElementById(“ad”).value;
if(sonuc==””)
{
document.getElementById(“meslek”).disabled=true;
}else{
document.getElementById(“meslek”).disabled=false;
}
}
</script>
</head>
<body onload=”basla()”>
Adı Soyadı:<br />
<input type=”text” id=”ad” onblur=”islem()”/><br />
Mesleği:<br />
<input type=”text” id=”meslek” />
</form>
</body>
</html>
Sayfam›za bakt›¤›m›zda:
Sayfa yüklendi¤inde basla() isimli bir

fonksiyonla mesle¤i etiketi ilifltirilmifl metin
kutusu pasif yap›lmaktad›r. Kullan›c› Ad› So-
yad› metin kutusunu bofl geçerse yani doldur-
mazsa, Mesle¤i alan›na bilgi giremeyecektir.
accesskey
Eriflim anahtar›. Form elemanlar›na klavyeden eriflmek istiyorsan›z, k›-
sayol tan›mlayabilirsiniz.
Örnek
<body>
Adı Soyadı:<br />
<input type=”text” id=”ad” /><br />
Mesleği:<br />
<input type=”text” id=”meslek” accesskey=”k” />
</form>
256 JAVASCRIPT
Kullan›c› Mesle¤i etiketi ilifltirilmifl metin kutusuna klavyeden ALT + k

tufllar›na basarak focus’lanabilir.
Örnek
Metin kutusu için klavye k›sayolu dinamik bir flekilde oluflturulmaktad›r.

<head>
charset=utf-8” />
function a_key()
{
document.getElementById(“ad”).accessKey=document.getEle-
mentById(“ayar”).value;
}
</script>
</head>
<body>
Adı Soyadı:<br />
<input type=”text” id=”ad” onblur=”islem()”/><br />
<input type=”text” id=”ayar” size=”3” />||<input type=”button” â
value=”accessKey” onclick=”a_key()” />
</form>
</body>
</html>
Sayfam›za bakarsak:
FORMLAR 257
tab›ndexS
Form yüklendi¤inde TAB tuflu ile form elemanlar› aras›nda gezinti yapa-
biliriz.Bu özellikle, sekme s›ras›n› ayarlaman›z mümkündür.
NOT Di¤er özellikler kullan›ld›klar› form elemanlar› k›sm›nda anlat›lacakt›r.
Form Elemanlar› (Nesneleri)

Form elemanlar›n› form içerisine input tag› ile eklendi¤ini (textarea,
select hariç) daha önce söylemifltik. fiimdi bu elemanlar› yak›ndan in-
celeyelim.
text (Metin Kutusu) Nesnesi

Kullan›c›n›n bilgi girmesi için kullan›l›r. type özelli¤i atanmazsa ya da
yanl›fl yaz›l›rsa, otomatik olarak metin kutusu oluflur. Metin kutusuna
girdi¤iniz de¤er ya da value özelli¤i ile önceden tan›mlanan de¤er Gön-
der butonuna t›klad›¤›n›z zaman name özelli¤i ile belirledi¤iniz de¤ifl-
kene atan›r.
value Özelli¤i
Text eleman›na varsay›lan içerik (bafllang›ç de¤eri) atamak ya da var
olan de¤eri okumak için kullan›l›r.
Örnek
<head>
charset=utf-8” />
function esit()
{
document.getElementById(“iki”).value=document.getElementB-
yId(“bir”).value;
}
258 JAVASCRIPT
</script>
</head>
<body >
<input type=”text” id=”bir” /> <strong> =</strong> <input
type=”text” id=”iki” style=”background-color:#FC9;” â
onfocus=”esit()”/><br />
</form>
</body>
</html>
text Nesnesi Özellikleri

Sayfam›z› çal›flt›rd›¤›m›zda afla¤›daki flekilde bir sonuç al›r›z. Kullan›c›
birinci text kutusuna veri girdikten sonra ikinci text kutusuna t›klarsa bi-
rinci metin kutusu içeri¤i ikinci metin kutusuna atanmaktad›r.
s›ze Özelli¤i
Text form elemanlar›nda geniflli¤i karakter say›s› cinsinden ayarlamak
Örnek
<head>
charset=utf-8” />
function ayarla()
FORMLAR 259
{
document.getElementById(“ad”).size=document.getElementB-
yId(“ayar”).value;
}
</script>
</head>
<body>
<input type=”text” id=”ad” size=”20”/><br />
size: <input type=”text” size=”3” id=”ayar”/>||<a href=”javascript:;” â
onclick=”ayarla();”>Ayarla</a>
</form>
</body>
</html>
Sonuç
Kullan›c›n›n size etiketi ilifltirilmifl metin

kutusuna girdi¤i de¤er üstteki metin kutusu-
nun size özelli¤ine atanmaktad›r.
maxLength Özelli¤i
Text elemanlar›nda girilebilecek maksimum karakter say›s›n› ayarla-
Örnek

<head>
charset=utf-8” />
function max_length()
{
document.getElementById(“ad”).maxLength=document.getEle-
mentById(“ayar”).value;
}
260 JAVASCRIPT
</script>
</head>
<body>
Metin:<input type=”text” id=”ad”/><br />
maxLength: <input type=”text” size=”2” id=”ayar”/>||<a
href=”javascript:;” onclick=”max_length();”>maxLength_Ayarla</a>
</form>
</body>
</html>
Sonuç
maxLength etiketli metin kutusuna girilen de¤er metin etiketi ilifltiril-

mifl text eleman›n›n maxLength özelli¤ine atanmaktad›r.
readOnly Özelli¤i
Kullan›c›n›n bilgi girdi¤i form elemanlar›n› sadece okunabilir yapmak
için kullan›l›r. Kullan›c› form eleman› içindeki bilgiyi de¤ifltiremez. Bu
özelli¤e true de¤eri verirseniz eleman sadece okunabilir olur, false de-
¤eri verirseniz bu k›s›tlamay› kald›rabilirsiniz.
input nesnesinin readOnly özelli¤inin html karfl›l›¤› etiket içerisinde

afla¤›daki flekilde kullan›l›r.
<input type=”text” readonly=”readonly” />
Örnek
Kullan›c› onay kutusunu iflaretleyip linke t›klad›¤›nda metin kutusu sa-

dece okunabilir olacakt›r.

FORMLAR 261
<head>
charset=utf-8” />
function read_only()
{
if(document.getElementById(“sec”).checked==true)
{
document.getElementById(“txt”).readOnly=true;
}else{
document.getElementById(“txt”).readOnly=false;
}
}
</script>
</head>
<body>
<form id=”frm”>
Metin:<input type=”text” id=”txt”/><br />
Metin kutusunu sadece okunabilir yap > <input type=”checkbox” â
id=”sec”/><br />
<a href=”javascript:;” onclick=”read_only();”>Aktif / Pasif</a>
</form>
</body>
</html>
Sonuç
262 JAVASCRIPT
text Nesnesi Metodlar›

blur()
Metin kutusunu terk etmek için kullan›l›r.
focus()
Metin kutusuna odaklanmak için kullan›l›r.
select()
Metin kutusu içeri¤ini seçmek için kullan›l›r.
Örnek
Bir metin kutusunun select(), blur(), focus() metodlar›n› incele-
yelim.

<head>
charset=utf-8” />
function odak()
{
document.getElementById(“txt”).focus();
}
function sec()
{
document.getElementById(“txt”).select();
}
function terket()
{
document.getElementById(“txt”).blur();
}
</script>
</head>
<body>
<form id=”frm”>
<input type=”text” id=”txt” /><br />
FORMLAR 263
<input type=”button” value=”Odaklan” onclick=”odak()”/>||

<input type=”button” value=”Seç” onclick=”sec()”/>||
<input type=”button” value=”Terket” onclick=”terket”/>
</form>
</body>
</html>
Sonuç
password (fiifre Metin Kutusu)

Nesnesi
Kullan›c›n›n girdi¤i verileri maskeleyen metin kutusudur. Formlarda
s›kça kullanaca¤›n›z bir form eleman›d›r. Metin kutusuna girdi¤iniz ve-
riler * karakteri ile gösterilirler.
Örnek
<form id=”frm”>
Kullanıcı Adınız..:<input type=”text” id=”txt” /><br />
Kullanıcı Şifreniz:<input type=”password” id=”pas”/><br />
<input type=”submit” value=”Gönder”/>
</form>
Sonuç
Dikkat ederseniz ikinci metin kutusuna girdi¤imiz veriler maskelenmifltir.

Yani kullan›c› girdi¤i verileri de¤il maske karakterini görecektir.
NOT Text nesnesi için anlat›lan özellik ve metodlar password nesnesi için de geçerlidir.
264 JAVASCRIPT
checkbox (Onay Kutusu) Nesnesi

Birçok seçenek içerisinden istenildi¤i kadar seçim yap›labilir.
checked Özelli¤i
checkbox eleman›n›n seçili olma durumunu ö¤renebilir ya da ayarlaya-
bilirsiniz. Bir checkbox eleman›n›n checked özelli¤i true ise eleman se-
çili, false ise eleman seçili de¤ildir.
Örnek
checked özelli¤i etiket içerisinde kullan›larak VB.NET etiketine sahip

olan onay kutusu default olarak seçili duruma getirilmifltir.
<form id=”frm”>
Bildiğiniz Programlama Dilleri?<br />
<input type=”checkbox” id=”onay1” />vb<br />
<input type=”checkbox” id=”onay2” />c#<br />
<input type=”checkbox” id=”onay3” checked=”checked” />java<br />
</form>
Sonuç
Kullan›c›n›n iflaretledi¤i onay kutular›n› (checkbox) bulmak için afla-

¤›daki örne¤i inceleyelim.
Örnek

<head>
charset=utf-8” />
FORMLAR 265
function check()
{
var str=””;
if(document.getElementById(“onay1”).checked==true)
{
str=”vb “;
}
if(document.getElementById(“onay2”).checked==true)
{
str=str+”c#”;
}
alert(“İşaretledikleriniz\n”+str);
}
</script>
</head>
<body>
<form id=”frm”>
Bildiğiniz Programlama Dilleri ? <br />
<input type=”checkbox” id=”onay1” />vb<br />
<input type=”checkbox” id=”onay2” />c#<br />
<input type=”button” value=”İşaretledikleriniz” â
onclick=”check()” />
</form>
</body>
</html>
Sayfam›z› çal›flt›r›p kodlar›m›z› deneyelim.

266 JAVASCRIPT
value Özelli¤i
checkbox eleman› için value de¤erini okur ya da ayarlar.
Örnek

<head>
charset=utf-8” />
function value_mesaj()
{
alert(document.getElementById(“onay1”).value);
}
</script>
</head>
<body>
<form id=”frm”>
<input type=”checkbox” value=”Seçenek” id=”onay1” />
<input type=”button” value=”Göster” onclick=”value_mesaj()”
/>
</form>
</body>
</html>
Kullan›c› Göster isimli butona t›klad›¤›nda checkbox eleman›n›n value

de¤eri mesaj penceresinde kullan›c›ya gösterilmifltir.
checkbox Nesnesi Metodlar›

blur()
checkbox eleman›n› terk etmek için kullan›l›r.
focus()
checkbox eleman›na odaklanmak için kullan›l›r.
cl›ck()
checkbox eleman›n› üzerinde t›klama olay› gerçeklefltirmek için kulla-
n›l›r.
FORMLAR 267
Örnek
Bir onay kutusunun blur(), focus(), click() metodlar› incelenmifltir.

<head>
charset=utf-8” />
function odak()
{
document.getElementById(“onay”).focus();
}
function terket()
{
document.getElementById(“onay”).blur();
}
function sec()
{
document.getElementById(“onay”).click();
}
</script>
</head>
<body>
<form id=”frm”>
<input type=”checkbox” id=”onay” /><br />
<input type=”button” value=”Odaklan” onclick=”odak()”/>||
<input type=”button” value=”Terket” onclick=”terket”/>||
<input type=”button” value=”Seç” onclick=”sec()”/>
</form>
</body>
</html>
Sonuç
268 JAVASCRIPT
rad›o (Seçenek Dü¤mesi) Nesnesi

Kullan›c›n›n bir grup seçenek içerisinden sadece bir seçim yapmas› is-
teniliyorsa radio elemanlar› ile bir seçenek dü¤mesi grubu oluflturulur.
Örnek
<form id=”frm”>
Bir Renk seçiniz ?<br />
<input type=”radio” id=”onay” value=”k”/>Kırmızı<br />
<input type=”radio” id=”onay” value=”b”/>Beyaz<br />
<input type=”radio” id=”onay” value=”m”/>Mavi<br />
<input type=”radio” id=”onay” value=”y”/>Yeşil<br />
<input type=”radio” id=”onay” value=”mo”/>Mor
</form>
Dikkat ederseniz radio grubu oluflturmak için grup içerisine koyaca¤›-

n›z tüm radio button’lara ayn› ismi vermeliyiz. Kullan›c›n›n birden
fazla seçenek içerisinden yaln›zca bir tanesini seçebilmesi için radio
button grubu oluflturmal›s›n›z.
checked Özelli¤i
radio eleman›n›n seçili olma durumunu ö¤renebilir ya da ayarlayabilir-
siniz. Bir radio eleman›n›n checked özelli¤i true ise eleman seçili, fal-
se ise eleman seçili de¤ildir. Ayr›ca bu özelli¤i etiket içerisinde kulla-
n›p eleman›n default olarak seçili olmas›n› sa¤layabilirsiniz.
Örnek

<head>
charset=utf-8” />
function islem()
{
if(document.getElementById(“r1”).checked==true)
FORMLAR 269
{
alert(“Kırmızı Seçili”);
}else if(document.getElementById(“r2”).checked==true)
{
alert(“Beyaz Seçili”);
}else
{
alert(“Yeşil Seçili”);
}
}
</script>
</head>
<body>
<form id=”frm”>
Bir renk seçiniz ? <br />
<input type=”radio” id=”r1” name=”renk”/>Kırmızı<br />
<input type=”radio” id=”r2” name=”renk”/>Beyaz<br />
<input type=”radio” id=”r3” name=”renk”/>Yeşil<br />
<input type=”button” value=”Seçileni Göster” â
onclick=”islem()” />
</form>
</body>
</html>
Sayfam›za geçip kodlar›m›z› çal›flt›ral›m.
Dikkat ederseniz kullan›c› radio button grubu içerisinden sadece bir ta-
ne seçim yapabilmektedir. Radio button elemanlar›n›n id özelli¤i kul-
270 JAVASCRIPT
lan›larak checked özelliklerine bak›lmaktad›r. E¤er checked özelli¤i

true ise radio button seçili, false ise seçili de¤ildir.
Örnek

<head>
charset=utf-8” />
function islem()
{
var sayi=document.getElementsByName(“renk”).length;
// renk radio gurubu içerisindeki seçenek sayısı sayi â
değişkenine atandı.
for(var i=0;i<sayi;i++)
{
if(document.getElementsByName(“renk”).item(i).checked==true)
{
var txt=document.getElementsByName(“renk”).item(i).value;
// sonuçta bir radio button gurubunda yalnızca 1 tane â
seçili radio olabilir.
}
}
alert(“Seçilen:\n”+txt);
}
</script>
</head>
<body>
<form id=”frm”>
Bir renk seçiniz ? <br />
<input type=”radio” id=”r1” name=”renk” value=”Kırmızı”/>Kırmızı<br />
<input type=”radio” id=”r2” name=”renk” value=”Beyaz”/>Be-
yaz<br />
<input type=”radio” id=”r3” name=”renk” value=”Yeşil”/>Yeşil<br />
<input type=”button” value=”Seçileni Göster” â
onclick=”islem()” />
FORMLAR 271
</form>
</body>
</html>
Sonuç
Birden çok seçenek içerisinden sadece bir tanesini seçebilmek için ra-
dio button grubu oluflturman›z gerekti¤ini daha önce söylemifltim. Bu-
rada yapaca¤›m›z ifllem bir radio button grubu içerisinde kullan›c›n›n
seçti¤i radio button’u bulmak. Bir önceki örne¤imizde bir radio button
grubu içerisinden seçilen eleman› bulmak için tüm radio button’lara tek
tek ulafl›p checked özelliklerine bakm›flt›k. Bu durum radio button say›-
s› artt›kça yorucu olabilir.
Bir radio button grubu oluflturmak için zaten grup içerisindeki radio ele-
manlar›na ayn› ismi vermemiz gerekiyordu.
document.getElementsByName(“renk”) ifadesi sayfada name özel-

liklerine “renk” de¤eri atanm›fl elemanlar› (eleman bilgilerini) bir dizi
olarak saklar.
var sayi=document.getElementsByName(“renk”).length;
Yukar›daki kod sat›r› ile name özelli¤ine “renk” de¤eri atanm›fl sayfa
elemanlar›n›n say›s›n› bulabilirim. Asl›nda bu say› radio button grubu
içerisindeki eleman (seçenek) say›s› olacakt›r. Örne¤imiz için bu de¤er
3’tür.
272 JAVASCRIPT
Radio button grubu içerisindeki elemanlara toplu bir flekilde ulaflmak

için bir döngü oluflturdum. Bu döngüde döngü de¤iflkeni en son radio
button grubu içerisindeki eleman say›s›ndan bir küçük say›ya eflit ola-
cakt›r. (i=0’dan bafllad›¤› için)
Döngü içerisinde, radio button grubu içerisindeki elemanlara item()

metoduyla ulafl›larak checked özelliklerine bak›lm›flt›r. checked özel-
li¤i true olan radio button eleman›n›n value de¤eri mesaj kutusu ile
kullan›c›ya gösterilmektedir.
value Özelli¤i
radio eleman› için value de¤erini okur ya da ayarlar.
h›dden (Gizlenmifl Form Eleman›)

Nesnesi
Bu eleman formda gösterilmez. Eleman›n içerisinde name özelli¤ine bir
de¤er atarsan›z bir de value de¤eri tan›mlars›n›z gönder butonuna t›kla-
d›¤›n›zda value özelli¤ine atad›¤›n›z de¤er name özelli¤i ile tan›mlad›-
¤›n›z de¤iflkene atanm›fl olur. Kullan›c› Gönder butonuna her bast›¤›n-
da sunucuya (server) de¤iflen ya da sabit de¤erler gönderebilirsiniz.
Örnek
<form id=”frm” action=”islem.aspx” method=”post” target=”_blank” >

Kullanıcı Adınız..:<input type=”text” id=”txt” /><br />
Kullanıcı Şifreniz:<input type=”password” id=”pas”/><br />
<input type=”hidden” name=”say” value=”1” />
</form>
Yukar›daki örnekte Gönder butonuna bas›ld›¤›nda say isimli de¤iflke-

ne 1 de¤eri atan›p sunucuya gönderilmektedir.
FORMLAR 273
f›le Nesnesi
Dosya yükleme alanlar› oluflturmak için kullan›l›r. Dosyalar›n›z› sunu-
cudaki herhangi bir konuma göndermek için kullanmal›s›n›z.
Örnek
<form id=”frm” action=”islem.aspx” method=”post” target=”_blank”>

Dosya Seç:<input type=”file” name=”file_gnd” id=”dosya_gnd”/><br />
</form>
Gözat dü¤mesine t›klan›p gönderilecek dosya seçilmelidir.
›mage Nesnesi
image nesnesi oluflturdu¤unuzda bu nesneyi submit butonu yerine kul-
lanabilirsiniz.

Dosya Seç:<input type=”file” name=”file_gnd” id=”dosya_gnd”/><br /><br />
<input type=”image” src=”a.jpg”/>
Forma yerlefltirdi¤iniz resim submit butonu ile ayn› ifllevi yerine getirir.
Submit butonu yerine kendi yapt›¤›n›z bir resmi koyabilirsiniz.
subm›t Nesnesi
Forma girilen verileri action özelli¤i ile belirtilen sayfaya gönderir. Su-
nucu tarafl› çal›flan sayfa kullan›c›dan ald›¤› bilgilerle ilgili çeflitli ifl-
lemleri yerine getirir.
274 JAVASCRIPT
reset Nesnesi
Kullan›c› taraf›ndan forma girilen verileri siler yani formu temizler.
Örnek

<input type=”text” /><br />
<input type=”checkbox” /><br />
<input type=”radio” name=”r1” /><br />
<input type=”reset” value=”Temizle” />
</form>
Temizle butonuna t›kland›¤›nda kullan›c› taraf›ndan forma girilen veri-

ler ve yap›lan seçimler temizlenir.
button Nesnesi
Bu form eleman› ile bir olay› tetikleyip Javascript kodlar›n›n çal›flmas›-
n› sa¤layabilirsiniz. Butona t›kland›¤›nda Javascript kodlar›ndan oluflan
bir davran›fl› sergilemek için kullanabilirsiniz.
Örnek
<head>
charset=utf-8” />
FORMLAR 275
function ekle()
{
document.getElementById(“style”).disabled=false;
}
function kaldır()
{
document.getElementById(“style”).disabled=true;
}
function baslik()
{
document.title=document.getElementById(“title”).value;
}
</script>
<link href=”form.css” id=”style” rel=”stylesheet”
type=”text/css” />
</head>
<body>
<form id=”frm”>
Sayfa Başlığı:
<input type=”text” id=”title”/><br />
<input type=”button” value=”CSS ekle” onclick=”ekle()” />||
<input type=”button” value=”CSS kaldır” onclick=”kaldır()” />||
<input type=”button” value=”Title ekle” onclick=”baslik()”/>
</form>
</body>
</html>
Sayfam›z› çal›flt›r›p sonuca bakal›m.

276 JAVASCRIPT
Yukar›daki örnekte üç tane butonumuz bulunmaktad›r. Bu butonlar

farkl› ifllemleri yerine getiriyor. Üç butonumuz için de onclick olay
yönlendiricilerine fonksiyonlar yaz›lm›flt›r. Butonlarda belirtilen olaylar
gerçekleflti¤inde belirtilen olay yönlendiricilerine yaz›lan fonksiyonlar
çal›flt›r›lacakt›r.
CSS kald›r dü¤mesine t›kland›¤›nda link yöntemiyle sayfaya ba¤lanm›fl

css dosyas› pasif yap›lmaktad›r. CSS ekle dü¤mesine t›kland›¤›nda css
dosyas› sayfa içerisinde aktif edilmektedir. Title ekle butonuna t›klan-
d›¤›nda metin kutusuna girilen metin, sayfaya bafll›k olarak ekleniyor.
textarea Nesnesi
Birden fazla sat›ra sahip olan, metin alan› oluflturmak için kullan›l›r. Bu
form eleman› input tag› ile oluflturulmaz.
Özellikleri
• name: Metin alan› için bir ad verebilirsiniz.
• id: Javascript HTML DOM ile elemanlara eriflmek için kullan›lan bu
özellik, textarea nesnesine benzersiz bir isim atamak için kullan›l›r.
• cols: Metin alan›n›n karakter cinsinden geniflli¤i, metin alan›nda yatay-
da gösterilecek karakter say›s›.
• rows: Gösterilecek sat›r say›s› (textarea yüksekli¤i)
• readOnly: Metin alan›n› sadece okunabilir yapar. Kullan›c› metin alan›
içerisindeki veriyi de¤ifltiremez. Metin alan›n› sadece okunabilir yap-
mak için bu özelli¤e true, metin alan›n› hem okunabilir hem de yaz›la-
bilir yapmak için false de¤eri atanmal›d›r.
• disabled: Metin alan›n› pasif yapar, kullan›m d›fl› b›rak›r. Metin alan›-
n› pasif yapmak için bu özelli¤e true, aktif yapmak için false de¤eri
atanmal›d›r.
• tabindex: Tab s›ras›n›n ayarlanmas›n› sa¤lar.
• value: Textarea içerisine metin atamak ya da var olan metni okumak
FORMLAR 277
Örnek
Textarea içerisine default olarak bir metin atanabilir.
<form id=”frm”>
<textarea rows=”4” cols=”20”>
Textarea içeriği
</textarea>
</form>
Örnek
textarea nesnesinin value özelli¤i kullan›larak içerisine metin atanm›flt›r.

<head>
charset=utf-8” />
function yaz()
{
var txt=prompt(“Textarea içerisine eklenacak metin ?”,””);
if(txt==”” || txt==null)
{
// eğer kullanıcı girdi kutusuna bir metin yazmazsa
// yada girdi kutusunda iptal düğmesine basarsa
// textarea içerisine “textarea içeriği” metni yazılacak
document.getElementById(“txtarea”).value=”textarea içeriği”;
return;
}
document.getElementById(“txtarea”).value=txt;
}
278 JAVASCRIPT
</script>
</head>
<body>
<form id=”frm”>
<textarea id=”txtarea”rows=”4” cols=”20”>
</textarea><br />
<input type=”button” value=”İçerik yaz” onclick=”yaz()” />
</form>
</body>
</html>
Sonuç
‹çerik yaz dü¤mesine bas›ld›¤›nda girdi kutusu ile kullan›c›dan bir me-
tin istenecek. Kullan›c›dan al›nan bu metin textarea’n›n value özelli¤i-
ne atanacak. (textarea içerisine yaz›lacak)
Örnek
FORMLAR 279
<head>
charset=utf-8” />
function basla()
{
document.getElementById(“txtarea”).disabled=true;
}
function islem()
{
if(document.getElementById(“sec”).checked==true)
{
document.getElementById(“txtarea”).disabled=false;
}else{
document.getElementById(“txtarea”).disabled=true;
}
}
</script>
</head>
<body onload=”basla()”>
<form id=”frm”>
<textarea id=”txtarea”rows=”4” cols=”20” >
</textarea><br />
textarea(aktif/pasif):<input type=”checkbox” â
onblur=”islem()”id=”sec” /><br />
</form>
</body>
</html>
Yukar›daki örne¤imizde basla() fonksiyonu sayfa yüklendi¤i zaman

çal›flacak ve textarea nesnesini pasif yapacakt›r. checkbox program
kontrolünü kaybetti¤inde yani bu elemandan ç›k›ld›¤›nda islem()
fonksiyonu çal›flacak ve e¤er checkbox seçili ise textarea aktif, seçili
de¤ilse textarea pasif olacakt›r.
Örnek

280 JAVASCRIPT
<head>
charset=utf-8” />
function ayarla()
{
document.getElementById(“yaz”).cols=document.getElementB-
yId(“text_cols”).value;
document.getElementById(“yaz”).rows=document.getElementB-
yId(“text_rows”).value;
}
</script>
</head>
<body>
<form id=”frm”>
<textarea id=”yaz” >
</textarea><br />
<input type=”text” id=”text_cols” size=”3” />cols(Genişliği)|| â
<input type=”text” id=”text_rows” size=”3”/>rows(Genişliği)<br />
<input type=”button” onclick=”ayarla()” value=”ayarla”/>
</form>
</body>
</html>
Sonuç
Yukar›daki örnekte kullan›c›dan al›nan genifllik (cols), yükseklik

(rows) de¤erleri dinamik olarak textarea nesnesinin cols, rows özellik-
lerine atanmaktad›r.
FORMLAR 281
textarea Nesnesi Metodlar›

blur()
Metin alan›n› terk etmek için kullan›l›r.
focus()
Metin alan›na odaklanmak için kullan›l›r.
select()
Metin alan› içeri¤ini seçmek için kullan›l›r.
select Nesnesi
Aç›lan kutu ya da liste kutusu oluflturmak için kullan›l›r. Aç›lan kutuda
kullan›c› birçok seçenek içerisinden bir tane seçim yapabilirken liste ku-
tusunda (multiple özelli¤i kullan›lm›fl ise) kullan›c› birçok seçenek içe-
risinden birden fazla seçim yapabilir.
Özellikleri
• name: Select nesnesi için bir ad verebilirsiniz.
• id: Select nesnesine benzersiz bir isim atamak için kullan›l›r.
• multiple: Kullan›c›n›n çoklu seçim yapabilmesini sa¤lar. Bu özelli¤e
true ya da false de¤erlerinden biri atan›r.
E¤er true de¤eri verirseniz multiple özelli¤ini aktif yapm›fl olursunuz.
• size: Kullan›c›ya gösterilecek seçenek say›s›. (select eleman›n›n yük-
sekli¤i)
• disabled: Select nesnesini pasif yapar, kullan›m d›fl› b›rak›r. Bu özel-
li¤e true ya da false de¤erlerinden biri atan›r. E¤er true de¤eri verirse-
niz select nesnesini pasif yapm›fl olursunuz.
• tabindex: Tab s›ras›n›n ayarlanmas›n› sa¤lar.
• length: Select nesnesi içerisindeki seçenek say›s›n› verir.
• selectedIndex: Select nesnesi içerisinde seçili olan eleman›n index
numaras›n› verir.
282 JAVASCRIPT
Opt›on Nesnesi
Özellikleri
• id: Option nesnesine benzersiz bir isim atamak için kullan›l›r.
• value: Seçenek için bir de¤er atamas› yapabilirsiniz.
• text: <option></option> option taglar› aras›ndaki metni ayarlayabi-
lir ya da okuyabilirsiniz.
Örnek
Form sayfaya yüklendi¤inde select nesnesi içerisindeki bir eleman› de-
fault olarak seçili yapabilirsiniz. Ayn› ifllem select nesnesi liste kutusu
olarak kullan›ld›¤› zaman da yap›labilir.
<form id=”frm”>
Eğitim durumunuz nedir?<br />
<select id=”secenek” name=”s1”>
<option>lise</option>
<option>Önlisans</option>
<option selected=”selected”>lisans</option>
<option>Yüksek lisans</option>
</select>
</form>
Sayfam›za bakal›m.
Dikkat ederseniz sayfa yüklendi¤inde “lisans” metni seçili olarak gel-

mektedir.
opt›ons[]
Select nesnesi içerisindeki seçenekleri bir dizi içerisinde saklar. Select
nesnesi içerisindeki seçeneklere (elemanlara) bu nesne ile ulaflmam›z
mümkündür.
FORMLAR 283
Örnek

<head>
charset=utf-8” />
function isle()
{
var say=document.getElementById(“e_durum”).length;
// select nesnesi içerisindeki seçenek sayısı
var dizi=new Array();
{
dizi[i]=document.getElementById(“e_durum”).options[i].text;
}
alert(dizi);
}
</script>
</head>
<body>
<form id=”frm”>
<select id=”e_durum” name=”s1”>
</select>
<input type=”button” value=”Seçenekleri göster” â
onclick=”isle()” />
</form>
</body>
</html>
284 JAVASCRIPT
Sonuç
Yukar›daki örne¤imizde select nesnesi içindeki seçenek say›s› length

özelli¤i kullan›larak ö¤renilmifltir. Döngü de¤iflkeninin de¤eri 0’dan
bafllay›p en son length-1 de¤erini almaktad›r. Oluflturulan döngü ile
ulafl›lan her seçene¤in text özelli¤ine atanan de¤er, dizi içerisine at›l-
maktad›r. Sonuçta bir mesaj kutusu içerisinde select nesnesi içerisinde-
ki elemanlar gösterilmektedir.
Afla¤›daki örnekte kullan›c›n›n select nesnesi içerisinde hangi elema-

n› seçti¤ini bir mesaj kutusu ile gösterelim.
Örnek
<head>
charset=utf-8” />
function islem()
{
var index=document.getElementById(“e_durum”).selectedIndex;
alert(document.getElementById(“e_durum”).options[index].text);
}
FORMLAR 285
</script>
</head>
<body>
<form id=”frm”>
<select id=”e_durum” name=”s1”>
</select><br />
<input type=”button” value=”Seçimi göster” onclick=”islem()” />
</form>
</body>
</html>
Liste kutusu oluflturmak için: size özelli¤ine de¤er ataman›z yeterli

olacakt›r. Aç›lan kutuda kullan›c›ya bir seçenek gösterilirken, örne¤in
size de¤erini 2 yapt›¤›n›zda kullan›c›ya iki seçenek gösterilir ve aç›lan
kutu liste kutusuna dönmüfl olur. Gösterilen iki seçene¤in d›fl›nda kalan
seçeneklere scroll ile ulaflman›z mümkündür.
Örnek
<form id=”frm”>
Bir renk seçiniz?<br />
<select id=”renkler” name=”s1” size=”2”>
<option>Kırmızı</option>
<option>Mavi</option>
<option selected=”selected”>Beyaz</option>
<option>Mor</option>
</select>
<input type=”button” value=”Seçimi göster” onclick=”islem()” />
</form>
286 JAVASCRIPT
Yukar›daki örnekte liste kutusu oluflturduk. Fakat liste kutusunda önem-

li olan kullan›c›n›n birden fazla seçim yapabilmesidir. Bunu sa¤lamak
için multiple özelli¤ini eklememiz gerekecek.
<form id=”frm”>
<select id=”renkler” name=”s1” multiple=”multiple”>
</select>
</form>
Herhangi bir size de¤eri vermezseniz sadece

multiple özelli¤ini kullan›rsan›z bu durumda se-
lect nesnesi içerisindeki tüm seçenekler gösteri-
lecek ve kullan›c›n›n birden fazla seçim yapma-
s›na izin verilecektir.
E¤er select nesnesinde multiple özelli¤ini kullan›rsan›z kullan›c› liste

kutusunda birden fazla seçim yapabilir. selectedIndex özelli¤i bize
seçilen elemanlar içerisinden index numaras› en küçük olan› geriye
döndürür. Peki, kullan›c›n›n seçti¤i di¤er elemanlar› nas›l bulabiliriz?
Örnek
<head>
charset=utf-8” />
function islem()
{
var say=document.getElementById(“renkler”).length;
{
FORMLAR 287
if(document.getElementById(“renkler”).options[i].selected==true)
{
alert(document.getElementById(“renkler”).options[i].text);
}
}
}
</script>
</head>
<body>
<form id=”frm”>
</select><br />
<input type=”button” value=”Seçiminiz” onclick=”islem()” />
</form>
</body>
</html>
Sonuç
Select nesnesi içerisindeki elemanlar›n selected

özelliklerine döngü ile tek tek bak›lm›flt›r. Selec-
ted özelli¤i true olan seçenekler mesaj kutusu
ile gösterilmektedir.
Select Nesnesi Metodlar›

add()
Select nesnesine eleman (seçenek) eklemeye yarar.
remove()
Select nesnesinden eleman (seçenek) silmeye yarar.
288 JAVASCRIPT
Örnek
add() metodunu kullanarak select nesnesine seçenek ekleyelim.

<head>
charset=utf-8” />
function islem()
{
var yeni=document.createElement(“option”);
yeni.text=document.getElementById(“ektxt”).value;
document.getElementById(“renkler”).add(yeni);
}
</script>
</head>
<body>
<form id=”frm”>
Eklemek istediğiniz seçenek:<br />
<input type=”text” id=”ektxt” /><br />
</select><br />
<input type=”button” value=”|EKLE|” onclick=”islem()” />
</form>
</body>
</html>
FORMLAR 289
Sonuç
Yukar›daki örne¤imizde:
var yeni=document.createElement(“option”); sat›r› ile yeni bir

option nesnesi oluflturulmufltur.
yeni.text=document.getElementById(“ektxt”).value; sat›r› ile

kullan›c›dan al›nan metin, oluflturulan yeni isimli option nesnesinin
text özelli¤ine atanm›flt›r.
document.getElementById(“renkler”).add(yeni); sat›r› ile olufl-

turdu¤umuz yeni isimli option nesnesi renkler isimli select nesnesine
eklenmifltir.
Örnek
remove() metodunu kullanarak select nesnesinde kullan›c› taraf›ndan
seçilen seçene¤i silelim.

<head>
charset=utf-8” />
function islem()
{
var nesne=document.getElementById(“renkler”);
var num=document.getElementById(“renkler”).selectedIndex;
290 JAVASCRIPT
nesne.remove(num);
}
</script>
</head>
<body>
<form id=”frm”>
</select><br />
<input type=”button” value=”|SİL|” onclick=”islem()” />
</form>
</body>
</html>
Sonuç
num de¤iflkenin içerisinde seçili olan eleman›n index

numaras› bulunmaktad›r. Bu durumda nesne.remo-
ve(num) komut sat›r›n› incelersek remove metodu ken-
disine verilen index numaras›na sahip eleman›, select
nesnesinden silecektir.
ÇERÇEVELER
14
frameset Nesnesi 291 border 296
frameset Nesnesinin bordercolor 296
Özellikleri 292 frame Nesnesi 297
id 292 noframes Etiketi 301
cols 292 iframe Nesnesi 302
rows 294
frameborder 296
Çerçeveler ile web sayfan›z› birden fazla alana ay›r›p her bir alanda ay-
r› bir web sayfas› görüntüleyebilirsiniz. Asl›nda çerçeveler bir taray›c›
gibi çal›flan alanlard›r. Bir sayfay› çerçevelere bölmek için ilk önce
<frameset> nesnesini kullanman›z gerekir. Asl›nda bu nesne ile çerçe-
ve kümesi oluflturulur. Frameset nesnesi içerisinde sayfada bulanan çer-
çeve say›s›, çerçeve boyutlar› ayarlan›r. Çerçeve kümesi tan›mlad›¤›n›z
sayfan›n kendisi hiçbir HTML belgesi içermez. Yani bu sayfan›n ken-
disinin bir içeri¤i yoktur ve <Body> etiketini içermez. Bu sayfa çerçeve
kümesini içerir ve tafl›y›c› bir sayfad›r.
frameset Nesnesi
Çerçeve kümesi oluflturmak için kullan›l›r. Frameset içeren sayfan›n
kendisinin <body> taglar› aras›nda bir içeri¤i yoktur.
Örnek
<html>
<head>
292 JAVASCRIPT
</head>
<frameset cols=”” rows=”” >
</frameset>
<noframes><body>
</body></noframes>
</html>
Çerçeve kümesinin kullan›ld›¤› sayfan›n HTML kodlar› yukar›da basit-

çe görülmektedir.
NOT Afla¤›da anlat›lan özelliklerden id, cols, rows d›fl›nda kalanlar frameset
nesnesi için DOM taraf›ndan desteklenmemektedir. Ancak HTML karfl›l›kla-
r›n› etiket içerisinde kullanabilirsiniz.
fiimdi frameset nesnesinin özelliklerine bakal›m.
frameset Nesnesinin Özellikleri

›d
Javascript HTML DOM ile elemanlara eriflmek için kullan›lan bu özel-
lik frameset nesnesine benzersiz bir isim atamak için kullan›l›r.
cols
Sütun oluflturmak için kullan›l›r. Araya virgül koyarak istedi¤iniz kadar
sütun oluflturabilirsiniz. cols parametresine girdi¤iniz de¤erler sütunla-
r›n genifllik de¤erleri olacakt›r. Bu özelli¤e yazd›¤›n›z de¤er say›s›nca
sütun belirtilen uzunluk de¤erlerine göre oluflturulacakt›r.
Uzunluk de¤erlerini pixel, yüzde ya da göreceli olarak verebilirsiniz.

Burada dikkat etmeniz gereken * karakterinin göreceli bir de¤er olma-
s›d›r. Yüzde ya da göreceli de¤er verdi¤inizde; örne¤in % de¤erde cols
özelli¤ine atad›¤›n›z yüzdelerin toplam›n›n %100 olmas›na ya da göre-
celi de¤erler verdi¤inizde sütun geniflliklerinin birbirinin kat› olma du-
rumuna dikkat etmelisiniz. % de¤erler verirken % karakteri de¤erin sa¤
taraf›na yaz›lmal›d›r. (60% gibi)
Örnek
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
ÇERÇEVELER 293
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8” />
</head>
<frameset cols=”40%,60%” >
<frame src=”menu.html” name=”menu” />
<frame src=”orta.html” name=”orta” />
</frameset>
<noframes><body>
</body></noframes>
</html>
Dikkat ederseniz cols özelli¤ine 2 de¤er atanm›fl. Çerçeve kümemiz iki

sütundan oluflmaktad›r. Sayfan›n tamam›n› %100 düflünürsek sol taraf-
taki menu isimli çerçevenin geniflli¤i toplam sayfa geniflli¤inin % 40’›
kadar olacakt›r. Yine orta isimli çerçevenin geniflli¤i toplam sayfa ge-
niflli¤inin %60’› kadar olacakt›r.
Frameset etiketindeki cols parametresine afla¤›daki flekilde bir atama

yapabilirdim.
<frameset cols=”40%,*>
Yukar›daki gibi yapm›fl olsayd›k yine menu isimli çerçeve (frame) say-
fan›n toplam geniflli¤inin %40’› kadar olacakt›. ‹kinci frame’in geniflli-
¤i olarak * karakteri yaz›lm›flt›r. Bu karakter geriye kalan uzunlu¤u (ge-
niflli¤i) ikinci frame’in geniflli¤i olarak belirle anlam›na gelir. ‹kinci fra-
me’in geniflli¤i sayfan›n toplam geniflli¤inin % 60’› kadar olacakt›r.
Örnekler
cols=”*,*” à ‹ki tane sutün olufltur ve ikisinin genifllikleri ayn› olsun.
(50%,50%)
cols=”2,1” à Birinci frame ikinci frame’in iki kat› genifllikte olacak.
cols=”*,*,50%” à Üç tane sütun olacak birinci ve ikinci frame’lerin
genifllikleri sayfan›n toplam geniflli¤inin %25’i kadar olacak. Üçüncü
frame geniflli¤i ise sayfan›n toplam geniflli¤inin %50’si kadar olacakt›r.
294 JAVASCRIPT
cols=”320,*” à Birinci frame’in geniflli¤i 320px olacak. Kalan genifl-

lik ikinci frame’in geniflli¤i olarak atanacak.
Dikkat etmeniz gereken cols özelli¤ine de¤er atarken ya komple yüzde

ya da göreceli (birbirinin kat› olan) de¤erleri kullanmak olmal›d›r.
rows
Sat›r oluflturmak için kullan›l›r. Araya virgül koyarak istedi¤iniz kadar
sat›r oluflturabilirsiniz. rows parametresine girdi¤iniz de¤erler sat›rlar›n
yükseklik de¤erleri olacakt›r. Bu özelli¤e yazd›¤›n›z de¤er say›s›nca sa-
t›r belirtilen uzunluk (yükseklik) de¤erlerine göre oluflturulacakt›r.
rows parametresine de¤er atarken cols özelli¤inde anlat›lan kural ve
yöntemler aynen geçerlidir.
Örnek
Kullan›c›dan al›nan uzunluk de¤erlerine göre 2 sat›rl› 2 sütunlu çerçeve
kümesini yeniden boyutland›rma ifllemini yapal›m. Çerçeve kümesini
tafl›yan sayfam›z frameset.html olacak.
frameset.html
<head>
charset=utf-8” />
</head>
<frameset cols=”*,*” rows=”2,1” id=”cerceve” â
bordercolor=”blue” border=”5”>
<frame src=”menu.html” id=”menu” bordercolor=”gray” />
<frame src=”http://kodlab.com” id=”site1” bordercolor=”red” />
<frame src=”http://www.firat.edu.tr” id=”site2”/>
<frame src=”orta.html” id=”orta”/>
</frameset>
<noframes><body>
</body></noframes>
</html>
ÇERÇEVELER 295
Sayfam›z› çal›flt›rd›¤›m›zda:
Amac›m›z frameset.html sayfas› yüklenirken sat›r ve sütun de¤erlerini

kullan›c›dan almak ve kullan›c›dan al›nan de¤erlere göre çerçeve kü-
mesini yeniden boyutland›rmakt›r. Ama dikkat etmeniz gereken diye-
lim ki 4 sütun ve 4 sat›rl› bir çerçeve kümesi oluflturursan›z yeni oluflan
çerçeveler için frame tan›mlamas› olmad›¤›ndan oluflturdu¤unuz çerçe-
veler bir ifle yaramayacakt›r.Bu örnekte mant›kl› olan, var olan çerçeve
say›lar›n› de¤ifltirmeden sadece çerçeve uzunluklar›n› de¤ifltirmektir.
Yukar›daki ifllemi yapacak kodlar›m›z› frameset içerisinde bulunan her-

hangi bir çerçeve için tan›mlanm›fl sayfaya yazabiliriz. Burada me-
nu.html sayfas›na kodlar›m›z› yazal›m.
menu.html

<head>
296 JAVASCRIPT
var mevcutcols=parent.document.getElementById(“cerceve”).cols;
var mevcutrows=parent.document.getElementById(“cerceve”).rows;
var sutun=prompt(“sütün değerlerini giriniz?”,mevcutcols);
var satir=prompt(“sütün değerlerini giriniz?”,mevcutrows);
parent.document.getElementById(“cerceve”).cols=mevcutcols;
parent.document.getElementById(“cerceve”).rows=mmevcutrows;
</script>
charset=utf-8” />
</head>
<body>
javascript kodları yazıldı...
</body>
</html>
Frameset oluflturulurken yaz›lm›fl cols ve rows de¤erleri mevcutcols,

mevcutrows de¤iflkenleri içerisine atanm›flt›r.
prompt() metoduyla kullanc›dan yeni cols ve rows de¤erleri istenir-

ken eski de¤erler varsay›lan olarak kullan›c›ya gösterilmektedir.
Burada parent nesnesi kullan›lm›flt›r. Çünkü (window) içindeki bir frame

(çerçeve) içerisinden ana pencerenin özelli¤ine ulaflmaya çal›fl›yoruz.
Daha sonra yap›lan ifllem kullan›c›dan al›nan bu de¤erlerin ana pencere

içindeki “cerceve” id’sine sahip frameset nesnesinin cols, rows özel-
liklerine atamak olacakt›r.
frameborder
Frame borderlar›n›n (kenarl›klar›n›n) 3 boyutlu olup olmayaca¤›n›
ayarlayabilirsiniz.
frameborder=yes|1|no|0 de¤erlerini alabilir. 1 ya da yes de¤erlerini

verirseniz border 3d olacakt›r. 0 ya da no de¤erlerini verirseniz border 3d
olmayacakt›r. Frameborder özelli¤ine no de¤erini verirseniz bu durum-
da bordercolor özelli¤i ile atad›¤›n›z renk border’a uygulanmayacakt›r.
border
Border kal›nl›¤›n› ayarlamak için kullan›l›r ve integer bir de¤er atan›r.
ÇERÇEVELER 297
bordercolor
Border’a renk atamas› yapmak için kullan›l›r. Hem frameset hem de fra-
me içerisinden border’lara renk tan›mlamas› yap›lm›fl ise frame içeri-
sinden yap›lan tan›mlama öncelikli olur.
Border’lar› kald›rmak için afla¤›daki yol izlenmelidir.

frameborder=”0” border=”0” framespacing=”0”
fleklinde olmal›d›r.
frame Nesnesi
Çerçeve kümesi içerisindeki çerçeve tan›mlamalar›n› yapmak için kul-
lan›l›r.
Özellikleri
• src: Frame içerisine yüklenecek sayfa ad› ya da URL’si.
• id: Javascript HTML DOM ile elemanlara eriflmek için kullan›lan bu
özellik frame nesnesine benzersiz bir isim atamak için kullan›l›r.
• name: Frame’in ad›.
• scrolling: Kayd›rma çubuklar›n› aktif ya da pasif yapar. ‹nternet Exp-
lorer taraf›ndan nesne özelli¤i olarak desteklenmiyor. Etiket içerisinde
HTML karfl›l›¤›n› kulland›¤›n›zda:
scrolling = yes | no | auto şeklinde değerler verebilirsiniz.
• noResize: Frame’in yeniden boyutland›r›labilir olup olmad›¤›n› ayarla-

framenesnesi.noResize=true|false
• frameborder: Frame’in kenarlar›n›n 3d olup olmayaca¤›n› ayarlayabi-

lirsiniz.
frameNesnesi.frameBorder=1|0
• bordercolor: Frame’in border (kenarl›k) rengini ayarlayabilirsiniz.

‹nternet Explorer taraf›ndan nesne özelli¤i olarak desteklenmiyor, fakat
etiket içerisinde HTML karfll›¤›n› kullanabilirsiniz.
298 JAVASCRIPT
• marginWidth: Frame içeri¤i ile frame kenarl›¤› aras›ndaki yataydaki

bofllu¤u ayarlayabilirsiniz. (left, right)
• marginHeight: Frame içeri¤i ile frame kenarl›¤› aras›ndaki dikeydeki
bofllu¤u ayarlayabilirsiniz. (top, bottom)
Örnek

<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8” />
</head>
<frameset cols=”*,*” rows=”2,1” bordercolor=”#0000FF”
id=”cerceve”>
<frame src=”menu.html” id=”menu”/>
<frame src=”http://kodlab.com” id=”site1”/>
<frame src=”form.html” id=”form”/>
</frameset>
<noframes><body>
</body></noframes>
</html>
Oluflturdu¤umuz kodlar› inceleyelim.
Frameset içerisinde tan›mlanan cols, rows özelliklerine bakt›¤›m›zda 2

sat›rl› 2 sütunlu bir çerçeve kümesinin oluflturuldu¤unu görmekteyiz.
cols=”*,*” ifadesi sayfada 2 tane sütun olacak ve bu 2 sütunun genifl-

likleri ayn› olacak anlam›na gelir.
rows=”2,1” ifadesinde sayfada 2 tane sat›r olacak ve birinci sat›r 2’in-

ci sat›r›n 2 kat› yüksekli¤inde olacak anlam›na gelir.
fiimdi daha iyi anlaman›z için taray›c› penceremizi inceleyelim.

ÇERÇEVELER 299
2x
* *
Sütun genifllikleri birbirine eflit
Taray›c›m›zdaki çerçeve kümesi ve uzunluklar yukar›daki flekilde olu-

flacakt›r. Frame tan›mlamalar›nda hangi frame tan›mlamas›n›n hangi
çerçeve için yap›ld›¤› önemlidir.
Çerçeve kümesinde birden fazla frame mevcuttur tan›mlama s›ras› ise:

<frame src=”menu.html” id=”menu”/>frame tan›mlamas› 1. çerçeve
için,
<frame src=”http://kodlab.com” id=”site1”/>frame tan›mlamas›
2. çerçeve için,
<frame src=”form.html” id=”form”/>frame tan›mlamas› 3. çerçeve
için,
<frame src=”http://www.firat.edu.tr” id=”site2”/>frame ta-
n›mlamas› 4. çerçeve için.
NOT Bir çerçeve kümesinde hem frameset hemde frame’ler içerisinde border-
color tan›mlanm›fl ise bu durumda ilk frame’de tan›mlanan bordercolor
geçerli olacakt›r. Ayr›ca iç içe framesetlerde alt frameset’e herhangi bir
bordercolor tan›mlanmam›fl ise ana frameset içerisinde tan›mlanan bor-
dercolor rengi kullan›l›r.
300 JAVASCRIPT
Örnek
‹ç içe frameset yap›lar› oluflturabilirsiniz.
<head>
charset=utf-8” />
</head>
bordercolor=”blue” border=”5”>
<frame src=”menu.html” id=”menu” bordercolor=”gray” />
<frameset cols=”*,*”>
<frame src=”http://www.gyte.edu.tr” id=”site3”/>
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
Sonuç
ÇERÇEVELER 301
‹ç içe frameset tan›mlan›rken dikkat edilmesi gereken gömülü frame-

set’i ana frameset içerisinde hangi frame yerine oluflturaca¤›m›zd›r. Ana
frameset içerisinde hangi frame yerine frameset oluflturacaksak o frame
yerine frameset tan›mlayaca¤›z.
Örne¤in ana frameset içinde 4. frame yerine frameset tan›mlayaca¤›z

bu durumda gömülü frameset içerisinde istedi¤imiz kadar frame olufltu-
rabiliriz. Mant›k yine ayn› olacakt›r.
noframes Etiketi
Bu etiketi kullanarak frameset yap›s›n› tan›mayan yani deste¤i olma-
yan taray›c›lar için alternatif içerik oluflturabilirsiniz.
Örnek

<head>
charset=utf-8” />
</head>
bordercolor=”blue”>
<frame src=”menu.html” id=”menu” />
</frameset>
<noframes><body>
frameset yapısını tanımayan tarayıcılar için içerik yazabilirsiniz.
</body></noframes>
</html>
<noframes> tag› içerisindeki <body> etiketi iste¤e ba¤l›d›r, isterseniz

kullanmayabilirsiniz.
302 JAVASCRIPT
›frame Nesnesi
iframe nesnesi ile sayfa içerisinde istedi¤iniz bir alanda baflka bir web
sayfas› ya da doküman› göstermek için bir çerçeve oluflturabilirsiniz.
Oluflturdu¤unuz bu çerçeve bir taray›c› gibi çal›flacakt›r.
Örnek
<head>
charset=utf-8” />
body
{
background-color: #DDD;
}
</style></head>
<body>
<table width=”467” border=”1” align=”center”>
<tr>
<td width=”205”><p>Sayfanızı ziyaret eden kullanıcı â
ile ilgili kısa bilgileri saklamak için çerezleri â
kullanabilirsiniz. </p></td>
<td width=”246”><iframe src=”orta.html” width=”250” â
height=”150”></iframe></td>
</tr>
</table>
</body>
</html>
ÇERÇEVELER 303
Dikkat ederseniz iframe içerisinde menu.html gösterilmektedir.
Özellikleri
• src: iframe içerisine yüklenecek sayfa ad› ya da URL’si.
• id: iframe nesnesine benzersiz bir isim atamak için kullan›l›r.
• height: iframe’in yüksekli¤i.
• width: iframe’in geniflli¤i.
• name: iframe’in ad›.
• frameborder: iframe kenarlar›n›n olup olmayaca¤›n› ayarlayabilirsi-
niz. ‹nternet Explorer taraf›ndan nesne özelli¤i olarak desteklenmiyor,
fakat etiket içerisinde kullanabilirsiniz.
frameborder = 1 | 0 eğer 1 değerini atarsanız kenarlık
olacaktır.0 değerinde ise kenarlık olmaz.
• marginWidth: iframe içeri¤i ile iframe kenarl›¤› aras›ndaki yataydaki

bofllu¤u ayarlayabilirsiniz. (left, right)
• marginHeight: iframe içeri¤i ile iframe kenarl›¤› aras›ndaki dikeydeki
bofllu¤u ayarlayabilirsiniz. (top, bottom)
• scrolling: Kayd›rma çubuklar›n› aktif ya da pasif yapar. ‹nternet Exp-
lorer taraf›ndan nesne özelli¤i olarak desteklenmiyor, fakat etiket içeri-
sinde kullanabilirsiniz.
Etiket içerisinde HTML karfl›l›¤›n› kulland›¤›n›zda:
scrolling = yes | no | auto fleklinde de¤erler verebilirsiniz.
• align: iframe’in yan›nda bulunan sat›r elemanlar›na göre hizalanmas›

Örnek

<head>
charset=utf-8” />
304 JAVASCRIPT
</head>
<body bgcolor=”gray”>
<iframe src=”http://kodlab.com”
name=”kodlab”
frameborder=”0”
height=”300”
width=”300”
scrolling=”auto”>
</iframe>
</body>
</html>
Örnek
Sayfa içerisinde select nesnesi ile oluflturdu¤umuz bir aç›lan kutumuz
olsun ve aç›lan kutu içerisinde kullan›c›n›n seçti¤i sayfa iframe içerisi-
ne yüklensin.

<head>
charset=utf-8” />
ÇERÇEVELER 305
function islem()
{
var say=document.getElementById(“sec”).selectedIndex;
var sayfaadresi=document.getElementById(“sec”).options[say].value;
document.getElementById(“yaz”).src=sayfaadresi;
}
</script>
</head>
<body>
<select id=”sec” onchange=”islem()”>
<option>Seçim Yapınız</option>
<option>Milli Eğitim Bakanlığı</option>
<option>Kodlab Yayın Evi</option>
<option>Fırat Üniversitesi</option>
<iframe id=”yaz” width=”400” height=”300”></iframe>
</select>
</body>
</html>
306 JAVASCRIPT
Yukar›daki örne¤imizde bizim için önemli olan kullan›c›n›n select nes-

nesi içerisinden yapt›¤› seçimdir. Kullan›c›n›n yapt›¤› seçimi anlamak
içinde önceden kulland›¤›m›z yöntemleri kullanal›m.
Kullan›c›n›n seçti¤i eleman›n index numaras›n› selectedIndex özelli¤i

ile ö¤renebiliyorduk:
var say=document.getElementById(“sec”).selectedIndex;
Seçili eleman›n index numaras› say isimli de¤iflkene atan›yor.
index numaras›n› bildi¤imiz bir eleman› referans olarak almak için ya-
ni o elemana ulaflmak için options[index numarası] kulland›¤›m›z›
hat›rlay›n:
var sayfaadresi=document.getElementById(“sec”).options[say].value;
Seçili index numaras›na sahip eleman›n value de¤erine ulafl›ld› ve say-

faadresi de¤iflkenine atand›.
Daha sonra iframe nesnesine ulafl›l›p src özelli¤ine kullan›c›n›n seçti¤i

sayfa adresi atand›.
ÇEREZLER
15
Çerez Oluflturma 307
Çerezi Okumak 309
Sayfan›z› ziyaret eden kullan›c› ile ilgili k›sa bilgileri saklamak için çe-
rezleri kullanabilirsiniz. Bu bilgiler kullan›c› bilgisayar›nda küçük text
dosyalar›nda saklan›r. Örne¤in; kullan›c› sayfan›z› ziyaret etti¤inde bu
sayfay› en son ziyaret etti¤i zaman›, sayfaya kaç›nc› defa girdi¤ini ya da
basitçe hoflgeldin mesaj› gösterebilirsiniz. Çerezlerin kullan›labilmesi
için kullan›c›n›n bilgisayar›nda çerezlere izin verilmifl olmas› gerekir.
document.cookie bir metin dizisi olarak kullan›c›n›n bilgisayar›nda
var olan çerez (cookie) bilgilerini saklar.
Çerez Oluflturma
document.cookie=cerezadi+”=”+escape(deger)+”;expires=”+sonkultarih;
cerezadi: Çerezin ismi.
deger: Çerez içerisinde saklayaca¤›n›z veri.
sonkultarih: Çerezin son kullanma tarihi, e¤er bir tarih belirtmemifl-
seniz taray›c›y› kapatt›¤›zda ya da bilgisayar kapand›¤›nda oluflturdu¤u-
nuz çerez silinir. Son kullanma tarihi GMT(utc) zaman standart›nda ol-
mal›d›r.
308 JAVASCRIPT
‹lk örne¤imizde bir çerezin nas›l oluflturuldu¤unu görelim:

<head>
charset=utf-8” />
function cerez_olustur()
{
var cerezadi=document.getElementById(“ad”).value;
var cdegeri=document.getElementById(“deger”).value;
var gun=document.getElementById(“gun”).value;
var bugun=new Date();
// içerisinde bu günün tarih ve saati olan bugun isimli
// tarih nesnesi oluşturdum
bugun.setDate(bugun.getDate()+gun);
/* Bu günün tarih bilgisini saklayan
bugun isimli tarih nesnesinin gün bilgisini setDate() metodunu â
kullanarak
yeniden ayarlayacağız.Yeni gün bilgisi bugun nesnesinin gün â
bilgisi ile
gun değişkeni içerisindeki değerin toplamı olacaktır.
*/
document.cookie=cerezadi+”=”+escape(cdegeri)+”;expires=”+bu-
gun.toGMTString()
}
</script>
</head>
<body>
<input type=”text” id=”ad” />:Çerez Adı<br />
<input type=”text” id=”deger” />:Çerez içinde saklanacak
veri<br />
<input type=”text” id=”gun” />:Kaç gün yaşayacak<br />
<input type=”button” value=”Çerezi Oluştur” â
onclick=”cerez_olustur()”/>
</body>
</html>
ÇEREZLER 309
Sayfam›za bakal›m:
Çerez, Temporary Internet Files klasörü içerisinde oluflacakt›r.
Çerezi Okumak
Kullan›c›n›n bilgisayar›nda bir çerezin var olup olmad›¤›n› kontrol et-
memiz gerekir. Çerez kullan›c› taraf›ndan silinebilir. Ya da çerez için
son kullanma tarihi geçmifl olabilir.Bu durumda çerezin var olup olma-
d›¤› kontrol edilmelidir.
Yukar›daki örne¤imizi kullanarak iki tane cookie olufltural›m:
Çerez Ad› = ad, Saklad›¤› de¤er = harun

Çerez Ad› = meslek, Saklad›¤› de¤er = bilgisayar
fleklinde olsun. Bu durumda document.cookie nesnesinin saklad›¤›

içeri¤i ekrana yazd›ral›m.
Örnek
<head>
charset=utf-8” />
310 JAVASCRIPT
function cerez_kontrol()
{
document.write(document.cookie);
// sonuç: ad=harun; meslek=bilgisayar
}
</script>
</head>
<body>
<input type=”button” value=”Çerezi Kontrol Et” â
onclick=”cerez_kontrol()”/>
</body>
</html>
Dikkat ederseniz çerez adlar› ve ald›klar› de¤erler aralar›nda noktal› vir-

gül olmak kayd›yla listelendi.
Örnek
Kullan›c›n›n metin kutusuna yazd›¤› isme sahip çerez olup olmad›¤›n›

kontrol edelim ve e¤er çerez varsa de¤erini okuyup “Çerez ‹çeri¤i” met-
ninin alt›nda oluflturdu¤umuz div içerisine yazd›ral›m.
document.cookie nesne özelli¤ini yazd›rd›¤›m›zda afla¤›daki flekilde

metin dizisi almaktay›z.
ad=harun; meslek=bilgisayar
Kodlar›m›za geçelim:

<head>
charset=utf-8” />
div
{
ÇEREZLER 311
background-color:#DDF9E0;
border-style:solid;
border-width:thin;
width:150px;
height:50px;
border-color:#333;
}
</style>
function cerez_oku()
{
var cerezadi=document.getElementById(“ad”).value;
// metin kutusundaki değer cerezadi değişkenine atandı.
var ara=cerezadi+”=”;
var konum1=document.cookie.indexOf(ara);
/*
ara değişkenine atanacak değer document.cookie metin dizisi
içerisinde aranacak.Eğer bulunursa indexOf() metodu cerezadi
değişkenine atanmış ilk karakterin index numarasını , bulamazsa
-1 değerini döndürür.
*/
if(konum1!=-1)// eğer aranan değer bulunursa
{
konum1=konum1+cerezadi.length+1;
konum2=document.cookie.indexOf(“;”,konum1);
if(konum2==-1)
{
konum2=document.cookie.length;
}
var deger=unescape(document.cookie.substring(konum1,konum2));
document.getElementById(“yaz”).innerHTML=deger;
}else{
document.getElementById(“yaz”).innerHTML=”Belirtilen â
isme sahip çerez bulunamadı”;
}
}
</script>
</head>
<body>
Çerez Adını Yazınız<br />
312 JAVASCRIPT
<input type=”text” id=”ad” /><br />

<input type=”button” value=”Çerezi Kontrol Et” â
onclick=”cerez_oku()”/><br />
Çerez İçeriği
</body>
</html>
Sayfam›z› çal›flt›rd›¤›m›zda:
Dikkat ederseniz çerez ad› k›sm›na “meslek” yaz›l›p Çerezi Kontrol

Et dü¤mesine t›klad›¤›m›zda çerez içeri¤i k›sm› otomatik olarak yaz›l-
maktad›r.
Kodlar›m›z›n nas›l çal›flt›¤›n› anlatal›m:
Kullan›c›n›n metin kutusuna “meslek” yazd›¤›n› düflünürsek: cerezadi

de¤iflkenine “meslek” de¤eri atanacakt›r. Bizim için önemli olan “mes-
lek” ad›n›n cookie metin dizisi içerisinde bulunmas›d›r. E¤er böyle bir
ad cookie metin dizisinde bulunuyorsa çerezimiz vard›r. Aksi durumda
çerez yoktur.
ÇEREZLER 313
document.cookie metin dizisi içerisinde “meslek=” ifadesini inde-

xOf() metoduyla ar›yoruz.E¤er konum1 de¤iflkeninin ald›¤› de¤er -1 ise
“meslek=” ifadesi document.cookie metin dizisinde yoktur. Bu durum-
da div içerisine “Belirtilen isme sahip çerez bulunamad›” fleklinde bir
yaz› yazd›r›lacakt›r. E¤er -1’den farkl› bir de¤er geriye dönderse bu du-
rumda arad›¤›m›z ifade document.cookie metin dizisinde vard›r ve dö-
nen de¤er “meslek=” ifadesindeki “m” karakterinin index numaras›d›r.
Bu durumda konum1 içerisine “m” karakterinin index numaras› atanm›fl

oldu.
document.cookie metin dizisinin içeri¤ini hat›rlarsak;
ad=harun; meslek=bilgisayar
document.cookie.length de¤eri 27 olacakt›r. “m” karakterinin index

numaras› 10 dur. Sonuçta biz “meslek” ad›na sahip çerezin de¤erini
okuyaca¤›m›zdan;
komut sat›r› ile konum1 de¤iflkenine “bilgisayar” metninin ilk karakteri-

nin index numaras› olan 17 de¤erini atam›fl olduk.
document.cookie metin dizisi içerisinde “;” karakerini konum1 de¤ifl-

kenine atanan index numaras›ndan bafllayarak indexOf() metoduyla
ar›yoruz. E¤er konum2 de¤iflkeninin ald›¤› de¤er -1 ise bu durumda ko-
num2 de¤iflkenine document.cookie.length sonucu olan 27 de¤erini
at›yoruz.
Bu durumda konum1 de¤iflkeni içerisinde “meslek” ad›na sahip co-

okie’nin ald›¤› de¤erin ilk harfinin index numaras› atanm›fl oldu. Ayn›
zamanda konum2 de¤iflkenine document.cookie.length sonucu olan
27 de¤eri atand›.
document.cookie metin dizisinden alaca¤›m›z metin parças› ile ilgili

bafllang›ç ve bitifl index numaralar› elimizde mevcut. (konum1, konum2)
substring() metodunu kullanarak bu metin parças›n› metin dizisi içe-

risinden alabiliriz.
314 JAVASCRIPT
unescape() metodu ile cookie oluflturdu¤umuzda kodlad›¤›m›z metin

gurubunu çözüp deger isimli de¤iflkene at›yoruz.
Örnek
Sayfa yüklendi¤inde afla¤›daki flekilde bir mesaj penceresi belirsin ve
kullan›c› e¤er Tamam derse kullan›c›n›n ad› ve soyad› sorulsun.
Kullan›c› ad› ve soyad›n› yazd›ktan sonra bilgisayar›nda “adsoyad”

isimli bir çerez oluflturulacak ve kullan›c› taraf›ndan girilen de¤er bu çe-
rezde saklanacak.
ÇEREZLER 315
Kullan›c› sayfay› tekrar ziyaret etti¤inde:
fleklinde kullan›c› kendi ad›n› içeren bir hofl geldiniz mesaj› ile karfl›la-
flacak.
Kodlar›m›z
<head>
charset=utf-8” />
function sor()
{
if(confirm(“Sayfamızın sizi tanımasını istermisiniz ?”))
{
cerez_olustur();
}
}
316 JAVASCRIPT
function cerez_olustur()
{
var cdegeri=prompt(“Ad ve Soyadınızı Giriniz”,””);
if(cdegeri==”” || cdegeri==null)
{
return;
}
/*
eğer kullanıcı girdi kutusuna bir metin girmezse yada
girdi kutusunda iptal’e basarsa çerez oluşturulmayacak!
*/
var cerezadi=”adsoyad”;
var gun=10;
var bugun=new Date();
bugun.setDate(bugun.getDate()+gun);
document.cookie=cerezadi+”=”+escape(cdegeri)+”;expires=”+bu-
gun.toGMTString();
}
function cerez_oku()
{
var cerezadi=”adsoyad”;
var ara=cerezadi+”=”;
var konum1=document.cookie.indexOf(ara);
if(konum1!=-1)
{
konum2=document.cookie.indexOf(“;”,konum1);
if(konum2==-1)
{
konum2=document.cookie.length;
}
var deger=unescape(document.cookie.substring(konum1,konum2));
alert(deger+” “+”Sayfamıza Hoş Geldiniz!”);
}else{
sor();
}
}
</script>
</head>
<body onload=”cerez_oku()”>
</body>
</html>
ÇEREZLER 317
318 JAVASCRIPT

İbrahim Çelikbilek (Kodlab) - JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

İbrahim Çelikbilek (Kodlab) - JavaScript

Uploaded by

Copyright:

Available Formats

+JAVASCRIPT-kunye 7/30/09 9:33 PM Page i

Yay›n Da¤›t›m Yaz›l›m ve E¤itim

1. Bask›: A¤ustos 2009

Yay›n Yönetmeni: Suat Özdemirci

KODLAB Yay›n Da¤›t›m Yaz›l›m ve E¤itim Hizmetleri San ve Tic Ltd.fiti

tel: (212) 514 55 66 fax: (212) 514 66 61

<body> Etiketleri ‹çerisine Javascipt Kodu Yazma 27

8 HATA DENET‹M‹ 113

ctrlKey Özelli¤i 223

maxLength Özelli¤i 259

Javascript taray›c›da çal›flan bir script dilidir. Browser (taray›c›) javasc-

WEB SAYFASI à ‹çerik + Sunum + Etkileflim

Yukar›ya bakt›¤›m›zda içerik k›sm›n› HTML ile oluflturdu¤umuzu bili-

Etkileflim dedi¤imizde web sayfas›n›n kullan›c› hareketlerine tepki gös-

Programlama dillerinde yaz›lan kodlar tek bafllar›na çal›fl›rlar. Kodlar›

Javascript ile kullan›c› hareketlerine duyarl› olan ve kullan›c› ile iletifli-

Son zamanlarda popüler olan AJAX sayfan›n tamam›n› yenilemeden sa-

Javascript dedi¤imizde DOM modelinden bahsetmek gerekir. DOM

etiketleri tan›mlan›r. Özet olarak sayfada gözükmeyen tan›mlama blok-

<body></body>: Sayfan›n gövdesi. Bu etiketlerin aras›nda ise pencere-

Javascript kodlar›n›n nereye ve nas›l yaz›laca¤› afla¤›da anlat›lacakt›r.

Javascript kodlar›m›z› HTML içerisine eklemekteyiz. HTML sayfas›n›

Javascript kodlar›m›z› <script></script> taglar› aras›na yaz›yoruz.

<script language=”javascript” type=”text/javascript”>

// Kodların Yazılacağı Bölüm

language: Javascript sürümünü belirtmek için kulland›¤›m›z bir para-

type: ‹çeri¤in tipini tan›mlamak için kullan›l›r. Standart script bloklar›

Javascr›pt Kodlar›n› HTML

2. Javascript kodlar›m›z› <body> etiketleri aras›nda tan›mlayabiliriz. Bu

3. Javascript kodlar›m›z› d›flar›da (.js) uzant›l› bir dosya içerisinde sakla-

Burada script etiketinin kapat›ld›¤›na dikkat edin. ilk.js dosyas› içeri-

• E¤er src parametresi kullan›lm›flsa <script></script> bloklar› aras›-

Sayfam›za bir buton ekleyelim ve olay yönlendiriciye Javascript kodu

onClick olay yönlendiricisine Javascript kodu yaz›lm›fl.

fiunu söyleyelim; dikkat edilirse <script> taglar› kullan›lmad› ve direk

• Javascript olay yönlendiricilerine fonksiyon da atanabilir.

Burada onClick olay› oldu¤unda bir fonksiyon ça¤r›lmakta yani çal›fl-

Kodlar Aras›na Aç›klama

E¤er tek bir aç›klama sat›r› oluflturmak istiyorsan›z;

karakterini kullanabilirsiniz. Bu sat›rdaki kodlar Javascript taraf›ndan

E¤er birden fazla aç›klama sat›r› oluflturmak isterseniz;

sembollerini kullanman›z gerekecektir. Bu sembollerin aras›nda bulu-

<script language=”javascript” type=”text/javascript”>

Kodlar›m›z› Eski Sürüm

<script language=”javascript” type=”text/javascript”>

‹ki sembol aras›ndaki kodlar eski taray›c›lar taraf›ndan HTML Com-

Sayfa Aç›l›fl›nda Javascr›pt

Derleme (Compile) ifllemi yap›lan programlama dillerinde de¤iflkene

Ad›, de¤iflkenin saklayaca¤› veri türü belirlenmelidir.

Örne¤in, VB.NET’te de¤iflken tan›mlarken;

Veri türü: De¤iflken içerisinde hangi türde verilerin saklanaca¤›d›r.

Scope: De¤iflkenin geçerli olaca¤› yani o de¤iflkeni kullanabilece¤imiz

Javascript’te de¤iflkene de¤er atad›¤›n›zda veri türü otomatik olarak be-

2. Javascript büyük-küçük harf ayr›m› yapar (case sensitivity) .Yani AD

4. De¤iflken ismi olarak Javascript rezerve sözcükleri kullan›lmaz. Yani

var adi=”ahmet” do¤ru

De¤iflkenlere De¤er Atamak

<script language=”javascript” type=”text/javascript”>

De¤iflkenlere metin ya da metin gruplar› atarken çift t›rnak ya da tek t›r-

Sonuçta ad de¤iflkeni de¤eri can ve veri türü string olacakt›r.

<script language=”javascript” type=”text/javascript”>

<script language=”javascript” type=”text/javascript”>

bilirsiniz. Javascript say›sal de¤erleri de metin olarak kabul eder. Bir

<script language=”javascript” type=”text/javascript”>