Référence rapide JavaScript

Table des matières

• Console et débogage
• Boîtes de dialogue
• Déclaration de variables
• Types et vérification de type
• Conversion de types
• Chaînes de caractères
• Méthodes de tableaux
• Objet Math
• Fonctions
• Accès aux éléments du DOM
• Manipulation du contenu
• Manipulation des attributs
• Manipulation des classes CSS
• Création et insertion d'éléments
• Événements
• Objet event
• Formulaires
• Expressions régulières

Console et débogage

console-log

console.log()

Affiche un ou plusieurs messages/valeurs dans la console du navigateur. Outil principal de débogage.

console.log("Bonjour !");
console.log("Valeur :", x);
console.log(`Nom : ${nom}, Âge : ${age}`);

Boîtes de dialogue

alert

alert()

Affiche une boîte de dialogue modale avec un message et un bouton "OK". Bloque l'exécution du script jusqu'à la fermeture.

alert("Ceci est une alerte !");
alert(`La valeur de x est : ${x}`);

prompt

prompt()

Affiche une boîte de dialogue avec un message et un champ de saisie. Retourne la valeur saisie (chaîne de caractères) ou null si annulé.

let nom = prompt("Quel est votre nom ?");
let age = parseInt(prompt("Quel âge avez-vous ?"));

Déclaration de variables

let

let

Déclare une variable dont la valeur peut être modifiée. Portée limitée au bloc { }. Recommandé à la place de var.

let compteur = 0;
compteur = 5; // ✅ OK

const

const

Déclare une constante dont la valeur ne peut pas être modifiée après l'initialisation.

const taxe = 0.15;
taxe = 0.20; // ❌ Erreur

Types et vérification de type

typeof

typeof

Opérateur qui retourne le type d'une variable sous forme de chaîne de caractères.

console.log(typeof "Bonjour"); // "string"
console.log(typeof 42);        // "number"
console.log(typeof true);      // "boolean"

isNaN

isNaN()

Vérifie si une valeur n'est pas un nombre. Essaie de convertir la valeur en nombre ; retourne true si la conversion échoue.

console.log(isNaN("abc")); // true
console.log(isNaN("123")); // false
console.log(isNaN(42));    // false

NaN

NaN

Valeur spéciale signifiant "Not a Number". Résultat d'une conversion en nombre qui échoue.

let num = parseInt("abc");
console.log(num); // NaN

Conversion de types

parseInt

parseInt()

Convertit une chaîne de caractères en nombre entier.

let entier = parseInt("42");     // 42
let tronque = parseInt("42.9");  // 42
let echec = parseInt("abc");     // NaN

parseFloat

parseFloat()

Convertit une chaîne de caractères en nombre décimal (virgule flottante).

let decimal = parseFloat("3.14"); // 3.14
let entier = parseFloat("42");    // 42
let echec = parseFloat("abc");    // NaN

Chaînes de caractères

template-literals

Template literals (interpolation)

Utilisation des backticks ` et de ${expression} pour insérer des variables ou expressions dans une chaîne.

let prenom = "Alice";
let age = 25;
console.log(`Bonjour ${prenom}, vous avez ${age} ans.`);

trim

.trim()

Supprime les espaces blancs au début et à la fin d'une chaîne de caractères.

let texte = "  Bonjour  ";
console.log(texte.trim()); // "Bonjour"

includes-string

.includes() (String)

Vérifie si une chaîne contient une sous-chaîne spécifique. Retourne true ou false.

let email = "test@email.com";
console.log(email.includes("@")); // true

Méthodes de tableaux

length

.length

Propriété qui retourne le nombre d'éléments dans un tableau.

let fruits = ["pomme", "banane", "orange"];
console.log(fruits.length); // 3

push

.push()

Ajoute un ou plusieurs éléments à la fin d'un tableau. Retourne la nouvelle longueur du tableau.

let fruits = ["pomme", "banane"];
fruits.push("orange");
// fruits = ["pomme", "banane", "orange"]

pop

.pop()

Retire le dernier élément d'un tableau et le retourne.

let fruits = ["pomme", "banane", "orange"];
let dernier = fruits.pop(); // "orange"
// fruits = ["pomme", "banane"]

shift

.shift()

Retire le premier élément d'un tableau et le retourne.

let fruits = ["pomme", "banane", "orange"];
let premier = fruits.shift(); // "pomme"
// fruits = ["banane", "orange"]

indexOf

.indexOf()

Recherche un élément dans un tableau et retourne son index (position). Retourne -1 si l'élément n'est pas trouvé.

let fruits = ["pomme", "banane", "orange"];
console.log(fruits.indexOf("banane")); // 1
console.log(fruits.indexOf("poire"));  // -1

splice

.splice()

Modifie le contenu d'un tableau en retirant et/ou insérant des éléments à un index donné.

// Retirer 1 élément à partir de l'index 1
let fruits = ["pomme", "banane", "orange"];
fruits.splice(1, 1);
// fruits = ["pomme", "orange"]

// Insérer "kiwi" à l'index 1 sans retirer d'élément
fruits.splice(1, 0, "kiwi");
// fruits = ["pomme", "kiwi", "orange"]

includes-array

.includes() (Array)

Vérifie si un tableau contient un élément spécifique. Retourne true ou false.

let fruits = ["pomme", "banane", "orange"];
console.log(fruits.includes("banane")); // true
console.log(fruits.includes("poire"));  // false

sort

.sort()

Trie les éléments d'un tableau en ordre alphabétique (par défaut). Ne fonctionne pas correctement pour les nombres.

let couleurs = ["rouge", "bleu", "vert"];
couleurs.sort();
// couleurs = ["bleu", "rouge", "vert"]

Objet Math

math-max

Math.max()

Retourne la plus grande valeur parmi les arguments passés. Utiliser avec le spread operator ... pour un tableau.

const arr = [5, 12, 8, 130, 44];
const max = Math.max(...arr); // 130

math-min

Math.min()

Retourne la plus petite valeur parmi les arguments passés. Utiliser avec le spread operator ... pour un tableau.

const arr = [5, 12, 8, 130, 44];
const min = Math.min(...arr); // 5

math-floor

Math.floor()

Arrondit un nombre vers le bas (entier inférieur).

console.log(Math.floor(4.9)); // 4
console.log(Math.floor(85 / 10)); // 8

spread-operator

Spread operator ...

Permet de "déplier" un tableau en arguments individuels.

const arr = [5, 12, 8];
const max = Math.max(...arr); // 12

Fonctions

function

function

Mot-clé pour déclarer une fonction nommée. Peut recevoir des paramètres et retourner une valeur avec return.

function additionner(a, b) {
    return a + b;
}
let resultat = additionner(5, 3); // 8

return

return

Mot-clé qui renvoie une valeur depuis une fonction et arrête son exécution.

function calculerMoyenne(notes) {
    let somme = 0;
    for (let note of notes) {
        somme += note;
    }
    return somme / notes.length;
}

jsdoc

JSDoc (/** */)

Norme de documentation JavaScript. Utilise des commentaires spéciaux pour décrire les fonctions, paramètres et valeur de retour.

/**
 * Calcule la somme de deux nombres.
 * @param {number} a - Le premier nombre.
 * @param {number} b - Le deuxième nombre.
 * @returns {number} La somme des deux nombres.
 */
function additionner(a, b) {
    return a + b;
}

Tags principaux : @param {type} nom, @returns {type}

Accès aux éléments du DOM

getElementById

document.getElementById()

Récupère un élément HTML par son attribut id. Retourne un seul objet représentant l'élément.

let titre = document.getElementById("titre");

Manipulation du contenu

textContent

.textContent

Propriété qui permet de lire ou modifier le contenu texte brut d'un élément HTML (sans balises).

let titre = document.getElementById("titre");
console.log(titre.textContent);        // Lire le texte
titre.textContent = "Nouveau titre";   // Modifier le texte

value

.value

Propriété utilisée pour lire ou modifier la valeur des éléments de formulaire (input, textarea, select).

let nomInput = document.getElementById("nom");
let nom = nomInput.value;     // Lire la valeur
nomInput.value = "";          // Vider le champ

innerHTML

.innerHTML

Propriété qui permet de lire ou modifier le contenu HTML d'un élément, incluant les balises. À éviter pour créer des balises (risque XSS) ; préférer createElement().

let div = document.getElementById("monElement");
div.innerHTML = "<h2>Nouveau contenu</h2>";
div.innerHTML = ""; // Vider le contenu

Manipulation des attributs

getAttribute

.getAttribute()

Retourne la valeur d'un attribut spécifié pour un élément HTML.

let paragraphe = document.getElementById("monParagraphe");
let classe = paragraphe.getAttribute("class");

setAttribute

.setAttribute()

Définit la valeur d'un attribut spécifié pour un élément HTML.

let paragraphe = document.getElementById("monParagraphe");
paragraphe.setAttribute("class", "msg-erreur");
paragraphe.setAttribute("id", "nouvelId");

Manipulation des classes CSS

classList-add

.classList.add()

Ajoute une ou plusieurs classes CSS à un élément.

element.classList.add("active");
element.classList.add("classe1", "classe2");

classList-remove

.classList.remove()

Retire une classe CSS d'un élément.

element.classList.remove("error");

classList-toggle

.classList.toggle()

Ajoute la classe si elle est absente, ou la retire si elle est présente. Idéal pour les fonctionnalités d'affichage/masquage.

element.classList.toggle("hidden");
// Si "hidden" est présente → elle est retirée
// Si "hidden" est absente → elle est ajoutée

classList-contains

.classList.contains()

Vérifie si un élément possède une classe CSS spécifique. Retourne true ou false.

if (element.classList.contains("selected")) {
    // faire quelque chose
}

Création et insertion d'éléments

createElement

document.createElement()

Crée un nouvel élément HTML à partir de son nom de balise. L'élément n'est pas encore ajouté au DOM.

let newDiv = document.createElement("div");
let newParagraph = document.createElement("p");
let newLink = document.createElement("a");

appendChild

.appendChild()

Ajoute un élément en tant que dernier enfant d'un élément parent dans le DOM.

let parent = document.getElementById("content");
let newP = document.createElement("p");
newP.textContent = "Nouveau paragraphe";
parent.appendChild(newP);

insertBefore

.insertBefore()

Insère un élément avant un élément de référence dans le DOM.

let parent = document.getElementById("parent");
let newChild = document.createElement("p");
newChild.textContent = "Inséré avant la référence";
let reference = document.getElementById("reference");
parent.insertBefore(newChild, reference);

Événements

addEventListener

.addEventListener()

Attache un gestionnaire d'événements à un élément HTML. La fonction de rappel est passée sans parenthèses.

let bouton = document.getElementById("monBouton");
bouton.addEventListener("click", gererClick);

addEventListener-load

addEventListener("load", ...)

Événement déclenché lorsque la page web est complètement chargée. Utilisé pour initialiser le script.

function initialisation() {
    // Code d'initialisation
}
addEventListener("load", initialisation, false);

evenement-click

Événement click

Déclenché lorsque l'utilisateur clique sur un élément.

bouton.addEventListener("click", gererClick);

evenement-input

Événement input

Déclenché à chaque modification de la valeur d'un champ de formulaire. Idéal pour la validation en temps réel.

nomInput.addEventListener("input", validerNom);

evenement-blur

Événement blur

Déclenché lorsqu'un champ de formulaire perd le focus (l'utilisateur quitte le champ).

emailInput.addEventListener("blur", validerEmail);

evenement-submit

Événement submit

Déclenché lorsqu'un formulaire est soumis. Utilisé avec preventDefault() pour contrôler la soumission.

let form = document.getElementById("monFormulaire");
form.addEventListener("submit", gererSoumission);

evenement-change

Événement change

Déclenché lorsqu'une valeur de champ de formulaire est modifiée et que l'utilisateur sort du champ.

selectElement.addEventListener("change", gererChangement);

evenement-focus

Événement focus

Déclenché lorsqu'un champ de formulaire reçoit le focus.

champNom.addEventListener("focus", gererFocus);

evenement-keydown

Événement keydown

Déclenché lorsqu'un utilisateur appuie sur une touche du clavier dans un champ de formulaire.

champTexte.addEventListener("keydown", gererTouche);

evenement-reset

Événement reset

Déclenché lorsqu'un formulaire est réinitialisé.

form.addEventListener("reset", gererReset);

Objet event

event-preventDefault

event.preventDefault()

Empêche le comportement par défaut d'un événement (ex : empêcher le rechargement de la page lors de la soumission d'un formulaire).

function gererSubmit(event) {
    event.preventDefault();
    // Logique de validation personnalisée
}

event-currentTarget

event.currentTarget

Référence à l'élément HTML sur lequel l'événement a été déclenché. Permet d'accéder à ses propriétés sans utiliser getElementById.

function gererClick(event) {
    console.log(event.currentTarget.id);          // ID de l'élément
    console.log(event.currentTarget.className);   // Classes CSS
    console.log(event.currentTarget.tagName);     // Nom de la balise
    console.log(event.currentTarget.textContent); // Contenu texte
}

event-target-submit

event.target.submit()

Soumet programmatiquement le formulaire au serveur. Utilisé après une validation réussie.

function gererSubmit(event) {
    event.preventDefault();
    if (formulaireValide) {
        event.target.submit();
    }
}

Formulaires

form-reset

.reset()

Réinitialise tous les champs d'un formulaire à leurs valeurs par défaut.

let form = document.getElementById("monFormulaire");
form.reset();

novalidate

novalidate (attribut HTML)

Attribut ajouté à la balise <form> pour désactiver la validation HTML native et permettre la validation JavaScript personnalisée.

<form id="monFormulaire" novalidate>

Expressions régulières

regex-test

.test()

Méthode des expressions régulières qui vérifie si une chaîne correspond au motif. Retourne true ou false.

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("test@email.com")); // true
console.log(emailRegex.test("invalide"));        // false

regex-courantes

Regex courantes

Type	Regex	Description
Email	/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/	Adresse email valide
Téléphone	/^(\+33|0)[1-9](\d{2}){4}$/	Numéro français
Code postal	/^\d{5}$/	Code postal (5 chiffres)
Mot de passe	/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/	Min. 8 car., maj, min, chiffre

Mode strict

use-strict

"use strict"

Directive placée au début du fichier JavaScript qui active un mode plus sécuritaire. Empêche les erreurs silencieuses et interdit les syntaxes problématiques.

"use strict";

monNom = "Jean"; // ❌ ReferenceError : variable non déclarée
let monNom = "Jean"; // ✅ OK