Javascript iç içe for döngüsü

Döngüler bilgisayarlara belirli bir işi, belirli şartlar altında istenen miktarda yaptırmak için kullanılır. Döngü yazmak programcıyı aynı kodu defalarca tekrarlamaktan kurtarır. Bu konuyu çarpım tablosu üretmeye yarayan bir program üzerinde inceleyelim. Bu arada javascriptte kullanılan for döngüsünü de anlatmış olacağız.

Neden çarpım tablosu diye sorabilirsiniz. Biliyorum, yararsız bir program. Ama döngü kavramını incelemek ve for döngüsünü hem de iç içe eklenmiş bir vaziyette uygulamak için ideal bir çalışma. Önce For döngüsünün ne olduğuna bir bakalım

For Döngüsü:

Javascript'te bir işlemi/hesaplamayı istenen sayıda tekrarlamak için kullanılır. Ufak bir hesaplama ile programcıyı sayfalar dolusu kod yazmaktan kurtarır, zaman ve emekten tasarruf sağlar. For döngüsü şu şekilde kullanılır,

for (sayılacak değişkenin ilk değeri; sayılacak değişkenin limiti; altma veya azalma miktarı)

{

Bu bögeye (süslü parantezler arasına) yaptırılmak istenen işlem yazılır.

}

sayılacak değişkenin ilk değeri şöyle belirlenir;

i=1;

Javascript'te for döngüsü içinde önceden tanımlanma şartı olmaksızın değişken yazabilir ilk değerini verebilirsiniz. Şimdi "i=1" ile bir değişken oluşturduk ve buna ilk değernin atadık. Hesaplamanın ne zamana kadar yapılacağını belirlemek için değişkenin alabileceği değerlerin, programın işleyişine uygun bir şekilde sınırlanması gerekir. Bunu da yapalım,

i<=10;

Böylelikle i değişkeni 10 değerine gelinceye kadar(10 da dahil) döngü için belirlenen işlemler tekrarlanır. Verilen değerlerin artma ya da azalma miktarı şu şekillerde verilebilir.

i=i+1 veya ++i

i=i-1 veya --i 

lkinde bire birer artar ikincisinde birer birer azalır. isterseniz artma/azaltma miktarını değiştirerek işlem adedini küçültebilirsiniz. süslü parantezler içinde de yapılacak işlemi yazarsınız.

{

k=i*j

}

For döngüleri iç içe kullanılabilrler. İç içe for döngüsü kullanılırken süslü parantezleri açık unutmamaya ve doğru yerlerde kullanmaya dikkat edin. iç içe for döngüsü matruşka gibidir.  Yani iç döngüyü kendi içinde dış döngüyü de kendi içinde kapatmalısınız.

Bu kadar önbilgiden sonra programı incelemeye başlayabiliriz. Programımız şunları yapıyor

Aşağıdaki butona basınca;

-Çarpım tablosunu oluşturmakla görevli carp isimli bir fonksiyon tanımlıyor. (Aslında bu fonksiyona ihtiyacımız yok Ama programın sayfa açılır açılmaz çalışmasını istmediğim için ben üzerine tıkladığım zaman olayı başlatacak bir düğme için bu fonksiyonu yazdım)

-Bir tablo başlatıyor,

-İlk satırı açıyor ve içine birden 9 a kadar numaraları sıralıyor. (bu kısım elle yapıldı döngüye dahil değil)

-İlk döngüye giriyor bu döngü "i=1" için ilk satırı oluşturuyor

-ikinci döngüye giriyor bu döngü "j=1" için ilk sütunu oluşturuyor.Böylelikle tablonun ilk hücresi oluşturulmuş oluyor. Ardından k=i x j çarpımını yapıyor ve hem çarpma işlemini hem de sonucunu bu hücreye yazıyor. İç döngünün başına geliyor ve ikinci hücreyi oluşturuyor. Bu iç döngü bu şekilde "j=9" oluncaya kadar hücreleri oluşturup içine sonuçları yazmaya devam ediyor."i=9" değeri de hesaplandıktan sonra iç döngüden çıkılıyor ve dıştaki döngüye giriliyor. İç döngü tmamlandığında "i=1 "olan değer +1 arttırılarak "i=2" için aynı döngü yeniden tekrarlanıyor. "i="10" olduğunda dış döngü de tmamlanıyor ve son olarak tablo etiketi kapatılıp çarpım tablosu tamamlanıyor.

İşte tüm bu hesaplamaları yapan programın kodları ;

<script language="javascript1.2">

function carp(){

document.writeln("<table Border=1>")

document.writeln("<tr><td>"+ 1 + "</td><td>"+2+"</td><td>"+ 3 + "</td><td>"+4+"</td><td>"+ 5 + "</td><td>"+6+"</td><td>"+ 7 + "</td><td>"+8+"</td><td>" + 9 + "</td></tr>")

for (i = 1; i <= 10; ++i)

{

document.writeln("<tr>")

for (j =1; j<=9; ++j)

{k = i * j

document.writeln("<td>" + i + "x" + j + "=" + k + "</td>")

}

}

document.writeln("</tr>")

document.writeln("</table>")

document.writeln("<input type=button Value= geridön_geridööön onclick=parent.location='http://infial.blogspot.com/2011/05/function-carpdocument.html' />")

}

</script>

<input type="button" Value="Çarpım tablosunu göster" onclick="carp()" />

Turuncu ile işaretli olan yeri yazmayın. O kısmı bu sayfaya geri dönüş için koydum.

Bu kadar kafa yormaya ne gerek var? Ben elimle oturur yazarım bütün tabloyu diyorsanız, uğraşmak istiyorsanız siz bilirsiniz. :)))

İşte size tek tıkla çarpım tablosu!!!