Learning Goals
3 minBy the end of this lesson you will be able to:
- Open the browser console and run a line of JavaScript in it.
- Print a message with
console.log()and read it back. - Attach a
.jsfile to an HTML page with a<script>tag. - Say in one sentence what each of HTML, CSS and JavaScript does.
Warm-Up · Three Languages, One Page
5 minThis is the first lesson of Level 2. In Level 1 you wrote HTML and CSS by hand. Look at these three lines — each one is from a different language.
<button>Order teh tarik</button>
button { background: teal; }
alert('Order placed!')Predict together
- Which line decides what appears on the page?
- Which line decides what it looks like?
- Which line decides what happens when you use it?
Reveal
Line 1 is HTML — the content. Line 2 is CSS — the appearance. Line 3 is JavaScript — the behaviour. A page can survive without CSS or JavaScript, but nothing happens until JavaScript turns up. That third line is where Level 2 begins.
New Concept · A Language That Does Things
12 minThink of a restaurant. The menu lists the food — that is HTML. The decor makes it feel nice — that is CSS. The waiter takes your order and brings your food — that is JavaScript. Only the waiter actually does anything.
JavaScript is a programming language that runs inside every web browser. It can read the page, change it, respond to clicks, do sums, and talk to other computers over the internet.
The console — your JavaScript notebook
Every browser has a hidden panel called the console. You can type JavaScript straight into it and see the answer immediately. Nothing is saved — it is a scratchpad for trying ideas.
Open it with F12, then click the Console tab.
2 + 2Press Enter and the console answers:
4console.log — printing on purpose
The console answers you automatically when you type a sum. But inside a real script you must ask for output. That is what console.log() is for.
console.log('Selamat pagi!');Selamat pagi!The round brackets hold what you want to print. The quote marks say “this is text, not code”. Text like this is called a string — you will meet it properly in Lesson 3.
Getting JavaScript onto a page
The console is for experiments. Real JavaScript lives in a .js file, joined to your page with a <script> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first script</title>
</head>
<body>
<h1>Warung Aisyah</h1>
<!-- Put the script last so the HTML above exists first -->
<script src="app.js"></script>
</body>
</html>In the console
Great for trying one line quickly.
Forgets everything when you refresh.
Nobody else can see it.
In a .js file
Runs every time the page loads.
Saved, so you can build on it.
Ships to real visitors.
Why it matters
Every interactive thing you have ever used on a website — a search box that suggests as you type, a basket total that updates, a map you can drag — is JavaScript. The whole of Level 2 grows from the one line you are about to write.
Worked Example · Hello from the Warung
12 minFollow along in your own browser and editor. You will end with a page that greets you the moment it loads.
Step 1 — Try the console first
Open any web page, press F12 and click Console. Type this and press Enter:
console.log('Hello from Penang!');Hello from Penang!You may also see a grey undefined underneath. That is the console saying “this instruction had no answer to give back”. It is not an error — ignore it for now.
Step 2 — Make the two files
In VS Code, make a folder called warung. Inside it, make index.html with the page from the last section, and an empty file called app.js beside it.
warung/
index.html
app.jsStep 3 — Write the script
Put these three lines in app.js:
// app.js — runs as soon as index.html loads
console.log('Warung Aisyah is open!');
console.log('Teh tarik costs RM', 2.5);Step 4 — Open the page and look
Open index.html in your browser, then press F12 and look at the Console tab:
Warung Aisyah is open!
Teh tarik costs RM 2.5Notice the second line: console.log() can take more than one thing at a time, separated by commas. It prints them on one line with a space between.
Step 5 — Make it interrupt you
Add one more line to app.js and refresh the page:
alert('Welcome to Warung Aisyah!');What changed? A box pops up and the page stops until you dismiss it. alert() shouts at the visitor; console.log() whispers to the developer. Real sites use alert() very rarely — it is annoying. We will use console.log() from here on.
Try It Yourself
13 minKeep working in your warung folder. Refresh the browser after every change and check the Console tab.
Task 1 — Make it yours
Change the two messages in
app.jsso they name your stall and your favourite drink at its real price. Remove thealert()line while you are there.Refresh and check both new lines appear in the console.
Task 2 — A three-item menu
Add three more
console.log()lines, one per menu item, each printing a name and a price in RM. Follow this shape:console.log('Nasi lemak RM', 5.5);Line the prices up so the console output reads like a real menu.
Task 3 — Sums in the console
Back in the console, work out the total cost of two of your menu items by typing the sum directly. Then do it again as a
console.log()line insideapp.jsso it prints every time the page loads.Can you get the console to print a sentence and the total on the same line?
🔥 Mini-Challenge · The Silent Page
8 minWei Jie built a page for his family's kopitiam. He says the console shows nothing at all. Here are his two files. Find two mistakes.
<!-- weijie-kopitiam.html — buggy -->
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Kopitiam Wei Jie</h1>
<script src="script.js"></script>
</body>
</html>// app.js — buggy
console.log(Selamat datang!);It works if: refreshing the page prints Selamat datang! in the console, with no red error text.
Reveal the answer
Mistake 1 — the filename does not match.
The HTML asks for script.js, but the file is called app.js. The browser looks for a file that is not there and gives up quietly. Either rename the file or fix the tag:
<script src="app.js"></script>Mistake 2 — the message has no quote marks.
Without quotes, JavaScript thinks Selamat is the name of something in the code rather than text to print. It cannot find it, so it throws a red error.
// app.js — fixed
console.log('Selamat datang!');Fix both and the console prints the greeting. Notice how the first bug was silent and the second was loud — a missing file says nothing, but broken code shouts. Both are worth checking when nothing happens.
Recap
3 min- HTML is content, CSS is appearance, JavaScript is behaviour.
- The console (F12) runs JavaScript instantly — perfect for trying things.
console.log()prints a message for you, the developer, to read.- Text must sit inside quote marks, or JavaScript treats it as code.
- A
<script src="app.js">tag joins a JavaScript file to a page — put it last in the<body>.
New words
- Console — the browser panel where JavaScript messages and errors appear.
- String — a piece of text, written inside quote marks.
- Script — a file of JavaScript instructions the browser runs top to bottom.
📦 Homework
4 min to brief · ~20 min to doRequired
- Build a page called
menu.htmlwith a matchingmenu.js. The script should print a heading line, at least four menu items with prices in RM, and a total. - Take a screenshot of your console output and bring it to the next lesson.
Optional stretch
- Try
console.table()instead ofconsole.log()on one line. What does the console do differently? - Deliberately break your script — delete a quote mark — and read the red error carefully. Write down what the browser calls the problem.