Lessons·teens · intermediate
JavaScript: Build Interactive Features
Learn DOM manipulation, events, and closures by building real interactive features.
About 35 minutes
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ç HTMLinnerHTML, bir elemanın HTML içeriğini ayarlar. |
| addEventListeneraddEventListener attaches a function to an event. | olay dinleyicisi ekleaddEventListener, bir fonksiyonu bir olaya bağlar. |
| toggleToggle switches something on and off. | değiştirmekToggle, bir şeyi açık ile kapalı konumu arasında değiştirir. |
| template literalTemplate literals use backticks: `Hello ${name}`. | şablon dizesiTemplate literal'lar ters tırnak (backtick) kullanır: `Hello ${name}`. |
| JSONJSON stores data as text: {"name": "Elif"}. | JSONJSON verileri metin olarak saklar: {"name": "Elif"}. |
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
Now actually practise it
Reading a lesson is the easy half. A free account unlocks the parts that make it stick — listen to every word in a British accent, and use it in a live conversation with James. Your progress is saved and the words come back for review before you forget them.