Dersler·Gençler · Orta

JavaScript ile İnteraktif Özellikler Geliştir

İngilizce ders adı: JavaScript: Build Interactive Features

DOM manipülasyonu, olaylar ve closure'lar ile gerçek interaktif web özellikleri oluşturmayı öğrenin. Orta seviye genç öğrenciler için ideal.

Bu derste, JavaScript'in temel taşlarından olan DOM (Belge Nesne Modeli) ile tanışacak ve web sayfalarını nasıl dinamik hale getirebileceğinizi keşfedeceksiniz. Çeşitli uygulamalı görevlerle, kullanıcı etkileşimlerini yönetmeyi ve gelişmiş JavaScript tekniklerini kullanmayı öğreneceksiniz.

Yaklaşık 35 dakika

DOM & Events Terms

English	Türkçe
DOMThe DOM represents the page as a tree of objects.	Belge Nesne ModeliDOM, sayfayı bir nesne ağacı olarak temsil eder.
eventA click is an event.	olayTıklama bir olaydır.
listenerAn event listener waits for something to happen.	dinleyiciOlay dinleyici, bir şeyin gerçekleşmesini bekler.
callbackA callback is a function passed to another function.	geri çağırmaCallback, başka bir fonksiyona aktarılan bir fonksiyondur.
querySelectorquerySelector finds an element in the DOM.	seçici sorgusuquerySelector, DOM içinde bir elemanı bulur.
innerHTMLinnerHTML sets the HTML content of an element.	iç HTML

What is the DOM?

The DOM (Document Object Model) is how JavaScript sees your web page. It turns HTML into a tree of objects that JavaScript can read and change. Key methods: • document.querySelector('.class') — find an element • element.textContent — get or set text • element.addEventListener('click', fn) — react to events • element.classList.toggle('active') — add/remove classes

Challenge 1: Select and Change

Challenge 2: Array Push & Length

Challenge 3: Filter Completed Items

Challenge 4: Toggle Property

Challenge 5: Counter with Closure

Challenge 6: Transform Data

Knowledge Check

← All lessons