Guide JavaScript

Projets principaux

• Tableau

  Objectif : Manipuler des tableaux en JavaScript à travers plusieurs exercices pratiques.
  
  Exercices proposés :

  • Création et affichage d’un tableau : Générer dynamiquement un tableau HTML à partir d’un tableau JavaScript, affiché dans la page (#array).
  • Manipulation de collections : Utiliser différentes méthodes (boucles, forEach, map, etc.) pour parcourir, filtrer et afficher des collections de données (#collection, #divCollection, #divCollectionFor).
  • Correction guidée : Proposer une solution détaillée et commentée pour chaque exercice, permettant de comparer son code avec une correction type.
  • Astuce interactive : Un système de tooltip affiche des explications ou extraits de code au survol de certains éléments pour mieux comprendre la logique.
  Compétences travaillées :
  • Création, parcours et affichage de tableaux en JavaScript
  • Utilisation des méthodes d’itération (for, forEach, map, etc.)
  • Manipulation du DOM pour générer dynamiquement du contenu HTML
  • Compréhension des bonnes pratiques de structuration de code

• Jquery

  Objectif : Découvrir et pratiquer la bibliothèque jQuery à travers des exercices interactifs.
  
  Exercices proposés :

  • Introduction à jQuery : Comprendre les bases de jQuery, la sélection et la manipulation d’éléments du DOM, et la syntaxe simplifiée.
    Lire l’introduction
  • Utilisation avancée : Mise en place d’interactivité, gestion des événements, effets visuels et animations.
    Voir les exemples d’utilisation
  • Pratique : Manipuler des listes, des tableaux et des formulaires avec jQuery pour rendre les pages dynamiques.
  • Bonus : Affichage de notifications (toasts) ou de fenêtres modales pour présenter des extraits de documentation ou d’exemples de code.
  Compétences travaillées :
  • Comprendre la syntaxe et les sélecteurs jQuery
  • Ajouter des effets et des animations
  • Gérer les événements utilisateur
  • Afficher dynamiquement des contenus (modals, toasts) à partir de fichiers Markdown

• Ajax

  Objectif : Comprendre et pratiquer la technologie AJAX pour réaliser des requêtes asynchrones en JavaScript.
  
  Ressources et exercices :

  • Introduction à AJAX : Présentation du principe d’AJAX, de son intérêt et de ses usages dans le développement web moderne.
    Lire l’introduction
  • Utilisation d’AJAX : Mise en œuvre concrète d’AJAX avec JavaScript : exemples de requêtes, gestion des réponses, et affichage dynamique des données.
    Voir un exemple d’utilisation
  • Pratique : Exercices pour manipuler les requêtes AJAX, afficher des résultats sans recharger la page, et interagir avec des API.
  Compétences travaillées :
  • Comprendre le fonctionnement d’AJAX et son intérêt
  • Réaliser des requêtes asynchrones avec XMLHttpRequest et fetch
  • Mettre à jour le DOM dynamiquement selon les réponses serveur
  • Gérer les erreurs et optimiser l’expérience utilisateur

• Node.js

  Objectif : Découvrir Node.js, l’environnement d’exécution JavaScript côté serveur, à travers des ressources interactives.
  
  Ressources et exercices :

  • Introduction à Node.js : Présentation de Node.js, ses avantages et ses usages pour le développement backend.
    Lire l’introduction
  • Utilisation de Node.js : Exemples pratiques : création de serveurs web, gestion de fichiers, communication réseau.
    Voir un exemple d’utilisation
  • Pratique : Exercices pour manipuler les modules Node.js, créer des API simples et automatiser des tâches côté serveur.
  Compétences travaillées :
  • Comprendre le fonctionnement de Node.js et son intérêt
  • Créer un serveur web avec Node.js
  • Lire et écrire des fichiers côté serveur
  • Communiquer avec des clients via HTTP

• TP_E-SHOP-FRONT

  Objectif : Projet fil rouge : création d’une interface e-commerce complète en JavaScript.
  
  Fonctionnalités principales :

  • Gestion des articles : Ajout, modification, suppression et affichage dynamique des articles du catalogue.
  • Formulaires interactifs : Utilisation de formulaires pour la saisie et la mise à jour des informations produits, avec validation côté client.
  • Navigation dynamique : Navigation entre les différentes pages (accueil, ajout, détail, modification) sans rechargement complet grâce à JavaScript et AJAX.
  • Expérience utilisateur : Utilisation de Bootstrap et d’effets visuels pour une interface moderne et responsive.
  Compétences travaillées :
  • Manipulation avancée du DOM et des événements JavaScript
  • Utilisation de fetch/AJAX pour la communication asynchrone
  • Structuration d’un projet web multi-pages
  • Intégration de Bootstrap pour le design responsive