Skip to content
WANCODE
BM

What Is JavaScript?

12 minBeginnerHTML · CSS · JS

In this lesson

  • Explain what JavaScript adds to a page that HTML and CSS can't
  • Connect a script.js file to a page with the <script> tag
  • Use console.log and read its output in the Console panel
  • Read an error message, find the line, and fix it

The big idea

HTML is what's on the page and CSS is how it looks. JavaScript is what the page does — a list of instructions the browser runs, one after another, from top to bottom.

Until now your pages have been still: they look the same no matter what the visitor does. JavaScript changes that. It can react to a click, add up a shopping cart, check that a form is filled in, or update the page without reloading it. Every modern website — from online banking to Shopee — uses it.

Connecting JavaScript to a page

JavaScript usually lives in its own file, like script.js. The HTML loads it with a <script> tag. We put it at the end of <body> so the browser has already built the page by the time our code runs.

index.html
<body>
  <h1>My first script</h1>
  <p id="status">JavaScript has not run yet.</p>

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

Your first instruction: console.log

console.log(...) prints whatever you put inside the brackets to the console — a hidden notebook for developers. In WANCode it's the Console panel under the preview. In a normal browser, open DevTools (F12, or Ctrl+Shift+J on Windows / Cmd+Option+J on Mac) and pick the Console tab.

script.js
console.log("Hello from script.js!"); // text goes inside quotes
console.log(2 + 3);                   // numbers don't — this prints 5
console.log("2 + 3");                 // this prints the text 2 + 3

Text in quotes is printed exactly as written. Code without quotes is worked out first.

Statements and comments

Each instruction is called a statement. We usually write one per line and end it with a semicolon ;. The browser runs them in order, top to bottom. A comment is a note that JavaScript skips completely: // comments out the rest of a line, and /* … */ can wrap several lines.

JavaScript
// Step 1: say hello
console.log("Selamat pagi!");

/* Step 2 is switched off for now.
console.log("This will not print");
*/

console.log("Step 3 runs after step 1");

Comments as an on/off switch

Developers often "comment out" a line to switch it off without deleting it. Removing the // switches it back on.

Errors are normal — read them

Every programmer sees errors every day. An error message is a clue, not a punishment. Every message has three parts worth reading:

Text
ReferenceError: consol is not defined
    script.js, line 5
  1. The type — ReferenceError means you used a name JavaScript doesn't know.
  2. The detail — consol is not defined tells you which name: there's a typo, it should be console.
  3. The location — the file and line number tell you where to look.

Two kinds of error behave differently. A SyntaxError means JavaScript can't even read your file — like a missing quote or bracket — so nothing in the file runs, not even line 1. Other errors, like a ReferenceError, happen while the code runs: everything before the bad line works, then the script stops and the lines after it never run.

Text
SyntaxError in script.js (line 5): Unterminated string constant

"Unterminated string constant" means a piece of text was opened with a quote but never closed.

Statement
One instruction, such as console.log("Hi");.
Console
A panel where your code can print messages and where errors appear.
Comment
A note for humans. JavaScript ignores it.
Error
A message explaining why JavaScript had to stop. Read the type, the detail and the line.

Look at the Console panel: instead of three messages there's a single red error — not even the first message printed. Read the error: what kind is it, what does it say, and which line? Fix that line so all three messages print. Keep the message text the same.

Checks

  • The console shows no errors
  • "I am learning JavaScript." is printed
  • The third message runs too

Check understanding

Q1

Why do we usually put <script src="script.js"></script> just before </body>?

Q2

Line 2 of a script throws an error. What happens to lines 3, 4 and 5?

Q3

What does this line do? // console.log("Hi");

What you learned

  • JavaScript is the behaviour layer of a web page; the browser runs it top to bottom.
  • Load it with <script src="script.js"></script> at the end of <body>.
  • console.log prints to the Console; // and /* */ write comments JavaScript ignores.
  • An error stops the script. Read its type, its detail and its line number — then fix the first one.
Preview

Console output from your code appears here.

Step 1 of 3