Introduction to JavaScript

JavaScript (JS) is the programming language of the web. HTML gives a page structure, CSS gives it style, and JavaScript gives it behavior: responding to clicks, validating forms, loading new data, animating, and much more.

JavaScript runs in every web browser, and with tools like Node.js it also runs on servers, in command-line tools, and even on tiny devices.

Adding JavaScript to a page

Place a <script> element at the end of the <body>, or in the <head> with defer:

<!-- External file (recommended) -->
<script src="app.js" defer></script>
 
<!-- Inline -->
<script>
  console.log("Hello from JavaScript!");
</script>

Your first program

<h1 id="greeting">Hello!</h1>
<button id="btn">Click me</button>

Click the button. In just a few lines, JavaScript found elements on the page and changed them when something happened.

The console

The console is a developer's best friend. Open it in your browser with F12 (or right-click, Inspect, then the Console tab).

console.log("Hello, world!");   // prints a message
console.log(2 + 3);             // 5
console.error("Something broke"); // prints an error
console.table([{ name: "Ada", age: 36 }]); // prints a table

You can also type JavaScript directly into the console and press Enter to run it. Try 2 * 21.

Statements and comments

A program is a list of statements, run from top to bottom. End each one with a semicolon.

// A single-line comment
/*
  A multi-line
  comment
*/
console.log("First");
console.log("Second");

Showing output on the page

Besides the console, you can show results in the page itself:

<p id="out"></p>

Summary

• JavaScript adds behavior to web pages and runs in every browser.
• Load it with <script src="..." defer>.
• console.log() prints values to the developer console.
• Statements run top to bottom; comments start with // or /* */.