Chapter 1 · Foundations
Hello, JavaScript
Step 1 of 15 · Concept
Your first JavaScript program
By the end of this lesson you can write short programs and say what runs them.
A program is a list of instructions for a computer. JavaScript runs in every web browser, and here in Node, which runs it outside a page. You will:
- run a real JavaScript program,
- see what happens when it runs,
- write programs of your own.
Step 2 of 15 · Demo
Run your first program
This program prints one line of text.
Press Run. The output's first line shows the command Run typed. Under it is what the program printed.
Step 3 of 15 · Concept
What Run did
Run typed one command for you, node main.js. You see it on the output's first line.
| part | what it is |
|---|---|
node | Node itself: the program that runs JavaScript programs |
main.js | the file it reads: your program |
This is the real tool. JavaScript programmers type the same command.
Step 4 of 15 · Quiz
Who reads your file?
Run typed node main.js. Which of these reads your file main.js?
Step 5 of 15 · Concept
A program is lines, run from the top
Node runs the lines of main.js from the top: one statement per line.
console.log("...")prints the text in its quotes,"..."or'...'.- A
;ends each statement. //starts a comment, a note for people. Node skips it.
ReferenceError: Console is not defined
Step 6 of 15 · Quiz
Predict the output
Type what this program prints.
console.log("Hello!");
// This line is a note for people.
console.log('I am JavaScript.');
console.log("Bye.");
Step 7 of 15 · Demo
See it run
Run it and compare with your answer. The comment printed nothing.
Step 8 of 15 · Exercise
Your turn: two lines
Time to write code. Change one line, then add one.
Change the program so it prints these two lines:
Hello, JavaScript!
I am learning.
Two lines of output: two statements. Each text needs a " at both ends. Without the last one, Node stops before any line runs and says SyntaxError: Invalid or unexpected token (lesson 5 reads it).
Change the text in the quotes to Hello, JavaScript!. Then copy the whole line (on a desktop, Shift+Alt+↓ copies the line the cursor is on) and change the copy's text.
console.log("I am learning.");
Step 9 of 15 · Concept
console.log takes several values
console.log can take several values, with commas between them. It prints them on one line, one space apart.
Run shows numbers in another colour.
| you write | it prints |
|---|---|
console.log("Name:", "Ada"); | Name: Ada |
console.log("Age:", 15); | Age: 15: a number needs no quotes |
console.log(); | an empty line |
Step 10 of 15 · Quiz
Where does the space come from?
The texts in this line have no spaces inside their quotes. What does it print?
console.log("Hi", "Ada");
Step 11 of 15 · Try it
Try it: an empty line
Run it: two lines. Then add console.log(); between them, so an empty line separates them:
Name: Ada
Age: 15
Put a new line 2 between the two: console.log();, with nothing in its brackets.
Step 12 of 15 · Exercise
Your turn: a name card
This time you start from a file with only a comment. Here is the shape to use:
console.log("...");
console.log();
console.log("...", ...);
Write a name card. The program must print:
Ada Lovelace
Born: 1815
Three lines of output: three statements, from the top. Forgot a ;? The line still runs, because here Node adds one. Write it anyway: lesson 7 shows a line where the added ; changes what it means.
The empty line is console.log();. The last line has two values: the text "Born:" and the number 1815.
console.log("Born:", 1815);
Step 13 of 15 · Check yourself
Check yourself: about me
No shape this time. You know it.
Write the whole program. It must print:
About me
Name: Ada Lovelace
Lessons done: 1
One console.log for each line of the output, from the top. The empty line has its own console.log.
Step 14 of 15 · Challenge · optional
Challenge: a rocket
Optional.
Print this rocket:
/\
/ \
| |
/____\
Run it first: it prints / with no \. Inside quotes, \ starts a special code, and \ before a space is a plain space.
Without the space, " /\" stops Node with SyntaxError: Invalid or unexpected token: \" is a quote mark in the text, not its end. To print one \, write two: \\.
console.log(" /____\\");
Step 15 of 15 · Recap
Recap
- A program is the file
main.js. Node runs its lines from the top, one statement per line, each ending in;. - Run types
node main.js:nodereads your file and carries out each line. console.log("...")prints text in"..."or'...'.console.log("Age:", 15)puts a space between;console.log()prints an empty line.//starts a comment. Capital letters count:Consoleis notconsole.
Next: lesson 2 looks inside the computer: what happens to your program when you press Run.
Review
3 questions from this lesson, in a new order each time. Answer from memory: 2 of 3 right on the first try passes. On a day after you finish the lesson, a pass earns 15 XP.
The review needs JavaScript.
console.log("Hello, world!");
console.log("Hello!");
// This line is a note for people.
console.log('I am JavaScript.');
console.log("Bye.");
console.log("Hello, world!");
console.log("Name:", "Ada");
console.log("Age:", 15);
// write three console.log lines here
// write your program here
console.log(" /\ ");