JavaScript ve CGI dillerinden öce web sayfaları sadece statik verileri bulundurabiliyordu. Sadece HTML etiketlerinden oluşan sitelere resim ve düz metinler yerleştirilerek, linklerle birbirine bağlanabiliyordu. JavaScrip HTML’i durgun halinden çıkararak dinamik bir yapıya kavuşturmuştur. Böylece dokümanlar kullanıcının bilgisayarına yüklendikten sonra bile düzenlenebilmektedir.
JavaScript’le yapılabilecekleri iki temel gruba ayırabiliriz.
1. Dinamik olarak HTML etiketi üreterek doküman oluşturmak,
2. Tarayıcıya yüklenmiş dokümandaki HTML nesnelerini ve kullanıcının tarayıcısına ait pencereleri düzenlemek.
Birinci maddede söz edilen dinamik HTML kodu üretimi daha çok CGI dillerinin görevidir. PHP,ASP,Perl gibi CGI dilleri sunucu tarafında çalışır ve dinamik kod üretir. Java Script ise istemci tabanlı çalışan bir dildir.
JavaScriptin komut dizili yapısı hemen hemen C/C++ diliyle aynıdır. Bu nedenle daha önce C/C++, Java veya PHP gibi dillerle uğraşanlar JavaScript dilinin komut yapısını biliyor sayılır.
JavaScript’e Giriş:
Bir mesaj kutusu açıldı
Yukarıdaki ilk JavaScript örneğinde dikkat edilmesi gerek üç önemli nokta vardır.
1. JavaScript komutları etiketleri arasına yazılır. ile biter.Language özelliğinin yazılması zorunlu değildir.
2.
3. Açıklama satırları // ile oluşturulur. // ile başlayan satır yorumlanmayacaktır. Eğer açıklama satırı birden fazla satıra yazılacaksa “/*”-“*/” sembolleri arasına yazılır.
HTML İçinde JavaScript
JavaScript komutlarının her zaman
Burada dikkat edilmesi gereken önemli birkaç nokta var .
• Kaynak dosya “.js” uzantılı olmalıdır.
• SRC özelliği belirtilen
Değişkenlere karakter atamak için tırnak içerisine alınmalıdır. Aksi halde JavaScript hata mesajı verecektir.
Veri Tipleri
JavaScript’te değişkenleri tanımlarken herhangi bir veri tipi belirtilmez. Ancak buradan JavaScript’te veri tipi yoktur gibi bir sonuç çıkarılamaz. Sadece değişkenler tanımlanırken veri tipi belirtilmez. Değişkene bir değer atandığında değişken tipi, değişkenin aldığı değere göre JavaScript tarafından otomatik olarak belirlenir.
JavaScript’te değişkeler üç ana grupta toplanır.
• Basit değişkenler
• Bileşik değişkenler
• Özel değişkenler.
Basit Değişkenler:
Üç tür basit değişken vardır. Sayısal değerler için Number, mantıksal değerler için Boolean, ve karakter katarları için String veri türleri kullanılır.
• Number: Tamsayı yada ondalık sayı olmak üzere sayısal değer tutar.
Tamsayılar on tabanlı, sekiz tabanlı veya on altı tabanlı olabilir. Sekiz tabanlı sayıları belirtmek için sayının başına sıfır (0), on altı tabanlı sayıları belirtmek için sıfır ve x (0x) getirilir.
Var sayi=2;
Var sayi=2.4
Var sayi=04576 // 8 tabanlı sayı
Var sayi=0x9E5 // 16 tabanlı sayı
• Boolean: true yada false olacak şekilde iki değere sahip olabilir. Karşılaştırma ifadeleri boolean veri tipindedir. İki değerde küçük harfle yazılmalıdır.
Var mantıksal=true;
Var mantıksal=false;
• String: Bir karakter veya karakter katarı şeklinde metin tutan veri tipidir. Tek tırnak veya çift tırnak içerisine alınan her ifade JavaScript için string tipindedir.
Var str=”a”;
Var str=”123”;
Bileşik Veri Tipleri:
Basit veri tiplerinin birleşmesinden oluşan veri tipidir. Birden fazla veriyi tek bir değişkende tutarlar.
• Array (Dizi): Liste şeklinde bir grup sıralı veriyi tutar. Her dizi elemanı bir indeks numarası ile belirtilir.
Var dizi=new Array(“a”,”b”,”c”);
Var dizi=new Array(1,2,3);
• Object (Nesne): Nesne tabanlı dillerde yer alan veri tipidir. JavaScript’in hazır nesneleri birer object veri tipidir. New operatörü kullanılarak JavaScript’in izin verilen hazır nesnelerinin bir örneği yaratılabilir. Ayrıca JavaScript kendi nesne tipinizi oluşturmanıza ve onun da bir örneğini yaratmanıza izin verir.
Var obje=new Date();
Var obje=new FormYarat();
Özel Veri Tipleri:
• Undefined: Veri tipi daha belli olmayan değişken. Bir değişken değer atanmadan tanımlanırsa undefined veri tipinde olacaktır. Değişkenin tipi değer atandığında JavaScript tarafından otomatik olarak belirlenir.
• Null: Değişkene atanacak değerin belli olmadığı durumlar için kullanılır. Bu durumda değişkene başlangıç değeri olarak null aktarılır. Çünkü değişkene hiçbir değer atanmazsa undefined olacaktır. Bu durumda değişken herhangi bir ifadede kullanılırsa JavaScript hata verecektir.
Var deger=null;
Var sonuc=deger+25; // sonuc=25
Veri Tipi Dönüşümleri:
JavaScript veri tipleri konusunda oldukça gevşek davranır. İçerisinde kullanıldıkları ifadeye göre otomatik olarak veri dönüşümüne uğrarlar. Bu otomatik dönüşüm işlemi kullanışlı olmasının yanı sıra istenmeyen durumlara da yol açabilir.
2+2 // sonuç=4
2+”2” // sonuç=22
“2”+”2” // sonuç=22
2+2+”2” //sonuç=42
“37”-7 // sonuç=30
JavaScript’te veri tipleri arasında dönüşümü sağlayan metotlarda mevcuttur.Eğer tip dönüşüm işlemini JavaScript’in yerine siz yapmak istiyorsanız bu fonksiyonları kullanabilirsiniz. Böylece istenmeyen durumlarla karşılaşmazsınız.
parseInt(): integer’a dönüştürür,
parseFloat(): reel sayıya dönüştürür,
Number(): tamsayıya dönüştürür,
String(): String’e dönüştürür.
Özel Karakterler: Ekrana özel bir karakteri (karakter olarak belirtilmeyen özel işaretler tab gibi veya özel anlamı olan karakterler “” gibi) yazdırmak için ters bölü (“\”) karakteri kullanılır.
document.write (“Atatürk dedi ki : \” Efendiler .....\” ”);
JavaScript’te kullanılan özel karakterler aşağıda verilmiştir.
\b - Klavyede Geri (backspace) tuşunun görevini yaptırır.
\f - Yazıcıya sayfayı bitirmeden çıkarttırır (formfeed).
\n - Yazı imlecini yeni bir satırın başına getirir (new line)
\r - Klavyede Enter-Return tuşunun görevini yaptırır.
\t - Sekme (tab) işaretini koydurur.
\\ - Yazıya ters-bölü işareti koydurur.
\’ - Yazıya tek-tırnak işareti koydurur.
\” - Yazıya çift-tırnak işareti koydurur
Operatörler:
• Aritmetik Operatörler:
Operatör İsmi Örnek Sonuç
+ Toplama 3+5 8
- Çıkarma 5-3 2
* Çarpma 3*5 15
/ Bölme 6/2 3
% Kalan(mod) 25%7 4
Bunların dışında “Birli Aritmetik Operatörler” olarak bilinen ++ ve -- operatörlerde mevcuttur. Değişkenin sağında veya solunda olması ifade içerinde farklı sonuçlara yol açar.
n=2 iken k=(n++)+3 ifadesi n=3 ve k=5 olur.
n=2 iken k=(++n)+3 ifadesi n=3 ve k=6 olur.
• Karşılaştırma Operatörleri:
Operatör İsmi Örnek Sonuç
== Eşit 5==”5” Doğru
=== Kesin Eşit 5===”5” Yanlış
!= Eşit Değil 5!=”5” Yanlış
!== Kesin Eşit Değil 5!==”5” Doğru
> Büyük 5>3 Doğru
< Küçük
>= Büyük Eşit
<= Küçük Eşit
• Mantıksal Operatörler: Koşul (if) deyimlerinin vazgeçilmez operatörleridir. Birden fazla koşulu birleştirmek için kullanılır.
Operatör İsmi Örnek Sonuç
&& Ve Doğru&&Yanlış Yanlış
|| Veya Doğru||Yanlış Doğru
! Değil !Doğru Yanlış
• Atama Operatörü:
Operatör İsmi Örnek Sonuç
= Değer Atama D=7 7
+= Birikimli Toplama D+=3 10
-= Birikimli Çıkarma D-=3 4
*= Birikimli Çarpma D*=3 21
/= Birikimli Bölme D/=3 2,3
%= Birikimli Kalan D%=3 1
• Bit İşlem Operatörleri :
Operatör İsmi Açıklama
& Bitsel AND
| Bitsel OR
^ Bitsel XOR
~ Bitsel NOT
>> Sağa Shift
<< Sola Shift
• Silme Operatörü (Delete): Bir nesnenin yada bir dizinin elemanını siler
delete arr[4];// arr dizi değişkenin 5. elemanını siler.
• new Operatörü: Bir nesne tipinin örneğini oluşturmak için kullanılır.
arr = new Array(); // Array nesnesi ile dizi değişken oluşturma
tarih = new Date();// Date nesnesiyle tarih nesnesi oluşturma
Şartlı işlemler (Üçlü Operatör): Javascript’te karşılaştırma yaparken şartlı (..ise ..yap!) işlemler de yaptırabilirsiniz. Şartlı işlemlerde ? (soru işareti) ve : (iki nokta üst üste) işaretlerini kullanırsınız.
sonucMsg = (y==x)?"y x ‘e esit!" : "y x’e esit degil!"
alert(sonucMsg)
Burada da, x değişkeni ile y değişkeni aynı olduğu zaman, soru işaretiyle biten karşılaştırma işleminden hemen sonraki ilk komut (veya ifade) seçiliyor; değişkenler aynı olmadığı taktirde, iki nokta üstüste işaretinden sonra gelen komut (veya ifade) seçiliyor.
İşlem Sırası: Javascript’te işlemlerin genel sırası şöyledir: Atama işlemleri, şartlı işlemler, mantıksal ve/veya/değil işlemleri, karşılaştırma işlemleri, aritmetik işlemler, fonksiyonlar.
Javascript’te aritmetik işlemler ilke olarak soldan sağa doğru yapılır. Örneğin
x = a * b + c
denklemi çözülürken, önce a ile b çarpılır, elde edilecek sayıya c eklenir.
Fakat bir denklemde parantez içine alınmış ifade varsa, Javascript önce parantezin içini halleder. Örneğin
x = a * (b + c)
denklemin önce b ile c toplanır, elde edilecek sayı a ile çarpılır.
Eğer bir işlemde Javascript aritmetik işlemleri sıraya sokmak zorunda kalırsa, toplama, çıkartma, çarpma ve bölme sırasıyla yapar. İşlemlerin sırası konusunda kuşkunuz varsa, mümkün olduğu kadar çok parantez kullanın.
Dizi Değişkenler:
Dizileri liste gibi düşünebiliriz. Örneğin alışveriş listesi gibi. Bunun için önce bir dizi değişken tanımlanır.
Var alisveri = new Array();
Bu ifadeyle alisveri adında sıfır boyutlu boş bir dizi oluşturulmuş olur. Şimdi diziye birkaç eleman ekleyerek alışveriş listesini dolduralım.
alisveris[0] =”şeker”;
alisveris[1] =”tuz”;
alisveris[2] =”ekmek”;
Dizi elemanlarına ulaşmak için indeks numarası kullanılır indeks numaraları 0 dan başlar. Yani dizinin ilk elemanı 0 indeks numarası ile ifade edilir. Dizi elemanları dizi tanımlanırken de oluşturulabilir.
Var alisveris = new Array(“şeker”,”tuz”, “ekmek”);
Dizi tanımlanırken dizinin boyutunu da belirtebiliriz;
Var alisveris = new Array(4) // 4 elemanlı dizi tanımlanıyor.
JavaScript’te dizi elemanlarının tipleri birbirlerinden farklı olabilir. Yani bir dizi içerisinde farklı tiplerde birçok bilgi tutulabilir.
Var dizi= new Array(“Batur”,5,2.7,true,null) // farklı tipte elemanları olan dizi.
Ayrıca bir dizinin elemanları yine bir dizi olabilir. Yani dizi içerisinde dizi tanımlanabilir. Bunlara çok boyutlu dizi denilir.
Var dizi= new Array(“orkun”,12, true, new Array(1,2,3))
Dizi nesnesinin 4. elemanı yine bir dizidir. Bu elemanın alt elemanlarına erişmek için dizi[3][0], dizi[3][1],.. şeklinde iki boyutlu bir yapı kullanılır.
Program Akış Denetimi
Bazı koşul ve durumlara göre programın akışını değiştirmek gerekebilir. Program denetimleri sayesinde kodun değerlere ve durumlara göre nsıl ve kaç defa çalışacağına karar verilir. Bu durum ve koşullar kodumuzun algoritmasını oluşturur.
JavaScript’te işlevlerine göre denetim ifadeleri iki grupta toplanır.
• Koşul İfadeleri
• Döngü İfadeleri
Koşul İfadeleri
• if Detimi: Bir değişkenin değerine göre program akışını değiştiren en basit ifadesidir
if (Koşul) {
// komut bloğu
}
Dikkate edilmesi gereken hususlar;
• İf mutlaka küçük harfle yazılmalıdır.
• Koşul mutlaka parantez içerisinde yazılmalıdır.
• Küme parantezi içerisindeki ifade koşul doğru olduğunda çalışacaktır. Eğer tek bir komut çalışacaksa küme parantezine gerek yoktur.
var isim= prompt(“isminiz ? ”, “”);
if (isim==””) alert(“isminizi girmeyi unuttunuz”);
• if … else Deyimi: Koşul yanlış olması durumunda çalışacak kod bloğu else yapısında tanımlanır. Böylece iki durum içinde yapılacaklar belirlenmiş olur.
var isim= prompt(“isminiz ? ”, “”);
if (isim==””) alert(“isminizi girmeyi unuttunuz”);
else alert(“Merhaba ” + isim);
• else ... if Deyimi: Koşul yanlış olması durumunda yeni koşullar else if yapısında oluşturulur.
if (koşul1) {
// 1. koşul doğru iken çalışacak blok
}
else if (koşul2)
{
// 1. koşul yanlış 2. koşul doğru ise
}
Switch Deyimi: switch deyimi else … if deyimiyle aynı işi yapar. Koşul sayısı fazlaysa bu koşulları else if yapısında oluşturmak zahmetli olacaktır. Bu durumda switch yapısı kullanılır.
switch (deyim) {
case koşul1: komutlar break;
case koşul2: komutlar break;
…
default: komutlar;
• switch ifadesi hepsi küçük harfle yazılmalıdır.
• Deyim ifadesi genelde bir değişken olmakla beraber sonuç döndüren bir fonk. olabilir.
• Her koşul case ile başlar break ile biter. Break ifadesi kullanmak mecburi ve önemlidir. Akis halde bir koşul sağlansa bile tüm koşullar boş yere kontrol edilir.
• default ifadesi isteğe bağlıdır. Hiçbir case koşulu sağlanmazsa default ile tanımlanan komut çalışır
var isim= prompt(“isminiz ? ”, “”);
isim=isim.toUpperCase();
switch(isim) {
case “”: alert (“isminizi girmeyi unuttunuz.”); break;
case “BATUR”: alert (“Ooo” + isim+ “Bey Hoşgeldiniz”); break;
case “BUKET”: alert (“Merhaba \n Nasılsınız” + isim +”Hanım”); break;
default : alert (“Merhaba”+ isim);
}
Döngü İfadeleri
• for Döngüsü: Döngünün kaç kere tekrarlanacağı döngüye girerken başta belli olan döngü türüdür.
for ( Sayaç_başlangıcı; Koşul ; Sayaç_artışı) { // komut bloğu
}
• Döngü ifadesi küçük harflerden oluşan for deyimiyle başlar
• Parantez içerisinde “;” le ayrılmış üç blok yer alır.
• Sonra küme parantezi içerisinde komut bloğu tanımlanır. Eğer tek bir komut çalışacaksa küme parantezine gerk yoktur.
• Koşul doğru olduğu sürece komut bloğu çalışacaktır. Blok bir kere çalıştıktan sonra tekrar başa dönüp koşul kontrol edilecek bu arada sayaç değişkeni de her turda değişecektir.
Diyelim ki, sitenizde santigrad dereceyi fahrenhayt dereceye çeviren tablo sunmak istiyorsunuz. 0’dan 100’e kadar bütün santigrad derecelerin (fahrenhayt = santigrad * 9 / 5 + 32 ) formülüyle karşılığını bulup, bir tabloya yazabilirsiniz.
Öncelikle JavaScript’le bir tablo oluşturuluyor. Bunun için aktif dokümana write metodu ile tablo oluşturmayı sağlayan HTML kodların yazılması yeterlidir. Bu tablo 2 sütundan oluşur. Daha sonra for döngüsü ile bu tablonun içerisine santigrad ve karşılığı fahrenhayt yazdırılıyor. Döngünün her adımında bir satır oluşturuluyor. Döngü sonunda ise tablo sonlandırılıyor.
• While döngüsü: Bir koşul doğru olduğu sürece bir grup komutu tekrarlayan döngü türüdür.
while (koşul) { // komut bloğu
}
• Küçük harflerden oluşan while ifadesiyle başlar
• Parantez içerisinde mantıksal bir değere içeren koşul ifadesi bulunur.
• Döngü koşul doğru olduğu sürece çalışır.
• do…while Döngüsü: Bu döngü tipi while döngüsüyle hemen hemen aynıdır. Aralarındaki tek fark do…while döngüsünde koşulun sonda kontrol edilmesidir. Bu nedenle bu döngü her koşulda en az birkez çalışacaktır. While döngüsünde ise kontrol başta olduğu için döngünün hiç çalışmaması söz konusudur.
do{
// komut bloğu
}while (koşul)
• döngü ifadesi küçük harflerden oluşan do ve while sözcükleri arasında yer alan küme parantezleri arasındaki komutları çalıştırır.
• Koşul ifadesi sondaki while ibaresiyle belirtilir.
• Koşul doğru olduğu sürece döngü devam eder.
• berak Deyimi: Döngüden koşul dışı çık!. Bazı özel durumlarda koşulu beklemeden döngüyü terk etmek gerekebilir. Bu durumda break deyimi sanki koşul yanlış sonuç üretmiş gibi döngüyü sona erdirir. Örneğin kullanıcı CANCEL butonuna bastığında döngüden çıkılabilir.
…
do {
n++;
var sayi=prompt(n+”. Sayınız ?”,0);
if (sayi==null) break;
toplam+=parseFloat(sayi);
}while (sayi!=0);
…
• continue Deyimi: continue deyimi döngü içinde döngüyü o noktada bırakıp, alttaki komutları atlayarak, koşul ifadesinin bulunduğu while veya for deyiminden devam eder.
…
do {
n++;
var sayi=prompt(n+”. Sayınız ?”,0);
if (sayi==null) break;
if (isNaN(sayi))
{
n--;
alert(“bir sayı girmeniz bekleniyor!”);
continue;
}
toplam+=parseFloat(sayi);
}while (sayi!=0);
…
isNaN fonksiyonu JavaScript’in hazır fonksiyon kütüphanesindendir. Parametreyle verilen değerin sayısal bir değer olup olmadığını belirten boolean bir değer döndürür.
Javascript’te Fonksiyonlar:
Javascript, klasik HTML’in yapamadığı şeyler yapabilir; ziyaretçiden veya ziyaretçinin Browser programından alacağı bir bilgiyi değerlendirerek bir dizi işlem yapabilir; ziyaretçiyi sitemizde belli bir sayfaya yönlendirebilir; kısaca sayfalarımıza ziyaretçi ile etkileşme imkanı kazandırır.
Çoğu zaman sayfanızdaki bir Javascript işleminin defalarca yapılması gerekebilir. Hatta öyle işlemler olur ki, Javascript, başka bir işi yapmadan önce, mutlaka bu işlemi yapmak isteyebilir. Bu tür tekrarlanan işleri, bu işin yapılması için gerekli bilgi kümesi ve komutlarla birlikte bir grup haline getirsek ve bu gruba bir isim verirsek kod tekrarından kurtulmuş oluruz.. Sonra bu iş kümesine ihtiyaç olduğu yerde sadece ismini kullanarak aynı kod bloğunu çağırabiliriz. İşte bu tür, bir isim altında toplanmış işlem paketlerine Function (işlev) adı verilir; Javascript kendisine “Şu fonksiyonu yap!” dediğiniz noktada yapmakta olduğu durdurur ve fonksiyon paketindeki işleri yapar; bu paket ortaya bir değişken veya sonuç çıkartıyorsa, o bilgiyi edinmiş olarak fonksiyon için yarım bıraktığı işleme geri döner.
Genel hatlarıyla fonksiyon, şu formüle göre yazılır:
function fonksiyonun_adı (argüman1, argüman2, ... argümanN){
//işlemler
}
Fonksiyonlar mutlaka SCRIPT etiketinin içinde yer alır. Daha sonra kullanılacak (çağrılacak) olsa da bütün fonksiyonlarınını HTML dosyasının HEAD bölümüne koymanız, Browser’ın Javascript yorumlayıcısı bakımından sürat sağlar. İyi bir programlama tekniği, bir sayfada gerekli bütün fonksiyonları, altalta, HTML’in HEAD bölümünde yer alacak bir SCRIPT etiketi içinde beyan etmek; sonra ihtiyaç olduğu yerde yeni bir SCRIPT etiketi koyarak bu fonksiyonu göreve çağırmaktır.
Bir fonksiyon, kendisini göreve çağıran komuttan veya fonksiyondan veri kümesi (argument) alabilir. Buna bir değerin fonksiyona geçirilmesi, ulaştırılması, verilmesi denilir. Bir fonksiyon, bir ya da daha fazla argüman alabilir. Fonksiyonun argümanları, bir isim altında toplanır ve bu bilgi kümesinin bölümlerine bu isimle atıfta bulunulur.
Fonksiyona değer gönderme ve değer alma;
Bir fonksiyon ile Javascript programının diğer işlemlerinin ilk ilişkisi fonksiyona bir değer gönderme ve ondan bir değer almaktır. Bir fonksiyon, yaptığı işin sonucu olarak, kendisini göreve çağıran komuta veya fonksiyona kendi adıyla bir değer verebilir. Fonksiyondan değer döndürmek için ”return” operatörü kullanılır. Fonksiyon return operatörünü gördüğü yerde fonksiyona son vererek belirtilen sonucu çağırıldığı yere döndürür.
Bir örnek üzerinde düşünmeye başlayalım. Ziyaretçinizden telefon numarasını yazmasını istiyorsunuz. Ziyaretçi de sayfada bir INPUT kutusuna veya PROMPT diyalog kutusuna telefon numarasını yazıyor. Bu numarayı, sayfada başka bir programda veya bölümde kullanmadan önce, gerçekten doğru yazılıp yazılmadığını irdelemek istiyorsunuz. Ziyaretçinin verdiği telefon numarasını bir fonksiyona havale edebilirsiniz; bu fonksiyon telefon numarası arzu ettiğimiz biçimde yazılmışsa olumlu, yazılmamışsa olumsuz yanıt verebilir. Bütün yapacağımız şey, ziyaretçiden alacağımız bilgiyi, bu fonksiyona argüman olarak geçirmekten ibaret; fonksiyonun sonuç olarak verdiği değer doğru ise işleme devam edeceğiz, değilse ziyaretçiyi uyararak, doğru bilgiyi girmesini isteyeceğiz.