Web Teknolojileri #05 | Tarayıcıda JavaScript: script Etiketi ve DOM

Eğitmen: Dr. Süleyman Burak ÇELİK

Bu listede childNodes.length neden 5? JavaScript'i tarayıcıda çalıştırıyoruz: script etiketi (src ve defer), DOM belge ağacı ve düğüm türleri, ağaçta gezinme, öğe bulma (getElementById, querySelector ve CSS seçicileri), belgeyi değiştirme (appendChild, insertBefore, remove, createElement, replaceChild), textContent ve innerHTML, öznitelikler ve classList, stil ve yerleşim. Sekiz sınav tipi soruyu gerçek bir tarayıcıda çalıştırarak çözüyoruz. Bu derste: - script etiketi: okunduğu anda çalışır, src ve defer - DOM belge ağacı: öğe, metin ve yorum düğümleri - Ağaçta gezinme: parentNode, childNodes, children, nextSibling - Öğe bulma: getElementById, getElementsByTagName, querySelector, querySelectorAll - Belgeyi değiştirme: appendChild, insertBefore, remove, createElement, replaceChild, cloneNode - textContent mi innerHTML mi; öznitelikler, className ve classList - Stil, kademeli kurallar ve yerleşim; JSON verisinden ders listesi sayfası Bölümler: 0:00 Giriş: childNodes.length Kaç? 0:31 Kaynak Kitap 1:01 script Etiketi 1:37 Soru 1: head'deki script Ne Bulur? 2:42 DOM Ağacı ve Düğüm Türleri 3:13 Ağaçta Gezinme 3:43 Soru 2: Boşluk Düğümleri 5:08 Öğe Bulma 5:34 CSS Seçicileri 6:00 Soru 3: Seçici Ne Seçer? 6:56 Belgeyi Değiştirme 7:27 Soru 4: appendChild Taşır mı? 8:14 Düğüm Oluşturma 8:42 Soru 5: textContent mi innerHTML mi? 9:17 Soru 6: Canlı Liste Tuzağı 10:08 Öznitelikler ve classList 10:35 Soru 7: Hangi Renk Kazanır? 11:12 Yerleşim ve display none 11:43 Soru 8: JSON'dan Ders Listesi Sayfası 12:53 Bu Derste Öğrendiklerimiz Sıradaki derste olayları işliyoruz: olay dinleyicileri, olay nesnesi, yayılma, varsayılan davranış ve zamanlayıcılar. Kaynak: Marijn Haverbeke, Eloquent JavaScript, 4. baskı (2024), Bölüm 13 (HTML and JavaScript) ve Bölüm 14 (The Document Object Model) (konu sırası ve kavramlar kaynak kitaptan izlenir; kitap CC BY-NC 3.0). Kod örnekleri özgündür; bütün sayfalar gerçek bir tarayıcıda (headless Chrome) çalıştırılarak kaydedildi. Web Teknolojileri serisinin 5. dersi. Ön koşul: Web Teknolojileri serisinin nesneler, diziler ve JSON dersi.