What is JavaScript, and your first script

Meet the third language of the web and write your first script that talks to the browser console.

The three languages of the web

From Level 1 you know two languages:

HTML – the skeleton of the page (what’s on it),
CSS – the look (how it appears).

The third and final language is JavaScript – behavior (what happens when…). When you click ▶ on YouTube and the video starts, when an online shop calculates a price, when a game keeps score – that’s all JavaScript.

Where JavaScript lives

JavaScript lives in its own file, just like CSS. You tell the page about it with a <script> tag – place it right at the end of <body>, just before </body>:

  ...page content...

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

💡

Why at the end? The browser reads the page from top to bottom. When the script is at the end, the whole page already exists, and the script can work with it right away.

Show me: your first script

In the my-web folder, create a file called script.js and write into it:
```
console.log("Hi, this is your website!");
```
In index.html, add the line <script src="script.js"></script> right before </body> and save both files.
Open the page in your browser and press F12 (on Mac, Cmd+Alt+I). A developer panel opens – click the Console tab.

Do you see “Hi, this is your website!”? Your first JavaScript is running! 🎉

The console is a secret room in the browser where programmers chat with the page. Visitors never see it – it’s just for you. console.log(...) means “print this to the console.” You’ll use it all the time: it’s the best way to find out what’s happening inside your script.

The console can do math too

Try typing this directly into the console (press Enter after each line):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript is also a calculator – it adds numbers together and glues texts (called strings, you can spot them by their quotes) end to end.

Your turn 💪

Add script.js to every page of your website (just like you once added style.css).
Have the script print your website’s name to the console and calculate how many hours are left until summer vacation – for example, console.log("Hours left until vacation:", 48 * 24);.
Deliberately make a mistake – delete a quotation mark and save. Look at what the error looks like in the console (red text with a line number). Then fix it. This is an important habit: the console will always tell you where the problem is.

✅

Check yourself: When you open any page of your website, your message appears in the console. You know how to open the console and what an error looks like. That’s the whole foundation – starting with the next lesson, we begin working magic on the page.

What to take away from this lesson

JavaScript = the third language of the web: behavior. It’s written in a script.js file and connected with a <script src="..."> tag before </body>.
The console (F12) is your window into the script: console.log() prints things out, errors show up in red with a line number.
Text in quotes is a string, and strings can be glued together with +. Numbers can be calculated.