JavaScript Introduction

JavaScript is the programming language of the web - it is what makes pages interactive, reacting to clicks, fetching data, and updating content without a full page reload. Alongside HTML and CSS, it is one of the three core building blocks of the web.

What JavaScript Is For

While HTML gives a page structure and CSS gives it style, JavaScript gives it behavior. It lets you respond to user actions, validate forms, update the DOM on the fly, talk to servers, and build entire applications that run in the browser.

JavaScript is a high-level, interpreted (or just-in-time compiled) language. You do not need to compile it yourself - the browser (or a runtime like Node.js) reads and executes it directly.

Where JavaScript Runs

Originally, JavaScript only ran inside browsers. Every major browser has a built-in JavaScript engine (Chrome and Edge use V8, Firefox uses SpiderMonkey, Safari uses JavaScriptCore) that parses and executes your code.

Since 2009, Node.js has let JavaScript run outside the browser too - on servers, in command-line tools, and in build scripts. The core language is the same; what differs is the environment's available APIs (a browser gives you `document` and `window`, Node gives you file system and networking modules instead).

Adding JavaScript to a Page

You can write JavaScript directly inside a `<script>` tag, or link to an external `.js` file with the `src` attribute. Linking external files is preferred for anything beyond a few lines, since it keeps markup and logic separate and lets the browser cache the file.

Where you place the `<script>` tag matters. Placing it at the end of `<body>`, or using the `defer` attribute, ensures the HTML is parsed before your script runs and tries to touch the DOM.

A page with an inline script

Input

<div id="output" style="font-family: sans-serif; padding: 12px; line-height: 1.6;"></div>
<script>
  const output = document.getElementById('output');
  const log = (...args) => {
    output.innerHTML += args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ') + '<br>';
  };

  log('Hello from JavaScript!');
  log('2 + 2 =', 2 + 2);
</script>

Output

Scripts and Load Order

If a `<script>` sits in the `<head>` without `defer` or `async`, the browser stops parsing the rest of the HTML to fetch and run it. That is why classic advice puts scripts right before `</body>`, or uses `<script defer src="app.js"></script>` in the head, so the HTML keeps parsing while the script downloads in the background.

Coding Challenge

Write a script that declares a variable holding your favorite programming language as a string, then logs a sentence like "My favorite language is JavaScript" to the output div.

Input

<div id="output" style="font-family: sans-serif; padding: 12px; line-height: 1.6;"></div>
<script>
  const output = document.getElementById('output');
  const log = (...args) => {
    output.innerHTML += args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ') + '<br>';
  };

  // write your code here
</script>

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. What is JavaScript primarily responsible for on a web page?

2. Which engine does Chrome use to run JavaScript?

3. Which of these lets JavaScript run outside the browser?

4. Why is it common to place `<script>` tags at the end of `<body>` (or use `defer`)?