Introduction to JavaScript — JavaScript Course

What you'll learn

JavaScript is the programming language of the web—and much more. This lesson gives you the right mental model before syntax starts piling up.

Explain the separate jobs of HTML, CSS, and JavaScript
Understand engines, runtimes, and the ECMAScript standard
Run code in browser DevTools, an HTML page, and Node.js
Use statements, comments, semicolons, and strict mode

No setup required for your first experiment

Every modern browser already contains a JavaScript engine. Open DevTools, select Console, type 2 + 2, and press Enter.

What is JavaScript?

JavaScript is a high-level, dynamically typed, general-purpose language. It began as a way to make web pages interactive, but today it also powers servers, command-line tools, desktop apps, mobile apps, and embedded devices.

Layer	Job	Example
HTML	Structure and meaning	`<button>Save</button>`
CSS	Presentation and layout	`button { color: blue; }`
JavaScript	Behavior and data	`button.addEventListener(...)`

HTML describes, CSS presents, and JavaScript behaves.

Key idea

JavaScript is not Java. The names are similar for historical marketing reasons, but the languages have different type systems, runtimes, and design philosophies.

Engines and runtimes

A JavaScript engine parses and executes the language. V8 powers Chrome and Node.js; SpiderMonkey powers Firefox; JavaScriptCore powers Safari. A runtime packages an engine with useful host APIs.

Runtime	Host APIs it adds	Typical work
Browser	DOM, events, fetch, storage, timers	Interactive web applications
Node.js	Files, processes, streams, networking	Servers, tools, automation

The language itself does not know what a document or file is. The browser supplies document; Node supplies file-system APIs. Core values, functions, arrays, objects, and promises work in both.

JavaScript vs ECMAScript

ECMAScript is the standardized language specification; JavaScript is the name developers use for implementations of it. New editions are released regularly, while proposals mature through a public standards process.

Tip

Write modern JavaScript for the environments you actually support. Compatibility tables and project tooling are more useful than memorizing edition numbers.

Your fastest laboratory: Browser DevTools

Open DevTools with F12 or Ctrl+Shift+I (Cmd+Option+I on macOS). The Console executes expressions immediately; Sources provides files and breakpoints; Network shows requests; Elements lets you inspect the page.

DevTools Console

const minutes = 3 * 60;
console.log(minutes);
console.log("JavaScript is ready!");

Your first browser script

JavaScript can live inside a <script> element or in a separate .js file. Save this as index.html and open it in a browser:

index.html

<!doctype html>
<html lang="en">
  <head><meta charset="UTF-8"><title>My first JavaScript</title></head>
  <body>
    <h1 id="greeting">Loading…</h1>
    <script>
      const name = "Maya";
      document.querySelector("#greeting").textContent = `Hello, ${name}!`;
      console.log("The script ran successfully.");
    </script>
  </body>
</html>

The script changes the page and writes a diagnostic message to the console.

Tip

For real projects, prefer <script type="module" src="app.js"></script>. Modules are deferred automatically and keep code out of the global scope.

Running JavaScript with Node.js

Install a current Node.js LTS release when you want JavaScript outside the browser. Save this program as hello.js, then run node hello.js from its folder.

hello.js

const language = "JavaScript";
const year = 1995;

console.log(`${language} first appeared in ${year}.`);

Node also includes an interactive REPL: run node with no file, enter expressions, and use .exit when finished.

Syntax essentials

JavaScript is case-sensitive: score and Score differ.
// starts a line comment; /* ... */ creates a block comment.
Semicolons usually end statements. Automatic Semicolon Insertion exists, but consistent semicolons avoid surprising edge cases.
Blocks use braces: { ... }.
"use strict"; turns old error-prone behavior into errors. ES modules are strict automatically.

syntax.js

"use strict";

// A statement stores a value.
const course = "JavaScript";

/* An expression produces a value. */
const excited = course + "!";
console.log(excited);

Recap & quick check

Key takeaways

JavaScript supplies behavior on the web and also runs in server and tool runtimes.
An engine executes the language; a runtime adds host APIs such as the DOM or file access.
ECMAScript is the standard that JavaScript engines implement.
The browser console is the quickest place to experiment, while Node.js runs .js files outside the browser.

Quick check

1. Which browser layer normally handles behavior and interaction?

2. What is V8?

3. Which object is supplied specifically by the browser runtime?

4. How do you run hello.js with Node?

You now know where JavaScript runs and how to execute it. Next: Variables & Data Types.