JavaScript

This is the main map for JavaScript learning.

Quick Navigation

Area	Map	Focus
Basics	JS - Basics	values, conditions, strings, loops
Arrays	JS - Arrays and Functional Methods	arrays, spread/rest, array methods
Functions	JS - Functions	declarations, expressions, callbacks, closure
Objects	JS - Objects and Classes	objects, this, classes, inheritance
Async	JS - Async Programming	callbacks, promises, async/await, timers
Browser	JS - DOM and Browser	DOM, events, classList, storage
Networking	JS - Data Fetching	JSON, fetch, headers, API requests
Practice	JS - Practice Projects	small programs and examples

Study Order

1. Finish JS - Basics.
2. Practice JS - Arrays and Functional Methods and JS - Functions together.
3. Study JS - Objects and Classes.
4. Move to browser behavior with JS - DOM and Browser.
5. Learn async with JS - Async Programming.
6. Apply async to APIs with JS - Data Fetching.
7. Build small examples from JS - Practice Projects.

Basic Syntax

• User’s input in JS - user input with prompt() and alert()
• Type conversion in JS - Number(), String(), Boolean()
• Math in JS - Math.floor(), Math.random()
• Random number in JS - random number generation
• if statement - conditional logic
• Switches in JS - switch/case
• Ternary operator - short conditional expression
• Checked property - checkbox and radio state
• Logical operators - &&, ||, !
• Strict equality operators - === and !==
• Variable scope (作用阈) - global/local variables, var, let, const

Strings

• String methods in JS - toUpperCase(), trim(), etc.
• String slicing in JS - substring(), slice()
• Method chaining - chaining several methods in one line

Loops

• While loop
• For loop
• Example: Number guess game example (猜数字游戏案例)

Arrays and Functional Methods

• Arrays
• Spread operator
• rest parameters
• forEach()
• map()
• filter()
• reduce()
• Sort()
• Example: Random password generator (随机密码生成器)

Functions

• Functions declaration
• function expressions
• arrow functions
• callbacks
• Closure in JS
• setTimeout() setInterval()

Objects and Classes

• Object in JS
• “This” Keyword
• Constructor in JS
• Class in JS
• static keyword
• extends keyword
• super keyword
• setter
• Destructuring
• Nested objects
• Arrays of Objects
• Date objects

Examples:

• Shuffle an array
• Digital Clock Program
• Stopwatch Program

Asynchronous Programming

• Asynchronous code
• Callback Hell
• Promise in JS
• Async&Await
• Error handling in JS

DOM Manipulation and Events

• DOM Navigation in JS
• Add & Change HTML
• Mouse Events in JS
• Key Events
• NodeList
• ClassList
• Event Bubbling and Delegation
• DOM Animation & CSS Transition

Example: Calculator Program

Data Fetching and Networking

• JSON in JS
• Fetch data from API
• Fetch Headers and POST Request
• Promise.all and Promise.race
• Async Error Handling Patterns

Storage

• LocalStorage and SessionStorage

Modules

• ES6 Modules

Related Maps

• Home
• Front web development
• React
• TypeScript
• UID 07 - Course Map
• JavaScript Review Checklist