Scribd
Upload
9 views20 pages

Javascript 9 Betik

Uploaded by

Алина Максатбекова
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views20 pages

Javascript 9 Betik

Uploaded by

Алина Максатбекова
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1 <!

DOCTYPE html>
2 <html lang="tr">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8
9 </head>
10 <body>
11 <!--1.1. Betik Dili (JavaScript)
12 Betik dili, web sayfalarında dinamik içerik sağlamak ve kullanıcıyla iletişim kurmak için kullanılan, istemci tarafında çalışan bir dil
dir. Html etiketleri arasında tanımlanarak kullanılabilir. 1995 yılında Brendan Eich tarafından geliştirilmiştir. JavaScript dilini, c dili
nin web sayfalarına uyarlanmış basit sürümü olarak düşünülebilirsiniz. JavaScript dili isim benzerliğine rağmen Java ile birbirinde
n bağımsız ve farklı dillerdir. Java gerçek bir programlama dilidir. JavaScript ise bir script dildir. -->
13
14 <!--1.1.1. HTML’e JavaScript Kodlarını Tanıtma
15 Script kodlarını html’e tanıtmak için;
16 <script type="text/javascript" language="javascript"></script> etiketleri kullanılır.
17 Type parametresi script blokları arasında yazılacak kodların türünü belirtir. Language parametresi ile JavaScript kodlarının sürü
münü belirtir. Tüm tarayıcılarda sorunsuz çalışması için JavaScript seçmek doğru olacaktır.
18 -->
19
20 <!--1.1.2. JavaScript Kodlarının HTML’deki Konumu
21 JavaScript kodları sayfa içerisinde üç bölümde kullanılabilir:
22 - Birinci yol, script kodlarını head etiketleri arasına yazarak kullanmaktır. <head></head> etikletleri arasında yazılan kodlar sayfa
yüklenmeden derlenecektir. Sayfamızda gerçekleşen olaylar karşısında (düğme tıklanması vb.) kodların çalışmasını istiyorsak g
erekli fonksiyonları ve değişkenleri bu bölümde yazmamız gereklidir.
23
24 <head>
25 <meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
26 <script language="javascript" type="text/javascript">
27 [Link]("İlk JavaScript kodlarım");
28 </script>
29 </head>
30
31 ikinci yol, script kodlarını <body></body> etiketleri arasına yazarak kullanmaktır. Body etiketleri arasına yazılan script kodları sayf
a yüklendiğinde otomatik olarak derlenip çalışacaktır.
32
33 <body>
34 <script language="javascript" type="text/javascript">
35 [Link]("İlk JavaScript Kodlarım");
36 </script>
37 </body>
38
39 iki şekilde de sayfanın çıktısı aynı olacaktır.
40 Script çalıştırmanın diğer bir yolu *.js uzantılı olarak kaydettiğimiz haricî bir JavaScript dosyasını sayfaya dâhil edip kodları çalıştı
rmaktır.
41 Web sayfasına harici JavaScript dosyası dâhil etmek için;
42 notepad programını açarak script kodlarını yazarak [Link] şeklinde masaüstüne kaydediniz. açıp kodları yazınız.
43 Script komutunun src parametresini kullanarak oluşturduğunuz js dosyasını aşağıdaki şekilde web sayfasına dâhil ediniz.
44
45 <script src="[Link]" language="javascript" type="text/javascript">
46 </script>
47 -->
48
49 <!--
50 1.2. Yazım Kuralları
51 JavaScript kodlarını yazarken basit yazım kuralları vardır. JavaScript kodlarını yazmamızı sağlayan editörleri kullanmadan hata b
ulmak ve hataları düzeltmek çok fazla vakit alır.
52 JavaScript, html etiketleri gibi boşlukları önemsemez. Örneğin sayi=10 ile sayi = 10 aynı şekilde çalışacaktır.
53
54 1.2.1. isimlendirme
55 JavaScript dili büyük küçük harf duyarlı bir dildir. JavaScript dilinde ad, Ad, AD, aD birbirinden farklı isimlerdir. JavaScript dilinde
değişkenler, fonksiyonlar vb. nesneler;
56 Sayı ile başlayamaz.
57 Kelimeler arasında boşluk kullanılamaz.
58 Boşluk yerine _ işareti kullanılır.
59 JavaScript dili için ayrılmış kelimeler herhangi bir nesneye isim olarak verilemez.
60 Ayrılmış kelimeler:
61 break
62 else

D:\casmin\javascript\9 Betik Dili [Link]: 1/20


63 new
64 var
65 case
66 finally
67 return
68 void
69 catch
70 for
71 switch
72 while
73 continue
74 function
75 this
76 with
77 default
78 if
79 throw
80 double
81 delete
82 in
83 try
84 import
85 do
86 instanceof
87 typeof
88 public
89 abstract
90 enum
91 int
92 short
93 boolean
94 export
95 interface
96 static
97 byte
98 extends
99 long
100 super
101 char
102 final
103 native
104 synchronized
105 class
106 float
107 package
108 throws
109 const
110 goto
111 private
112 transient
113 debugger
114 implements
115 protected
116 volatile
117
118 1.2.2. Özel işaret Gösterimi
119 JavaScript kodları içerisinde özel karakter kullanmak istersek \ işaretini özel karakterin başına eklemek zorundayız. Eklenebilece
k özel karakterler tablosu aşağıdadır:
120 Kod Çıktı
121 \' Tek tırnak
122 \" Çift tırnak
123 \& Ve işareti
124 \\ Ters taksim
125 \n Yeni satır
126 \r Satır başı
127 \t tab
128 \b backspace
129 \ Besleme oluşturur
130
131 <script>
132 var yazi="Yaşlı kadın "Volkan" diye bağırdı.";
133 [Link](yazi);

D:\casmin\javascript\9 Betik Dili [Link]: 2/20


134 </script>
135 Yukarıdaki kodlarda volkan kelimesi için çift tırnak işareti kullanılmak istenmiştir. Çift tırnak işareti aynı zamanda script ifadesinin
bittiğini göstermektedir. Bu yüzden 12 numaralı satır hata verecek ve script kodumuz çalışmayacaktır.
136
137 <script>
138 var yazi="Yaşlı kadın \"Volkan\" diye bağırdı.";
139 [Link](yazi);
140 </script>
141
142 \ ifadesi tırnakların başına eklenerek bu hata ortadan kaldırılmıştır.
143 -->
144
145 <!--1.2.3. Yorum Kodları
146 Yazılan script kodlarına diğer programcılar ya da kendiniz için açıklamalar eklemek isteyebilirsiniz ya da istediğiniz herhangi bir k
odun çalışmasını istemeyebilirsiniz. Bu durumlarda açıklama satırları eklemek ya da kodları açıklama satırı hâline getirmek fayd
alı olacaktır. iki şekilde açıklama satırı eklenebilir.
147 // simgesini kullanarak tek satır hâline açıklama satırı eklenebilir. ifade alt satıra geçtiğinde açıklama satırından çıkmış olur.
148
149 <script>
150 //bu ifade açıklamadır.
151 /*bu da cok çok satırlı bir ifadedir*/
152 </script>
153 -->
154 <!--
155 1.3. Değişkenler
156 Programlama dillerinde belirlediğimiz isimlerle oluşmuş ve hafızada yer kaplayan alanlara değişken denir. Tüm programlama dill
erinde olduğu gibi JavaScript içerisinde de değişken tanımlaması yapılarak kullanılır.
157
158 1.3.1. Değişken Tanımlama ve Değişken Türleri Değişken tanımlamak için variable (değişken) kelimesinin kısaltılmışı olan var k
elimesi kullanılır. Var kelimesinden sonra değişken ismi yazılarak değişken tanımlanmış olur. Değişken tanımlanırken dikkat edil
mesi gereken kurallar bulunmaktadır. Bu kurallardan isimlendirme başlığı altında bahsetmiştik. Bu kuralların yanında Türkçe kar
akter kullanmak değişkenler için herhangi bir sorun oluşturmasa da yazdığınız kodları çalıştıracak bilgisayarlarda (örneğin Çin’de
ki bir bilgisayarda) nasıl çalışacağını düşünerek Türkçe için kullanılan high-ASCII (ı, i, ğ, Ğ, i, i, ü, Ü, ö, Ö, ç, Ç ) karakterlerini kull
anmamamız daha uygun olacaktır.
159
160 Değişken tanımlamak için kullanacağımız kalıp aşağıdadır:
161 var degisken_ismi
162
163 Değişkenler için kullanabileceğimiz üç temel değişken türü bulunur:
164 Number veri tipi
165 Sayıları tutmak için number veri türü kullanılır. Tüm sayılar için tanımlanan değişken kullanılabilir.
166 Boolean veri tipi
167 Doğru (true) ve yanlış (false) olmak üzere iki adet lojik değer tutar. Genellikle karşılaştırma işlemlerinde kullanılır.
168 String veri tipi
169 Karakter, metin ya da metin gruplarında kullanılır. String ifadeler tanımlanırken tırnak işareti kullanılır. Sayı değerleri tırnak içerisi
nde tanımlanmış ise string ifade olarak alınır ve matematiksel işlem yapılmaz.
170
171
172 1.3.2. Değişkenlere Değer Verme
173 JavaScript dilinde tanımlanan değişken, herhangi bir değer verilmediğinde boş olarak bekleyecektir.
174 <script>
175 var sayilar;
176 alert(sayilar);
177 </script>
178
179 JavaScript dilinde değişken tanımlarken aynı satır içerisinde değişkene değer verme imkânı sunmuştur. Bu sayede değişken tanı
mlanırken değer aktarılmış olur.
180 <script>
181 var sayilar=10;
182 alert(sayilar);
183 </script>
184
185 Değişkene eşittir (=) ifadesi kullanılarak değer atanmıştır. Eşittir ifadesi atama operatörüdür ve eşitliğin sağ tarafındaki değeri sol
taraftaki değişkene aktarır. Değişken tanımlanırken unutmamamız gereken kural, tanımlamanın değişken kullanılmadan önce ya
pılmasıdır.
186 <script>
187 var sayilar;
188 sayilar=10;
189 alert(sayilar);
190 </script>
191 187. satırda sayilar isminde bir değişken oluşturulmuş 12. satırda değişkene değer atanmıştır.
192

D:\casmin\javascript\9 Betik Dili [Link]: 3/20


193 Farklı türlerde değişken tanımlayarak değer vermek için;
194 <script>
195 var sayi1, sayi2;
196 sayi1=10;
197 sayi2=20;
198 var sayi3=30;
199 var isim="Hüseyin ÖZCAN";
200 var cinsiyet='E';
201 var yas="30";
202 var dogrumu="true";
203 Tanımladığımız değişkenlerde isim değişkeninde çift, cinsiyet değişkeninde tek tırnak kullanılmıştır. işlevsellikte herhangi bir fark
yoktur. Fakat kod okunurluğu açısından iç içe kullanımlarda farklı tırnakları kullanmak faydalı olacaktır. Yas değişkeni tırnaklar ar
asına alınarak string ifadeye çevrilmiştir.
204
205
206 1.3.3. Tür Dönüşümleri
207 JavaScript dinamik bir dildir. Veri türlerini kendisi otomatik olarak yapabilir. Tanımlayıp sayısal değer verdiğiniz bir değişkene dah
a sonra string türünden değer atayabilirsiniz.
208
209 Sayi isminde 50 değerinde bir değişkenin değerini Merhaba yapmak için;
210 <script>
211 var sayi=50;
212 sayi="Merhaba";
213 [Link](sayi);
214 </script>
215 JavaScript Number türünü otomatik olarak string türüne çevirecektir.
216
217
218 1.3.4. Türler Arası işlemler
219 Toplama ve çıkartma operatörleri ile farklı veri türleri arasında işlemler yapılabilir.
220
221 Toplama operatörü ile yapılan işlemler
222 <script>
223 var yazi="merhaba"; // string türünde
224 var sayi=40; // number türünde
225 alert(yazi+sayi);
226 // sayfayı çalıştırdığımızda merhaba40 çıktısını verecektir.
227 </script>
228
229 <script>
230 var yazi="merhaba"; // string türünde
231 var dogrumu=false; // boolean türünde
232 alert(yazi+dogrumu);
233 // sayfayı çalıştırdığımızda merhabafalse çıktısını verecektir.
234 </script>
235
236 <script>
237 var dogrumu=true; // boolean türünde
238 var sayi=40; // number türünde
239 alert(sayi+dogrumu);
240
241 // sayfayı çalıştırdığımızda 41 çıktısını verecektir.
242 //Boolean türü ile number türünü topladığımızda sayı ile mantıksal türün true (1) ve false (0) değerlerini toplar.
243 </script>
244
245
246 Fark operatörü ile yapılan işlemler
247 Sayı türü ile string türü arasında fark işlemi yapıldığında sayı değil ( NaN ) uyarısını verecektir.
248 <script>
249 var yazi="merhaba"; // string türünde
250 var sayi=40; // number türünde
251 alert(yazi-sayi);
252 </script>
253
254 Sayı türü ile Boolean türü arasında işlem yapıldığında
255 <script>
256 var dogrumu=true; // boolean türünde
257 var sayi=40; // number türünde
258 alert(sayi-dogrumu);
259 </script>
260 40-true(1)=39 değerini verecektir.
261 -->

D:\casmin\javascript\9 Betik Dili [Link]: 4/20


262
263
264
265 <!--
266 1.4. Operatörler ve işlem Öncelik Sırası
267 1.4.1. Aritmetik Operatörler
268 Toplama operatörü (+)
269 Bu operatör, sayısal ifadeleri ve mantıksal ifadeleri matematiksel olarak toplar.
270 <script>
271 var sayi1=10;
272 var sayi2=20;
273 [Link](sayi1+sayi2);
274 </script>
275
276 <script>
277 var mantiksal1=true;
278 var mantiksal2=true;
279 [Link](mantiksal1+mantiksal2); // 2
280 </script>
281
282 <script>
283 var yazi1="Kırgız-Türk Anadolu Kız Meslek Lisesi ";
284 var yazi2="KIRGIZİSTAN";
285 [Link](yazi1+yazi2);
286
287 Fark operatörü (-)
288 Sadece matematiksel ifadelerde kullanılır. Çıkarma işlemi yapılır.
289 <script>
290 var sayi1=10;
291 var sayi2=20;
292 [Link](sayi1-sayi2);
293 </script>
294
295 Çarpma operatörü(*)
296 Matematiksel çarpma işlemi yapılır.
297 <script>
298 var sayi1=10;
299 var sayi2=20;
300 [Link](sayi1*sayi2);
301 </script>
302
303 Bölme operatörü (/)
304 Bölme işlemi yapılır.
305 <script>
306 var sayi1=10;
307 var sayi2=20;
308 [Link](sayi1/sayi2);
309 </script>
310
311 Mod operatörü (%)
312 Bölme işlemindeki kalanı bulmak için kullanılır.
313 <script>
314 var sayi1=100;
315 var sayi2=12;
316 [Link](sayi1%sayi2);
317 </script>
318
319 Arttırma operatörü (++)
320 Sayının sonuna ya da başına eklenmesi durumunda sayının değerini 1 arttırır.
321 <script>
322 var sayi1=10;
323 sayi1++;
324 [Link](sayi1);
325 </script>
326
327 Azaltma operatörü (--)
328 Sayının sonuna ya da başına eklenmesi durumunda sayının değerini 1 azaltır.
329 <script>
330 var sayi1=10;
331 sayi1--;
332 [Link](sayi1);
333 </script>

D:\casmin\javascript\9 Betik Dili [Link]: 5/20


334
335
336 1.4.2. Atama Operatörleri
337 Atama operatörü (=)
338 Sağ taraftaki değeri sol taraftaki değişkene atama işlemi yapar.
339 <script>
340 var sayi1=10;
341 </script>
342
343 Ekle ve ata operatörü(+=)
344 Yığmalı toplam işlemi yapacaktır. Soldaki değişkenin değerini sağdaki değer kadar arttırıp değişkene yeni değer verir.
345 <script>
346 var sayi1=10;
347 [Link](sayi1);
348 sayi1+=5;
349 [Link](sayi1);
350 sayi1+=5;
351 [Link](sayi1);
352 </script>
353
354 ***Böl ve ata(/ =) ,çıkar ve ata (- =), çarp ve ata (* =), mod al ve ata( %=) operatörleri de atama operatörleridir. Çalışma şekli, ekl
e ve ata ile aynıdır. Denemesini yapınız.
355
356
357 1.4.3. Karşılaştırma Operatörleri
358 Değerleri karşılaştırıp sonuç olarak boolean bir değer üretir. Akış denetimi yaparken sıklıkla kullanılır.
359 < (küçük), > (büyük), <= (küçük eşit) , >= (büyük eşit) Karşılaştırma operatörleri
360 iki ifadenin karşılaştırmasını yapar, sonuç olarak boolean ifade elde edilir.
361 <script>
362 var sayi1=10;
363 var sayi2=20;
364 [Link](sayi1<sayi2); //ekran cıktısına bakınız.
365 [Link](sayi1>sayi2);
366 [Link](sayi1<=sayi2);
367 [Link](sayi1>=sayi2);
368 </script>
369
370 Eşittir operatörü = =
371 Atama operatörü ile çok karıştırılır. Matematikteki eşitlik, programlamada = = ifadesi ile gösterilir. = = karşılaştırma operatörüdür.
372 <script>
373 var sayi1=10;
374 var sayi2=20;
375 [Link](sayi1==sayi2); //cıktısı ne olur?
376 </script>
377
378
379 1.4.4. Mantıksal Operatörler
380 Mantıksal VE operatörü (&&)
381 Koşullardan hepsinin gerçekleşmesi durumunu sınar yani şartlardan birisi gerçekleşmezse yanlış (false) değerini döndürecektir.
Aşağıdaki örnekte sayi1değişkeninin değerinin 10’dan küçük ve sayi2 değişkenin değerinin 3’ten büyük olması durumunda, ekra
na şartlar doğru ifadesi yazdırılacaktır.
382 <script>
383 var sayi1=9;
384 var sayi2=8;
385 if (sayi1<10 && sayi2>3)
386 {
387 [Link]("şartlar doğru");
388 }
389 else
390 {
391 [Link]("şartlar yanlış");
392 }
393 </script>
394 Mantıksal VEYA operatörü ( ||)
395 Koşullardan herhangi birisinin gerçekleşmesi durumunu sınar. şartlardan birisinin gerçekleşmesi doğru (true) değerini döndürece
ktir.
396 <script>
397 var sayi1=3;
398 var sayi2=8;
399 if (sayi1>10 || sayi2>3) // altgr + -
400 {
401 [Link]("şartlar doğru");

D:\casmin\javascript\9 Betik Dili [Link]: 6/20


402 }
403 else
404 {
405 [Link]("şartlar yanlış");
406 }
407 </script>
408
409 Değil operatörü (!)
410 ifadenin boolean karşılığını tersine çevirir.
411
412 <script>
413 var sayi1=3;
414 var sayi2=8;
415 [Link](!(sayi1<sayi2)); // değil işaretini koymasadık true değerini alırdık
416 </script>
417
418 1.4.5. işlem Önceliği
419 JavaScript kodları çalıştırılırken size verilen Operatör Öncelikleri tablosuna göre operatör öncelikleri belirlenir. Parantez ile bu ön
celiklerin sırasını değiştirebilirsiniz. Tablonun üstten aşağıya doğru en düşük öncelikten en yüksek önceliğe doğru sıralanmıştır.
420 -->
421
422
423
424
425 <!--
426 2. KODLAMA YAPISI
427 2.1. Akış Denetimi Programın akışını karar ifadeleri ile denetleriz. Karar ifadeleri-belli bir şart sonucu- yazılan script kodlarının ist
ediğimiz şekilde çalışmasını sağlar.
428 2.1.1. “if –else” Koşul Deyimi şartın doğru olup olmadığını denetler, şart doğruysa parantezler arasındaki kodları çalıştırır.
429
430 <script>
431 if(şart)
432 {
433 Şart doğruysa çalıştırılacak kodlar
434 }
435 else
436 {
437 Şart yanlışsa çalıştırılacak kodlar
438 }
439 </script>
440
441 Normal parantezler arasındaki ifade true değerini döndürüyorsa yani koşul ifadesi doğru ise küme parantezleri arasındaki kodlar
çalışacaktır.
442
443 <script>
444 if(2==2)
445 {
446 [Link]("2 == 2");
447 }
448 else
449 {
450 [Link]("2 != 2");
451 }
452 </script>
453
454 Birden fazla şartın olduğu durumlarda şart sayısı kadar if yazılabilir.
455 Web sayfamızın ziyaretcilerine, saate göre günaydın, iyi öğlenler, iyi akşamlar, iyi geceler, iyi uykular uyarılarını veren script yazm
ak için;
456 Zaman isminde bir date nesnesi oluşturunuz. Saat isminde bir değişken oluşturup bilgisayarın sistem saatinden gelen saat bilgisi
ni saat isimli değişkene aktarınız.
457
458 <script>
459 var zaman = new Date();
460 var saat = [Link]();
461 </script>
462
463 Saat değişkeninin değeri artık bilgisayarın sistem saatine göre belirlenmektedir. şf kontrol deyimleri ile sayfanın açılışında kullanı
cılara iyi dileklerinizi iletebiliriz. şart tablosunu oluşturup script kodlarını yazmaya başlayabilirsiniz.
464
465 06-11 Günaydın
466 11-19 İyi Öğlenler
467 19-23 İyi Akşamlar

D:\casmin\javascript\9 Betik Dili [Link]: 7/20


468 23-06 İyi Geceler
469
470 Birinci şartım saat değişkeninin 6 değerinden büyük ve 11’den küçük olması. iartların birden fazla olduğu durumlarda ve-veya op
eratörleri ile istediğiniz kontrolleri yaptırabilirsiniz.
471 <script>
472 var zaman = new Date();
473 var saat = [Link]();
474 if (saat>=6 && saat<11)
475 {
476 alert("Günaydın");
477 }
478 //Diğer şartlar da tabloya uygun şekilde yazarak kodların yazımını tamamlıyoruz.
479 if (saat>=11 && saat<19)
480 {
481 alert("İyi Öğlenler");
482 }
483 if (saat>=19 && saat<23)
484 {
485 alert("İyi Akşamlar");
486 }
487 //23’ten sonra bilgisayar saati 0 değerini aldığı için son şartım olan 23-06 arasını 6 değerinden küçük şeklinde değiştiriyor ve tek
şart olarak kontrol deyimi içerisine yazıyoruz.
488 if (saat<6)
489 {
490 alert("İyi Geceler");
491 }
492 </script>
493
494
495 iki sayıdan büyük olanını bulan uygulamayı hazırlamak için;
496 Kullanıcıdan iki sayıyı sayfa üzerinden girmesini sağlamak için promt komutunu kullanacağız. Sayfa üzerinden gireceğimiz sayıla
rı sayi1 ve sayi2 değişkenlerine atayacağız.
497
498 <script>
499 var sayi1=prompt("Birinci sayıyı giriniz: ");
500 var sayi2=prompt("İkinci sayıyı giriniz: ");
501 //Girdiğimiz sayıları artık kontrol deyimleri ile kontrol edebiliriz.
502 if (sayi1>sayi2)
503 {
504 alert("Birinci girdiğin sayi büyük");
505 }
506 if (sayi1<sayi2)
507 {
508 alert("İkinci girdiğin sayi büyük");
509 }
510 else
511 {
512 alert("İki sayı birbirine eşit");
513 }
514 //Alert komutu ile uyarı ekranında hangi sayının büyük olduğunu yazdırıyoruz.
515 </script>
516
517
518 2.1.2. Ternary Operatörü
519 if kontrol deyiminin yaptığı işlemi tek satırda yapmamızı sağlar. Genellikle kıyaslama işlemlerinde hızlıca ve yerden tasarruf etme
k için kullanılır fakat kodlarda karmaşa yarattığı düşünülerek çok tercih edilmez. Kullanımı çok kolaydır.
520
521 (şart)? şart doğruysa çalışacak kodlar : şart yanlışsa çalışacak kodlar;
522
523 Sayfadan girdiğimiz sayının tek mi çift mi olduğunu tespit eden script kodlarını yazmak için;
524 Sayıyı kendimiz gireceğimiz için promt komutunu kullanmalıyız. Prompt komutu ile girilen sayıyı, sayi isminde bir değişkene aktar
alım.
525
526 <script>
527 var sayi=prompt("Birinci sayiyi giriniz: ");
528 //Ternary operatörünü kullanarak kodlarımızı yazalım.
529 (sayi%2==0)? alert("sayi çift"):alert("sayı tek")
530 //Bir sayının çift olma şartı, sayının 2 ile tam bölünmesidir. Bu yüzden sayıya mod2 işlemi yaptık, sayının mod2 ile sonucu 0 ise s
ayı tam bölünüyor yani çift demektir.
531 </script>
532
533

D:\casmin\javascript\9 Betik Dili [Link]: 8/20


534 2.1.3. "switch" Koşul Deyimi
535 Birden fazla koşul için gerekli kontrolü yapar fakat şartın boolean bir ifade döndürmesine bakmaz. Değer kısmına yazılan ile kont
rol ifadesinin aynı olup olmamasını kontrol eder. Switch kullanımında dikkat etmemiz gereken en önemli husus, case ifadesi içeri
sinde kodlarımızı yazdıktan sonra bir diğer case ifadesine geçiş yaparken break komutu kullanmamız gerekir.
536
537
538 <script>
539 switch (değer)
540 {
541 case "1. kontol ifadesi";
542 değer ifadeye eşitse çalışacak komutlar
543 break;
544 case "2. kontol ifadesi";
545 değer ifadeye eşitse çalışacak komutlar
546 break;
547 case "3. kontol ifadesi";
548 değer ifadeye eşitse çalışacak komutlar
549 break;
550 .
551 .
552 .
553 default:
554 değer iafedelerin hiç birine eşit değilse çalışacak kodlar.
555 break;
556 }
557 </script>
558
559 Yazdığımız yazıyı istediğimiz renkle ekrana yazdıran uygulama hazırlamak için ;
560
561 <script>
562 var renk=prompt("Kırımızı için :1 Yeşil için :2 Mavi için :3");
563 var yazi=prompt("Yazıyı giriniz.");
564
565 switch(renk)
566 {
567 case "1":
568 [Link]("<font color='red'>"+yazi+"</font>");
569 break;
570 case "2":
571 [Link]("<font color='green'>"+yazi+"</font>");
572 break;
573 case "3":
574 [Link]("<font color='blue'>"+yazi+"</font>");
575 break;
576 }
577 </script>
578
579
580
581 2.2. Döngü Deyimleri
582 istediğimiz sayıda tekrar eden işlemleri bilgisayara yaptırmak için kullandığımız kodlara döngü denir. Örneğin 1000 satırlık bir tabl
oyu oluşturmak için defalarca satır komutu yazmak yerine döngü kurmak çok mantıklı olacaktır.
583
584 2.2.1. "for" Döngü Deyimi
585 Koşul sağlandığı sürece komutların tekrar tekrar çalıştırılmasını sağlar. For döngüsü için bir döngü değişken tanımlamalıyız. Dön
gü değişkeninin başlangıç değerinden itibaren değişken artış miktarı kadar değerini değiştirir. Koşul doğru olduğu sürece döngü
çalışır.
586
587
588 <script>
589 for (başlangıç değeri; koşul; artış)
590 {
591 çalıştıralacak kodlar;
592 }
593 </script>
594
595
596 Ekrana 1’den 10’a kadar olan sayıları alt alta yazdıran script kodlarını yazmak için;
597
598 <script>
599 for (var dongudegiskeni=1;dongudegiskeni<11;dongudegiskeni++)
600 {

D:\casmin\javascript\9 Betik Dili [Link]: 9/20


601 [Link](dongudegiskeni+"<br>");
602 }
603 </script>
604
605
606
607 Prompt komutu ile kullanıcı tarafından girilen sayı kadar kullanıcıdan aldığımız string ifadeyi yazdıran script kodlarını yazmak için
;
608
609
610 <script>
611 var sayi=prompt("döngü sayısını giriniz :");
612 var txt=prompt("döngü ifadesini giriniz :");
613
614 for (var dd=1;dd<sayi;dd++)
615 {
616 [Link](txt+"<br>");
617 } //ekran çıktısındaki yanlışın sebebi ne?
618 </script>
619
620
621
622 2.2.2. "While" Döngü Deyimi
623 şartı sağladığı sürece while döngüsü çalışacaktır. Genellikle çalışma sayısının bilinmediği durumlarda while kullanılır.
624
625 <script>
626 while (şart)
627 {
628 çalışacak kodlar;
629 }
630 </script>
631
632
633 Klavyeden 0 sayısı girilene kadar girilen sayıları toplayan script kodlarını yazmak için;
634
635 <script>
636 var toplam=0;
637 var say=1;
638 var sayi;
639
640 while (sayi!=0)
641 {
642 sayi=prompt(say+". sayiyi giriniz. :");
643 toplam=toplam+Number(sayi);
644 say++;
645 }
646 [Link](say+" sayının toplamı :"+toplam);
647 //son çıktıda yanlışlık var sabebi ne?
648 //sayi değişkenin başına neden Number ifadesini koyduk
649 </script>
650
651
652 2.2.3. “do-while” Döngü Deyimi
653 While döngüsünden tek farkı, şartın kontrolünün çalıştırılacak komutların en sonunda yapılmasıdır. Önce çalıştırılacak komutlar
çalıştırılır, sonrada döngü şartı kontrol edilecektir. Her şartta döngü en az bir kere çalışacaktır.
654
655 <script>
656 do
657 {
658 çalıştırılacak kodlar
659 }while(şart)
660 </script>
661
662
663 Sayfaya i değişkeninin 20’den küçük olduğu sürece ekrana merhaba yazdıracağı script kodlarını yazmak için;4
664
665 <script>
666 var i=0;
667 do
668 {
669 [Link]("Merhaba <br>");
670 i++;

D:\casmin\javascript\9 Betik Dili [Link]: 10/20


671 }while(i<20);
672 </script>
673
674
675 2.3. Diziler
676 Aynı türdeki verileri tek yerde saklamamızı sağlayan değişkenlerdir. içlerinde birden fazla değeri tutabilir.
677
678
679 2.3.1. Dizi Tanımlama Dizi tanımlanın birden fazla yolu bulunmaktadır.
680 Boş bir dizi oluşturup içeriğini sonradan ekleyebilirsiniz.
681
682 var dizi_ismi= new Array();
683
684 Dizi tanımlamak için var kelimesini daha sonra dizinin ismini yazmamız gereklidir. Yukarıdaki tanımlamada dizimizi oluşturduk fa
kat içerisine herhangi bir dizi elemanı atamadık.
685
686
687 Gunler isminde bir dizi oluşturup diziye değer girmek için;
688
689 <script>
690 var gunler=new Array();
691 gunler[0]="pazartesi";
692 gunler[0]="salı";
693 gunler[0]="çarşamba";
694 </script>
695
696 Komutları gunler dizisini oluşturdu, dizi elemanlarını tek tek 0.1.2. index numaralı yerlere yerleştirdik. Diziler 0. değerden başlar.
697
698 Dizilere değer vermenin ikinci yolu, diziyi oluştururken değeri aynı satırda vermektir.
699
700 <script>
701 var gunler=new Array("pazartesi", "salı", "çarşamba");
702 </script>
703
704 Değerler virgül ile birbirinden ayrılır. isimler string değer olduğu için tırnak içerisine alınarak yazılır. Diziye string,number,boolean
veri türlerini karışık olarak değer verilebilirsiniz.
705 Dizi tanımlarken ve değer verirken tür sınırlaması yoktur. Dizi tanımladıktan sonra alert ya da document sınıfının write metodu ile
diziyi kontrol edebilirsiniz.
706
707 <script>
708 var gunler=new Array("pazartesi", "salı", "çarşamba");
709 alert(gunler); //dizi elemanlarının hepsini çağırır
710 [Link](gunler[1]); //belirttiğimiz dizi elemanını çağırır
711 </script>
712
713
714 Dizilerin eleman sayısını bulmak için length komutunu kullanabiliriz. Length komutu string ifadelerinde karakter sayısını bulmak iç
in kullanılabilir.
715
716 <script>
717 var gunler=new Array("pazartesi", "salı", "çarşamba");
718 alert([Link]);
719 </script>
720
721
722 2.3.2. Çok Boyutlu Diziler
723 Dizilere eleman olarak değişik türde değerler atayabiliyorduk. Bir dizinin herhangi bir elemanına bir dizi değişkeni atarsak çok boy
utlu bir dizi elde etmiş oluruz.
724
725 Örneğin ogrenci isimli bir diziye iki dizi elemanı ekleyelim:
726
727 <script>
728 var ogrenci = new Array();
729 ogrenci[0] = new Array("Mert", "Görkem");
730 ogrenci[1] = new Array("Web Tasarım", "Grafik ve Animasyon");
731
732 //Dizi elemanına ulaşmak istersek alert komutunu kullanabiliriz. Örneğin öğrenci dizisinin 1. kaydının 0. elemanına ulaşmak ist
ersek
733
734 alert(ogrenci[0][0]); //Mert
735 alert(ogrenci[0][1]); //Görkem
736 alert(ogrenci[1][0]); //Web Tasarım

D:\casmin\javascript\9 Betik Dili [Link]: 11/20


737 alert(ogrenci[1][1]); //Grafik ve Animasyon
738 </script>
739
740
741 2.3.3. Diziler Üzerinde işlemler
742
743 Push()
744 Dizinin sonuna yeni bir dizi elemanı eklemek için kullanılır.
745
746 <script>
747 var sayilar = new Array("1","2","3","4");
748 [Link]("5");
749 [Link]("6");
750 alert(sayilar);
751 </script>
752
753
754 Pop()
755 Dizinin sonundaki elemanı kaldırmak için kullanılır.
756
757 <script>
758 var sayilar = new Array("1","2","3","4");
759 [Link]();
760 alert(sayilar);
761 </script>
762
763
764 Unshift()
765 Dizinin başına eleman ekler. Birden fazla eleman bir kerede eklenebilir.
766
767 <script>
768 var sayilar = new Array("1","2","3","4");
769 [Link]("0");
770 alert(sayilar);
771 </script>
772
773
774 Shift()
775 Dizinin başındaki elemanı kaldırır.
776
777 <script>
778 var sayilar = new Array("1","2","3","4");
779 [Link]();
780 alert(sayilar);
781 </script>
782
783
784 Delete
785 Dizide istediğimiz elemanı silmek için kullanılır. Delete komutu ile dizi elemanı silinir fakat yeri dizi içerisinde kalır.
786
787 <script>
788 var sayilar = new Array("1","2","3","4");
789 delete sayilar[1];
790 alert(sayilar);
791 alert([Link]);
792 </script>
793 Dizinin 1 index numaralı elemanını için silme komutu verdik. Dizinin 1 index numaralı bölümünün içini boşaltmış olduk. Dizi elem
anı kontrol edildiğinde dizinin yine 4 elemanlı olduğunu görürüz.
794
795
796 Splice()
797 Dizide istenilen bölüme eleman eklememizi ya da eleman silmemizi sağlar.
798
799 <script>
800 var sayilar = new Array("1","2","3","4");
801 [Link](0,2);
802 alert(sayilar);
803 </script>
804
805 komutları kullanılır. Splice komutunda parantez içerisinde yazılan ilk parametre hangi dizi elemanından sonra silineceği, ikinci par
ametre ise kaç eleman silineceğini belirtir. Yukarıdaki kullanımda ad dizisinde 0. elemanından sonra 2 eleman siler. ikinci rakam
kullanılmasaydı birinci rakamın gösterdiği dizi elemanından sonraki tüm elemanlar silinecekti.

D:\casmin\javascript\9 Betik Dili [Link]: 12/20


806
807 Dizi içerisine eleman eklemek için;
808 <script>
809 var sayilar = new Array("1","2","3","4");
810 [Link](2,0,"bir", "iki");
811 alert(sayilar);
812 </script>
813 Yukarıdaki kullanımda splice komutu ikinci elemandan sonra bir ve iki kelimelerini eklemek üzere çalışacaktır. Eklemek ve silme
k arasındaki fark ikinci rakamın 0 olarak belirlenmesidir. ikinci rakam, silinecek eleman sayısını belirlediği için slice, kelimeleri ekl
emek için çalışır.
814
815
816 indexOf()
817 Dizi içerinde geçen kelimeyi aramamızı sağlar. Uzun dizilerde kelimenin, dizinin kaçıncı elemanı olduğunu gösterir.
818
819 <script>
820 var harfler = new Array("a","b","c","d","e","f","g","h");
821 alert([Link]("e"));
822 </script>
823 Alert komut 4 çıktısını verecektir. Diziler 0 index numarasından başlar e’nin bulunduğu yer 4 index numaralı yerdir.
824 Aranılan kelime dizi içerisinde yok ise -1 değerini döndürecektir.
825
826
827 Reverse()
828 Dizi elemanlarını ters çevirmemizi sağlar.
829
830 <script>
831 var harfler = new Array("a","b","c","d","e","f","g","h");
832 alert(harfler);
833 [Link]();
834 alert(harfler);
835 </script>
836
837
838 Sort()
839 Dizi elemanlarını sıralamak için kullanılır. Komut kullanıldığında a-z, 0-9 aralıklarında sıralama işlemini yerine getirir.
840
841 <script>
842 var harfler = new Array("a","h","g","b","d","c","f","e");
843 var sayilar = new Array("3","5","2","1","7","6","8","9");
844 [Link]();
845 [Link]();
846 alert(harfler);
847 alert(sayilar);
848 </script>
849
850
851
852 2.4. Fonksiyonlar
853 Tekrarlanan işin yapılması için gerekli işlem ve komut gruplarına ―fonksiyon adı verilir. Uygulama içerisinde bir komut ya da ko
mut grubunu tekrar tekrar kullanmak isteyebiliriz. Bu gibi durumlarda aynı satırları defalarca yazmak zorunda kalabiliriz. Tekrar
854 ettiğimiz kodlarda belli bir değeri değiştirmek istediğimizde tüm tekrar eden satırları yeniden düzenlemek gerekecektir.
855
856 Kısaca fonksiyonlar tekrar eden kod bloklarını alıp paketlememize yarar. Uygulama içerisinde artık bu paketin ismini kullanarak i
stediğimiz yerde bu kodları çalıştırabiliriz. Bu sayede daha sonra üstüne yapılacak değişiklikleri ve hata kontrolünü hızlı bir biçimd
e yapmamıza imkân sağlar.
857
858
859 2.4.1. Fonksiyon Tanımlamak Fonksiyon tanımlamak için aşağıdaki kalıp uygulanır. Fonksiyon tanımlandığında editör penceresi
nin istenilen yerinde fonksiyon çalıştırılabilir.
860 Fonksiyonu tanımlamak için;
861
862 <script>
863 function fonksiyon_ismi()
864 {
865 fonksiyon içerisinde çalıştılacak kodlar
866 };
867 </script>
868
869 Fonksiyonu çalıştırmak için;
870
871 fonksiyon_ismi();

D:\casmin\javascript\9 Betik Dili [Link]: 13/20


872 şeklinde yazarak istenilen yerde fonksiyon çalıştırılır.
873
874 Sayfadan girilen ismi 20 defa alt alta yazdıran fonksiyon hazırlamak için;
875
876 <script>
877 function yazdir()
878 {
879 var isim=prompt("isminizi yazınız: ");
880 for(var i=1;i<=20;i++)
881 {
882 [Link](isim+"<br>");
883 }
884 };
885 yazdir();
886 </script>
887
888
889 2.4.2. Fonksiyonlara Veri Gönderme-Alma Yazdığımız fonksiyonlara isteğimize göre değer verip işlenmiş verinin sonucunu geri a
labiliriz.
890 Böylelikle fonksiyonlarımız anlık olarak verileri işleyip sonucu programa dâhil edebilir. Fonksiyona parametre göndermek için yap
mamız gereken fonksiyon isminden sonra parantez içerisine gelecek veri için değişken ismi yazmak olacaktır.
891
892
893 Kullanıcının girdiği yaş bilgisine göre kaç gün yaşadığını hesaplayan script kodlarını yazmak için;
894
895 <!doctype HTML>
896 <html lang="tr-TR">
897 <head>
898 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
899 <meta http-equiv="Content-Language" content="tr">
900 <meta charset="utf-8">
901 <title>yaş hesaplama programı</title>
902 <script type="text/javascript">
903 var x=prompt("Lütfen isminizi giriniz: ");
904 var y=prompt("Lütfen yaşınızı giriniz: ");
905 function gunBul(ad,yas)
906 {
907 var gun=yas*12*30;
908 [Link]("Merhaba "+ad+", toplamda "+ gun+" gün yaşadınız");
909 }
910 </script>
911 </head>
912 <body>
913 <script>
914 gunBul(x,y);
915 </script>
916 </body>
917 </html>
918
919
920 Yukarıdaki örnekte fonksiyon, kullanıcıdan aldığı bilgileri işleyip ekrana çıktı olarak vermektedir. Fonksiyonun çalışması sonucu b
ir veri almak istiyorsak return kelimesini fonksiyon içerisinde kullanmak zorundayız.
921
922
923 <!doctype HTML>
924 <html lang="tr-TR">
925 <head>
926 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
927 <meta http-equiv="Content-Language" content="tr">
928 <meta charset="utf-8">
929 <title>kare bulma</title>
930 <script type="text/javascript">
931 function karesi(x)
932 {
933 var kare=x*x;
934 return kare;
935 }
936 </script>
937 </head>
938 <body>
939 <script>
940 alert(karesi(2));

D:\casmin\javascript\9 Betik Dili [Link]: 14/20


941 alert(karesi(4));
942 alert(karesi(5));
943 </script>
944 </body>
945 </html>
946
947
948 2.4.3. Hazır Fonksiyonlar
949
950 parseInt( )
951 String ifadenin sayısal kısmını alarak tam sayıya çevirir.
952
953 <script>
954 [Link](parseInt("1990Gorkem"));
955
956 ifade ondalıklı ise parseInt fonksiyonu sadece tam olan kısmını alır.
957 [Link](parseInt("212.45"));
958
959 String ifade sayısal bir değer ile başlamıyorsa parseInt fonksiyonunun döndüreceği değer NaN olacaktır.
960 [Link](parseInt("Gorkem1990"));
961 </script>
962
963
964 parseFloat( )
965 parseInt fonksiyonundan farkı sayısal ifadeleri ondalıklı olarak da alabilir.
966
967 [Link](parseInt("212.45"));
968
969
970 String( )
971 ifadeyi string ifade yapar.
972
973 <script>
974 var sayi1=10;
975 var sayi2=15;
976
977 var toplam1=sayi1+sayi2;
978 alert(toplam1);
979
980 var toplam2=String(sayi1)+sayi2;
981 alert(toplam2);
982 </script>
983
984
985 Number( )
986 String ifadeyi sayısal değer yapar
987
988 <script>
989 var sayi1="10";
990 var sayi2=15;
991
992 var toplam1=sayi1+sayi2;
993 alert(toplam1);
994
995 var toplam2=Number(sayi1)+sayi2;
996 alert(toplam2);
997 </script>
998
999
1000
1001
1002 3. OLAYLAR (EVENTS)
1003 internet sayfamızdaki her şey olaylarla gözlenebilir. Farenin herhangi bir yere tıklaması, klavyeden bir şeyler yazılması, sayfanın
yüklenmesi vb. eylemler olaylarla kontrol edilebilir. Olayların gerçekleşmesi ile yazılmış fonksiyonların tetiklenmesi sağlanır. Olay
yöneticileri, olay gerçekleştiğinde hazırladığımız fonksiyonları tetiklememizi sağlar.
1004 Kullanımı basittir. Html etiketlerine olay yöneticisi eklerken etiketi kapatmadan
1005
1006 <script>
1007 eventhandler="script kodları"
1008 </script>
1009 komut satırı eklenir. Html etiketlerinin neredeyse tamamına uygulanabilir.
1010 Örneğin <a> etiketine olay yöneticisi eklersek yazım şu şekilde olacaktır:

D:\casmin\javascript\9 Betik Dili [Link]: 15/20


1011
1012 <script>
1013 <a eventhandler="script kodları">
1014 </script>
1015
1016
1017 3.1. onClick Olayı
1018 Html etiketlerinin üstüne tek tıklandığında gerçekleşen olaylara onClick olayları denir.
1019 Sahneye eklediğimiz düğmeye tıklama sonucu uyarı veren script kodlarını yazmak için;
1020
1021 <!doctype HTML>
1022 <html lang="tr-TR">
1023 <head>
1024 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1025 <meta http-equiv="Content-Language" content="tr">
1026 <meta charset="utf-8">
1027 <title>olay örnek sayfası</title>
1028 <script type="text/javascript">
1029 function uyari()
1030 {
1031 alert("Düğme tıklandı");
1032 }
1033 </script>
1034 </head>
1035 <body>
1036 <input type="button" name="dugme" value="Düğme" onClick="uyari()">
1037 </body>
1038 </html>
1039
1040
1041 Aynı işlemi link etiketi ile yapalım.
1042 <!doctype HTML>
1043 <html lang="tr-TR">
1044 <head>
1045 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1046 <meta http-equiv="Content-Language" content="tr">
1047 <meta charset="utf-8">
1048 <title>olay örnek sayfası</title>
1049 <script type="text/javascript">
1050 function uyari()
1051 {
1052 alert("Düğme tıklandı");
1053 }
1054 </script>
1055 </head>
1056 <body>
1057 <a href="[Link] onClick="uyari()">MEB</a>
1058 //Olaydan sonra fonksiyon yerine direk olarak script kodlarını yazabiliriz.
1059 <a href="[Link] onClick="alert('[Link] açılıyor')">MEB</a>
1060 </body>
1061 </html>
1062
1063 3.2. onDblClick Olayı
1064 Html etiketlerinin üstüne çift tıklandığında gerçekleşen olaylara onClick olayları denir.
1065
1066 <!doctype HTML>
1067 <html lang="tr-TR">
1068 <head>
1069 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1070 <meta http-equiv="Content-Language" content="tr">
1071 <meta charset="utf-8">
1072 <title>olay örnek sayfası</title>
1073 </head>
1074 <body>
1075 <input type="button" name="dugme" value="Düğme" onDblClick="alert('düğme çift tıklandı')">
1076 </body>
1077 </html>
1078
1079
1080 3.3. onLoad Olayı
1081 Sayfamızdaki herhangi bir nesnenin tamamıyla yüklenme olayını temsil eder. Body, img, frame ve frameset etiketlerinde kullanıla
bilir.

D:\casmin\javascript\9 Betik Dili [Link]: 16/20


1082
1083 <!doctype HTML>
1084 <html lang="tr-TR">
1085 <head>
1086 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1087 <meta http-equiv="Content-Language" content="tr">
1088 <meta charset="utf-8">
1089 <title></title>
1090 </head>
1091 <body onLoad="alert('sayfanın tamamı yüklendi')">
1092 </body>
1093 </html>
1094
1095
1096 3.4. onUnLoad Olayı Nesnenin kaldırılması olayını gözler. Body etiketi içerisine parametre olarak yazılırsa sayfanın kapatılma ola
yını gözlemiş oluruz. daha sonra gösterilecek
1097
1098 <!doctype HTML>
1099 <html lang="tr-TR">
1100 <head>
1101 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1102 <meta http-equiv="Content-Language" content="tr">
1103 <meta charset="utf-8">
1104 <title></title>
1105 </head>
1106 <body onUnload="alert('bir daha bekleriz')">
1107 etkisi daha sonra gösterilecek
1108 </body>
1109 </html>
1110
1111
1112
1113 3.5. onFocus Olayı
1114 Sayfa üzerinde html elemanı işlem yapılmak üzere seçildiğinde yani o nesneye odaklanıldığında çalışan olay tipidir. Örneğin bir
metin kutusu içerisine yazı yazılmak üzere seçildiğinde uyarı vermesini sağlayabiliriz.
1115
1116 <!doctype HTML>
1117 <html lang="tr-TR">
1118 <head>
1119 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1120 <meta http-equiv="Content-Language" content="tr">
1121 <meta charset="utf-8">
1122 <title>olay örnek sayfası</title>
1123 <script>
1124 function uyari()
1125 {
1126 alert("kullanıcı adını giriniz. ");
1127 }
1128 </script>
1129 </head>
1130 <body>
1131 <input type="text" name="kullaniciAdi" onFocus="uyari()"/>
1132 //sürekli dögüye girecek
1133 </body>
1134 </html>
1135
1136
1137 3.6. onBlur Olayı
1138 Seçilen html nesnesinin seçilme özelliğini kaybettiğinde çalışan olaydır. Seçilmiş eleman seçimden çıkartılmışsa tetiklenir.
1139
1140 3.7. onMouseOver Olayı
1141 Html nesnesinin üstüne gelme olayını gözleyen olaydır. Sayfada bulunan [Link] isimli resmin üzerine fare ile gelindiğinde uyarı
veren script kodları aşağıdadır:
1142 <!doctype HTML>
1143 <html lang="tr-TR">
1144 <head>
1145 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1146 <meta http-equiv="Content-Language" content="tr">
1147 <meta charset="utf-8">
1148 <title>olay örnek sayfası</title>
1149 </head>
1150 <body>

D:\casmin\javascript\9 Betik Dili [Link]: 17/20


1151 <img src="[Link]" height="50px" width="50px" onMouseOver="alert('Üstünde')">
1152 </body>
1153 </html>
1154
1155 3.8. onMouseOut Olayı
1156 Farenin nesne üzerinden ayrılması olayıdır.
1157
1158 3.9. onMouseMove Olayı
1159 Fare nesne üzerinde gezdirildiğinde meydana gelen olaydır.
1160
1161 3.10. onMouseDown Olayı
1162 Fare nesne üzerinde basıldığı anda gerçekleşen olaydır. Click ile farkı click olayının bırakılma eylemidir.
1163
1164 3.11. onMouseUp Olayı
1165 Farenin basılı olan tuşu bırakması olayıdır.
1166
1167 3.12. onKeyDown Olayı Klavyeden tuşa basma olayıdır. Metin kutusu nesnesinde klavyeden tuşa basıldığında olay dinleyicisi çalı
şır. Klavyeden basılan tuşu ekranda göstermek için;
1168
1169 <!doctype HTML>
1170 <html lang="tr-TR">
1171 <head>
1172 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1173 <meta http-equiv="Content-Language" content="tr">
1174 <meta charset="utf-8">
1175 <title>olay örnek sayfası</title>
1176 </head>
1177 <body>
1178 <input onKeyDown="alert([[Link]([Link])])">
1179 </body>
1180 </html>
1181
1182 [Link] basılan tuşun ASCII kodunu okuyacaktır. Örneğin boşluk(Spacebar) tuşuna bastığımızda keyCode bize 32 değer
ini verecektir.
1183 [Link] ile okunan ASCII değeri tuşun ismine çevirecektir.
1184
1185 3.13. onSelect Olayı
1186 Metin kutuları içerisindeki yazı seçildiğinde meydana gelen olaydır.
1187
1188 <!doctype HTML>
1189 <html lang="tr-TR">
1190 <head>
1191 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1192 <meta http-equiv="Content-Language" content="tr">
1193 <meta charset="utf-8">
1194 <title>olay örnek sayfası</title>
1195 </head>
1196 <body>
1197 <input type="text" value="Merhaba" onSelect="alert('Yazıyı seçtiniz')">
1198 </body>
1199 </html>
1200
1201 3.14. onResize Olayı
1202 Tarayıcı penceresinin boyutunu değiştirdiğinde gerçekleşen olaydır. Body etiketine yazılır.
1203
1204 <!doctype HTML>
1205 <html lang="tr-TR">
1206 <head>
1207 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1208 <meta http-equiv="Content-Language" content="tr">
1209 <meta charset="utf-8">
1210 <title>olay örnek sayfası</title>
1211 </head>
1212 <body onResize="alert('tarayıcı boyutu değişti')">
1213 </body>
1214 </html>
1215
1216
1217
1218
1219 4. NESNELER
1220

D:\casmin\javascript\9 Betik Dili [Link]: 18/20


1221 JavaScript tüm web sayfalarını ve tarayıcılarını nesne olarak görür. Kendimiz nesne oluşturabileceğimiz gibi birçok işi kolayca ya
pabilmemiz için bünyesinde hazır nesneler de bulundurmaktadır.
1222 Dizi işlemleri için array, tarih saat için date, aritmetiksel işlemler için math nesnesi vb. içlerinde birçok özelliği ve metodu barındır
maktadır. Bu sayede kolay ve hızlıca işlemlerimizi yapabiliriz.
1223
1224 4.1. Window Nesnesi Tarayıcı ile ilgili özellik ve metodun bulunduğu tarayıcı nesnesidir.
1225
1226 4.1.1. DefaultStatus Özelliği Tarayıcının alt kısmındaki durum çubuğunda gösterilen mesajdır. Script komutları arasında herhangi
bir yere yazılabilir. Tarayıcıların bir kısmı bu özelliği desteklememektedir. YOK
1227
1228 <!doctype HTML>
1229 <html lang="tr-TR">
1230 <head>
1231 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1232 <meta http-equiv="Content-Language" content="tr">
1233 <meta charset="utf-8">
1234 <title>olay örnek sayfası</title>
1235 </head>
1236 <body>
1237 <script>
1238 [Link]="Merhaba";
1239 </script>
1240 </body>
1241 </html>
1242
1243 4.1.2. Alert Metodu
1244 Daha önceki örneklerde defalarca kullandığımız alert, kullanıcıyı bilgilendirmek için uyarı pencereleri oluşturur. Gereksiz yere kull
anmaktan kaçınmak gerekir. Ekranda 10 defa uyarı kutusu oluşturacak script kodları için;
1245 Editör penceresini açarak yeni bir html sayfası oluşturunuz.
1246 Ekranda 10 kez uyarı vereceği için for döngümüzü kurarak alert komutunu döngümüz içerisine yazıyoruz.
1247
1248 <!doctype HTML>
1249 <html lang="tr-TR">
1250 <head>
1251 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1252 <meta http-equiv="Content-Language" content="tr">
1253 <meta charset="utf-8">
1254 <title>olay örnek sayfası</title>
1255 </head>
1256 <body>
1257 <script>
1258 for(var i=1;i<=10;i++)
1259 {
1260 alert(i+" .uyarı kutusu")
1261 }
1262 </script>
1263 </body>
1264 </html>
1265
1266 Sayfamızı çalıştırdığımızda ekranda 10 adet uyarı penceresi oluşacak ve tek tek kapatmamız beklenecek.
1267
1268
1269 4.1.3. Confirm Metodu Yapılan işlem sonucu onay kutusu oluşturur. Onay kutusunun sonucu bir boolean olarak geri döner. True
ya da false şeklinde alınan cevap ile programın akışı belirlenir.
1270
1271 Sayfaya eklediğimiz kapat düğmesine basıldığında sayfayı kapatmak için onay isteyen script kodları için;
1272
1273 <!doctype HTML>
1274 <html lang="tr-TR">
1275 <head>
1276 <meta http-equiv="Content-type" content="text/CSS; charset=utf-8">
1277 <meta http-equiv="Content-Language" content="tr">
1278 <meta charset="utf-8">
1279 <title>olay örnek sayfası</title>
1280 <script type="text/javascript">
1281 function kapat()
1282 {
1283 var karar=confirm('sayfadan cıkmak istediğinize emin misiniz?');
1284 if(karar==true)
1285 {
1286 alert("Yine bekleriz.");
1287 [Link]();

D:\casmin\javascript\9 Betik Dili [Link]: 19/20


1288 }else
1289 {
1290 alert("bizimle kaldığınız için teşekkür ederiz.");
1291 }
1292 }
1293 </script>
1294 </head>
1295 <body>
1296 <input type="button" name="s_kapat" value="KAPAT" onClick="kapat()">
1297 </body>
1298 </html>
1299
1300
1301 4.1.5. Prompt Metodu
1302 Uygulamaya dışarıdan veri girmek için kullanılır. Promt ile alınan bilgi string türündedir. Herhangi bir değer girilmediği takdirde dö
necek değer null olacaktır.
1303
1304 -->
1305 </body>
1306 </html>

D:\casmin\javascript\9 Betik Dili [Link]: 20/20

You might also like