01.1 Where JavaScript runs and the browser console

01 | MAKE A PAGE DO SOMETHING

A webpage can show a heading without JavaScript. But what if a quiz should check an answer, a game should update a score, or a button should show a new question? JavaScript lets a program respond, calculate and make decisions.

For now, we will work with small programs that print messages and calculations in the browser console. This makes the language easier to learn before we connect it to buttons and forms.

You do not need previous programming experience. A little HTML will help, but the complete starter page is provided below. The aim is to know what each part does, not to memorise every symbol at once.

02 | THREE LANGUAGES, THREE USEFUL JOBS

These jobs work together. HTML is still needed when JavaScript is present, and writing JavaScript does not automatically change a page’s appearance.

JavaScript and Java are different programming languages. The similar names do not mean you should install a Java development kit for this course.

03 | EDITOR, RUNTIME AND CONSOLE

VS Code is the editor. It helps you write and save source code. A runtime is the environment that executes that code. In this section, the browser provides the runtime.

The browser console is a developer workspace where you can see logged messages, read errors and try short expressions. It belongs to the browser tab you are inspecting. It is not the VS Code terminal.

JavaScript can also run outside browsers in environments such as Node.js, including on servers. The language overlaps, but available features differ: a browser supplies webpage APIs, while Node supplies other facilities. We do not need Node or a terminal Run command for these first lessons.

04 | CREATE YOUR FOLDER IN VS CODE

1. Open VS Code. Choose File → Open Folder .
2. Create a folder named myJavaScript , select it and open it.
3. In the Explorer panel, click New File and create index.html .
4. Create a second file named script.js in the same folder.
5. Save both files. Check that the names have not become index.html.txt or script.js.txt.

VS Code already includes JavaScript editing support, such as highlighting and suggestions. You do not need an extra JavaScript language extension to begin.

Use a dedicated folder so the relationship between the HTML page and its script stays clear.

05 | CONNECT THE PAGE TO THE SCRIPT

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript practice</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>My JavaScript practice</h1>
  <p>Open the browser console to see the program output.</p>
</body>
</html>

Put this complete document into index.html. The script element points to script.js using a relative path, meaning “look beside this HTML file”. The defer attribute tells the browser to execute this external script after the document has been parsed.

The script tag belongs in HTML. The JavaScript file contains JavaScript only, with no surrounding script tags. Save index.html, then add the following to script.js:

console.log("Hello, JavaScript!");
console.log(8 + 4);

06 | RUN IT IN THE BROWSER

1. Save both files in VS Code.
2. Use your computer’s file manager to find myJavaScript and open index.html in Chrome, Edge, Firefox or Safari.
3. Open Developer Tools using the browser’s menu, then choose Console . In Chrome/Edge, Ctrl+Shift+J on Windows or Command+Option+J on macOS is a common shortcut.
4. Read the logged messages. If you opened the Console after loading the page, refresh to run the script again.

The webpage should show the heading and paragraph. The console should show Hello, JavaScript! and 12. console.log does not automatically add text to the visible page.

Opening the file directly is sufficient for these simple classic scripts. If your school provides a local preview server, you can use it instead. Later fetch/module work will use a local HTTP server because file URLs have different restrictions.

Hello, JavaScript!
12

07 | READ YOUR FIRST STATEMENT

A statement is an instruction. In console.log("Hello, JavaScript!");, console.log is the operation that writes a message, parentheses enclose what we pass to it, and the quoted text is the value being logged.

That supplied value is called an argument . Later you will write functions that accept arguments of your own. For now, you can use console.log as a tool without knowing how the browser implements it.

The text inside quotes is a string. In 8 + 4, there are no quotes around the numbers, so JavaScript calculates their sum before logging the result. We use semicolons consistently to make statement endings clear, even though JavaScript can infer some endings.

08 | EXPERIMENT IN THE CONSOLE

Click the Console input prompt, type 6 * 7 and press Enter. The console evaluates the expression and shows 42. You have tried a calculation without editing a file.

If you enter console.log("Testing");, the message appears and the console may also display undefined as the expression’s result. This does not mean that logging failed: console.log itself returns undefined.

Console experiments are temporary. Put code you want to keep in script.js. Reloading the page resets the page’s ordinary JavaScript state, although developer-tool history and log-preservation options may behave differently.

09 | COMMENTS HELP THE NEXT READER

// Display a greeting in the developer console.
console.log("Welcome to coding");

/* This calculation estimates the total
   number of seats at three tables. */
console.log(3 * 6);

A comment is a note for people reading the code; JavaScript does not execute it as an instruction. // comments continue to the end of the line. A /* ... */ comment can span several lines.

Useful comments explain a reason or assumption. Avoid surrounding every obvious line with a paragraph that merely repeats it.

10 | A MISTAKE IS SOMETHING TO INVESTIGATE

Read the first relevant error and its source link. Clicking script.js:2, for example, points to a reported source line. The actual cause may be just before it, such as an unclosed quote.

Do not paste unfamiliar code into the console of a signed-in website. Use your own practice page for these experiments.

11 | YOUR FIRST INDEPENDENT PROGRAM

Next, give your program values it can remember and update using let and const.

KEEP LEARNING

Previous page 01.2 Variables: let and const

Download Section 01 example programs

Further reading: JavaScript in VS Code · Grammar and types · Template literals · Loops and iteration