JavaScript 1

Make Your Code Think

HTML builds the page. CSS styles it. JavaScript can ask questions, remember answers, do maths and make decisions.

1 · Script 2 · Alert 3 · Variables 4 · Prompt 5 · Maths 6 · If / Else

Where does JavaScript go?

Put <script> near the bottom

For now, put your <script> just before the closing </body> tag.

<body>

    <h1>My Game</h1>
    <button>PLAY</button>

    <script>
        // JavaScript goes here
    </script>

</body>

Curious why? Later JavaScript will find and change HTML elements. Putting the script near the bottom means the browser has already read the HTML above it. There are other correct ways to load JavaScript too, but this is the simplest place for us to start.

JavaScript 1.1

1. Your First JavaScript

JavaScript goes inside a <script> tag. Try the smallest useful JavaScript command: alert().

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My JavaScript</title>
</head>

<body>
    <h1>My Game</h1>

    <script>
        alert("Hello!");
    </script>
</body>
</html>

ResultA popup message

Try it

Change Hello! to your own message. Then add a second alert().

JavaScript 1.2

2. Let JavaScript Remember Something

let creates a variable. Think of a variable as a named box that stores something.

Code

<script>
let playerName = "Daniel";

alert(playerName);
</script>

ResultStored in a variable

Text goes inside quotes. "Daniel" is text. playerName is a variable name, so it has no quotes.

JavaScript 1.3

3. Ask the Player a Question

prompt() asks a question and gives JavaScript the answer.

Code

<script>
let name = prompt("What is your name?");

alert("Hello " + name);
</script>

ResultQuestion → answer → message

+ can join text together. "Hello " + name joins the words Hello with whatever the player typed.

Try it

Change the question. Then make the final alert say something like "Welcome to the game, " + name + "!"

JavaScript 1.4

4. Store the Question Too

Variables can store the question, the answer, or almost anything else we need later.

Code

<script>
let question = "What is your favourite game?";
let answer = prompt(question);

alert("Your answer is: " + answer);
</script>

ResultVariables working together

JavaScript 1.5

5. JavaScript Can Do Maths

Use +, -, * and / for maths.

Code

<script>
let num1 = 7;
let num2 = 3;

let sum = num1 + num2;
let product = num1 * num2;

alert("Sum: " + sum);
alert("Product: " + product);
</script>

ResultMaths with variables

Math operators + add - subtract * multiply / divide

JavaScript 1.6

6. Maths with Answers

We can use answers from prompt() in simple maths. For now, multiplication is especially easy.

Code

<script>
let length = prompt("Length?");
let width = prompt("Width?");

let area = length * width;

alert("Area: " + area);
</script>

ResultMini area calculator

JavaScript 1.7

7. Make a Decision with if

if means: only run this code when something is true.

Code

<script>
let answer = prompt("What is 2 + 2?");

if (answer == 4) {
    alert("Correct!");
}
</script>

ResultOnly runs when true

JavaScript 1.8

8. if ... else

else gives JavaScript something different to do when the answer is not correct.

Code

<script>
let answer = prompt("What is 2 + 2?");

if (answer == 4) {
    alert("Correct!");
} else {
    alert("Try again!");
}
</script>

ResultTwo possible paths

JavaScript 1.9

9. Comparisons

Comparisons ask questions that can be true or false.

==equal to

!=not equal to

>greater than

<less than

>=greater than or equal

<=less than or equal

Examples

score > 100
age >= 10
answer != "no"

Mini Projects

10. Put It Together

These are small, but they use real programming: input, variables, maths and decisions.

Project 1

Personal Greeting

Ask the player's name and welcome them to the game.

Project 2

Maths Calculator

Ask for two numbers and show the product, area or difference.

Project 3

Guessing Game

Ask for a secret number and use if/else to say whether the guess is correct.

Reference

JavaScript 1 Quick Reference

<script>Where JavaScript goes.

alert("Hi")Show a message.

prompt("Question?")Ask the user.

let score = 5Store a value.

"Hello"A string: text in quotes.

"Hi " + nameJoin text and values.

+ - * /Math operators.

if (...) { }Run code when true.

else { }Otherwise do this.

== !=Equal / not equal.

< <= > >=Compare numbers.

Practice

Ready to make some mini programs?

Start with quick checks, then build a calculator and guessing game.

PRACTICE JAVASCRIPT 1 →

JavaScript 2: Control the actual web page

Next: buttons, functions, getElementById(), input values, changing text, changing styles and finally moving a player.