Lesson 4: JavaScript Fundamentals and DOM Manipulation

JavaScript gives a page behavior. It can react to user actions, update content, check input, and communicate with servers.

Core JavaScript basics include:

• variables,
• data types,
• operators,
• conditions,
• loops,
• functions,
• arrays and objects.

Example:

let studentName = "Lara";
let units = 21;

if (units > 18) {
  console.log("Overload request may be needed.");
}

In web development, JavaScript is often not used alone. It is connected to the browser environment. That means your script can act on page elements and respond to events like clicks, typing, or form submission.

A useful principle: write logic in small functions. This makes code easier to test and debug.

The browser represents the current page as the Document Object Model or DOM. JavaScript can read and change this structure.

Common DOM actions include:

• selecting elements,
• changing text or attributes,
• adding or removing classes,
• creating new elements,
• responding to events.

Example:

const title = document.querySelector("#pageTitle");
title.textContent = "Welcome, BSIT Student";

This selects an element whose ID is pageTitle and changes its display text.

Common selectors:

• document.querySelector() — first match
• document.querySelectorAll() — all matches

This bridge between JS and HTML is why interactive pages can update without being fully reloaded.