Bölüm 2 · Sunum 1

Döngüler: for ve while

Aynı satırı yüz kez yazmadan yüz şekil çizmeyi öğreneceğiz.

Neden döngü?forwhileHangisi ne zaman?break ve continue

Yan yana 5 kare böyle çiziliyor. 100 kare için ne yaparsınız?

Bu beş satırda değişen ne, hep aynı kalan ne?

Değişen tek şey x: her seferinde 50 artıyor

x0
→+50
x50
→+50
x100
…
Döngü (loop)Aynı ya da benzer işlemleri, bir döngü değişkeni ve bir koşul yardımıyla otomatik olarak tekrarlayan programlama yapısıdır.

Örüntüyü tek bir değişkene bağlarız; değişken her turda güncellenir. On kare de yüz kare de aynı üç satırdır.

for döngüsü

for döngüsüBaşlangıç değeri, devam koşulu ve artış adımı en başta, noktalı virgülle ayrılmış üç parçada yazılır. Tekrar sayısı genellikle önceden bellidir.
Döngü değişkeniTur sayısını ya da konumu izleyen değişkendir. Çoğu zaman i, j ya da satir, sutun gibi anlamlı adlar kullanılır.

Üç parça, üç farklı an

SıraParçaNe zaman çalışır?GöreviÖrnek
1BaşlangıçBir kez, en baştaDeğişkene ilk değeri verirlet i = 0
2KoşulHer turdan öncetrue ise gövde çalışır; false ise döngü biteri < 5
3GüncellemeHer turun sonundaDeğişkeni bir sonraki tura hazırlari++
başlangıç→koşul?→gövde→güncelleme→koşul?→gövde→…

Güncelleme gövdeden sonra gelir; gövde içinde i hâlâ o turun değeridir.

Üç parçayı konsolda izleyelim

for döngüsünün akışı

for döngüsü akış şeması
  1. Başlangıç: i = 0
  2. Koşul: i < 5 mi?
  3. Evetse gövde çalışır.
  4. Artış: i = i + 1
  5. Koşula geri dön. Hayırsa döngü biter.

Beş kare, tek rect

i sırayla 0, 1, 2, 3, 4 olur. Her değerde rect(i * 50, …) farklı bir x konumuna çizer. Renk de i’ye bağlı.

Tur tur izleyelim

TurKoşul i < 5iÇizilen xTur sonu
1true (0 < 5)00i → 1
2true (1 < 5)150i → 2
3true (2 < 5)2100i → 3
4true (3 < 5)3150i → 4
5true (4 < 5)4200i → 5
6false (5 < 5)—döngü biter—

Koşul false olunca gövde bir kez daha çalışmaz; program döngüden sonraki satıra geçer.

Kısa yazımlar: ++, --, +=, -=

Uzun yazımKısayolAnlamı
i = i + 1i++i bir artar
i = i - 1i--i bir azalır
x = x + 10x += 10x on artar
skor = skor - 1skor -= 1skor bir azalır
Yeni bir kural değilYalnızca uzun yazımın kısa hâli.
Dikkat++ ve -- tek birimlik adımdır. Beşer beşer gitmek için i += 5. i++++ diye bir yazım yok.

Üçüncü parça her zaman “artış” olmak zorunda değil

GüncellemeBu parçaya alışkanlıkla “artış” denir. Ama azaltma (i--), ikişer ya da beşer adım (i += 2, i += 5) da olur. Önemli olan, tur sonunda değişkenin bir sonraki tura hazır olmasıdır.

i < 5 yerine i <= 5 yazarsak kaç kare çizilir?

Altı kare: sınırda bir fazla

En yaygın döngü hatasıi < 5 beş tur üretir (0, 1, 2, 3, 4). i <= 5 altı tur üretir. Izgara ve dizilerde bu tek fark sık sık hataya yol açar.

Parçaları boş bırakmak mümkün

YazımAnlamı
for (let i = 0; i < 5; )Artış yok. Gövdede i++ yazılmazsa sonsuz döngü.
for (; i < 5; i++)Başlangıç yok. i döngüden önce tanımlanmış olmalı.
for (let i = 0; ; i++)Koşul yok; hep true sayılır. Çıkmak için break gerekir.
for (;;)Üçü de boş. while (true) ile aynı; bilinçli break şart.

Noktalı virgüller yerinde kalır; aradaki ifade yazılmazsa o parça atlanmış sayılır.

Artış boş: güncelleme gövdede

Başlangıç boş: i önceden tanımlı

Koşul boş: çıkış break ile

for (;;): üçü de boş

Boş bırakmak ile unutmak aynı şey değil

Bilinçli boş bırakma nadirdirBaşlangıç düzeyinde üç parçayı da doldurun; okuması daha kolaydır. for (;;) ve koşulsuz for yalnızca break ile birlikte ve draw() dışında kullanılır.
Döngü draw içindeyseGövde her frame’de tekrarlanır. 10 turluk bir for, saniyede 60 frame ile gövdeyi saniyede 600 kez çalıştırır. Yavaşlama varsa tur sayısına ve draw’daki iş yüküne birlikte bakın.

Döngü gövdesinde de girinti

  • for ve while gövdesi, if gibi süslü parantez içindedir.
  • Gövde satırlarını içeri alın: çoğunlukla 2 ya da 4 boşluk.
  • İç içe döngülerde hangi satırın hangi döngüye ait olduğu ancak böyle görülür.
  • JavaScript girintiyi zorunlu kılmaz; yine de örneklerimizde hep kullanıyoruz. Tab ile boşluğu karıştırmayın.

while döngüsü

while döngüsüKoşul başta kontrol edilir; true olduğu sürece gövde tekrarlanır. Başlangıç döngüden önce, artış gövdenin içinde yazılır.

“Şu doğru olduğu sürece devam et” demenin yolu.

while ile sayaç

while akışı ve izleme tablosu

while döngüsü akış şeması
Tursayac < 5YazılanTur sonu
1truesayac: 01
2truesayac: 12
…………
5truesayac: 45
6falsedöngü biter—

for tablosuyla aynı mantık. Tek fark, başlangıcın ve artışın nerede yazıldığı.

Bu kodu çalıştırırsak ne olur?

Çalıştırmadan düşünün. Koşul ne zaman false olur?

Hiç bitmez: sonsuz döngü

Çalıştırmayınn hiç artmıyor; koşul hep true. Program donar, tarayıcı kilitlenebilir.

Gövdede, koşulu bir gün false yapacak bir güncelleme mutlaka olmalı.

draw içinde while (true) yazmayın

Animasyonu hızlandırmaz, durdururdraw bir frame’i bitirmeden sonraki frame’e geçilemez. Uzun bir while o frame’i bitirmez: ekran güncellenmez, fare ve tuş olayları da işlenmez.
Sürekli tekrar zaten varp5.js draw()’ı her frame kendisi çağırır. Ek bir “sonsuz while” gerekmez.

Aynı iş, iki yazım

for parçasıwhile’daki karşılığı
let i = 0 (başlangıç)Döngüden önceki let i = 0
i < 5 (koşul)while (i < 5)
i++ (artış)Gövdenin sonundaki i++

İkisi de konsola 0 1 2 3 4 yazar.

Döngüyle üç basit desen

Döngü ile basit desenler: yatay, dikey, eşmerkezli
Döngü değişkenini konuma ya da boyuta bağlamanın en sade örnekleri.

Yatay çizgiler: for

i her turda y konumunu 20 piksel kaydırır; x uçları sabittir.

Aynı çizgiler: while

Dikey çizgiler: değişen artık x

Eşmerkezli daireler

Merkez sabit, çap i ile büyüyor. circle(x, y, çap) tek bir çap alır.

Tek bir for ile renk tayfı

Mavi renk tayfı: üstte 0, altta 255
Mavi: üstte 0, altta 255
Kırmızı renk tayfı: solda 0, sağda 255
Kırmızı: solda 0, sağda 255
  1. Mavi: yatay şeritler; mavi bileşen 0’dan 255’e artsın.
  2. Kırmızı: dikey şeritler; kırmızı 0’dan 255’e artsın.
  3. İç içe döngü gerekmez. Tek tek renk yazmayın.
İpucuN şerit için renk = i * (255 / (N - 1)). Şerit yüksekliği height / N, genişliği width / N.

draw zaten tekrar ediyor. Onu döngü gibi kullanabilir miyiz?

background çağırmazsak önceki çizimler silinmez. Her frame’de bir çizgi eklesek ne olur?

Çizgiler birer birer birikir

İlk 8 frame’de her seferinde bir çizgi eklenir. for ile yazılan sürüm ise tek frame’de biter.

Üç yaklaşım

YaklaşımNe zaman?
for / while + her frame backgroundDesen her frame yeniden çizilir. Oyun ve animasyon iskeleti budur.
draw + biriktirme (background yok)Adım adım biriktirme; basit bir “çizim makinesi”.
draw içinde while (true)Kullanmayın: frame bitmez, tarayıcı kilitlenir.
DikkatBiriktirme örneğinde background’ı draw içine koyarsanız tuval her frame silinir ve yalnızca son çizgi kalır.

Hangisi ne zaman?

DurumÖneriGerekçe
Tur sayısı baştan belli (5 kare, 8×8 ızgara)forÜç parça tek satırda; artışı unutmak zor.
“Koşul doğru olduğu sürece” (hedef bulunana kadar)whileVurgu koşulda; tur sayısı baştan belli olmayabilir.
draw içinde belli sayıda nesne çizmekforFrame başına bilinen tur.

Kesin bir kural yok. “Beş kare çiz” için while de çalışır; ama for, “sayarak tekrarla” niyetini daha açık gösterir. Seçim, kodu okuyan insan içindir.

for (;;) ile while (true) eşdeğerdir; ikisinde de çıkış break ile yapılır.

Döngüler oyunlarda ne tekrarlar?

OyunDöngünün tekrarladığı işÇoğu zaman
Super Mario Bros.Ekrandaki her düşmanı ve jetonu güncellemek, çizmekfor
Pac-ManHer hayaleti sırayla hareket ettirmekfor
TetrisDolu satırları tarayıp silmek; parçanın bloklarını çizmekfor
Space InvadersHer gemiyi ve her mermiyi ilerletmekfor

while daha çok “can bitene kadar”, “doğru cevap gelene kadar”, “liste boşalana kadar” gibi işlerde öne çıkar.

İki oyun, iki döngü

  1. Tablodan ya da bildiğiniz oyunlardan iki örnek seçin.
  2. Her biri için yazın: döngü neyi tekrarlıyor?
  3. for mu while mu daha doğal? Birer cümleyle gerekçelendirin.

Erken çıkış: break ve continue

breakDöngüyü hemen bitirir. Kalan turlar çalışmaz; program döngüden sonraki satıra geçer.
“Hedef bulundu, yeter.”
continueYalnızca o turun geri kalanını atlar. Döngü bir sonraki turla sürer.
“Bu turu atla, sonrakine bak.”

İkisi de hem for hem while içinde kullanılabilir.

break: döngü biter

continue: yalnızca bir tur atlanır

İç içe döngüde break yalnızca içtekini kırar

Dış döngü sürer. İkisini birden kesmek için bir boolean bayrak (bulundu) ya da fonksiyon içinde return kullanılır.

Kontrollü sonsuz döngü

Bilinçli bir çıkışı olan while (true). draw içinde değil, setup ya da mantık kodunda kullanılır.

Konsolda hangi sayılar görünür?

Önce kâğıda yazın.

0 1 2 4 5 6

3 atlandı ama döngü sürdü. 7’de döngü tamamen bitti; 8 ve 9’a sıra gelmedi.

Yapay zekâyla: for ve while

  1. 0’dan 9’a kadar sayıları konsola yazdıran bir for isteyin.
  2. Eşdeğer bir while isteyin. Artış satırını bilerek silin ve ne olduğunu gözleyin. Gerekirse sayfayı yenileyin.
  3. Hangisinin daha okunabilir olduğunu bir cümleyle not edin.

Kod zamanı

  1. Yan yana 10 daire çizin; her biri bir öncekinden biraz daha büyük olsun.
  2. Merdiven: 8 kare sol üstten sağ alta çapraz dizilsin.
  3. Geri sayım: konsola 10’dan 1’e kadar sayın, sonra “Başla!” yazın.
  4. 1’den 100’e kadar sayıların toplamını bir döngüyle hesaplayıp konsola yazdırın.
  5. Zorlu: 1’den 30’a kadar sayın; 3’e tam bölünenleri atlayın, 25’i geçince durun.

Konsola ne yazılır?

  1. 10 7 4
  2. 10 7 4 1
  3. 10 7 4 1 -2
  4. Sonsuz döngü

1 hâlâ 0’dan büyük, yazılır. Sonraki değer −2: koşul yanlış, döngü biter.

Gövde kaç kez çalışır?

  1. 5
  2. 6
  3. 10
  4. 11

i sırayla 0, 2, 4, 6, 8, 10 olur. <= yüzünden 10 da dahil.

Sonunda konsola hangi sayı yazılır?

  1. 64
  2. 100
  3. 128
  4. 200

1, 2, 4, 8, 16, 32, 64… 64 hâlâ 100’den küçük; bir tur daha döner ve 128 olur. Tur sayısı baştan belli değil: while’ın doğal yeri.

Bugün ne öğrendik?

  • Döngü, tekrarı bir değişkene ve bir koşula bağlar.
  • for (başlangıç; koşul; güncelleme): başlangıç bir kez, koşul her turdan önce, güncelleme her turun sonunda.
  • while: koşul doğru kaldıkça. Güncellemeyi unutursanız sonsuz döngü.
  • Tur sayısı belliyse for, vurgu koşuldaysa while.
  • break döngüyü bitirir; continue yalnızca o turu atlar.
  • draw içinde while (true) yazılmaz.

Sıradaki ders

Döngünün içinde döngü

Izgaralar, dama tahtası ve dalgalanan daireler.

Sonraki sunum →Tüm sunumlar