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.

Giriş ve Khan Academy'nin tüm özelliklerini kullanmak için lütfen tarayıcınızda JavaScript'i etkinleştirin.

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?

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

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

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

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ı

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

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

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!

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.