Guide complet de MySQL et PHP

MySQL - Aide-mémoire

MySQL est un système de gestion de base de données (SGBD) gratuit et largement utilisé, supporté par la plupart des systèmes d'exploitation. Il est un composant clé des piles LAMP et WAMP pour le développement web.

• Sensibilité à la casse des commandes MySQL : dépend du système d'exploitation. Il est préférable d'y faire attention.

Gestion des Bases de Données

• Créer une base de données :

  CREATE DATABASE nom_bd;

  La version sécurisée pour éviter les erreurs si la BD existe déjà est :

  CREATE DATABASE IF NOT EXISTS nom_bd;

• Supprimer une base de données :

  DROP DATABASE nom_bd;

  La version sécurisée pour éviter les erreurs si la BD n'existe pas est :

  DROP DATABASE IF EXISTS nom_bd;

• Afficher les bases de données existantes :

  SHOW databases;

• Définir la base de données par défaut :

  USE nom_bd;

  Toutes les opérations suivantes s'appliqueront à cette BD.

Gestion des Tables

• Créer une table :

  CREATE TABLE nom_table (liste_attributs);

  Les attributs sont définis par nom_attribut type_attribut options.

  Exemple :

  CREATE TABLE `etudiant` (
      `mat` int(8) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
      `nom` varchar(30),
      `prenom` varchar(30),
      `DateNais` date,
      `LieuNais` varchar(20),
      `adresse` varchar (50),
      `AnneeEtude` int(1) DEFAULT '1' NOT NULL
  );

Types de Données Fréquemment Utilisés

Les tables ci-dessous résument les principaux types numériques et chaînes de caractères/dates.

Options courantes d'Attributs

PRIMARY KEY (attribut1, attribut2)

• Supprimer une table :

  DROP TABLE nom_table;

  La version sécurisée :

  DROP TABLE IF EXISTS nom_table;

• Lister les tables :

  SHOW TABLES;

• Voir les colonnes d'une table :

  SHOW COLUMNS FROM nom_table;

Modification de la Structure d'une Table (ALTER TABLE)

• Ajouter un attribut :

  ALTER TABLE nom_table ADD nom_nouveau_attribut type options;

  Pour la première position : ADD ... FIRST; Après un attribut spécifique : ADD ... AFTER nom_attribut;

  Exemple : ALTER TABLE etudiant ADD nationalite DECIMAL(3,0) AFTER prenom;

• Supprimer un attribut :

  ALTER TABLE nom_table DROP nom_attribut;

• Supprimer une clé primaire :

  ALTER TABLE nom_table DROP PRIMARY KEY;

• Ajouter une clé primaire :

  ALTER TABLE nom_table ADD PRIMARY KEY (attribut);

• Modifier un attribut (sans renommer) :

  ALTER TABLE nom_table MODIFY nom_attribut type options;

• Modifier un attribut (en renommant) :

  ALTER TABLE nom_table CHANGE ancien_nom_attribut nouveau_nom_attribut type options;

Manipulation des Données (DML)

• Insérer des données :

  INSERT INTO nom_table (att_1, ..., att_n) VALUES ("val_1", ..., "val_n");

  Si toutes les colonnes sont spécifiées dans l'ordre :

  INSERT INTO nom_table VALUES ("val_1", ..., "val_n");

  Insertion multiple :

  INSERT INTO nom_table VALUES (liste_valeurs_1), (liste_valeurs_2);

• Mettre à jour des données :

  UPDATE relation SET attribut="valeur" [WHERE condition] [LIMIT a];

  Exemple : UPDATE etudiant SET AnetEtude = AnetEtude + 1 WHERE AnetEtude < "3";

• Supprimer des données :

  DELETE FROM relation [WHERE condition] [LIMIT a];

  Exemple : DELETE FROM etudiant WHERE nom="Ait Slimane" AND prénom="Ali";

  Pour vider une table : DELETE FROM nom_table;

• Optimiser une table : (réorganise les données physiques, supprime les index obsolètes)

  OPTIMIZE TABLE Relation;

Interrogation des Données (SELECT)

• Syntaxe générale :

  SELECT [DISTINCT] attributs [ INTO OUTFILE file ] FROM relation
  [WHERE condition]
  [ GROUP BY attributs [ ASC | DESC] ]
  [HAVING condition ]
  [ ORDER BY attributs ]
  [LIMIT [a, b];

• Conditions (WHERE / HAVING) :

  • Opérateurs : =, !=, <>, >, <, >=, <=

  • LIKE : recherche de sous-chaînes avec % (n'importe quelle sous-chaîne) ou _ (un seul caractère).

    Exemple : email LIKE '%usthb.dz'

  • BETWEEN : définit un intervalle.

    Exemple : date_naiss BETWEEN '1999-01-01' AND '2001-12-31'

  • AND / OR : opérateurs logiques.

  • IN / NOT IN : pour l'appartenance à un ensemble.

    Exemple : niv IN ('L1', 'L2', 'L3')

  • IS NULL / IS NOT NULL : vérifie les valeurs nulles.

Fonctions d'Agrégat et Utilitaires

Opérations Ensemblistes

• UNION : combine les résultats de deux requêtes.

  Query1 UNION Query2;

• Intersection : réalisée avec IN.

  SELECT nom_entreprise FROM importateur WHERE nom_entreprise IN (SELECT nom_entreprise FROM exportateur);

• MINUS : soustrait les résultats.

  Query1 MINUS Query2;

API MySQLi (PHP)

Extensions recommandées : MySQLi (procédural ou orienté objet) ou PDO (orienté objet).

Connexion

• Procédural :

  $connexion = mysqli_connect($host, $login, $password, [$bdd]);

• Orienté Objet :

  $connexion = new mysqli($host, $login, $password, [$bdd]);

Exécution de Requêtes

• Procédural :

  $r = mysqli_query($connexion, $q);</code></pre></li><li><p style="text-align: left;"><strong>Orienté Objet :</strong></p><pre><code>$resultat = connexion-&gt;query(req);

Récupération des Résultats

• mysqli_fetch_row : tableau indexé.

• mysqli_fetch_assoc : tableau associatif.

• mysqli_fetch_array : tableau indexé et associatif.

• Nombre de résultats (procédural) : mysqli_num_rows($resultat)</mark>.</p></li><li><p style="text-align: left;">Nombre de résultats (objet) : <mark>$resultat->num_rows.

Gestion des Erreurs :

La fonction die() arrête le script en cas d'erreur.

Libération des Ressources

• Libérer les résultats :

  • Procédural : mysqli_free_result($resultat);</code></p></li><li><p style="text-align: left;">Orienté Objet : <code>$resultat->close();

• Fermer la connexion :

  • Procédural : mysqli_close($connexion);</code></p></li><li><p style="text-align: left;">Orienté Objet : <code>$connexion->close();

Exemple de code PHP (procédural) :

$host = 'localhost'; $login = 'admin5'; $passwd = 'Top Secret!'; $bdd = 'ma_base';
$c = mysqli_connect($host, $login, $passwd, $bdd);
if (!$c) { die("failure: " . mysqli_connect_error()); }

$q = "SELECT nom, prenom FROM Etudiant WHERE Anet='L3'";
c, $q);</code></p><p style="text-align: left;"><code>if (mysqli_num_rows($r) > 0) {
while (r)) {
echo 'Nom: ' . row['prenom'] . '
';
}
mysqli_free_result(r);<br>} else { echo 'No results'; }<br>mysqli_close(c);

PHP (Hypertext Preprocessor)

PHP est un langage de script côté serveur, gratuit et open source, utilisé pour le développement web dynamique. Il génère du code HTML envoyé au client, gardant les scripts PHP invisibles pour l'utilisateur.

Caractéristiques Clés

• Similaire au C, syntaxe classique et pratique.

• S'intègre directement dans une page HTML.

• Interprété côté serveur par le "moteur PHP".

• Pas de déclaration de type requise, conversion automatique.

• Supporte de nombreux SGBD (MySQL, Oracle, etc.).

• Fonctionnalités riches : manipulation de données, génération dynamique de pages, gestion des cookies, interaction avec les protocoles (IMAP, HTTP, etc.), manipulation d'images, fichiers PDF.

Syntaxe PHP de Base

• Balises PHP : Le code PHP est inséré entre <?php ... ?>. (Autres formats moins reconnus).

• Terminaison des instructions : Chaque instruction doit se terminer par un point-virgule (;).

• Affichage : Utiliser echo (ou printf()) pour envoyer du contenu au client.


  Exemple : echo "Chaîne de caractères";

• Exécution : Tout bloc entre <?php ... ?> est exécuté et interprété, puis remplacé par le HTML généré avant d'être envoyé au client.

• Commentaires :

  • Ligne simple : // Mon commentaire sur une ligne

  • Multi-lignes : /* Mon commentaire sur plusieurs lignes */

Variables et Types de Données

• Déclaration : Une variable commence toujours par le symbole $</code>.<br> </p><p style="text-align: left;"><em>Exemple :</em> <span data-latex="x, " data-type="inline-math"></span><code>nom</code></p></li><li><p style="text-align: left;"><mark>Sensibilité à la casse :</mark> PHP est <mark>sensible à la casse</mark> pour les noms de variables (<code>$a est différent de undefinedvar, "type"); ou (type) $var;

  Exemple : x, "int"); // $x devient 3</code></p></li><li><p style="text-align: left;"><mark>Superglobales (Variables Prédéfinies) :</mark> Commencent par <code>$_. Ex: $_SERVER["SERVER_NAME"]</code>.</p></li><li><p style="text-align: left;"><mark>Récupération des valeurs de formulaires :</mark> </p><ul><li><p style="text-align: left;"><code>$_POST : pour la méthode POST.

• $_GET</code> : pour la méthode GET.</p></li><li><p style="text-align: left;">Les clés sont les noms des champs du formulaire.<br> </p><p style="text-align: left;"><em>Exemple :</em> <code>$_POST["nom_champ"]

• Si le nom du champ se termine par [], PHP stocke les valeurs dans un tableau.

Opérateurs

• Arithmétiques : +, -, *, /, % (modulo).

• Chaînes de caractères : . (concaténation).


  Exemple : undefinedch)

  Longueur de la chaîne.

  strcmp(ch2)

  Compare deux chaînes.

  i}

  Accès au caractère à l'index $i.

  str_replace(ch2, $ch3)

  Remplace ch2 dans $ch3.

  explode(ch, $limit)</mark></p></td><td colspan="1" rowspan="1"><p style="text-align: left;">Divise <span data-latex="ch en tableau selon le séparateur " data-type="inline-math"></span>sep.</p></td></tr><tr><td colspan="1" rowspan="1"><p style="text-align: left;"><mark>addslashes($ch)

  Ajoute des antislashs avant les caractères spéciaux.

  stripslashes($ch)

  Supprime les antislashs.

  Expressions Régulières (Regex)

  • Délimiteurs : Une regex doit être délimitée par un caractère (ex: /ma_regex/, #ma_regex#, ~ma_regex~).

  • Classes de caractères : [:alpha:], [:digit:], [:alnum:], [:space:] etc.

  • Quantificateurs :

    • ? : 0 ou 1 occurrence.

    • * : 0 ou plusieurs occurrences.

    • + : Au moins une occurrence.

    • {n} : Exactement n occurrences.

    • {n,m} : Entre n et m.

    • {n,} : Au moins n.

  • Fonctions clés :

    • preg_match(string, flags, undefinedtab[clé] = valeur;

    • $tab[] = valeur;</code> (ajoute à l'indice disponible suivant)</p></li><li><p style="text-align: left;"><code>$tab = array(clé1 => val1, clé2 => val2);

    • $tab = array(val1, val2);</code> (indices numériques automatiques)</p></li></ul></li><li><p style="text-align: left;"><mark>Multi-dimensionnels :</mark> Possibles.<br> </p><p style="text-align: left;"><em>Exemple :</em> <code>$tab['name'][1] = "Mohamed";

    Fonctions de Manipulation de Tableaux

    Fonction	Description
    sort($tab)</mark></p></td><td colspan="1" rowspan="1"><p style="text-align: left;">Tri par valeurs (ascendant).</p></td></tr><tr><td colspan="1" rowspan="1"><p style="text-align: left;"><mark>rsort($tab)	Tri par valeurs (descendant).
    ksort($tab)</mark></p></td><td colspan="1" rowspan="1"><p style="text-align: left;">Tri par clés (ascendant).</p></td></tr><tr><td colspan="1" rowspan="1"><p style="text-align: left;"><mark>count($tab) ou sizeof($tab)</mark></p></td><td colspan="1" rowspan="1"><p style="text-align: left;">Retourne le nombre d'éléments.</p></td></tr><tr><td colspan="1" rowspan="1"><p style="text-align: left;"><mark>unset($tab[clé])	Supprime un élément.

    CSS (Cascading Style Sheets)

    CSS est le langage utilisé pour définir le style et la présentation visuelle des pages HTML (couleur, police, espacement, mise en page).

    • Rôle : HTML = structure (le squelette), CSS = design (les vêtements et le maquillage).

    Trois Manières d'Appliquer le CSS

    1. Styles en ligne (Inline Styles) : CSS directement dans l'attribut style d'une balise HTML.


       Exemple : <h1 style="color: red;">Hello World!</h1>

       Avantage : rapide pour des tests. Inconvénient : non recommandé pour de grands projets, difficile à maintenir.


    2. Feuille de style interne (Internal Stylesheet) : CSS dans la balise <style> placée dans la section <head> du document HTML.
Avantage : meilleure organisation que l'inline, styles regroupés.


    3. Feuille de style externe (External Stylesheet) : CSS dans un fichier séparé (.css) lié à la page HTML via la balise <link> dans le <head>.


       Exemple : <link href="style.css" rel="stylesheet"/>

       Avantage : Méthode la plus professionnelle, réutilisable sur plusieurs pages, plus propre, facile à maintenir.


    Règles CSS

    Une règle CSS se compose d'un sélecteur, d'une propriété et d'une valeur.

    sélecteur {
        propriété: valeur;
    }

    Exemple : p { color: blue; font-size: 16px; }

    Sélecteurs CSS Principaux

    • Sélecteur de type : Sélectionne tous les éléments d'un certain type.


      Exemple : p { color: green; } (tous les paragraphes)

    • Sélecteur de classe : Sélectionne les éléments avec l'attribut class spécifié. Précédé d'un point (.).


      Exemple : HTML: <p class="important">, CSS: .important { color: red; }

    • Sélecteur d'ID : Sélectionne un élément unique avec l'attribut id. Précédé d'un dièse (#).


      Exemple : HTML: <h1 id="title">, CSS: #title { text-align: center; }

    • Sélecteur de groupe : Applique des styles à plusieurs sélecteurs séparés par des virgules (,).


      Exemple : h1, h2, h3 { color: navy; }

    • Sélecteur universel : Applique à tous les éléments de la page. Symbole astérisque (*).


      Exemple : * { margin:0; padding:0; } (utile pour réinitialiser les styles par défaut).

    • Sélecteur de descendant : Sélectionne les éléments qui sont le descendant d'un autre.


      Exemple : div p { color: gray; } (paragraphes DANS un div)

    Propriétés CSS Clés

    Propriétés de Texte

    Affectent le contenu textuel.

    Propriété	Effet	Utilisation typique
    color	Couleur du texte.	p { color: red; } (rend le texte rouge)
    font-size	Taille du texte.	h1 { font-size: 32px; } (rend le titre grand)
    font-family	Type de police.	p { font-family: Arial, sans-serif; }
    font-weight	Graisse de la police (ex: bold).	strong { font-weight: bold; }
    text-align	Alignement du texte (left, center, right, justify).	h2 { text-align: center; }
    text-decoration	Ajoute des lignes (underline, line-through, none).	a { text-decoration: none; } (supprime le soulignement des liens)
    line-height	Espacement entre les lignes.	p { line-height: 1.5; }

    Utilisation : pour tout élément textuel ou bloc de texte.


    Modèle de Boîte (Box Model)

    Chaque élément HTML est une boîte avec contenu, padding, border, margin.

    Propriété	Effet	Utilisation typique
    margin	Espace extérieur de l'élément.	p { margin: 20px; } (20px tout autour du paragraphe)
    padding	Espace intérieur de l'élément (entre contenu et bordure).	div { padding: 15px; } (15px à l'intérieur du div)
    border	Bordure autour de l'élément.	div { border: 2px solid black; }
    width	Largeur de l'élément.	div { width: 300px; }
    height	Hauteur de l'élément.	div { height: 150px; }
    box-sizing	Contrôle si padding/border affecte la largeur/hauteur. border-box est souvent préférée.	div { box-sizing: border-box; }

    Utilisation : pour espacer, dimensionner et délimiter visuellement les éléments.


    Propriétés de Fond (Background)

    Contrôlent la zone derrière l'élément.

    Propriété	Effet	Utilisation typique
    background-color	Définit la couleur d'arrière-plan.	body { background-color: lightblue; }
    background-image	Ajoute une image d'arrière-plan.	div { background-image: url('bg.jpg'); }
    background-repeat	Contrôle la répétition de l'image.	background-repeat: no-repeat;
    background-size	Redimensionne l'image d'arrière-plan.	background-size: cover;
    background-position	Positionne l'image d'arrière-plan.	background-position: center;

    Utilisation : pour l'esthétique et l'habillage visuel.


    Propriétés d'Affichage et de Positionnement

    1. Display (Affichage)

    Détermine comment un élément se comporte dans la mise en page.

    Valeur	Effet	Notes
    block	Prend toute la largeur disponible, commence sur une nouvelle ligne.	(Par défaut pour div, p, h1)
    inline	Prend juste la largeur de son contenu, ne force pas de nouvelle ligne.	(Par défaut pour span, a)
    inline-block	Se comporte comme inline mais accepte largeur et hauteur.	(Utile pour boutons, éléments de menu)
    none	L'élément disparaît complètement de la page (non visible, n'occupe pas d'espace).
    flex	Rend le conteneur un flexbox pour des mises en page faciles (alignement, espacement).
    grid	Rend le conteneur une grille pour des mises en page en lignes/colonnes.

    Effet : Change radicalement le comportement de l'élément dans le flux d'agencement.


    2. Position

    Définit comment un élément est positionné par rapport à son contexte.

    Valeur	Effet	Notes
    static	Valeur par défaut. Positionné normalement dans le flux. Les propriétés top/left/right/bottom sont ignorées.
    relative	Positionné par rapport à sa position originale. Ne retire pas l'élément du flux normal, d'autres éléments ne bougent pas.
    absolute	Positionné par rapport à son ancêtre positionné le plus proche (non static). Retiré du flux normal; peut chevaucher d'autres éléments.
    fixed	Positionné par rapport à la fenêtre de visualisation (viewport). Reste visible lors du défilement.
    sticky	Se comporte comme relative jusqu'à un certain point de défilement, puis comme fixed.

    top, left, right, bottom : Ces propriétés ne fonctionnent que si position est relative, absolute, fixed ou sticky.

    3. Float

    Valeur	Effet
    left	L'élément flotte à gauche ; le contenu l'entoure à droite.
    right	L'élément flotte à droite ; le contenu l'entoure à gauche.
    none	(Par défaut) L'élément ne flotte pas.

    Utilisation : pour les images où le texte s'enroule autour, ou pour les barres latérales.


    4. Overflow

    Valeur	Effet
    visible	Le contenu dépasse du conteneur (par défaut).
    hidden	Le contenu supplémentaire est coupé.
    scroll	Ajoute des barres de défilement.
    auto	Ajoute des barres de défilement si nécessaire seulement.

    Utilisation : empêche le contenu de déborder d'un conteneur.


    Unités et Couleurs

    • Couleurs : noms (red, blue), hexadécimal (#FF0000), RGB (rgb(255,0,0)), RGBA (rgba(255,0,0,0.5)).

    • Unités de longueur :

      • px (pixels) : unité absolue.

      • em (relative à la taille de police de l'élément parent).

      • % (pourcentage par rapport au parent).

      • rem (relative à la taille de police de l'élément racine <html>).

    JavaScript (JS)

    JavaScript est un langage de script côté client qui rend les pages web interactives et dynamiques. Il s'exécute dans le navigateur de l'utilisateur.

    Rôle et Utilisations

    • Validation des formulaires.

    • Modification du contenu de la page sans recharger (manipulation du DOM).

    • Gestion des actions utilisateur (clics, clavier, survol).

    • Animations, jeux, effets interactifs.

    • Communication avec les serveurs via AJAX ou API.

    Le DOM (Document Object Model)

    • Définition : Interface de programmation qui représente une page HTML comme une arborescence structurée d'objets (nœuds).
Le DOM est la façon dont JavaScript "voit" et "parle" à votre page HTML.


    • Types de Nœuds :

      • Document : Le nœud racine, représente toute la page.

      • Element : Représente les balises HTML (<p>, <div>).

      • Text : Le texte à l'intérieur des éléments.

      • Attribute : Les attributs des éléments (id="main").

    • Accès et Manipulation : JavaScript utilise l'objet document (objet global) pour interagir avec le DOM.

    Méthodes Courantes de Sélection DOM

    Méthode	Description	Exemple
    getElementById()	Sélectionne un élément par son ID (unique).	document.getElementById("myId")
    getElementsByClassName()	Sélectionne tous les éléments avec une classe donnée.	document.getElementsByClassName("box")
    getElementsByTagName()	Sélectionne tous les éléments d'une balise donnée.	document.getElementsByTagName("p")
    querySelector()	Sélectionne le premier élément correspondant à un sélecteur CSS.	document.querySelector(".container")
    querySelectorAll()	Sélectionne tous les éléments correspondant à un sélecteur CSS.	document.querySelectorAll("p.highlight")

    Modification Dynamique d'Éléments

    • Modifier le texte/HTML :

      • textContent : change seulement le texte.

      • innerHTML : remplace le contenu et peut inclure des balises HTML.


        Exemple : p.textContent = "Nouveau texte"; p.innerHTML = "<strong>Gras !</strong>";

    • Modifier le style CSS : via la propriété .style en utilisant le format camelCase pour les noms de propriétés CSS.


      Exemple : box.style.backgroundColor = "red";

    • Modifier les attributs :

      Exemple : link.setAttribute("href", "URL"); ou link.href = "URL";

    • Ajouter/Supprimer des éléments :

      • document.createElement("balise") : crée un nouvel élément.

      • parent.appendChild(enfant) : ajoute un enfant.

      • element.remove() : supprime l'élément.

    Navigation DOM (Relations entre Nœuds)

    Propriété	Signification
    parentNode	Le parent d'un élément.
    childNodes	Une liste de tous les enfants.
    firstElementChild / lastElementChild	Premier/dernier élément enfant.
    nextElementSibling / previousElementSibling	Éléments frères suivants/précédents.

    Événements et Gestionnaires d'Événements

    • Événement : Toute action ou occurrence dans le navigateur (clic, frappe au clavier, défilement). Ce sont des "signaux" pour JavaScript.

    • Gestionnaire d'événement (Event Handler) : Une fonction qui s'exécute en réponse à un événement.


      Syntaxe générale : "Quand cet événement se produit sur cet élément, exécute ce code."

    Types d'Événements Courants

    Type	Nom de l'Événement	Déclenché Quand...
    Souris	click, dblclick, mouseover, mouseout, mousedown, mouseup	Clic, double-clic, survol, sortie de survol, bouton pressé, bouton relâché
    Clavier	keydown, keyup	Touche pressée, touche relâchée
    Formulaire	submit, change, focus, blur	Formulaire soumis, valeur d'entrée changée, entrée gagne le focus, entrée perd le focus
    Fenêtre / Document	load, resize, scroll, unload	Page chargée, fenêtre redimensionnée, défilement, page sur le point de se fermer

    Comment Attacher des Événements

    1. Inline (onclick="alert()") : Déconseillé car mélange HTML et JS, ne permet qu'une seule fonction.

    2. Propriété de l'événement (element.onclick = function()) : Meilleur que l'inline, mais ne permet qu'une seule fonction.

    3. addEventListener() (Méthode recommandée) : Permet d'attacher plusieurs gestionnaires d'événements à un élément pour le même événement, et offre plus de contrôle.


       Exemple : bouton.addEventListener("click", maFonction);

    L'Objet Événement (Event Object)

    • Lorsqu'un événement se produit, JS crée un objet événement (souvent nommé e ou event).

    • Il contient des informations sur l'événement : quelle touche a été pressée, position de la souris, cible de l'événement.

    • e.preventDefault() : Arrête le comportement par défaut du navigateur (ex: empêcher le rechargement d'une page lors de la soumission d'un formulaire, empêcher le lien de naviguer).

    • e.stopPropagation() : Arrête la propagation de l'événement dans le DOM (bulles/captures).

    Propagation d'Événements (Event Propagation)

    • Un événement voyage à travers l'arbre DOM en 3 phases :


      1. Phase de capture : De la racine (window) vers l'élément cible.

      2. Phase cible : L'événement atteint l'élément ciblé.

      3. Phase de bouillonnement (bubbling) : De l'élément cible vers la racine (window). (C'est le comportement par défaut).

    • addEventListener() a un troisième paramètre (true pour capture, false/omis pour bubbling).

    Bonnes Pratiques d'Événements

    • Séparer HTML et JavaScript.

    • Utiliser addEventListener().

    • Utiliser preventDefault() si souhaité.

    • Utiliser l'objet événement pour un contrôle précis.

    • Supprimer les anciens écouteurs d'événements avec removeEventListener() pour éviter les fuites de mémoire.

    Objets Intégrés Clés de JavaScript

    • window : Représente la fenêtre ou l'onglet du navigateur. C'est l'objet global.


      • Méthodes : alert(), confirm(), prompt(), open(), close().

    • document : Représente le contenu HTML affiché (partie du DOM).

    • navigator : Contient des informations sur le navigateur (appName, language, platform, onLine).

    • screen : Détails sur l'écran de l'utilisateur (width, height).

    • location : Gère et fournit des informations sur l'URL actuelle (href, hostname, pathname, protocol).

    • history : Contrôle l'historique de navigation du navigateur (back(), forward()).

    • Math : Fournit des constantes et fonctions mathématiques (Math.round(), Math.floor(), Math.ceil(), Math.random(), Math.pow(), Math.sqrt()).

    • Date : Pour travailler avec les dates et heures.


      • new Date() : date et heure actuelles.

      • Méthodes pour obtenir l'année, le mois, le jour, etc.

    Fonctions de Synchronisation (Timers)

    • setTimeout(fonction, délai) : Exécute une fonction une seule fois après un délai (€ en millisecondes).
Peut être annulé avec clearTimeout(id).


    • setInterval(fonction, intervalle) : Exécute une fonction répétitivement à un intervalle spécifié.
Peut être annulé avec clearInterval(id).