Plan d'étude JavaScript complet (règle)

Ce plan d'apprentissage se concentre sur la maîtrise de 20 % des concepts de base pour être compétent dans 80 % des projets réels. Maîtrisez d’abord ces bases, puis développez-vous à travers des projets.

Étape d'apprentissage de base (deux semaines)

Horaire d'étude quotidien :

• Matin : Apprentissage des concepts (1-2 heures).
• Après-midi : Pratique (1-2 heures).
• Soirée : Révision, débogage et révision (30 minutes).

Semaine 1 : Les bases

Jour 1 : Concepts de base

• Sujet : Variables (let, const), types de données (chaîne, nombre, booléen), opérateurs ( , ===, !).
• Ressources d'apprentissage :Tutoriel de base JavaScript MDN, cours de syntaxe JS de freeCodeCamp.
• Exercice : Écrivez du code pour calculer l'IMC ou convertir les degrés Celsius en Fahrenheit.

Deuxième jour : flux de contrôle

• Sujet : Déclarations conditionnelles (if/else, switch), boucles (for, while).
• Ressources d'apprentissage : JavaScript.info Déclarations conditionnelles et boucles.
• Exercice : Résolvez le problème FizzBuzz et imprimez les nombres premiers.

Jour 3 : Fonction

• Sujet : Déclaration de fonction, paramètres, valeur de retour, fonction flèche, portée.
• Ressources d'apprentissage : Guide des fonctions MDN.
• Exercice : Créez une fonction pour inverser une chaîne ou calculer la factorielle.

Jour 4 : Manipulation du DOM

• Thème : Sélectionnez les éléments (querySelector), modifiez le contenu (textContent, innerHTML), le style (classList).
• Ressources d'apprentissage :Tutoriel gratuit d'opération CodeCamp DOM.
• Exercice : Créez un bouton pour changer la couleur de fond de la page.

Jour 5 : Événement

• Sujet : Écouteur d'événement (cliquez, soumettez), objet d'événement, PreventDefault().
• Ressources d'apprentissage : Premiers pas avec les événements JavaScript.info.
• Exercice : Créez un bouton pour basculer en mode sombre/clair.

Jour 6 : Tableau

• Sujet : Méthodes de tableau (push, pop, map, filter, forEach).
• Ressources d'apprentissage : Guide MDN Array.
• Exercice : Filtrez les nombres pairs ou triez les noms par ordre alphabétique à partir d'un tableau.

Jour 7 : Bilan et petits projets

• Révision : Réécrivez l'exercice précédent sans vous référer au code.
• Petit projet :Application de compteur simple (boutons d'incrémentation/décrémentation).

Semaine 2 : Concepts avancés

Jour 8 : Objet

• Sujet : Littéraux d'objet, méthodes, ce mot-clé, affectation de déstructuration.
• Ressources d'apprentissage : Bases des objets JavaScript.info.
• Exercice : Créez un objet utilisateur contenant des méthodes de mise à jour des données de profil.

Jour 9 : JavaScript asynchrone

• Sujet : Fonction de rappel, Promise, async/await, fetch().
• Ressources d'apprentissage : JavaScript asynchrone MDN.
• Exercice : Récupérez les données de l'API JSONPlaceholder et affichez le titre.

Jour 10 : Gestion des erreurs

• Thème : try/catch, générer des erreurs, utiliser la console pour le débogage.
• Ressources d'apprentissage : Gestion des erreurs JavaScript.info.
• Exercice : Ajoutez la gestion des erreurs à votre code de récupération API.

Jour 11 : Fonctionnalités ES6

• Thème : Littéraux de modèles, opérateurs d'expansion/reste, modules (import/export).
• Ressources d'apprentissage : ES6 pour tous (cours gratuit).
• Exercice : Refactorisez l'ancien code en utilisant la syntaxe ES6.

Jour 12 : Stockage local

• Sujet : localStorage, JSON.stringify(), JSON.parse().
• Ressources de formation : API de stockage Web MDN.
• Exercice : Sauvegarde et récupération des préférences utilisateur (par exemple, mode sombre).

Jour 13 : Fermetures et fonctions de rappel

• Sujets : Portée lexicale, exemples de fermeture, fonctions d'ordre supérieur.
• Ressources d'apprentissage : Fermetures MDN.
• Exercice : Créer une fabrique de fonctions (par exemple, une fonction de multiplication).

Jour 14 : Bilan final et préparation du projet

• Révision : Créez une petite application qui combine DOM, événements et localStorage.
• Préparation : Configurez un dossier de projet contenant des fichiers HTML/CSS/JS.

Cinq projets pour consolider et élargir les connaissances

Construire ces projets dans l'ordre, avec une difficulté et une indépendance croissantes. Utilisez Docs et Google pour résoudre les problèmes que vous rencontrez.

1. La liste des questions (junior)

• Description: Ajouter, supprimer et marquer la tâche terminée.
Concept de base:
• Opération DOM (tâche de rendu dynamique).
  • Traitement des événements (soumission, événement de clic).
  • Méthode du tableau (tâche de délétion de filtrage).
  • Stockage local (tâche persistante lors du rechargement).
2. Application météorologique (intermédiaire)

Description:

de l'API (par exemple, OpenWeathermap) obtient des données météorologiques réelles.
• Concept de base:
• fetch () et async / attend. Utilisez des données JSON.
  • La gestion des erreurs de l'échec de l'API.
  • en fonction de la saisie de l'utilisateur (Recherche de la ville) Dynamic Update Dom.
  3. Jeu de test (moyen et senior)

Description:

Test de synchronisation, y compris les questions à choix multiples et les cartes de score.

Concept de base:
• Conception orientée objet (Test and Problem Catégorie).
• SetInterval est utilisé pour la minuterie. Gestion du statut (suivi des problèmes actuels, scores).
  • Commission des événements pour le bouton de réponse.
  4. Budget Tracker (Advanced)
  Description:
Utilisez le graphique (graptain.js) pour suivre les revenus / dépenses.

Concept de base:

• État complexe (transaction, solde, catégorie). et intégration de la bibliothèque de troisième partie (chart.js).
• Vérification du formulaire et rétroaction des erreurs. Stockage local pour la persistance des données.
  5. Librairie de pile complète (Advanced)
  • Description:
  Utilisez Node.js / Express Back -end et les applications CRUD avant JS Native.
Concept de base:

REST API Design (obtenir, publier, supprimer).

• Fonctionnement asynchrone avancé (communication frontale-end). Code modulaire (module de service API séparé).
• Déploiement des connaissances de base (Digitalon, Netlify).
  Le secret du succès
  Codage quotidien:
  • Même si seulement 30 minutes, la mémoire musculaire peut être renforcée.
  • Problème de dortoir:
  Utilisez le code pseudo pour planifier progressivement le projet.
Hug Debogging:

Apprenez l'utilisation de Console.log () et Chrome Devtools.

Reconstruction en gras:

Améliorer la lisibilité et l'efficacité du code après l'exécution du code.
1. Ce plan équilibre la solution de l'apprentissage structurel et des problèmes créatifs. Partant de son jeune âge, itéré souvent et célébrant les progrès! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!