What JavaScript does on a page

Your website has structure (HTML) and style (CSS). But it can't do anything yet. Click a button and nothing happens. Type in a field and the page doesn't react. That's where JavaScript comes in.

JavaScript is a real programming language. That might sound intimidating, but you've already learned the hardest part, which is getting comfortable with code, files and tools. In this course you'll learn programming one small piece at a time.

JavaScript runs in the browser and can change anything on the page while someone is using it. A few everyday examples:

• Opening and closing a menu when you click a button
• Showing a message when a form is filled in wrong
• Switching between light and dark mode
• Loading new posts when you scroll to the bottom of a page
• Adding items to a shopping cart without reloading the page

HTML and CSS describe how the page looks when it loads. JavaScript decides what happens after that.

A quick note on the name: JavaScript has nothing to do with Java. They're two completely different languages. The similar name was a marketing decision back in the 1990s, and people have been confused by it ever since.

Every browser has a place where you can type JavaScript and see the result straight away. It's called the console.

Open any page, right click and choose Inspect, then click the Console tab. You can also press Ctrl+Shift+J on Windows or Cmd+Option+J on Mac in Chrome.

Click next to the > sign and type:

Press enter and the console answers 4. Try something else:

The console is perfect for trying things out. Nothing you type there is saved, so you can't break anything.

Just like CSS, JavaScript lives best in its own file. In your my-website folder, create a file called script.js next to index.html. Then add this line inside the head of index.html:

src points to the file, just like href does for your stylesheet. The defer attribute is important. It tells the browser to wait until the whole page has loaded before running your script. Without it, your code might try to change elements that don't exist yet.

Unlike link, the script element needs a closing tag, even when it's empty.

Open script.js and write:

Save, open your page with Go Live and open the console. You'll see your message there.

console.log prints whatever you give it to the console. Visitors never see it, but you will. It's the tool developers use most to understand what their code is doing. When something doesn't work, the first step is almost always adding a console.log to see what's going on.

A few things to notice in that line:

• The text is inside quotes. Text in code is called a string, and it always goes in quotes. Single ' and double " quotes both work
• The line ends with a semicolon. It marks the end of a statement, a bit like a period ends a sentence
• // starts a comment, just like <!-- --> in HTML

Sooner or later, you'll see red text in the console. That's an error, and it's not a disaster. It's JavaScript telling you exactly what went wrong and where.

Try it. Add this line to script.js:

The console shows something like Uncaught ReferenceError: consol is not defined, with the file name and line number next to it. Click the file name and the browser takes you to the exact line. Read the message, find the typo, fix it.

Every developer sees errors all day. Reading them carefully is one of the most valuable skills you can build.

In the first course you heard about the ESLint extension and that you'd need it later. Now is later. ESLint reads your JavaScript while you type and warns you about common mistakes, like misspelled names or variables you never use, before you even open the browser.

To use it in a small project like yours, it needs a config file. You don't need it to follow this course, so feel free to skip it for now. Error Lens and the console will catch most beginner mistakes, and you'll set up ESLint properly when you start bigger projects.