g.grow.

Web Development Lesson 4 of 5

Modern JavaScript Fundamentals: Async/Await & DOM Manipulation

35:10 Foundations of Modern Web Development

Bring your website to life with interactive JavaScript. Handle user clicks, manipulate DOM elements dynamically, and fetch data from APIs.

Lesson notes

JavaScript is the engine of the web. It enables your page to respond to user clicks, validate forms in real time, and load data asynchronously without refreshing the page.

What you'll learn

  • querySelector, addEventListener, and dynamic classList updates
  • ES6+ syntax: const/let, arrow functions, destructuring, and template literals
  • Asynchronous programming with Promises and async/await fetch

1. Event Listeners & DOM Updates

Select elements with `document.querySelector()` and attach actions with `.addEventListener('click', () => { ... })`.

javascript
async function loadUserData() {
  try {
    const response = await fetch('https://api.example.com/users');
    if (!response.ok) throw new Error('Network error');
    const data = await response.json();
    console.log('Loaded users:', data);
  } catch (error) {
    console.error('Fetch failed:', error.message);
  }
}

Modern asynchronous JavaScript fetch pattern with error handling.