JavaScript'te Koşullar ve Döngüler
Bu dersimizde JavaScript'te koşullar ve döngüler konusunu öğreneceğiz.
Koşullar
Koşullar birer karar yapılarıdır. Şarta bağlı bir komutu yerine getirmek istiyorsak koşul ifadelerini kullanmalıyız. Ayrıca unutmayın ki koşul ifadeleri boolean tipi verilerde çalışır. Yani bir ifade ya doğrudur ya da yanlıştır mantığı ile komutları yerine getirirler.
if else Koşulu
Bu koşulu daha önceki derslerimizde görmüştük. Şimdi ise daha ayrıntılı olarak inceleyeceğiz.
if (koşul) {
// Koşul doğru ise çalışacak kodlar
}
else {
// Koşul yanlış ise çalışacak kodlar
}
if else koşulunun çalışma prensibi bu şekildedir. Şimdi basit bir örnek yapalım...
<script>
var tuttugumSayi = 7;
var kullaniciSayisi = prompt("Aklımdan 1'den 10'a kadar hangi sayıyı tutuyorum, bil bakalım.", "");
if (tuttugumSayi == kullaniciSayisi) {
alert("Tebrikler doğru tahmin! =)");
} else {
alert("Üzgünüm. Tuttuğum sayı 7'di.");
}
</script>
tuttugumSayi adında bir değişken tanımladım ve değerini "7" verdim. Kodlarımı çalıştırdığımda aşağıdaki gibi bir pencere açılacak ve kullanıcıya sorumu soracağım. Kullanıcını vereceği cevap kullaniciSayisi adlı değişkenimin değeri olacak. Eğer tuttugumSayi ile kullanıcının gireceği sayı birbirine eşitse if kısmındaki, değilse else kısmındaki kodlar çalışacak.
Kodlarımı çalıştırdığımda karşıma bu şekilde bir pencere gelecek. Yanıt olarak 6 yazıyorum ve OK'a tıklıyorum.
Kodlarım doğru bir şekilde çalışıyor. Burada dikkatimizi çeken bir fonksiyon var. O da promt( ) metodu. Sizin de anlayacağınız gibi bu metod tarayıcıda veri girişi kutucuğunun açılmasını sağlıyor. İki parametreli. İlk parametre kutucuk bilgisi. İkincisi ise veri girişi için.
else if Koşulu
if else koşulu ile aynıdır. Tek farkı birden fazla false durumunda çalışacak koşulların eklenebilmesidir.
if (koşul) {
// Koşul doğru ise çalışacak kodlar
}
else if (koşul) {
// Koşul yanlış ise çalışacak kodlar
}
else if (koşul) {
// Koşul yanlış ise çalışacak kodlar
}
Bir önceki örneğimizi biraz geliştirelim.
<script>
var tuttugumSayi = 7;
var kullaniciSayisi = prompt("Aklımdan 1'den 10'a kadar hangi sayıyı tutuyorum, bil bakalım.", "");
if (tuttugumSayi == kullaniciSayisi) {
alert("Tebrikler doğru tahmin! =)");
}
else if (tuttugumSayi > kullaniciSayisi) {
alert("Üzgünüm. Tuttuğum sayı sizin sayınızdan daha büyüktü.");
}
else if (tuttugumSayi < kullaniciSayisi) {
alert("Üzgünüm. Tuttuğum sayı sizin sayınızdan daha küçüktü.");
}
</script>
Bu sefer kullanıcının girdiği sayının tuttuğumuz sayıdan büyük ya da küçük olmamasına bakıyoruz. Bunun için else if koşullarını kullanıyoruz.
Bu sefer "3" değerini giriyorum.
Çıktım ise bu şekilde olacaktır. Kodlarım doğru bir şekilde çalışıyor.
Son olarak belirtmeliyim ki, else if koşullarından sonra else koşulunu kodlarımıza ekleyebiliriz. Bu şekilde bir kullanımı da vardır.
switch Koşulu
else if ile çok benzerdir. Aralarında iki önemli fark vardır. switch koşulunda sınırlamalar bellidir. Örneğin; haftanın yedi gününden birini seçmek istiyorsak switch koşulu kullanmalıyız. İkinci fark ise switch koşulu, else if koşulundan daha hızlı tepki verir. switch koşulu içerisine yazılan herhangi bir koşul sağlandığında break deyimi ile çıktı alınırken else if'te tüm koşullar okunmaktadır.
switch (koşul) {
case deger1:
kosul = deger1 // ise çalışacak kodlar
break;
case deger2:
kosul = deger2 // ise çalışacak kodlar
break;
case deger3:
kosul = deger3 // ise çalışacak kodlar
break;
default:
// Koşulların hiçbiri sağlanmadığında çalışacak kod grubu
}
Bu şekilde bir kod yapısı vardır. Şimdi bunu örnek üzerinde görelim.
<script>
var kullaniciSayisi = prompt("Aklımdan 1'den 10'a kadar hangi sayıyı tutuyorum, bil bakalım.", "");
switch (kullaniciSayisi) {
case "1":
alert("Üzgünüm tuttuğum sayı daha büyüktü.");
break;
case "2":
alert("Üzgünüm tuttuğum sayı daha büyüktü.");
break;
case "3":
alert("Üzgünüm tuttuğum sayı daha büyüktü.");
break;
case "4":
alert("Üzgünüm tuttuğum sayı daha büyüktü.");
break;
case "5":
alert("Üzgünüm tuttuğum sayı daha büyüktü.");
break;
case "6":
alert("Üzgünüm tuttuğum sayı daha büyüktü.");
break;
case "7":
alert("Tebrikler, doğru tahmin!");
break;
case "8":
alert("Üzgünüm tuttuğum sayı daha küçüktü.");
break;
case "9":
alert("Üzgünüm tuttuğum sayı daha küçüktü.");
break;
default:
alert("1'den 10'a kadar bir sayı girmeliydiniz.");
}
</script>
Kullanıcıdan bir sayı aldım ve bu sayı bulunana kadar oluşacak durumları yazdım. Eğer "6" değerini girdiyse 6ncı case'e kadar kodlarımı okuyacak ve break deyimi ile belirttiğim uyarıyı verecek.
Tekrar "6" değerini girdim.
Bu sefer çıktımız bu şekilde olacaktır. Diğer koşulları denediğimde de doğru sonuçlar aldım. Kodlarımız düzgün bir şekilde çalışıyor.
ternary if Koşulu
Bu koşul üçleme koşulu olarak da bilinir. jQuery'deki toggle'ın altyapısıdır. Aç - kapa, kapa - aç mantığı vardır.
degişken == koşul ? değer1 : değer2
Şeklinde basit bir algoratiması vardır. Şimdi bu algoritmayı basit bir örnek ile açıklayalım.
<script>
var kullaniciSayisi = prompt("1'den 100'e kadar bir sayı giriniz. Ben bu sayıyı 100'e kadar yazdıracağım.", "");
kullaniciSayisi == (7) ? alert("Doğru") : alert("Yanlış");
</script>
Burada kullanıcı bir sayı girecek ve bu sayı 7'ye eşitse "Doğru" yazan, değilse "Yanlış" yazan bir uyarı penceresi açılacak.
Görüldüğü üzere ternary if koşulunun kullanımı oldukça basittir.
Döngüler
Programlamanın olmazsa olmazlarıdır. Bir komut bloğunu birden çok kez çalıştırmak için kullanılırlar. Örneğin; ekranımıza 1'den 100'e kadar sayı yazdırmak istiyoruz. Bunun için yüz kere document.write(n) ifadesini yazmayız. Burada devreye döngüler girer.
for Döngüsü
En çok kullanılan döngüdür. Bir değişken için tanımladığımız koşul içindeki komutlar döngü tamamlanıncaya kadar çalışır.
for (koşul başlangıç değeri; koşul; arttırma/azaltma) {
// Çalışacak komutlar
}
Şeklinde algoritması vardır. Şimdi bu algoritmanın nasıl çalıştığını bir örnek ile özetleyelim.
<script>
var kullaniciSayisi = prompt("1'den 100'e kadar bir sayı giriniz. Ben bu sayıyı 100'e kadar yazdıracağım.", "");
for (var i = kullaniciSayisi; i < 100; i++) {
document.write(i + "
");
}
</script>
Şeklinde bir döngümüz olsun. Kullanıcı sayısını i değişkenine atadık. i ise 100'e kadar birer birer artacak. Yazdırırken ise <br/> etiketi ile bunu alt alta yazdıracağız.
Kodlarımı çalıştırdım ve örnek olarak "89" sayısını girdim.
89
90
91
92
93
94
95
96
97
98
99
Ekran çıktım ise bu şekilde olacaktır. Eğer benim gibi zibidilik yapmak istiyorsanız girilen değere "-999999" gibi sayılar verebilirsiniz. İşlemcinizin pasını atarsınız.
while Döngüsü
for döngüsü ile aynı işlemleri yapar. Birkaç küçük sözdizimi farkı vardır. Değişken döngüden önce tanımlanır. Parantez içerisine sadece koşul yazılır ve arttırma/azaltma işlemleri yazdırma işleminden sonra yapılır.
koşul başlangıç değeri;
while (koşul) {
// Çalışacak komutlar
arttırma/azaltma
}
Şeklinde bir algoritması vardır. Şimdi aynı örneğimizi while döngüsü ile yapalım.
<script>
var kullaniciSayisi = prompt("1'den 100'e kadar bir sayı giriniz. Ben bu sayıyı 100'e kadar yazdıracağım.", "");
var i = kullaniciSayisi;
while (i < 100) {
document.write(i + "
");
i++;
}
</script>
Bu sefer kullanıcı sayısını "i" değişkenime aktardım. Daha sonra döngümü yazdım. Dikkat ederseniz arttırma işlemini yazdırdıktan sonra yapıyorum.
Test amacıyla "92" değerini girdim.
92
93
94
95
96
97
98
99
Ekran çıktım bu şekilde olacaktır.
do ... while Döngüsü
while döngüsüne çok benzer. Tek farkı koşul doğru olsun ya da olmasın döngü içersindeki komutların en az bir defa çalıştırılmasıdır.
koşul başlangıç değeri;
do {
// Çalışacak komutlar
arttırma/azaltma
} while (koşul)
Şeklinde bir söz dizimi vardır. Şimdi aynı örneğimizi do ... while ile yapalım.
<script>
var kullaniciSayisi = prompt("1'den 100'e kadar bir sayı giriniz. Ben bu sayıyı 100'e kadar yazdıracağım.", "");
var i = kullaniciSayisi;
do {
document.write(i + "
");
i++;
} while (i < 100);
</script>
Kodlarımı çalıştırıyorum. Bu sefer "94" değerini girdim.
94
95
96
97
98
99
Çıktımız ise bu şekilde olacaktır.
Döngü Deyimleri
Döngüden çıkmak ya da döngü başına gitmek için kullanılan deyimlerdir.
break Deyimi
Döngüyü durdurmaya, terk etmeye yarar. switch döngüsünde bunun nasıl kullanılacağını görmüştük. if else, else if koşullarında da kullanılabilir.
continue Deyimi
Bir döngü içerisinde çalıştırılmasını istemediğimiz yerlerde kullanırız. Bunu şöyle göstereyim:
<script>
var kullaniciSayisi = prompt("1'den 100'e kadar bir sayı giriniz. Ben bu sayıyı 100'e kadar yazdıracağım.", "");
for (var i = kullaniciSayisi; i < 100; i++) {
if (i >= 80 && i < 90) {
continue;
}
document.write(i + "
");
}
</script>
Bu kodlarda 80 ve 90 arasındaki sayılar yazdırılmayacaktır. Örnek olarak "75" sayısını girdim.
75
76
77
78
79
90
91
92
93
94
95
96
97
98
99
Çıktımız ise bu şekilde olacaktır.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde JavaScript'te fonksiyonlar konusuna değineceğiz.