This learning plan focuses on the core concept of

20%, so as to be 80%of the actual project . Master these basic knowledge first, and then expand through projects.

Core learning stage (two weeks)

Daily study arrangement:

morning:

Learning concept (1-2 hours).
• Afternoon: Practice (1-2 hours).
• In the evening: Looking back, debugging and reviewing (30 minutes).
• First Week: Basic Knowledge First day: Basic Concept

Topic:

Variables (let, const), data type (string, number, Boolean value), operator (, ===,!). Learning resources:

mdn javascript basic tutorial, freecodecamp JS syntax courses.

• Exercise: Writing code calculation BMI or degrees Celsius converted into Hua Shi.
• The next day: control flow
• Topic: Conditional sentences (IF/Else, Switch), cycle (for, about).
Learning resources:

JavaScript.info conditional sentence and cycle.

Practice: Solve the problem with the FIZZBUZZ, printed prime number.

• On the third day: Function
• Topic: Function, parameters, return values, arrow functions, scope of action.
Learning resources:
• MDN function guide. Practice:
Create a function to reverse the string or calculate the step.

The fourth day: DOM operation

• Topic: Select element (querySelector), modify the content, and style (classList).
Learning Resources:
• Freecodecamp Dom operating tutorial. Practice:
Create a button to change the page background color.
• Day 5: Incident

Topic: Event monitor (click, submit), event object, preventdeFault ().

Learning resources:
• JavaScript.info incident. Practice:
Create a button to switch to dark/light color mode.
• Sixth Day: Array
• Topic:
Array method (Push, POP, MAP, Filter, FOREACH).

Learning resources: MDN array guidelines.

Practice:

Filter the number of puppets from the array or sort the name in the order of letters.
• Day 7: Review and small projects
• Review:
Rewill the previous practice without reference to the code.
• Small items: Simple counter application (increasing/decreasing button).

Second Week: Advanced Concept Day 8: Object

• Topic: Object literals, methods, this keyword, destructuring assignment.
• Learning resources: JavaScript.info Object Basics.
• Exercise: Create a user object that contains methods for updating profile data.

Day 9: Asynchronous JavaScript

• Topic: Callback function, Promise, async/await, fetch().
• Learning resources: MDN Asynchronous JavaScript.
• Exercise: Get data from the JSONPlaceholder API and display the title.

Day 10: Error Handling

• Theme: try/catch, throw errors, use console for debugging.
• Learning Resources: JavaScript.info Error Handling.
• Exercise: Add error handling to your API fetch code.

Day 11: ES6 Features

• Theme: Template literals, expansion/remainder operators, modules (import/export).
• Learning resources: ES6 for Everyone (free course).
• Exercise: Refactor old code using ES6 syntax.

Day 12: Local Storage

• Topic: localStorage, JSON.stringify(), JSON.parse().
• Learning Resources: MDN Web Storage API.
• Exercise: Saving and retrieving user preferences (for example, dark mode).

Day 13: Closures and callback functions

• Topics: Lexical scope, closure examples, higher-order functions.
• Learning resources: MDN closures.
• Exercise: Create a function factory (for example, a multiplication function).

Day 14: Final review and project preparation

• Review: Build a small application that combines DOM, events and localStorage.
• Preparation: Set up a project folder containing HTML/CSS/JS files.

Five projects to consolidate and expand knowledge

Build these projects in order, with increasing difficulty and independence. Use Docs and Google to solve problems you encounter.

1. The list of matters (junior)

• Description: Add, delete and mark the task is completed.
Core concept:
• DOM operation (dynamic rendering task).
  • Event processing (submitting, clicking event).
  • Array method (filtering deletion task).
  • Local storage (persistent task when reloading).
2. Weather application (intermediate)
Description:
From API (for example, OpenWeatherMap) obtains real -time weather data.
• Core concept:
• fetch () and async/await. Use JSON data.
  • The error handling of API failure.
  • Based on user input (city search) dynamic update DOM.
  3. Test game (medium and senior)
Description:

Timing test, including multiple choice questions and score boards.

Core concept:
• Object -oriented design (test and problem category).
• SetInterval is used for timer. Status management (tracking current problems, scores).
  • Event commission for the answer button.
  4. Budget tracker (advanced)
  Description:
Use Chart (Chart.js) to track income/expenditure.

Core concept:

• Complex state (transaction, balance, category). and third -party library integration (Chart.js).
• Form verification and error feedback. Local storage for data persistence.
  5. Full Stack Bookstore (Advanced)
  • Description:
  Use Node.js/Express back -end and native JS front -end CRUD applications.
Core concept:
REST API design (get, post, delete).
• Advanced asynchronous operation (front-back-end communication). modular code (separate API service module).
• deployment of basic knowledge (DigitalOn, Netlify).
  The Secret of Success
  Daily coding:
  • Even if only 30 minutes, muscle memory can be strengthened.
  • Dormity problem:
  Use the pseudo -code to gradually plan the project.
Hug debugging:
Learn the use of console.log () and Chrome Devtools.
Bold reconstruction:

Improve the readability and efficiency of the code after the code is running.
1. This plan balances the solution of structural learning and creative problems. Starting from a young age, iterated often, and celebrating progress! ?

The above is the detailed content of Comprehensive JavaScript Study Plan (Rule). For more information, please follow other related articles on the PHP Chinese website!