25 Eylül 2009 Cuma

JAVASCRİPT DERS NOTU

JavaScript Nedir?

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ş:


İlk JavaScript



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. etiketleri içerisinde JavaScript bloklarını istediğiniz yere koyabilirsiniz. Ancak genel alışkanlık olarak bloğu içerisinde etiketinden sonra kullanılır. Ancak HTMl üreten JavaScript blokları <BODY> </BODY> etiketleri arasında olmalıdır. <br />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. <br /> <br />HTML İçinde JavaScript <br />JavaScript komutlarının her zaman <SCRIPT> bloğunda yazılması uygun olmayabilir. JavaScript komutları HTML etiketlerinin içerisinde kullanılabilir. Yukarıdaki örnekteki etkiyi <script> bloğu kullanmadan aşağıdaki gibi yapabiliriz. <br /> <br /><body> <br /><input type=”button” value=”TIKLA!!” onClick=”alert(‘Sayfaya hoş geldin’)”> <br /></body> <br /> <br />JavaScript Kaynak Dosyaları: <br />JavaScript kodlarını HTML dokümanlarının içerisine doğrudan yazabileceğimiz gibi harici bir dosya içerisine yazılarak HTML dokümanına kaynak dosya olarak dahil edilebilir. Bunun için <SCRIPT> etiketinin SRC özelliği kullanılır. Kodlar <SCRIPT> bloğu yerine “.js” uzantılı başka bir dosya içerisine yazılır. Sonra <SCRIPT> etiketinin SRC özelliğiyle JavaScript dosyası belirtilir. <br /> <br /><SCRIPT LANGUAGE=”JavaScript” <br /> SRC=”c:\js\proje.js”> <br /></SCRIPT> <br />Burada dikkat edilmesi gereken önemli birkaç nokta var . <br />• Kaynak dosya “.js” uzantılı olmalıdır. <br />• SRC özelliği belirtilen <SCRIPT> bloğu içerisinde Java Script kodu yazılmaz. <br />• Kaynak dosya dizin yoluyla birlikte belirtilir. <br />HTML dokümana JavaScript kod bloklarını kaynak dosya kullanarak dahil etmenin iki önemli sebebi vardır. <br />1. HTML dokümanın temizliği için <br />2. Kaynak dosya paylaşımı için <br /> <br />JavaScriptin Temelleri: <br /> <br />Değişkenler: JavaScript’te değişkenler C/C++ yada Pascal da olduğu gibi klasik kuşak dillerden oldukça farklıdır. C/C++ ve Pascalda değişkenler “önden” tanımlanır. Daha sonra değişkene değer atarken bu belirlemelere uyarak değer atanabilir. Fakat JavaScript gibi dillerde değişkenleri önceden tanımlamak gerekmez. Değişkenlerin tipleri otomatik olarak değer atandığında atanan değerin tipine göre belirlenir. Bu durum kodlamada kolaylık sağlar fakat değişkenlerin daha dikkatli kullanılmasını gerektirir. Aksi halde istenmeyen durumlar oluşabilir. <br /> Bunun dışında JavaScript’te değişken tanımlamanın birkaç basit kuralı vardır. <br />• Değişken isimleri mutlaka bir harf veya “_” karakteriyle başlamalıdır. Daha sonra sayı içerebilir. Hiçbir şekilde türkçe karakter içeremez <br />• Değişkenler büyük-küçük harf ayrımına duyarlıdır. <br />• Değişkenler eğer ilk defa tanımlanıyorsa “var” sözcüğü kullanılarak belirtilmelidir. Bu aslında bir kural değildir ama böyle olmasında fayda vardır ve iyi bir alışkanlıktır. <br />• Değişken adları JavaScript tarafından belirlen bazı özel sözcüklerden oluşamaz. Bunlar JavaScript‘te belli görevleri olan sözcüklerdir örn: int true, break, byte, null vs) <br />• Değişken isimleri verirken tuttuğu değeri en iyi şekilde ifade eden kısa bir isim vermek uygundur. <br /> <br /><script language=”JavaScript”> <br />var tam_sayi=123; <br />var ondalik_sayi=12.3; <br />var ondalik_sayi2=12/5; <br /> <br />var karakter_dizisi=”123”; <br />var karakter_dizis2=”abc”; <br /> <br /></script> <br /> <br />Değişkenlere karakter atamak için tırnak içerisine alınmalıdır. Aksi halde JavaScript hata mesajı verecektir. <br /> <br />Veri Tipleri <br /> 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. <br /> JavaScript’te değişkeler üç ana grupta toplanır. <br />• Basit değişkenler <br />• Bileşik değişkenler <br />• Özel değişkenler. <br /> <br />Basit Değişkenler: <br /> <br /> Üç 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. <br />• Number: Tamsayı yada ondalık sayı olmak üzere sayısal değer tutar. <br />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. <br />Var sayi=2; <br />Var sayi=2.4 <br />Var sayi=04576 // 8 tabanlı sayı <br />Var sayi=0x9E5 // 16 tabanlı sayı <br />• 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. <br />Var mantıksal=true; <br />Var mantıksal=false; <br />• 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. <br />Var str=”a”; <br />Var str=”123”; <br /> <br />Bileşik Veri Tipleri: <br />Basit veri tiplerinin birleşmesinden oluşan veri tipidir. Birden fazla veriyi tek bir değişkende tutarlar. <br />• Array (Dizi): Liste şeklinde bir grup sıralı veriyi tutar. Her dizi elemanı bir indeks numarası ile belirtilir. <br />Var dizi=new Array(“a”,”b”,”c”); <br />Var dizi=new Array(1,2,3); <br />• 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. <br />Var obje=new Date(); <br />Var obje=new FormYarat(); <br /> <br />Özel Veri Tipleri: <br />• 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. <br />• 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. <br />Var deger=null; <br />Var sonuc=deger+25; // sonuc=25 <br /> <br />Veri Tipi Dönüşümleri: <br />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. <br />2+2 // sonuç=4 <br />2+”2” // sonuç=22 <br />“2”+”2” // sonuç=22 <br />2+2+”2” //sonuç=42 <br />“37”-7 // sonuç=30 <br />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. <br />parseInt(): integer’a dönüştürür, <br />parseFloat(): reel sayıya dönüştürür, <br />Number(): tamsayıya dönüştürür, <br />String(): String’e dönüştürür. <br /> <br />Ö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. <br />document.write (“Atatürk dedi ki : \” Efendiler .....\” ”); <br />JavaScript’te kullanılan özel karakterler aşağıda verilmiştir. <br />\b - Klavyede Geri (backspace) tuşunun görevini yaptırır. <br />\f - Yazıcıya sayfayı bitirmeden çıkarttırır (formfeed). <br />\n - Yazı imlecini yeni bir satırın başına getirir (new line) <br />\r - Klavyede Enter-Return tuşunun görevini yaptırır. <br />\t - Sekme (tab) işaretini koydurur. <br />\\ - Yazıya ters-bölü işareti koydurur. <br />\’ - Yazıya tek-tırnak işareti koydurur. <br />\” - Yazıya çift-tırnak işareti koydurur <br /> <br />Operatörler: <br />• Aritmetik Operatörler: <br />Operatör İsmi Örnek Sonuç <br />+ Toplama 3+5 8 <br />- Çıkarma 5-3 2 <br />* Çarpma 3*5 15 <br />/ Bölme 6/2 3 <br />% Kalan(mod) 25%7 4 <br /> <br /> 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. <br />n=2 iken k=(n++)+3 ifadesi n=3 ve k=5 olur. <br />n=2 iken k=(++n)+3 ifadesi n=3 ve k=6 olur. <br /> <br />• Karşılaştırma Operatörleri: <br />Operatör İsmi Örnek Sonuç <br />== Eşit 5==”5” Doğru <br />=== Kesin Eşit 5===”5” Yanlış <br />!= Eşit Değil 5!=”5” Yanlış <br />!== Kesin Eşit Değil 5!==”5” Doğru <br />> Büyük 5>3 Doğru <br />< Küçük <br />>= Büyük Eşit <br /><= Küçük Eşit <br />• Mantıksal Operatörler: Koşul (if) deyimlerinin vazgeçilmez operatörleridir. Birden fazla koşulu birleştirmek için kullanılır. <br /> <br />Operatör İsmi Örnek Sonuç <br />&& Ve Doğru&&Yanlış Yanlış <br />|| Veya Doğru||Yanlış Doğru <br />! Değil !Doğru Yanlış <br /> <br />• Atama Operatörü: <br />Operatör İsmi Örnek Sonuç <br />= Değer Atama D=7 7 <br />+= Birikimli Toplama D+=3 10 <br />-= Birikimli Çıkarma D-=3 4 <br />*= Birikimli Çarpma D*=3 21 <br />/= Birikimli Bölme D/=3 2,3 <br />%= Birikimli Kalan D%=3 1 <br /> <br />• Bit İşlem Operatörleri : <br />Operatör İsmi Açıklama <br />& Bitsel AND <br />| Bitsel OR <br />^ Bitsel XOR <br />~ Bitsel NOT <br />>> Sağa Shift <br /><< Sola Shift <br /> <br />• Silme Operatörü (Delete): Bir nesnenin yada bir dizinin elemanını siler <br />delete arr[4];// arr dizi değişkenin 5. elemanını siler. <br /> <br />• new Operatörü: Bir nesne tipinin örneğini oluşturmak için kullanılır. <br />arr = new Array(); // Array nesnesi ile dizi değişken oluşturma <br />tarih = new Date();// Date nesnesiyle tarih nesnesi oluşturma <br /> <br />Ş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. <br />sonucMsg = (y==x)?"y x ‘e esit!" : "y x’e esit degil!" <br />alert(sonucMsg) <br />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. <br /> <br />İş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. <br />Javascript’te aritmetik işlemler ilke olarak soldan sağa doğru yapılır. Örneğin <br />x = a * b + c <br />denklemi çözülürken, önce a ile b çarpılır, elde edilecek sayıya c eklenir. <br />Fakat bir denklemde parantez içine alınmış ifade varsa, Javascript önce parantezin içini halleder. Örneğin <br />x = a * (b + c) <br />denklemin önce b ile c toplanır, elde edilecek sayı a ile çarpılır. <br />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. <br /> <br />Dizi Değişkenler: <br />Dizileri liste gibi düşünebiliriz. Örneğin alışveriş listesi gibi. Bunun için önce bir dizi değişken tanımlanır. <br />Var alisveri = new Array(); <br />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. <br />alisveris[0] =”şeker”; <br />alisveris[1] =”tuz”; <br />alisveris[2] =”ekmek”; <br /> 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. <br />Var alisveris = new Array(“şeker”,”tuz”, “ekmek”); <br />Dizi tanımlanırken dizinin boyutunu da belirtebiliriz; <br />Var alisveris = new Array(4) // 4 elemanlı dizi tanımlanıyor. <br />JavaScript’te dizi elemanlarının tipleri birbirlerinden farklı olabilir. Yani bir dizi içerisinde farklı tiplerde birçok bilgi tutulabilir. <br />Var dizi= new Array(“Batur”,5,2.7,true,null) // farklı tipte elemanları olan dizi. <br />Ayrıca bir dizinin elemanları yine bir dizi olabilir. Yani dizi içerisinde dizi tanımlanabilir. Bunlara çok boyutlu dizi denilir. <br />Var dizi= new Array(“orkun”,12, true, new Array(1,2,3)) <br />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. <br /> <br />Program Akış Denetimi <br />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. <br /> JavaScript’te işlevlerine göre denetim ifadeleri iki grupta toplanır. <br />• Koşul İfadeleri <br />• Döngü İfadeleri <br /> <br />Koşul İfadeleri <br />• if Detimi: Bir değişkenin değerine göre program akışını değiştiren en basit ifadesidir <br />if (Koşul) { <br /> // komut bloğu <br /> } <br />Dikkate edilmesi gereken hususlar; <br />• İf mutlaka küçük harfle yazılmalıdır. <br />• Koşul mutlaka parantez içerisinde yazılmalıdır. <br />• 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. <br />var isim= prompt(“isminiz ? ”, “”); <br />if (isim==””) alert(“isminizi girmeyi unuttunuz”); <br /> <br />• 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. <br />var isim= prompt(“isminiz ? ”, “”); <br />if (isim==””) alert(“isminizi girmeyi unuttunuz”); <br />else alert(“Merhaba ” + isim); <br /> <br />• else ... if Deyimi: Koşul yanlış olması durumunda yeni koşullar else if yapısında oluşturulur. <br /> <br />if (koşul1) { <br />// 1. koşul doğru iken çalışacak blok <br />} <br />else if (koşul2) <br />{ <br />// 1. koşul yanlış 2. koşul doğru ise <br />} <br /> <br />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. <br />switch (deyim) { <br />case koşul1: komutlar break; <br />case koşul2: komutlar break; <br />… <br />default: komutlar; <br />• switch ifadesi hepsi küçük harfle yazılmalıdır. <br />• Deyim ifadesi genelde bir değişken olmakla beraber sonuç döndüren bir fonk. olabilir. <br />• 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. <br />• default ifadesi isteğe bağlıdır. Hiçbir case koşulu sağlanmazsa default ile tanımlanan komut çalışır <br /> <br />var isim= prompt(“isminiz ? ”, “”); <br />isim=isim.toUpperCase(); <br />switch(isim) { <br />case “”: alert (“isminizi girmeyi unuttunuz.”); break; <br />case “BATUR”: alert (“Ooo” + isim+ “Bey Hoşgeldiniz”); break; <br />case “BUKET”: alert (“Merhaba \n Nasılsınız” + isim +”Hanım”); break; <br />default : alert (“Merhaba”+ isim); <br />} <br /> <br />Döngü İfadeleri <br />• 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. <br />for ( Sayaç_başlangıcı; Koşul ; Sayaç_artışı) { // komut bloğu <br />} <br />• Döngü ifadesi küçük harflerden oluşan for deyimiyle başlar <br />• Parantez içerisinde “;” le ayrılmış üç blok yer alır. <br />• Sonra küme parantezi içerisinde komut bloğu tanımlanır. Eğer tek bir komut çalışacaksa küme parantezine gerk yoktur. <br />• 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. <br />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. <br /> <br /><HTML> <br /><HEAD> <br /><TITLE>Javascript'te döngü





Ö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.

Javascript'te Do..While

• 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.
Javascript'te Fonksiyon






Bu sayfada, önce “if(dogruMu(numara))” şeklindeki ifadeye dikkat edelim. Javascript, bu noktada “dogruMu” fonksiyonu çağıracak, bunu yaparken de fonksiyona “numara” adı altında bir değer geçirecektir. Fonksiyondan bütün beklediğimiz “if” sorgulamasına “true” (doğru) veya “false” (yanlış) şeklinde bir karşılık vermesidir
Fonksiyonun gerçekten kendisine verilen bilgilerin, arzu edilen biçime uygun olup olmadığını sınaması gerekir. Bu bilgiyi tutan “numara” nesnesi, nesne olduğu için bazı özelliklere sahiptir; bu özelliklerden biri de uzunluğudur. Önce bu uzunluğun 13 karakter olup olmadığına bakıyoruz. Ziyaretçi, telefon numarasını yazdığı halde parantezleri veya kesme çizgisini unuttuysa, verdiği bilgilerin uzunluğu 13 karakterden az olacaktır, yani “numara.length” 13 olmayacak, “durum” değişkenin değeri “false” olarak değiştirilecektir. Numaranın karakter sayısı 13 ise, fonksiyonumuz 13 karakteri, bir “for” döngüsü çerçevesinde tek tek irdelemeye başlayacaktır. Her bir karakteri almak için charAt(i) fonksiyonu kullanılıyor
parseInt(i,n) fonksiyonu ile karakterlerin rakam olması kontrol edilmektedir. İkinci parametre çevirme işleminin tabanını ( 10 tabanlı, 8 tabanlı) belirtmektedir.
Şimdi yeni bir fonksiyon yazarak, Browser’ın, bilgisayarın işletim sisteminden saat ve tarih bilgisi edinerek, Javascript’e ulaştırmasını sağlayalım.


Javascript'te Fonksiyon




Şu anda saat:




Bu Javascript kodunda tanımladığımız değişkenin, Javascript’in otomatik bir metodundan değişken elde ettiğini görüyorsunuz.
Date(): getYear(), getMonth(), getDate(), getDay(), getTime(), getHours(), getMinutes(), getSeconds()
Bu metod, Javascript’in Browser’dan, Browser’ın işletim sisteminden, işletim sisteminin de bilgisayarın temel girdi/çıktı işlemlerini yapan (BIOS) çipinden, saati ve tarihi içeren bilgiyi almasını sağlar. Gerçi metod Date (günün tarihi) adını taşıyor, ama Date(), Javascript açısından class (sınıf) sayılır ve edinilen bilgi sadece ay, gün ve yıl bilgisini değil, o andaki saati, dakikayı ve saniyeyi de içerir.
“saat” adını verdiğimiz bu değişken, Date() metodunun sağladığı bütün bilgileri içerdiği için, içinden saate ilişkin bilgiyi söküp almamız gerekir. Date() sınıfının sağladığı bilgiyi, get... yoluyla alırız.
toString(), toLowerCase(), toUpperCase()
Javascript’in kullanılmaya hazır işlevleri (metodları) arasında Date (Tarih) nesnesine uygulanabilecek olanlarından biri toString() metodudur. Kelime anlamı String’e çevir, alfanümerik’e çevir olan bu metodla, saat nesnesinin tamamen kendine özgü biçimi, Javascript tarafından HTML’in anlayabileceği şekle çevrilmiş olur. Buradaki örnek kodda, “saat” değişkeninin içeriğini toString() metoduna tabi tutarak, alfanümerik değere çeviriyoruz ve bunu, HTML sayfasındaki Form nesnesinin “saatkutusu” isimli INPUT ögesinin içeriği haline getiriyoruz.
Javascript’te, çevirme amaçlı iki metod daha vardır. toString() metodu sadece Date nesnesine uygulanabilir, ama toLowerCase() (küçük harfe çevir) ve toUpperCase() (büyük harfe çevir) metodları bütün alfanümerik değerlere uygulanabilir.
setTimeout(“fonksiyonun_adı”, milisaniye)
setTimeout(), Javascript’in 1.2 sürümüyle gelen ve kendi kendisinin zamanlamasını belirleyen bir metoddur. Buradaki örnekte, “kronometre” değişkeninin değeri olarak, “tarihsaat” fonksiyonumuzun, her 1000 milisaniyede bir yenilenmesini istiyoruz. Bunun sonucu, Javascript, fonksiyonu her bin milisaniyede bir çalıştıracak, ve bunun sonucu olarak HTML sayfasındaki formda saatkutusu isimli kutunun değeri sürekli yenilenecektir.
Bu metoddan yararlanarak, Javascript’e, sözgelimi her sabah 6:30’da bir iş yaptırabiliriz. Bunun için, söz gelimi setTimeout metodunu içeren değişkeni, şöyle bir döngü içine koyabiliriz:
if ((saat.getHours() == 6) && (saat.getMinutes() == 30))
{
document.saatForm.saatkutusu.value = saat.toString()
//sonra setTimeout metodunu içeren zamanlama ifadesi gelir:
kronometre = setTimeout("tarihsaat()",10000)
}
Böyle bir döngü içine alındığı zaman kronometre sadece sabah 6:30’da saati ve tarihi gösterecektir.
Değişkenleri Değerlendirme (Eval)
eval() fonksiyonu verilen bir karakter katarını JavaScript ifadesine, nesne ve sayısal bir değere çevirebilir.
var x=”3”;
var y=”5”;
document.write(“
x+y= ”);
document.write(x+y);// sonuç 35
document.write(“
eval(x)+eval(y)= ”);
document.write(eval(x)+eval(y)); // sonuç 8








Değişkenlerin Kapsamı(Variable Scope)
Değişkenlerin kapsamı değişkenin geçerli olduğu alanı belirler. Bu bağlamada değişkenler global ve local olarak isimlendirilir. Yerel değişken fonksiyon içerisinde tanımlanan değişkendir. Gloaba değişken ise


Aynı isimde iki farklı değişken örneğia





Olylar( Events ): Kullanıcıyla iletişim kurarken yada tarayıcıyla ilgi bir işlemde olaylar meydana gelir. Kullanıcının fareye tıklaması, fareyi hareket ettirmesi, klavyede bir tuşa basması, tarayıcısına yeni bir sayfa yüklemesi ve birçok kullanıcı hareketi JavaScript için birer olay tanımlar.
En çok bilinen nesnelerin çok bilinen bazı olayları aşağıda verilmiştir.
Butonların;
• Tıklanması (click)

Tarayıcının penceresinde;
• Yeni doküman yüklenmesi ( load )
• Pencerenin kapatılması ( close )

Metin giriş kutularında
• Bilgi girişi için klavyede bir tuia basılması ( keypress )
• İçerdiğideğerin değiştirilmesi ( change )
• Giriş yapmak için nesnenin seçilmesi (focus)

Linklerin;
• Tıklanması
• Fare imlecinin üzerine gelmesi (move/over)

Resimlerin
• Tıklanması
• Fare imlecinin üzerine gelmesi
• Fare imlecinin üzerinden çekilmesi (blur)

Olay Yönlendiricileri ( Event Handlers):
Her pencere, tarayıcı veya ziyaretçi olayına karşılık JavaScript’in bir olay yönlendiricisi vardır. Bir olay meydana geldiğinde olay yönlendiricisi devreye girerek tanımlanan işleri gerçekleştirir.
Tarayıcıda bazı olaylara karşı kendinden tanımlı metotlar vardır. Fakat istenirse bu olay kendi yazdığınız bir fonksiyona yönlendirilerek istediğiniz işleri yapabilirsiniz. Örneğin bir linke basıldığında ilgili sayfa yüklenecektir. Fakat istenirse JavaScript ile bu olaya müdahale edebilirsiniz ve otomatik olayı devre dışı bırakabilirsiniz.
Olay yönlendiricilerine doğrudan JavaScript kodu yazabilirsiniz;

olay yönlendiricilerinin isimleri oldukça basittir. Olayın ingilizce adının başına “on” ibaresi gelir. Örneğin fare ile tıklama olayının adı “click”, bu olaya ait olay yönlendiricisinin adı da “onClick” dir. Klavyeden bir tuşa basma olayının adı “KeyPress”, bu olaya ait olay yönlendiricisinin adı da “onKeyPress” dir.
Olay yönlendiricileri HTML etiketinin içerisine doğruda JavaScript kodu yazarak yönetilebildiği gibi bir fonksiyona da yönlendirilebilir. Bu şekilde kodun daha anlaşılır ve düzenli olması sağlanmış olur.





Olaylara fonksiyon Tanımlama




Yeni Link

confirm() metodu kullanıcıya aldığı mesaj bilgisini gösteren ve OK,Cancel butonlarıyla onay bekleyen bir pencere çıkaracaktır. OnClick olay yönlendiricisindeki return komutuda dönen false değerini olayın sonucu olarak döndürerek olayı bitirmek için kullanılmaktadır.

Aşağıda JavaScript’teki olay yönlendiricilerinin ne zaman çalışacağı bilgisi sunulmuştur;

Olay Yönlendiricisi Ne zaman çalıştırılır.
OnClick Kullanıcı bir link, resim veya form elemanına fareyle tek tıkladığında
OnDblClick Kullanıcı bir link, resim veya form elemanına fareyle çift tek tıkladığında
OnChange Kullanıcı form elemanları üzerinde değişiklik yaptığında
onMouseDown OnClick olayının iki parçasından birincisi (basılması)
onMouseUp OnClick olayının iki parçasından ikincisi (bırakılması)
onMouseOver Kullanıcının bir link veya resim elemanının üzerine fare imlecini getirmesi
onMouseOut Kullanıcının bir link veya resim elemanının üzerinden fare imlecini çekmesi
OnLoad Tarayıcı penceresine bir doküman veya resim yüklemesi
OnUnLoad Kullanıcı yüklü olan dokümanı veya çerçeveyi kapattığında
OnAbort Bir resim yüklemesi yarıda kesildiğinde
OnSubmit Kullanıcı formu sunucuya göndermek için SUBMIT butonuna basması
OnReset Kullanıcı formu ilk haline getirmek için RESET butonuna basması
OnFocus Bir HTML nesnesi seçili duruma geldiğinde
OnBlur Bir HTML nesnesinin seçili durumu kaldırıldığına
OnResize Kullanıcı pencere yada çerçevenin boyutlarını değiştirdiğinde
OnMove Kullanıc pencere yada çerçevenin yerini değiştirdiğinde (taşıdığında)


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

















Düğmelerden birini tıklayınız!






Butonlara basıldığında r1.html ve r2.html adında iki sayfa ayrı bir pencerede açılacaktır.
• onSubmit Olay Yönlendiricisi
Bir form, ziyaretçi tarafından türü Submit olan bir düğmenin tıklanması halinde, Browser tarafından HTTP protokolü ile Server’a gönderilir. Javascript, onSubmit yönlendiricisi ile bu olaya ilişkin işler yapabilir, fonksiyonlar icra edebilir. Fakat burada dikkat edeceğiniz nokta, “Submit” olayına engel olmamak veya bu işlemi şarta bağladı iseniz, bu şartın yerine gelmesini sağlamaktır.
Form etiketini şöyle yazabiliriz:

Dolayısıyla “onayla()” fonksiyonuna da kendisini göreve çağıran komuta bir sonuç ulaştırması gerektiğini bildirmemiz gerekir:
//onSubmit olayını yönlendirme fonksiyonu
function onayla() {
return confirm(‘Bu siparişi vermek istediğinizden emin misiniz?’);
}
Bu durumda kullanıcı/ziyaretçi “confirm” kutusunun OK (Tamam) düğmesini tıklarsa onSubmit yönlendiricisi Form’u belirtilen CGI programına, işlenmek üzere, gönderecek; Cancel (İptal) düğmesi tıklanırsa, onSubmit yönlendiricisi submit olayını durduracaktır.
• onReset Olay Yönlendiricisi
Formlara koyduğunuz Reset (Başa dön) düğmesi, bir Form’daki bütün bilgilerin silinmesini sağlar; Browser’ın Geri düğmesini tıklamak dahil, hiç bir eylem ziyaretçinin yanlışlıkla bastığı Sil düğmesinin sildiğini geri getiremez. Fakat programcı olarak siz böyle bir hatayı önleyebilirsiniz. Çünkü Sil düğmesinin oluşturduğu “reset” olayını yönlendiren onReset, size bu imkanı verir. Tıpkı onSubmit’teki gibi FORM etiketinize onReset tarafından devreye sokulacak bir doğrulama fonksiyonu koyabilirsiniz. Form etiketiniz şöyle olabilir:

Bu fonksiyonu da HTML’in HEAD bölümünde şöyle yazabilirsiniz:
//onReset olayını yönlendirme fonksiyonu
function sahiMi() {
return confirm(‘Bu formdaki büktün bilgileri silmek istediğinizden emin misiniz?’);
}
Ziyaretçiniz doldurduğu formda, Gönder yerine yanlışlıkla Sil’i tıkladıysa, böylece bir şansa daha kavuşmuş olur.

onChange
HTML sayfanızda olabilecek tek değişiklik, ziyaretçinin içine bir şeyler yazabildiği veya bazı işaretler koyabildiği üç alandır: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Metin ve metinalanın içini tıklayarak Browser Penceresi’nin odak noktasını buraya getiren ziyaretçi klavyesine basarak, bu alanlara metin girebilir; bu HTML sayfasında “change” (değişiklik) olması anlamına gelir Select etiketinin sağladığı şıklardan birini seçen ziyaretçi de sayfada değişiklik olayına yol açar. “change” olayı halinde, onChange bu olayı yönlendirir. Javascript programcısı olarak siz bu yönlendiriciye belirli bir fonksiyonu çalıştırmasını bildirebilirsiniz.
Bunu da bir örnekle ele alalım. Diyelim ki Frame (Çerçeve) esasına dayanan bir ana sayfanız var; ziyaretçinin bir çerçevedeki “select” etiketinin seçeneklerinden birini seçmesi halinde bir diğer çerçevenin içeriği değişsin istiyorsunuz. Ana sayfanızda bir FRAMESET var ve bu üç çerçeveli bir sayfa oluşturuyor. Burada Browser’ın “document” (sayfa) hiyerarşisi içinde Frameset “Parent” (ebeveyn; çünkü diğer bütün Frame'leri o doğuruyor!) ve “Frame 0” (1’nci çerçeve) “Frame 1” (2’nci çerçeve) ve “Frame 2” (3’ncü çerçeve) vardır. “document” nesnesi çerçeveleri bir dizi-değişken içinde tuttuğu ve Array (dizi değişken) numaralanmaya 0'dan başladığı için çerçevelerimiz 0’dan itibaren numaralanıyor. Buna göre sağ Frame'in içeriğini değiştireceğimiz zaman bu çerçeveye "Frame 2" adıyla gönderme yapmalıyız. Frame 1'e şöyle bir FORM koyarsak, daha sonra bu formun değişiklik olayını onChange ile sağ çerçevenin içeriğini değiştirmeye yönlendirebiliriz:










Burada, SELECT nesnesinin içeriği, ziyaretçinin herhangi bir seçeneği seçmesi halinde değişmiş oluyor; bu “change” olayı üzerine bu olayı yönlendirmek üzere kullandığımız onChange ise karşısındaki Javascript komutunu icra etmeye başlıyor. Bu uzun kodda, “this” (bu) anahtar kelimesinin yeniden kullanıldığını görüyorsunuz. Bu kelime, herhangi bir Javascript fonksiyonuna ihtiyacı olan bilgileri bu nesneden almasını bildiriyor. “Bu” diye nitelediğimiz nesne, içinde bulunduğumuz FORM’un SELECT ögesidir. SELECT ögesinin OPTION’ları, bu nesnenin OPTIONS dizi-değişkeninde numaralanır ve seçilen OPTION’ın numarası “selectedIndex,” içeriği ise “.value” adıyla adlandırılır. Nesneleri ve özelliklerini ele aldığımız bölümde bu konuya yeniden döneceğiz.
onFocus, onBlur
HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Çünkü ziyaretçinin sadece bu etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz. Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz.


JavaScript'te onFocus ve onBlur





Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:


Şimdi de aşağıdaki kutuya mesleğinizi yazın:





Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin kutusunun “blur” olayına onBlur’ün çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık veriyor.
onMouseOver, onMouseOut
Gerçekte bu iki olayla, Mouse işaretçisi bir bağlantı satırı veya grafiğinin ve bir grafik haritasının (Map, Area) üzerine geldiği veya üzerinden çekildiği zaman ilgilenebiliriz; çünkü diğer HTML unsurları ve Javascript nesneleri ile Mouse işaretçisinin işaretleme ilişkisi yoktur.
Bu olayı ve yönlendirilmesini, şu küçük programda görebiliriz:


JavaScript'te Fonksiyon



PC World-Türkiye

Mouse işaretçisini PCWORLD-TÜRKİYE bağlantısının üzerine getirirseniz, Browser’ınızın alt çerçevesindeki statü mesajı yerinde "En güzel site için burayı tıklayın!", geri çektiğinizde de "En güzel siteye gitme fırsatını kaçırdınız!" mesajını göreceksiniz.
onLoad, onUnLoad
Javascript açısından Browser’ın bir HTML sayfasını görüntülemeyi bitirmesi sayfanın “load” (yükleme), başka bir sayfaya geçilmesi ise önceki sayfanın “unload” (yüklenmişlikten çıkması) sayılır; ve bu iki olayı onLoad ve onUnLoad yönlendiricileri ile karşılayabiliriz. HTML dosyasının iki bölüm (HEAD ve BODY) olduğunu biliyorsunuz. Browser açısından asıl sayfa, BODY bölümüdür; HEAD bölümündeki komutlar sayfanın nasıl görüntüleneceğine ilişkin komutlar içerir.
Bir sayfa Browser’a yüklenirken yapabileceğimiz bir çok işten birisi, ziyaretçinin Browser’ının türünü yoklamak olabilir.
var Browser=navigator.appName + " " + navigator.appVersion;
var getkey=Browser.substring(0, 12);
function hangiBrowser() {
if (Browser.substring(0, 8)=="Netscape")
window.location="netscape4.htm";
if (Browser.substring(0, 9)=="Microsoft")
window.location="ie.htm";
if ( (Browser.substring(0, 8)!="Netscape") && (Browser.substring(0, 9)!="Microsoft") )
window.location="belirsiz.htm";
}
Bu iki kodu içeren sayfanızı onLoad.htm adıyla kaydeder ve aynı dizine, içinde “Netscape kullanıyorsunuz! yazılı ve adı “netscape.htm”; içinde “IE kullanıyorsunuz!” yazılı ve adı “ie.htm”, ve içinde “Ne tür Browser kullandığınızı anlamadık!” yazılı ve adı “belirsiz.htm” olan üç HTML dosyası koyarsanız, onLoad.htm’i açmak istediğinizde kullandığınız Browser hangisi ise (onLoad.htm’in değil) diğer üç dosyadan birinin açıldığını göreceksiniz.
JavaScript'te onUnLoad


Bu sayfa size güle güle diyecek!!
Baska sayfa


Buradaki BODY etiketi, Browser başka sayfaya geçmek üzere mevcut sayfayı sildiği anda, Browser’a yeni bir pencere açarak, bu pencerede gulegule.htm’i görüntülemesini sağlayacaktır.
Olay Yakalama:
Bir butonun, resmin yada linkin click olayını yakalamak için etiketlere ait onClick olay yöneticisi kullanılır. Ayrıca tüm dokümandaki bir olaya belirleyeceğimiz bir fonksiyona da yönlendirebiliriz. Bunun için;
document.onClick=OlayKontrol; şeklinde bir atama ifadesi kullanılır.


..


Olay Parametreleri: Bir olay gerçekleştiğinde javascrit tarafından event adında bir nesne oluşturulur. Olayın türüne göre bu nesneden olay hakkında bilgi edinilebilir. Örneğin clik olayında Mouse koordinatları, shift tuşuna basılıp basılmadığı öğrenilebilir.

evet.clientX: pencereye göre X pozisyonu
event.clientY: pencereye göre Y pozisyonu
event.screenX: ekrana göre X pozisyonu
event.screenY: ekrana göre Y pozisyonu
event.button: Sol ise 1, sağ ise 2
event.shiftKey: Shift basılı ise 1
event.keyCode:hangi tuşa basıldığını verir.

Örnek:





Click somewhere in the document. An alert box will tell you if you pressed the shift key or not.








JAVASCRİPT NESNELERİ

Nesneler özellik ve metodlara sahiptir. Özellikler nesneyi tanımlayıp biçimlendirirken, metodlar ise nesnenin görevini ve işlevlerini yerine getirir. Nesnelerin kullanılması; özelliklerinin değiştirilmesi ve metotlarının çalıştırılması anlamına gelir.
Bir nesnenin özelliklerine erişmek için nesne adı ve özellik adı aralarına nokta koyularak belirtilir.
NesneAdı.ÖzellikAdı
Örneğin web sayfasının arka plan renginin bilgisini tutan document nesnesinin bgColor özelliğini değiştirebilirsiniz
document.bgColor=”yellow”;

Metotlara erişmenin yolu, özelliklere erişmekle aynıdır.
NesneAdı.MetotAdı(ParametreListesi)

Nesne Özelliklerin Değiştirme

Nesne Özelliklerinin Değiştirilmesi




Arka plan rengini değiştirmek için ilgili rengin butonuna basınız.























JavaScript nesneleri iki grupta toplanabilir. Tarayıcı ve HTML etiketleri tarafından, doküman tarayıcıya yüklendiğinde otomatik olarak oluşan document, window, form vb. nesneler. Diğeri ise JavaScript’te önceden tanımlanmış nesne tipleri (string ,Array vs.)
Önceden Tanımlanmış Nesneler: Bu grup nesneler tarayıcı ve tarayıcıya yüklenen dokümandan bağımsızdır. JavaScript tarafından genel amaçlı operasyonları yerine getirmek için önceden tanımlanmıştır. Matematik işlemleri, karakter işlemleri, tarih işlemleri, dizi işlemleri, veri tipi doğrulama ve veri dönüşümleri gibi temel işlemleri yerine getirirler.
• Array Nesnesi: Array nesnesi dizi değişkeni nesne gibi kullanılmasını sağlar.
Array Nesnesi Özellikleri:
Özellik Adı Tanımı
length Dizinin eleman sayısını verir.
prototype Dizi nesnesine yeni özellik ve metot ekler. Bütün nesnelerin ortak özelliğidir

Array Nesnesinin Metotları:
Metot Adı Tanımı
toString() Dizi elemanlarını arasına virgül koyarak string tipine dönüştürür.
Join (ayraç) Arasına ayraç ekleyerek dizi elemanlarını stringe dönüştürür.
Reverse() Dizi elemanlarını ters çevirir.
Sort() Dizi elemanlarını sıralar.









• String Nesnesi:
String Nesnesi Özellikleri:
Özellik Adı Tanımı
length Karakter katarının uzunluğunu bulur
prototype String nesnesine yeni özellik ve metot ekler. Bütün nesnelerin ortak özelliğidir


String Nesnesinin Metotları:
Metot Adı Tanımı
charAt(indeks) Belirtilen indeksdeki karakteri döndürür
fromCharCode(kod) Verilen UNICODE değerine ait karakteri döndürür.
indexOf(aranan) Karakter katarı içerisinde belirtilen alt diziyi arar ve bulduğu yeri döndürür. Bulamazsa -1 döndürür
split(ayraç) Karakter katarını belirtilen ayraca göre parçalayarak dizi nesnesi olarak geri döndürür.
substring(başlangıç,bitiş) Karakter katarını belirtilen indeks pozisyonları arasında keserek alt karakter dizisi olarak geriye döndürür.
toLowerCase() Bütün harflerini küçük harfe dönüştürür
toUpperCase() Bütün harflerini büyük harfe dönüştürür
valueOf() String nesnesinin tuttuğu değeri döndürür.
Substr(başlangıç,adet) Başlangıçtan itibaren adet tane kararkteri geriye döndürür



Çıkış:
HELLO
ABC

• Date Nesnesi: Tarih nesnesidir. Bilgisayarın tarih ve zaman bilgilerini almak için date nesnesi kullanılır. Date nesnesinin prototype dışında bir özelliği yoktur.
Date Nesnesinin Metotları: Tarih bilgisi almak için “get” atama yapmak için “set” le başlayan metotları vardır.getDate(), getTime(), getDay(), getHours(), getMilliSeconds(), getMinutes(), getMonth(), getSeconds(), getYear, metotları tarih bilgilerin almak için kullanılır. Aynı isimde “get” yerine “set” ifadesiyle atama yapan metotlar vardır.
• Math Nesnesi: Math nesnesi matematiksel işlemler için standart bir fonksiyon ve sabitler kütüphanesi sağlar.
Math Nesnesi Özellikleri:
Özellik Adı Tanımı
E Euler Sabiti
LN2 2 nin doğal logaritması
LN10 10 un doğal logaritması
LOG2E 2 tabanına göre E nin logaritması
LOG10E 10 tabanına göre E nin logaritması
PI PI Sabiti
SQRT2 2 nin karekökü

Math Nesnesi Metotları: Diğer programlama dillerine benzer olarak matematiksel metotlar mevcuttur.
abs(x), acos(x), cos(x), asin(x), sin(x), atan(2), ceil(x), flor(x), exp(x), log(x),pow(x,y), random(), round(x), sqrt(x)
JAVASCRIPT NESNELERI

Tarayıcı penceresine bir doküman yüklendiğinde, bir grup JavaScript nesnesi yaratılır. Bu nesneleri kullanarak tarayıcıyı ve yüklenen HTML dokümanını düzenleyebiliriz. Tarayıcı nesneleri hiyerarşik bir yapıya sahiptir. En dışta window nesnesi vardır. Diğer bütün nesneler “window” nesnesinin içerisinde bir alt nesne olarak yer alır.
Bir tarayıcı nesnesinin bir özellik veya metoduna erişmek istenirse bu hiyerarşik yapı kullanılır. Örneğin ekrana bir şey yazdırmak için;

document.write(“Ekrana Yazar”); çünkü write document nesnesinin metodudur.

Yeni bir penceredeki bir form elemanına erişmek için;
YeniPencereAdı.document.FormAdı.FormElemanAdı yapısı kullanılır.

• Navigator Nesnesi: navigator nesnesi tarayıcıya özel bir nesnedir ve taryıcının penceresi tarafından otomatik olarak yaratılır. Tarayıcının adı, sürümü ve üretici firma gibi tarayıcıya özel bilgileri bulundurur.

Navigator nesnesi özellikleri:

Özellik adı Veri tipi Tanımı
appName String Tarayıcının adı
appVersion String Tarayıcının versiyonu
appCodeName String Tarayıcının kod adı
mimeType Array Tarayıcının desteklediği dosya türlerini dizi olarak tutar
Plugins Array Tarayıcının desteklediği ek yazılımları dizi olarak tutar
userAgent String Tarayıcının tam olarak model bilgisini tutar.
userLanguage String İşletim sisteminin dilini verir.
browseLanguage String Browserın dilini verir
platform String İşletim sistemi türünü verir.


Navigator Nesnesi





• Window Nesnesi: En Üst seviyedeki tarayıcı nesnesidir. Tarayıcıya bir web sayfası yüklendiğinde otomatik olarak yaratılır. Tarayıcıda açılan her yeni pencere için “window” nesnesinin bir örneği yaratılır.

Özellikleri:

Özellik adı Veri tipi Tanımı
defaultStatus String Varsayılan durum çubuğundaki metni tutar
Frames Array Pencere içindeki tüm çerçeveleri oluşturulma sırasına göre indeksleyerek dizi nesnesi şeklinde tutar
Length Number Penceredeki çerçevelerin sayısını tutar
Name String Pencere yada çerçevenin adını tutar
Parent String Ana pencerenin adını tutar
Self String İçinde bulunulan aktif pencerenin adını tutar
Status String Durum çubuğundaki metni tutar
Top String En üst seviyedeki pencerenin adını tutar
Window String Aktif pencereyi tanımlamak için bir alternatif daha
location Object O an yüklü olan url hakkında bilgi verir.

Metotları:

Metot adı Tanımı
alert() Uyarı mesajı açar
close() Pencereyi kapat
confirm (mesaj) Onay kutusu
open ( url, isim, özellik) Verilen isimde yeni bir pencere açar ve url deki dokümanı yükler
prompt ( mesaj, örnek değer) Kullanıcıya veri giriş ekranı oluşturur.
Setimeout ( ifade zaman) Verilen zaman sonra verilen ifadeyi çalıştırır
cleartimeout(id) Settimeout metoduyla tanımlanan görevi iptal eder
Focus() Pencere aktif hale gelir
Blur() Pencere pasif hale gelir
Print() O anki pencere içeriği yazdırılır.
moveBy(x,y) Pencere pozisyonunu x, y kadar kaydırır.
moveTo(x,y) Pencere pozisyonunu x,y yapar
resizeBy(x,y) Pencere boyutunu x,y kadar değiştiri.
resizeTo(x,y) Pencere boyutunu x,y yapar
scrollBy(xnum,ynum) Belirtilen piksel kadar kaydırılır
scrolTo(xpos,ypos) Pelirtilen pozisyona sayfa kaydırılır

Open metodunun pencere özelliklerini tanımlayan özel sözcükleri:
Toolbar: Tarayıcının araç çubuğu
Menubar: Taratıcının menü çubuğu
Status: Durum çubuğu
Scrollbar : Kaydırma çubukları
Resizable : pencere boyutlarının değiştirilmesine izin verilir
Width : Piksel cinsinden pencerenin genişiliği
Height : Piksel cinsinden pencerenin yüksekliği
Location: web adresinin yazıldığı metin kutusu
Copyhistory: Yeni açılan pencereye eski pencerenin geçmiş (history) kaydının aktarılması

Örnek: Web adresinin yazıldığı metin kutusu ve araç çubuğuna sahip bir pencere açma:

win = window.open(“”,”test”,”location=1,toolbar=1”)

close (): İçinde bulunulan aktif pencereyi kapatmak için close() metodu kullanılır.
Başka bir pencereyi kapatmak için open metoduyla açılan pencere Win.Close() ifadesiyle kapatılır.

Pencere Aç/Kapama örneği:

Function YeniPencereAc()
{
pencere=window.open(“deneme.html”,”test”, “toolbar=1”);
}
function kapa(){
pencere.close();
}

Kullanıcıyla etkileşim:

Ziyaretçiden veri almak için “prompt” metodu kullanılır.
Prompt(“meaj”,”örnek deger”) şeklinde kullanılır

Örn: prompt(“Bir Sayı giriniz”,”5”)

Kullanıcıdan onay almak içinde confirm() metodu kullanır. Confirm metodu bir mesajla beraber “OK” ve “CANCEL” butonu sunarak kullanıcıdan onay alır.

Örnek:
Var Onay = confirm(“ Form bilgileri sunucuya gönderilecektir. Eminmisiniz?”)
if (onay) frm.gonder.submit;

setTimeout/clearTimeout:

SetTimeout metodu belli bir zaman sonra yerine getirilmesi gereken görevleri tanımlamak için kullanılır.
gorev_no = setTimeOut(ifade, zaman); zaman ms cinsinden 1000 ms = 1sn

clearTimeout metodu da setTimeout metoduyla tanımlanan görevi iptal eder.

clearTimeout(gorev_no)

Örnek : reklam penceresi açma/kapama

var id;
function reklampenceresi_ac(url,zaman)
{
win=open(url,"reklampenceresi","scrollbar=no,width=250,height=200");
id = setTimeout("win.close()",zaman);
}
function gorev_iptal()
{
id = clearTimeout(id);
}



Örnek : kayan yazı



• Screen Nesnesi: Screen nesnesi istemcinin görüntleme ekranı hakkında bilgi taşır. İstemci ekran çözünürlüğü renk derinliği gibi bilgiler screen nesnesi ile öğrenilebilir.
Özellikleri

Özellik adı Veri tipi Tanımı
Screen.heigth number Ekran yüksekliği
Screen.width number Ekran genişiliğ
Screen.colorDepth Number Renk derinliği

Örnek:






• Document Nesnesi: Document nesnesi window nesnesinin en büyük ve en önemli alt nesnesidir. Document nesnesi tarayıcının penceresinde yüklü olan web dokümanını yani web sayfasını temsil eder. Yüklü olan web dokümanı üzerindeki HTML etiketlerine erişmeyi ve düzenleme yapabilmeyi sağlar. HTML’in etiketi dokümana eklendiğinde document nesnesi de tanımlanmış olur.
Özellikleri:
Özellik adı Veri tipi Tanımı
linkColor String Ziyaret edilmemiş linklerin rengi belirler
vlinkColor String Ziyaret edilmiş linklerin rengini belirler
alinkColor String Aktif linkerin rengini belirler
Anchors[] Array Doküman içindeki tüm çapaları oluşturulma sırasına göre indeksleyerek dizi nesnesi şeklinde tutar
Forms[] Array Doküman içindeki tüm formları oluşturulma sırasına göre indeksleyerek dizi nesnesi şeklinde tutar
İmages[] Array Doküman içindeki tüm resimleri oluşturulma sırasına göre indeksleyerek dizi nesnesi şeklinde tutar
Links[] Array Doküman içindeki tüm linkleri oluşturulma sırasına göre indeksleyerek dizi nesnesi şeklinde tutar
bgColor String Dokümanın araka plan vergini belirler
fgColor String Sayfadaki metinlerin rengini belirler
lastModified String Dokümanın en son değiştirilme zamanını verir
Location String Yüklü olan dokümanın url adresini belirler
Referrer String Yüklü olan dokümana hangi url adresinden gelindiğini verir
Title String Yüklü olan dokümanın başlığını belirler
Document Nesnesi Metotları:

Metot adı Tanımı
clear() Yüklü olan dokümanı temizler
close() Open metoduyla açılan dokümanı kapatır
open() Write metoduyla yazmak için doküman aralığı açar
write() Dokümana metin vaya kod yazar
writeln() Dokümana metin veya kod yazar
getElementById() Belirtilen Id ye sahip ilk nesneyi geri döndürür
GetElementsByName() Belirtilen isme sahip nesne kümesini geri döndürür.
getElementsByTagName() Belirtilen tag ismine sahip nesne kümesini geri döndürür.

Örnek: Open metodu






Örnek: getElementsByTagName














value="How many input elements?" />



Nesnelere erişim: Nesnelere erişim hiyerarşik bir yapıda gerçekleştirilir. Document nesnesinin içindeki Logo isimli resmin ;

Document.Logo.src ( kaynağına erişim)
Document.Logo.width (genişliğine erişim )
Document.Logo.height (yüksekliğine erişim)

Resmin ismi yerine images nesnesi kullanılarak da istenilen resme erişilebilir. İmages nesnesi resimleri bir dizi şeklinde tutar.

Document.images[0].src (0. resme erişim) // oluşturulma sırasına göre sıralıdır.
Document.images[1].src (1. resme erişim)

Örnek : Araka plan rengini değiştiren uygulama

document.bgClor=’red’; ifadesi ile sayfanın araka plan rengi değitirilir.

• History Nesnesi: History nesnesi ziyaret edilen linkleri diske kayıt ederek ileri geri hareket edilmesini sağlar
Özellikleri:
Özellik adı Veri tipi Tanımı
Length Integer History nesnesinin kaydettiği geçmişte ziyaret edilmiş linklerin sayısını belirtir.
Current String Tarayıcının penceresinde yüklü olan dokümanın url adresini belirtir.
Next String Geçmiş listesindeki bir sonraki url adresini belirtir.
Previous String Geçmiş listesindeki bir önceki url adresini belirtir.
Metotlar:

Metot adı Tanımı
back() Geri butonunun işlevini yerine getirir
forward() İleri butonunun işlevini yerine getirir
go(x) X ile belirtilen kadar ileri veya geri

History.back() // bir önceki sayfaya git
History.go(-1) // bir önceki sayfaya git
History.forward() // bir sonraki sayfaya git
History.go(1) // 1 önceki sayfaya git

• location Nesnesi: location nesnesi kullanıcının penceresine yeni doküman yüklemek için kullanılır. Herhangi bir anda veya bir olay sonucu verilen adrese yönlendirmeyi sağlar. Location nesnesinin anahtar özelliği “href” özelliğidir. Bu özellik yeni yüklenecek olan dokümanın url adresini belirtir

location.href=”yeni.html” // pencereye yeni.html dokümanını yükle
location.href=”http://www.ktu.edu.tr”.
• Frame Nesnesi: etiketinin yer aldığı çerçeve yapısını içeren doküman yüklenir yüklenmez tarayıcı otomatik olarak frame nesnesini yaratır. Aslında frame nesnesi window nesnesinin bir alt nesnesidir. Fakat window nesnesi gibi davranır. Window nesnesine ait özellik ve metotların hemen hemen tamamına sahiptir.
Farme nesnesine erişmek için iki yol vardır; birincisi etiketinin name özelliği ile belirtilen ismi kullanarak:

parent.cerceve1, parent.cerceve2
diğer yöntem ise;
parent.frames[0] , parent.frames[1] şeklinde bloğunda yazılış sırasına göre belirtilir.
Çerçeve nesnelerine erişmek için parent dışında top ve self adında iki özel sözcük daha kullanılır.
o top: En üst seviyedeki pencereyi ifade eder.
o parent: bir çerçevenin içinde bulunduğu ana çerçeve parent sözğüyle adlandırılır.
o self: çerçevenin kendisidir.


çerçeve 1


Bilkent Üniversitesi


Hacettepe Üniversitesi


• Form Nesnesi

Formlar kullanıcı ile sunucu makine arasında interaktif bir ara yüz sağlar. JavaScript kullanarak birçok şeyi kullanıcının makinesinde, yani istemcide çözmek formları daha iyi bir etkileşim aracı haline getirir.

Özellikleri:

Özellik adı Veri tipi Tanımı
action String Form sunucuya gönderildiğinde sunucuda hangi url adresi tarafından karşılanacağını belirtir.
method String Forma girilen bilgilerin ne şekilde sunucuya taşınacağını belirtir. GET veya post metodu kullanılır
name String Formun tanımlanan adıdır
length String Formda bulunan elemanların sayısını verir
elements Array Formda yer alan tüm elemanları indeksleyerek dizi nesnesi şeklinde tutar


Metotları:

Metot adı Tanımı
Submit() Formu sunucuya gönderir
Reset() Formu ilk yüklenildiğindeki varsayılan duruma getirir


document.Forms[0];// 0. formu ifade eder
document.frm1; // frm1 isimli formu ifade eder;

frm.elements[0].value; form içindeki 1. elemanın değerini ifade eder
frm.adi.value; form içindeki adi isimli nesnenin değerini ifade eder

frm.submit() // formu gönderir
frm.reset() // formu başlangıç durumuna getirir


Örnek : Form nesneleriniü :

if (document.frm1.pswd.value == "")
{
alert("sifre girmelisiniz");
document.frm1.pswd.focus();
}
else if (document.frm1.pswd.value!=document.frm1.onay.value)
{
alert("sifrenizi tekrar yazın");
document.frm1.onay.value="";
document.frm1.pswd.value="";
document.frm1.pswd.focus();
}
else document.frm1.submit(); // formu gönder



Örn: Karakter limiti örneği




Form Elemanları:
etiketiyle oluşturulan formlar içerisinde aşağıdaki tabloda belirtilen elemanlar bulunabilir.

Eleman Adı Nesne Etiket Tanım
Metin Kutusu text INPUT
Metin Alanı textarea TEXTAREA
Radyo Butonları radio INPUT
Seçme Kutusu select INPUT Checkbox
Gizli Alanlar hidden INPUT
Şifre Alanı password INPUT
Seçim Menüsü select SELECT
Butonlar Submit,reset,button INPUT

Text Nesnesi: ifadesiyle oluşturulan text nesnesinin;

Özellikleri:
Özellik adı Veri tipi Tanımı
defautValue String Metin kutusunun ilk değerini belirtir. Bu değer kullanıcının girdiği değil tasarımcının etiketini tanımlarken value özelliğine atadığı ilk değerdir.
Value String Metin kutusunun güncel değerini tutar
name String Metin kutusunun adını tutar

Metotları:
Metot adı Tanımı
focus() Fare imlecinin istenilen metin kutusu üzerine odaklanmasını sağlar.
blur() Focus() metodunun tam tersi işlem yapar
select() Metin kutusu içeriğinin seçilmesini sağlar
Textarea Nesnesi: ifadesiyşe oluşturulan Textarea nesnesi Text nesnesi ile aynı özellik ve metotlara sahiptir.

Radio Nesnesi: ifadesiyle oluşturulan Radio butonları kullanıcıya birden fazla şık sunarak sadece birinin seçilmesine olanak sağlar.






Özellik adı Veri tipi Tanımı
Checked Mantıksal Radio butonunun seçili olup olmadığını belirtir
Document.araba.MARKA[0].checked=true
defaultChecked Mantıksal Tasarım sırasındaki seçim durumunu belirtir.
name String Radio butonunun adını tutar
length Integer Radio butonu grubu içinde kaç tane radio butonu olduğunu belirtir.
value String Radio nesnesinin sahip olduğu değeri tutar
Document.araba.MARKA[0].value
Metotları:
Metot adı Tanımı
Click() Gruptaki istenilen radio butonunu seçmek için kullanılır. Kullanıcının radio butonuna tıklamasını taklit eder. Aynı işlev checked özelliğine true değeri atayarak da yapılabilir.
Document.araba.MARKA[0].click()
Document.araba.MARKA[0].checked()=true

checkbox Nesnesi: ifadesiyle oluşturulan checkbox nesnesi Radio butonlarına çok benzer aralarındaki fark: Seçme kutuları kendi başlarına çalışır böylece birden fazla seçim yapılmasına izin verir.






• checkbox nesnesiyle radio nesnesinin özellikleri ve metotları aynıdır.
Örnek:
Var mesaj=”Çaldığını enstrumanlar:\n”;
Var enstrumanlar=””;
For (i=0;i{
if (document.enstruman.elements[i].type=”checkbox”)
if (document.enstruman.elements[i].checked)
enstrumanlar + = document.enstruman.elements[i].value+”\n”;
}
if (enstrumanlar==””) enstrumanlar=”YOK”;
alert(enstrumanlar);
password Nesnesi: ifadesiyle oluşturulan password nesnesi şifre alanlarını oluşturmak için kullanılır. Text nesnesiyle aynı özellik ve metotlara sahiptir. Tek farkı kullanıcının girdiği karakterler “*” karakteriyle gösterilir.

Hidden Nesnesi: ifadesiyle oluşturulan hidden nesnesi form üzerinde gizli bir text nesnesi oluşturur. Hidden nesnesinin name ve value özellikleri vardır. Genel sunucuya görünmesi gerekmeyen bilgiyi göndermek için kullanılır.

Select Nesnesi: Dar bir alanda kullanıcıya seçim listesi sunar. Seçim listesi hazırlamak için

Hiç yorum yok:

Yorum Gönder

Yorum Gönder