Yazar: Merhaba değerli arkadaşlar!
Bu yazımda artık javascript’te döngü yapısına giriş yapıyor olacağım.
Döngüler konusunda ilk olarak inceleyeceğimiz döngü yapısı for döngüsüdür. peki javascript’te döngü yapısı nasıldır birlikte inceleyelim.
Javascript’te for döngüsünü şöyle açıklayabilirim kısaca:
Diyelim ki, web sitenizde santigrad dereceyi fahrenhayt dereceye çeviren tablo oluşturmak 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.
Ancak bu hem hesaplama açısından hemde html ile kodlama açısından oldukça zor olacaktır, Tamda bu noktada javascript’in for döngüsünü kullanarak daha az kod kullanarak bu işlemi gerçekleştirebiliriz.
for.html adında bir dosya oluşturun ve şu kodları içerisine yazın.
<doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> javascript’te for döngüsü kullanımı </title>
</head>
<body>
<h1> javascript for döngüsü </h1>
<script>
// santigrad-fahrenhayt tablosu
document.writeln(“<TABLE Border=\”1\”>”)
document.writeln(“<TR><TD>Santigrad</TD><TD>Fahrenhayt</TD></TR>”)
for (santigrad = 0; santigrad <= 100; ++santigrad)
{
fahrenhayt = santigrad * 9 / 5 + 32
document.writeln(“<TR><TD>” + santigrad + “</TD><TD>” + fahrenhayt + “</TD></TR>”)
}
document.writeln(“</TABLE>”)
</script>
</body>
</html>
Burada “for” ifadesiyle tekrarlanan bir döngü oluşturuyoruz. “for” döngüsüne geçmeden Javascript’e, sayfaya bir kaç HTML komutu göndermesini bildiriyoruz; bu komutlar sayfada bir tablo başlatıyor; tablonun birinci sırasına iki kutu oluşturarak, içlerine “Santigrad” ve “Fahrenhayt” yazıyor. Şimdi asıl, “for” ifadesi üzerinde duralım:
“for” ile oluşturacağımız döngü, bir sayaca göre ilerler. Burada sayaç olarak “santigrad” adında bir değişken oluşturuyoruz, Javascript’e “Santigrad adında bir değişken yap, içine 0 değerini koy; ve bu değişken 100’den küçük veya 100’e eşit ise bazı işler yap!” demiş oluyoruz.
Bu arada Javascript, diğer dillerin benzeri komutuna göre bize bir kolaylık sağlıyor: Javascript’in her döngü yapacağı işten sonra santigrad’ın mevcut değerine 1 eklemesini aynı satırda ve kolayca yapıyoruz. “for” işleminin başladığını belirten açılan süslü parantezden sonra Javascript’e her döngüde yapacağı iki işi bildiriyoruz:
fahrenhayt = santigrad * 9 / 5 + 32
Bu komut ile Javascript, “fahrenhayt” adını verdiği bir değişken oluşturuyor ve ilk değer olarak, santigrad değişkeninin değerini 9 ile çarpıp, 5’e bölüyor, bulduğu sayıya 32 ekliyor. ilk turda, santigrad değişkeninin değeri 0 olduğuna göre, fahrenhayt değişkeninin değeri 32 olarak bulunuyor; ve Javascript ikinci işleme geçiyor:
document.writeln(“<TR><TD>” + santigrad + “</TD><TD>” + fahrenhayt + “</TD></TR>”)
Bu işlem ise, sayfaya bir tablo sırası ile bir tablo kutusu göndermek; bu kutunun içine santigrad değişkeninin değerini yazmak; sonra bu kutuyu kapatıp yeni bir kutu açmak; bu kutunun içine fahrenhayt değişkenini değerini yazarak, kutuyu ve tablo sırasını kapatmaktan ibaret bir işlemdir.
Javascript, birinci turu bitirdiğinde, “for” komutunun tayin ettiği ölçüde sayaç değişkeninin arttırıp veya azaltıp, ikinci tura başlayacaktır. Bu ne zamana kadar böyle devam edip gidecektir? Sayaç değişkeninin değeri, tayin ettiğiniz sınıra ulaşıncaya kadar. Nedir bu sınır: santigrad değişkeninin değerinin 100’e eşitlenmesi. Bu kadar uzun bir tablo vermek istemiyorsanız, bu değeri istediğiniz bir sayıya indirebilirsiniz ve sayacı birer birer arttırma yerine, mesela beşer beşer attırabilirsiniz. Sayacı beşer-beşer arttırmak için “for” komutunun son argümanını “santigrad +=5” şeklinde yazmanız gerekmektedir.
Javascript for döngüsü konusunu pekiştirmek için bir örnek daha yapalım.
javascript for döngüsü örneği:
dongu2.html adında bir dosya oluşturun ve şu kodları içerisine yazın.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> javascript for döngüsü örneği </title>
</head>
<body>
<h1> javascript döngüörneği iki </h1>
<script>
for(var i=1;i<=10;i++)
{
document.write(i+”<br>”);
}
</script>
</body>
</html>
Bu örneğimizde birden ona kadar olan sayıları javascript for döngüsü kullanarak ekrana yazdırmış olduk.
Javascript for döngüsünün kullanımı bu şekilde dir. for döngüsü ile ilgili soru ve sorunlarınızı yorum olarak bana iletebilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan javascript ifl else yapısı başlıklı makalemizde javascript else ifadesi, javascript if else yapısı ve javascript if ifadesi hakkında bilgiler verilmektedir.