DOM ile Etkileşim: Sayfayı Dinamik Hale Getirme
Bu derste ne yapacağız?
Bu derste, HTML sayfanızdaki öğeleri JavaScript ile nasıl seçip değiştireceğinizi öğreneceksiniz. Kursun önceki derslerinde HTML ile sayfanın iskeletini kurmayı, CSS ile görünümünü süslemeyi ve JavaScript'in temel yazım kurallarını (değişkenler, fonksiyonlar, olaylar) gördünüz. Bu derste bu bilgileri birleştirip kullanıcı bir düğmeye tıkladığında veya bir kutuya bir şey yazdığında sayfanın anında tepki vermesini sağlayan küçük, çalışan bir mini uygulama tamamlayacaksınız.
Ön koşul olarak; kendi bilgisayarınızda bir metin düzenleyici (örneğin Not Defteri veya benzeri bir program) ile oluşturduğunuz, içinde en az bir <h1>, bir <p> ve bir <button> öğesi bulunan bir HTML dosyanızın olması ve bunu tarayıcıda açabilmeniz yeterlidir. Önceki derste öğrendiğiniz gibi JavaScript kodunu ya <script> etiketi içine ya da ayrı bir .js dosyasına yazabilirsiniz.
Kavram
Tarayıcı, bir HTML sayfasını yüklediğinde onu görünmez bir ağaç yapısına dönüştürür. Bu yapıya DOM denir; açılımı "Document Object Model", yani "Belge Nesne Modeli"dir. Sayfadaki her başlık, her paragraf, her düğme bu ağaçta ayrı bir "nesne" olarak durur ve JavaScript bu nesnelere ulaşıp onları okuyabilir, değiştirebilir.
Bunu bir tiyatro sahnesine benzetebilirsiniz. HTML, sahnedeki dekorları ve oyuncuları yerleştiren kişi gibidir; sahneyi bir kere kurar. CSS, o dekorların rengini, kıyafetlerin stilini belirleyen kostüm ve sahne tasarımcısıdır. JavaScript ise sahnede olayları yöneten yönetmen gibidir: seyirci (kullanıcı) bir şey yaptığında "şimdi ışığı söndür", "şimdi bu oyuncu öne çıksın" gibi anlık talimatlar verir. DOM, yönetmenin sahnedeki her şeye ulaşabildiği o görünmez kumanda paneli gibidir.
Bu derste iki temel işlemi öğreneceksiniz: bir öğeyi seçmek (kumanda panelinde doğru düğmeyi bulmak) ve seçilen öğeyi değiştirmek (o düğmeye basmak). Seçmek için genellikle document.querySelector veya document.getElementById kullanılır; değiştirmek için ise öğenin textContent (yazısı) veya style (görünümü) gibi özellikleri kullanılır. Kullanıcının ne zaman bir şey yaptığını anlamak içinse addEventListener ile "olay dinleyicisi" eklenir; bu, yönetmenin seyirciyi izleyip tepki verdiği andır.
Adım adım uygulama
Aşağıdaki adımları izleyerek "kişisel selamlama ve beğeni sayacı" adlı küçük bir mini uygulama yapacaksınız. Tarayıcı arayüzleri sürüme göre küçük farklar gösterebilir; aşağıdaki adımlar güncel bir tarayıcı (örneğin Chrome, Edge veya Firefox) için geçerlidir.
- 1. Adım: Metin düzenleyicinizde yeni bir HTML dosyası açın ve içine gövde (<body>) bölümüne şu öğeleri ekleyin: bir <input> kutusu (isim yazmak için, id değeri "isimKutusu"), bir <button> (üzerinde "Selamla" yazsın, id değeri "selamButonu"), bir <p> (id değeri "selamMesaji", başlangıçta boş kalabilir) ve ayrı bir <button> daha (üzerinde "Beğen" yazsın, id değeri "begenButonu") ile bir <p> (id değeri "begenSayisi", içinde "0 beğeni" yazsın).
- 2. Adım: Gövdenin en altına, kapanış </body> etiketinden hemen önce bir <script> etiketi açın. JavaScript kodunuzu buraya yazacaksınız; bu sırayla yazmanızın sebebi, tarayıcının kodu çalıştırdığı anda yukarıdaki HTML öğelerinin zaten sayfada var olmasını garanti etmesidir.
- 3. Adım: Script içine önce düğmeleri ve kutuları değişkenlere kaydedin: const isimKutusu = document.getElementById("isimKutusu"); satırı isim kutusunu bulur ve isimKutusu adlı kutuya koyar. Aynı mantıkla const selamButonu = document.getElementById("selamButonu");, const selamMesaji = document.getElementById("selamMesaji");, const begenButonu = document.getElementById("begenButonu"); ve const begenSayisi = document.getElementById("begenSayisi"); satırlarını da ekleyin.
- 4. Adım: Selamlama işlevini ekleyin: selamButonu.addEventListener("click", function() { ... }); Bu satır, "selamButonu"na tıklandığında içindeki fonksiyonun çalışmasını sağlar. Fonksiyonun içine şunu yazın: const ad = isimKutusu.value; (kutuya yazılan metni okur) ve ardından selamMesaji.textContent = "Merhaba, " + ad + "!"; (paragrafın yazısını değiştirir).
- 5. Adım: Beğeni sayacını ekleyin: fonksiyon dışına let sayac = 0; yazarak sayıyı tutan bir değişken oluşturun. Sonra begenButonu.addEventListener("click", function() { ... }); içine sayac = sayac + 1; (sayıyı bir artırır) ve begenSayisi.textContent = sayac + " beğeni"; (paragrafı günceller) satırlarını ekleyin.
- 6. Adım: İsterseniz görsel bir dokunuş daha ekleyin: beğeni on'a ulaştığında rengi değiştirsin. Bu satırı beğeni artırma kodunun altına ekleyin: if (sayac >= 10) { begenSayisi.style.color = "green"; } Bu, DOM üzerinden sadece yazıyı değil, CSS stilini de değiştirebildiğinizi gösterir.
- 7. Adım: Dosyayı kaydedin ve tarayıcıda açın (dosyaya çift tıklayarak ya da tarayıcının "Dosya Aç" menüsünden). İsim kutusuna adınızı yazıp "Selamla" düğmesine, ardından "Beğen" düğmesine birkaç kez tıklayarak sayfanın tepki verdiğini gözlemleyin.
Sık karşılaşılan sorunlar
| Hata / Belirti | Olası Sebep ve Çözüm |
|---|---|
| Düğmeye tıklayınca hiçbir şey olmuyor | Script etiketi HTML öğelerinden önce yazılmış olabilir; script'i her zaman ilgili öğelerden sonra, gövdenin en altına koyun. Ayrıca id değerlerinin HTML ile JavaScript'te birebir aynı (büyük/küçük harf dahil) yazıldığından emin olun. |
| Konsolda "null" ile ilgili bir hata görülüyor (örneğin "Cannot read properties of null") | document.getElementById aradığı id'yi bulamamıştır; genellikle yazım hatası veya script'in çok erken çalışması sebebiyledir. Tarayıcıda F12 tuşuna basıp Console sekmesinden hatanın hangi satırda olduğunu kontrol edin. |
| Selamlama mesajı hep boş görünüyor | isimKutusu.value yerine yanlışlıkla isimKutusu.textContent kullanılmış olabilir; input kutularının yazısı value özelliğiyle okunur, textContent ile değil. |
| Beğeni sayısı hep "0 beğeni" olarak kalıyor | sayac değişkeni fonksiyonun içinde tanımlanmış olabilir; bu durumda her tıklamada sıfırdan başlar. sayac'ı fonksiyonların dışında, script'in üst kısmında tanımladığınızdan emin olun. |
| Sayfa açılınca tarayıcı boş bir sekme gösteriyor | Dosya uzantısının .html olduğundan ve tarayıcının dosyayı bir metin dosyası olarak değil web sayfası olarak açtığından emin olun. |
Mini görev
Şimdi öğrendiklerinizi biraz genişletin: yukarıdaki mini uygulamaya üçüncü bir özellik ekleyin. Bir "Sıfırla" düğmesi (id değeri "sifirlaButonu") oluşturun; bu düğmeye tıklandığında hem beğeni sayacı sıfıra dönsün (sayac = 0; ve ekrandaki yazıyı da güncelleyin) hem de selamlama mesajı ve yazının rengi başlangıç haline dönsün.
- HTML'e id değeri "sifirlaButonu" olan bir düğme ekledim.
- JavaScript'te bu düğmeyi document.getElementById ile seçtim.
- Düğmeye bir click olay dinleyicisi ekledim.
- Dinleyici içinde sayac değişkenini sıfırladım ve ekrandaki yazıyı güncelledim.
- Selamlama mesajını ve rengi de başlangıç durumuna döndürdüm.
- Tarayıcıda tüm düğmeleri sırayla test ettim; hepsi beklendiği gibi çalışıyor.
Kendini sına
1. DOM kelimesinin açılımı nedir ve tarayıcı içindeki rolü kısaca nedir?
2. document.getElementById fonksiyonu ne işe yarar?
3. Bir düğmeye tıklandığında kod çalıştırmak için hangi yöntem kullanılır?
4. Bir input kutusuna yazılan metni okumak için hangi özellik kullanılır: value mi, textContent mi?
5. Bir paragrafın rengini JavaScript ile değiştirmek için hangi özelliğe erişilir?
Cevaplar
1. DOM, "Document Object Model" yani "Belge Nesne Modeli" anlamına gelir; tarayıcının HTML sayfasını, JavaScript'in okuyup değiştirebileceği bir ağaç yapısına dönüştürmesidir.
2. Sayfadaki bir HTML öğesini kendisine verilen benzersiz id değerinden bularak JavaScript içinde kullanılabilir hale getirir.
3. addEventListener metodu; ilgili öğeye "click" gibi bir olay adıyla birlikte çalıştırılacak fonksiyon eklenir.
4. value özelliği kullanılır; textContent genellikle paragraf, başlık gibi öğelerin yazısını okumak veya değiştirmek içindir, input kutularında value kullanılır.
5. Öğenin style özelliğine, örneğin style.color gibi bir alt özelliğe erişilerek renk değiştirilir.
Kapanış
Bu ders ile birlikte "Web Geliştirme Temelleri: HTML, CSS ve JavaScript ile İlk Web Siteniz" kursunu tamamladınız. Başlangıçta boş bir sayfaya HTML ile iskelet kurdunuz, CSS ile bu iskelete görünüm kazandırdınız ve son olarak JavaScript ile DOM üzerinden sayfayı kullanıcı etkileşimine duyarlı, canlı bir uygulamaya dönüştürdünüz. Artık kendi küçük web projelerinizi baştan sona, sayfanın yapısından görünümüne ve davranışına kadar kurabilecek temel bilgiye sahipsiniz. Bundan sonraki doğal adım, öğrendiğiniz bu üç dili birleştirerek kendi fikrinize göre küçük bir kişisel proje (örneğin bir not defteri, bir basit hesap makinesi veya bir kişisel tanıtım sayfası) yapmak ve pratik yaparak bilginizi pekiştirmek olacaktır.
Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol