• Créé en 1995 par Brendan Eich (Netscape) pour rendre les pages web dynamique en modifiant directement la structure, le contenu et la présentation de celles-ci
• Langage de programmation interprété (lu, traduit et exécuté ligne par ligne en temps réel)
• Standardisé par les normes ECMASCript (European Computer Manufacturers Association) depuis 1997
• Faiblement typé
• Le typage est dynamique au runtime (exécution)
• Case sensitive (sensible aux majuscules et miniscules) : maVariable est différent de MaVariable
• A ne pas confondre avec Java qui est un autre langage de programmation complètement différent
• Langage polyvalent à la fois
  • Pour un usage côté client (Navigateur)
  • Et serveur avec les environnements de développement NodeJS, Deno et Bun
• Exemples d'utilisation de JavaScript
  • Ajouter des interactions dans les pages
  • Réagir aux actions des utilisateurs
  • Communiquer avec des serveurs distants
  • Manipuler les éléments du document HTML (balises et propriétés CSS)
  • Gérer les formulaires de contact (validation)
  • Manipuler la fenêtre (window)
  • Utiliser la géolocation, le cache, le stockage côté client, dessiner, etc.
  • Exploiter le matériel (caméra, connexion réseau, etc.) d'un smartphone pour transformer les pages web en application mobile moderne
  • Créer des serveurs, des applications mobiles, des logiciels à travers son écosytème très riche
  • Gestion de l'onglet (dimension, ouverture, fermeture, etc.)
  • Etc.

• Exécuté et interprété par le navigateur web
• à disposition des API HTML5 (fonctionnalités pour faire communiquer les applications)
  • Géolocalisation
  • Storage (stockage côté navigateur)
  • Canvas (dessin)
  • Drag & Drop (glisser, déposer)
  • Offline (gestion du hors ligne)
  • Web Workers et cache(communication et optimisation des ressources)
  • Etc.

• Une page web est un document constitué du HTML (la structure), CSS (esthétisme) et JavaScript (interactions)
  • Le navigateur analyse et interprète le HTML et le CSS par l'intermédiaire de son moteur de rendu (Blink, Gecko, Webkit) pour afficher la page
  • Un moteur nommé V8 chez Chrome/Edge et SpiderMonkey chez Firefox compile et exécute le JS
• Le navigateur embarque la DevTools (outils de débogage ou de développement) à ouvrir à partir du clic droit + inspecter ou sur Windows/Linux avec la touche F12 ou CTRL + Shift + C et sur MacOs avec CTRL + CMD + C
  • Inspecteur pour visualiser la structure HTML de la page web
  • Console pour voir les messages provenant du code, globalement dans l'objectif de deboguer en affichant des messages d'information ou d'erreurs lors de l'exécution du script
  • Débugger pour mettre des points d'arrêt pour mettre pause et observer le comportement de l'application pas-à-pas
  • Réseaux pour explorer toutes les requêtes HTTP effectuées par le navigateur et la page web
  • Stockage pour voir les informations stockées par le navigateur (cookie, storage, indexDB, etc)
  • Etc.

• Répose sur le protocole HTTP (HyperText Transfer Protocol), langage de communication entre 2 machines sur le web
• Le HTTP définie les règles de communication entre 2 machines à travers le réseau local ou Internet
• Le client (couramment le navigateur) demande une ressource à travers une requête HTTP au serveur (en locale ou distante)
• Le serveur traite la requête et renvoie la réponse correspondante
• Pour simplifier une requête ou une réponse HTTP est constitué d'une en-tête (headers) contenant des meta-données sur les versions, les autorisations, le code HTTP (200, 201, 404, 500, etc.)etc.., d'un corps contenant les données à transmettre
• Une ressource est un document HTML, CSS, une image, un PDF, un script, du JSON, du texte, etc.

1. Un éditeur de code pour la rédaction du code, par exemple VSCode
2. Un navigateur web (Chrome, Edge, Firefox, etc.) pour l'interprétation du code et l'affichage
3. L'environnement de développement Node.js qui embarque NPM (Node Package Manager) pour les tâches nécessitant un serveur web

La balise <script> permet d'insérer le JavaScript dans un document HTML

Le script Javascript peut être interne entre les balises script directement dans le document HTML ou externe délocalisé dans un fichier externe au document HTML

• Pour le script interne, le code JS se trouve entre les balises <script></script>
• Pour le script externe, l'attribut src de celle-ci permet de préciser le chemin (relatif à partir du HTML) pour charger le fichier JS

Dans le HTML, Où placer les scripts JavaScript ?

1. Entre les balises <head></head> pour une exécution immédiate après son chargement
2. Entre les balises <head></head> avec l'attribut defer pour une exécution différée après le chargement intégral document HTML
3. Entre les balises <body></body> pour une exécution immédiate après son chargement
4. Juste avant la fermeture de la balise </body> pour une exécution immédiate après le chargement intégral du corps du HTML

Il y a plusieurs choix de placement car il y a plusieurs usages du JS, par exemple :

• Pour la manipulation du DOM, la 2 et la 4 sont plus sûres et évitent d'avoir des erreurs car les éléments HTML ne sont pas encore chargés
• Pour le traçage (analyse des comportements et d'identication du client) ou les scripts externes ne manipulant pas le DOM, toutes sont candidates mais l'option 1 est la plus adaptée

• JS est sensible à la casse (distinction entre les majuscules et minuscules)
• Une instruction est l'ordre donné au programme pour être exécutée sur le processeur de la machine hôte
• En programmation, généralement, une instruction se termine par un point-virgule sauf en JS, le point-virgule à la fin n'est pas obligatoire
• Les blocs sont délimités par des accolades {} pour l'utilisation des conditions, boucles et fonctions
• Le commentaire est une instruction qui n'est pas évaluée (exécutée), sert généralement de documentation dans le code
  • // commentaire sur une ligne
  • /**
* commentaire
* sur
* plusieurs
* lignes
*/

La portée (scope) définit l'accessibilité d'une variable en dehors du bloc où elle a été déclarée.

Il y a 3 scopes :

1. Global scope : le bloc de plus haut niveau
2. Function scope : le bloc qui définit une fonction
3. Block scope : blocs de condition, boucles

console, alert() et prompt() sont des propriétés ou méthodes de l'objet document qui représente le document HTML

Copier

console.info('OK') // OK
console.error('KO') // KO
console.dir(document) // details de l'objet document avec ses propriétés et méthodes
alert('Clique sur OK pour continuer') // fenêtre d'avertissement
const firstname = prompt('Quel est ton prénom ?') // fenêtre de dialogue avec un champ de saisi
console.log(`Enchanté ${firstname}`)
const isLoveJS = confirm('Aimes-tu le JS ?') // fenêtre de dialogue avec 2 choix (ok ou annuler)
console.log(`Tu as répondu : ${isLoveJS}`) // Tu as répondu : true pour ok, false pour annuler
              

Pour manipuler les valeurs et évaluer le expressions

Plusieurs types d'opérateurs

1. Arithmétiques (Mathématiques) : +, -, *, /, % (modulo),
2. D'assignation : =, +=, -=, etc.
3. De comparaison :
   • ==, égalité large sans prendre en compte le type
   • ===, égalité stricte, valeur et type
   • !=, différence de valeur
   • !==, différence de type
   • <, strictement inférieur à
   • >, strictement supérieur à
   • <= , inférieur ou égal
   • >=, supérieur ou égal
4. Logiques, pour combiner plusieurs opérateurs de comparaison
   • && ou AND : ET
   • || ou OR : OU
   • ! : NON
5. Ternaire : condition ? valeurSiVrai : valeurSiFaux.
   Notation courte pour une solution binaire à 2 issues possibles
6. Concaténation, pour mettre les informations (valeurs et textes) bout à bout :
   • + : ancienne syntaxte
     const firstname='Alice', lastname='Bob', fullname=firstname + ' ' + 'lastname';
   • ` (touche ALT GR + 7) et ${} : nouvelle syntaxe
     const firstname='Alice', lastname='Bob', fullname=`${firstname} ${lastname}';

La structure de contrôle conditionnelle (appelée couramment condition) permet à partir d'une condition évaluée à vrai d'exécuter qu'une seule branche de la structure parmi plusieurs possibles

Format d'une structure : if/[elseif]... /[else], avec elseif et else facultatives.

Dans une structure, il peut y avoir plusieurs elseif mais par contre qu'un seul else

• L'ordre des instructions a une importance
• La première instruction qui vérifie la condition est exécutée
• Les structures de contrôle peuvent s'imbriquer les unes dans les autres (idéalement à éviter ou à limiter lorsque c'est possible)

Autre format d'une structure de contrôle : switch(condition), case (criteria): break... default: break

• La même logique de la structure if, elseif, else
• else correspond à default
• plus lisible dans les cas ou il y a une vérification sur le contenu d'une chaîne de caractère
• Plus performant que if/[elseif]... /[else] lorsqu'il y a un réel besoin de gain de performance pour des applications très complexes et gourmandes en ressources

Structure de contrôle itérative (appelée couramment boucle)

Parcourir des objets en executant un bloc de code tant qu'une certaine condition est vérifiée

• break permet de quitter la structure, sans ce dernier, le programme va continuer à évaluer le prochain case
• continue à utiliser lorsque l'on souhaite ne pas prendre en compte l'itération en cours en fonction d'une condition (passer à l'itération suivante sans exécuter l'intégralité des instructions dans la boucle)

Pour les tableaux, JS proposent d'autres méthodes propres tels que .map(), .forEach()

Il existe 2 dérivées de la boucle for spécifiques à JS

1. for...in
   • Adaptée pour parcourir les noms des propriétés d'un objet
   • for (index in tab) { tab[index] };
2. for...of
   • Adaptée pour parcourir les valeurs des propriétés d'un objet ou un tableau
   • for (index of tab) { index }

• bloc de code réutilisable, un "programme dans le programme"
• On utilise une fonction pour regrouper des instructions et l'appeler sur demande.
  Chaque fois qu'on a besoin de ces instructions, il suffira d'appeler la fonction au lieu de répéter toutes les instructions
• Pour accomplir ce tâche, le cycle de vie d'une fonction comprend 2 phases :
  1. Une phase unique dans laquelle la fonction est déclarée. On définit à ce stade toutes les instructions qui doivent être groupées pour obtenir le résultat souhaité.
  2. Une phase qui peut être répétée une ou plusieurs fois dans laquelle la fonction est appelée pour être exécutée.

En JS, les fonctions peuvent être

1. Déclarée de manière classique avec le mot-clé function
   function hello(firstname) { return `Hello ${firstname}`;}
2. Déclarée avec une expression fléchée
   hello(firstname) => `Hello ${firstname}`
3. Notation fléchée et stockée dans une variable
   const hi = hello (firstname) => `Hello ${firstname}`;

Définitions

• Constructeur : méthode permettant d'initialiser un objet (instance d'une classe), appelée lorsque l'on utilise l'opérateur new sur une classe
• Méthodes : les actions que peuvent effectuer un objet ou une classe (méthode statique cad propre à une classe et indépendamment des objets)
• Propriétés : caractéristiques (les données) d'un objet
• Prototype : pour simplifier c'est la classe elle même
• Objets littéraux : notation sous forme d'accolade {} d'une objet à la place de la syntaxe Class {}
• Objets sous formes de tableaux associatifs : une autre notation avec un tableau qui combine une clé littérale à une propriété ou une méthode
• Syntaxe de base des classes plus proche et fidèle aux autres langages objets tels que Java/C++
  • Constructeur de l'objet avec la méthode constructor()
  • Méthodes de classe et méthodes statiques (static)
  • getters(accesseurs)/setters(mutateurs) définis par les mots-clés get et set pour récupérer et définir la valeur d'une propriété
  • Héritage prototypal : extends sur la classe et appel obligatoire au constructeur parent via super()
  • Propriétés privées, manipulable uniquement par l'objet lui-même au sein de sa structure, en dehors de l'objet, il faut utiliser les /li>

Copier Exécuter

class JavaScript {
  // Propriété (prop.) privée (encapsulation)
  #creator = 'Brendan Eich';
  // Propriété statique (partagée au niveau de la classe)
  static createdAt = 1995;

  constructor(version, isDynamicallyTyped = true) {
    this.version = version; // Propriété publique
    this.isDynamicallyTyped = isDynamicallyTyped;
  }

  info() {  // Méthode d'instance
    return `JavaScript (${this.version}) - Créé en ${JavaScript.createdAt} par ${this.#creator}.`;
  }

  static compareVersion(v1, v2) {
    return `Comparaison entre la version ${v1} et la version ${v2}.`;
  }

  get creator() {
    return this.#creator;
  }
}

class TypeScript extends JavaScript {
  static createdAtTypeScript = 2012;   // Propriété statique propre à la classe fille

  constructor(version, versionCompiler) {
    super(version, false); // Appel du constructeur parent de la classe JavaScript
    this.versionCompiler = versionCompiler; // Propriété spécifique à TypeScript
  }

  info() { // Surcharge (override) de la méthode d'instance
    const basicInfo = super.info();
    return `${basicInfo}\n TypeScript y ajoute le typage statique (compilateur v${this.versionCompiler}).`;
  }

  compiler() {   // Méthode propre à la classe fille
    return `Transpilation du code TypeScript (v${this.versionCompiler}) vers JavaScript (${this.version})...`;
  }
}

// 1. Instanciation de la classe mère
const es6 = new JavaScript('ES6');
console.log('•', es6.info()); 

// 2. Accès à la méthode et propriété statiques
console.log('•', 'Created : ', JavaScript.createdAt);
console.log('•', JavaScript.compareVersion('ES5', 'ES6'));

// 3. Instanciation de la classe fille
const ts5 = new TypeScript('ES2022', '5.0');
console.log('•', ts5.info()); 
console.log('•', 'TS typage dynamique : ', ts5.isDynamicallyTyped);
console.log('•', ts5.compiler());
              

Les autres objets

• Number : les nombres
• Boolean : vrai ou faux
• Undefined : absence involontaire de valeur (aucune valeur n'a encore été assignée à une variable)
• NULL : absence volontaire de valeur

• Le navigateur expose une structure hiérarchique d'objets appelée BOM (Browser Object Model)
• L'objet global window représente la fenêtre du navigateur ou l'onglet en cours d'exécution
• Tout ce qui est global en JavaScript s'attache à cet objet window

• window : objet racine
• document : répresente le DOM (Document Object Model) c'est-à-dire le document HTML.
  Il permet de sélectionner, modifier et créer des éléments HTML de la page active
• History : historique de navigation conservé dans le navigateur
  • .length : nombre de pages visitées pour la fenêtre active
  • .back() : charge la dernière page visitée et présente dans l'historique
  • .forward() : charge la page suivante visitée et présente dans l'historique
  • .go() : charge la page liée à un index dans l'historique
• location : gestion l'URL de la page courante.
  • location.href : récupère ou modifie l'URL complète (provoque une redirection)
  • Les autres propriétés : .protocol, .hostname, .host, .port, .pathname, .hash
  • location.reload() : recharge la page
  • location.replace() : remplace l'URL de la page actuelle parune autre
• screen : métadonnées sur l'écran de l'appareil de l'utilisateur
  • screen.width, screen.height donnent les dimensions de l'écran
  • Les autres propriétés :
    • availHeight, availWidth : hauteur/largeur utile de l'écran
    • height, width : hauteur/largeur totale d'affichage de l'écran
    • colorDepth : nombre de couleurs que l'écran peut restituer
    • pixelDepth : retourne la résolution de l'écran en bits par pixel
• navigator : informations sur le navigateur et l'appareil utilisés
  • navigator.language : retourne la langue définie dans le navigateur
  • navigator.geolocation : retourne un objet utilisé pour localiser l'utilisateur
  • navigator.product : retourne le nom du moteur utilisé par le navigateur
  • navigator.cookieEnabled : détermine si les cookies sont autorisés ou non
  • navigator.appName : retourne le nom du navigateur
  • navigator.appCodeName : retourne le nom de code du navigateur
  • navigator.appVersion : retourne la version du navigateur utilisée
  • navigator.online : détermine si le navigateur est en ligne ou pas
  • navigator.userAgent : retourne l'en-tête du fichier user-agent envoyé par le navigateur au serveur
• document.forms : un objet qui contient tous les formulaires de la page
  Le formulaire permet de manipuler les champs de saisie et de gérer la soumission des données à travers des propriétés et des méthodes

• C'est le parent de tous les objets rattachées à la fenêtre du navigateur
• Il est implicite, c'est-à-dire, il n'est pas utile de le nommer pour accéder aux objets placés en dessous
• Propriétés
  • .status, .defaultStatus : message de la barre d'état
  • .innerHeight, .innerWidth : hauteur/largeur utilisable d'une fenêtre
  • .outerHeight, .outerWidth : hauteur/largeur extérieure d'une fenêtre
  • .pageXoffset, .pageYoffset : position horizontale/verticale de la fenêtre
  • .name : nom donné à la fenêtre
  • .parent : fenêtre parente
  • .self, .window : fenêtre courante
• Les méthodes
  • alert(), confirm(), prompt() : boîtes de dialogue
  • back(), forward() : navigation dans l'historique
  • find() : recherche de texte dans la page active (retourne true si le texte est présent sinon false)
  • focus() : active une fenêtre
  • moveTo() : déplace la fenêtre active
  • open(), close() : ouvre/ferme une fenêtre
  • print() : imprime la page active
  • resizeBy(), resizeTo() : modifie la taille de la fenêtre
  • setInterval() : effectue un traitement à intervalle régulier
  • setTimeOut() :déclenche une minuterie

Les timers sont des exécutions asynchrones c'est-à-dire différés dans le temps en fonction du délai qui a été défini en millisecondes (ms)

• setTimeout() : exécute une fonction après un délai déterminé (en ms)
• clearTimeout() : stoppe la minuterie lancée par setTimeout()
• setInterval() : appelle une fonction de manière répétée, avec un certain délai fixé entre chaque appel (en ms)
• clearInterval() : stoppe la minuterie lancée par setInterval()

Copier Exécuter

let intervalID;
const colors = ['red', 'green', 'blue'];

function changeColor(colors) {
  return colors[Math.floor(Math.random() * colors.length)];
}

intervalID = setInterval(() => {
  const color = changeColor(colors)
  console.log('Couleur actuelle : ', color)
}, 1000);

const timeoutID = setTimeout(() => {
  clearInterval(intervalID)
  console.log('Fin !')
}, 10*1000);
              

Les autres langages de balisages dérivées du XML sont RSS, SVG, etc.

<?xml version="1.0" encoding="UTF-8"?>
<programmation>
  <langage id="1">
    <nom>HTML</nom>
    <auteur>Sir Tim Berners-Lee</auteur>
    <annee>1990</annee>
  </langage>
    <langage id="2">
    <nom>CSS</nom>
    <auteur>Håkon Wium Lie et Bert Bos</auteur>
    <annee>1994</annee>
  </langage>
  <langage id="3">
    <nom>JavaScript</nom>
    <auteur>Brendan Eich</auteur>
    <annee>1995</annee>
  </langage>
</programmation>
          

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple HTML5</title>
</head>
<body>
  <div>
    <ul>
      <li>HTML</li>
      <li>Sir Tim Berners-Lee</li>
      <li>1990</li>
    </ul>
    <ul>
      <li>CSS</li>
      <li>Håkon Wium Lie et Bert Bo</li>
      <li>1994</li>
    </ul>
    <ul>
      <li>JavaScript</li>
      <li>Brenden Eich</li>
      <li>1994</li>
    </ul>
  </div>
</body>
</html>
        

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://w3.org">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Exemple XHTML</title>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>Sir Tim Berners-Lee</li>
      <li>1990</li>
    </ul>
    <ul>
      <li>CSS</li>
      <li>Håkon Wium Lie et Bert Bo</li>
      <li>1994</li>
    </ul>
    <ul>
      <li>JavaScript</li>
      <li>Brenden Eich</li>
      <li>1994</li>
    </ul>
  </body>
</html>
            

• Le DOM est une API (interface de programmation pour faire communiquer ou interagir 2 applications) permettant de représenter et manipuler les éléments constituant une page Web
• A l'aide des méthodes offertes par l'objet document de JavaScript, une page web peut être modifiée
• Une représentation de la page web sous forme d'une structure arborescente d'objets en mémoire
• Le navigateur analyse le HTML pour construire l'arbre où chaque balise devient un noeud (node)

• Plusieurs méthodes permettent d'accéder à un ou plusieurs éléments du DOM à partir des attributs HTML id ou class, du nom de la balise HTML ou une combinaison de sélecteurs css
• Nous retiendrons dans le cadre de ce cours principalement les méthodes .querySelector() et querySelectorAll() qui permettent de tout sélectionner à partir des sélecteurs CSS.
• document.querySelector(sélecteur) : retourne le premier élément du document HTML qui correspond au sélecteur selector
• document.querySelectorAll(sélecteur) : retourne tous les éléments du document HTML qui correspond au sélecteur selector sous forme de tableau
• Les autres méthodes :
  • .getElementById(sélecteur) sélectionne un élément en fonction de son identifiant
  • .getElementsByName(sélecteur) sélectionne un ou plusieurs éléments en fonction d'un nom passé en argument
  • .getElementsByTagName(sélecteur) sélectionne un ou plusieurs éléments en fonction d'un nom de balise passé en argument
  • .getElementsByClassName(sélecteur) sélectionne un ou plusieurs éléments en fonction d'un nom de classe passé en argument

Dans les exemples suivantes, element et parent désignent un objet HTML récupéré à partir de document.querySelector() ou un équivalent

1. Créer
   • document.createElement("balise_HTML") : crée un nouvel élément en mémoire.
   • document.createTextNode() : crée un nouveau noeud de texte
2. insérer
   • parent.insertAdjacentHTML(position, element) : insère un nouveau noeud HTML dans l'élément element par rapport à la position spécifiée. Position prend les valeurs suivantes :
     • Beforebegin : avant l'élément lui-même ;
     • Afterbegin : juste à l'intérieur de l'élément, avant son premier enfant ;
     • Beforeend : juste à l'intérieur de l'élément, après son dernier enfant ;
     • Afterend : après l'élément lui-même.
   • element.insertBefore() Insère le noeud spécifié juste avant un élément de référence parmi les enfants du noeud courant
   • parent.appendChild() Ajoute un noeud au noeud parent spécifié
   • parent.appendChild(element) ou parent.append(element) : insère l'élément à la fin du conteneur.
   • element.replaceWith(nodeEl): remplace l'élément courant element par le noeud nodeEl.
3. Lire
   • element.textContent : recupère le contenu textuel de l'élément
   • element.getAttribute("nom") : lecture génériques des attributs
   • element.id, element.className ou element.dataset : accès direct aux propriétés courantes et aux attributs de données (data-*)
   • element.parentElement : renvoie le parent du noeud (textuel ou html) ou null
   • parent.firstElementChild() : renvoie le premier noeud enfant de type element ou null
   • parent.childNodes : renvoie une collection de noeuds enfants
   • parent.firstChild, parent.lastChild : renvoie le premier/dernier noeud enfant du noeud courant
   • element.nextSibling, parent.previousSibling : renvoie le noeud suivant/précédent immédiatement le noeud spécifié
   • element.nodeValue : renvoie ou définit la valeur du noeud courant
   • element.attributes : renvoie une collection des noeuds d'attribut du noeud spécifié
4. Modifier
   • element.textContent="nouveau contenu textuel": remplace le contenu textuel par le nouveau contenu après = de l'objet element
   • element.innerHTML="<h1>titre 1<h1>" : l'objet element est remplacé par l'élément <h1>
   • element.setAttribute("nom_attribut", "valeur") : création ou modification d'un attribut
5. Supprimer
   • element.removeChild() : retire et retourne le noeud enfant
   • element.remove() : supprime l'élément du DOM

• Les événements permettent de rendre les pages Web plus interactives
• Il exite plusieurs dizaines d'événement dont ceux associés à la souris (click, dbclick, mouseover, mouseout etc.), formulaire (focus, blur, change, submit), clavier (keydown, keyup, keypress etc).
• La méthode .addEventListener(événement, callback(e), propagation) permet de greffer un événement à un élément HTML
• La fonction callback() peut prendre un argument en paramètre nommé communément e ou event
  Cet argument est un objet qui contient des propriétés et méthodes correspondant à l'événement qui a été déclenché.
  Les événements de type click, mouse ou keyup n'auront pas les mêmes attributs.
• La fonction callback() est exécutée au moment où l'événement aura lieu
• L'attribut e.target.value permet d'obtenir la valeur de l'élément HTML sur lequel un événement a été greffé.

Copier

const btn = document.querySelector("button");
const input = document.querySelector("input");
if(btn) {
  btn.addEventListener("click", (event) => {
    console.log("Bouton cliqué à cet endroit : ", "x", event.clientX, "y", event.clientY);
  });
}

if(input) { 
  input.addEventListener('keypress', (event) => {
    console.log("Tu as tapé la lettre : ", event.key);
  })
}
              

Liste non exhaustive des événements pouvant être aux éléments HTML

• click : cliquer sur l'élément
• dblclick : double-cliquer sur l'élément
• mouseover : faire entrer le curseur sur l'élément
• mouseout : faire sortir le curseur de l'élément
• mousedown : maintenir le bouton gauche de la souris sur l'élément
• mouseup : relâcher le bouton gauche de la souris sur l'élément
• mousemove : déplacer le curseur sur l'élément
• keydown : maintenir une touche de clavier sur l'élément
• keyup : relâcher une touche de clavier sur l'élément
• keypress : taper une touche de clavier sur l'élément
• focus : cibler l'élément
• blur (l'inverse de focus) : annuler le ciblage de l'élément
• change : changer la valeur d'un élément

Plusieurs approches coexistent pour attacher des événements :

• Attributs HTML (obsolète) : <button onclick="maFonction()">, à éviter, ne permet pas de faire une séparation stricte entre la structure (HTML) du comportement (JS)
• Propriétés DOM (DOM Level 0) : element.onclick = maFonction;, limité à une seule fonction par événement et par élément, la réaffectation écrase la précédente
• Modèle moderne (DOM Level 2) : element.addEventListener(), autorise l'association de plusieurs écouteurs distincts sur un même événement et offre un contrôle fin sur le déroulement

Lorsqu'un événement se déclenche, le navigateur transmet automatiquement un objet Event en argument de la fonction de rappel (callback).
Cet objet fournit les propriétés et méthodes indispensables à la gestion de l'événement.

• event.target : l'élément précis qui a déclenché l'événement
• event.currentTarget : l'élément sur lequel l'écouteur est actuellement attaché
• event.preventDefault() : annule le comportement natif du navigateur (par exemple, empêcher l'envoi d'un formulaire vide ou la navigation d'un lien)
>event.stopPropagation() : stoppe la propagation de l'événement dans l'arbre DOM

Copier

<form action="">
    <input type="email" name="email" >
    <input type="password" name="password" >
    <input type="text" name="department" >
    <input type="button" value="Valider" >
</form>

const btnSubmit = document.querySelector('input[type=button]')
let errors = [];
if(btnSubmit) {
  btnSubmit.addEventListener('click', function(e) {
    e.stopPropagation();
    const inputs = document.querySelectorAll('input:not([type="button"])');

    if(inputs) {
      inputs.forEach((ipt) => {
          if(ipt.value === '' || ipt.value.length === 0 ) {
              errors.push(` le champ ${ipt.name} est vide`)
          }
      });
    }

    if(errors.length) {
      e.preventDefault();
      console.error(errors.toString())
    } else {
      console.log('OK tout est remplit, on peut soumettre la requête au serveur');
    }

    errors = [];
  })
}
            

Le troisième argument de la méthode .addEventListener (event, callback, boolean) détermine le flux d'événement.
Sa valeur est facultative et vaut false par défaut

• true => phase de capture : propagation de l'événement en descendant la hiérarchie du DOM, en partant de la racine (window/document) jusqu'à la cible
• false => phase de bouillonnement (Bubble ou Bubbling) : propagation de l'événement en remontant la hiérarchie du DOM, remonte de la cible vers ses parents successifs.
  C'est le comportement par défaut.

La grande majorité des gestionnaires s'exécutent par défaut durant la phase de bouillonnement.
Ce mécanisme permet notamment la délégation d'événements, placer un unique écouteur sur un parent pour gérer dynamiquement les interactions de tous ses enfants.

Historiquement, la gestion des événements a été un terrain de divergences majeures :

• Le navigateur Internet Explorer (IE < 9) Utilisait la méthode attachEvent('onclick') au lieu de .addEventListener() absence de passage automatique de l'objet event (disponible via window.event), et inversion du modèle de propagation
• L'utilisation des bibliothèques externes comme JQuery était une bénédiction pour tout normaliser
• Depuis, les choses ont évolué, les navigateurs modernes respectent tous les standards W3C
• Le site CanIUse permet de voir les fonctions compatibles par navigateur et version

Un formulaire HTML regroupe des balises permettant à l'utilisateur de saisir et d'envoyer des données

Les éléments d'un formulaire

• Conteneur principal : <form>.
• Champs de saisie :
  • <input> (avec ses multiples type : text, password, number, checkbox, radio, file, etc.)
  • <textarea> pour les textes longs
  • <select> pour les listes déroulantes avec la balise <option> pour le(s) choix possible(s)
  • <datalist> pour un choix suggéré avec l'autocomplétion
• Champs de soumission :
  • input ou button de type submit
  • input ou button de type button
  • un bouton classique
• Champ d'annulation, input de type reset

Il est possible d'accéder aux éléments d'un formulaire à partir du parent <form> et à l'aide des méthodes du DOM pour récupérer les enfants ou via la collection document.forms

Copier

<form id="sign-in">
    <input type="email" name="email" >
    <input type="password" name="password" >
    <input type="button" value="Se connecter" >
</form>
<form id="sign-up">
    <input type="email" name="email" >
    <input type="password" name="password" >
    <input type="password" name="confirm-password" >
    <input type="text" name="firstname" >
    <input type="text" name="lastname" >
    <input type="text" name="department" >
    <input type="submit" value="S'inscrire" >
</form>

const form = document.forms["sign-in"];
const email = form.elements["email"];
console.log(email.value);
              

Il faut écouter les événements qui se déclenchent sur formulaire

Liste non exhautive des événements associées aux éléments d'un formulaire

• input : déclenché lorsqu'une valeur est saisi dans un champ input
• change : déclenché lorsque la valeur d'un champ input ou select change
• focus : déclenché lorsqu'il y a le focus sur le champ input
• blur : déclenché lorsqu'il y a une perte du focus sur le champ input
• submit : déclenché à la soumission du formulaire
• reset : déclenché lorsque toutes les données d'un formulaire sont supprimées

Comment vérifier les données saisies ?

• La validation s'articule entre les mécanismes natifs du HTML5 et le contrôle fin en JavaScript :
  1. Validation HTML5 native : utilisation d'attributs de contrainte comme required, minlength, maxlength, pattern (expressions régulières) ou des types spécifiques (email, url).
     Le navigateur bloque automatiquement la soumission si les critères ne sont pas respectés
  2. Validation JavaScript : permet d'afficher des messages d'erreur personnalisés et de contrôler l'intégrité avant l'envoi
     • On écoute les événements input, change ou blur sur les éléments, on vérifie la validité via ses propres fonctions ou l'API de validation du DOM avec element.validity, element.checkValidity(), ou champ.setCustomValidity("message")
     • On écoute l'événement submit et on vérifie avec ses propres fonctions

Copier

const age = document.querySelector("#age");
const email = document.querySelector('#email');
age.addEventListener("input", (e) => {
  if (e.target.value < 18) {
    e.target.setCustomValidity("Vous devez être majeur !");
  } else {
    e.target.setCustomValidity(""); // supprimme le message d'erreur
  }
});
email.addEventListener('blur', function (e) {
  if(!e.target.validity) {
    e.target.setCustomValidity("L'email n'est pas au bon format");
  } else {
    e.target.setCustomValidity('');
  }
})
              

La soumission d'un formulaire déclenche un événement submit sur l'élément <form> (et non sur le bouton de validation) :

• Interception : On utilise event.preventDefault() pour stopper le comportement par défaut du navigateur (qui recharge la page lors d'une soumission classique)
• Traitement asynchrone : Cela permet de récupérer les données (via un objet FormData) et de les envoyer au serveur en arrière-plan via l'API fetch (AJAX)

Copier

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault(); // empêche le rechargement de la page
  const formData = new FormData(form); // récupère tous les champs et leurs valeurs
  try {
    console.log("Formulaire envoyé avec succès !");
  } catch (erreur) {
    console.error("Erreur lors de l'envoi :", erreur);
  }
}); 
              

• Sélecteur : élément HTML ciblé
• Propriété : élément de style ciblé
• Valeur : valeur à appliquer à l'élément de style ciblé

/* Commentaires en CSS */

Les méthodes et propriétés à utiliser sur un objet HTML

• element.attributes.class.value : valeur de l'attribut class
• element.classList.add('alert-danger') : ajoute la valeur alert-danger dans la liste des valeurs de l'attribut class de l'élément
• element.classList.remove('alert-danger) : supprime la class alert-danger dans la liste des valeurs de l'attribut class de l'élément

Les propriétés CSS écrites en kebab-case (ex. background-color) se convertissent en camelCase en JavaScript :

• background-color devient backgroundColor
• font-size devient fontSize
• text-decoration devient textDecoration
• Etc.

Copier

const h1 = document.querySelector("#h1");
h1.style.color = "#fefefe";
h1.style.backgroundColor = "#141414";
h1.style.padding = "16px";
              

• element.classList.add("nomClasse") : ajoute une classe
• element.classList.remove("nomClasse") : retire une classe
• element.classList.contains("nomClasse") : vérifie que l'élément possède une classe (renvoie un booléen)
• element.classList.toggle("nomClasse") : ajoute la classe si elle est absente, la retire si elle est présente

Copier

const p = document.querySelector(".paragraph");
p.classList.toggle("active");
if(p.classList.contains('active')) {
  p.classList.add('highlight');
} else {
  p.classList.remove('highlight');
}
              

Ajax pour Asynchronous JavaScript and XML

• Permet d'échanger des données avec un serveur en arrière-plan et de mettre à jour dynamiquement une partie d'une page web sans la nécessité de recharger completèment la page courante
• Popularisé en 2005, une révolution qui a rendu les applications web plus interactives
• Le terme XML désigne le format d'échange des données entre le client et le serveur, aujourd'hui les échanges s'effectuent quasi-exclusivement au format JSON (JavaScript Object Notation)

Technologie propriétaire de Microsoft introduite dans Internet Explorer pour intégrer des composants natifs de Windows dans une page Web et communiquer avec un serveur.

• Avant la standardisation W3C, le tout premier objet permettant d'effectuer des requêtes HTTP asynchrones dans le navigateur était l'objet ActiveXObject, spécifique à l'écosystème Windows
• Totalement abandonné aujourd'hui au profit des standards ouverts du web

Copier

// 1. Création
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
// 2. Requête vers le serveur
xhr.open("GET", "data.xml", true);
// 3. Traitement de la réponse du serveur
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) { // 4 = Requête terminée et réponse prête
    if (xhr.status == 200) { // 200 = Succès HTTP
      alert("Réponse du serveur : " + xhr.responseText);
    } else {
      console.log("Erreur lors de la requête : " + xhr.status);
    }
  }
};
// 4. Envoi effectif de la requête au serveur
xhr.send(null);

// Manipuler Excel via le navigateur 
function lancerExcel() {
  var excelApp, excelBook, excelSheet;
  // Création de l'objet ActiveX Excel
  excelApp = new ActiveXObject("Excel.Application");
  excelApp.Visible = true; // Rendre l'application visible
  // Ajouter un nouveau classeur et récupérer la feuille active
  excelBook = excelApp.Workbooks.Add();
  excelSheet = excelBook.ActiveSheet;
  // Écrire du texte dans la cellule A1
  excelSheet.Cells(1, 1).Value = "JavaScript ActiveX !";
}
              

Initialement développé par Microsoft pour unifier la réalisation de requêtes HTTP asynchrones de manière inter-navigateurs.
Basé sur une machine à états (readyState) et des écouteurs d'événements.
Syntaxe lourde, gestion des erreurs complexe et tendance naturelle au code imbriqué (callback hell).

De nos jours, cet objet est largement moins utilisé, mais est toujours supporté par les navigateurs.

• Les méthodes
  • .abort() : annule la requête en cours
  • .getResponseHeaders() : headers (en-têtes)
  • .open(method, url, boolean) : démarre la requête avec une méthode HTTP, l'URL du serveur et le mode synchrone (false) ou asynchrone (true)
  • .send(data) : envoie des données au serveur.
• La propriété .readyState
  • 0 : non initialisé, la méthode .open() n' a pas encore été appelée
  • 1 : initialisé, la méthode .send() n'a pas encore été appelée
  • 2 : headers (en-têtes de réponse) disponibles
  • 3 : body (données reçues) partiellement disponible
  • 4 : body entièrement disponible
• La propriété .status (Code HTTP du retour du serveur sur la requête effectuée)
  x est un chiffre spécifique au type d'erreur par exemple 404 ressource non trouvée, 403 autorisation requise, etc.
  • 20x: OK
  • 40x : erreur côté client (navigateur)
  • 50x : erreur côté serveur
• Propriété .responseText : obtenir les données renvoyées par le serveur au format texte brut.
• Propriété .responseXML : obtenir les données renvoyées par le serveur au format XML.

• Méthode de prédilection permettant d'effectuer des traitements asynchrones vers un serveur local ou distant
• fetch() est une notation simplifée d'une promesse(Promise) avec du sucre syntaxique
• Les specificités de fetch() par rapport à une Promesse classique
  1. fetch() ne rejette la promesse qu'en cas d'erreur réseau (pas de connexion).
     Il convient d'avoir une étape intermédiaire pour vérifier que le serveur répond favorable
  2. Les codes HTTP 40x ou 50x ne sont pas considérés comme un échec pour l'API fetch()
  3. Gère les en-têtes HTTP grâce à un objet Headers que l'on peut passer dans les options (2ème paramètre de la fonction)
• La méthode fetch() prend :
  • En premier paramètre, un URL (obligatoire)
  • En second paramètre, un objet contenant des options. Dans les options, on peut indiquer la méthode HTTP, les informations d'en-têtes (headers), le cache etc.

• Développé en 2006 par John Resig (Mozilla)
• Bibliothèque JavaScript "write less, do more" :
  • Rapide, léger et code moins verbeux (moins de code) pour manipuler le DOM et apporte des nouvelles fonctionnalités (simplification du code)
  • Règle le problème de compatibilité de JavaScript avec les navigateurs, ce qui a fait son succès et sa popularité auprès de la communauté JS durant la décennie précédente.
  • Aujourd'hui, surpassé par les multiples frameworks ou librairies tels que React, Vue JS, Angular, Astro, Anime, Three.js, Velocity etc. et l'évolution de JavaScript lui-même.
  • Dernière version 4.0.0 de 2026 (l'avant dernière version datait de 2021)
• Téléchargement :
  • Via le site officiel https://jquery.com/download/ en sauvegardant la libraire en local dans un fichier JavaScript.
  • Via les Content Delivery Network (CDN) de Google ou CloudFare
  • Via NPM ou YARN (des gestionnaires de dépendances de Node)
  • Via un téléchargement en local de la bibliothèque
• Son point d'entrée unique est la fonction globale $ (ou jQuery), qui renvoie un objet enveloppant un ou plusieurs éléments du DOM (jQuery collection).

Copier

$(function () {

  // [INSTALLATION]
  // npm
  npm install jquery
  // Ou yarn
  yarn add jquery
  // Ou CDNs à placer dans le <header;> ou juste avant </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
  // Ou local
  <script src="./src/lib/jquery.min.js"></script>
  
  // [UTILISATION]
  // Interne
  <script>
  $(document).ready(function() {
    // Votre code jQuery ici
  });
  
  // Ou ersion raccourcie moderne
  $(function() {
    // Votre code jQuery ici
  });
  </script>
  
  // Externe
  <script src="./js/my-script.js"></script>
  // [CONTENU] ./js/my-script.js
  $(document).ready(function() {
    // Votre code jQuery ici
  });
  // Ou ersion raccourcie moderne
  $(function() {
    // Votre code jQuery ici
  });
});
              

• La variable globale JQuery et son alias $ sont disponibles de manière globale ou via un import à partir du fichier source de la librairie.
• Tous les sélecteurs CSS peuvent être utilisés en argument de la fonction $() pour sélectionner des éléments du DOM.
• Sélection : $.(selecteurCSS)
• Modification et insertion :
  • .html() : récupère le contenu HTML du premier élément de la liste.
  • .html(code) : remplace le contenu des éléments de la liste par le code HTML.
  • .value : récupère la valeur du premier élément.
  • .value(val) : affecte la valeur val à tous les éléments.
  • .text() : récupère les noeuds textuels de tous les éléments descendants.
  • .text(content) : affecte le contenu textuel content à tous les éléments.
  • .append(code) : ajoute le code HTML à la fin de chaque élément de la liste.
  • .prepend(code) : ajoute le code HTML au début de chaque élément de la liste.
  • $parent.append($element) : ajoute à la fin.
  • $parent.prepend($element) : ajoute au début.
  • $element.text("Texte") ou $element.html("<span>HTML<span>") : modifie le contenu.
  • $input.val("Valeur") : lit ou écrit la valeur d'un champ de formulaire.
• Suppression :
  • $element.remove() : supprime l'élément et ses écouteurs d'événements.
  • $element.empty() : vide le contenu de l'élément.

• .on(event, callback) : identique à document.addEventListener()
• .off() : supprime les gestionnaires d'événements de tous les éléments
• .trigger(event) : déclenche l'événement event sur tous les éléments
• .bind(event, callback) : identique à on(event, callback), ancienne méthode déprécié (supprimé) depuis la version 3+
• .unbind(event) : identique à off(event), ancienne méthode également déprécié depuis v3+

• Les méthodes pour l'asynchrone
  • $.ajax() : globale pour toute requête asynchrone
  • $.get() : spécifique pour une requête via la méthode HTTP GET
  • $.post() : spécifique pour une requête via HTTP POST
  • Les méthodes précédentes à combiner avec les méthodes ci-dessous
    • .done(callback) permet d'obtenir le résultat en cas de succès.
    • .fail(callback) permet de capturer une erreur survenue au cours du traitement de la requête.
    • .always(callback) s'exécute dans les cas

La bibliothèque intègre nativement des animations fluides sans avoir à manipuler directement les feuilles de style de transition :

• Affichage / Masquage : .show(), .hide(), .toggle()
• Fondu (Fade) : .fadeIn(), .fadeOut(), .fadeToggle()
• Glissement (Slide) : .slideUp(), .slideDown(), .slideToggle()

Les méthodes :

• .show(duration?) : apparition progressive de l'élément durant la durée duration.
• .hide(duration?) : disparation progressive de l'élément durant la durée duration.
• .toggle(duration?) : apparition/disparition alternée selon la valeur de la propriété CSS display.
• .fadeIn(duration?) : similaire à show mais avec l'évolution de la propriété CSS opacity de 0 à 1. Effet de fondu.
• .fadeOut(duration?) : opacité de 1 à 0.
• .fadeToggle(duration?) : alterne selon la valeur de la propriété CSS opacity.
• .animate(newProperties, options) : avec newProperties un objet contenant les nouvelles propriétés CSS à remplacer progressivement par les anciennes valeurs en tenant compte des options.
  options, un objet ayant les propriétés : durée, élasticité de l'animation, etc.

PS : duration? signifie que le paramètre est optionnel. Par défaut il vaut 0ms, ce qui provoque un effet instantané.

Le JavaScript non obstructif consiste à séparer strictement le comportement de la structure HTML.
Avec jQuery, cela se traduit par :

• L'attente du chargement complet du DOM avant d'exécuter le code, traditionnellement via : $(document).ready(function() { // Code exécuté une fois le DOM prêt });
• (Ou sa forme courte : $(function() { ... });)