JavaScript ile Koşullar ve Döngüler

The VODKA · 15 Haz 2022

Merhabalar THT ailesi; Bu konumuzda sizlerle birlikte JavaScript'te koşullar ve Döngüleri göreceğiz. Konuyu sonuna kadar takip ederseniz mutlu olurum.

Koşullar

Her yazılım dilinde olduğu gibi JavaScript'te if, else yapısı kullanılır. Kullanımı oldukça basittir.

If() , Else Yapısı

JavaScript koşullar if else yapısı ile sağlanır. Bu koşullar True ve False değerleri döndürürler.

İf koşulunun karşılığı "eğer" anlamına gelmektedir. Else koşulunun karşılığı ise "Değilse" anlamına gelmektedir.

Kısa bir örnek ile buna bir göz atalım.

JavaScript:

var isim = "ahmet"; // İsim adında değişken oluşturduk ve buna Ahmet değerini verdik.[/INDENT][/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]if(isim == "ahmet") { // Burada ise isim değeri ahmet'e eşit olup olmadığını sorguladık.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    alert("İsminiz Ahmet"); // İsim Ahmet değerine eşitse bu sonucu döndür.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]} else {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    alert("İsminiz Ahmet Değil"); // İsim Ahmet değerine eşit değilse bu sonucu döndür.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}

else if() Yapısı

Else if() yapısı, Koşulların yetmediği yerde karşımıza çıkar. Else if() ile if()'teki gibi koşullar belirtebiliriz. Mesela günler üzerinden örnek verelim.

JavaScript:

var gun = "Salı";[/INDENT][/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2][/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]if(gun == "pazartesi") {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Bugün Günlerden Pazartesi");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]else if (gun == "Salı") {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Bugün Günlerden Salı");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]else if (gun == "Çarşamba") {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Bugün Günlerden Çarşamba");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]else if (gun == "Perşembe") {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Bugün Günlerden Perşembe");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]else if (gun == "Cuma") {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Bugün Günlerden Cuma");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]else if (gun == "Cumartesi") {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Bugün Günlerden Cumartesi");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]else if (gun == "pazar") {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Bugün Günlerden pazar");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]else {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    document.write("Neden Salıtesi Yok! Neden...");[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]

Gün değişkenini herhangi bir tanımsız değer yapsaydık else değerini alacaktık.

JavaScript:

gün = "Sunday"

- Operatörler

İf koşulanda eşitlerken " = " tek eşittir ifadesi ile yapamazsınız. Bunun için " == " iki eşittir ifadesi kullanmalısınız. " === " Üç eşittir ifadesi ise denktir anlamına gelmektedir. Denktir ifadesi yazıyı ve sayıyı kontrol eder.

JavaScript:

var deger = "0"; // String içerisinde ifade ettim. 0 burada Sayı değilde yazı niteliğinde kullanıldı.[/INDENT][/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]if(deger === 0) { // Burada değer değişkeni Sayı niteliğinde olan 0'a denk mi? sorgusu yaptık.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    alert("eşit"); // Denk değilse.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]} else {[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]    alert("eşit değil"); // Denkse[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]}[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]// CIKTI: Eşit değil olacaktır. Çünkü değer değişkeni string bir ifade olacağı için onu yazı formatında kayıt eder.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]//        Koşuldaki 0 string niteliğinde olmayıp kendi formatı olan sayı niteliğinde kayıt edilir.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]//  Buradaki "===" denktir sembolü ise Sayı formatıyla yazı formatıyla da karşılaştırır.[/INDENT][/INDENT][/INDENT]
[INDENT=2][INDENT=2][INDENT=2]//  "==" eşittir sembolü ise sadece değerlerin sonuçlarına bakar. Yazı veya Sayı formatında olduğuna bakmaz.

==	Eşitse	1 == 1	Sonuç: True	2 == 1	Sonuç: False
===	Denk ise	12 === 12	Sonuç: True	12 === 12	Sonuç: False
!=	Eşit Değilse	21 != 10	Sonuç: True	21 != 21	Sonuç: False
<	Küçük ise	10 < 20	Sonuç: True	20 < 10	Sonuç: False
>	Büyük ise	20 > 10	Sonuç: True	10 > 20	Sonuç: False
<=	Hem küçük, Hem eşit ise	12 <= 12	Sonuç: True	12 <= 13	Sonuç: False
>=	Hem büyük, Hem eşit ise	21 >= 21	Sonuç: True	13 <= 12	Sonuç: False
&&	ve	12 == 12 && 21 == 21	Sonuç: True	12 == 7 && 21 == 21	Sonuç: False	İkside eşit olması lazım
\|\|	Veya	21 == 21 \|\| 12 == 2	Sonuç: True	21 == 5 \|\| 12 == 2	Sonuç: False	Tek birisi olsa bile yeter
!	Değilse	6 ! 2	Sonuç: True	6 ! 6	Sonuç: False

Döngüler

Döngüler do/while() while(), for(), for(in) olmak üzere 4'e ayrılır.
For

1) while()

while(koşul) { Kodlar } şeklinde oluşur. Belirli bir şarta bağlı olarak işlemlerin tekrar etmesini istiyorsak kullanırız.

JavaScript:

var i = 0; // değişken oluşturdum. Değerine 0 verdim.
while(i < 20) { // burada i değişkeni 10 olana kadar tekrar et dedim.
    document.write(i + " "); // Yazdıracağımız sayıları belirtim.
    i++; // Koşul sağlanana kadar i değişkenini birer birer artırmasını söyledim.
}
// ÇIKTI: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

2) do/while()

While koduyla birlikte kullanılır. Belirli bir koşul geçerli ise devam eden bir döngüdür.

JavaScript:

var i = 0;
do {
    document.write(i + " ");
    i++;
}
while(i < 20);

3) for()

for(deger; kosul; sonuc) şeklinde çalışır. While ile aynıdır fakat arasında farklar vardır.

JavaScript:

var i;
for(i = 0; i < 5; i++) { // i'ye 0 değerini verdim. Eğer i 5'ten küçükse, i'yi birer birer artır.
    demo.innerHTML += i + "<br>"; // döngüden çıkan i değerini yazdır. "<br>" ile her koşulda bir alt satıra yazıdır.
}
/* ÇIKTI:
            1
            2
            3
            4
*/

For() ile array'deki elemanları listeleyebiliriz.

JavaScript:

var i;
 const diller = ["HTML", "CSS", "JavaScript", "PHP"]; // Dizemi belirttim.
 for(i = 0; i < diller.length; i++) { // i'ye 0 değerini verdim. Eğer i dizinin içindeki eleman sayısından küçükse, i'yi birer birer artır.
       demo.innerHTML += diller[i] + " - Dilini Biliyorum. <br>"; // i değeri kadar, dize konumlarını listele
 }
 /* ÇIKTI:
       HTML - Dilini Biliyorum.
       CSS - Dilini Biliyorum.
       JavaScript - Dilini Biliyorum.
       PHP - Dilini Biliyorum.
 */

4) for(in)

For/in döngüsü ile oluşturulan JavaScript nesnesinin tüm bilgilerine ulaşabiliriz.

JavaScript:

var araba = { marka:"Volkswagen", model:"Possat", fiyat:"993.400 TL" }; // Nesnemi oluşturdum.
var x;
for (x in araba) { // x değeri nesne sayısına ulaşana kadar
  demo.innerHTML += araba[x] + "<br>"; // tekrar et
}
/* ÇIKTI:
    Volkswagen
    Possat
    993.400 TL
*/

Chester Hoca · 15 Haz 2022

Ellerine sağlık

Helmsys · 15 Haz 2022

Do-while döngüsünde döngünün yalnızca nasıl kurulduğuna değinmişsiniz. Anlatım olmamış.

Ayrıca while döngüsünde de koşul sağlanana kadar devam eder demişsiniz.
Koşul sağlanana kadar değil belirtilen koşul geçerli ise devam eden bir döngüdür derseniz bence çok daha iyi olur.

Düzelteceğinize eminim.
Elinize sağlık

K3D · 15 Haz 2022

Helmsys' Alıntı:
Do-while döngüsünde döngünün yalnızca nasıl kurulduğuna değinmişsiniz. Anlatım olmamış.

Ayrıca while döngüsünde de koşul sağlanana kadar devam eder demişsiniz.
Koşul sağlanana kadar değil belirtilen koşul geçerli ise devam eden bir döngüdür derseniz bence çok daha iyi olur.

Düzelteceğinize eminim.
Elinize sağlık

Her zaman olduğu gibi kafamda ki yorumu atmışsın Helmsys. Teşekkür ediyorum canım.

@The VODKA Eline sağlık dostum. Daha fazla resimli anlatım yaparsan kafaya daha iyi oturtabileceğini düşünüyorum. Devamını beklerim...

The VODKA · 15 Haz 2022

K3D' Alıntı:
Her zaman olduğu gibi kafamda ki yorumu atmışsın Helmsys. Teşekkür ediyorum canım.

@The VODKA Eline sağlık dostum. Daha fazla resimli anlatım yaparsan kafaya daha iyi oturtabileceğini düşünüyorum. Devamını beklerim...

Bunu değerlendireceğim. Eywallah hocam..

Helmsys' Alıntı:
Do-while döngüsünde döngünün yalnızca nasıl kurulduğuna değinmişsiniz. Anlatım olmamış.

Ayrıca while döngüsünde de koşul sağlanana kadar devam eder demişsiniz.
Koşul sağlanana kadar değil belirtilen koşul geçerli ise devam eden bir döngüdür derseniz bence çok daha iyi olur.

Düzelteceğinize eminim.
Elinize sağlık

Hocam bu ilk yazım olduğu için kusura bakmayın. Yakında attığım hiçbir forumda sorun olmaz. Yorgun kafayla yaptım bazı şeyleri ekleyemedim.

BaşbuğBey · 15 Haz 2022

Eline sağlık

JavaScript ile Koşullar ve Döngüler

The VODKA

Uzman üye

Chester Hoca

Katılımcı Üye

Helmsys

Uzman üye

K3D

Katılımcı Üye

The VODKA

Uzman üye

BaşbuğBey

Katılımcı Üye

Sosyal medya sayfalarımız