JAVASCRIPT FUNDAMENTALS

Bring Your Websites to Life with Interactive Code

Lesson Progress ⏳ In Progress

JavaScript Curriculum

Section 4.1 - 4.4

📦 4.1 Variables & Data Types
⚡ 4.2 Functions
🌳 4.3 DOM Manipulation
🖱️ 4.4 Events

Section 4.5 - 4.8

✅ 4.5 Form Validation
🌐 4.6 Working with APIs
💾 4.7 Local Storage
⏱️ 4.8 Async JavaScript

🎮 JavaScript Console

Try JavaScript directly in your browser! Open your browser's console (F12) to see more.

> JavaScript Ready!

> Type your code below and click Run

4.1 Variables & Data Types

Declaring Variables

// Using let (modern, can be reassigned)
let name = "John";
let age = 25;

// Using const (cannot be reassigned)
const PI = 3.14159;
const birthYear = 1998;

// Using var (old way, avoid)
var oldWay = "deprecated";

Data Types

Type	Example
String	"Hello World"
Number	42, 3.14
Boolean	true, false
Array	[1, 2, 3]
Object	{name: "John"}
Null	null
Undefined	undefined

✏️ Variable Playground

Your Name:

Your Age:

Output will appear here

4.2 Functions

Function Declaration

function greet(name) {
    return "Hello " + name;
}

// Call the function
let message = greet("John");

Function Expression

const add = function(a, b) {
    return a + b;
};

let sum = add(5, 3);

Arrow Function

const multiply = (a, b) => a * b;

let product = multiply(4, 5);

🧮 Function Calculator

4.3 DOM Manipulation

Selecting Elements

// By ID
let header = document.getElementById('header');

// By Class
let items = document.getElementsByClassName('item');

// By Tag
let paragraphs = document.getElementsByTagName('p');

// Query Selector (modern)
let first = document.querySelector('.class');
let all = document.querySelectorAll('div');

Changing Content

// Change text
element.textContent = "New text";
element.innerHTML = "HTML";

// Change styles
element.style.color = "blue";
element.style.backgroundColor = "black";

// Add/remove classes
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');

🎨 DOM Playground

Click the buttons to change me!

4.4 Events

Common Events

Event	Description
click	Element clicked
mouseover	Mouse enters
mouseout	Mouse leaves
keydown	Key pressed
submit	Form submitted
load	Page loaded
change	Input changed

Adding Events

// Method 1: onclick property
button.onclick = function() {
    alert('Clicked!');
};

// Method 2: addEventListener (best)
button.addEventListener('click', function() {
    alert('Clicked!');
});

// Method 3: HTML attribute (avoid)
<button onclick="alert()">Click</button>

🖱️ Event Playground

Hover over me!

Waiting for hover...

Click counter: 0

4.5 Form Validation

Validation Rules

function validateForm() {
    let name = document.getElementById('name').value;
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;
    
    if (name.length < 3) {
        alert('Name must be at least 3 characters');
        return false;
    }
    
    if (!email.includes('@')) {
        alert('Invalid email');
        return false;
    }
    
    if (password.length < 6) {
        alert('Password too short');
        return false;
    }
    
    return true;
}

Real-time Validation

4.6 Working with APIs

Fetch API

// Fetch data from API
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

// Using async/await
async function getData() {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

Demo: Random User API

Click button to fetch user data

4.7 Local Storage

Local Storage Methods

// Save data
localStorage.setItem('key', 'value');

// Get data
let value = localStorage.getItem('key');

// Remove data
localStorage.removeItem('key');

// Clear all
localStorage.clear();

// Save objects
let user = {name: 'John', age: 25};
localStorage.setItem('user', JSON.stringify(user));

// Retrieve objects
let savedUser = JSON.parse(localStorage.getItem('user'));

Todo List App

4.8 Async JavaScript

setTimeout

// Run after delay
setTimeout(() => {
    console.log('2 seconds later');
}, 2000);

setInterval

// Run repeatedly
let count = 0;
let interval = setInterval(() => {
    console.log(count++);
    if (count > 5) clearInterval(interval);
}, 1000);

Promises

let promise = new Promise((resolve, reject) => {
    // Async operation
    if (success) resolve(value);
    else reject(error);
});

promise.then(result => {
    // Handle success
}).catch(error => {
    // Handle error
});

⏱️ Async Timer Demo

5

🎮 JavaScript Practice Project: Tic Tac Toe

Build an Interactive Game!

Requirements:

✅ 3x3 game board
✅ Players take turns (X and O)
✅ Check for winner
✅ Detect draw
✅ Reset game button
✅ Display current player

Try the Demo:

Current Player: X

Starter Code:

<div class="game-board">
    <div class="cell"></div>
    ...
</div>

<script>
let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
let gameActive = true;

function handleClick(index) {
    // Your game logic here
}
</script>

📚 JavaScript Resources

JS Cheatsheet Example Code MDN JS Docs JavaScript.info freeCodeCamp CodePen

Back to Main Menu