3.1 – JavaScript : Premiers pas

🏆 Compétence cible

C3 – Développer une interface utilisateur web dynamique (40h – Niveau 1)
L’apprenant doit être capable de créer des interfaces web interactives en manipulant les bases du langage JavaScript, depuis l’écriture d’instructions simples jusqu’à la gestion d’événements et la modification du DOM.

🧩 Micro-compétence

3.1 – JavaScript : Premiers pas (20h)
Découvrir la syntaxe de JavaScript, les variables, les conditions, les boucles, et apprendre à interagir avec la page web (DOM et événements).

📝 Description de l’autoformation

Cette autoformation introduit les fondements du langage JavaScript. L’apprenant y découvrira les notions de variables, de fonctions, de structures conditionnelles et de boucles. L’accent est mis sur la manipulation du DOM et la gestion d’événements, pour créer des interfaces web interactives dès les premiers exercices.

UA 3.1.1 – Écrire des instructions simples en JavaScript

  1. 🎯 Objectif global

    • Comprendre la syntaxe de base de JavaScript, utiliser des variables, des types de données et des opérateurs.

  2. 📚 Liste des chapitres

    • Chapitre 1 : Variables, types de données, opérateurs (2h).
    • Chapitre 2 : Fonctions simples (3h).

  3. 📄 Livrable attendu

    • Créer un script JS qui effectue des calculs simples (somme, soustraction) et affiche le résultat dans la console.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Écrire et exécuter des instructions JS simples.
    • Niveau 2 : Utiliser des variables et des fonctions pour structurer le code.
    • Niveau 3 : Réaliser un script clair et commenté, avec plusieurs opérations.

UA 3.1.2 – Contrôler le déroulement du code

  1. 🎯 Objectif global

    • Savoir utiliser les conditions et les boucles pour contrôler la logique d’un programme.

  2. 📚 Liste des chapitres

    • Chapitre 3 : Conditions & logique booléenne (2h).
    • Chapitre 4 : Boucles (for, while, break) (3h).

  3. 📄 Livrable attendu

    • Écrire un script JS qui teste différentes conditions (âge, nombre) et affiche des messages personnalisés, tout en utilisant des boucles pour itérer sur une série de données.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Utiliser if, else, switch.
    • Niveau 2 : Mettre en place des boucles simples avec conditions.
    • Niveau 3 : Combiner boucles et conditions pour un scénario complet.

UA 3.1.3 – Manipuler le DOM

  1. 🎯 Objectif global

    • Apprendre à sélectionner, modifier et gérer des éléments HTML via le DOM.

  2. 📚 Liste des chapitres

    • Chapitre 5 : Sélecteurs DOM (getElementById, querySelector) (2h).
    • Chapitre 6 : Modifier texte, attributs, classes (3h).

  3. 📄 Livrable attendu

    • Créer un script qui modifie dynamiquement le contenu d’une page (changer un titre, ajouter une image) en fonction des actions de l’utilisateur.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Sélectionner et afficher un élément du DOM.
    • Niveau 2 : Modifier du contenu et des attributs.
    • Niveau 3 : Mettre en place des modifications complexes (ex. ajout de balises).

UA 3.1.4 – Réagir aux actions utilisateur

  1. 🎯 Objectif global

    • Savoir gérer les événements utilisateurs (clic, saisie) pour rendre la page interactive.

  2. 📚 Liste des chapitres

    • Chapitre 7 : Gestion des événements (click, input, submit) (2h).
    • Chapitre 8 : Interaction avec l’utilisateur (3h).

  3. 📄 Livrable attendu

    • Créer un formulaire qui affiche des messages ou des alertes en fonction des actions (exemple : message de bienvenue après un clic).

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Créer un écouteur d’événement simple.
    • Niveau 2 : Réagir dynamiquement aux actions (modification du DOM).
    • Niveau 3 : Concevoir une interaction complète (formulaire, validation).