Welcome to Lesson 4! Now that you have mastered HTML and CSS, it’s time to make your web pages interactive using JavaScript (JS). JavaScript is a programming language that allows you to manipulate HTML elements, handle events, and add dynamic behavior to your pages. Unlike HTML and CSS, which are primarily about structure and presentation, JavaScript introduces logic, conditions, and actions, making your websites responsive to user input.

JavaScript can be added to a page in three ways: inline, internal, and external. Inline JavaScript is added directly to an HTML element using the onclick attribute, for example: <button onclick="alert('Hello!')">Click Me</button>. While simple, this approach is discouraged for maintainability and scalability.

Internal JavaScript is written inside a <script> tag in the HTML file, usually at the end of the <body> section. External JavaScript is preferred for larger projects. It involves linking a separate .js file using <script src="main.js"></script>. External scripts allow multiple pages to share the same JS code, improving organization and maintainability.

Variables are fundamental in JavaScript. They store values that can be used and updated throughout your program. Modern JavaScript uses let and const to declare variables. For example:

let username = "Alice";
const pi = 3.14159;

let allows you to reassign the variable later, while const creates a constant value that cannot be changed. Understanding when to use each is essential for writing predictable and bug-free code.

JavaScript supports several data types: numbers, strings, booleans, arrays, objects, null, and undefined. Strings are sequences of characters enclosed in quotes:

let greeting = "Hello, World!";

Booleans are true/false values:

let isLoggedIn = false;

Arrays store multiple values in a single variable:

let colors = ["red", "green", "blue"];

Objects store key-value pairs, useful for representing structured data:

let user = {
  name: "Alice",
  age: 25,
  isAdmin: true
};

Operators in JavaScript include arithmetic (+, -, *, /), comparison (==, ===, !=, <, >), logical (&&, ||, !), and assignment (=, +=, -=). For example:

let total = 10 + 5; // 15
let isEqual = (total === 15); // true

Functions allow you to group code into reusable blocks. A function is defined using the function keyword:

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("Alice");

Functions can also return values:

function add(a, b) {
  return a + b;
}
let result = add(5, 3); // 8

JavaScript uses conditional statements like if, else if, and else to make decisions based on conditions:

let age = 18;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Loops are used to repeat actions. Common loops include for, while, and for...of. Example:

for (let i = 0; i < 5; i++) {
  console.log("Iteration " + i);
}

JavaScript can interact with the HTML page through the Document Object Model (DOM). The DOM represents the structure of the page as objects, allowing you to select and manipulate elements dynamically. You can select elements using methods like document.getElementById, document.querySelector, or document.getElementsByClassName:

let heading = document.getElementById("main-heading");
heading.textContent = "Welcome to JavaScript!";

Events allow your code to respond to user interactions, such as clicks, typing, or scrolling. For example, you can add a click event listener to a button:

let button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

JavaScript also supports modern ES6+ features like arrow functions, template literals, and destructuring:

// Arrow function
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

// Destructuring
const user = {name: "Alice", age: 25};
const {name, age} = user;

Errors are inevitable when coding. JavaScript provides the console for debugging, using console.log(), console.warn(), and console.error(). Learning to read errors and debug effectively is crucial for problem-solving.

Practice exercises include creating a counter that increments when a button is clicked, building a simple calculator, or validating a form’s input. These exercises strengthen your understanding of variables, functions, conditions, loops, and DOM interactions.

By the end of this lesson, you should be able to:

  • Understand variables, data types, and operators
  • Create and call functions
  • Use conditionals and loops
  • Manipulate the DOM and update content dynamically
  • Handle events and user interactions
  • Use modern ES6+ syntax like arrow functions, template literals, and destructuring

JavaScript is a versatile and powerful language. The more you experiment, the better you will understand how to create interactive, dynamic web pages. In the next lesson, we will focus on DOM Manipulation, where you will learn how to dynamically create, update, and remove elements on a page, creating fully interactive applications.

Next Lesson: DOM Manipulation →