If you're seeing this message, it means we're having trouble loading external resources on our website.

Bağlandığınız bilgisayar bir web filtresi kullanıyorsa, *.kastatic.org ve *.kasandbox.org adreslerinin engellerini kaldırmayı unutmayın.

Ana içerik

Ünite: HTML/JS: Web Sayfalarını İnteraktif Hale Getirme

Web Sayfalarınızı İnteraktif Hale Getirmeye Hazır mısınız?

Web sitenizi HTML, JavaScript ve DOM API kullanarak nasıl daha interaktif yapabileceğinizi öğrenmeye hazır mısınız? Bu bölümde bilgilerinizi tazelemek için sorular bulacaksınız, haydi başlayın!
Bu bölümdeki konular:
Web Sayfalarını İnteraktif Hale Getirme
(Bir ekran açılır)
HTML/CSS Tekrarı
(Bir ekran açılır)
JavaScript Tekrarı
(Bir ekran açılır)
Alıştırma
Test: HTML/CSS özet
5 soru

JS ve DOM

JavaScript kullanarak bir web sayfasının DOM (Document Object Model)'ini nasıl kontrol edebileceğinizi öğrenin.
Bu bölümdeki konular:
Bir web sayfasına JS koyma
(Bir ekran açılır)
Yarışma: Komut dosyalı bir script etiketi
(Bir ekran açılır)
DOM - Document Object Model (Belge Nesnesi Modeli)
(Bir ekran açılır)
Web Tarayıcısı Konsolu İle Web Sayfalarını Debug Etme
(Bir ekran açılır)
Alıştırma
Test: DOM nedir?
4 soru

DOM Erişim Yöntemleri

JavaScript üzerinden DOM API'ını kullanarak web sayfanızdaki elementleri nasıl değiştiribileceğinizi öğrenin.
Bu bölümdeki konular:
Kimlikle öğe bulma
(Bir ekran açılır)
Zor Görev: Kimlik değiştiricisi
(Bir ekran açılır)
Birden çok DOM öğesini etiket ve sınıf ismiyle bulma
(Bir ekran açılır)
Zor Görev: Özel isim etiketleri
(Bir ekran açılır)
CSS seçiciyle öğe bulma
(Bir ekran açılır)
Zor Görev: Sorgu modernleştiricisi
(Bir ekran açılır)
Özet: DOM erişim yöntemleri
(Bir ekran açılır)

DOM Değiştirme

JavaScript üzerinden DOM API'ını kullanarak web sayfanızdaki elementlerin özelliklerini nasıl değiştirebileceğinizi ya da nasıl sıfırdan yeni elementler ekleyebileceğinizi öğrenin.
Bu bölümdeki konular:
Öznitelikleri değiştirme
(Bir ekran açılır)
Zor Görev: Avatarların öznitelikleri
(Bir ekran açılır)
Stilleri değiştirme
(Bir ekran açılır)
Zor Görev: Stil rehberi
(Bir ekran açılır)
CSS sınıflarını değiştirme
(Bir ekran açılır)
Zor Görev: Sınıflandırma
(Bir ekran açılır)
innerHTML ve textContext ayarları
(Bir ekran açılır)
Zor Görev: İç yüzü
(Bir ekran açılır)
Öğeleri sıfırdan yaratma
(Bir ekran açılır)
Zor Görev: Bir güneş sistemi oluşturma
(Bir ekran açılır)

DOM Olayları

JavaScript üzerinden DOM API'ını kullanarak web sayfanızın klikleme, aşağı kaydırma ya da form doldurma gibi kullanıcı hareketlerine nasıl tepki vermesini sağlayabileceğinizi öğrenin.
Bu bölümdeki konular:
Web Sayfalarını Olaylarla (Event’lerle) İnteraktif Hale Getirme
(Bir ekran açılır)
Bir olay dinleyicisi ekleme
(Bir ekran açılır)
Zor Görev: Kedi Tıklama
(Bir ekran açılır)
DOM olay türleri
(Bir ekran açılır)
Olay özelliklerini kullanma
(Bir ekran açılır)
Zor Görev: Kedi-saklama
(Bir ekran açılır)
Formları olaylarla işleme
(Bir ekran açılır)
Zor Görev: Kim, Kiminle, Nerede
(Bir ekran açılır)
Olayların ön tanımlı davranışlarını önleme
(Bir ekran açılır)
Özet: DOM olayları
(Bir ekran açılır)

DOM Animasyon

Web sayfanızın farklı bölümlerine nasıl animasyon ekleyebileceğinizi öğrenin. Bunun için size üç farklı teknik göstereceğiz: window.setInterval, window.requestAnimationFrame ve CSS animations/transitions.
Bu bölümdeki konular:
Pencere nesnesi
(Bir ekran açılır)
setInterval ile DOM animasyonu
(Bir ekran açılır)
Zor Görev: Kronometre
(Bir ekran açılır)
requestAnimationFrame ile animasyon stilleri
(Bir ekran açılır)
Zor Görev: Kediyolu
(Bir ekran açılır)
CSS animasyonlarıyla animasyon stilleri
(Bir ekran açılır)
Hangi DOM animasyon yöntemini kullanmalısınız?
(Bir ekran açılır)

Web Sayfanızda JS Kütüphanelerini Kullanma

Başka web geliştiricileri tarafından yapılan işlevselliği kullanmak için, web sayfanıza JS kitaplıkları eklemeyi öğrenin.
Bu bölümdeki konular:
JS kitaplığı nedir?
(Bir ekran açılır)
JS kitaplığı kullanma: Slayt kitaplığı
(Bir ekran açılır)
JS kitaplıkları nerede barındırılır?
(Bir ekran açılır)
Alıştırma
Test: JS kitaplıkları
5 soru

Daha Fazla Öğrenelim!

Artık JavaScript'le web sayfalarınızı düzenlemeyi öğrendiğinize göre, daha neler öğrenebilirsiniz?
Bu bölümdeki konular:
Sıradaki konular
(Bir ekran açılır)

Bu ünite hakkında

Hem JS'ye Giriş, hem de HTML/CSS'ye Giriş derslerini aldıktan sınra, web sayfalarınızı etkileşimli yapmak için bu dersi alıp HTML/CSS'yi JavaScript DOM API ile kullanmayı öğrenin.