JavaScript Introduction

By the end of this lesson, you will understand what JavaScript is, why it runs in browsers, and how it adds behavior to web pages.

What it is

JavaScript is a high-level programming language that browsers can run directly. It is the main language for adding behavior to web pages: responding to clicks, validating forms, updating content without reloading, fetching data from servers, and creating animations.

A useful mental model is that HTML provides structure, CSS provides presentation, and JavaScript provides behavior. Related terms include ECMAScript, the language standard JavaScript implements; DOM, the browser’s object model for page elements; runtime, the environment that executes JavaScript; and Node.js, a JavaScript runtime outside the browser.

Why it matters

• It lets web pages react to user actions such as clicks, typing, scrolling, and form submission.
• It can change page content dynamically without reloading the whole page.
• It connects front-end interfaces to back-end services using network requests.
• It supports modern web applications, including single-page apps, dashboards, games, and interactive tools.
• It is widely supported across browsers and has a large ecosystem of libraries and frameworks.

Syntax or steps

The smallest useful browser pattern is: select an element, attach an event listener, and run code when the event happens.

1. Use document.getElementById() or another DOM method to find an element.
2. Call addEventListener() on that element.
3. Pass the event name, such as "click", and a function to run.
4. Inside the function, use browser APIs like console.log(), alert(), or DOM updates.

Example

<!DOCTYPE html>
<html>
<body>
  <button id="greet">Say hello</button>

  <script>
    const button = document.getElementById("greet");

    button.addEventListener("click", () => {
      console.log("Hello, World!");
    });
  </script>
</body>
</html>

Part by part: the <button> creates a clickable element with the id greet. The <script> tag contains JavaScript that the browser executes. document.getElementById("greet") finds the button. addEventListener("click", ...) waits for the user to click it. When the click happens, the arrow function runs and prints Hello, World! to the browser console.

Common mistakes

• Running JavaScript before the page exists. If the script tries to select an element that has not loaded yet, it may fail. Fix this by placing the script near the end of the <body> or using defer.
• Forgetting that event listeners need a function. Writing button.addEventListener("click", console.log("clicked")) runs immediately. Fix it by passing a function, such as () => console.log("clicked").
• Assuming network requests finish instantly. Fetching data is asynchronous. Fix it by using async and await, or by handling promises with .then().
• Confusing JavaScript with HTML or CSS. JavaScript cannot style elements directly unless it changes classes or styles through the DOM. Fix it by using CSS for appearance and JavaScript for behavior.

When to use it

JavaScript is appropriate when you need interactive behavior in the browser. A close alternative is TypeScript, which adds static types to JavaScript and compiles to JavaScript before running in the browser.

Practice

Guided exercise: Create an HTML page with a button. When the button is clicked, use console.log() to print "Button clicked". Open the browser console to verify the output.

Challenge: Add a paragraph with the text "Waiting...". When the button is clicked, change the paragraph text to "Clicked!".

Hint: Use document.getElementById() to select the paragraph, then set its textContent property inside the click handler.

Quick check

What does the DOM allow JavaScript to do in a browser?

The DOM allows JavaScript to read and change the structure, content, and attributes of a web page while it is running in the browser.

Summary

JavaScript is the browser’s native programming language for behavior. It works with HTML and CSS to make pages interactive, dynamic, and responsive to user actions.