Notions Clés JavaScript :

Types de Variables en JavaScript

Types Primitifs :

Number : Entiers ou décimaux (42, 3.14).
String (string) : Texte entre "" ou ("Bonjour").
Boolean (true/false).
null : Valeur intentionnellement vide.
undefined : Variable non initialisée.
Symbol : Unique et immuable (ES6).

Objets :

Object : { clé: "valeur" }.
Array : ["él1", "él2"].
Function : function() {}.

Déclaration de Variables

Mots-clés :

let : Variable modifiable (portée bloc).
const : Constante non réaffectable (portée bloc).
var : Ancienne déclaration (portée fonction).

Exemples :


    let age = 30;
    const TAUX = 1.2;
    var nom = "Alice";

Affectation et Opérateurs

Opérateurs d'affectation :

+=, -=, *=, /=.


    let x = 5;
    x += 3; // x = 8

Transtypage :

Explicite : Number("123"), String(123), Boolean(0) (→ false).
Implicite : "5" + 2 → "52".

Comparaisons et Booléens

Opérateurs de comparaison :

Stricts : === (valeur et type), !==.
Non stricts : ==, != (éviter).

Opérateurs logiques :

&& (ET), || (OU), ! (NON).

Valeurs "falsy" : false, 0, "", null, undefined, NaN.

Structures Conditionnelles

Syntaxe :


    if (heure < 18) {
      console.log("Bonjour !");
    } else {
      console.log("Bonsoir !");
    }

Condition ternaire :


    const message = (heure < 18) ? "Bonjour" : "Bonsoir";

Boucles

Boucle for :


    for (let i = 0; i < 5; i++) {
      console.log(i); // 0 à 4
    }

Boucle while :


    let i = 0;
    while (i < 5) {
      console.log(i);
      i++;
    }

Fonctions

Déclaration :


    function calculerSomme(a, b) {
      return a + b;
    }

Flèche (ES6) :


    const calculerSomme = (a, b) => a + b;

Portée des Variables

let/const : Visibles uniquement dans leur bloc.
var : Visible dans toute la fonction.


    if (true) {
      let x = 1;
      var y = 2;
    }
    console.log(y); // 2
    console.log(x); // Erreur

Manipulation du DOM

Sélection d'éléments :


    const btn = document.getElementById("monBouton");
    const paragraphes = document.querySelectorAll(".texte");

Modifier les styles :


    const content = document.querySelector(".contenu");
    content.style.maxHeight = "0"; // Masquer
    content.style.color = "blue";

maxHeight : Utile pour les animations de dépliage.


      // Basculer la visibilité avec animation
      btn.addEventListener("click", () => {
        content.style.maxHeight = content.style.maxHeight ? "0" : "500px";
      });

Gestion des Événements

Événements courants : click, mouseover, keydown, submit.
Ajouter un écouteur :


    btn.addEventListener("click", () => {
      console.log("Bouton cliqué !");
    });

Tableaux (Arrays)

Méthodes utiles :

map() : Crée un nouveau tableau transformé.


      const nombresCarres = [1, 2, 3].map(n => n * n); // [1, 4, 9]

filter() : Filtre les éléments.


      const pairs = [1, 2, 3].filter(n => n % 2 === 0); // [2]

Méthodes Intégrées

Math :


    Math.random(); // Nombre aléatoire entre 0 et 1
    Math.floor(3.7); // 3

Chaînes de caractères :


    const texte = "Bonjour";
    console.log(texte.toUpperCase()); // "BONJOUR"

Astuce pour les animations :

Utilisez maxHeight avec des transitions CSS pour des effets fluides :


  .contenu {
    transition: max-height 0.3s ease-out;
    overflow: hidden;
  }

1. Notion de fonction JavaScript

Définition : Une fonction est un bloc de code réutilisable qui effectue une tâche précise. Elle est définie avec le mot-clé function, un nom, des paramètres (facultatifs) et un corps de fonction.

Phases d’une fonction :

Déclaration : On crée la fonction avec function nomFonction().
Appel : La fonction est exécutée lorsque son nom est appelé avec ses éventuels arguments.
Retour : La fonction peut renvoyer une valeur avec le mot-clé return.

Étude des fonctions : Elles permettent de mieux organiser le code, d’éviter la duplication et d’améliorer la lisibilité.

2. Introduction aux événements

Qu’est-ce qu’un événement ? : Un événement est une action déclenchée par l’utilisateur ou le navigateur (clic, soumission d’un formulaire, chargement de la page).

Avantages :

Permet d’interagir avec l’utilisateur.
Permet de créer des interfaces dynamiques.
Utilisé pour la gestion des interactions utilisateur, telles que le clic sur un bouton ou la modification d’un champ.

Outils de gestion des événements : Les événements sont gérés à l’aide d’attributs HTML comme onclick, ou via JavaScript avec addEventListener.

3. Les conditions (if/else)

Rôle : Les conditions permettent d’exécuter des blocs de code spécifiques selon le résultat d’une expression booléenne (vrai ou faux).

Syntaxe :


  if (condition) {
      // bloc de code exécuté si condition est vraie
  } else {
      // bloc de code exécuté si condition est fausse
  }

Utilité : Permet de contrôler le flux d’exécution en fonction des situations rencontrées dans le programme.

4. Boucles (for, while)

Types de boucles :

Boucle for : Répète un bloc de code un nombre défini de fois.
Boucle while : Répète un bloc de code tant qu’une condition est vraie.

Syntaxe de la boucle for :


  for (let i = 0; i < 10; i++) {
      console.log(i);
  }

Initialisation : let i = 0;
Condition : i < 10;
Incrémentation : i++

Utilité : Les boucles sont utilisées pour répéter des instructions, parcourir des listes ou effectuer des calculs répétitifs.

5. Fonction Math.random()

Définition : Génère un nombre décimal aléatoire entre 0 et 1.

Utilité : Générer de l’aléatoire pour des jeux, des simulations ou des tirages au sort.

Exemple :


  let nombreAleatoire = Math.floor(Math.random() * 101);

6. Validation d’entrées utilisateur

Définition : La validation d’entrées permet de vérifier que les données fournies par l’utilisateur respectent certains critères.

Événement onChange : Se déclenche lorsqu’une entrée est modifiée.

Exemple de validation de numéro de téléphone :


  function validerNumero(numero) {
      return /^0[67]\d{8}$/.test(numero);
  }

7. Manipulation du DOM (Document Object Model)

Définition : Le DOM est la représentation en mémoire de la structure d’un document HTML. Il permet d’accéder et de modifier dynamiquement le contenu d’une page.

Exemple d’accès au DOM :


  document.getElementById("monElement").textContent = "Nouveau message";

Utilité : Manipuler les éléments HTML pour interagir avec l’utilisateur ou changer le contenu en fonction des événements.

8. Projet : Calcul dynamique de surfaces

Objectif : Créer une page web qui calcule la surface de différentes figures géométriques (carré, rectangle, cercle) sans recharger la page.

Fonctionnement :

Utilisation de formulaires pour entrer les dimensions.
Calcul de la surface dans une fonction JavaScript appelée lors de la modification des entrées.

9. Projet : Quiz interactif

Objectif : Créer un quiz avec au moins trois questions (Vrai/Faux, QCM, réponse ouverte).

Fonctionnement :

Chaque question est liée à un événement.
Le score est affiché une fois que toutes les réponses ont été fournies.

10. Projet : Frise chronologique interactive

Objectif : Créer une frise interactive où l’utilisateur peut cliquer sur des dates pour afficher des événements importants de l’histoire de l’informatique.

Fonctionnement :

Utilisation d’événements onclick pour afficher du texte supplémentaire sur la page.

11. Projet : Calcul dynamique de la moyenne du BAC

Objectif : Créer une page permettant de calculer la moyenne d’un élève en entrant toutes ses notes du BAC.

Fonctionnement :

Les notes sont saisies dans des formulaires.
Une fonction JavaScript effectue le calcul dynamique et affiche la moyenne sans rechargement de la page.

Revenir au HUB

Notions Clés JavaScript :

Types de Variables en JavaScript

Déclaration de Variables

Affectation et Opérateurs

Comparaisons et Booléens

Structures Conditionnelles

Boucles

Fonctions

Portée des Variables

Manipulation du DOM

Gestion des Événements

Tableaux (Arrays)

Méthodes Intégrées

1. Notion de fonction JavaScript

2. Introduction aux événements

3. Les conditions (if/else)

4. Boucles (for, while)

5. Fonction Math.random()

6. Validation d’entrées utilisateur

7. Manipulation du DOM (Document Object Model)

8. Projet : Calcul dynamique de surfaces

9. Projet : Quiz interactif

10. Projet : Frise chronologique interactive

11. Projet : Calcul dynamique de la moyenne du BAC