Bölüm 1 · Sunum 5

Program nasıl karar verir?

Bugün sketch’lerimiz duruma göre farklı davranmayı öğrenecek.

if / elseGirintielse if zinciriİç içe koşullar

Skor 10 olunca “Kazandın!” yazsın. Olmadıysa daire çizsin.

draw her frame aynı satırları çalıştırıyor. Bazen yazı, bazen daire çizmesini nasıl sağlarız?

Günlük hayatta hep yapıyoruz

Yağmur yağıyorsa şemsiye al.
Yağmıyorsa alma.

Koşullu ifade (conditional statement)Belirli bir koşul doğruysa (true) bir kod bloğunu, değilse başka bir bloğu çalıştıran yapıdır.

Bir soru var, iki yol var. Program cevaba göre yollardan birini seçiyor.

Yazımı: `if`, `else if`, `else`

Koşul parantez içinde yazılır ve bir boolean üretir.
Süslü parantezler { } bloğun sınırını belirler.
Yukarıdan aşağı bakılır; ilk doğru dal çalışır, diğerleri atlanır.
else if ve else zorunlu değildir.

Sıcak mı, serin mi?

“Düzenle” ile sicaklik = 18 değerini 30 yapın. Sonra tam 25 yapın: hangi renk çıkar, neden?

Kararı çizerek göstermek: akış şeması

if/else dallanma akışı: koşula göre renk seçimi

Simge	Anlamı	Bu örnekte
Yuvarlak	Başla / bitiş	Şemanın girişi ve çıkışı
Elmas	Koşul sorusu	`sicaklik > 25`
Dikdörtgen	Yapılacak işlem	`fill`, `ellipse`

Şemada yolu izleyin

Fareyi alttaki çubuğun üstünde gezdirin. Program her seferinde iki yoldan yalnızca birini izler; 25’in tam üstünde ne oluyor?

Her akış şeması bir çıkışa varmalı

xkcd 1195: Başla kutusundan çıkan ok tek bir elmasa gidiyor; elmasın evet oku yine kendisine dönüyor — Kaynak: xkcd.com/1195, Randall Munroe (CC BY-NC 2.5)

Elmasın içinde şu yazıyor: “Bir dakika, bu akış şeması bir tuzak!”

Tek cevap “evet” ve ok yine aynı elmasa dönüyor.
“Hayır” dalı yok, bitiş yok.

Kendi şemanızı çizerkenHer elmastan iki ok çıkmalı ve her yol sonunda bitişe ulaşmalı.

İki kod da aynı çalışıyor. Hangisini okumak daha kolay?

Girinti (indentation)

Blok içindeki satırları içeri almaktır.
Hangi satırın hangi bloğa ait olduğu göz ucuyla görülür.
İç içe koşullarda girinti yoksa iz çabuk kaybolur.
Örneklerimizin hepsinde blok gövdesi girintilidir.

JavaScript’te zorunlu değilGirinti bozuk olsa da kod çoğu zaman çalışır. Hata sessizce okunabilirlikte birikir. “Çalışıyor” demek yetmez.

Python’da zorunluOrada girinti sözdiziminin parçasıdır. Yanlışsa program hiç çalışmaz: IndentationError.

Girintiyi kim için yapıyoruz?

Çalışıyor işte. Girinti kimin umurunda?

😎

bugün

Bu } hangi if’i kapatıyor? Bu kodu kim yazmış böyle?

😤

üç ay sonra

…ben yazmışım.

😶

dosyanın tarihine bakınca

Kodu en çok okuyacak kişi gelecekteki sizsiniz.

Boşluk mu, Tab mı?

Boşluk (space)Klavyedeki uzun boşluk çubuğu. Çoğu proje ve p5.js Web Editor 2 ya da 4 boşluk kullanır.

Sekme (Tab)Tab tuşu; genellikle Q’nun solunda, Caps Lock’un üstünde. Editörler bu tuşa basınca boşluk üretecek şekilde ayarlanabilir.

İkisini karıştırmayınAynı dosyada hem boşluk hem Tab kullanmak, başka editörlerde satırların kaymış görünmesine yol açar. Birini seçin ve hep onu kullanın.

Trafik ışığında üç durum var. `if / else` yalnızca iki yol veriyor.

Kırmızı, sarı, yeşil. Üçüncü yolu nereye koyacağız?

`else if`: araya yeni bir soru

function setup() {
  createCanvas(620, 400);
  noLoop();
}

function draw() {
  background(255);
  textAlign(CENTER);
  textSize(15);
  noStroke();

// —— if ——
  let durum = "kirmizi";
  fill(21, 101, 192);
  text("if", 130, 78);
  textSize(11);
  fill(198, 40, 40);
  text('durum = "kirmizi"', 130, 98);
  fill(40);
  rect(100, 110, 60, 230);
  fill(90);
  ellipse(130, 154, 40, 40);
  ellipse(130, 224, 40, 40);
  ellipse(130, 294, 40, 40);
  if (durum === "kirmizi") {
    fill(220, 60, 60);
    ellipse(130, 154, 40, 40);
  } else if (durum === "sari") {
    fill(240, 200, 50);
    ellipse(130, 224, 40, 40);
  } else {
    fill(70, 200, 90);
    ellipse(130, 294, 40, 40);
  }

// —— else if ——
  durum = "sari";
  textSize(15);
  fill(21, 101, 192);
  text("else if", 310, 78);
  textSize(11);
  fill(184, 134, 11);
  text('durum = "sari"', 310, 98);
  fill(40);
  rect(280, 110, 60, 230);
  fill(90);
  ellipse(310, 154, 40, 40);
  ellipse(310, 224, 40, 40);
  ellipse(310, 294, 40, 40);
  if (durum === "kirmizi") {
    fill(220, 60, 60);
    ellipse(310, 154, 40, 40);
  } else if (durum === "sari") {
    fill(240, 200, 50);
    ellipse(310, 224, 40, 40);
  } else {
    fill(70, 200, 90);
    ellipse(310, 294, 40, 40);
  }

// —— else ——
  durum = "yesil";
  textSize(15);
  fill(21, 101, 192);
  text("else", 490, 78);
  textSize(11);
  fill(46, 125, 50);
  text('durum = "yesil"', 490, 98);
  fill(40);
  rect(460, 110, 60, 230);
  fill(90);
  ellipse(490, 154, 40, 40);
  ellipse(490, 224, 40, 40);
  ellipse(490, 294, 40, 40);
  if (durum === "kirmizi") {
    fill(220, 60, 60);
    ellipse(490, 154, 40, 40);
  } else if (durum === "sari") {
    fill(240, 200, 50);
    ellipse(490, 224, 40, 40);
  } else {
    fill(70, 200, 90);
    ellipse(490, 294, 40, 40);
  }
}

Zincir nasıl çalışır?

durum === "kirmizi" mı? Evetse kırmızıyı yak, zincirden çık.
Değilse: durum === "sari" mı? Evetse sarıyı yak, zincirden çık.
İkisi de değilse: else çalışır, yeşili yak.

Her seferinde yalnızca bir dalZincir, uyan ilk dalı çalıştırır. Sonrakilere bakılmaz.

Örnekteki numaraÖnce üç lamba da gri çizilir. Zincir yalnızca uygun lambayı yeniden boyar.

Oyunlar sürekli karar verir

Oyun	Koşul	Sonuç
Super Mario	1-Up mantarı alındı	Can bir artar
Pac-Man	Hayaletle çarpışma var ve güç hapı aktif değil	Bir can gider
Tetris	Bir satır tamamen doldu	Satır silinir, skor artar
Futbol oyunu	Top kale çizgisini geçti	Gol; skor güncellenir
Candy Crush	Üç ya da daha fazla aynı renk yan yana	Taşlar patlar, puan gelir

Aynı iskelet birazdan yazacağımız Daire Tıklama oyununda da var: isabet varsa skor artar, hedef skora ulaşılınca oyun biter.

Can barı: `else if` zinciri iş başında

Fareyi sağa sola götürün. Pokémon’dan dövüş oyunlarına kadar can barlarının renk değiştirmesi böyle bir zincirdir; her an yalnızca bir dal çalışır.

Sevdiğiniz oyundan üç karar

Bildiğiniz bir oyundan üç durum seçin.
Her birini kısa bir koşul cümlesi olarak yazın: “… ise … olur.”
Birini seçip küçük bir if / else iskeletine ya da akış şemasına dönüştürün.

Skor yalnızca can varken ve oyun bitmemişken artsın.

İki ayrı koşul var. Bunu kaç farklı biçimde yazabilirsiniz?

İç içe `if` ya da tek `if` + `&&`

İç içe koşul (nested conditional)Bir if bloğunun içine başka bir if yazmaktır. Önce dış koşul, doğruysa iç koşul sorulur.

İki yazım da aynı kararı verir. Arada başka iş yoksa birleşik koşul daha sadedir.

İki yazım, aynı akış

Dört kombinasyonu da deneyin. Turuncu yol, programın o değerlerle izlediği yoldur.

Her dalda farklı mesaj: üç çıkış

Üç yol var: devam, oyun bitti, can yok.

Neden tek && yetmiyor?Burada else’ler de iş yapıyor. Tek bir birleşik koşul yalnızca iki yol verir.

Üç çıkışlı akış: yolu izleyin

Önce tahmin edin: can > 0 false iken oyunBitti’yi değiştirmek sonucu etkiler mi?

Dışarıda birleşik koşul, içeride skor eşiği

Her düzeydeki koşul tek bir karşılaştırma olmak zorunda değil.

BirleştirilebilirDış ya da iç koşul &&, ||, ! ile kurulmuş bir ifade olabilir.

Birleşik koşullu akış: yolu izleyin

Üç düğme, sekiz kombinasyon. Kaç tanesi “Seviye atlandı” mesajına ulaşır?

İki küçük not

Boş else yazmayınelse yalnızca gerçekten yapılacak bir iş varsa eklenir. else { } gereksizdir.

|| için de benzer eşdeğerlik var“Can bitti ya da süre bitti → oyunu bitir” kuralı art arda iki if ile ya da if (can === 0 || sure === 0) ile yazılabilir.

Konsolda hangi satırlar, hangi sırayla görünür?

Adım adım izleyelim

Oyun kuralından koda

Üç kısa oyun kuralı yazın. Örnek: “can sıfırsa bitir”, “skor 10 olunca seviye atla”.
Bir yapay zekâya bu kuralları if / else if / else iskeletine çevirmesini söyleyin.
Gelen kodu denetleyin: = ile === doğru mu? && doğru yerde mi? Hatalı atamaları düzeltin.

Kodunuzu okunabilirlik açısından gözden geçirtin

Bugün yazdığınız bir sketch’i kopyalayın (örneğin sıcaklık rengi).
Bir yapay zekâya şunu sorun: girinti tutarlı mı, değişken adları anlamlı mı (camelCase), sabitler BÜYÜK_HARF mi, gereksiz karmaşık yer var mı?
Kısa, madde madde öneri isteyin. “Kodun mantığını değiştirme” deyin.
Önerileri uygulayıp yeniden çalıştırın. Davranış aynı kalmalı; yalnızca okunuş iyileşmeli.

Kod zamanı

Sıcaklık örneğine üçüncü bir renk ekleyin: 10’un altı mavi, 10–25 arası yeşil, 25’in üstü turuncu.
Kayan daire tuvalin sağ yarısına geçince rengi değişsin.
Yanıp sönen ışık: bir daire bir saniye kırmızı, bir saniye yeşil olsun. İpucu: frameCount % 120.
Zorlu: İlk dersteki söz. Top sağa gitsin; kenara değince yönünü tersine çevirsin. İpucu: x ve hiz diye iki değişken.

skor = 10 iken konsola ne yazılır?

Yalnızca A
A ve B
Yalnızca B
C

İlk doğru dal çalışır, zincir biter. İkinci koşul da doğru ama ona hiç bakılmaz. Sıralama önemli.

Bu kodda sinsi bir hata var. Ne olur?

Hiçbir şey yazılmaz.
“Kazandın!” yazılır ve skor 10 olur.
Program hata verip durur.

Tek = atamadır: skor kutusuna 10 koyar. Koşul da doğru sayılır. Soru sormak için ===.

can = 0, oyunBitti = true. `mesaj` ne olur?

“Devam”
“Oyun bitti”
“Can yok”

Dış koşul can > 0 yanlış. İçerideki if’e hiç girilmez; dıştaki else çalışır.

Merak edenler için kaynaklar

Patt Viraif, else if, elseKoşullu ifadeleri görsel örneklerle anlatan ders.pattvira.com › intro-to-creative-coding › conditionals-if-else-if-else The Coding TrainConditional Statementsif ile ilk kararlar.thecodingtrain.com › 3-conditionals › 1-conditionals

The Coding Trainelse, else if, &&, ||Zincir ve birleşik koşullar tek videoda.thecodingtrain.com › 3-conditionals › 3-else-if-and-or Happy CodingIf StatementsYazılı anlatım ve denenebilir örnekler (İngilizce).happycoding.io › tutorials › p5js › if-statements

Bugün ne öğrendik?

if bir soru sorar; doğruysa bloğu çalışır, değilse else.
else if ile ikiden fazla yol kurulur; uyan ilk dal çalışır.
Girinti zorunlu değil ama okunabilirlik için şart. Boşluk ile Tab karışmaz.
Akış şeması: yuvarlak başla/bitiş, elmas koşul, dikdörtgen işlem.
İç içe if ile && çoğu zaman aynı kararı verir.
if (skor = 10) bir sorudur sanmayın; atamadır.

Sıradaki ders

İlk oyunumuz

Fare, mesafe ve Daire Tıklama.

Sonraki sunum →← Önceki