JavaScript: From Zero to Practical
A concise course covering fundamentals to intermediate topics, with examples and exercises.
Author: Generated by ChatGPT
Contents
1. Course Overview & Setup
2. Basics: Syntax, Variables, Types
3. Control Flow & Functions
4. Objects & Arrays
5. DOM & Events (Browser)
6. Asynchronous JavaScript: Callbacks, Promises, async/await
7. ES6+ Features (let/const, arrow functions, modules)
8. Fetch, APIs & JSON
9. Testing & Debugging
10. Project: To-Do App (step-by-step)
Appendix: Cheatsheet & Answers
1. Course Overview & Setup
What you'll learn: syntax, DOM, async, ES6+, and a final small project. Tools: a code editor (VS Code), a
modern browser, Node.js (optional).
Exercises:
- Install VS Code and open the console (DevTools) in your browser.
2. Basics: Syntax, Variables, Types
JS is dynamically typed. Use let and const to declare variables. Primitive types: string, number, boolean,
null, undefined, symbol, bigint.
// Variables
const name = "Ada";
let age = 30;
age = age + 1;
// Types and typeof
console.log(typeof name); // "string"
console.log(typeof 42); // "number"
Exercises:
- Declare variables using let and const; log their types.
3. Control Flow & Functions
Conditionals (if/else, switch) and loops (for, while). Functions: declarations, expressions, arrow functions.
// Function examples
function add(a, b) {
return a + b;
}
const multiply = (a, b) => a * b;
console.log(add(2,3)); // 5
console.log(multiply(2,3)); // 6
Exercises:
- Write a function that returns the factorial of a number.
4. Objects & Arrays
Objects are key-value stores. Arrays are ordered lists with many helpful methods (map, filter, reduce).
// Object and array
const user = {name: "Sam", age: 25};
const nums = [1,2,3,4];
// Array methods
const squares = nums.map(n => n*n);
const evens = nums.filter(n => n % 2 === 0);
Exercises:
- Given an array of users, return names of those older than 18.
5. DOM & Events (Browser)
The DOM represents HTML as a tree. Use document.querySelector / getElementById to access elements
and addEventListener to handle events.
// DOM example (run in browser)
const btn = document.querySelector('#addBtn');
btn.addEventListener('click', () => {
const input = document.querySelector('#task').value;
// add to list...
});
Exercises:
- Create a button that appends a new list item to an unordered list when clicked.
6. Asynchronous JavaScript
Callbacks were used historically; Promises and async/await are modern approaches that make async
code easier to read.
// Promise and async/await
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
console.log('Start');
await wait(500);
console.log('Half second later');
}
demo();
Exercises:
- Fetch data from a public API and log the JSON using fetch + async/await.
7. ES6+ Features
Important features: let/const, template strings, destructuring, spread/rest, default params, classes,
modules (import/export).
// Destructuring and spread
const point = {x: 1, y: 2};
const {x, y} = point;
const arr = [1,2,3];
const arr2 = [...arr, 4, 5];
Exercises:
- Refactor a function to use default parameters and destructuring.
8. Fetch, APIs & JSON
Communicate with servers using fetch. Parse JSON with response.json(). Handle errors and HTTP status
codes.
// Fetch example
fetch('https://api.example.com/data')
.then(r => {
if (!r.ok) throw new Error('Network error');
return r.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
Exercises:
- Call a public API (e.g., JSONPlaceholder) and display results in the page.
9. Testing & Debugging
Use console, breakpoints, and debugger; write unit tests with frameworks like Jest for Node projects or
testing-library for front-end.
Exercises:
- Open DevTools and set a breakpoint; step through code execution.
10. Project: Build a Simple To-Do App
Project outline: HTML structure, CSS for layout, JS to add/remove/complete tasks, persist to localStorage.
// Minimal To-Do logic (example)
const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const list = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
const text = input.value.trim();
if (!text) return;
const li = document.createElement('li');
li.textContent = text;
list.appendChild(li);
input.value = '';
// optionally save to localStorage...
});
Steps:
- Create basic HTML with an input, button, and UL for tasks.
- Write JS to handle submit, create LI elements, and append to UL.
- Add click handlers to mark complete or delete items.
- Persist tasks to localStorage and load them on page load.
Appendix: JavaScript Cheatsheet
Declaration let name = 'Ada'; const PI = 3.14;
Function function fn(a){return a} OR const fn = (a) => a;
Array common push, pop, shift, unshift, map, filter, reduce, find
Promise new Promise((res, rej)=>{}) async/await try { await ... } catch(e) {}
DOM document.querySelector, addEventListener, createElement
Answers (selected)
Factorial (example):
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
Fetch JSON example:
async function getData() {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if (!res.ok) throw new Error('Network error');
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
}
