JavaScript Primer
The Big Idea
JavaScript is the language that makes web pages interactive. HTML is structure, CSS is style, JavaScript is behaviour. This primer introduces the core building blocks you will use in every JavaScript programme you write: data types, variables, functions, and operators.
Note: JavaScript and Java are two completely different languages. When searching for help, always use "JavaScript" — not "Java".
Your Roadmap
| Section | Time | Required? |
|---|---|---|
| Watch first | 12 min | ⚑ Required |
| Data types | 15 min | ⚑ Required |
| Variables | 10 min | ⚑ Required |
| console.log | 10 min | ⚑ Required |
| Functions | 20 min | ⚑ Required |
| Operators | 20 min | ⚑ Required |
| Quiz | 30 min | ⚑ Required |
| Check your understanding with a chatbot | 20 min | ⚑ Required |
| Reflect | 15 min | ⚑ Required |
Watch first
JavaScript Primer (12 min)
Data types
Every value in JavaScript has a type. The three most common are:
Number
Use number for quantities and calculations.
4.2 + 5 // 9.2 — adding100 - 6 // 94 — subtracting2 * 3 // 6 — multiplying8 / 2 // 4 — dividing
String
Use string for text. Wrap it in single or double quotes.
'Ahmad''ahmad@email.com''Hello' + ' ' + 'World!' // "Hello World!" — joining strings
You can join strings together using +. This is called concatenation.
'Happy ' + 'Birthday!' // "Happy Birthday!"
Boolean
Use boolean for true/false values.
truefalse
Booleans are not strings — do not put them in quotes.
Variables
Variables are one of the main building blocks of JavaScript.
Variables are named containers. You store a value in them and use it later.
The data types like number, string, and boolean can all be stored in variables.
Declare and assign at once:
let apples = 3let dog = 'Pickle'let isLoggedIn = false
letcreates the variable- the name comes next
=assigns the value
Use names that describe what they hold. isLoggedIn is clearer than x.
Updating a variable:
let score = 0score = 10 // score is now 10
When updating a variable, do not use let again — let is only for creating it the first time.
console.log
console.log() prints a value to the browser console. It is how you check what your code is actually doing.
let name = 'Aroha'console.log(name) // prints: Arohaconsole.log(3 + 4) // prints: 7
Try it now:
- Open your browser
- Right-click anywhere on the page and select Inspect
- Click the Console tab
- Type
console.log("kia ora")and press Enter
You should see kia ora appear. The browser console is your sandbox — use it to test any JavaScript as you work through this primer.
Functions
A function is a reusable block of code. You define it once, then call it whenever you need it.
Define a function:
function greet() {console.log('Kia ora!')}
Call it:
greet() // prints: Kia ora!
Parameters and arguments
Parameters let you pass values into a function.
function greet(name) {console.log('Kia ora, ' + name + '!')}greet('Aroha') // prints: Kia ora, Aroha!greet('Hemi') // prints: Kia ora, Hemi!
nameis the parameter — a placeholder defined in the function"Aroha"is the argument — the actual value passed when calling it
Return values
Functions can calculate something and send the result back.
function add(a, b) {return a + b}let result = add(3, 4)console.log(result) // prints: 7
return sends the value out of the function. Without it, the function does its work but gives nothing back.
Operators
Comparison operators
These compare two values and return true or false.
| Operator | Meaning | Example | Result |
|---|---|---|---|
=== | strictly equal | 5 === 5 | true |
!== | not equal | 5 !== 3 | true |
> | greater than | 10 > 3 | true |
< | less than | 2 < 1 | false |
>= | greater than or equal | 5 >= 5 | true |
<= | less than or equal | 4 <= 3 | false |
Use
===instead of==. The triple equals checks both value and type, which avoids subtle bugs.
Quiz
Work through the JavaScript Primer Quiz to test what you have read.
Check your understanding with a chatbot
This is not a one-shot prompt. Have a conversation to test what you have learned.
Step 1 — Set the scene:
"I just read an introduction to JavaScript covering data types, variables, functions, and operators. I want you to check my understanding by asking me questions — don't explain anything yet, just ask."
Step 2 — Answer in your own words. Don't look anything up. It's fine to say "I'm not sure."
Step 3 — Fill the gaps:
"Based on my answers, what's the one concept I'm most unclear on? Explain just that one thing with a short code example."
Step 4 — Practice with a mini challenge:
"Give me one small coding challenge that uses variables and a function. Don't show me the answer yet."
Write your solution in the browser console. Then ask the chatbot to review it.
Why this works: Writing code from a prompt — even a small one — builds the muscle memory that reading alone never does.
How to know you've nailed it
| Level | You can... | ||
|---|---|---|---|
| 🪨 | Intro Climb | Name the three data types and declare a variable of each type | ⚑ Required |
| 🧗 | Core Ascent | Write a function that takes a parameter and returns a value, and test it in the console | ⚑ Required |
| 🏔️ | Summit | Use comparison and logical operators inside a function and explain what each line does | ◎ Optional |
The Big Idea (revisited)
Data types describe what kind of value something is. Variables store values. Functions package reusable logic. Operators compare and combine values. Every JavaScript programme — no matter how complex — is built from these four building blocks.
Reflect
Open sprint-2/my-reflections-sprint-2.md and add your answers under the JavaScript Primer heading.
Stage, commit, and push.