JavaScript: JavaScript Code Examples
This page collects selected code examples from each lesson of the JavaScript tutorial for quick reference.
Each example is a self-contained HTML file — copy it, save as a .html file, and open it in a browser to see it in action.
▶ Example Index
| Lesson | Example | Key Concepts |
|---|---|---|
| 22 | Five selection methods compared | getElementById, querySelector, etc. |
| 22 | textContent vs innerHTML | Modifying element content |
| 22 | Manipulating link attributes | getAttribute, setAttribute |
| 22 | Dynamically adding list items | createElement, appendChild |
| 22 | Removing and cloning nodes | removeChild, cloneNode |
| 23 | Reading and writing the style property | element.style |
| 23 | Theme toggle | classList.toggle |
| 23 | Show and hide elements | classList |
| 23 | Getting computed styles | getComputedStyle |
| 23 | Bulk styling with cssText | style.cssText |
| 24 | Button click counter | addEventListener, event object |
| 24 | Keyboard detection | keydown event |
| 24 | Form interception | preventDefault |
| 24 | Event delegation | e.target, bubbling |
| 25 | Serialization and formatting | JSON.stringify, replacer, space |
| 25 | Deserialization | JSON.parse |
| 25 | Common JSON errors | try/catch, JSON syntax pitfalls |
| 26 | Callback basics | setTimeout, callback functions |
| 26 | Simulating requests with Promise | new Promise, then/catch |
| 26 | async/await | async functions, await |
| 26 | Promise.all and race | Concurrent requests, racing |
| 27 | Student class | class, constructor, methods |
| 27 | Static methods and getter/setter | static, get, set |
| 27 | Inheritance demo | extends, super |
| 27 | Simulating modules in a single file | type="module" |
▶ Example
A self-contained event delegation example:
HTML
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
e.target.style.textDecoration =
e.target.style.textDecoration ? '' : 'line-through';
}
});
</script>
Click any list item to toggle a strikethrough — no individual event listeners needed.
▶ Example
JSON stringify and parse round-trip:
JAVASCRIPT
const data = { name: 'Alice', scores: [90, 85, 92] };
const json = JSON.stringify(data, null, 2);
console.log(json);
// {
// "name": "Alice",
// "scores": [90, 85, 92]
// }
const parsed = JSON.parse(json);
console.log(parsed.name); // Alice
console.log(parsed.scores); // [90, 85, 92]
More examples will be added over time. Stay tuned!
❓ FAQ
Q How do I run these examples?
A Copy the code into a file named
example.html and open it in a browser. No build step or server is needed for most examples.Q Can I modify the examples and see results?
A Yes! Open the file in a text editor, change something, save, and refresh the browser. JavaScript changes are immediate.
Q Where are the larger examples (e.g., Todo app)?
A See lesson 28 — the Todo App project. This index only collects short, single-concept snippets.
📖 Summary
- Each example is self-contained — copy and run in any browser
- Examples focus on one concept at a time
- Modify freely to explore behavior
- For larger projects, see the dedicated lessons
📝 Exercises
- Pick any example, modify it, and document the new behavior in a comment.
- Combine two examples (e.g., variables + events) into a single page.
- Create your own example page teaching a concept you find confusing.
