1. Inline (Avoid!)

<button onclick="alert('Hi!')">
    Click me
</button>

2. Internal Script

<script>
    console.log('Hello, World!');
</script>

3. External File (Best!)

<!-- At end of body -->
<script src="script.js"></script>

Declaring Variables

// Modern way (ES6+)
let name = 'John';      // Can be reassigned
const PI = 3.14159;     // Cannot be reassigned

// Old way (avoid!)
var age = 25;           // Function scoped, hoisted

let vs const

• let - value can change later
• const - value never changes

Naming Rules

• Start with letter, _ or $
• Can contain letters, numbers, _ , $
• Case-sensitive (name ≠ Name)
• Cannot use reserved words (let, const, if...)

Naming Conventions

// camelCase (preferred)
let firstName = 'John';
let totalPrice = 99.99;

// UPPER_CASE for constants
const MAX_SIZE = 100;
const API_KEY = 'abc123';

Primitive Types

// String - text
let name = 'John';
let message = "Hello";
let template = `Hi ${name}!`;  // Template literal

// Number - integers and decimals
let age = 25;
let price = 19.99;
let negative = -10;

// Boolean - true or false
let isActive = true;
let isLoggedIn = false;

// Undefined - declared but no value
let x;  // x is undefined

// Null - intentionally empty
let data = null;

Checking Types

typeof 'hello'    // "string"
typeof 42         // "number"
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof null       // "object" (JS quirk!)
typeof {}         // "object"
typeof []         // "object"

Type Coercion

// JavaScript auto-converts types!
'5' + 3     // "53" (string)
'5' - 3     // 2 (number)
'5' == 5    // true (loose equality)
'5' === 5   // false (strict equality)

Arithmetic

let a = 10, b = 3;

a + b    // 13 (addition)
a - b    // 7 (subtraction)
a * b    // 30 (multiplication)
a / b    // 3.333... (division)
a % b    // 1 (modulo/remainder)
a ** b   // 1000 (exponent)

Assignment

let x = 10;
x += 5;   // x = x + 5 → 15
x -= 3;   // x = x - 3 → 12
x *= 2;   // x = x * 2 → 24
x /= 4;   // x = x / 4 → 6

// Increment/Decrement
x++;      // x = x + 1
x--;      // x = x - 1

Comparison

5 == '5'   // true (loose)
5 === '5'  // false (strict)
5 != '5'   // false
5 !== '5'  // true
5 > 3      // true
5 < 3      // false
5 >= 5     // true
5 <= 4     // false

Logical

true && true   // true (AND)
true && false  // false
true || false  // true (OR)
false || false // false
!true          // false (NOT)
!false         // true

const name = user && user.name;
const value = input || 'default';

Creating Strings

// Three ways
let s1 = 'single quotes';
let s2 = "double quotes";
let s3 = `template literal`;

// Template literals - best!
let name = 'John';
let greeting = `Hello, ${name}!`;
let multi = `Line 1
Line 2
Line 3`;

String Properties & Methods

let str = 'Hello, World!';

str.length         // 13
str.toUpperCase()  // "HELLO, WORLD!"
str.toLowerCase()  // "hello, world!"
str.trim()         // Remove whitespace

Common String Methods

let str = 'Hello, World!';

// Finding
str.indexOf('World')    // 7
str.includes('Hello')   // true
str.startsWith('He')    // true
str.endsWith('!')       // true

// Extracting
str.slice(0, 5)         // "Hello"
str.slice(-6)           // "World!"
str.substring(7, 12)    // "World"

// Modifying (returns new string!)
str.replace('World', 'JS')  // "Hello, JS!"
str.split(', ')         // ["Hello", "World!"]

// Combining
'Hello' + ' ' + 'World'  // "Hello World"
['Hello', 'World'].join(' ')  // "Hello World"

Creating Arrays

// Array literal (preferred)
let fruits = ['apple', 'banana', 'orange'];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, 'two', true, null];

// Accessing elements (0-indexed!)
fruits[0]    // 'apple'
fruits[1]    // 'banana'
fruits[2]    // 'orange'
fruits[3]    // undefined

// Modifying
fruits[1] = 'mango';  // Replace
fruits.length         // 3

Array Destructuring

const [first, second] = fruits;
// first = 'apple', second = 'banana'

Common Array Methods

let arr = [1, 2, 3];

// Adding/Removing
arr.push(4)      // Add to end → [1,2,3,4]
arr.pop()        // Remove from end → [1,2,3]
arr.unshift(0)   // Add to start → [0,1,2,3]
arr.shift()      // Remove from start → [1,2,3]

// Finding
arr.indexOf(2)       // 1
arr.includes(2)      // true
arr.find(x => x > 1) // 2

// Transforming
arr.map(x => x * 2)      // [2, 4, 6]
arr.filter(x => x > 1)   // [2, 3]
arr.reduce((a, b) => a + b, 0)  // 6

// Other
arr.slice(1, 2)      // [2] - extract
arr.splice(1, 1)     // Remove at index
arr.join(', ')       // "1, 2, 3"
arr.reverse()        // [3, 2, 1]
arr.sort()           // Sort alphabetically

if...else

let age = 18;

if (age >= 18) {
    console.log('Adult');
} else if (age >= 13) {
    console.log('Teenager');
} else {
    console.log('Child');
}

// Single line (simple cases)
if (age >= 18) console.log('Adult');

Ternary Operator

// condition ? ifTrue : ifFalse
let status = age >= 18 ? 'adult' : 'minor';

// Can be nested (but don't!)
let category = age >= 18
    ? 'adult'
    : age >= 13
        ? 'teen'
        : 'child';

switch

let day = 'Monday';

switch (day) {
    case 'Monday':
    case 'Tuesday':
    case 'Wednesday':
    case 'Thursday':
    case 'Friday':
        console.log('Weekday');
        break;
    case 'Saturday':
    case 'Sunday':
        console.log('Weekend');
        break;
    default:
        console.log('Invalid day');
}

for loop

// Classic for loop
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

// Looping arrays
const fruits = ['apple', 'banana', 'orange'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

for...of (Arrays)

// Preferred for arrays!
for (const fruit of fruits) {
    console.log(fruit);
}

// With index
for (const [index, fruit] of fruits.entries()) {
    console.log(index, fruit);
}

while loop

let count = 0;

while (count < 5) {
    console.log(count);
    count++;
}

// do...while (runs at least once)
do {
    console.log(count);
    count++;
} while (count < 5);

Loop Control

// break - exit loop entirely
for (let i = 0; i < 10; i++) {
    if (i === 5) break;
    console.log(i);  // 0, 1, 2, 3, 4
}

// continue - skip to next iteration
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i);  // 0, 1, 3, 4
}

Function Declaration

function greet(name) {
    return `Hello, ${name}!`;
}

greet('John');  // "Hello, John!"

// Multiple parameters
function add(a, b) {
    return a + b;
}

add(5, 3);  // 8

Default Parameters

function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

greet();        // "Hello, Guest!"
greet('John');  // "Hello, John!"

Arrow Functions (ES6)

// Arrow function syntax
const greet = (name) => {
    return `Hello, ${name}!`;
};

// Shorter: implicit return
const greet = (name) => `Hello, ${name}!`;

// Even shorter: single param
const greet = name => `Hello, ${name}!`;

// No params
const sayHi = () => 'Hi!';

// Multiple params need ()
const add = (a, b) => a + b;

Global Scope

// Accessible everywhere
const globalVar = 'I am global';

function test() {
    console.log(globalVar);  // Works!
}

Function Scope

function test() {
    const localVar = 'I am local';
    console.log(localVar);  // Works!
}

console.log(localVar);  // Error!

Block Scope (let, const)

if (true) {
    let blockVar = 'I am block scoped';
    const alsoBlock = 'Me too';
}

console.log(blockVar);  // Error!

var vs let

// var is function scoped (confusing!)
if (true) {
    var x = 5;
}
console.log(x);  // 5 (still accessible!)

// let is block scoped (predictable)
if (true) {
    let y = 5;
}
console.log(y);  // Error!

function outer() {
    let count = 0;
    return function inner() {
        count++;
        return count;
    };
}

const counter = outer();
counter();  // 1
counter();  // 2
counter();  // 3

Key Concepts

• Variables: let (reassignable), const (constant)
• Types: string, number, boolean, null, undefined
• Operators: arithmetic, comparison, logical
• Strings: template literals, string methods
• Arrays: push, pop, map, filter, reduce
• Control: if/else, switch, for, while
• Functions: declaration, arrow functions
• Scope: global, function, block

Best Practices

• Use const by default, let when needed
• Never use var
• Always use === for comparison
• Use template literals for strings
• Use for...of for array iteration
• Keep functions small and focused
• Use descriptive variable names