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.

Bir oyunun hafızası: bir avuç kutu

Düğmelere tıklayın. Ekranda gördüğünüz her şey (kalpler, altın, seviye) sağdaki kutulardan okunuyor. Oyunu kaydetmek, bu kutuların içindekileri bir yere yazmaktır.

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ürNe tutar?ÖrnekOyunda nerede?
numberTam ya da ondalıklı sayı42, 3.14, -7Konum, boyut, skor, can
stringMetin (tırnak içinde)"Merhaba", 'p5.js'Skor yazısı, “Kazandın!” mesajı
booleanDoğru ya da yanlıştrue, falseoyunBitti, hedefVuruldu

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

Kutu küçük gelirse: 255’ten sonrası

Pac-Man 1980Seviye sayısı 0–255 arası değer alabilen küçük bir kutuda tutuluyordu. 256. seviyede sayı kutuya sığmaz, ekranın yarısı anlamsız karakterlerle dolar.
The Legend of Zelda 1986Cüzdan en çok 255 rupi alır. Sebep aynı: paranın tutulduğu kutu ancak o kadarını saklayabiliyor.
Bizde durumJavaScript’te sayı kutuları çok daha geniştir; skorunuz 255’te takılmaz. Ama her değişkenin bir türü ve o türün bir sınırı olduğu fikri bütün dillerde vardır.

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.

Bir işaret eksik, karakter ölü

if (can = 0) yazdım. Can sıfırsa oyun bitsin diye.
🧑‍💻
niyet: soru sormak
Tek eşittir… Tamam, can kutusuna 0 koyuyorum.
🤖
bilgisayar: emir aldı
Oyun başlar başlamaz canım sıfırlanıyor!
😱
sonuç

Editör bu satırda hata vermez; çünkü yazım kurallarına uygundur. Karşılaştırma yapılan her yerde üç eşittiri sayın.

Metinle (string) neler yapılır?

İşlemYazımıÖrnekSonuç
Birleştirme"a" + "b""Skor: " + 7"Skor: 7"
Uzunlukmetin.length"p5.js".length5
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örSorduğu soruÖrnekSonuç
===Tam eşit mi? (değer + tür)skor === 10skor 10 ise true; 7 ise false
!==Eşit değil mi?durum !== "bitti"durum "oynuyor" ise true
<Küçük mü?x < 100x 50 ise true; 150 ise false
>Büyük mü?y > 200y 250 ise true; 100 ise false
<=Küçük ya da eşit mi?skor <= 5skor 5 ise true; 7 ise false
>=Büyük ya da eşit mi?can >= 1can 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.
İfadeSonuç
"10" == 10true
"10" === 10false
10 === 10true
"10" != 10false
"10" !== 10true

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örAnlamıÖrnekSonuç
&&VE: iki koşul da doğru olmalıx > 0 && x < 400x 150 iken true; 500 iken false
||VEYA: en az biri doğru yetercan === 0 || sure === 0can 0, sure 30 iken true
!DEĞİL: değeri tersine çevirir!oyunBittioyunBitti 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ı

ABA && B
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

Oyunda: can > 0 && !oyunBitti

canoyunBittican > 0!oyunBittiSonuç
3falsetruetruetrue
0falsefalsetruefalse
3truetruefalsefalse

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

ABA || B
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

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

cansurecan === 0sure === 0Sonuç
045truefalsetrue
20falsetruetrue
245falsefalsefalse

! (DEĞİL): tersine çevir

A!A
truefalse
falsetrue
  • ! 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

  1. JavaScript önce 20 < 70 sorusunu çözer: true.
  2. Sonra true < 60 sorusunu sorar.
  3. 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: &&

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

Bu örnekteki iki yeni komut

KomutNe yapar?
triangle(x1, y1, x2, y2, x3, y3)Verilen üç köşe noktasını birleştirerek üçgen çizer.
color(r, g, b)Bir RGB rengini değer olarak oluşturur. Değişkende saklanır; fill ve stroke ile kullanılır.

Rengi bir kez tanımlayıp birçok yerde kullanabilirsiniz. Değiştirmek istediğinizde tek satır değişir.

İkiden fazla koşulu birleştirmek

BiçimÖrnekNe zaman true?
Üçlü VEskor >= 5 && can > 0 && !oyunBittiÜçü birden doğruysa
Üçlü VEYAcan === 0 || sure === 0 || skor >= 100En az biri doğruysa
VE + VEYA(skor >= 10 && can > 0) || oyunBittiSkor ve can koşulu tutarsa ya da oyun bitmişse
Tuval sınırıx > 0 && x < 400 && y > 0 && y < 400Nokta tuvalin içindeyse
Sıra ve parantezİfade soldan sağa değerlendirilir; &&, ||’den önce işlenir. Karışıklığı önlemek için parantez kullanın.

Sandık açılır mı? Kutulara tıklayın

Önce tahmin edin, sonra tıklayın: sandığın açılması için kaç farklı kutu kombinasyonu var? Oyunlardaki kapı, sandık ve görev kuralları bu tür ifadelerle yazılır.

Kısa devre: ikinci soruya hiç bakılmayabilir

&&İlk koşul false ise sonuç zaten false. İkinciye bakılmaz.
can > 0 && skor === hedefSkor: can 0 ise skor kontrol edilmez.
||İlk koşul true ise sonuç zaten true. İkinciye bakılmaz.
Neden önemli?Bu davranışa kısa devre (short-circuit) denir. Gereksiz karşılaştırmayı atlar. Ama ikinci tarafta bir iş yapılıyorsa (skoru artırmak, bir fonksiyon çağırmak) o kod hiç çalışmaz.

Beş ifadenin her biri true mu, false mu?

Cevaplar tuvalde

Kutularla oynayın

  1. Adınızı bir let, doğum yılınızı başka bir let ile tutun. Tuvale “Ada, 2006” gibi tek satır yazdırın.
  2. Yaşınızı bu yıldan doğum yılınızı çıkararak hesaplayıp ekrana yazdırın.
  3. En üstte let x = 0; tanımlayın. Her frame 2 artsın ve bir daire o konumda dursun. Tuvalin sonuna gelince başa dönsün.
  4. const HIZ = 2; tanımlayıp 2 yerine onu kullanın. Sonra draw içinde HIZ = 5; yazmayı deneyin. Konsol ne diyor?

Zorlu görev: tabloyu siz doldurun

ab!(a && b)!a || !b
truetrue??
truefalse??
falsetrue??
falsefalse??
  1. Tabloyu önce kâğıtta doldurun.
  2. Son iki sütunda ne fark ettiniz?
  3. Dört durumu bir sketch’te değişkenlerle kurup text ile ekrana yazdırarak doğrulayın.
  4. “Oyun devam ediyor” ifadesinin tersini iki farklı biçimde yazın.

Sonunda b kaç olur?

  1. 5
  2. 10
  3. 15
  4. Hata verir

b = a, a’nın o andaki değerini b kutusuna kopyalar. Kutular birbirine bağlanmaz.

"Skor: " + 3 + 4 ifadesinin sonucu ne?

  1. "Skor: 7"
  2. "Skor: 34"
  3. 7
  4. Hata verir

Soldan sağa: önce "Skor: " + 3 bir metin olur, sonra ona 4 eklenir. Toplamak istiyorsanız parantez: "Skor: " + (3 + 4).

can = 0, sure = 30, oyunBitti = false. Sonuç ne?

  1. true
  2. false

&& önce işlenir: sure > 0 && !oyunBitti → true. Sonra false || true → true. Parantez yazsaydık tartışmaya gerek kalmazdı.

Merak edenler için kaynaklar

Patt ViraVariableDeğişken tanımlama ve değerini değiştirme.pattvira.com › intro-to-creative-coding › variable The Coding TrainDefine Your Own VariablesKendi değişkenini açmak ve kullanmak.thecodingtrain.com › 2-variables › 2-define-variables
Patt ViraBoolean ExpressionKarşılaştırma ve mantıksal operatörler.pattvira.com › intro-to-creative-coding › conditionals-boolean-expression The Coding TrainIncrementation OperatorsBir değişkeni her frame artırmak.thecodingtrain.com › 2-variables › 3-incrementation

Bugün ne öğrendik?

  • Değişken, adı olan bir kutudur. let değişebilir, const değişmez.
  • Kalıcı değerler setup ve draw’ın dışında tanımlanır.
  • Üç temel tür: number, string, boolean.
  • = atar; === sorar. Karşılaştırmanın sonucu hep boolean’dır.
  • && ikisi de, || en az biri, ! tersi.
  • Aralık 20 < x && x < 60 diye yazılır; zincir yazılmaz.

Sıradaki ders

Program nasıl karar verir?

if, else if ve else.

Sonraki sunum →← Önceki