JavaScript'e Giriş: Değişkenler, Fonksiyonlar ve Olaylar

Bu derste ne yapacağız?

Bu derste, web sayfalarına hayat veren JavaScript programlama dilini öğreneceksiniz. Önceki derslerde HTML ile sayfanın yapısını, CSS ile de sayfanın görünüşünü oluşturdunuz. Şimdi sırada, sayfanın etkileşimli hale gelmesi var—yani kullanıcı bir butona tıkladığında, bir yazı kutusu doldurduğunda veya sayfaya başka şekilde müdahale ettiğinde, sayfanın tepki vermesi gelecek.

Dersin hedefleri:

  • JavaScript kodunu HTML dosyanız içine veya ayrı bir dosyada nasıl yazacağınızı öğreneceksiniz
  • Değişken kavramını anlatacağız—bilgisayara "bu kelimeyi hatırla, bunun içinde bir sayı veya yazı var" demek gibi
  • Fonksiyon yazacağız—bir grup talimatı bir isimle toplayıp istediğiniz zaman çalıştırmak için
  • Bir butona tıklama olayı ekleyip, tıklandığında JavaScript kodunun çalışmasını sağlayacaksınız

Ön koşullar: HTML ve CSS hakkında temel bilgi sahibi olmalısınız (kursun önceki dersleri yeterli). Bir metin editörü (VS Code gibi) ve web tarayıcısı (Chrome, Firefox gibi) gereklidir.

Kavram

JavaScript nedir? Düşünün ki, HTML duvarcılık yapısı, CSS ise duvara boya ve dekorasyon. JavaScript ise—kapıyı açıp kapatmak, lambayı yakmak, pencereyi açmak gibi—eve hayat katıyor. JavaScript, web sayfasının etkileşimli ve dinamik olmasını sağlayan programlama dilidir. Ziyaretçi bir şey yaptığında (tıklama, yazı yazma, sayfayı kaydırma), JavaScript tepki verir.

Değişken nedir? Günlük hayatta, evde bir kutuda eşya saklarsınız: "Bu kutuda fotoğraflar var." Programlamada da benzer şey vardır. Bilgisayara bir "kutu" hazırlıyorsunuz ve ona bir isim veriyorsunuz (örneğin oyuncu_adi), sonra o kutuya bir bilgi koyuyorsunuz (örneğin "Ali"). İstediğiniz zaman o kutuya gidip bilgiyi okuyabilir veya değiştirebilirsiniz. Bu kutuya değişken denir. Bilgisayar bilgiyi bellekte saklar.

Fonksiyon nedir? Pide ustasını düşünün. Müşteri gelince, usta her seferinde baştan pasta yapıyor. Yerine, ustanın "pide yapma" adlı bir tarifi olduğunu ve müşteri istediğinde bu tarifi takip ettiğini düşünün. Programlamada fonksiyon benzer: "bunu yap, sonra şunu yap, sonra bunu yazdır" gibi talimatları bir isimle birleştirir. İstediğiniz zaman o fonksiyonu "çağıra" bilirsiniz ve talimatlar sırasıyla çalışır.

Olay nedir? Kullanıcı sayfada bir şey yaparsa—butona tıklar, yazı yazar, faresini hareket ettirir—buna olay denir. JavaScript bu olayları "dinler" ve yanıt verir. Örneğin, "Eğer bu butona tıklanırsa, şu fonksiyonu çalıştır" denebilir.

Adım adım uygulama

Şimdi elinizde HTML dosyası olduğunu varsayalım. Hadi adım adım JavaScript eklemeye başlayalım.

  1. Metin editöründe yeni bir HTML dosyası açın. VS Code'u açıp, File → New File tıklayın. Dosyayı index.html adıyla kaydedin (kaydetmek için Ctrl+S basın).
  2. Temel HTML yapısını yazın. Dosyanıza aşağıdaki HTML kodunu yapıştırın: 
    <!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Öğreniyorum</title>
</head>
<body>
  <h1>Hoşgeldiniz</h1>
  <button id="myButton">Bana Tıkla</button>
  <p id="message"></p>

  <script>
    // JavaScript kodu buraya gelecek
  </script>
</body>
</html>
    Bu HTML'de üç önemli şey var: bir buton (<button>, id="myButton" ile adlandırılmış), bir paragraf (<p>, id="message" ile adlandırılmış), ve en altta JavaScript için bir <script> etiketi. id özniteliği, JavaScript'e "bu butona nasıl ulaşacağını" söyler.
  3. JavaScript kodunu yazın—değişken tanımlayın. <script> etiketinin içine aşağıdaki kodu yazın: 
    let mesaj = "Butona tıkladığın için teşekkürler!";

let buton = document.getElementById("myButton");
let paragraf = document.getElementById("message");
    Satır satır ne olduğunu açıklanıyor: - let mesaj = "Butona tıkladığın için teşekkürler!"; → let sözcüğü yeni bir değişken tanımlar, adı mesaj, ve içine yazı depolanır. - let buton = document.getElementById("myButton"); → HTML'deki id="myButton" olan butonu seç ve buton değişkenine kaydet. - let paragraf = document.getElementById("message"); → HTML'deki id="message" olan paragrafı seç ve paragraf değişkenine kaydet. - document.getElementById() JavaScript'in "HTML'de bunu bul" diye söylemek için kullandığı araç.
  4. Fonksiyon yazın. Değişken kodunun altına aşağıdaki kodu ekleyin: 
    function butonaTiklandi() {
  paragraf.innerHTML = mesaj;
}
    Açıklama: - function butonaTiklandi() → "butonaTiklandi" adlı bir fonksiyon tanımla, parantezler boş olduğu için bu fonksiyon parametre almıyor. - paragraf.innerHTML = mesaj; → Paragrafın içini (innerHTML) mesaj değişkeninin değerine eşitle. Yani ekranda "Butona tıkladığın için teşekkürler!" yazacak.
  5. Olayı bağlayın. Fonksiyonun altına aşağıdaki kodu ekleyin: 
    buton.addEventListener("click", butonaTiklandi);
    Açıklama: - addEventListener → "Bu öğeyi dinle, eğer şu olay olursa şunu yap" demek. - "click" → Dinlenecek olay: buton tıklanması. - butonaTiklandi → Tıklanınca çalıştırılacak fonksiyon. Parantez koymazsınız (çünkü parantez koysanız JavaScript hemen çalıştırır, biz sadece "hazır durumda bek" demek istiyoruz).
  6. Dosyayı kaydedin. Ctrl+S tuşlarına basın.
  7. Tarayıcıda açın. VS Code'un Explorer bölümünde (solda dosya ağacı) index.html dosyasını sağ tıklayın, Open with Live Server seçeneğini tıklayın (eğer Live Server eklentisi yüklüyse). Yoksa, dosyanın konumuna gidip (Dosya Gezgini'nde) index.html dosyasını çift tıklayarak tarayıcıda açabilirsiniz.
  8. Test edin. Tarayıcıda "Bana Tıkla" butonu görülecek. Butona tıklayın. Altında yazı çıkmalı: "Butona tıkladığın için teşekkürler!" Bu demek oluyor ki, JavaScript kodu çalışıyor!

Sık karşılaşılan sorunlar

SorunNeden Olur?Çözüm
Butona tıkladığında hiç bir şey olmuyorJavaScript kodu çalışmıyor; hata varTarayıcının sağ tıkla → Kontrol Et (Inspect) → Console sekmesine bakın. Hata mesajı göreceksiniz. Genellikle id yanlış yazılmış veya fonksiyon adı hatalı olur.
"Uncaught ReferenceError: buton is not defined" hatasıDeğişken tanımlanmamış veya adı yanlış yazılmışlet buton satırının emin olun, yazım doğru. Türkçe karakterler sorun yaratabilir; İngilizce yazı kullanın.
Yazı butona tıklanınca "undefined" yazıyormesaj değişkeni tanımlanmamış veya boşlet mesaj = "..."; satırını kontrol edin, içi dolu ve alıntı işareti (") vardır mı?
Script etiketi hata veriyor<script> etiketi yanlış yere veya yanlış kapatılmışScript etiketini </body> etiketi öncesine koyun. Kapanış etiketi </script> var mı?
Tarayıcıda CSS veya görseller yüklenmemiş; sadece beyaz sayfaDosya yolları yanlış veya dosyalar kayıtlı değilTüm dosyaları kaydedin (Ctrl+S), tarayıcıyı yenile (F5). CSS veya görsel dosyalar aynı klasörde mi kontrol edin.

Mini görev

Görev: Kendi basit web sayfanızı yapacaksınız. Sayfa üzerinde bir buton olacak, butona tıklandığında bir <div> (kutusal bölge) veya <p> (paragraf) içindeki arka plan rengi değişecek.

Adımlar:

  1. Yeni bir HTML dosyası oluşturun: renkli_sayfa.html
  2. İçine temel HTML yapısını yazın (DOCTYPE, html, head, body vb.)
  3. Body içine bir <div> veya <p> ekleyin, rengini başlangıçta açık sarı (background-color: lightyellow;) yapın ve ona id="kutum" atayın
  4. <button> ekleyin, id'sini id="rengiDegis" yapın
  5. Button altına <script> etiketi koyun ve içinde:
    • Kutuyu seçen bir değişken tanımlayın
    • Butonu seçen bir değişken tanımlayın
    • function rengiDegistir() adlı bir fonksiyon yazın, içinde kutunun background-color'ını farklı bir renge (örn. lightblue) değiştirin; bunun için kutum.style.backgroundColor = "lightblue"; yazın
    • Butona click olayı dinleyiciyi ekleyin, fonksiyonu bağlayın
  6. Tarayıcıda açıp testi yapın

Kontrol Listesi:

  • ☐ HTML dosyası oluşturdum ve kaydetim
  • ☐ Sayfada bir buton ve bir renklı div/paragraf var
  • ☐ JavaScript kodu sayfa altında script etiketinin içinde yazılı
  • ☐ Değişkenleri doğru şekilde tanımladım (let ile)
  • ☐ Fonksiyonu tanımlıdığım ve rengi değiştiren kodu yazdım
  • ☐ addEventListener ile butona tıklama olayı bağladım
  • ☐ Tarayıcıda test ettim, butona tıklanınca renk değişti

Kendini sına

Aşağıdaki 5 soruya cevap verin. Cevap verebilmek için daha fazla deney yapmak isteyebilirsiniz—o normal!

  1. JavaScript kodunu HTML dosyasına iki yolla ekleyebilirsiniz. Birinci yol, <script> etiketini HTML'nin içine yazmaktır. Peki ikinci yol nedir? (İpucu: Ayrı bir dosya ile ilgili)
  2. Aşağıdaki kodda hata var mı? Varsa hangisi? 
    let renk = "mavi"
document.getElementById("kutu").style.backgroundColor = renk
  3. const ve let arasındaki fark nedir kısaca? (Her ikiside değişken oluşturur, ama hangisi değiştirilemez?)
  4. Bir fonksiyonun içinde document.getElementById() yazarak HTML'den bir buton seçtik ve addEventListener ile tıklama olayı ekledik. Eğer fonksiyon tanımlanırsa ama asla çağrılmazsa (çalıştırılmazsa), buton yine çalışır mı?
  5. Bu kodu çalıştırırsanız ekranda hangi yazı görünecek? 
    let a = 5;
let b = 10;
let toplam = a + b;
document.getElementById("sonuc").innerHTML = toplam;

Cevaplar

  1. JavaScript kodunu ayrı bir .js dosyasında yazıp, HTML'de <script src="dosya.js"></script> şeklinde bağlamak. Bu, kod düzenli tutmayı ve birden fazla HTML dosyası tarafından paylaşmayı kolaylaştırır.
  2. Teknik olarak hata yoktur (tarayıcı çalıştırır), ama stil açısından yarı doğrudur. Programlama geleneklerine göre, her satırın sonunda noktalı virgül (;) konmalıdır. Bazı durumlar da unutulursa tarayıcı "otomatik ekleme" yaparsa da, her zaman konmalı: let renk = "mavi"; ve document.getElementById("kutu").style.backgroundColor = renk;
  3. const (constant = sabit) ile tanımlanan değişken, bir kez atandıktan sonra değiştirilemez. let ile tanımlanan değişken istediğiniz zaman değiştirilebilir. Örneğin: const yakinlik = 5; yazarsanız, sonra yakinlik = 10; yazamazsınız (hata verir). Ama let yakinlik = 5; yazıp sonra yakinlik = 10; yazabilirsiniz.
  4. Hayır, buton çalışmaz. Fonksiyon sadece tanımlanmak yetmez, çağrılması (çalıştırılması) lazım. addEventListener talimatı fonksiyonu hafızaya alır ve "bir olay olunca bunu çalıştır" der. Eğer addEventListener satırı çalıştırılmazsa, JavaScript butonun tıklandığında ne yapacağını bilmez.
  5. Ekranda 15 yazı görünecek. Çünkü a = 5, b = 10, ve toplam = a + b = 5 + 10 = 15. HTML'deki id="sonuc" olan öğenin içine bu sayı yazılıyor.

Tebrikler! JavaScript'in temelleri artık parmağınızın ucunda. Sonraki derste, daha karmaşık olayları (fare hareketi, sayfa kaydırması gibi), değişken türlerini (sayı, yazı, liste vb.) ve hata ayıklama tekniklerini öğreneceksiniz. Bu derste öğrendiğiniz değişken, fonksiyon ve olay konseptleri, ilerleyen JavaScript derslerinin temelini oluşturacak. İyi çalışmalar!

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol

← Önceki Sonraki →