JavaScrip
t
Temelleri
JSE: Modül 4:
Kontrol Akışı -
Koşullu
Yürütme ve
Döngüler
Celal AKSU
Instructor
Koşullu ifadeler ( conditional
statement ) - if değimi
if (koşul) { // mantıksal bir durumun true değerinde çalışır
koşul - true kod bloğu
}
let isUserReady = confirm("Hazır mısınız?");
[Link](isUserReady);
if (isUserReady) {
alert("Kullanıcı hazır!");
}
if (isUserReady)
alert("Kullanıcı hazır!");
Koşullu ifadeler - if değimi
if (isUserReady)
alert("Kullanıcı hazır!");
if (isUserReady == true)
alert("Kullanıcı hazır!");
if (true)
alert("Kullanıcı hazır!");
if bloğu ve kapsam ( scope )
let birimFiyat = 10;
let adet = prompt("Kaç adet sipariş ediyorsunuz?", 0);
if (adet > 0) {
let toplam = birimFiyat * adet;
[Link](toplam);
}
[Link](toplam); // -> Uncaught ReferenceError: toplam is not defined
İç içe if değimi
let kullanıcıYası = 19;
let puan = 703;
let kartDegeri = 299;
let komisyon = 9.99;
if (kullanıcıYası > 21) {
if (kartDegeri >= 300 || puan >= 500) {
komisyon = 0;
}
}
[Link](komisyon);
if (kullanıcıYası > 21 && (kartDegeri >= 300 || puan >= 500)) {
komisyon = 0;
}
[Link](komisyon);
if . . . else değimi
if (koşul) { // mantıksal bir durumun - true değerinde çalışır
koşul - true kod
} else { // mantıksal bir durumun - false değerinde çalışır
koşul - false kod
}
let isUserReady = confirm("Hazır mısınız?");
if (isUserReady) {
[Link]("Kullanıcı hazır!");
} else {
[Link]("Kullanıcı hazır değil!");
}
if . . . else değimi - sadece if ile
let isUserReady = confirm("Hazır mısınız?");
if (isUserReady) {
[Link]("Kullanıcı hazır!");
} else {
[Link]("Kullanıcı hazır değil!");
}
let isUserReady = confirm("Hazır mısınız?");
if (isUserReady) {
[Link]("Kullanıcı hazır!");
}
if (isUserReady == false) {
[Link]("Kullanıcı hazır değil!");
}
if . . . else . . . if değimi
Bir değişkenin birden fazla olabilecek değeri varsa;
Ve bu değerlerin tamamının kontrol edilmesi gerekiyorsa
if (koşul/lar_1) {
kod
} else if (koşul/lar _2) {
kod
} else if (koşul/lar _3) {
kod
} else {
kod
}
let sayı = prompt("Bir sayı girin", 0);
if (sayı < 10) {
alert("<10");
} else if (sayı < 30) {
alert("<30");
} else if (sayı < 60) {
alert("<60");
} else if (sayı < 90) {
alert("<90");
} else if (sayı < 100) {
alert("<100");
} else if (sayı == 100) {
alert("100")
} else {
alert(">100")
}
Ternary operatör :
koşul ? true_durumu : false_durumu
let start = confirm("Start?");
let mesaj = start ? "İşte başlıyoruz!" : "İptal edildi";
alert(mesaj);
switch … case değimi
Bir değişkenin/ifadenin birden fazla durumu kontrol edilir.
switch (ifade) {
case birinci_durum:
kod
break;
case ikinci_durum:
kod
break;
default: // Konrol edilen durumların dışında kalanlar için
kod
}
let kapı = prompt("Kapı seçin: a, b veya c");
let win = false;
switch (kapı) {
case "a":
alert("A Kapısı: boş");
break;
case "b":
alert("B Kapısı: ana ödül");
win = true;
break;
case "c":
alert("C Kapısı: boş");
break;
default:
alert("Geçit yok " + String(kapı));
}
if (win) {
alert("Kazanan!");
}
let puan = 15; // Öğrencinin puanı
switch (true) {
case (puan >= 85 && puan <= 100):
[Link]("Notunuz: 5");
break;
case (puan >= 70 && puan < 85):
[Link]("Notunuz: 4");
break;
case (puan >= 60 && puan < 70):
[Link]("Notunuz: 3");
break;
case (puan >= 50 && puan < 60):
[Link]("Notunuz: 2");
break;
case (puan >= 0 && puan < 50):
[Link]("Notunuz: 1");
break;
default:
[Link]("Geçersiz puan. Puan 0 ile 100 arasında olmalı.");
}
<!DOCTYPE html>
<html lang="tr"> hesap_makinesi.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hesap Makinesi</title>
<script src="hesap_makinesi.js"></script>
</head>
<body>
<input type="number" id="sayi1" placeholder="Birinci sayıyı girin">
<input type="number" id="sayi2" placeholder="İkinci sayıyı girin">
<select id="islem">
<option value="topla">Topla</option>
<option value="cikar">Çıkar</option>
<option value="carp">Çarp</option>
<option value="bol">Böl</option>
</select>
<button onclick="hesapla()">Hesapla</button>
<label id="sonuc">Sonuç:</label>
</body>
</html>
function hesapla() {
let sayi1 = parseFloat([Link]('sayi1').value);
let sayi2 = parseFloat([Link]('sayi2').value);
hesap_makinesi.js
let islem = [Link]('islem').value;
let sonuc;
if (isNaN(sayi1) || isNaN(sayi2)) {
sonuc = "Lütfen geçerli iki sayı girin.";
} else {
switch (islem) {
case 'topla':
sonuc = sayi1 + sayi2;
break;
case 'cikar':
sonuc = sayi1 - sayi2;
break;
case 'carp':
sonuc = sayi1 * sayi2;
break;
case 'bol':
if (sayi2 !== 0) {
sonuc = sayi1 / sayi2;
} else {
sonuc = "Bir sayıyı sıfıra bölemezsiniz.";
}
break;
default:
sonuc = "Lütfen bir işlem seçin.";
}
}
[Link]('sonuc').textContent = "Sonuç: " + sonuc;
}
Döngüler - loops
Belirli sayıda tekrarlanan döngüler
Bazı koşullar karşılana kadar devam eden döngüler
while
while(koşul) {
kod bloğu
}
Koşul "true" oldukça kodlar tekrar tekrar çalışır.
Kodların çalışmaması için koşulun "false" olması gerekir.
Koşul hiçbir zaman false olmaz ise sonsuz ( infinity ) döngü oluşur.
Koşul yerine "true" yazarakta kullanabiliriz
let devam = true;
while (devam == true) {
[Link]("Döngü çalışıyor");
}
Tarayıcıda deneyiniz.
let devam = true;
while (devam != true) {
let durum = confirm(`Döngü devam etsin?`);
devam = durum === true ? true : false;
}
Döngü kavramları - sayaç / counter
Döngünün kaç kez çalıştığını görmek
Döngüde kontrol edilen sayısal değişkenin değerini
değiştirmek
Sayaç arttırma counter++ veya counter =
counter + X
let isOver = false;
Sayaç azaltma
let counter = 1;
counter-- veya counter = counter - X
while (isOver != true) {
let continueLoop = confirm(`[${counter}] Döngü devam etsin?`);
isOver = continueLoop === true ? false : true;
counter = counter + 1;
}
Let sayaç = 0
While ( sayaç < 10 ) {
[Link](`Döngü ${sayaç}. Kez çalıştı. `)
sayaç ++
}
do . . . while
do {
kod bloğu
} while(koşul);
While'den farkı - kodlar en az bir kez çalışır
let isOver;
let counter = 1;
do {
isOver = !confirm(`[${counter++}] Döngüye devam et?`);
} while (!isOver);
for
for (başlatma; koşul; artış) {
kod bloğu
}
for (let i = 0; i < 10; i++) {
[Link](i);
}
for bileşenleri
Başlatma : Yeni bir değişken tanımlanır, ilk değer
atanır.
Sadece döngüde geçerlidir.
let i = 0 ( başlangıç değeri yapılacak işe göre
değişir )
Koşul : Her döngüde kontrol edilir.
true ise döngü devam eder.
Genelde başlatma değişkeni kontrol edilir.
Arttırma: Döngü değişkeninin değeri arttırılır veya
azaltılır
Dizilerle kullanımı
Koşul içinde kontrol edilecek veri farklı bir yöntemle
alınabilir.
let values = [10, 30, 50, 100];
let sum = 0;
for (let i = 0; i < [Link]; i++) {
sum += values[i];
}
[Link](sum); // -> 190
Uygulama
let isimler = [];
let isOver = false;
while (!isOver) {
let isim = prompt("Başka bir isim girin veya iptal tuşuna basın.");
if (isim!= null) {
[Link](isim);
} else {
isOver = true;
}
}
for (let i = 0; i < [Link]; i++){
[Link](isimler [i]);
}
for . . . of
Diziler üzerinde kolay işlem yapmak için kullanılır.
for (let dizi_değişkeni of dizi) {
kod bloğu
}
dizi_değişkeni : Dizi elemanlarını tek tek tutmak için
kullanılır. Sırayla her döngüde bir eleman atanır.
dizi : Üzerinde işlem yapılacak dizi değişkenin adı
let değerler = [10, 30, 50, 100];
let toplam = 0;
for (let sayı of değerler) {
toplam += sayı;
}
[Link](toplam); // -> 190
let cities = [
{ name: "New York", population: 18.65e6 },
{ name: "Cairo", population: 18.82e6 },
{ name: "Mumbai", population: 19.32e6 },
{ name: "São Paulo", population: 20.88e6 },
{ name: "Mexico City", population: 21.34e6 },
{ name: "Shanghai", population: 23.48e6 },
{ name: "Delhi", population: 25.87e6 },
{ name: "Tokyo", population: 37.26e6 }
];
for (let city of cities) {
if ([Link] > 20e6) {
[Link](`${[Link]} (${[Link]})`);
}
}
for . . . in
Nesneler üzerinde işlem yapmak için kullanılır.
for (let anahtar in nesne_adı) {
kod bloğu
}
anahtar : Nesne içindeki key değeri atanır
nesne_adı : Nesne değişkeninin adı
let kullanıcı = {
isim: "Calvin",
Soyadı: "Hart",
yaş: 66,
e-posta: "CalvinMHart@[Link]"
};
for (let anahtar in kullanıcı) {
[Link](anahtar); // -> ad, soyad, yaş, e-posta
// [Link](kullanıcı.isim); // KULLANILMAZ
[Link](kullanıcı[isim]);
};
Döngü değimleri - break , continue
break : döngüyü tamamen sonlandırmak için kullanılır.
uygun bir koşul kontrol edilerek yapılabilir
continue : döngünün SADECE BİR TURUNU
sonlandırmak için kullanılır.
uygun bir koşul kontrol edilerek yapılabilir
continue değiminden sonra gelen kodlar
çalıştırılmadan döngü turu atlanır.
break
let i = 0;
// Sonsuz bir döngü
while (true){
[Link](i);
i++;
if (i >= 5) {
break;
}
}
alert(`Döngüden bir kesme ile çıkıldı (${i}).`);
continue
for (let i = 0; i < 10; i++) {
if (i == 3) {
continue;
}
[Link](i);
}
başlık
açıklama
kod