# Hello World

Where JavaScript runs, how you see what it does, and the first things you write in it.

Multimedia & Creative Technology · 2.1 Webcoding · Lesson 2 · version 1.0.2 · 2026-10-10

Tags: javascript

Slides: <https://slides.mctantwerp.be/en/webcoding/02-hello-world>

Speaker notes: <https://slides.mctantwerp.be/en/webcoding/02-hello-world.notes.md>

<!-- slide 2 -->

## Agenda

1. Running JavaScript
2. In the browser
3. JavaScript basics
4. Magic Eight Ball

<!-- slide 3 -->

## 1. Running JavaScript

<!-- slide 4 -->

### Hello world

```js
console.log('Hello world');
```

- **01 Developer tools**

  Windows <kbd>F12</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd>, Mac <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd>

  Same keys in Chrome and Firefox.
- **02 The Console tab**: Next to Elements in Chrome, next to Inspector in Firefox.
- **03 Type and Enter**: The line goes after the `>` prompt. Enter runs it, and Hello world shows up right under it.

<!-- slide 5 -->

### Four places to run it

- **01 The browser console**: One line at a time, straight in the developer tools. Gone as soon as you reload.
- **02 An online tool**: JS Bin, CodePen, JSFiddle. Nothing to install, open a tab and type. Great for trying out one idea.
- **03 The command line**: **Node.js** runs JavaScript without a browser. You start it in a terminal.
- **04 A website**: The browser runs it. This is where you will spend almost all of this course.

<!-- slide 6 -->

### Online tools

- **[JS Bin](https://jsbin.com/?js,console)**: The simplest one. A JavaScript panel and a console, which is all you need today.
- **[CodePen](https://codepen.io/)**: HTML, CSS and JS side by side with a live preview, plus a huge gallery of experiments to learn from.
- **[JSFiddle](https://jsfiddle.net/)**: Same idea as CodePen, older and plainer. Often the link in a Stack Overflow answer.
- **[OneCompiler](https://onecompiler.com/javascript)**: Runs your JavaScript with Node on their server. Also does forty other languages.

<!-- slide 7 -->

### Your first line

```js
console.log('Hello world');
```

<!-- slide 8 -->

### Task: Hello world in JS Bin

*5 minutes*

1. Open [jsbin.com/?js,console](https://jsbin.com/?js,console)
2. Type `console.log('Hello world');` in the JavaScript panel
3. Click Run and find your text in the console panel
4. Log your own name on a second line

<!-- slide 9 -->

### Node.js

- A **JavaScript runtime**: it runs JavaScript on your computer, without a browser.
- You start it from the command line, with the file you want to run.
- Servers, build tools and most of the developer tools you will install later run on it.

<!-- slide 10 -->

### An editor, not a notepad

- **[Visual Studio Code](https://code.visualstudio.com/)**: Free, runs everywhere, and what we use in class. When you ask for help, this is what I expect on your screen.
- **[WebStorm](https://www.jetbrains.com/webstorm/)**: Heavier and smarter. Free for students with a JetBrains education licence.
- **[Zed](https://zed.dev/)**: New and very fast. Fewer extensions than VS Code.

> [!WARNING]
> Visual Studio Code is not Visual Studio. Visual Studio is a big IDE for C# and .NET. You want the one with Code in its name.

<!-- slide 11 -->

### Node in the terminal

- *index.js*

  ```js
  console.log('Hello world');
  ```
- ```console
  $ node --version
  v24.9.0
  $ node index.js
  Hello world
  ```

<!-- slide 12 -->

### Task: Hello world in Node

1. Install the LTS version of Node.js from [nodejs.org](https://nodejs.org/), with Add to PATH switched on

   > [!TIP]
   > **Add to PATH**
   >
   > The Windows installer asks which features to install. Leave **Add to PATH** on, with the drive icon in front of it and not a red cross. Without it the terminal cannot find node, and answers that `node` is not recognized as a command.
   >
   > Already open VS Code during the install? Close it and open it again, only a new terminal knows the new PATH. On a Mac the installer takes care of all this.
   >
   > ![The Custom Setup step of the Node.js installer on Windows, with Add to PATH selected in the feature tree](https://slides.mctantwerp.be/decks/en/webcoding/02-hello-world/node-add-to-path.png)
2. Open a new, empty folder in VS Code
3. Create `index.js` with the same `console.log` in it
4. Open the terminal in VS Code with <kbd>Ctrl</kbd> + <kbd>`</kbd>
5. Run `node index.js`

<!-- slide 13 -->

## 2. In the browser

<!-- slide 14 -->

### JavaScript on a website

- The way you will use JavaScript nearly all the time.
- The browser downloads your script with the page and runs it on the visitor's machine.
- No compiler checks your code first. A typo only shows up when that line runs, as a red error in the **console**.
- An infinite loop freezes the tab. Close it and fix the loop.
- For now the website lives on your own laptop. Later it goes on a web host.

<!-- slide 15 -->

### Two ways to show output

#### console.log

```js
console.log('Hello world');
```

- Writes to the console, in the developer tools
- For you, the developer. Visitors never see it
- Your main debugging tool for years to come

#### document.write

```js
document.write('Hello world');
```

- Writes straight into the page
- Only works when there is an HTML page
- Outdated. We use it for two weeks, then never again

<!-- slide 16 -->

### The developer tools

![Google homepage with the Chrome developer tools open, arrows pointing at the element inspector, the responsive view button and the Console tab where console.log printed Hello world](https://slides.mctantwerp.be/decks/en/webcoding/02-hello-world/devtools.jpg)

*Developer tools Windows <kbd>F12</kbd>, Mac <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd>. Straight to the console in Chrome Windows <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd>, Mac <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>J</kbd>*

<!-- slide 17 -->

### Write to the page

```js
console.log('Hello console');
document.write('Hello page');
```

<!-- slide 18 -->

### Inside a script tag

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My website</title>
</head>
<body>
  <h1>My website</h1>
  <script>
    document.write('Hello world');
    console.log('Hello console');
  </script>
</body>
</html>
```

<!-- slide 19 -->

### A separate file

#### index.html

```html
<body>
  <h1>My website</h1>

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

#### script.js

```js
// No script tags in here, only JavaScript
console.log('Hello from script.js');
```

<!-- slide 20 -->

### Task: Your own index.html

*10 minutes*

1. Open a new, empty folder in VS Code
2. Create `index.html`, type `!` and press <kbd>Tab</kbd> for the HTML skeleton (Emmet)
3. Put a `<script>` in the body with a `document.write` and a `console.log`
4. Open the file in Chrome with a double click in Finder or Explorer
5. Find your console.log in the developer tools

<!-- slide 21 -->

### Live Server

- An extension for VS Code: **Live Server** by Ritwick Dey. Install it from the Extensions panel.
- Click **Go Live** in the status bar, or open the command palette (Windows <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>, Mac <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>) and pick "Open with Live Server".
- Your page opens on a local web server, something like 127.0.0.1:5500.
- Every save reloads the page. No more refreshing by hand.

<!-- slide 22 -->

### Task: Live reload

*10 minutes*

1. Install Live Server and open your index.html with it
2. Add a second console.log and save. Did the page reload by itself?
3. Move the script tag above the h1 and save. What changed on the page?
4. Move your JavaScript to `script.js` and link it with `<script src="script.js">`

<!-- slide 23 -->

## 3. JavaScript basics

<!-- slide 24 -->

### Comments

```js
// One line of comment
console.log('Hello world');

/*
 * Several lines of comment
 */
console.log('Hello again');
```

<!-- slide 25 -->

### Variables

- JavaScript is **dynamically typed**. You never write a type like `int` or `string`.
- JavaScript figures out the type from the value you put in.
- You declare a variable with `let` or `const`.
- `typeof` tells you what type a value has right now.

<!-- slide 26 -->

### typeof

```js
let name = 'John';
console.log(typeof name);

name = 42;
console.log(typeof name);
```

<!-- slide 27 -->

### undefined and NaN

```js
let x;
console.log(x);

x = 1;
console.log(x);

let result = 'hello' * 2;
console.log(result);
```

<!-- slide 28 -->

### let, const and var

|   | Change the value | Lives in | Use it |
| --- | --- | --- | --- |
| `const` | No | The block { } | **By default** |
| `let` | Yes | The block { } | When the value has to change |
| `var` | Yes | The whole function | Never. Old code only |

> [!TIP]
> Start with const. Only switch to let when the code complains that you are changing it.

<!-- slide 29 -->

### Scope

```js
let a = 1;

if (true) {
  var b = 2;
  let c = 3;
}

console.log(a);
console.log(b);
console.log(c);
```

<!-- slide 30 -->

### const

```js
const myCat = 'Minnie';
console.log(myCat);

myCat = 'Garfield';
console.log(myCat);
```

<!-- slide 31 -->

### Types change

```js
let number = 5;
let text = 'Hello';
console.log(typeof number, typeof text);

number = text + number;
console.log(number);
console.log(typeof number);
```

<!-- slide 32 -->

### Converting on purpose

```js
let number = 5;
number = String(number);
console.log(number, typeof number);
```

*to text*

```js
let number = 5;
number = String(number);
console.log(number, typeof number);
```

*to number*

```js
let input = '42';
input = Number(input);
console.log(input, typeof input);
```

*not a number*

```js
let text = 'Hello';
text = Number(text);
console.log(text, typeof text);
```

<!-- slide 33 -->

### Guess first

```js
console.log('5' + 3);
console.log('5' - 3);
console.log('5' * '2');
console.log(true + 1);
console.log('hello' - 1);
```

<!-- slide 34 -->

### Variables in text

```js
const myCat = 'Minnie';

console.log('My cat is called ' + myCat + '.');
console.log(`My cat is called ${myCat}.`);
```

<!-- slide 35 -->

### Types and operators

- | Type | Example |
  | --- | --- |
  | String | `'Hello'` |
  | Number | `42, 3.14` |
  | Boolean | `true, false` |
  | undefined, null | `let x;` |
  | Array | `[1, 2, 3]` |
  | Object | `{ name: 'Minnie' }` |
- | Operator | Meaning |
  | --- | --- |
  | `+ - * / %` | Calculate |
  | `< > <= >=` | Compare |
  | `=== !==` | Equal, not equal |
  | `&& \|\|` | And, or |
  | `!` | Not |

<!-- slide 36 -->

### == or ===

```js
const x = '5';
const y = 5;

console.log(x == y);
console.log(x === y);
```

> [!TIP]
> `==` converts the type first, `===` compares value and type. Always use three.

<!-- slide 37 -->

> The basics of JavaScript? You already wrote them in C#.

<!-- slide 38 -->

**if, switch, for, while.**

Same as in C#, Java or PHP. Only the declarations with let and const are different.

<!-- slide 39 -->

### Choices

#### if / else

```js
const hour = 14;

if (hour < 12) {
  console.log('Good morning');
} else if (hour < 18) {
  console.log('Good afternoon');
} else {
  console.log('Good evening');
}
```

#### switch

```js
const day = 'sat';

switch (day) {
  case 'sat':
  case 'sun':
    console.log('Weekend');
    break;
  default:
    console.log('Lessons');
}
```

<!-- slide 40 -->

### Loops

```js
for (let i = 1; i <= 5; i++) {
  console.log('Round ' + i);
}
```

*for*

```js
for (let i = 1; i <= 5; i++) {
  console.log('Round ' + i);
}
```

*while*

```js
let lives = 3;

while (lives > 0) {
  console.log('Lives left: ' + lives);
  lives--;
}

console.log('Game over');
```

*infinite*

```js
let i = 0;

while (i < 10) {
  console.log(i);
  // i++ is missing
}
```

<!-- slide 41 -->

### A random number

```js
let randomNumber = Math.floor(Math.random() * 8);
console.log(randomNumber);
```

*step by step*

```js
console.log(Math.random());
console.log(Math.random() * 8);
console.log(Math.floor(Math.random() * 8));
```

*dice*

```js
const dice = Math.floor(Math.random() * 6) + 1;
console.log('You rolled ' + dice);
```

<!-- slide 42 -->

### What does console.log('5' + 3) print?

- A. 8
- B. 53
- C. NaN
- D. An error

**Answer:** B. 53

Plus with a string glues. The 3 becomes text and ends up behind the 5.

<!-- slide 43 -->

### A variable you never assign a new value to. Which keyword?

- A. var
- B. let
- C. const
- D. It does not matter

**Answer:** C. const

const. It says to the reader that the value stays put, and JavaScript enforces it. let when it has to change, var never.

<!-- slide 44 -->

### What does '5' === 5 give?

- A. true
- B. false
- C. undefined
- D. An error

**Answer:** B. false

Three equals signs compare the type too. A string is not a number, so false. With two it would be true.

<!-- slide 45 -->

## 4. Magic Eight Ball

<!-- slide 46 -->

### Task: Magic Eight Ball

*30 minutes*

Ask a question, get an answer from the ball. Everything comes from variables, nothing from a form yet.

1. Make three variables: `userName`, `userQuestion` and `randomNumber`
2. An empty name gives "Hello!", otherwise "Hello, Sam!"
3. Show the question: "Sam asked: Will I get dessert twice?"
4. Show one of eight answers, picked with the random number
5. Use if / else if, or a switch

<!-- slide 47 -->

### What it looks like

```console
Hello, Sam!
Sam asked: Will I get dessert twice?
Magic Eight Ball: My sources say no
```

<!-- slide 48 -->

### Small pieces

- A name in a variable, and the right greeting on screen. Test with an empty name too: `if (...) { }`
- A random number in a variable. Log it, run a few times.
- The question on screen, with `console.log` or `document.write`.
- The answer, with `if / else if` or a `switch` on the number.

<!-- slide 49 -->

### Start here

```js
const userName = 'Sam';
const userQuestion = 'Will I get dessert twice?';
const randomNumber = Math.floor(Math.random() * 8);

// 1. Hello, or Hello with the name

// 2. The question

// 3. The answer, based on randomNumber
```

> [!TIP]
> **Stuck**
>
> *if / else if*
>
> What the exercise asks for, step by step. Long, but every branch is easy to read.
>
> ```js
> const userName = 'Sam';
> const userQuestion = 'Will I get dessert twice?';
> const randomNumber = Math.floor(Math.random() * 8);
>
> if (userName === '') {
>   console.log('Hello!');
> } else {
>   console.log(`Hello, ${userName}!`);
> }
>
> console.log(`${userName} asked: ${userQuestion}`);
>
> let answer = '';
> if (randomNumber === 0) {
>   answer = 'It is certain';
> } else if (randomNumber === 1) {
>   answer = 'It is decidedly so';
> } else if (randomNumber === 2) {
>   answer = 'Reply hazy, try again';
> } else if (randomNumber === 3) {
>   answer = 'Cannot predict now';
> } else if (randomNumber === 4) {
>   answer = 'Do not count on it';
> } else if (randomNumber === 5) {
>   answer = 'My sources say no';
> } else if (randomNumber === 6) {
>   answer = 'Outlook not so good';
> } else {
>   answer = 'Signs point to yes';
> }
>
> console.log(`Magic Eight Ball: ${answer}`);
> ```
>
> *switch*
>
> One variable compared with a list of fixed values: that is what a switch is for. Forget a break and the next case runs too.
>
> ```js
> const userName = 'Sam';
> const userQuestion = 'Will I get dessert twice?';
> const randomNumber = Math.floor(Math.random() * 8);
>
> if (userName === '') {
>   console.log('Hello!');
> } else {
>   console.log(`Hello, ${userName}!`);
> }
>
> console.log(`${userName} asked: ${userQuestion}`);
>
> let answer = '';
> switch (randomNumber) {
>   case 0:
>     answer = 'It is certain';
>     break;
>   case 1:
>     answer = 'It is decidedly so';
>     break;
>   case 2:
>     answer = 'Reply hazy, try again';
>     break;
>   case 3:
>     answer = 'Cannot predict now';
>     break;
>   case 4:
>     answer = 'Do not count on it';
>     break;
>   case 5:
>     answer = 'My sources say no';
>     break;
>   case 6:
>     answer = 'Outlook not so good';
>     break;
>   default:
>     answer = 'Signs point to yes';
> }
>
> console.log(`Magic Eight Ball: ${answer}`);
> ```
>
> *array (sneak peek)*
>
> Arrays get their own lesson, but this is where it is going: the random number picks the answer from a list, no if at all.
>
> ```js
> const userName = 'Sam';
> const userQuestion = 'Will I get dessert twice?';
> const answers = [
>   'It is certain',
>   'It is decidedly so',
>   'Reply hazy, try again',
>   'Cannot predict now',
>   'Do not count on it',
>   'My sources say no',
>   'Outlook not so good',
>   'Signs point to yes',
> ];
> const randomNumber = Math.floor(Math.random() * answers.length);
>
> console.log(userName === '' ? 'Hello!' : `Hello, ${userName}!`);
> console.log(`${userName} asked: ${userQuestion}`);
> console.log(`Magic Eight Ball: ${answers[randomNumber]}`);
> ```

## Glossary

- **Hello world**: The traditional first program in every language: print one line of text. In JavaScript that is console.log('Hello world'); (slide 4)
- **Node.js**: A JavaScript runtime: it runs JavaScript on your computer, without a browser. You start it from the command line with the file to run, like node index.js. (slide 9)
- **Developer tools**: The tools built into the browser, with the element inspector, the responsive view and the console. F12 on Windows, Cmd + Option + I on a Mac. (slide 16)
- **Console**: The panel in the developer tools where console.log writes and where errors show up in red. Cmd + Option + J (Ctrl + Shift + J) opens it right away. (slide 14)
- **console.log**: Writes a value to the console. Only you, the developer, see it, visitors never do. Your main debugging tool for years to come. (slide 15)
- **document.write**: Writes straight into the HTML page, so it only works when there is one. Outdated: we use it for two weeks, then never again. (slide 15)
- **Script tag**: The <script> element that puts JavaScript in an HTML page, with the code inside or in a separate file through src="script.js". The browser runs it the moment it reads it. (slide 18)
- **Live Server**: A VS Code extension by Ritwick Dey. It opens your page on a local web server, something like 127.0.0.1:5500, and reloads it on every save. (slide 21)
- **Comments**: Text in your code that JavaScript skips. // for one line, /\* and \*/ around several lines. (slide 24)
- **Variable**: A name for a value. You declare it with let or const, and JavaScript figures out the type from the value you put in. (slide 25)
- **Dynamically typed**: You never write a type like int or string. The type follows the value, so the same variable can hold a string now and a number later. (slide 25)
- **typeof**: Tells you what type a value has right now, as text: 'string' or 'number', for example. (slide 26)
- **undefined**: The value of a variable that exists, but that nothing was put in yet. let x; gives you one. (slide 27)
- **NaN**: Not a Number. The result of a calculation that makes no sense, like 'hello' \* 2. Funny detail: typeof NaN is number. (slide 27)
- **const**: Declares a variable you cannot give a new value. Your default: JavaScript throws an error when you try, so you never overwrite something by accident. (slide 30)
- **let**: Declares a variable whose value can change. It lives inside the block { } where you declare it. Use it when const complains. (slide 28)
- **var**: The old way to declare a variable. It ignores blocks and lives in the whole function. Never use it, you only find it in old code. (slide 28)
- **Scope**: Where a variable exists. let and const stay inside their block { }, var leaks out of it. Use a variable outside its scope and the script stops with a ReferenceError. (slide 29)
- **Type coercion**: JavaScript converting a type on its own. Plus with a string glues, so '5' + 3 gives '53'. Minus has no text version, so '5' - 3 gives 2. (slide 31)
- **Number()**: Turns a value into a number on purpose. Text that is not a number gives NaN. Values from a form field are always strings, so you will need it a lot. String() goes the other way. (slide 32)
- **Template literal**: Text between backticks, with ${} to put a variable inside: \`My cat is called ${myCat}.\` No more gluing strings together with plus signs. (slide 34)
- **===**: Compares value and type. == converts the type first, so '5' == 5 is true and '5' === 5 is false. Always use three, and !== instead of !=. (slide 36)
- **Math.random()**: A random number from 0 up to 1, never 1 itself. Math.floor(Math.random() \* 8) cuts off the decimals and gives a whole number from 0 to 7. (slide 41)
- **Infinite loop**: A loop that never stops, like a while where i++ is missing. In the browser it freezes the tab: close it and fix the loop. (slide 40)

## Links and sources

### In the deck

- [JS Bin](https://jsbin.com/?js,console) (slide 6, slide 8)
- [CodePen](https://codepen.io/) (slide 6)
- [JSFiddle](https://jsfiddle.net/) (slide 6)
- [OneCompiler](https://onecompiler.com/javascript) (slide 6)
- [Visual Studio Code](https://code.visualstudio.com/) (slide 10)
- [WebStorm](https://www.jetbrains.com/webstorm/) (slide 10)
- [Zed](https://zed.dev/) (slide 10)
- [nodejs.org](https://nodejs.org/) (slide 12)
- [kdgmt.be/discord](https://kdgmt.be/discord) (slide 50)