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

SectionTimeRequired?
Watch first12 min⚑ Required
Data types15 min⚑ Required
Variables10 min⚑ Required
console.log10 min⚑ Required
Functions20 min⚑ Required
Operators20 min⚑ Required
Quiz30 min⚑ Required
Check your understanding with a chatbot20 min⚑ Required
Reflect15 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 — adding
100 - 6 // 94 — subtracting
2 * 3 // 6 — multiplying
8 / 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.

true
false

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 = 3
let dog = 'Pickle'
let isLoggedIn = false
  • let creates 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 = 0
score = 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: Aroha
console.log(3 + 4) // prints: 7

Try it now:

  1. Open your browser
  2. Right-click anywhere on the page and select Inspect
  3. Click the Console tab
  4. 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!
  • name is 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.

OperatorMeaningExampleResult
===strictly equal5 === 5true
!==not equal5 !== 3true
>greater than10 > 3true
<less than2 < 1false
>=greater than or equal5 >= 5true
<=less than or equal4 <= 3false

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

LevelYou can...
🪨Intro ClimbName the three data types and declare a variable of each type⚑ Required
🧗Core AscentWrite a function that takes a parameter and returns a value, and test it in the console⚑ Required
🏔️SummitUse 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.