Hello, world!

Your first script

Hello, world! is a tiny first program. Many developers write it first when they learn a new language. It only prints a short message. But it checks three important things:

• Your code is in the right place.
• The right program is running it.
• You can see what it prints.

In this lesson you run JavaScript in two places: a web page in the browser, and Node.js. A program that runs your JavaScript is called a host. You met hosts in the Engines, runtimes & hosts lesson. Both hosts understand the same JavaScript language. But each host gives your code different tools.

You will also use console.log a lot. It prints a message for you, the developer. Visitors to the page don't see it. The Why JavaScript? lesson already used it. Here you'll learn exactly what it can print.

The browser reads an HTML page from top to bottom. When it reaches a <script> tag, it stops and runs the code right there. Then it carries on reading the page.

Here is the smallest page with a script in it. Code written between <script> and </script> is called an inline script.

<!doctype html>
<html>
  <body>
    <h1>Hello page</h1>
    <script>
      console.log("Hello, world!");
    </script>
  </body>
</html>

Lines 5 to 7 are the script. When the browser reaches line 5, it runs line 6. Line 6 prints Hello, world! in the Console. The Console is a panel in the browser's developer tools, called DevTools. It shows the messages your code prints.

Inline scripts are handy for tiny tests, because you see the code right where it runs. In real projects, you move the code into its own file. That keeps the HTML and the JavaScript easy to read.

Where you put the script matters. A script runs the moment the browser reaches it. Say the script looks for a button that comes later in the page. The button isn't there yet, so the search gives back null. null means "nothing was found".

1<!doctype html>2<html>3  <head>4    <script>5      const button = document.querySelector("button");6      console.log(button);7    </script>8  </head>9  <body>10    <button>Press me</button>11  </body>12</html>

The code in the playground uses document.querySelector("button"). document is the browser's object for the page. querySelector searches the page and gives back the first button it finds. Pick a setup, then press Run page:

• head: the script is in <head>, above the button. It logs null, because the browser hasn't reached the button yet.
• end of body: the script comes after the button. It logs Press me, the button's text.
• head + defer: the script is in its own file, loaded with defer. defer tells the browser to run the file only after it has read the whole page. So it also logs Press me.

The inline and src buttons choose where the code lives: inside the tag, or in its own file. You'll meet src in the next section.

An external script is JavaScript kept in its own file, such as app.js. The HTML page doesn't hold the code. It only holds a <script> tag with src in it. src is short for "source". It tells the browser which file to load.

A setting written inside a tag, like src, is called an attribute.

The table compares the two kinds of script. Read each row as a question, then the answer for each kind.

<!doctype html>
<html>
  <body>
    <h1>Hello page</h1>
    <script src="app.js"></script>
  </body>
</html>

console.log("Hello, world!");

Line 5 of index.html is the script tag. It has no code inside. Its src says the code is in app.js. The browser loads app.js and runs its one line, which prints Hello, world!.

A program runs in order, one line after another. Here is a tiny program with three lines. Each line has one job:

• Line 1 stores a name.
• Line 2 builds a greeting from that name.
• Line 3 prints the greeting.

A variable is a name that holds a value, so a later line can use it. Line 1 makes a variable called name and puts the text "Asha" in it. Line 2 joins three pieces of text with plus signs and puts the result in a new variable, greeting. Line 3 doesn't build anything. It reads greeting and sends its value to the Console.

1const name = "Asha";Run2const greeting = "Hello, " + name + "!";3console.log(greeting);

Press Step to go through the program one line at a time. Pick another name to see the steps change, and Reset to go back to Asha. The label on each step says what happened: a value was stored, a new value was made, or a result was printed. The player replays a recording of this small program. It doesn't pause the browser's real JavaScript engine.

const name = "Asha";
const greeting = "Hello, " + name + "!";
console.log(greeting);

Save these three lines in a file, run it with Node.js, and it prints Hello, Asha!. The quote marks on lines 1 and 2 are part of the code. They show JavaScript where the text starts and ends. The printed message has no quote marks.

console.log(...) prints values in the Console. The Console is for developers; visitors to your page never see it. While you learn, it is your main way to check things, such as:

• Did this file run at all?
• What value does this variable hold?
• Which part of the code ran?

console is an object the host gives you. log is a method of it: a function that belongs to an object. The dot in console.log means "the log that belongs to console".

console.log("Tea is ready");

The text between the quote marks is a string: a piece of text in your code. The call sends the string to the Console. The Console shows Tea is ready, without the quote marks. A log like this is the quickest way to check that your code reached a certain line.

The values inside the brackets of console.log(...) are called arguments. console.log can print:

• a string, like "Hello, world!"
• a number, like 5
• the result of an expression: a piece of code that works out a value, like 2 + 3
• several arguments at once, separated by commas
• a template string: text between backticks, `, with values put in where it says ${...}

First guess what each line below prints. Then step through the recorded run. Change total on line 2 and watch: only the lines that use total print something different. The Console prints several arguments in order, with a space between them. Other consoles may space them a little differently.

1const name = "Ada";Run2const total = 5;3console.log("Hello, world!");4console.log(2 + 3);5console.log("Total:", total);6console.log(`${name} has ${total} tabs open.`);

Commas keep each value separate, so one log can show several labelled values. console also has two methods for messages that need attention:

• console.warn is for something a developer should check.
• console.error is for something that failed.

Neither one stops your program. They only print a message.

const order = "tea";
const total = 3;

console.log("Order:", order, "Total:", total);
console.warn("Check the total before paying.");
console.error("Payment could not be completed.");

Lines 1 and 2 store the order details. Line 4 passes four arguments, so the Console shows Order: tea Total: 3. Line 5 prints a warning, and line 6 prints an error. Browser DevTools shows these two in a different style, so they stand out. The text is still the message you wrote. You'll learn more console tools in Talking to the user.

The browser is one host for JavaScript. Node.js is another. Node.js is a program that runs JavaScript files on your computer, with no browser and no web page. You start it from the terminal: a window where you type commands instead of clicking.

console.log("Hello from Node!");
console.log(2 + 3);

Save these two lines in a file called hello.js. Line 1 prints Hello from Node!. Line 2 works out 2 + 3 first, then prints 5.

$ cat hello.js
console.log("Hello from Node!");
console.log(2 + 3);

$ node hello.js
Hello from Node!
5

$ node
Welcome to Node.js ...
> console.log("Hi from the REPL")
Hi from the REPL
undefined
> .exit

In plain words:

• The $ at the start of a line is the terminal's prompt. You don't type it.
• Line 1, cat hello.js, shows what is inside the file. Lines 2 and 3 are the file.
• Line 5, node hello.js, runs the file. Lines 6 and 7 are what it prints.
• Line 9, node on its own, opens the REPL. The REPL is a prompt where you type one line of JavaScript and see the result straight away. REPL is short for read, evaluate, print, loop.
• Line 11 runs a log in the REPL. Line 12 is the message. Line 13 is the undefined you met above.
• Line 14, .exit, closes the REPL. Pressing Ctrl + C twice also closes it.

Where you'll use this

You need a script tag whenever a page should do something. For example:

• A portfolio site loads app.js to open a menu.
• While you build a form, you log the values to check them.
• A coding exercise asks you to run node solution.js, so the terminal can check your answer.

<!-- index.html -->
<button id="save">Save</button>
<script src="app.js" defer></script>

// app.js
const save = document.querySelector("#save");
console.log("Save button:", save);

This box shows two files. The // app.js line marks where the second file starts. To try it:

1. Save lines 2 and 3 as index.html.
2. Save lines 6 and 7 as app.js, in the same folder.
3. Open index.html in the browser and look in the Console.

defer makes sure the button exists before app.js looks for it. The log shows what the code found. In later lessons, your code will change the page itself instead of only logging.

When nothing prints

Sometimes your first script seems to do nothing. Don't try to guess ten possible problems at once. Check one thing at a time:

1. Add one console.log at the top of the file.
2. Refresh the page.
3. Look in the Console in DevTools.

That first message answers one clear question: did this JavaScript file run at all?

console.log("app.js started");

const save = document.querySelector("#save");
console.log("Found save button:", save);

Line 1 should print app.js started. If it doesn't, check two things:

• The src in the script tag spells the file name exactly right.
• The Console you are looking at belongs to the page you refreshed.

A log is only a short-term check. Once you have found the problem, you can delete it.

Line 4 answers the next question: did the search find the button? Line 3 searches for "#save". An id is a name you give to one part of the page, such as a button. #save means "the part whose id is save". If the page has <button id="save">Save</button> and the script uses defer, the Console shows the button. If it shows null, check:

• the text inside querySelector, here "#save"
• the button's id in the HTML
• whether the script ran before the browser read the button

Two small typing mistakes can stop a first program before it prints anything:

• Text needs quote marks around it.
• Capital letters matter. JavaScript treats log and Log as two different names.

console.log(Hello);

Without quote marks, JavaScript thinks Hello is the name of a variable, not text. There is no variable called Hello, so it throws ReferenceError: Hello is not defined. To print the text, write console.log("Hello").

console.Log("Tea is ready");

console has a method called log, but none called Log. The capital L makes it a different name. So the call throws TypeError: console.Log is not a function. Here, a TypeError means you tried to call something that isn't a function. Read the first error message before you change anything. It often points straight at the typo.

The table below puts these checks in order. Find the row that matches what you see in the Console, then do the check in the last column.

The same steps work in Node.js. Put console.log("hello.js started") at the top of the file, run node hello.js, and read the first line it prints. In the browser, the Console shows messages from the page. With Node.js, the terminal shows messages from the file it ran.

Common mix-ups

Here are five beliefs that sound right but aren't.

The exercises start with a script in a page and end with a small order check. Guess the answer first, then use the hints if you get stuck.

<script>
  console.log("Hello, world!");
</script>

<script>
  console.log("Hello, world!");
</script>

<script src="app.js"></script>

// app.js
console.log("Hello, world!");

console.log("A", 1 + 1, "B");

console.log("Hello from Node!");

node hello.js

<script src="app.js">console.log("hi")</script>

<script src="app.js"></script>
<!-- Put console.log("hi") inside app.js instead. -->

const name = "Asha";
const greeting = "Hello, " + name + "!";
console.log(greeting);

const name = "Asha";
const greeting = "Hello, " + name + "!";
console.log(greeting);

const order = "tea";
const total = 3;

console.log("Order:", order, "Total:", total);
console.warn("Check the total before paying.");
console.error("Payment could not be completed.");

const order = "tea";
const total = 3;

console.log("Order:", order, "Total:", total);
console.warn("Check the total before paying.");
console.error("Payment could not be completed.");

For each question, guess first, then pick an answer. Each answer explains why it is right or wrong.

Key takeaways

A script is JavaScript that a host runs. Where you put it, and which host runs it, decide what it can do.

• A <script> tag runs JavaScript in a browser page, at the point where the browser reaches it.
• src loads the code from a separate file. defer waits until the browser has read the whole page.
• console.log prints messages for developers: strings, numbers, results of expressions, and several values at once.
• node hello.js runs a file with Node.js. node on its own opens the REPL.
• The browser gives your code document. A plain Node.js script doesn't have it.

Coming next: Statements, comments & semicolons. It shows how a script is split into single instructions, and how to leave notes in your code.