What JavaScript is and where it runs

The big idea

Open any website with buttons that react, a menu that slides out or a game that runs in a tab, and JavaScript is doing the work. JavaScript is a programming language that every web browser can run. HTML gives a page its content, CSS gives it its looks, and JavaScript gives it its behaviour.

JavaScript was created in 1995 for the Netscape browser, and it has grown into one of the most widely used languages in the world. Despite the name, it has nothing to do with Java. The two are separate languages that only share part of a name.

Explained simply

A program is a list of instructions. Each instruction is called a statement, and JavaScript runs statements one at a time, from top to bottom, like reading a recipe.

There are two main places where JavaScript runs:

• The browser. Chrome, Firefox, Safari and Edge all contain a JavaScript engine, a part of the browser that reads your code and runs it. Code in the browser can change the page the user is looking at.
• Node.js (usually just "Node"). Node takes the JavaScript engine out of the browser so you can run programs from a terminal. Developers use it to build web servers, command-line tools and the build tools that prepare websites.

The first tool you need is console.log(...). It prints whatever you put between the brackets. In the browser the text appears in the console, a panel in the browser's developer tools. In Node it appears in the terminal. Programmers use it all the time to check what their code is doing.

Three ways to run JavaScript today:

1. The browser console. In Chrome or Edge, press F12 (or Ctrl+Shift+J on Windows, Cmd+Option+J on a Mac) and click the Console tab. Type console.log("Hi") and press Enter.
2. A script in a web page. Put a <script> tag at the end of the <body> of an HTML file, then open the file in a browser and look in the console.
3. Node. Install Node from its official website, save your code in a file such as hello.js, and run it from a terminal.

Here is the web page version. The script is at the end of the body, so the page content has loaded before the code runs.

<!DOCTYPE html>
<html>
  <body>
    <h1>My first script</h1>
    <script>
      console.log("Hello from the browser!");
    </script>
  </body>
</html>

Once your code grows, keep it in its own file and link it with <script src="app.js"></script>. That keeps HTML and JavaScript tidy and separate.

A comment is a note for humans. Anything after // on a line is ignored by JavaScript. Use comments to explain why the code does something, not to repeat what it obviously does.

Worked example

Save this as hello.js:

// hello.js: my first program
console.log("Hello, world!");
console.log("2 + 3 =", 2 + 3);
// 24 hours, 60 minutes each, 60 seconds each
console.log("Seconds in a day:", 24 * 60 * 60);

Then run it from a terminal in the same folder:

node hello.js

Hello, world!
2 + 3 = 5
Seconds in a day: 86400

Notice three things. Text goes inside quotes, so "2 + 3 =" is printed exactly as written. Numbers without quotes are worked out, so 2 + 3 becomes 5. And when you give console.log several values separated by commas, it prints them on one line with a space between each.

Now break it on purpose. Change line 2 to consol.log("Hello, world!"); (one letter missing) and run it again. Node stops and prints, among other lines:

ReferenceError: consol is not defined

A ReferenceError means you used a name that JavaScript does not know. Node also shows the file name and line number, and points at the problem with a ^. Get into the habit of reading the whole message: it usually tells you exactly where to look.

Common mistakes

• Forgetting the quotes around text. console.log(Hello) makes JavaScript look for something named Hello, and you get a ReferenceError.
• Wrong capital letters. JavaScript is case-sensitive: Console.log and console.Log will not work. It must be console.log.
• Mismatched brackets or quotes. Every ( needs a ), and a string started with " must end with ". The error is usually a SyntaxError, meaning the code is not written in a shape JavaScript can read.
• Running Node in the wrong folder. If you see "Cannot find module", the terminal is not in the folder where the file is saved.

Where you see this in real life

Every major website ships JavaScript to your browser: maps you can drag, chat windows, likes that update without reloading the page. On the other side, many companies run Node on their servers, and almost every modern web project uses Node-based tools to test and bundle its code. Learning one language gives you both sides.

Your turn

Write a program that prints your name on one line and the number of minutes in a week on the next. Work the number out with * rather than typing the answer.

Solution:

console.log("My name is Kofi");
console.log("Minutes in a week:", 7 * 24 * 60);

My name is Kofi
Minutes in a week: 10080