Bölüm 1 · Sunum 4

Değişkenler ve operatörler

Programın bir şeyi aklında tutmasını ve doğru mu yanlış mı diye sormasını öğreneceğiz.

Değişken nedir?let ve constnumber, string, boolean===, &&, ||, !

Oyunda skor şu an 7. Program bunu nerede tutuyor?

draw her frame baştan çalışıyor. Bir sonraki frame’de skorun 7 olduğunu nereden bilecek?

Değişken: üstünde adı yazan bir kutu

skor7

Kutunun bir adı var: skor.
İçinde bir değer duruyor: 7.
İstediğimiz zaman içine bakabiliriz. Buna okumak denir.
İstediğimiz zaman içindekini değiştirebiliriz. Buna atamak denir.

Değişken

Değişken (variable)Program çalışırken değeri okunabilen, değiştirilebilen ya da sabit tutulabilen, isimlendirilmiş bellek alanıdır.

letYeni bir kutu aç.

skorKutunun adı.

=İçine şunu koy.

0İlk değer.

Kutunun adı aynı kalır, içi değişir

skor0

→skor = skor + 1

skor1

→skor = skor + 1

skor2

skor = skor + 1 nasıl okunur?Önce sağ taraf hesaplanır: kutunun içindekine 1 ekle. Sonra sonuç aynı kutuya geri yazılır. Bu bir denklem değil, bir komut.

Skor her frame 1 artsın

Kutu en üstte, bir kez açılıyor. draw her frame aynı kutuya bakıp içini 1 artırıyor.

`let skor = 0;` satırını `draw`’ın içine taşırsak ne görürüz?

Sayı yine artar mı? Tahmininizi söyleyin, sonra deneyelim.

Ekranda hep 1 yazar

Her frame yeni bir kutudraw içinde açılan kutu, frame bitince çöpe gider. Oyun boyunca yaşaması gereken değerleri setup ve draw’ın dışında, en üstte tanımlayın.

Kutu açmanın üç yolu

letİçi sonradan değişebilen kutu. Skor, konum, can.

constKilitli kutu. Bir kez değer verilir, sonra değiştirilemez. Hedef skor, tuval ölçüsü.

varEski sözdizimi. Beklenmedik davranışlara yol açabilir. Bu derste kullanmıyoruz.

let ve const blok kapsamlıdır: süslü parantez { } içinde tanımlanırsa dışarıdan erişilemez. var ise fonksiyon kapsamlıdır.

Dört kutu, üç tür

skor0number

oyunAdi"Daire Tıklama"string

oyunBittifalseboolean

HEDEF_SKOR 🔒10number · sabit

Üç temel veri türü

Tür	Ne tutar?	Örnek	Oyunda nerede?
number	Tam ya da ondalıklı sayı	`42`, `3.14`, `-7`	Konum, boyut, skor, can
string	Metin (tırnak içinde)	`"Merhaba"`, `'p5.js'`	Skor yazısı, “Kazandın!” mesajı
boolean	Doğru ya da yanlış	`true`, `false`	`oyunBitti`, `hedefVuruldu`

JavaScript’te undefined, null, object gibi başka türler de var. Şimdilik bu üçü yeterli.

Kutuya iyi bir ad koymak

Anlamlı adlarhedefX, topHizi, kalanSure

Belirsiz adlara, b, temp1: kodu izlemeyi zorlaştırır.

x ve y gibi tek harfli adlar koordinat için yaygındır.

camelCase (deve notasyonu)İlk kelime küçük harfle başlar; sonraki kelimelerin ilk harfi büyüktür. Arada boşluk ya da alt çizgi yoktur.

Sabitlerde BÜYÜK_HARFTüm harfler büyük, kelimeler alt çizgiyle ayrılır: HEDEF_SKOR, MAKS_CAN.

İkisi de dilin zorunlu kuralı değil, topluluğun benimsediği bir örf (convention). Örneklerimizde hep bu düzeni kullanacağız.

`x = 5` ile `x === 5` aynı şey mi?

Biri bir şey yapıyor, diğeri bir şey soruyor. Hangisi hangisi?

Tek eşittir atar, üç eşittir sorar

x = 5Atama“x kutusuna 5 koy.” Kutunun içi değişir.

x === 5Karşılaştırma“x’in içindeki 5 mi?” Kutu değişmez; cevap true ya da false olur.

DikkatEşitlik sorusu için == de vardır ama tür dönüşümü yapar: "5" == 5 sonucu true çıkar. Örneklerimizde hem değeri hem türü kontrol eden === kullanıyoruz.

Metinle (string) neler yapılır?

İşlem	Yazımı	Örnek	Sonuç
Birleştirme	`"a" + "b"`	`"Skor: " + 7`	`"Skor: 7"`
Uzunluk	`metin.length`	`"p5.js".length`	`5`
Büyük / küçük harf	`.toUpperCase()` / `.toLowerCase()`	`"Hi".toUpperCase()`	`"HI"`
Eşitlik	`===`	`durum === "bitti"`	`true` ya da `false`

Mini oyunlarımız çoğunlukla sayı ve boolean ile ilerler. Yine de skor yazısı, seviye adı ya da “Kazandın!” gibi mesajlar string’dir.

Skoru ekrana yazmak

Skor number olarak tutulur; ekrana yazarken metinle birleştirilir. Metnin rengi fill ile ayarlanır.
Sayıyı metne çevirmenin başka yolları: String(skor) ya da skor + "". Tersi (Number("10"), parseInt) şimdilik gerekmiyor.

Karşılaştırma operatörleri

Her karşılaştırmanın sonucu bir boolean’dır: true ya da false.

Operatör	Sorduğu soru	Örnek	Sonuç
`===`	Tam eşit mi? (değer + tür)	`skor === 10`	skor 10 ise `true`; 7 ise `false`
`!==`	Eşit değil mi?	`durum !== "bitti"`	durum `"oynuyor"` ise `true`
`<`	Küçük mü?	`x < 100`	x 50 ise `true`; 150 ise `false`
`>`	Büyük mü?	`y > 200`	y 250 ise `true`; 100 ise `false`
`<=`	Küçük ya da eşit mi?	`skor <= 5`	skor 5 ise `true`; 7 ise `false`
`>=`	Büyük ya da eşit mi?	`can >= 1`	can 1 ise `true`; 0 ise `false`

`==` ile `===` farkı: tür dönüşümü

"10" bir string, 10 ise bir number. Görünüşte aynılar ama türleri farklı.

== karşılaştırmadan önce türleri birbirine çevirmeye çalışır (type coercion).
=== hem değere hem türe bakar.
Aynı ayrım “eşit değil” için de geçerli: != dönüştürür, !== dönüştürmez.

İfade	Sonuç
`"10" == 10`	true
`"10" === 10`	false
`10 === 10`	true
`"10" != 10`	false
`"10" !== 10`	true

Sürpriz eşleşmeleri önlemek için örneklerimizde === ve !== kullanıyoruz.

“Canım varsa ve oyun bitmediyse devam et.”

Burada iki ayrı soru var. İkisini tek bir soruda nasıl birleştiririz?

Mantıksal operatörler

Karşılaştırmaların ürettiği true / false değerlerini birleştirirler. Sonuç yine bir boolean’dır.

Operatör	Anlamı	Örnek	Sonuç
`&&`	VE: iki koşul da doğru olmalı	`x > 0 && x < 400`	x 150 iken `true`; 500 iken `false`
`\|\|`	VEYA: en az biri doğru yeter	`can === 0 \|\| sure === 0`	can 0, sure 30 iken `true`
`!`	DEĞİL: değeri tersine çevirir	`!oyunBitti`	oyunBitti `false` ise `true`

Sorunun cevabı: can > 0 && !oyunBitti

İki yeni sözcük

OperandBir operatörün üzerinde işlem yaptığı değer ya da ifadedir.

skor === 10: operatör ===; operandlar skor ve 10.
x > 0 && x < 400: &&’nin operandları iki koşul.
!oyunBitti: ! tek operand alır.

Doğruluk tablosuBir ifadenin, farklı girdi değerlerinde true mu false mu olduğunu satır satır gösteren tablodur.

İki operand varsa 2 × 2 = 4 durum.
Tek operand varsa 2 durum.

`&&` (VE): ikisi de doğru olmalı

A	B	A && B
true	true	true
true	false	false
false	true	false
false	false	false

Oyunda: can > 0 && !oyunBitti

can	oyunBitti	can > 0	!oyunBitti	Sonuç
3	false	true	true	true
0	false	false	true	false
3	true	true	false	false

`||` (VEYA): en az biri doğru yeter

A	B	A \|\| B
true	true	true
true	false	true
false	true	true
false	false	false

Oyunda: can === 0 || sure === 0

can	sure	can === 0	sure === 0	Sonuç
0	45	true	false	true
2	0	false	true	true
2	45	false	false	false

`!` (DEĞİL): tersine çevir

A	!A
true	false
false	true

! tek bir boolean değeri tersine çevirir.
!oyunBitti: oyun bitmediyse true, bittiyse false.
“Oyun bitmediyse” diye okunur.

Üç tablo yan yana

VE, VEYA ve DEĞİL için doğruluk tabloları — İki operandlı operatörlerde 4 durum, `!` için 2 durum.

Matematikte `20 < x < 60` yazarız. JavaScript’te de çalışır mı?

x = 70 olsun. 70, 20 ile 60 arasında değil. Sizce sonuç ne çıkar?

Çalışır ama yanlış cevap verir

JavaScript önce 20 < 70 sorusunu çözer: true.
Sonra true < 60 sorusunu sorar.
Sonuç: true. Oysa 70 aralıkta değil!

Aralık her zaman && ile yazılırTuvalin içinde mi? x > 0 && x < width

Python’da olur, burada olmazBazı diller zincirli karşılaştırmaya izin verir. Matematikte geçerli görünen her yazım kodda aynı anlama gelmez; dilin kuralları esastır.

Mantıksal operatörlerle şekil boyamak: `&&`

function setup() {
  createCanvas(760, 430);
  noLoop();
}

function draw() {
  background(245);
  textAlign(CENTER);

fill(35);
  textSize(16);
  text("Mantıksal operatörler ile şekil renklendirme", 380, 30);
  textSize(12);
  text("Tüm sonuçlar tek statik tuvalde", 380, 52);

noStroke();

let secili = color(45, 110, 170);
  let diger = color(195);

// && : dört kenarlı VE eşit kenarlı
  fill(55);
  textSize(13);
  text("dört kenarlı && eşit kenarlı", 380, 82);

let dortKenar = true;
  let esitKenar = true;
  if (dortKenar && esitKenar) {
    fill(secili);
  } else {
    fill(diger);
  }
  rect(125, 100, 110, 110);      // kare

dortKenar = true;
  esitKenar = false;
  if (dortKenar && esitKenar) {
    fill(secili);
  } else {
    fill(diger);
  }
  rect(445, 125, 180, 60);       // dikdörtgen

fill(secili);
  textSize(12);
  text("true — kare seçildi", 180, 232);
  fill(90);
  text("false — kenarlar eşit değil", 535, 232);

// || : üçgen VEYA daire
  stroke(210);
  line(60, 255, 700, 255);
  noStroke();
  fill(55);
  textSize(13);
  text("üçgen || daire", 380, 282);

let ucgenMi = true;
  let daireMi = false;
  if (ucgenMi || daireMi) {
    fill(secili);
  } else {
    fill(diger);
  }
  triangle(90, 395, 170, 295, 250, 395);

ucgenMi = false;
  daireMi = false;
  if (ucgenMi || daireMi) {
    fill(secili);
  } else {
    fill(diger);
  }
  rect(330, 305, 100, 90);       // kare

ucgenMi = false;
  daireMi = true;
  if (ucgenMi || daireMi) {
    fill(secili);
  } else {
    fill(diger);
  }
  ellipse(570, 350, 100, 100);   // daire

fill(secili);
  text("true", 170, 418);
  fill(90);
  text("false", 380, 418);
  fill(secili);
  text("true", 570, 418);
}

Mantıksal operatörlerle şekil boyamak: `||`