The Foundations
💡
This is where it all starts. Variables, logic, and decisions. Every program ever built begins here.
1. Setup + Hello World
JavaScript runs inside the browser.
Inline — put it before the closing </body> tag
html
<body>
<!-- your HTML here -->
<script>
console.log("Salaam, World!");
</script>
</body>External file — link it the same way
html
<body>
<!-- your HTML here -->
<script src="script.js"></script>
</body>javascript
// script.js
console.log("Salaam, World!");- console.log() → prints to the console
Open DevTools
| OS | Shortcut |
|---|---|
| Windows / Linux | F12 or Ctrl + Shift + J |
| Mac | Cmd + Option + J |
→ Click the Console tab to see output
Mental model: JavaScript = instructions the browser runs step by step
2. Variables
Variables store values you want to reuse.
javascript
let name = "Ahmed";
let age = 25;Use let when the value changes:
javascript
let score = 10;
score = 20;
score = 30;Use const when the value should NOT change:
javascript
const country = "Norway";
country = "Sweden"; // ❌ errorvar also exists — ignore it.
In practice
javascript
let price = 100;
let discount = 20;
let finalPrice = price - discount;
console.log(finalPrice); // 80Mental model: Variable = a labeled box storing a value
3. Datatypes
JavaScript has different types of data.
javascript
let name = "Ahmed"; // string
let age = 25; // number
let isStudent = true; // boolean
let empty = null; // nothing (intentional)
let x; // undefined (not set yet)Mental model:
4. Maths
Basic operations
javascript
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2Shortcuts
javascript
let x = 10;
x += 5; // 15
x -= 3; // 12
x *= 2; // 24
x /= 4; // 6Increment / Decrement
javascript
let count = 0;
count++; // 1
count++; // 2
count--; // 1In practice
javascript
let price = 200;
let tax = 0.1;
let quantity = 3;
let subtotal = price * quantity;
let taxAmount = subtotal * tax;
let total = subtotal + taxAmount;
console.log(total); // 660Mental model: You are transforming numbers step by step
5. Comparison
Comparisons return true or false.
javascript
5 === 5; // true
5 === "5"; // falseLoose vs strict
javascript
5 == "5"; // true (converts type)
5 === "5"; // false (no conversion)Always use ===
More comparisons
javascript
10 > 5; // true
10 < 5; // false
10 >= 10; // true
10 <= 9; // falseIn practice
javascript
let age = 20;
console.log(age >= 18); // trueMental model: Comparison = a question → answer is true or false
6. Conditions
Run code based on a result.
javascript
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}Multiple conditions
javascript
let score = 75;
if (score >= 90) {
console.log("A");
} else if (score >= 70) {
console.log("B");
} else if (score >= 50) {
console.log("C");
} else {
console.log("Fail");
}Combine conditions
javascript
let age = 20;
let hasID = true;
if (age >= 18 && hasID) {
console.log("Allowed in");
}- && → AND (both must be true)
- || → OR (one must be true)
In practice
javascript
let balance = 100;
if (balance >= 50) {
console.log("You can buy");
} else {
console.log("Not enough money");
}Mental model:
Summary
| Category | Key Ideas |
|---|---|
| Setup | <script>, console.log() |
| Variables | let, const |
| Datatypes | string, number, boolean, null, undefined |
| Maths | operations + shortcuts |
| Comparison | ===, >, < |
| Conditions | if / else, &&, || |