[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]En kısasından ;
JavaScript Nedir?
JavaScript Netscape firması tarafından geliştirilmiş olan bir script dilidir. Script dilleri Web sayfası hazırlayanlara etkileşimli ve dinamik sayfalar hazırlama imkanı vermektedir. JAVA dilinin özelliklerine ve komut yapısına çok benzeyen JavaScript aslında JAVA dilinden ayrı olarak hazırlanmıştır.
Javascript yardımı ile HTML kaynak kodları değiştirilebilir, bu sayede dinamik Web sayfaları hazırlamak mümkün olur. Javascript ile hazırlanmış Web sayfaları ancak JavaScript desteği veren Web tarayıcıları ile izlenebilir. En popüler tarayıcılardan olan Netscape Navigator ve Internet Explorer tarafından desteklenmektedir. Javascript ile hazırlanan Web sayfalarından tam randıman alabilmek için iki tarayıcının da en son sürümlerini kullanmanızı (en azından 4.x ve üstü) öneririz.
Detaylı bilgi ;
1.JavaScript Nedir?
HTML dili her ne kadar metinler üzerinde neredeyse her türlü düzenlemeyi yapmamıza izin verse de, zayıf kaldığı bazı yönler vardır; mesela HTML bize web sayfalarına bir 'iş' yaptırtma, onları değişik olaylara veya durumlara duyarlı hale getirme imkanı sunmaz. Bu eksikliği Netscape firmasının yetkilileri de farketmiş olacak ki Aralık 1995 tarihinde, C dilinin browser'lara uyarlanmış hali diyebileceğimiz JavaScript'i piyasaya sürdüler.
Tam bu dönemde Sun Microsystems Pascal ve Delphi dillerinden esinlerek oluşturduğu 'Java' isimli bir programlama dilini piyasaya sürmek üzereydi. Netscape'in piyasaya sürdüğü script dilinin ismini JavaScript koyması, o dönemde çok telaffuz edilen 'Java' kelimesinin popüleritesinden yararlanmak adına uyguladığı bir pazarlama stratejisiydi, yani pek çok kişinin düşündüğünün aksine Java ile JavaScript arasında isim benzerliği hariç hiçbir benzerlik yoktur.
Bir süre sonra Microsoft da olaya el attı ve JavaScript'le neredeyse aynı olan JScript'i piyasaya sürdü.Fakat sonra bu diller farklı yönlere doğru geliştiler. Şu anda Netscape tarayıcısı JScript'i tanımıyor, fakat Explorer her iki script'i de tanıyor. Yine de iki tarayıcının JavaScript'i yorumlamaları bazen farklılık gösterebiliyor.
'JavaScript nedir?' sorusuna dönersek :
Netscape'in piyasaya sürdüğü script dilidir.
JavaScript HTML kodlarının içine yazılır. Yazılan kodun bir JavaScript kodu olduğu browser'a **********...</script> etiketleri ile bildirilir.
Tıpkı HTML gibi, JavaScript kodları da yorumlanmak için bir browser'a ihtiyaç duyarlar, yani sonuçta '.exe' uzantılı, bağımsız olarak çalışabilecek bir dosya oluşmaz.
JavaScript bir olay halinde işler; olay JavaScript açısından ziyaretçinin bir yere tıklaması, bir tuşa basması vs. olabilir.
JavaScript ile neler yapılabilir?
JavaScript ile bir web sayfasına yukarıda tanımladığımız biçimde herhangi bir olayın gerçekleşmesi halinde herhangi bir iş yaptırabiliriz. Örnegin sayfada bir butona basıldığında sayfadaki bir 'text' kutusunun içine 'Click!' yazdırabiliriz. Burada olay ziyaretçinin butona tıklaması, iş ise text kutusuna 'Click!' yazılmasıdır... Javascript dilinde neredeyse olası her olay tanımlanmıştır, dolayısıyla yapılabilecek şeyler çok geniştir.
Javascript'i öğrenmeye geçmeden önce bir öneri: Sadece gerektiği zaman Javasript'i kullanın. Gereksiz kullanımlar sayfanın boyutunu şişireceği gibi, sayfanızın estetiğini ve kullanışlılığını de olumsuz yönde etkileyecektir.
2.JAVASCRIPT'IN GENEL YAPISI VE İLK JAVASCRIPT
JavaScript kodları **********...</script> etiketleri arasına yazılır. Script etiketinin işimize yarayacak iki parametresi vardır, bunlar:
src: Harici bir JavaScript belgesini '.js' uzantılı kaydedip bu parametre ile çağırabiliriz.
language: Bu parametre 'Javascript', 'JavaScript1.1' veya 'JavaScript1.2' değerlerini alır.En son sürümü kullanmak her zaman daha güvenlidir.
JavaScript kodlarının yapısı ise böyledir:
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]**********
<!--
...
-->
</script>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Buradaki '<!--' ve '-->' ifadeleri yazılan kodları eski sürüm browser'lardan gizler
İLK JAVASCRİPT
Aşağıdaki kod sadece yukarıda verilen şablonun HTML belgesinin içine nasıl yerleştirildiğini görmeniz ve JavaScript hakkında bir fikir sahibi olmanız için verilmiştir. Dolayısıyla kodu satır satır anlamaya çalışmayın. İşte 'Merhaba Dünya!'
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Untitled</title>
<**** content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
**********
function merhaba()
{
alert('Merhaba Dünya!')
}
</script>
</head>
<body>
<form>
<input type="Button" value="Tıklayın!" onClick="merhaba()">
</form>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
3.DEĞİŞKENLER
Değişkenlere geçmeden önce JavaScript'deki değerleri tanıyalım:
Sayı Değerleri: Sayı değerleri tamsayı (integer literal) ve kesirli sayı (floating-point literal) olmak üzere ikiye ayrılır. Örneğin: 12; 567; 55,23423...
Boolean ifadeleri: Boolean mantığı iki sonuç verir: Doğru veya yanlış. Doğru '1' veya 'true', yanlış ise '0' veya 'false' ile ifade edilir.
String değerleri:Çift tırnak veya tek tırnak içinde gösterilen string değerleri, JavaScript açısından 'metin' olarak değerlendirilir.Örneğin: "Merhaba!"; "İstanbul 34"; "342,345"...
DEĞİŞKENLER
Değişken kendisine ketfi bir değer atayıp bu değeri programın herhangi bir yerinde değiştirmemize olanak veren bir unsurdur. Değişkenleri browser'a 'var' anahtar-kelimesiyle bildiririz, ve onları -ilk karakterlerinin rakam veya '_' olmaması, ve tabi türkçe karakter içermemeleri şartıyla- istediğimiz gibi adlandırabiliriz.
var degisken, var sonuc, var sayac...
Değişkenlere değer atama (initialization) ise aşağıdaki gibi olur:
değişken= "kitap", sonuc= 34, sayac= true
Veya iki işi aynı anda da yapabiliriz:
var degisken="kitap", var sonuc= 34, var sayac= true
Bu genel tanımdan sonra JavaScript'in değişken türlerine bir göz atalım:
Sayı Değiskenler: Ondalık veya tamsayı değerini alırlar, bu değişkenlerle aritmetik işlemler yapılabilir.Örneğin: 'var cevap= 44,56'
Boolean Değişkenler: '1'; 'true' veya '0'; 'false' değerlerini alan değişkenlerdir: 'var dogruMu: true'
String Değişkenler: String değeri alırlar, '+' operatörüyle iki string birbirine bağlanabilir, aşağıda 'hepsi' değişkeninin değeri "Javascript" string'i olacaktır:
'var bas= "Java", son="Script"
var hepsi= bas+son'
Fonksiyon değişkenleri: Bu değişkenleri tanımlamak için 'function' ifadesini kullanırız. Fonksiyonlar JavaScript'e bir iş yaptırmamızı sağlarlar.Fonksiyonları ileride başlıbaşına bir konu olarak göreceğiz, şimdilik fazla üzerinde durmayalım.
Dizi-değişkenler (Array): Array'ler ile farklı değerleri bir dizinin elemanı olarak aynı ad altında toplayabilir, gerektiğinde kullanmak üzere çağırabiliriz:
var dizi = new Array(eleman1,eleman2,eleman3,eleman4) //dizi isimli bir array'e 4 farklı değer verdik
var yeni = dizi[2] //yeni isimli değişkene dizinin 3. elemanını atadık.
Yukarıda bir yazım hatası yoktur, JavaScript saymaya sıfırdan başladığı için 'dizi[2]' ifadesi dizinin 3. elemanı olan "eleman3" e eşittir.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>değişkenler</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="JavaScript1.2">
var tarih=1974
var araba="Jaguar" //değişkenleri bildirip değerlerini atayalım
********.write(tarih+" "+araba+"<br>")
tarih=1975 //tarih değişkeninin değerini değiştirelim
********.write(tarih+" "+araba)
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
4.OPERATÖRLER
Assignment(atama) operatörü
JavaScript'in(ve bütün programlama dillerinin) temel operatörü olan atama operatörü '=' işaretiyle ifade edilir, işaretin sağındaki değeri(veya değişkenin değerini), solundaki değişkene atar.
'var sayi = 34 ; var sayi2 = sayi'
Aritmetik operatörler
'+' :Sayı değişkenleri toplamaya, string değişkenleri birbirine eklemeye yarar.
'-' : Sayı değişkenlerde çıkartma işlemini yapar.
'*' : Sayı değişkenlerde çarpma işlemini yapar.
'/ ' : Bölme işlemi yapar.
'%' : Modülüs işlemi. '10%3' ifadesinin matematikteki karşılığı '10 mod 3' ifadesidir ve sonuç 1 çıkar.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Aritmetik operatörler</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="JavaScript1.2">
<!--
var toplama=11+2 //değişkenlere işlemlerin sonuçlarını atayalım
var cıkarma=10-4
var carpma=(7,32)*4
var bolme=(32,4)/(1,22)
var modul= 23%3
var hepsi=toplama+cıkarma+bolme+carpma+modul //bütün değerleri toplayalım
********.write(toplama,"<br>",cıkarma,"<br>",carpma,"<br>",bolme,"<br>",modul,"<br>")
********.write(hepsi) / /bulduğumuz değerleri yazdıralım
-->
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Aritmetik operatörlerden bahsetmişken JavaScript'in bazı kısaltmalarından bahsedelim
'a = a + b' ifadesini kısaca 'a+=b' şeklinde yazabiliriz.
Aynı kısaltma diğer işlemler için de geçerlidir(a-=b; a/=b, a*=b)
a = a + 1 ifadesini a++; a = a - 1 ifadesini ise kısaca a-- şeklinde yazabiliriz.
Karşılaştırma operatörleri
Karşılaştırma operatörleri, temsil ettikleri karşılaştırmanın sonucu doğruysa true, yanlışsa false değerini verirler.
'==' : Eşit operatörü, eğer iki tarafın değeri eşitse true sonucunu verir.
'!=' : Eşit değil operatörü, eğer iki tarafın değeri eşit değilse true sonucunu verir.
'< ' : Küçüktür operatörü, sol taraf küçükse true sonucunu verir.
'> ' : Büyüktür operatörü, sol taraf büyükse true sonucunu verir.
'<=' : Küçük eşittir operatörü, sol taraf küçükse veya iki taraf eşitse true sonucunu verir.
'>=' : Büyük eşittir operatörü, sol taraf büyükse veya iki taraf eşitse true sonucunu verir.
Bu ve diğer operatörler için verilen örnekleri yeni bir HTML belgesinin body bölümüne yazın
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<pre>
<script language="javaScript1.2">
<!--
var a=10, b=4;
********.writeln("a==b :",(a==b))
********.writeln("a!=b :", (a!=b))
********.writeln("a<b :", (a<b))
********.writeln("a>b :", (a>b))
********.writeln("a<=b :", (a<=b))
********.writeln("a>=b :", (a>=b))
-->
</script>
</pre>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Şart operatörü
Bu operatörü bir örnek üzerinde öğrenelim:
(a==b)? "Iki degisken esittir!":"Iki degisken esit degildir!"
Bu operatörün kullanımında parantez içerisine bir şart yazılır, ki burada o şart x ve y değişkenlerinin eşit olmasıdır, eğer bu şart doğruysa soru işaretinden hemen sonraki işlem, aksi takdirde ':' işaretinden sonraki işlem yapılır.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<script language="javaScript1.2">
<!--
var a=10, b=4;
varsonuc=(a!=b)?"İki değişken eşit değil!":"İki değişken eşit!"
********.write(sonuc)
-->
</script>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Mantıksal operatörler
Eğer karşılaştırmayı birden fazla durumu dikkate alarak yapacaksak mantıksal operatörleri kullanırız.
'&&' : 'And(ve)' operatörü: Koşulların hepsi doğru ise true değerini verir.
'|| ' : 'Or(veya)' operatörü: Koşulların en az birinin doğru olması halinde true değerini verir.
'! ' : 'Not' operatörü: Koşulların hepsinin yanlış olması durumunda true değerini verir.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<pre>
<script language="javaScript1.2">
<!--
var a=10, b=4, c=4
********.writeln("")
********.writeln("a!=b && b==c : " , "a b'den farklı ve b c'ye eşit mi? ",(a!=b && b==c))
********.writeln("a==b || b==c : " ,"a b'ye veya c'ye eşit mi? ",(a==b || b==c))
-->
</script>
</pre>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
5.BİLGİ GİRİŞ ÇIKIŞI
JavaScript ile fonksiyon yazarken bazı noktalarda ziyaretçiden bir bilgi almanız veya ona bir şey onaylatmanız gerekebilir. Tabi bazı verilerin de ekrana yazılması gerekir. Şimdi bunu JavaScript'le nasıl yapabileceğimizi görelim.
Bilgi girişi
prompt()
Ziyaretçiden ismi adresi gibi bir 'text' almak promt fonksiyonuyla mümkündür.
prompt("Sorulacak soru","Varsayılan cevap")
Aşağıdaki örneği body bölümüne **********...</script> etiketleri arasına yazın.
prompt("Adınız nedir?","isim")
confirm()
Ziyaretçinin onayını almak için kullanılır. Ziyaretçi açılan kutuda 'yes' e tıklarsa true, 'no' ya tıklarsa false değerini verir.
confirm("Sorulacak soru")
confirm("Emin misiniz?")
Bu iki fonksiyonun içinde değişken de kullanabiliriz. Örneğin isim diye bir değişkenimiz olsun, bu değişkenin değerini "Ahmet" alalım. Aşağıdaki kod "Adın Ahmet mi?" diye soracak:
confirm("Adın "+isim+" mi?")
Bilgi Çıkışı
write() fonksiyonu
Write fonksiyonu bize istediğimiz bir yere yazı yazma olanağı sağlar. Bu yer browser penceresi olabileceği gibi, yeni bir pencere veya bir textarea da olabilir.Biz şimdilik bunlardan ilki üzerinde duracağız.
********.write("Yazılacak metin veya"+değişken)
Bu fonksiyon yerine ********.writeln() fonksiyonunu kullanabilirsiniz, bu fonksiyon yazdıklarınız bitince satırbaşı yapar.
alert()
Bu fonksiyonun içine yazdığımız metin, fonksiyon çağırıldığında ekranda beliren bir kutu içerisinde görüntülenir. Bu kutu üzerindeki 'ok' düğmesine basmılmadan kapanmaz.
alert("Yazılacak metin")
Şimdi bütün bunları bir örnek üzerinde görelim:
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Bilgi giriş çıkışı</title>
<**** content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="JavaScript1.2">
var isim=prompt("Adınız nedir?","isim")
var cevap=confirm("Adınız ekrana yazılsın mı?")
var yaz=(cevap==true)? isim : "Peki, yazılmasın! "
********.write(yaz)
cevap=confirm("Adınız bir alert kutusuna yazılsın mı?")
yaz=(cevap==true)? isim : "Peki, yazılmasın! "
alert(yaz)
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
6.KOŞUL İFADELERİ
JavaScript ile program yazarken program akışının her zaman yukarıdan aşağıya olmasını istemeyebiliriz. Bu durumda koşul ifadeleri devreye girer. Bu ifadelerle browser'a programın bir noktasında bir koşul belirtip, bu koşul doğruysa bir iş yapmasını, doğru değilse başka bir iş yapmasını söyleyebiliriz. Ya da daha karmaşık durumlar tanımlayabiliriz. Bütün bu işleri koşul ifadeleri 'if' ve 'else' 'i yerinde kullanarak başarabiliriz.
If ifadesi
If ifadesi, eğer verilen koşul doğruysa true, değilse false değerini verir. Aşağıda if'in kullanımını görüyorsunuz.
if (koşul)
{
Koşul sağlanıyorsa yapılacaklar
}
İf...else
If ifadesiyle bir veye birkaç koşul belirttiğimizde, oluşabilecek bir durum da bu koşul veya koşullardan hiçbirinin gerçeklenmemesidir. İşte bu durumu else ifadesiyle belirtiriz. Yani if ile browser'a 'verdiğim koşul doğruysa şunu yap', else ifadesiyle 'aksi takdirde şunu yap' deriz.
If ve else ifadelerinin kullanımları aşağıdaki gibidir.
if (koşul)
{
koşul doğruysa yapılacak iş
}
else
{
Bunun dışındaki her durumda yapılacak iş
}
Eğer birden fazla koşul belirtmek istersek ilk if'den sora else if ifadesini kullabilir ve bu koşullarda yapılacak işleri belirleyebiliriz. Bunun anlamı şudur: 'Eğer(if) a şartı gerçekleniyorsa şunu yap, bunun dışında(else if) eğer b şartı gerçekleniyorsa şunu yap,bunların dışındaki durunmlarda(else) şunu yap!' .Bu durumda else ifadesi verilen koşulların hiçbirinin gerçeklenmediği durumları kapsar. Bu karışık ifadeyi ve koşul yapısını aşağıdaki örneğe bakarak anlayabilirsiniz...
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Untitled</title>
<**** content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="javaScript1.2">
var cevap1=prompt("54 + 21 = ?","cevap?") //İlk soruya verilecek cevabı cevap1'e atıyoruz
var cevap2=prompt("20 / 4= ?","cevap?") //2. soruya verilecek cevabı cevap2'e atıyoruz
if(cevap1==75 && cevap2==5) //Eğer 1. cevap 75'e, 2.cevap 5'e eşit ise...
alert("Cevapların ikisi de doğru") //Bu mesajı yaz
else if(cevap1!=75 && cevap2!=5) //Eğer sadece cevap1 doğruysa...
alert("Cevapların ikisi de yanlış") //Bunu yaz
else //Yukarıdaki iki durumun dışındaki bir durumda,
//Yani sadece bir cevabın doğru olması halinde
alert("Cevapların sadece biri doğru") //Bunu yaz!
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Bu örnekte, tanımda kullandığımız küme parantezlerini '{}' kullanmadık. Bunun nedeni koşul doğruysa yapılacak tek bir iş vermemizdir. Bu durumda JavaScript bu işin hemen üstündeki if'e ait olduğunu anlar. Fakat koşul doğruysa birden fazla iş yaptıracaksak bunları küme parantezleri içinde vermemiz gerekir.
7.DÖNGÜLER
Döngüler, kendilerine verilen koşul gerçeklendiği sürece aynı işi yapmaya devam eden fonksiyonlardır. Bu iş ,örneğin 1'den 100'e kadar saymak olabilir. Bu durumda bir sayaç oluşturulur. Bu sayacın değeri 1'den başlatılır, sayaca 100'e kadar sayması söylenir, ve her adımda sayacın değeri ekrana yazdırılır. Böylece 2 satırda 100 satırlık iş yaptırmış oluruz. JavaScript bize for, while, do...while ve switch döngülerini kullanma imkanı verir.
For döngüsü
For döngüsünün yazılışı aşağıdaki gibidir:
for (sayac = 1 ; sayac < 101 ; sayac++)
{
Bu iş 100 kez yapılacak!
)
Yukarıdaki döngüyle browser'a sayac değişkeninin değerini birer birer(sayac++),1'den(sayac= 1) 100'ekadar(sayac<101) arttırmasını ve her seferinde küme parantezi içinde belirtilen işi yapmasını söyledik. Burada 1 ve 101 yerine istenilen değer gelebilir,ayrıca artış değerini de istediğiniz gibi değiştirebilirsiniz( artışı n yapmak için sayac+=n ifadesini kullanın).Sayac değişkeninin adı da istediğiniz herhangi bir değişken adı olabilir. Yine if ifadesinde olduğu gibi döngüye yapacak tek bir iş verirsek küme parantezi kullanmaya gerek yok.[/FONT]
JavaScript Nedir?
JavaScript Netscape firması tarafından geliştirilmiş olan bir script dilidir. Script dilleri Web sayfası hazırlayanlara etkileşimli ve dinamik sayfalar hazırlama imkanı vermektedir. JAVA dilinin özelliklerine ve komut yapısına çok benzeyen JavaScript aslında JAVA dilinden ayrı olarak hazırlanmıştır.
Javascript yardımı ile HTML kaynak kodları değiştirilebilir, bu sayede dinamik Web sayfaları hazırlamak mümkün olur. Javascript ile hazırlanmış Web sayfaları ancak JavaScript desteği veren Web tarayıcıları ile izlenebilir. En popüler tarayıcılardan olan Netscape Navigator ve Internet Explorer tarafından desteklenmektedir. Javascript ile hazırlanan Web sayfalarından tam randıman alabilmek için iki tarayıcının da en son sürümlerini kullanmanızı (en azından 4.x ve üstü) öneririz.
Detaylı bilgi ;
1.JavaScript Nedir?
HTML dili her ne kadar metinler üzerinde neredeyse her türlü düzenlemeyi yapmamıza izin verse de, zayıf kaldığı bazı yönler vardır; mesela HTML bize web sayfalarına bir 'iş' yaptırtma, onları değişik olaylara veya durumlara duyarlı hale getirme imkanı sunmaz. Bu eksikliği Netscape firmasının yetkilileri de farketmiş olacak ki Aralık 1995 tarihinde, C dilinin browser'lara uyarlanmış hali diyebileceğimiz JavaScript'i piyasaya sürdüler.
Tam bu dönemde Sun Microsystems Pascal ve Delphi dillerinden esinlerek oluşturduğu 'Java' isimli bir programlama dilini piyasaya sürmek üzereydi. Netscape'in piyasaya sürdüğü script dilinin ismini JavaScript koyması, o dönemde çok telaffuz edilen 'Java' kelimesinin popüleritesinden yararlanmak adına uyguladığı bir pazarlama stratejisiydi, yani pek çok kişinin düşündüğünün aksine Java ile JavaScript arasında isim benzerliği hariç hiçbir benzerlik yoktur.
Bir süre sonra Microsoft da olaya el attı ve JavaScript'le neredeyse aynı olan JScript'i piyasaya sürdü.Fakat sonra bu diller farklı yönlere doğru geliştiler. Şu anda Netscape tarayıcısı JScript'i tanımıyor, fakat Explorer her iki script'i de tanıyor. Yine de iki tarayıcının JavaScript'i yorumlamaları bazen farklılık gösterebiliyor.
'JavaScript nedir?' sorusuna dönersek :
Netscape'in piyasaya sürdüğü script dilidir.
JavaScript HTML kodlarının içine yazılır. Yazılan kodun bir JavaScript kodu olduğu browser'a **********...</script> etiketleri ile bildirilir.
Tıpkı HTML gibi, JavaScript kodları da yorumlanmak için bir browser'a ihtiyaç duyarlar, yani sonuçta '.exe' uzantılı, bağımsız olarak çalışabilecek bir dosya oluşmaz.
JavaScript bir olay halinde işler; olay JavaScript açısından ziyaretçinin bir yere tıklaması, bir tuşa basması vs. olabilir.
JavaScript ile neler yapılabilir?
JavaScript ile bir web sayfasına yukarıda tanımladığımız biçimde herhangi bir olayın gerçekleşmesi halinde herhangi bir iş yaptırabiliriz. Örnegin sayfada bir butona basıldığında sayfadaki bir 'text' kutusunun içine 'Click!' yazdırabiliriz. Burada olay ziyaretçinin butona tıklaması, iş ise text kutusuna 'Click!' yazılmasıdır... Javascript dilinde neredeyse olası her olay tanımlanmıştır, dolayısıyla yapılabilecek şeyler çok geniştir.
Javascript'i öğrenmeye geçmeden önce bir öneri: Sadece gerektiği zaman Javasript'i kullanın. Gereksiz kullanımlar sayfanın boyutunu şişireceği gibi, sayfanızın estetiğini ve kullanışlılığını de olumsuz yönde etkileyecektir.
2.JAVASCRIPT'IN GENEL YAPISI VE İLK JAVASCRIPT
JavaScript kodları **********...</script> etiketleri arasına yazılır. Script etiketinin işimize yarayacak iki parametresi vardır, bunlar:
src: Harici bir JavaScript belgesini '.js' uzantılı kaydedip bu parametre ile çağırabiliriz.
language: Bu parametre 'Javascript', 'JavaScript1.1' veya 'JavaScript1.2' değerlerini alır.En son sürümü kullanmak her zaman daha güvenlidir.
JavaScript kodlarının yapısı ise böyledir:
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]**********
<!--
...
-->
</script>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Buradaki '<!--' ve '-->' ifadeleri yazılan kodları eski sürüm browser'lardan gizler
İLK JAVASCRİPT
Aşağıdaki kod sadece yukarıda verilen şablonun HTML belgesinin içine nasıl yerleştirildiğini görmeniz ve JavaScript hakkında bir fikir sahibi olmanız için verilmiştir. Dolayısıyla kodu satır satır anlamaya çalışmayın. İşte 'Merhaba Dünya!'
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Untitled</title>
<**** content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
**********
function merhaba()
{
alert('Merhaba Dünya!')
}
</script>
</head>
<body>
<form>
<input type="Button" value="Tıklayın!" onClick="merhaba()">
</form>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
3.DEĞİŞKENLER
Değişkenlere geçmeden önce JavaScript'deki değerleri tanıyalım:
Sayı Değerleri: Sayı değerleri tamsayı (integer literal) ve kesirli sayı (floating-point literal) olmak üzere ikiye ayrılır. Örneğin: 12; 567; 55,23423...
Boolean ifadeleri: Boolean mantığı iki sonuç verir: Doğru veya yanlış. Doğru '1' veya 'true', yanlış ise '0' veya 'false' ile ifade edilir.
String değerleri:Çift tırnak veya tek tırnak içinde gösterilen string değerleri, JavaScript açısından 'metin' olarak değerlendirilir.Örneğin: "Merhaba!"; "İstanbul 34"; "342,345"...
DEĞİŞKENLER
Değişken kendisine ketfi bir değer atayıp bu değeri programın herhangi bir yerinde değiştirmemize olanak veren bir unsurdur. Değişkenleri browser'a 'var' anahtar-kelimesiyle bildiririz, ve onları -ilk karakterlerinin rakam veya '_' olmaması, ve tabi türkçe karakter içermemeleri şartıyla- istediğimiz gibi adlandırabiliriz.
var degisken, var sonuc, var sayac...
Değişkenlere değer atama (initialization) ise aşağıdaki gibi olur:
değişken= "kitap", sonuc= 34, sayac= true
Veya iki işi aynı anda da yapabiliriz:
var degisken="kitap", var sonuc= 34, var sayac= true
Bu genel tanımdan sonra JavaScript'in değişken türlerine bir göz atalım:
Sayı Değiskenler: Ondalık veya tamsayı değerini alırlar, bu değişkenlerle aritmetik işlemler yapılabilir.Örneğin: 'var cevap= 44,56'
Boolean Değişkenler: '1'; 'true' veya '0'; 'false' değerlerini alan değişkenlerdir: 'var dogruMu: true'
String Değişkenler: String değeri alırlar, '+' operatörüyle iki string birbirine bağlanabilir, aşağıda 'hepsi' değişkeninin değeri "Javascript" string'i olacaktır:
'var bas= "Java", son="Script"
var hepsi= bas+son'
Fonksiyon değişkenleri: Bu değişkenleri tanımlamak için 'function' ifadesini kullanırız. Fonksiyonlar JavaScript'e bir iş yaptırmamızı sağlarlar.Fonksiyonları ileride başlıbaşına bir konu olarak göreceğiz, şimdilik fazla üzerinde durmayalım.
Dizi-değişkenler (Array): Array'ler ile farklı değerleri bir dizinin elemanı olarak aynı ad altında toplayabilir, gerektiğinde kullanmak üzere çağırabiliriz:
var dizi = new Array(eleman1,eleman2,eleman3,eleman4) //dizi isimli bir array'e 4 farklı değer verdik
var yeni = dizi[2] //yeni isimli değişkene dizinin 3. elemanını atadık.
Yukarıda bir yazım hatası yoktur, JavaScript saymaya sıfırdan başladığı için 'dizi[2]' ifadesi dizinin 3. elemanı olan "eleman3" e eşittir.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>değişkenler</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="JavaScript1.2">
var tarih=1974
var araba="Jaguar" //değişkenleri bildirip değerlerini atayalım
********.write(tarih+" "+araba+"<br>")
tarih=1975 //tarih değişkeninin değerini değiştirelim
********.write(tarih+" "+araba)
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
4.OPERATÖRLER
Assignment(atama) operatörü
JavaScript'in(ve bütün programlama dillerinin) temel operatörü olan atama operatörü '=' işaretiyle ifade edilir, işaretin sağındaki değeri(veya değişkenin değerini), solundaki değişkene atar.
'var sayi = 34 ; var sayi2 = sayi'
Aritmetik operatörler
'+' :Sayı değişkenleri toplamaya, string değişkenleri birbirine eklemeye yarar.
'-' : Sayı değişkenlerde çıkartma işlemini yapar.
'*' : Sayı değişkenlerde çarpma işlemini yapar.
'/ ' : Bölme işlemi yapar.
'%' : Modülüs işlemi. '10%3' ifadesinin matematikteki karşılığı '10 mod 3' ifadesidir ve sonuç 1 çıkar.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Aritmetik operatörler</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="JavaScript1.2">
<!--
var toplama=11+2 //değişkenlere işlemlerin sonuçlarını atayalım
var cıkarma=10-4
var carpma=(7,32)*4
var bolme=(32,4)/(1,22)
var modul= 23%3
var hepsi=toplama+cıkarma+bolme+carpma+modul //bütün değerleri toplayalım
********.write(toplama,"<br>",cıkarma,"<br>",carpma,"<br>",bolme,"<br>",modul,"<br>")
********.write(hepsi) / /bulduğumuz değerleri yazdıralım
-->
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Aritmetik operatörlerden bahsetmişken JavaScript'in bazı kısaltmalarından bahsedelim
'a = a + b' ifadesini kısaca 'a+=b' şeklinde yazabiliriz.
Aynı kısaltma diğer işlemler için de geçerlidir(a-=b; a/=b, a*=b)
a = a + 1 ifadesini a++; a = a - 1 ifadesini ise kısaca a-- şeklinde yazabiliriz.
Karşılaştırma operatörleri
Karşılaştırma operatörleri, temsil ettikleri karşılaştırmanın sonucu doğruysa true, yanlışsa false değerini verirler.
'==' : Eşit operatörü, eğer iki tarafın değeri eşitse true sonucunu verir.
'!=' : Eşit değil operatörü, eğer iki tarafın değeri eşit değilse true sonucunu verir.
'< ' : Küçüktür operatörü, sol taraf küçükse true sonucunu verir.
'> ' : Büyüktür operatörü, sol taraf büyükse true sonucunu verir.
'<=' : Küçük eşittir operatörü, sol taraf küçükse veya iki taraf eşitse true sonucunu verir.
'>=' : Büyük eşittir operatörü, sol taraf büyükse veya iki taraf eşitse true sonucunu verir.
Bu ve diğer operatörler için verilen örnekleri yeni bir HTML belgesinin body bölümüne yazın
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<pre>
<script language="javaScript1.2">
<!--
var a=10, b=4;
********.writeln("a==b :",(a==b))
********.writeln("a!=b :", (a!=b))
********.writeln("a<b :", (a<b))
********.writeln("a>b :", (a>b))
********.writeln("a<=b :", (a<=b))
********.writeln("a>=b :", (a>=b))
-->
</script>
</pre>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Şart operatörü
Bu operatörü bir örnek üzerinde öğrenelim:
(a==b)? "Iki degisken esittir!":"Iki degisken esit degildir!"
Bu operatörün kullanımında parantez içerisine bir şart yazılır, ki burada o şart x ve y değişkenlerinin eşit olmasıdır, eğer bu şart doğruysa soru işaretinden hemen sonraki işlem, aksi takdirde ':' işaretinden sonraki işlem yapılır.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<script language="javaScript1.2">
<!--
var a=10, b=4;
varsonuc=(a!=b)?"İki değişken eşit değil!":"İki değişken eşit!"
********.write(sonuc)
-->
</script>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Mantıksal operatörler
Eğer karşılaştırmayı birden fazla durumu dikkate alarak yapacaksak mantıksal operatörleri kullanırız.
'&&' : 'And(ve)' operatörü: Koşulların hepsi doğru ise true değerini verir.
'|| ' : 'Or(veya)' operatörü: Koşulların en az birinin doğru olması halinde true değerini verir.
'! ' : 'Not' operatörü: Koşulların hepsinin yanlış olması durumunda true değerini verir.
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<pre>
<script language="javaScript1.2">
<!--
var a=10, b=4, c=4
********.writeln("")
********.writeln("a!=b && b==c : " , "a b'den farklı ve b c'ye eşit mi? ",(a!=b && b==c))
********.writeln("a==b || b==c : " ,"a b'ye veya c'ye eşit mi? ",(a==b || b==c))
-->
</script>
</pre>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
5.BİLGİ GİRİŞ ÇIKIŞI
JavaScript ile fonksiyon yazarken bazı noktalarda ziyaretçiden bir bilgi almanız veya ona bir şey onaylatmanız gerekebilir. Tabi bazı verilerin de ekrana yazılması gerekir. Şimdi bunu JavaScript'le nasıl yapabileceğimizi görelim.
Bilgi girişi
prompt()
Ziyaretçiden ismi adresi gibi bir 'text' almak promt fonksiyonuyla mümkündür.
prompt("Sorulacak soru","Varsayılan cevap")
Aşağıdaki örneği body bölümüne **********...</script> etiketleri arasına yazın.
prompt("Adınız nedir?","isim")
confirm()
Ziyaretçinin onayını almak için kullanılır. Ziyaretçi açılan kutuda 'yes' e tıklarsa true, 'no' ya tıklarsa false değerini verir.
confirm("Sorulacak soru")
confirm("Emin misiniz?")
Bu iki fonksiyonun içinde değişken de kullanabiliriz. Örneğin isim diye bir değişkenimiz olsun, bu değişkenin değerini "Ahmet" alalım. Aşağıdaki kod "Adın Ahmet mi?" diye soracak:
confirm("Adın "+isim+" mi?")
Bilgi Çıkışı
write() fonksiyonu
Write fonksiyonu bize istediğimiz bir yere yazı yazma olanağı sağlar. Bu yer browser penceresi olabileceği gibi, yeni bir pencere veya bir textarea da olabilir.Biz şimdilik bunlardan ilki üzerinde duracağız.
********.write("Yazılacak metin veya"+değişken)
Bu fonksiyon yerine ********.writeln() fonksiyonunu kullanabilirsiniz, bu fonksiyon yazdıklarınız bitince satırbaşı yapar.
alert()
Bu fonksiyonun içine yazdığımız metin, fonksiyon çağırıldığında ekranda beliren bir kutu içerisinde görüntülenir. Bu kutu üzerindeki 'ok' düğmesine basmılmadan kapanmaz.
alert("Yazılacak metin")
Şimdi bütün bunları bir örnek üzerinde görelim:
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Bilgi giriş çıkışı</title>
<**** content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="JavaScript1.2">
var isim=prompt("Adınız nedir?","isim")
var cevap=confirm("Adınız ekrana yazılsın mı?")
var yaz=(cevap==true)? isim : "Peki, yazılmasın! "
********.write(yaz)
cevap=confirm("Adınız bir alert kutusuna yazılsın mı?")
yaz=(cevap==true)? isim : "Peki, yazılmasın! "
alert(yaz)
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
6.KOŞUL İFADELERİ
JavaScript ile program yazarken program akışının her zaman yukarıdan aşağıya olmasını istemeyebiliriz. Bu durumda koşul ifadeleri devreye girer. Bu ifadelerle browser'a programın bir noktasında bir koşul belirtip, bu koşul doğruysa bir iş yapmasını, doğru değilse başka bir iş yapmasını söyleyebiliriz. Ya da daha karmaşık durumlar tanımlayabiliriz. Bütün bu işleri koşul ifadeleri 'if' ve 'else' 'i yerinde kullanarak başarabiliriz.
If ifadesi
If ifadesi, eğer verilen koşul doğruysa true, değilse false değerini verir. Aşağıda if'in kullanımını görüyorsunuz.
if (koşul)
{
Koşul sağlanıyorsa yapılacaklar
}
İf...else
If ifadesiyle bir veye birkaç koşul belirttiğimizde, oluşabilecek bir durum da bu koşul veya koşullardan hiçbirinin gerçeklenmemesidir. İşte bu durumu else ifadesiyle belirtiriz. Yani if ile browser'a 'verdiğim koşul doğruysa şunu yap', else ifadesiyle 'aksi takdirde şunu yap' deriz.
If ve else ifadelerinin kullanımları aşağıdaki gibidir.
if (koşul)
{
koşul doğruysa yapılacak iş
}
else
{
Bunun dışındaki her durumda yapılacak iş
}
Eğer birden fazla koşul belirtmek istersek ilk if'den sora else if ifadesini kullabilir ve bu koşullarda yapılacak işleri belirleyebiliriz. Bunun anlamı şudur: 'Eğer(if) a şartı gerçekleniyorsa şunu yap, bunun dışında(else if) eğer b şartı gerçekleniyorsa şunu yap,bunların dışındaki durunmlarda(else) şunu yap!' .Bu durumda else ifadesi verilen koşulların hiçbirinin gerçeklenmediği durumları kapsar. Bu karışık ifadeyi ve koşul yapısını aşağıdaki örneğe bakarak anlayabilirsiniz...
Kod:
[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]<html>
<head>
<title>Untitled</title>
<**** content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<script language="javaScript1.2">
var cevap1=prompt("54 + 21 = ?","cevap?") //İlk soruya verilecek cevabı cevap1'e atıyoruz
var cevap2=prompt("20 / 4= ?","cevap?") //2. soruya verilecek cevabı cevap2'e atıyoruz
if(cevap1==75 && cevap2==5) //Eğer 1. cevap 75'e, 2.cevap 5'e eşit ise...
alert("Cevapların ikisi de doğru") //Bu mesajı yaz
else if(cevap1!=75 && cevap2!=5) //Eğer sadece cevap1 doğruysa...
alert("Cevapların ikisi de yanlış") //Bunu yaz
else //Yukarıdaki iki durumun dışındaki bir durumda,
//Yani sadece bir cevabın doğru olması halinde
alert("Cevapların sadece biri doğru") //Bunu yaz!
</script>
</body>
</html>[/FONT]
[font=open_sansregular, Tahoma, Verdana, Arial, sans-serif]
Bu örnekte, tanımda kullandığımız küme parantezlerini '{}' kullanmadık. Bunun nedeni koşul doğruysa yapılacak tek bir iş vermemizdir. Bu durumda JavaScript bu işin hemen üstündeki if'e ait olduğunu anlar. Fakat koşul doğruysa birden fazla iş yaptıracaksak bunları küme parantezleri içinde vermemiz gerekir.
7.DÖNGÜLER
Döngüler, kendilerine verilen koşul gerçeklendiği sürece aynı işi yapmaya devam eden fonksiyonlardır. Bu iş ,örneğin 1'den 100'e kadar saymak olabilir. Bu durumda bir sayaç oluşturulur. Bu sayacın değeri 1'den başlatılır, sayaca 100'e kadar sayması söylenir, ve her adımda sayacın değeri ekrana yazdırılır. Böylece 2 satırda 100 satırlık iş yaptırmış oluruz. JavaScript bize for, while, do...while ve switch döngülerini kullanma imkanı verir.
For döngüsü
For döngüsünün yazılışı aşağıdaki gibidir:
for (sayac = 1 ; sayac < 101 ; sayac++)
{
Bu iş 100 kez yapılacak!
)
Yukarıdaki döngüyle browser'a sayac değişkeninin değerini birer birer(sayac++),1'den(sayac= 1) 100'ekadar(sayac<101) arttırmasını ve her seferinde küme parantezi içinde belirtilen işi yapmasını söyledik. Burada 1 ve 101 yerine istenilen değer gelebilir,ayrıca artış değerini de istediğiniz gibi değiştirebilirsiniz( artışı n yapmak için sayac+=n ifadesini kullanın).Sayac değişkeninin adı da istediğiniz herhangi bir değişken adı olabilir. Yine if ifadesinde olduğu gibi döngüye yapacak tek bir iş verirsek küme parantezi kullanmaya gerek yok.[/FONT]
