Skip to content
Courses

JavaScript and the Interactive Web

Level
Senior High · Grades 10–12
Difficulty
Intermediate
Duration
14 modules
Curriculum
42 lessons

Curriculum

14 units
  1. 01Getting to Know JavaScript and Your WorkspaceYou understand the role of JavaScript alongside HTML and CSS, and can set up VS Code, link a script file, and run your first code in the browser.3 lessonsShow contents
  2. 02Variables, Data Types, and OperatorsYou can store data with let and const, tell the basic data types apart, and process them with arithmetic and comparison operators and template literals.3 lessonsShow contents
    • let, const, and Primitive Data Types45 minLocked
    • A Report Card Calculator in the Console1 hLocked
    • Recap and Self-Check: Variables and Operators45 minLocked
  3. 03Conditionals and LogicYou can write programs that make decisions with if, else if, else, switch, logical operators, and the ternary operator.3 lessonsShow contents
    • Programs That Make Decisions with if and else45 minLocked
    • Building a Duty Roster Picker and Grade Labeller1 hLocked
    • Recap and Self-Check: Conditionals45 minLocked
  4. 04LoopsYou can repeat tasks automatically with for, while, and for...of, and control loops with break and continue without creating infinite loops.3 lessonsShow contents
    • How for, while, and for...of Work45 minLocked
    • Building a Times Table and a Class Score Summary1 hLocked
    • Recap and Self-Check: Loops45 minLocked
  5. 05Functions and Variable ScopeYou can wrap logic into reusable functions with parameters, return values, and arrow functions, and you understand variable scope.3 lessonsShow contents
    • Functions as Reusable Recipes45 minLocked
    • Building a Library of School Helper Functions1 hLocked
    • Recap and Self-Check: Functions45 minLocked
  6. 06Arrays and Array MethodsYou can store collections of data in arrays, add and remove items, and process them with map, filter, find, reduce, and sort.3 lessonsShow contents
    • Arrays: Ordered Lists and the Methods That Process Them45 minLocked
    • Processing a Cooperative Shopping List with map, filter, and reduce1 hLocked
    • Recap and Self-Check: Arrays45 minLocked
  7. 07Objects and JSONYou can model real data as objects, manage arrays of objects, use destructuring and spread, and convert data to and from JSON.3 lessonsShow contents
    • Objects: One Record with Many Properties45 minLocked
    • Managing Extracurricular Members as an Array of Objects1 hLocked
    • Recap and Self-Check: Objects and JSON45 minLocked
  8. 08The DOM: Selecting and Changing ElementsYou can select elements with querySelector, change text, attributes, and CSS classes, and create new elements dynamically from array data.3 lessonsShow contents
    • The DOM Tree and How JavaScript Reaches It45 minLocked
    • Rendering School Announcements from an Array onto the Page1 hLocked
    • Recap and Self-Check: DOM Manipulation45 minLocked
  9. 09Events and User InteractionYou can build pages that react to clicks, typing, and key presses using addEventListener, the event object, and event delegation.3 lessonsShow contents
    • addEventListener, the Event Object, and Event Delegation45 minLocked
    • Building a Live Search and a Dark Mode Toggle1 hLocked
    • Recap and Self-Check: Events45 minLocked
  10. 10Forms and Input ValidationYou can handle form submission with JavaScript, read inputs with FormData, and validate data while giving clear and accessible error messages.3 lessonsShow contents
    • The Submit Flow, preventDefault, and Validation Rules45 minLocked
    • A Competition Sign-up Form with Per-field Error Messages1 hLocked
    • Recap and Self-Check: Forms and Validation45 minLocked
  11. 11Saving Data with localStorageYou can save and reload app data in the browser with localStorage and JSON, so the data is not lost when the page is reloaded.3 lessonsShow contents
    • How localStorage Works and Its Limits45 minLocked
    • Building a Homework Notes App That Survives a Reload1 hLocked
    • Recap and Self-Check: Browser Storage45 minLocked
  12. 12Asynchronous JavaScript and the Fetch APIYou understand how JavaScript handles work that takes time, and can fetch JSON data with fetch and async/await while showing loading states and error messages.3 lessonsShow contents
    • Promises, async/await, and Why Code Does Not Always Run in Order45 minLocked
    • Loading the Extracurricular Schedule from a JSON File with fetch1 hLocked
    • Recap and Self-Check: Async and Fetch45 minLocked
  13. 13Organising Code: ES Modules and DebuggingYou can split an app into several ES module files with import and export, and find and fix bugs using breakpoints in DevTools.3 lessonsShow contents
    • ES Modules: One File, One Responsibility45 minLocked
    • Splitting the Homework Notes into Modules and Tracking a Bug with Breakpoints1 hLocked
    • Recap and Self-Check: Modules and Debugging45 minLocked
  14. 14Final Project: An Interactive Web AppYou can plan, build, test, and present your own interactive web app that combines the DOM, events, forms, localStorage, fetch, and ES modules.3 lessonsShow contents
    • Planning the App: Idea, Features, Data Model, and File Structure50 minLocked
    • Building and Testing the App Stage by Stage1 hLocked
    • Presenting Your Project and End-of-Course Reflection50 minLocked

Prerequisites

HTML and CSS

Tools and materials

JavaScript, VS Code

Final project

An interactive web app

Mentor

ES

EduSTEAM Team