Javascript Döngüler

JavaScript içerisinde yer alan for, for in,  while, do while döngüleri ile döngü kontrolü için kullanılan break ve continue anahtar kelimesi kullanımı örnekleri ile yer alıyor.

Döngüler

JavaScript döngüler aynı kodun koşula bağlı olarak sürekli çalışması için kullanılır.

Örnekte dizi sıra numarası artan sırada tekrar kullanılmıştır.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  alert(liste[0]);
  alert(liste[1]);
  alert(liste[2]);
  alert(liste[3]);
  alert(liste[4]);
  alert(liste[5]);
  alert(liste[6]);
</script>

Dizi 7 eleman yerine 300 veya 1000 elemanlı olsaydı?

Tekrar kullanım yerine aşağıdaki gibi for döngüsü kullanılır.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i, listeUzunluk = liste.length;

  for(i = 0; i < listeUzunluk; i++) {
    alert(liste[i]);
  }
</script>

for döngüsü

for döngüsü genellikle Koşul ile belirtilen tekrar sayısı kadar kod bloğunun çalışması için kullanılır.

JavaScript for döngüsü kullanımı aşağıdaki gibidir.

for(Komut 1; Koşul; Komut 2) {
  // çalıştırılacak kodlar
}

Komut 1 döngü başlamadan çalıştırılacak komutları içerir.

Koşul döngü kod bloğunun çalışma şartını belirtmek için kullanılır.

Komut 2 döngü kod bloklarından sonra çalıştırılacak komutları içerir.

JavaScript for döngüsü ile toplama örneği aşağıdaki gibidir.

<script>
  var i, toplam = 0;

  for(i = 0; i < 5; i++) {
    toplam += i;
  }
  alert(toplam);
</script>

Örnekte şu işlemler yapılır.

Komut 1 döngü başlangıç değerini ayarlar (i = 0).

Koşul döngünün çalışması için gerekli olan şartı belirler (i < 5).

Komut 2 döngü kod bloklarından sonra i değişken değerini arttırır (i++).

for döngüsü örnekleri

JavaScript for döngüsü komut 1

JavaScript for döngüsü Komut 1 alanı genellikle başlangıç değeri olarak kullanılır.

Ancak virgülle birden fazla değer ataması yapabilir.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i;

  for(i = 0, listeUzunluk = liste.length; i < listeUzunluk; i++) {
    alert(liste[i]);
  }
</script>

Değer ataması yapılmadan kullanılabilir.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i = 0, listeUzunluk = liste.length;

  for(; i < listeUzunluk; i++) {
    alert(liste[i]);
  }
</script>

JavaScript for döngüsü koşul

JavaScript for döngüsü Koşul alanı genellikle başlangıç değerini karşılaştırmak için kullanılır.

Koşul alanındaki karşılaştırma sonucunda değer true olursa döngü devam eder false olursa döngü biter.

Koşul alanına herhangi bir şey yazılmadan da kullanılabilir.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i = 0;

  for( ; ; i++) {
    alert(liste[i]);
    if(i == 6) break;
  }
</script>

Ancak döngü sonsuz döngüye girerek tarayıcıyı kilitleyecektir.

Bu durumun önüne geçmek için kod bloğu arasına break anahtar kelimesini yazarak döngü bitirilmelidir.

JavaScript for döngüsü komut 2

JavaScript for döngüsü Komut 2 alanı genellikle başlangıç değerini arttırmak için kullanılır.

Arttırma yerine azaltma veya ikişer, üçer arttırma yapılabilir.

<script> 
  var i, sonuc = 0;

  for(i = 0; i < 11; i += 2) {
    sonuc += i;
  }
  alert(sonuc);
</script>

Komut 2 alanı yazılmadan kullanılabilir.

<script>
  var i, sonuc = 0;

  for(i = 0; i < 11;) {
    sonuc += i;
    i += 2;
  }
  alert(sonuc);
</script>

for in döngüsü

for in döngüsü genellikle eleman sayısını bilmediğimiz diziler veya elemanlarını bilmediğimiz nesnelerde kullanılır.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];

  for(i in liste) {
    alert(liste[i]);
  }
</script>

for in döngüsünün nesneler üzerinde kullanımı aşağıdaki gibidir.

<script>
  var araba = {marka:"Fiat", model:"500", renk:"beyaz"}

  for(i in araba) {
    alert(i + " - " + araba[i]);
  }
</script>

while döngüsü

while döngüsü Koşul ile belirtilen alan doğru (true) olduğu sürece kod bloğunun çalışması için kullanılır.

While döngüsü kullanımı aşağıdaki gibidir.

while(Koşul) {
  // çalıştırılacak kodlar
}

Örnekte i değişkeni 10’dan küçük olduğu sürece kod bloğundaki kodlar çalışacaktır.

<script>
  var i = 0, toplam = 0;

  while(i < 10) {
    toplam += i;
    i++;
  }
  alert(toplam);
</script>

Kod bloğu içerisinde Koşul alanını ilgilendiren değişken (i) değeri değiştirilmezse döngü sonsuz döngüye girerek tarayıcıyı kilitleyecektir.

for döngüsü ve while döngüsü

Örnekte for döngüsü ile liste dizisi içerisindeki her eleman değerini uyarı mesajı olarak ekran yazdırmaktadır.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i = 0;

  for(;liste[i];) {
    alert(liste[i]);
    i++;
  }
</script>

Örnekte while döngüsü ile liste dizisi içerisindeki her eleman değerini uyarı mesajı olarak ekran yazdırmaktadır.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i = 0;

  while(liste[i]) {
    alert(liste[i]);
    i++;
  }
</script>

do while döngüsü

do while döngüsü Koşul ile belirtilen alanın doğru olup olmadığına bakmadan kod bloğunu bir kez çalıştırır ve daha sonra Koşul ile belirtilen alan doğru (true) olduğu sürece kod bloğunun çalışması için kullanılır.

do while döngüsü kullanımı aşağıdaki gibidir.

do {
  // çalıştırılacak kodlar
}
while(Koşul);

Örnekte i değişkeni 10’dan küçük olduğu sürece kod bloğundaki kodlar çalışacaktır.

<script>
  var i = 0, toplam = 0;

  do {
    toplam += i;
    i++;
  }
  while(i < 10);
  alert(toplam);
</script>

Kod bloğu içerisinde Koşul alanını ilgilendiren değişken(i) değeri değiştirilmezse döngü sonsuz döngüye girerek tarayıcıyı kilitleyecektir.

while döngüsü ve do while döngüsü

Örnekte while döngüsü koşul sağlanmadığı için kod bloğu içerisindeki kod çalışmayacaktır.

<script>
  while(30 < 20) {
    alert("Merhaba JavaScript");
  }
</script>

Örnekte do while döngüsü koşulun sağlanıp sağlanmadığına bakmadığı için kod bloğu bir kez çalışacaktır.

<script>
  do {
    alert("Merhaba JavaScript");
  }
  while(30 < 20);
</script>

Döngüden çıkmak için break döngünün bazı adımlarını atlamak için continue anahtar kelimesi kullanılır.

break

break anahtar kelimesi döngüyü sonlandırmak için kullanılır.

Örnekte for döngüsü liste dizisi elemanlarını ekrana yazdırır.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i, listeUzunluk = liste.length;

  for(i = 0; i < listeUzunluk; i++) {
    if(i == 3) break;
    alert(liste[i]);
  }
  alert("Merhaba JavaScript");
</script>

Ancak döngü sıra numarası 3 olan elemana geldiğinde break anahtar kelimesi döngüyü sonlandırır ve varsa sonraki kodları çalıştırılır.

continue

continue anahtar kelimesi döngü adımını atlamak için kullanılır.

Örnekte for döngüsü liste dizisi elemanlarını ekrana yazdırır.

<script>
  var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];
  var i, listeUzunluk = liste.length;

  for(i = 0; i < listeUzunluk; i++) {
    if(i == 3) continue;
    alert(liste[i]);
  }
  alert("Merhaba JavaScript");
</script>

Ancak döngü sıra numarası 3 olan elemana geldiğinde continue anahtar kelimesi döngü adımını atlar ve sonraki döngü adımına geçer.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.