Web Programming Fundamentals in JavaScript

Introduction

Browser JavaScript connects your code to HTML, CSS, and network APIs. This chapter maps the page structure (DOM), how scripts load, and how browser JS differs from Node—so later chapters on events and DOM manipulation have context.

Prerequisites

The Page Stack

  • HTML — structure and semantics
  • CSS — presentation
  • JavaScript — behavior, data fetching, updates
html
<!-- Minimal page with script -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
  </head>
  <body>
    <h1 id="title">Hello</h1>
    <script>
      document.getElementById("title").textContent = "Hello, Web!";
    </script>
  </body>
</html>

Save as .html and open in a browser, or use VS Code Live Server.

The DOM

The Document Object Model is a tree of nodes the browser builds from HTML. JavaScript reads and changes it via document and element APIs—see DOM manipulation.

Where Scripts Run

html
<!-- Defer: download in parallel, run after HTML parsed -->
<script defer src="app.js"></script>
 
<!-- Module: strict mode, import/export -->
<script type="module" src="main.js"></script>

Avoid blocking scripts in <head> without defer/async for large apps.

Browser vs Node APIs

BrowserNode.js
document, windowfs, process
fetch, localStoragehttp, file system
DOM eventsStreams, CLI

Core language (types, functions, classes) is shared.

DevTools

Use Console for logs, Elements to inspect DOM, Network for fetch requests. Same console methods as Console API.

Security Mindset (Brief)

  • Never trust raw user HTML—escape or sanitize
  • Use HTTPS in production
  • Avoid storing secrets in front-end code

Mini Example: Update Clock in Page

html
<!-- clock.html — open in browser -->
<p id="clock"></p>
<script>
  const el = document.getElementById("clock");
  function tick() {
    el.textContent = new Date().toLocaleTimeString();
  }
  tick();
  setInterval(tick, 1000);
</script>

FAQ

Do I need a framework?

Plain DOM JS is enough to learn; frameworks build on the same APIs.

window vs globalThis?

globalThis works in browser and Node; window is browser-specific.

CORS?

Browsers restrict cross-origin fetch unless the server sends allowed headers—server configuration topic.

What comes next?

Events.