Your first program
In this lesson
- What is a program?
- Printing to the Console
- One instruction per line
- Comments
- Errors are normal
- Where JavaScript lives
Practise this in the Code Studio
open the exercise for this lesson. You type real code in your browser, see the result at once, and the tasks tick themselves when your code is right. Nothing to install.
HTML builds a page and CSS styles it. JavaScript makes it do things: react to a click, check a form, add up a total, load new posts. It is the programming language of the web, and it runs in every browser.
Note
JavaScript and Java are two different languages with similar names. JavaScript runs in the browser; Java is used for other kinds of programs. GradesPal has a separate Java course.
What is a program?
A program is a list of instructions. The computer follows them one at a time, from top to bottom, exactly as written. It never guesses what you meant.
Printing to the Console
console.log("Hello, world!");| Part | Meaning |
|---|---|
console.log | "Print this in the Console" |
( ) | Brackets hold what to print |
"Hello, world!" | Text, in quotes |
; | The end of the instruction |
The Console is a panel where a program can write messages. Visitors to a website never see it; programmers use it all day to check what their code is doing. In the Code Studio it is the Console tab below the editor.
One instruction per line
console.log("Hello, world!");
console.log("My name is Thabo");
console.log(7 * 6);This prints three lines, in order. Notice the last one: numbers have no quotes, and JavaScript works out the answer, 42.
| You write | It prints | Why |
|---|---|---|
console.log(7 * 6); | 42 | A calculation |
console.log("7 * 6"); | 7 * 6 | Quotes make it text, so nothing is calculated |
Comments
// This line is a comment
console.log("Hi"); // a comment after some code
/* A comment
over several lines */The computer ignores comments. Write them to explain why your code does something. Your future self will thank you.
Errors are normal
Every programmer, at every level, makes mistakes all day long. An error message is not a failure; it is the computer telling you where to look.
console.log("Hello);The closing quote is missing. The Console shows a red message with a line number. Go to that line and read it slowly.
| Common slip | Looks like |
|---|---|
| A missing quote | console.log("Hello); |
| A missing bracket | console.log("Hello"; |
| A wrong capital letter | Console.Log("Hello"); |
JavaScript is case-sensitive: console and Console are different words.
Where JavaScript lives
In a real page, JavaScript goes in its own file, linked at the bottom of the body:
<script src="script.js"></script>In the Studio, the script.js tab is that file.
Try it
- Print your name, your grade and your favourite subject on three lines.
- Print the answer to 365 × 24 (the number of hours in a year).
- Break your code on purpose: remove a quote, then a bracket. Read each error, then fix it.
- Add a comment above each line saying what it does.
Check yourself
What does console.log("5 + 5"); print?
It prints 5 + 5. The quotes make it text. Without quotes, console.log(5 + 5); prints 10.
Why does Console.log("Hi"); give an error?
JavaScript is case-sensitive. The word is console, with a small c, and log with a small l.
In what order does a program run?
From the top to the bottom, one instruction at a time.
