JavaScript nasıl öğrenilir? Sekiz başlangıç dersi

Ekrana yazı yazdırma

Metin ile çalışan kod arasındaki farkı görmek ve çıktıyı okuyabilmek.

Kavramı kur

Program, bilgisayarın izlediği talimatların belirli bir sözdizimiyle yazılmış hâlidir. İlk görevimiz ekrana bir bilgi yazdırmak. Metni tırnak içinde verdiğimizde onu bir değer olarak kullanırız; tırnak dışında kalan sözcük ise değişken veya komut adı olarak yorumlanabilir. Bu ayrımı anlamak sonraki örneklerde isim ve metni birbirine karıştırmanı önler.

Neden böyle çalışıyor?

Çıktı, programın ne yaptığını gözlemlemenin en basit yollarından biridir. Çalıştırmadan önce kaç satır beklediğini ve her satırda ne yazacağını not et. Sonra gerçek çıktıyla karşılaştır. Hata mesajı görürsen sonuca atlamak yerine ilk hata satırını oku; eksik tırnak veya parantez çoğu zaman sonraki satırların da yanlış görünmesine neden olur.

Çalışma sırası

Yazdığın dosya ile çalıştırdığın dosyanın aynı olduğunu doğrula. Editördeki değişikliği kaydetmeden eski sürümü çalıştırmak çok yaygın bir başlangıç hatasıdır. Bu derste dış paket, hesap veya ağ bağlantısı gerekmez; yalnızca dilin temel çıktı mekanizmasını öğreniyoruz.

İkinci örnek · 1

İlk çıktı ifadesi bir metin değerini ekrana gönderir. Kodun tamamı yazılı derste bulunur.

console.log("İlk satır");
console.log("İkinci satır");

Beklenen sonucu oku

Çıktı metnini değiştirmek ile komut adını değiştirmek aynı şey değildir.

Beklenen çıktı: İlk satır İkinci satır

Bir değeri sen değiştir

İlk mesajı kendi belirlediğin kısa bir cümleyle değiştir. İki ayrı çıktı ifadesi kullanarak iki satır oluştur.

Hata nereden gelir?

Metnin tırnağını unutmak, dilin o metni bir isim sanmasına neden olabilir; tırnak çiftini kontrol et.

Kendi çözümünü kur

Bir tırnağı bilinçli olarak kaldır; çıkan ilk hata mesajını not et, sonra hatayı düzelt. Önce çalışan kodun kopyasını tut. Yalnızca tırnak içindeki metni değiştirerek başla.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

console.log("Bugün başladım");
console.log("Yarın devam edeceğim");

Kendini kontrol et

Bir metin değerinin çevresindeki tırnakları kaldırmak neden sorun çıkarabilir? Yanıt: Dil, sözcüğü metin yerine bir isim veya sözdizimi öğesi olarak yorumlayabilir; aynı anlama gelmez.

Beklenen çıktı: Bugün başladım Yarın devam edeceğim

Değişkenler: bilgiyi saklamak

Metin, sayı ve değişken adı arasındaki farkı açıklayıp basit bir hesap yapmak.

Kavramı kur

Değişken bir değere program içinde bir adla erişmemizi sağlar. Adın kendisi ile saklanan değer farklı şeylerdir: ürün adını değiştirince değişkenin adı değişmez. Anlamlı isimler kullanmak, birkaç satır sonra ne hesapladığını yeniden anlayabilmeni sağlar. Bir harf yerine fiyat veya adet gibi görevini anlatan isimlerle başla.

Neden böyle çalışıyor?

Sayıya benzeyen bir metin her dilde kendiliğinden hesaplanabilir bir sayıya dönüşmez. "25" ile 25 arasındaki farkı düşün. Dillerin tür kuralları farklıdır; bu yüzden birleştirme ve toplamanın hangi operatörle yapıldığını örnek üzerinde izle. Formdan veya dosyadan gelen veriyi körlemesine sayısal kabul etme.

Çalışma sırası

Bir hesabı üç aşamaya böl: girdileri tanımla, sonucu hesapla, sonucu göster. Aynı sayıyı kodun farklı yerlerine kopyalamak yerine tek bir değişkene ad ver. Değeri değiştirip bütün hesabın aynı kurala göre güncellendiğini kontrol et; böylece kod ile sabit cevap arasındaki farkı görürsün.

İkinci örnek · 1

fiyat bir ürünün birim bedelidir; adet kaç tane alındığını belirtir. Kodun tamamı yazılı derste bulunur.

const fiyat = 25;
const adet = 3;
const toplam = fiyat * adet;
console.log("Toplam:", toplam);

Beklenen sonucu oku

Çıktı ifadesinde hem açıklama hem sayısal sonuç bulunur.

Beklenen çıktı: Toplam: 75

Bir değeri sen değiştir

Fiyatı 25, adedi 3 yap; çalıştırmadan önce sonucu hesapla. Yalnızca adet değerini 0 yap; toplamın neden değiştiğini anlat.

Hata nereden gelir?

Hesabı yapmak yerine hazır 75 sayısını yazdırmak değişken kullanmayı öğretmez; sonuç girdilerden üretilmeli.

Kendi çözümünü kur

Bir indirim değişkeni ekle ve son tutarı toplam eksi indirim olarak hesapla. Değerleri değiştirirken hesap ifadesini aynı tut; aynı kuralın yeni girdilerle çalıştığını gör.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

const fiyat = 20;
const adet = 4;
const toplam = fiyat * adet;
console.log("Toplam:", toplam);

Kendini kontrol et

Toplamı sabit 75 olarak yazmakla fiyat * adet kullanmak arasındaki fark nedir? Yanıt: Hesap ifadesi girdiler değiştiğinde yeniden doğru sonucu üretir; sabit 75 aynı kalır.

Beklenen çıktı: Toplam: 80

Koşullar: karar vermek

Koşulun sonucuna göre farklı akışlar çalıştırmak ve sınır değerleri test etmek.

Kavramı kur

Koşul, bir soruya doğru veya yanlış cevabı veren ifadedir. “Puan en az 50 mi?” gibi bir soruyu karşılaştırma operatörüyle yazarız. if doğruysa bir blok, else varsa yanlış durumda başka bir blok çalışır. Programın hangi yolu izleyeceğini girdiler belirler; metin olarak “doğru” yazdırmak koşulun kendisi değildir.

Neden böyle çalışıyor?

Karşılaştırmada sınır noktaları önemlidir. puan > 50 ile puan >= 50 aynı değildir: 50 değeri ilkinde dışarıda, ikincisinde içeridedir. Kuralı doğal dille yazıp koddaki işaretle eşleştir. Ardından sınırın bir altı, sınırın kendisi ve bir üstü için sonucu ayrı ayrı tahmin et.

Çalışma sırası

Bir örneğin tek bir değerle çalışması bütün olasılıkları kapsadığı anlamına gelmez. Küçük bir test tablosu yap: girdi, beklenen dal, gözlenen çıktı. Birden fazla koşul eklediğinde sıranın etkisini düşün; ilk doğru dal, sonraki dallara geçilmesini engelleyebilir. Her koşulun kapsadığı aralığı açık tut.

İkinci örnek · 1

puan karşılaştırmanın girdisidir. Kodun tamamı yazılı derste bulunur.

const puan = 50;
if (puan >= 50) {
  console.log("Geçti");
} else {
  console.log("Tekrar dene");
}

Beklenen sonucu oku

Karşılaştırma değeri gözlemler; atama ile karıştırılmamalıdır.

Beklenen çıktı: Geçti

Bir değeri sen değiştir

49, 50 ve 51 değerleri için beklenen sonucu bir tabloya yaz. Karşılaştırmayı > yapıp yalnızca sınır değerde neyin değiştiğini kontrol et.

Hata nereden gelir?

Atama ile karşılaştırmayı karıştırmak programın anlamını değiştirebilir; operatörün dildeki görevini kontrol et.

Kendi çözümünü kur

80 ve üstü için ayrı bir mesaj ekle; en yüksek aralığı önce değerlendir. “En az” ifadesi eşitliği de kapsar. Teste yalnızca ortadaki değerle başlama.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

const puan = 49;
if (puan >= 50) {
  console.log("Geçti");
} else {
  console.log("Tekrar dene");
}

Kendini kontrol et

“En az 50” kuralı için 50 puanı hangi dalda değerlendirilmelidir? Yanıt: Başarılı/geçerli dalda; kural eşitliği de kapsar. Bu nedenle uygun karşılaştırma >= 50 olur.

Beklenen çıktı: Tekrar dene

Döngüler: tekrar etmek

Tekrarlanan bir işi döngüye dönüştürmek ve kaç tekrar oluştuğunu açıklamak.

Kavramı kur

Döngü aynı işi farklı değerler için tekrarlar. Her adımda kullanılan değişkene bakarak o anda hangi öğenin işlendiğini anlayabilirsin. Aynı çıktı satırını üç kez kopyalamak yerine döngü yazmak, tekrar sayısını ve veriyi tek bir yerden değiştirmeyi sağlar. Ancak tekrarın nerede duracağını açıkça belirlemelisin.

Neden böyle çalışıyor?

Başlangıç, devam koşulu ve ilerleme adımını birbirinden ayır. Bitiş değeri bazı yapılarda dahil, bazılarında hariçtir. Sözdizimini ezberlemek yerine 1, 2, 3 gibi küçük bir örneği elde izle. Her tekrarda değişkenin değerini, üretilen çıktıyı ve bir sonraki değeri tabloya yaz.

Çalışma sırası

Toplama gibi görevlerde döngü boyunca birikim tutan bir değişken kullanılır. Başlangıç değeri genellikle toplama için 0 olur. Bu değişkeni her turda yeniden sıfırlarsan önceki sonuçları kaybedersin. Başlangıç hazırlığını döngünün dışında, tekrar eden hesabı döngünün içinde düşün.

İkinci örnek · 1

toplam döngü başlamadan önce hazırlanır. Kodun tamamı yazılı derste bulunur.

let toplam = 0;
for (let sayi = 1; sayi <= 3; sayi++) {
  toplam += sayi;
}
console.log(toplam);

Beklenen sonucu oku

Son çıktı döngüden sonra yalnızca bir kez yazdırılır.

Beklenen çıktı: 6

Bir değeri sen değiştir

1, 2 ve 3 sayılarının toplamını beklenen sonuçla karşılaştır. Tekrar aralığını 1–5 yap; toplamın 15 olduğunu doğrula.

Hata nereden gelir?

Bitiş sınırını dahil/hariç karıştırmak bir eksik veya fazla tekrar üretir; ilk ve son değeri kontrol et.

Kendi çözümünü kur

Döngü içinde hem sayi hem ara toplamı yazdırarak hesabın nasıl biriktiğini incele. Ara toplamı kaydetmek, hangi turda hata yaptığını görmeni sağlar.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

let toplam = 0;
for (let sayi = 1; sayi <= 5; sayi++) {
  toplam += sayi;
}
console.log(toplam);

Kendini kontrol et

Biriken toplamı her döngü turunda 0 yapmak neden yanlıştır? Yanıt: Önceki turlardaki birikimi siler; toplam yalnızca son turun katkısını tutar.

Beklenen çıktı: 15

Fonksiyonlar: kodu tekrar kullanmak

Parametre alan ve değer döndüren bir fonksiyonu farklı girdilerle kullanmak.

Kavramı kur

Fonksiyon bir işi adlandırır ve tekrar kullanılabilir hâle getirir. Parametre, iş yapılırken değişmesini istediğin girdinin adıdır. Fonksiyonu çağırırken gerçek değeri argüman olarak verirsin. Böylece aynı hesap kuralını farklı sayılarda yeniden yazmadan kullanabilirsin; hesap bir yerde tanımlanır, birçok yerde çağrılır.

Neden böyle çalışıyor?

Bir değeri döndürmek ile ekrana yazdırmak farklı işlerdir. return çağıran koda bir sonuç verir; çıktı komutu ise bir bilgiyi görünür kılar. Hesaplayan fonksiyonun sonucunu başka hesaplarda kullanmak istiyorsan değeri döndür. Yazdırmayı çağıran koda bırakmak fonksiyonu denemeyi ve yeniden kullanmayı kolaylaştırır.

Çalışma sırası

İyi bir başlangıç fonksiyonu küçük ve tek amaçlıdır. Adını bir eylem gibi seç, hangi girdileri kabul ettiğini ve hangi sonucu ürettiğini yaz. Bir normal, bir sınır ve mümkünse bir beklenmeyen durum düşün. Her olası sorunu tek fonksiyona doldurmak yerine önce sözleşmesini anlaşılır kıl.

İkinci örnek · 1

Fonksiyonun adı yapılan işi anlatır. Kodun tamamı yazılı derste bulunur.

function ikiKat(sayi) {
  return sayi * 2;
}
console.log(ikiKat(4));
console.log(ikiKat(7));

Beklenen sonucu oku

İki çağrı aynı kuralı farklı girdilerle uygular.

Beklenen çıktı: 8 14

Bir değeri sen değiştir

ikiKat fonksiyonunu 4 ve 7 için çağır; 8 ve 14 bekle. Sonucu bir değişkene alıp üzerine 1 ekle; yazdırmadan da kullanılabildiğini göster.

Hata nereden gelir?

Fonksiyonu tanımlamak onu çalıştırmaz; ayrıca çağırman gerekir.

Kendi çözümünü kur

İki sayı alıp toplam döndüren yeni bir fonksiyon yaz; üç farklı girdi çiftiyle kontrol et. Fonksiyonun içinde sadece hesabı döndür. Sonucu görmek için çağrıdan sonra yazdır.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

function ikiKat(sayi) {
  return sayi * 2;
}
console.log(ikiKat(5));
console.log(ikiKat(0));

Kendini kontrol et

Bir fonksiyonun sonucu başka hesapta kullanılacaksa neden yalnızca yazdırmak yeterli değildir? Yanıt: Yazdırma ekrana yan etki üretir; çağıran koda kullanılabilir sonuç vermek için uygun bir dönüş değeri gerekir.

Beklenen çıktı: 10 0

Web'e özel: butona tıklama

DOM seçimi, durum ve olay dinleyicisini çalışan bir düğmede birleştirmek.

Kavramı kur

DOM, tarayıcının HTML belgesinden oluşturduğu programlanabilir yapıdır. querySelector uygun öğeyi bulur; bulamazsa null döndürür. Düğmenin kimliği ile seçicinin eşleşmesi gerekir. Kodu öğe oluşturulduktan sonra çalıştırmak için bu küçük örnekte script bölümünü düğmenin altına yerleştiriyoruz.

Neden böyle çalışıyor?

Bir olay dinleyicisi, tıklama gerçekleştiğinde ne yapılacağını tanımlar. Fonksiyonu dinleyiciye vermek ile o anda çağırmak aynı şey değildir. sayi, tıklamalar arasında saklanan durumdur; her olayda bir artar ve textContent ile arayüze yansıtılır. Metin içeriği için innerHTML kullanmak gerekmez.

Çalışma sırası

Kullanıcı etkileşimini yalnızca fareye göre düşünme. Gerçek button öğesi klavyeyle de kullanılabilir ve doğru temel semantiğe sahiptir. Düğmeyi Tab ile seçip Enter veya Space ile dene. Bir div üzerine tıklama koymak aynı davranışları otomatik sağlamaz.

İkinci örnek · 1

querySelector doğru id ile tek düğmeyi seçer. Kodun tamamı yazılı derste bulunur.

<button id="sayac">0 kez tıklandı</button>
<script>
const dugme = document.querySelector("#sayac");
let sayi = 0;
dugme.addEventListener("click", () => {
  sayi += 1;
  dugme.textContent = sayi + " kez tıklandı";
});
</script>

Beklenen sonucu oku

textContent yeni durumu düğme metnine güvenli biçimde yansıtır.

Beklenen çıktı: Başlangıçta 0; her tıklamada 1, 2, 3 kez tıklandı.

Bir değeri sen değiştir

Düğmeye üç kez bas; değerleri gözlemle. Bir sıfırlama düğmesi ekle ve aynı durumu 0 yap.

Hata nereden gelir?

Seçici yanlışsa null üzerinde metot çağırırsın; id ve çalışma sırasını kontrol et.

Kendi çözümünü kur

Fare kullanmadan her iki düğmeyi de çalıştır; odak göstergesini kaybetme. Sıfırla düğmesinin olayında hem sayi değerini hem görünen metni güncelle.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<button id="artir">Artır</button><button id="sifirla">Sıfırla</button><p id="deger">0</p>
<script>
let sayi = 0;
const sonuc = document.querySelector("#deger");
document.querySelector("#artir").addEventListener("click", () => { sonuc.textContent = ++sayi; });
document.querySelector("#sifirla").addEventListener("click", () => { sayi = 0; sonuc.textContent = sayi; });
</script>

Kendini kontrol et

Sayaç neden olay fonksiyonunun dışında tanımlanır? Yanıt: Tıklamalar arasında değerini koruması için; her olayda yeniden başlatılmaması gerekir.

Beklenen çıktı: Artır sayacı artırır; Sıfırla hem durumu hem görünümü 0 yapar.

Diziler: birden çok bilgiyi saklamak

Birden çok değeri sıralı koleksiyonda tutup ekleme, okuma ve sayma yapmak.

Kavramı kur

Birden fazla ismi isim1, isim2, isim3 gibi ayrı değişkenlerde tutmak yerine sıralı bir koleksiyonda gruplarız. Sıra, bir öğenin konumunu belirtir; değerinin kendisi değildir. İlk öğe çoğu temel yapıda 0 konumundan okunur. İkinci ve üçüncü öğeyi elle işaretleyerek bu sıfırdan başlayan indisi görünür hâle getir.

Neden böyle çalışıyor?

Koleksiyonun uzunluğu ile son geçerli indis farklıdır. Üç öğe varsa uzunluk 3, son indis 2 olur. Bir öğeyi ekledikten veya sildikten sonra bu değerler değişebilir. Sabit bir son indis varsaymak yerine uzunluğu ve dolaşma yöntemini kullanmayı öğren.

Çalışma sırası

Veri yapısına hangi işi yaptığını açıkça ayır: sona eklemek, var olan öğeyi değiştirmek ve yeni bir koleksiyon üretmek aynı işlem değildir. Çıktıyı kontrol ederken hem içerik hem sıra hem de öğe sayısını incele. Küçük örnekte bunları doğru kurmak daha sonra dosya ve API verilerini işlemenin temelidir.

İkinci örnek · 1

Başlangıç koleksiyonu iki isim içerir. Kodun tamamı yazılı derste bulunur.

const isimler = ["Elif", "Mert"];
isimler.push("Deniz");
console.log(isimler[0]);
console.log(isimler[2]);
console.log(isimler.length);

Beklenen sonucu oku

Öğe sayısı 3 olur; son geçerli indis 2 olarak kalır.

Beklenen çıktı: Elif Deniz 3

Bir değeri sen değiştir

Başlangıçtaki isimleri değiştir; sıra ve indisleri kâğıda yaz. Bir isim daha ekle; sayının 4 olduğunu doğrula.

Hata nereden gelir?

Uzunluğu son indis gibi kullanmak sınır dışına erişir; üç öğede son konum 2’dir.

Kendi çözümünü kur

Koleksiyonu döngüyle dolaşıp bütün isimleri yazdır; elle indis tekrarlamak yerine uygun dolaşma yapısını seç. Koleksiyonun her değişiminden sonra içerik listesini ve uzunluğu ayrı ayrı not et.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

const isimler = ["Elif", "Mert"];
isimler.push("Ece");
console.log(isimler[0]);
console.log(isimler[2]);
console.log(isimler.length);

Kendini kontrol et

Üç öğeli sıfır tabanlı bir koleksiyonda son geçerli indis nedir? Yanıt: 2; uzunluk 3 olması 3 indisinin var olduğu anlamına gelmez.

Beklenen çıktı: Elif Ece 3

Nesneler: bilgiyi isimle saklamak

Bir kaydı anahtar-değer ilişkisiyle temsil edip eksik alanı ele almak.

Kavramı kur

Bir öğrencinin adı ve puanı aynı türden sıra öğeleri değildir; farklı anlamdaki alanlardır. Anahtar-değer yapısı, bu bilgilere konum yerine bir adla erişmeyi sağlar. Böylece 0 konumunun isim olduğunu hatırlamak yerine ad anahtarını okursun. Verinin hangi soruya cevap verdiği yapıda görünür hâle gelir.

Neden böyle çalışıyor?

Her alanın var olacağını varsaymak gerçek veride hataya neden olur. Bir form gönderiminde veya API yanıtında şehir alanı eksik olabilir. Bu durumda varsayılan değer kullanmak, kayıt atlamak veya kullanıcıya düzeltme istemek farklı kararlardır. Önce eksik bilgiye uygulamanın nasıl davranacağını belirle.

Çalışma sırası

Aynı anahtara ikinci kez değer yazmak çoğu yapıda yeni bir bağımsız kayıt oluşturmaz; o anahtarın değerini değiştirir. Birden çok öğrenci saklayacaksan tek öğrenci sözlüğüne isim eklemek yerine kayıtları bir koleksiyonda toplaman gerekebilir. Yapıyı seçmeden önce “bir kayıt mı, birden çok kayıt mı?” sorusunu sor.

İkinci örnek · 1

ad ve puan farklı anlamdaki alanların anahtarlarıdır. Kodun tamamı yazılı derste bulunur.

const ogrenci = { ad: "Elif", puan: 80 };
console.log(ogrenci.ad);
console.log(ogrenci["puan"]);
console.log(ogrenci.sehir ?? "Belirtilmedi");

Beklenen sonucu oku

sehir olmadığı için açık bir yedek değer seçilir.

Beklenen çıktı: Elif 80 Belirtilmedi

Bir değeri sen değiştir

Öğrencinin adını ve puanını değiştir. sehir alanını ekle; yedek yerine gerçek değerin döndüğünü kontrol et.

Hata nereden gelir?

Anahtarı büyük/küçük harf farkıyla yazmak aynı alanı bulmayabilir; adlandırmayı tutarlı yap.

Kendi çözümünü kur

Eksik alanın ekranda nasıl anlatılacağını düşün; sessizce yanlış bir şehir uydurmak yerine açık bir eksik bilgi mesajı yaz. Önce bütün anahtarları yaz. Sonra bir anahtarı kaldırıp eksik bilgi yolunu dene.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

const ogrenci = { ad: "Deniz", puan: 95 };
console.log(ogrenci.ad);
console.log(ogrenci["puan"]);
console.log(ogrenci.sehir ?? "Belirtilmedi");

Kendini kontrol et

İki farklı öğrenci için aynı ad anahtarını tek sözlükte tekrar tekrar yazmak neden yetmez? Yanıt: Aynı anahtarın değeri güncellenir. Birden çok öğrenci için kayıtları ayrı tutan bir koleksiyon gerekir.

Beklenen çıktı: Deniz 95 Belirtilmedi