Koşul Yapıları
Hiçbir bilgisayar kendine göre yorum yapamaz. Bizim verdiğimiz belli kıstasları göz önünde bulundurarak seçim yapar. Diğer programlama dillerinde olduğu gibi JavaScript’te de koşul yapıları mevcuttur.
if,if-else
Javascript'te çoğu dilde olduğu gibi koşul yapısının kodu if deyimidir. Yani if deyimi koşullu işlem yapma deyimidir. if ve else tek bir karşılaştırma deyimi olup else in kullanımı isteğe bağlıdır. Eğer koşul olumlu ise küme yürütülür ve else den sonraki küme atlanır; olumsuz ise, if den sonraki küme atlanır ve eğer varsa, else den sonraki küme yürütülür.
if deyiminin kullanımı:
if (koşul){ ß küme başlangıcı
...
deyimler;[küme]
...
} ß küme sonu
if-else deyimlerinin kullanımı:
if(koşul){ /* koşul olumlu ise [küme1] */
... /* koşul olumsuz ise [küme2] */
deyimler;[küme1] /* yürütülür. */
}
else{
...
deyimler;[küme2]
...
}
Örnek:
Kod:<br />
<html> <br />
<head><title>ornek4.html</title></head> <br />
<body> <br />
<script> <br />
var parola=2007; <br />
var gir=prompt(“Parola:”,”Parolayı girin?”); <br />
if(gir==parola){ <br />
document.write(“Parola kabul edildi”,”<br>”,”Sayfa Açılıyor...”) <br />
} <br />
else{ <br />
document.write(“Parola yanlış”,”<br>”,”Tekrar deneyin!..”) <br />
} <br />
</script> <br />
</body> <br />
</html> <br />
switch()
Bir değişkenin içeriğine bakarak, programın akışını bir çok seçenekten birine yönlendiren bir karşılaştırma deyimidir. Bu deyim BASIC dilinde ONGOSUB ve Pascal dilinde Case deyimine benzerdir. C dilinde ise karşılığı aynıdır. Bu deyimin genel yazım biçimi;
switch(değişken){
case “sabit1” :
...deyimler;
case “sabit2” :
...deyimler;
...
case “sabitN” :
...deyimler;
}
Kod:<br />
var sec; <br />
sec = prompt ("Çıkmak istiyor musunuz " ,"Evet(E/e);Hayır(H/h)") <br />
switch (sec){ <br />
case "e" : case "E" : <br />
document.write ("Tekrar hoşgeldiniz") <br />
//yapılması istenen işlemler <br />
case "h": case "H" : <br />
document.write ("Bizi tercih ettiğiniz için teşekkürler") <br />
break; <br />
//Çıkılması istendiği için döngüyü kesmek için break komutunu <br />
//kullanıyoruz. İleride break deyimi açıklanacaktır.</div>
<div>
Döngü deyimleri
Bu tip deyimler bir kümenin belli bir koşul altında yinelenmesi için kullanılır. while,do...while ve for olmak üzere üç tip döngü deyimi vardır.Javascript'te diğer programlama dillerinde olduğu gibi istediğiniz işlemi 2 veya daha fazla kez yaptırmak için belli program kodları mevcuttur.
while
Tekrarlama deyimidir. Bir küme ya da deyim while kullanılarak bir çok kez yinelenebilir. Yinelenmesi için koşul sınaması çevrim başında yapılır. Genel yazım biçimi;
while(koşul){
...
döngüdeki deyimler; [küme]
...
}
Koşul olumlu olduğu sürece çevrim yinelenir. İki veya daha çok koşul mantıksal operatörler birleştirilerek verilebilir.Örnek:
Kod:<br />
<html> <br />
<head><title>ornek6.html</title></head> <br />
<body> <br />
<script Language="JavaScript"> <br />
<!-- <br />
var yil=0;var para=1000; <br />
while(para<50000){ <br />
para+=para*0.5; // para=para+para*0.5; <br />
yil++; <br />
} <br />
document.write("1000 TL ",yil," sonra ",para," YTL olur.") <br />
--> <br />
</script> <br />
</body> <br />
</html> <br />
do...while
Bu deyim while dan farkı, koşulun döngü sonunda sınanmasıdır. Yani koşul sınanmadan çevrime girilir ve döngü kümesi en az bir kez yürütülür. Koşul olumsuz ise döngüden sonraki satıra geçilir.Genel yazım biçimi;
do{
...
döngüdeki deyimler;
...
}while(koşul);
Örnek:
Kod:<br />
<html> <br />
<head><title>ornek7.html</title></head> <br />
<body> <br />
<script Language="JavaScript"> <br />
<!-- <br />
do{ <br />
var sayi=prompt("Girilen Sayının Karesi","Bir sayı giriniz"); <br />
document.write("Sayı=",sayi," Karesi=",sayi*sayi,"<br>") <br />
}while(sayi>0); <br />
document.write("Çevrim sona erdi...") <br />
--> <br />
</script> <br />
</body> <br />
</html> <br />
for
Diğer döngü deyimleri gibi bir öbeği bir çok kez tekrarlamakta kullanılır. Koşul sınaması while da olduğu gibi girmeden yapılır. Bu döngü deyimin içinde diğerlerinden farklı olarak başlangıç değeri ve döngü sayacına sahip olmasıdır. Genel yazım biçimi;
for(başlangıç;koşul;artım){
...
döngüdeki deyimler;
...
}
Örnek:
Kod:<br />
<html> <br />
<head><title>ornek8.html</title></head> <br />
<body> <br />
<script language="JavaScript"> <br />
<!-- <br />
for(sayi=0;sayi<=10;){ <br />
sayi++; <br />
document.write( "5 * ",sayi," =",5*sayi,"<br>") <br />
} <br />
--> <br />
</script> <br />
</body> <br />
</html> <br />
break ve continue İfadeleri
Döngü deyimleri içindekiler yürütülürken, çevrimin, koşuldan bağımsız kesin olarak sonlanması gerektiğinde veya döngünün bir sonraki çevrime geçmesi istendiğinde bu deyimler kullanılır.Örnek:
Kod:<br />
<html> <br />
<head><title>ornek</title></head> <br />
<body> <br />
<script> <br />
var x=0;var y=1;var z=6; <br />
do{ <br />
y++; <br />
x+=y; <br />
if(x>=z) {break; } // while deki koşula bakılmaksızın döngü sonuna gider. <br />
if(y<=3) {continue;}// y<=3 olduğu sürece döngü bir sonraki çevrime girer. <br />
}while(x<10); // x<10 olduğu sürece çevrime devam et. <br />
document.write(”x=”,x ,”y=”,y ,”z=”,z); <br />
</script> <br />
</body> <br />
</html></div>
<div>
Function
Çoğu zaman Javascript kodunuzda bir işlemin birden fazla yapılması gerekebilir. Hatta kimi zaman Javascript'e bir işlem yaptırmadan önce başka bir işlemi yaptırmak istenebilir. İşte bu tür tekrarlanan işin yapılması için gerekli işlem ve komut gruplarına Fonksiyon adı verilir. Fonksiyonlar genelde, filanca isimli gruptaki işlemleri yap oradan bir değer al bunu filanca isimli gruba götür gibi işlemler için kullanılır. Bu tür komut sistemleri Javascript'te en çok kullanılan komut türlerindendir. Fonksiyonun yazım kuralları şu şekildedir ;
function fonksiyon_ismi(parametre1, parametre2 , .... )
{ yapılması istenen işlemler;}
Fonksiyona Değer Gönderme ve Değer Alma
Bir fonksiyonun Javascript içerisindeki ilk önemli görevi diğer fonksiyonlardan veya herhangi bir yerden bir değer alıp onu kendi içerisinde işletip sonra istenilen fonksiyona veya yere göndermektir. Bir sonucu bir fonksiyondan çağırmak için return deyimi kullanılır.Örnek :
Kod:<br />
<html> <br />
<title>ornek.html</title> <br />
<head> <br />
<script language="JavaScript"> <br />
function carp(a,b){ <br />
var c=a*b; <br />
return t; <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<script language="JavaScript"> <br />
var x = prompt("İki Sayının Çarpımı","Birinci Sayı"); <br />
var y = prompt("İki Sayının Çarpımı","İkinci Sayı"); <br />
var z = carp(x,y); <br />
document.write( x,"*",y,"= ",z); <br />
</script> <br />
</body> <br />
</html></div>
<div>
Nesneler ve Özellikleri Günümüzde sıkça kullanılan bir deyim Nesneye Yönelik Programlama. Nedir bu Nesneye Yönelik programlama ? Bu tip programlamada kullanılan her öğe bir nesne olarak kabul edilir. Bu nesnelerin özelliklerini kullanarak onları değiştirerek program yazılır. Javascript'te bu tür bir programlama dilidir. Örneğin webde sörf yaparken herkesin karşısına çıkan formlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibi özellikler de onun yani nesnenin özellikleridir.Örneğin şimdiye kadar çoğu kez kullanılan document.write komutu aslında bir nesnenin özelliğine atıfta bulunmaktan başka bir şey değildir. Yani document nesnesinin write özelliğini kullanarak html sayfamıza yazı yazdırıyoruz.
window Nesnesi : Genel olarak pencere özellikleri ile ilgili bir nesnedir.
Pencere açmak ve kapamak:Birçok yerde gördüğünüz pencere açma pencerelerin çeşitli özelliklerini değiştirme bu nesne yardımıyla yapılmaktadır.Pencere açmak için :
window.open("Url_adı" , "pencere_adı" , "pencere_özellikleri");
Pencere kapatmak için :window.close();
Pencere kapatmak için window.close() komutu vermek yeterlidir. Burada kapatılan pencere ona kullanılmakta olan penceredir.Pencere açma işleminde window.open() ile pencerenin açılmak istendiği belirtilir. Parantez içerisinde verilenler ise açılması istenen pencerenin özelliklerini belirtir.Url_adı : Buraya yazılacak dosya ismi açılacak pencerenin içerisinde olacaktır.
window.open("http://www.gantep.edu.tr")veya;
window.open("index.html")
Pencere_adı : Bu açılacak pencerenin adını belirtir. Birden çok pencere ile işlemler yapıyorsanız hangi pencereye bir komut gönderdiğinizin belli olması için gereklidir.
window.open("index.html" , "ana");
Pencere_özellikleri : Bu özellikte adından belli olduğu ölçüde pencerenin özellikleri ile ilgilidir. Bir pencerenin değiştirilebilir özellikleri şunlardır :
menubar : Tarayıcıların en üst kısmında bulunan File(Dosya) , Edit(Düzen) vb. menülerin bulunduğu satırdır.
toolbar : Tarayıcılarda üst kısımda Back(Geri) , Forward(İleri) vb. tuşların bulunduğu kısımdır.
location : Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız kısım.
status :Tarayıcıların en alt kısmında hangi dosyanın yüklendiği ile ilgili bilgi veren kısımdır.
s
crollbars : Sağ tarafta bulunan sürgü çubuklarıdır.
resizable : Pencerenin boyutlarının kullanıcıya bırakılması veya kesin değerler almasıyla ilgilidir.
width : Açılacak olan pencerenin piksel cinsinden genişliğidir.
height : Açılacak olan pencerenin piksel cinsinden boyudur.
left : Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta olacağını belirler.
top : Açılacak olan pencerenin ekranın üstünden kaç piksel aşağıda olacağını belirler.Eğer pencere özellikleri kısmında değişmesini istemediğiniz bir özellik varsa onu yazmanıza gerek yoktur. Bu değerler tarayıcının banko(default) değerlerinden alınır.
200x300 ebatlarında
Linkleri görebilmek için lütfen siteye üye olunuz!
adresine bağlanan bir pencere açmak için;
window.open("http://www.gantep.edu.tr", "ana" ," menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300";)
window.location.protocol window nesnesinin location.protocol nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir.
if (window.location.protocol == "http:" )
{ document.write ("Bu belge Internet'ten geliyor.") }
else
{ document.write ("Bu belge sabit diskten geliyor") }
http: Dosyanın internetten yüklendiğini belirtir.
file: Dosyanın sabit diskten yüklendiğin belirtir.
window.history.go window un history özelliği ile bir önceki sayfaya erişim sağlanabilir. Örneğin kullanıcı herhangi bir formu doldurmadı ve işlem yapılamadı bu durumda bir hata mesajı ile kullanıcıyı uyardıktan sonra history nesnenisin kullanarak bir önceki sayfaya kullanıcı göndererilebilir.
window.history.go(-1) Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki sayfalara da ulaşabilirsiniz.
window.status.bar kullanımı : status.bar, window nesnesinde belirttiğimiz gibi tarayıcıların en alt kısmında yer alan hangi dosyaya gidileceği veya yüklendiği ile ilgili bilgi veren kısımdır. window.status="Ahmet Hoca iyi günler diler!";
window.moveTo(x,y) IE veya NN penceresini bir x,y ile belirlenmiş noktaya taşımak için kullanılır. Taşınan nokta ekranın sol üst köşesidir. Normalde bu noktanın varsayılan değeri (0,0). Window.moveTo(100,100); // Internet penceresini 100,100 noktasına taşır.Döngü deyimleri kullanılarak IE veya NN penceresi hareketli duruma getirilebilirsiniz.Örnek:
Kod:<br />
<html> <br />
<head><title>ornek.html</title></head> <br />
<body> <br />
<script> <!-- <br />
var y; <br />
for(y=400;y>=0;y-=8){ // x değeri her zaman 0, y değeri 400. pikselden <br />
window.moveTo(0,y); // başlıyor. <br />
} <br />
--> <br />
</script> <br />
<center>Web Sayfama Hoşgeldiniz...</center> <br />
</body> <br />
</html></div>
<div>
Olaylar
Ziyaretçiye sunulan bir web sayfası üzerinde ziyaretçinin yaptığı her tür hareket bir bağlantıyı tıklaması , bir resmin üzerine gelmesi , resmin üzerinde ayrılması , bir formu yanlış doldurup hataya yol açması hep bir olaydır.
onMouseOver,onMouseOut
Bu tür nesne olayları ,ingilizce adı onMouseOver = fare işaretçisi(imleç) üzerindeyken , onMouseOut = fare işaretçisi üzerinden ayrıldığında, fare işaretçisinin istenen bir linkin üzerindeyken ve değilken açıklama yapmak için kullanılır.Örnek:
Kod:<br />
<html> <br />
<head><title>ornek</title> <br />
<script language="javascript1.2"> <br />
<!-- <br />
function uzerinde() <br />
{window.status="Tıklayın ve Zonguldak Üniversitesine bağlanın" } <br />
function disinda() <br />
{window.status="Zonguldak Üniversitesi ne bağlanmak istiyormusun?" } <br />
--> <br />
</script></head> <br />
<body> <br />
<a href="http://www.webdersleri/index.htm" onMouseOver = uzerinde() onMouseOut =disinda()> Webderslerii.com </a> <br />
</body> <br />
<br />
/html> <br />
onLoad , onUnLoad
Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir. Bir Javascript fonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını kullanırız. Autoexec.bat dosyası nasıl makine açıldığında yapılmak istenenleri yapıyorsa onLoad olayında da sayfa yüklenmeye başladığında nelerin otomatik olarak başlatılacağını belirleyebiliriz. Mesela sayfa yüklenmeye başladığında ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında ise Hoşçakalın diyebiliriz. Web sayfası kod açısında iki kısıma ayrılır. Bunlar head ve body kısmıdır. Tarayıcı açısında body kısmı asıl kısımdır. head kısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body etiketleri arasında yer alır. Örnek:
Kod:</div>
<div><head> <br />
<title>ornek</title> <br />
<script language="javascript1.2"> <br />
<!-- <br />
function hosgeldiniz() <br />
{alert("Web Sitemize Hosgeldiniz")} <br />
function gulegule() <br />
{alert("Hoşçakalın")} <br />
<--> <br />
</script> <br />
</head> <br />
<body onLoad="hosgeldiniz()" onUnload="gulegule()"> <br />
</body> <br />
</html> </div>
<div>
onError Ziyaretçi sayfayı herhangi bir neden yüzünden tam haliyle yükleyememiş olabilir. Bu nedenler aktarım hızı veya tarayıcının Javascript kodunu tam manasıyla yorumlayamamış olmasıdır. İşte bu durumda Error(hata) oluşur. Html üzerinde oluşan en sık error(hata) resim haritalarının (image-map) tam anlamıyla yüklenmemesinden kaynaklanır. Çünkü bu durumda resim tam yüklenmemiştir. Bu da ziyaretçinin resim üzerinde tıklayacağı yerlerin yorumlanmamasını doğurur.
<img src="resim.gif" onError="alert("Resim tam olarak yüklenemedi!..")">
onmousedown ve event.button Web sayfanızı ziyaret eden bir kişinin farenin sağ tuşu ile işlem yapmasını istemiyorsanız bu iki deyimi kullanmalısınız.Örnek: Bu program parçasını mutlaka web sayfanıza ekleyin!..
Kod:<br />
<html> <br />
<head> <br />
<title>ornek</title></head> <br />
<body> <br />
<script language="JavaScript"> <br />
<!-- <br />
document.onmousedown=click; <br />
function click(){ <br />
if((event.button==2) || (event.button==3)){ alert("Oynama...");} <br />
} <br />
--> <br />
</script> <br />
</body> <br />
</html></div>
<p>
