Free course · Lesson 3 of 5

JavaScript Essentials for the Web

In this lesson you will

Select page elements with JavaScript
Respond to clicks and form input

Modern JavaScript (ES6+) brings websites to life. You can select elements with document.querySelector(), listen for clicks with .addEventListener(), and update content or classes on the fly.

document.querySelector('.btn') finds an element on the page.
.classList.toggle('dark') adds/removes a CSS class with one command.
Arrow functions (=>) and const/let are standard in 2026.
Always use <script defer> or place scripts before </body>.

Worked exampleDark Mode Toggle

HTML

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Dark Mode Demo - Rescue Academy</title>  <style>    :root { --bg: #ffffff; --text: #111827; --font: system-ui, sans-serif; }    body.dark { --bg: #1f2937; --text: #f9fafb; }    * { margin: 0; box-sizing: border-box; }    body {      font-family: var(--font);      background: var(--bg);      color: var(--text);      display: flex;      flex-direction: column;      align-items: center;      justify-content: center;      min-height: 100vh;      padding: 2rem;      transition: background 0.3s, color 0.3s;    }    button {      padding: 12px 24px;      font-size: 1rem;      border: none;      border-radius: 8px;      background: #1D448A;      color: white;      cursor: pointer;      margin-top: 1.5rem;    }    button:hover { background: #143166; }  </style></head><body>  <h1>Hello, South Sudan!</h1>  <p>Click the button to toggle dark mode.</p>  <button id="themeBtn">Toggle Dark Mode</button>   <script>    const btn = document.getElementById('themeBtn');    btn.addEventListener('click', () => {      document.body.classList.toggle('dark');      btn.textContent = document.body.classList.contains('dark')        ? 'Switch to Light' : 'Toggle Dark Mode';    });  </script></body></html>

Practice exercise

Add a button to your page that shows or hides an opening-hours section, and make it work with the keyboard too.

Key takeaways

querySelector finds elements; textContent changes text safely
addEventListener connects user actions to code
Use real buttons so everyone can use your controls

In the full program Module 3: JavaScript for Web Pages See how this topic is taught in depth, with practical activities and an assessment.

Free self-study lesson — no certificate. For the full instructor-led program, see registration options.