By the end of this lesson you will be able to
- make JavaScript display text on the screen
- write a program of several lines and know the order in which they run
- display text and numbers together on one line
- recognise and fix the four mistakes beginners make most often
Every code box on this page is real JavaScript that you can change. Press Run to run it, and the result appears underneath. Reset puts back the original code. Nothing needs to be installed.
On a phone: brackets ( ), quotes " and the semicolon ; are on the symbols keyboard (the ?123 key). If your keyboard types curly quotes “ ” instead of straight ones, this page will offer to fix them for you.
On a computer: press Ctrl + Enter (⌘ + Enter on a Mac) to run. Inside a code box the Tab key adds spaces; to move out of the box with the keyboard, press Esc and then Tab.
Hello, world
For more than fifty years, programmers learning a new language have started with a program that says “Hello, world”. Here it is in JavaScript. Press Run.
That single line is a complete program. You told the computer to do something, and it did it. Now change the word world to your own name, for example console.log("Hello, James!");, and run it again.
What each part means
Let us look at that line piece by piece.
consolethe place where results are shown.a dot: “belonging to”logthe instruction: write this down(opening bracket"Hello, world!"the text to display, inside quotes)closing bracket;end of the instruction- The console is the area where a program writes its results. Web developers use it all the time to see what their code is doing. On this course, the console is the Output panel under each code box.
logis an instruction that belongs to the console, which is why there is a dot between them.console.logmeans “write this in the console”, the way a ship's captain writes an entry in the ship's log. (JavaScript calls instructions like this functions. You will meet that word again later in the course.)- The brackets
( )hold whatever you are giving toconsole.log. - The quotes mark where the text begins and ends. JavaScript calls a piece of text a string: a row of letters, numbers, spaces and symbols, one after another, like beads on a string. The quotes are not displayed; only the text between them is.
- The semicolon
;marks the end of the instruction, like a full stop at the end of a sentence.
Usually JavaScript can work out where an instruction ends even without a semicolon, so a missing one rarely causes an error. But “usually” is not “always”, so most programmers end every instruction with one, and this course does the same. It is a good habit to form from your very first line.
A program runs from top to bottom
A longer program is simply more lines. JavaScript runs them one at a time, in order, starting at the top.
Add a fourth line at the end, such as console.log("Let us begin.");, and run the program again. Your new line appears last, because JavaScript always follows your lines in the order you wrote them.
To leave an empty line in the output, use console.log() with nothing between the brackets:
Text and numbers
Numbers do not need quotes. Compare these two lines:
The first line displays the text exactly as written, because it is inside quotes. The second line has no quotes, so JavaScript works out the sum first and displays the answer, 8.
So the quotes make a big difference. Anything inside quotes is text, and JavaScript shows it as it is. Anything without quotes is treated as part of the program: digits become a number JavaScript can calculate with, and a word becomes a name that JavaScript tries to look up. That is why console.log(Hello);, without quotes, gives an error: JavaScript has never heard of anything called Hello. You will use JavaScript as a calculator properly in the next lesson.
Several items on one line
You can give console.log several items at once by separating them with commas. JavaScript displays them on one line with a single space between the items.
Notice that you did not type any spaces between the items; console.log added them. The commas themselves are not displayed. In the last line, 3 * 45 is a calculation (the star * means “multiply”), so JavaScript displays 135. Text and results can sit side by side on one line without any extra work.
Single or double quotes
JavaScript accepts text inside either double quotes "…" or single quotes '…'. The main rule is that the two ends must match.
If your text contains an apostrophe (', as in It's), put double quotes around it. If your text contains double quotes, put single quotes around it.
This course uses double quotes unless there is a reason not to. (There is also a third kind of quote, the backtick `, which has a special power of its own. You will meet it in Lesson 2.2.)
Four common mistakes and how to fix them
Everyone who writes code makes mistakes, and professional programmers see error messages every day. What matters is being able to read them. Each box below contains a mistake. Run it to see what JavaScript says, then fix it.
An error message starts with the kind of error, such as SyntaxError or ReferenceError, followed by a short description. (“Uncaught” simply means nothing in the program dealt with the error, so the program stopped.) Underneath every error, this page explains in plain English what it means and which line JavaScript noticed the problem on.
One more thing: before running any line, JavaScript first reads the whole program to check that it is written correctly. If it finds a SyntaxError (a writing mistake) on any line, no line runs at all, not even the correct ones above it.
1. A capital letter in console
JavaScript is case-sensitive: to JavaScript, Console and console are two different names, and only the lowercase one exists. You will see a ReferenceError saying that Console “is not defined”, which means JavaScript does not know that name. Phones often add a capital letter at the start of a line without asking, so watch for this.
2. A missing quote
Without the closing quote, JavaScript cannot find where the text ends, so it reports a SyntaxError saying the string is “unterminated” (not finished). Add the missing " before the closing bracket.
3. A missing bracket
Every opening bracket needs a closing bracket. Here JavaScript reaches the semicolon while it is still waiting for the ), so it reports an “unexpected token”: something it did not expect at that point. Add the ) before the semicolon.
4. Curly quotes
Look closely: these quotes are curly (“ ”) instead of straight (" "). Programs such as Word and Google Docs, chat apps, and many phone keyboards change straight quotes into curly ones automatically, and JavaScript does not accept them. It reports an “unexpected character”. This is the most common reason that code copied from a document or a chat message will not run.
Exercises
Now it is your turn. Type your code in each box and press Check my answer. The checker runs your program and compares its output with the expected output. It must match exactly: every letter, capital, space and punctuation mark. If you get stuck, Show solution becomes available after your first check. Try on your own first, because that is how the learning happens.
Exercise 1 · Your own greeting
Write a program that displays exactly this:
Expected output
Exercise 2 · A three-line card
Write a program that displays the three lines below, using the names exactly as shown. The first line is already written for you: add two more console.log() lines, one for each remaining line.
Expected output
Exercise 3 · Let JavaScript do the sum
A notebook costs 45 rupees. Write a program that displays the total cost of 3 notebooks, exactly as below. Do not work out the answer yourself: write the calculation 3 * 45 in your code (without quotes) and let JavaScript work it out. Use commas to separate the three items.
Expected output
Exercise 4 · Quotes and an empty line
Write a program that displays these three lines. The middle line is empty. Choose the right kind of quotes for each line.
Expected output
Exercise 5 · Find and fix the mistakes
This program should display the three lines below, but it contains three mistakes, one on each line. Fix them all.
Run the code after each fix. Each error message shows you one problem. Remember that JavaScript checks the whole program for writing mistakes (such as missing quotes) before it runs any line, so the first error you see may not be on line 1.
Expected output
Quick check
Four questions to confirm the main ideas. Choose an answer to see the explanation.
1. What does console.log("5 + 3"); display?
The quotes make it text, so JavaScript displays it exactly as written, without the quotes. Without quotes, console.log(5 + 3); would display 8.
2. What does console.log("Rice", 60, "rupees"); display?
The commas separate the items inside your code; they are not displayed. console.log puts one space between the items.
3. Which line runs without an error?
Single quotes are fine as long as both ends match. The first line has a capital C, the second has quotes that do not match, and the fourth has no quotes, so JavaScript looks for something named Hi and cannot find it.
4. A program has a missing quote on line 3. What happens to lines 1 and 2, which are written correctly?
A missing quote is a writing mistake, a SyntaxError. JavaScript reads the whole program before running it, so a syntax error anywhere means no line runs at all. (Other kinds of error, like the ReferenceError from Console.log, only stop the program when that line is reached.)
Summary
console.log()displays whatever you put between its brackets.console.log()with nothing inside makes an empty line.- Text goes inside matching quotes, either
"…"or'…'. The quotes themselves are not displayed. - Numbers need no quotes, and JavaScript can calculate with them. A word without quotes is treated as a name, not as text.
- Commas let one
console.log()display several items, with a space between the items. - A program runs from the top line to the bottom line, in order. Each instruction ends with a semicolon
;. - JavaScript is case-sensitive, needs straight quotes, and every bracket must be closed. A writing mistake (a syntax error) stops the whole program before any line runs.
Found a mistake on this page, or something unclear? Report a problem and mention “JavaScript Lesson 1.2”.