JavaScript est un langage de programmation populaire utilisé pour créer des sites Web interactifs et dynamiques. Il a été créé en 1995 et est souvent abrégé en "JS".
JS est un langage interprété, ce qui signifie que le code est exécuté directement dans le navigateur Web, sans nécessiter de compilation préalable. Cela rend JS très flexible et facile à utiliser pour les développeurs Web.
Il est souvent utilisé pour ajouter des fonctionnalités interactives aux pages Web, telles que des animations, des effets visuels, des formulaires dynamiques, des fenêtres contextuelles, des mises à jour en temps réel, etc. En outre, JS est souvent utilisé côté serveur avec Node.js pour créer des applications Web entièrement fonctionnelles et des API.
En résumé, JavaScript est un langage de programmation polyvalent et puissant qui est devenu essentiel pour la création de sites Web modernes et interactifs.
EcmaScript, souvent abrégé en ES, est le standard officiel qui définit les spécifications du langage de programmation JavaScript. La première version d'EcmaScript a été publiée en 1997 par Ecma International, une organisation de normalisation pour les technologies de l'information et de la communication.
Le but principal d'EcmaScript est de normaliser la spécification de JavaScript pour assurer une compatibilité uniforme à travers différents navigateurs Web et environnements d'exécution. Cela permet aux développeurs de créer des applications Web qui fonctionnent de manière cohérente, indépendamment du navigateur ou de la plateforme utilisée par l'utilisateur final.
L'importance de EcmaScript dans le développement de JavaScript
Au fil des années, EcmaScript a introduit plusieurs mises à jour importantes qui ont considérablement enrichi les fonctionnalités de JavaScript, rendant le langage plus puissant, flexible et facile à utiliser pour le développement Web et serveur.
ES6 (EcmaScript 2015) : Cette version est l'une des plus significatives, introduisant des fonctionnalités telles que les classes, les modules, les promesses, les fonctions fléchées (arrow functions), et bien d'autres. Elle a marqué un tournant dans la manière de développer des applications JavaScript en rendant le code plus lisible, modulaire et maintenable.
Mises à jour annuelles : Depuis ES6, EcmaScript suit un cycle de mise à jour annuel, chaque nouvelle version apportant son lot d'améliorations et de nouvelles fonctionnalités. Cela inclut, par exemple, l'ajout de l'opérateur de coalescence nulle (??
), l'opérateur de chaînage optionnel (?.
), et les expressions rationnelles améliorées.
En JavaScript, il existe plusieurs moyens de stocker des données. Voici les principaux :
Ces exemples ne sont pas exhaustifs, mais ils donnent une idée des différents moyens de stocker des données en JavaScript.
En JavaScript, il est possible de déclarer des variables avec les mots-clés var, let et const.
La déclaration d'une variable avec var
crée une variable qui est accessible dans l'ensemble de la portée de la fonction ou du fichier dans lequel elle est déclarée. Cependant, cette portée peut varier selon le contexte dans lequel la variable est utilisée, ce qui peut parfois entraîner des erreurs difficiles à comprendre.
La déclaration d'une variable avec let
crée une variable qui est accessible uniquement dans le bloc de code dans lequel elle est déclarée, comme une boucle for ou un bloc if. Cela peut aider à prévenir les erreurs causées par des variables qui ont une portée plus large que nécessaire.
La déclaration d'une variable avec const
crée une variable qui est accessible uniquement dans le bloc de code dans lequel elle est déclarée, tout comme let
. Cependant, contrairement à let
et var
, la valeur de const
ne peut pas être modifiée après sa première affectation. Cela permet d'assurer que la variable ne sera pas accidentellement modifiée dans le reste du code.
Il est généralement recommandé d'utiliser const
autant que possible pour les valeurs qui ne changent pas, puis let
pour les valeurs qui peuvent être modifiées. L'utilisation de var
est déconseillée sauf dans des situations spécifiques où sa portée plus large est nécessaire.
En JavaScript, une variable peut avoir plusieurs types. Voici les principaux types de variables en JavaScript, avec un exemple de chaque type et son typeof
associé :
Cas | Description | Exemple de Code | Résultat dans la Console |
---|---|---|---|
Variable Non Déclarée (ReferenceError) | Accès à une variable qui n'a pas été déclarée. | console.log(c); |
ReferenceError: c is not defined |
Variable Déclarée mais Non Assignée (Undefined) | Variable déclarée sans valeur assignée. | let b; console.log(b); |
undefined |
Variable Déclarée et Assignée | Variable déclarée avec une valeur assignée. | let a = 5; console.log(a); |
5 |
Voici quelques exemples d'opérateurs de comparaison et de logique en JavaScript :
En JavaScript, les opérateurs arithmétiques sont des symboles utilisés pour effectuer des opérations mathématiques sur des valeurs numériques. Voici les principaux opérateurs arithmétiques en JavaScript :
Exemple :
Exemple :
Exemple :
Exemple :
Exemple :
Exemple :
Exemple :
Il est important de noter que les opérateurs arithmétiques respectent les règles de priorité habituelles des mathématiques. On peut également utiliser des parenthèses pour contrôler l'ordre des opérations.
Exemple :
Assurez-vous de bien comprendre l'ordre des opérations si vous utilisez des expressions arithmétiques complexes dans vos programmes.
En JavaScript, l'objet Math
fournit des propriétés et des méthodes pour les constantes mathématiques et les fonctions. Voici quelques exemples de fonctions Math
couramment utilisées :
Math.round(x)
: Arrondit un nombre au nombre entier le plus proche. Par exemple, Math.round(4.7)
donne 5
, et Math.round(4.4)
donne 4
.Math.ceil(x)
: Arrondit un nombre à l'entier supérieur le plus proche. Cela signifie qu'il arrondit toujours le nombre vers le haut. Par exemple, Math.ceil(4.2)
donne 5
.Math.floor(x)
: Arrondit un nombre à l'entier inférieur le plus proche. Cela signifie qu'il arrondit toujours le nombre vers le bas. Par exemple, Math.floor(4.8)
donne 4
.Math.abs(x)
: Retourne la valeur absolue d'un nombre. Par exemple, Math.abs(-5)
donne 5
.Math.pow(x, y)
: Retourne la puissance de x
élevé à y
. Par exemple, Math.pow(2, 3)
donne 8
.Math.sqrt(x)
: Retourne la racine carrée d'un nombre. Par exemple, Math.sqrt(9)
donne 3
.Math.max(x1, x2, ..., xn)
: Retourne le nombre maximum parmi les arguments fournis. Par exemple, Math.max(1, 3, 2)
donne 3
.Math.min(x1, x2, ..., xn)
: Retourne le nombre minimum parmi les arguments fournis. Par exemple, Math.min(1, 3, 2)
donne 1
.Math.random()
: Génère un nombre pseudo-aléatoire entre 0 (inclus) et 1 (exclus). Par exemple, Math.random()
peut donner 0.123456789
.Math.sin(x)
, Math.cos(x)
, Math.tan(x)
: Ces fonctions retournent respectivement le sinus, le cosinus et la tangente d'un angle donné en radians.Ces fonctions sont largement utilisées dans divers contextes de programmation, notamment pour les calculs mathématiques, la manipulation de nombres, les animations, et plus encore.
>
) : Vérifie si la valeur de gauche est strictement supérieure à la valeur de droite.<
) : Vérifie si la valeur de gauche est strictement inférieure à la valeur de droite.>=
) : Vérifie si la valeur de gauche est supérieure ou égale à la valeur de droite.<=
) : Vérifie si la valeur de gauche est inférieure ou égale à la valeur de droite.==
) : Vérifie si deux valeurs sont égales, en effectuant une conversion de type si nécessaire.!=
) : Vérifie si deux valeurs sont différentes, en effectuant une conversion de type si nécessaire.===
) : Vérifie si deux valeurs sont égales, sans effectuer de conversion de type.!==
) : Vérifie si deux valeurs sont différentes, sans effectuer de conversion de type.&&
) : Renvoie true
si toutes les expressions sont évaluées à true
.||
) : Renvoie true
si au moins l'une des expressions est évaluée à true
.!
) : Inverse le résultat de l'expression.Ces exemples couvrent les opérateurs de comparaison les plus couramment utilisés ainsi que les opérateurs logiques de base. Vous pouvez les combiner et les utiliser dans des conditions, des boucles et d'autres structures de contrôle pour effectuer des comparaisons et des opérations logiques plus complexes en JavaScript.
Type | Exemples de valeurs "Truthy" | Exemples de valeurs "Falsy" |
---|---|---|
Booléens | true | false |
Nombres | 1, -1, 0.5, 42, -42, 3.14, … | 0, -0, 0n |
Chaînes de caractères | "hello", "0", "false", … | "", '', `` |
Objets | {}, [], function() {}, new Date(), … | |
Undefined | undefined | |
Null | null | |
NaN | NaN | |
Infinity | Infinity, -Infinity |
Voici une brève présentation de chacune de ces structures de contrôle en JavaScript avec des exemples :
La structure de contrôle if-else
permet d'exécuter un bloc de code si une condition est vraie, sinon d'exécuter un autre bloc de code. Voici un exemple :
Voici quelques exemples de conditions en JavaScript, y compris un exemple utilisant l'opérateur de non-égalité (!=
) :
Exemple 1 - Condition if
:
Dans cet exemple, nous utilisons la condition if
pour vérifier si la variable age
est supérieure ou égale à 18. Si c'est le cas, le message "Vous êtes majeur !" est affiché dans la console.
Exemple 2 - Condition if-else
:
Dans cet exemple, nous utilisons la condition if-else
pour vérifier si la variable temperature
est supérieure à 30. Si c'est le cas, le message "Il fait chaud !" est affiché. Sinon, le message "La température est modérée." est affiché.
Exemple 3 - Condition else if
:
Dans cet exemple, nous utilisons une série de conditions else if
pour évaluer la variable note
et afficher un message en fonction de la plage dans laquelle elle se situe. Selon la valeur de note
, le message correspondant est affiché.
Exemple avec la non égalité :
Dans cet exemple, nous utilisons l'opérateur de non-égalité (!=
) pour vérifier si la variable couleur
n'est pas égale à "bleu". Si ce n'est pas le cas, le message "La couleur n'est pas bleue !" est affiché dans la console.
Il existe plusieurs opérateurs de comparaison et de condition en JavaScript (comme ==
, ===
, <
, >
, <=
, >=
, etc.) qui permettent de créer des conditions plus complexes. Vous pouvez les combiner avec des opérateurs logiques (&&
, ||
, !
) pour effectuer des évaluations conditionnelles plus avancées.
La structure de contrôle switch-case
permet d'exécuter un bloc de code en fonction de la valeur d'une variable. Voici un exemple :
Voici quelques exemples de l'utilisation de l'instruction switch...case
en JavaScript :
Exemple 1 - Jours de la semaine :
Ce code utilise un switch
pour vérifier la valeur de la variable jour
et exécute le bloc de code correspondant au cas correspondant. Dans cet exemple, si jour
est "lundi", il affichera "C'est le premier jour de la semaine." Si jour
est "samedi" ou "dimanche", il affichera "C'est le week-end !" Si la valeur de jour
ne correspond à aucun des cas, il exécutera le bloc de code par défaut et affichera "Jour non valide."
Exemple 2 - Note scolaire :
Dans cet exemple, la note est vérifiée par une série de cas. Selon la plage dans laquelle se situe la note, un message approprié est affiché. Si la note est entre 90 et 100, il affichera "Très bien !". Si la note est entre 80 et 89, il affichera "Bien !", et ainsi de suite. Si la note ne correspond à aucun des cas, le bloc de code par défaut s'exécute et affiche "Note invalide."
Ces exemples illustrent l'utilisation de l'instruction switch...case
pour effectuer différentes actions en fonction de différentes valeurs.
La structure de contrôle while
permet d'exécuter un bloc de code tant qu'une condition est vraie. Voici un exemple :
Voici quelques exemples d'utilisation de la boucle while
en JavaScript :
Exemple 1 - Compteur :
Ce code utilise une boucle while
pour afficher les valeurs du compteur de 1 à 5. Tant que la condition compteur <= 5
est vraie, le bloc de code à l'intérieur de la boucle est exécuté. Le compteur est affiché à chaque itération, puis il est incrémenté de 1 à l'aide de compteur++
. La boucle s'exécute jusqu'à ce que compteur
atteigne 6, moment où la condition devient fausse et la boucle se termine.
Exemple 2 - Saisie utilisateur :
Dans cet exemple, la boucle while
est utilisée pour demander à l'utilisateur de saisir un mot de passe. La boucle continue de s'exécuter tant que le mot de passe saisi (motDePasse
) n'est pas égal au mot de passe attendu (motDePasseAttendu
). L'utilisateur est invité à saisir le mot de passe à l'aide de la fonction prompt()
. Une fois que l'utilisateur entre le mot de passe correct, la boucle se termine et le message "Mot de passe correct !" est affiché.
Exemple 3 - Génération de nombres aléatoires :
Dans cet exemple, la boucle while
est utilisée pour générer des nombres aléatoires jusqu'à ce que le nombre 5 soit généré. À chaque itération de la boucle, un nombre aléatoire entre 1 et 10 est généré à l'aide de Math.random()
et Math.floor()
. Si le nombre généré (nombreAleatoire
) n'est pas égal à 5, il est affiché. La boucle continue jusqu'à ce que 5 soit généré, puis elle se termine et affiche le message "Le nombre 5 a été généré !".
Ces exemples illustrent comment utiliser la boucle while
pour exécuter un bloc de code tant qu'une condition spécifique est vraie. Assurez-vous de mettre à jour les variables de contrôle à l'intérieur de la boucle pour éviter les boucles infinies.
while (true)
Pour sortir d'une boucle while (true)
, il faut utiliser l'instruction break
. Cette instruction permet de sortir immédiatement de la boucle, indépendamment du test de condition qui est normalement évalué à chaque tour de boucle.
Voici un exemple :
Dans cet exemple, la boucle while
tourne indéfiniment jusqu'à ce que l'utilisateur entre le mot-clé "stop". A ce moment-là, l'instruction break
est exécutée, ce qui sort immédiatement de la boucle.
La structure de contrôle for
permet d'exécuter un bloc de code un certain nombre de fois en fonction d'une condition. Voici un exemple :
Voici quelques exemples de boucles for
en JavaScript :
Exemple 1 - Boucle for
inversée avec décrémentation :
Dans cet exemple, nous utilisons une boucle for
pour afficher les nombres de 5 à 0 de manière décroissante. La variable i
est initialisée à 5, et la condition i >= 0
spécifie que la boucle continuera tant que i
est supérieur ou égal à 0. Après chaque itération, la décrémentation i--
est effectuée.
Le résultat affiché sera :
Exemple 2 - Boucle for
pour parcourir un tableau :
Dans cet exemple, nous utilisons une boucle for
pour parcourir un tableau fruits
. La variable i
est initialisée à 0, et la condition i < fruits.length
spécifie que la boucle continuera tant que i
est inférieur à la longueur du tableau fruits
. À chaque itération, la valeur de l'élément correspondant dans le tableau est affichée.
Le résultat affiché sera :
Exemple 3 - Boucle for
avec saut d'itération (continue
) :
Dans cet exemple, nous utilisons une boucle for
pour afficher les nombres de 0 à 9, mais uniquement les nombres impairs. À chaque itération, nous vérifions si i
est pair en utilisant l'opérateur modulo %
. Si i
est pair, nous utilisons l'instruction continue
pour passer à l'itération suivante sans exécuter le reste du code à l'intérieur de la boucle. Si i
est impair, le nombre est affiché dans la console.
Le résultat affiché sera :
Dans cet exemple, la boucle for
s'exécute normalement pour toutes les valeurs de i
. Cependant, lorsque i
est pair, l'instruction continue
est exécutée, ce qui saute le code restant à l'intérieur de la boucle et passe à l'itération suivante. Cela permet d'afficher uniquement les nombres impairs.
Ces exemples illustrent différentes utilisations de la boucle for
en JavaScript. Vous pouvez personnaliser les valeurs initiales, les conditions et les opérations d'itération pour répondre à vos besoins spécifiques.
for of
et for in
La structure de contrôle function
permet de regrouper un bloc de code qui peut être appelé plusieurs fois avec des arguments différents. Voici un exemple :
En JavaScript, les fonctions peuvent prendre des paramètres, qui sont des valeurs que vous pouvez passer à une fonction pour qu'elle les utilise lors de son exécution. Les paramètres permettent aux fonctions de traiter différentes valeurs et d'effectuer des opérations spécifiques en fonction de ces valeurs.
Lors de la définition d'une fonction, vous pouvez spécifier les paramètres qu'elle accepte. Voici la syntaxe générale pour définir une fonction avec des paramètres :
Les paramètres sont des noms de variables que vous pouvez utiliser à l'intérieur de la fonction. Lorsque vous appelez la fonction, vous pouvez passer des valeurs spécifiques pour chaque paramètre. Par exemple :
Dans cet exemple, la fonction saluer
prend un paramètre nom
. Lorsque nous appelons la fonction saluer
et passons une valeur spécifique (par exemple, "Alice" ou "Bob") en tant qu'argument, cette valeur est affectée au paramètre nom
à l'intérieur de la fonction.
JavaScript n'impose pas de types stricts pour les paramètres de fonction. Cela signifie que vous n'avez pas besoin de spécifier explicitement le type de données attendu pour chaque paramètre. Les paramètres peuvent être de n'importe quel type de données : nombre, chaîne de caractères, tableau, objet, etc.
Il est important de noter que JavaScript vous permet de définir des valeurs par défaut pour les paramètres de fonction. Cela signifie que vous pouvez spécifier une valeur qui sera utilisée si aucun argument n'est passé pour ce paramètre lors de l'appel de la fonction. Voici un exemple :
Dans cet exemple, le paramètre nom
a une valeur par défaut de "Anonyme". Si aucun argument n'est passé pour le paramètre nom
lors de l'appel de la fonction saluer()
, la valeur par défaut sera utilisée.
Méthode | Description | Exemple |
---|---|---|
length | Retourne le nombre de caractères dans une chaîne de caractères | const myStr = "Hello world!"; console.log(myStr.length); // affiche 12 |
charAt() | Retourne le caractère à l'indice spécifié dans une chaîne de caractères | const myStr = "Hello world!"; console.log(myStr.charAt(6)); // affiche 'w' |
concat() | Concatène une ou plusieurs chaînes de caractères à une chaîne existante et retourne la nouvelle chaîne de caractères. | const str1 = "Hello"; const str2 = " world!"; const myStr = str1.concat(str2); // myStr devient "Hello world!" |
indexOf() | Retourne l'indice de la première occurrence d'une valeur spécifiée dans une chaîne de caractères | const myStr = "Hello world!"; console.log(myStr.indexOf('world')); // affiche 6 |
lastIndexOf() | Retourne l'indice de la dernière occurrence d'une valeur spécifiée dans une chaîne de caractères | const myStr = "Hello world!"; console.log(myStr.lastIndexOf('o')); // affiche 7 |
replace() | Remplace une chaîne de caractères par une autre dans une chaîne de caractères | const myStr = "Hello world!"; const newStr = myStr.replace('world', 'everybody'); // newStr devient "Hello everybody!" |
slice() | Retourne une partie d'une chaîne de caractères en créant une nouvelle chaîne de caractères, sans modifier la chaîne d'origine. Les indices de début et de fin de la partie à extraire sont passés en paramètres. | const myStr = "Hello world!"; const subStr = myStr.slice(6, 11); // subStr devient 'world', myStr reste inchangé |
split() | Sépare une chaîne de caractères en un tableau de sous-chaînes en utilisant un séparateur spécifié en argument. | const myStr = "Hello world!"; const myArr = myStr.split(' '); // myArr devient ['Hello', 'world!'] |
toLowerCase() | Retourne une chaîne de caractères en minuscules | const myStr = "Hello world!"; const newStr = myStr.toLowerCase(); // newStr devient 'hello world!' |
Les tableaux en JavaScript sont des structures de données qui permettent de stocker et d'organiser des collections d'éléments. Un tableau peut contenir des valeurs de différents types (nombres, chaînes de caractères, objets, etc.) et est indexé à partir de zéro.
Voici comment déclarer et initialiser un tableau en JavaScript :
Méthode | Description | Exemple | Sortie |
---|---|---|---|
length | Retourne le nombre d'éléments dans un tableau | const myArr = [1, 2, 3]; console.log(myArr.length); // affiche 3 |
Il renvoie une valeur numérique. |
pop() | Supprime une entrée à la fin du tableau (Celle-ci peut être récupérée dans une variable) | const myArr = [1, 2, 3]; const lastElement = myArr.pop(); // myArr devient [1, 2], lastElement devient 3 |
✏️ Modifie directement le tableau d'origine. |
shift() | Supprime une entrée au début du tableau (Celle-ci peut être récupérée dans une variable) | const myArr = [1, 2, 3]; const firstElement = myArr.shift(); // myArr devient [2, 3], firstElement devient 1 |
✏️ Modifie directement le tableau d'origine. |
push() | Ajoute une entrée à la fin du tableau | const myArr = [1, 2, 3]; myArr.push(4); // myArr devient [1, 2, 3, 4] |
✏️ Modifie directement le tableau d'origine. |
unshift() | Ajoute une entrée au début du tableau | const myArr = [1, 2, 3]; myArr.unshift(0); // myArr devient [0, 1, 2, 3] |
✏️ Modifie directement le tableau d'origine. |
slice() | Retourne une portion du tableau en créant un nouveau tableau, sans modifier le tableau original. Les indices de début et de fin de la portion à extraire sont passés en paramètres. | const myArr = [1, 2, 3, 4, 5]; const subArr = myArr.slice(1, 3); // subArr devient [2, 3], myArr reste inchangé |
🆕 Crée un nouveau tableau. Le tableau d'origine reste inchangé. |
splice() | Permet de modifier le contenu d'un tableau en supprimant ou remplaçant des éléments existants et/ou en ajoutant de nouveaux éléments. Les indices de début et de fin de la portion à modifier sont passés en paramètres, ainsi que les éléments à ajouter ou à supprimer. Cette méthode modifie directement le tableau original. | const myArr = [1, 2, 3, 4, 5]; myArr.splice(2, 1, 'a', 'b'); // myArr devient [1, 2, 'a', 'b', 4, 5] |
✏️ Modifie directement le tableau d'origine. |
concat() | Retourne un nouveau tableau qui contient les éléments des tableaux d'origine concaténés. | const myArr1 = [1, 2, 3]; const myArr2 = [4, 5, 6]; const myArr3 = myArr1.concat(myArr2); // myArr3 devient [1, 2, 3, 4, 5, 6], myArr1 et myArr2 restent inchangés |
🆕 Crée un nouveau tableau. Les tableaux d'origine restent inchangés. |
join() | Convertit tous les éléments d'un tableau en une chaîne de caractères, en les séparant avec un séparateur spécifié en argument. | const myArr = ['Hello', 'world', '!']; const myStr = myArr.join(' '); // myStr devient 'Hello world !' |
Ne crée pas un nouveau tableau. Convertit le tableau en une chaîne de caractères. |
reverse() | Inverse l'ordre des éléments d'un tableau. | const myArr = [1, 2, 3]; myArr.reverse(); // myArr devient [3, 2, 1] |
✏️ Modifie directement le tableau d'origine. |
sort() | Trie les éléments d'un tableau dans l'ordre spécifié par une fonction de tri passée en argument. | const myArr = [2, 4, 1, 3, 5]; myArr.sort(); // myArr devient [1, 2, 3, 4, 5] |
✏️ Modifie directement le tableau d'origine. |
map() | Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau. | const myArr = [1, 2, 3]; const doubleArr = myArr.map((element) => element * 2); // doubleArr devient [2, 4, 6], myArr reste inchangé |
🆕 Crée un nouveau tableau. Le tableau d'origine reste inchangé. |
every() | Vérifie si tous les éléments d'un tableau satisfont une condition. | const myArr = [2, 4, 6]; const areAllEven = myArr.every((element) => element % 2 === 0); // areAllEven devient true |
☑️ Renvoie un booléen. |
filter() | Crée un nouveau tableau avec tous les éléments d'un tableau qui passent un test spécifié. | const myArr = [1, 2, 3, 4, 5]; const evenArr = myArr.filter((element) => element % 2 === 0); // evenArr devient [2, 4], myArr reste inchangé |
🆕 Crée un nouveau tableau. Le tableau d'origine reste inchangé. |
some() | Teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. La méthode renvoie true si le test est passé et false sinon. |
const myArr = [1, 2, 3]; const isGreaterThanTwo = (element) => element > 2; const result = myArr.some(isGreaterThanTwo); // result devient true |
☑️ Renvoie un booléen. |
includes() | Détermine si un tableau contient une valeur spécifique parmi ses entrées, renvoie true si la valeur est trouvée et false sinon. |
const myArr = [1, 2, 3]; const result1 = myArr.includes(2); // result1 devient true const result2 = myArr.includes(4); // result2 devient false |
☑️ Renvoie un booléen. |
find() | Renvoie la valeur du premier élément du tableau qui satisfait la fonction de test fournie en argument. Sinon, la valeur undefined est renvoyée. |
const myArr = [1, 2, 3]; const isGreaterThanTwo = (element) => element > 2; const result = myArr.find(isGreaterThanTwo); // result devient 3 |
Renvoie un élément du tableau ou undefined. |
findIndex() | Renvoie l'index du premier élément du tableau qui satisfait la fonction de test fournie en argument. Sinon, la valeur -1 est renvoyée. | const myArr = [1, 2, 3]; const isGreaterThanTwo = (element) => element > 2; const result = myArr.findIndex(isGreaterThanTwo); // result devient 2 |
Renvoie un index ou -1. |
indexOf() | Recherche l'index de la première occurrence d'un élément dans un tableau, retourne -1 si l'élément n'est pas présent | const myArr = [1, 2, 3, 4, 5]; const index = myArr.indexOf(3); // index devient 2 |
Renvoie un index ou -1. |
reduce() | Applique une fonction réductrice sur chaque élément du tableau pour réduire le tableau à une valeur unique. | const myArr = [1, 2, 3]; const reducer = (accumulator, currentValue) => accumulator + currentValue; const result = myArr.reduce(reducer); // result devient 6 |
Renvoie une valeur unique. |
at() | Retourne l'élément à l'index spécifié | const myArr = [1, 2, 3]; console.log(myArr.at(1)); // affiche 2 |
Renvoie un élément du tableau. |
fill() | Remplit tous les éléments d'un tableau avec une valeur statique à partir d'un index de début et d'un index de fin spécifiés (inclus) | const myArr = [1, 2, 3]; myArr.fill(0, 1, 2); // myArr devient [1, 0, 3] |
✏️ Modifie directement le tableau d'origine. |
En JavaScript, les objets sont des entités qui regroupent des données et des fonctionnalités connexes. Ils sont créés à partir de modèles appelés "constructeurs" ou à l'aide de la syntaxe d'objet littéral. Voici quelques points clés sur la création et la manipulation d'objets en JavaScript :
Création d'objets en JavaScript :
Objet littéral : Vous pouvez créer un objet en utilisant la notation d'objet littéral, qui consiste à définir les propriétés et les méthodes de l'objet entre des accolades. Par exemple :
Constructeur d'objet : Vous pouvez créer des objets à partir de fonctions constructeurs. Une fonction constructeur est une fonction normale qui est utilisée avec l'opérateur new
pour créer des instances d'objets. Par exemple :
Manipulation d'objets en JavaScript :
Une fois que vous avez créé un objet, vous pouvez accéder à ses propriétés et appeler ses méthodes en utilisant la notation pointée ou la notation des crochets.
Accès aux propriétés : Vous pouvez accéder aux propriétés d'un objet en utilisant la notation pointée (objet.nomPropriete
) ou la notation des crochets (objet["nomPropriete"]
). Par exemple :
Modification des propriétés : Vous pouvez modifier les valeurs des propriétés d'un objet en les réassignant. Par exemple :
Appel des méthodes : Vous pouvez appeler les méthodes d'un objet en utilisant la notation pointée et les parenthèses. Par exemple :
Ajout de nouvelles propriétés et méthodes : Vous pouvez ajouter de nouvelles propriétés et méthodes à un objet existant en les assignant directement. Par exemple :
Suppression de propriétés : Vous pouvez supprimer des propriétés d'un objet en utilisant l'opérateur delete
. Par exemple :
Ces exemples illustrent les bases de la création et de la manipulation d'objets en JavaScript. Les objets en JavaScript sont très flexibles et peuvent être utilisés pour modéliser des entités complexes avec des propriétés et des comportements personnalisés.
Voici un exemple supplémentaire d'un objet "Voiture" en JavaScript.
Dans cet exemple, l'objet "voiture" possède des propriétés telles que "marque", "modèle", "année" et "couleur". La propriété "couleur" est représentée sous forme d'un tableau contenant plusieurs couleurs. L'objet a également des méthodes telles que "démarrer" et "arrêter" qui affichent des messages et la méthode "changerCouleur" qui permet de modifier la couleur de la voiture en remplaçant le tableau existant par un nouveau tableau de couleurs.
LE DOM : Document Object Model
Le DOM représente une page web sous la forme d'une hiérarchie d'objets, où chaque objet correspond à un nœud de l'arborescence de la page.
Les objets du DOM disposent de propriétés et de méthodes permettant de les manipuler avec JavaScript.
Ceux (en bleu) qui correspondent à des éléments HTML, comme <body>
ou <p>
. Ces nœuds peuvent avoir des sous-nœuds, appelés fils ou enfants(children).
Ceux (en rouge) qui correspondent au contenu textuel de la page. Ces nœuds ne peuvent pas avoir de fils.
Les objets globaux sont des objets pré-définis disponibles dans tout environnement d'exécution de code. Les objets globaux les plus couramment utilisés dans les navigateurs web sont l'objet window
et l'objet document
.
L'objet window
représente la fenêtre du navigateur. Il contient de nombreuses propriétés et méthodes pour interagir avec la fenêtre et le document qui y est affiché. L'objet window
est implicitement disponible dans le contexte global de tout script exécuté dans une page web.
L'objet document
représente le document HTML chargé dans la fenêtre du navigateur. Il contient de nombreuses propriétés et méthodes pour interagir avec les éléments HTML et le contenu du document. L'objet document
est une propriété de l'objet window
et est également implicitement disponible dans le contexte global de tout script exécuté dans une page web.
Il existe plusieurs façons de sélectionner un élément du DOM en JavaScript. Voici quelques-unes des méthodes les plus courantes :
getElement(s)By<sélecteur>
Méthode | Nombre d'éléments à obtenir | Critère de sélection |
---|---|---|
getElementsByTagName() | Plusieurs | Par balise |
getElementById() | Un seul | Par identifiant |
getElementsByClassName() | Plusieurs | Par classe |
querySelector() | Un seul (le premier) | Autre que par identifiant |
querySelectorAll() | Plusieurs | Autre que par balise ou par la classe |
getElementById()
Cette méthode sélectionne un élément en utilisant son attribut id
unique. Elle renvoie l'élément correspondant ou null
si aucun élément ne correspond à l'id
spécifié. Voici un exemple :getElementsByClassName()
Cette méthode sélectionne un ou plusieurs éléments en utilisant leur classe CSS. Elle renvoie une collection d'éléments correspondants, ou une collection vide si aucun élément ne correspond à la classe spécifiée. Voici un exemple :getElementsByTagName()
Cette méthode sélectionne un ou plusieurs éléments en utilisant leur nom de balise HTML. Elle renvoie une collection d'éléments correspondants, ou une collection vide si aucun élément ne correspond à la balise spécifiée. Voici un exemple :querySelector()
Cette méthode sélectionne le premier élément correspondant à un sélecteur CSS spécifié. Elle renvoie l'élément correspondant ou null
si aucun élément ne correspond au sélecteur. Voici un exemple :querySelectorAll()
Cette méthode sélectionne tous les éléments correspondant à un sélecteur CSS spécifié. Elle renvoie une liste d'éléments correspondants, ou une liste vide si aucun élément ne correspond au sélecteur. Voici un exemple :En utilisant ces méthodes, il est possible de sélectionner n'importe quel élément du DOM en JavaScript, ce qui est utile pour la manipulation dynamique des pages web.
On peut également sélectionner l'élément parent ou l'élément enfant:
children
parentElement
Oui, en JavaScript, il est possible de sélectionner l'élément parent ou enfant d'un élément donné en utilisant les propriétés parentNode
/parentElement
et childNodes
/children
.
parentNode
/parentElement
: renvoie l'élément parent de l'élément spécifié. Par exemple :Notez que parentNode
renvoie toujours un nœud DOM, tandis que parentElement
renvoie l'élément parent en tant qu'objet DOM Element.
childNodes
: renvoie une collection (un objet NodeList) de tous les nœuds enfants d'un élément, y compris les nœuds textuels et les commentaires. Par exemple :children
: renvoie une collection (un objet HTMLCollection) des éléments enfants d'un élément, en excluant les nœuds textuels et les commentaires. Par exemple :Notez que children
ne contient que les éléments enfants de l'élément, tandis que childNodes
inclut tous les types de nœuds enfants.
Méthodes | Description |
---|---|
innerHTML | La propriété innerHTML renvoie le contenu HTML d'un élément. Certains attributs sont directement accessibles sous la forme de propriétés. C'est notamment le cas pour les attributs id , href et value . |
innerText | La propriété innerText renvoie le contenu textuel d'un élément, sans le balisage HTML. |
textContent | La propriété textContent renvoie le contenu textuel d'un élément, y compris les nœuds enfants. |
getAttribute() | Permet d'accéder à la valeur d'un attribut spécifié pour un élément. |
hasAttribute() | Renvoie un booléen indiquant si l'élément possède ou non l'attribut spécifié. |
setAttribute() | Ajoute un nouvel attribut ou remplace un attribut existant avec la nouvelle valeur spécifiée. |
classList | La propriété classList et ses méthodes permettent d'accéder aux classes d'un élément. |
Node.classList.add("classeAAjouter") permet d'ajouter une classe à un élément. |
|
Node.classList.remove("classeAsupprimer") permet de supprimer une classe d'un élément. |
|
Node.classList.toggle("classeAEchanger") permet d'ajouter la classe si elle est absente et de la supprimer si elle est présente. |
|
createElement() | Crée un nouvel élément HTML avec le nom de balise spécifié. |
appendChild() | Ajoute un nœud à la fin de la liste des enfants d'un élément parent spécifié. |
insertBefore() | Insère un nœud avant le nœud spécifié dans la liste des enfants d'un élément parent spécifié. |
insertAdjacentHTML() | Insère du HTML à l'intérieur ou autour d'un élément spécifié selon l'endroit spécifié. |
replaceChild() | Remplace un nœud enfant existant par un nouveau nœud. |
removeChild() | Supprime un nœud enfant existant d'un élément parent spécifié. |
innerText
est une propriété JavaScript qui permet de récupérer ou définir le texte qui se trouve à l'intérieur d'un élément HTML. Cette propriété ne renvoie que le texte visible à l'écran et exclut le contenu caché par le CSS (par exemple, le texte contenu dans un élément avec un display: none
).innerHTML
est une autre propriété JavaScript qui permet de récupérer ou définir le contenu HTML à l'intérieur d'un élément. Cette propriété renvoie tout le contenu HTML, y compris les balises, les attributs et le texte. Cela signifie que si vous définissez la propriété innerHTML sur une chaîne de caractères contenant des balises HTML, ces balises seront interprétées et les éléments correspondants seront créés dans l'élément cible.textContent
est également une propriété JavaScript qui permet de récupérer ou définir le contenu textuel d'un élément, mais sans interpréter les balises HTML. Cette propriété renvoie uniquement le texte brut sans balises HTML. Elle est donc utile lorsque vous voulez récupérer ou définir uniquement le texte à l'intérieur d'un élément sans les balises HTML.En résumé, la différence entre ces trois propriétés est que innerText
renvoie uniquement le texte visible, innerHTML
renvoie tout le contenu HTML, y compris les balises HTML et leurs attributs, et textContent
renvoie uniquement le texte brut sans balises HTML.
Chaque objet du DOM a une propriété nodeType qui indique son type. La valeur de cette propriété est document.ELEMENT_NODE
pour un nœud "élément" (balise HTML) et document.TEXT_NODE
pour un nœud textuel.
Seuls les nœuds de type élément peuvent avoir des sous-nœuds (appelés enfants)
Tester document.childNodes
La propriété en lecture seule Node.nodeType
représente le type du noeud.
La propriété nodeType peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que Element, Text et Comment .
Type = node.nodeType
: Renvoie un entier (integer) qui spécifie le type du noeud ; les valeurs possibles sont listées dans Constantes.
Constantes de type nœud
Constante | Valeur | Description |
---|---|---|
Node.ELEMENT_NODE | 1 | Un noeud Element tel que <p> ou <div> . |
Node.TEXT_NODE | 3 | Le Text actuel de l'Element ou Attr. |
Node.PROCESSING_INSTRUCTION_NODE | 7 | Une ProcessingInstruction d'un document XML tel que la déclaration <?xml-stylesheet ... ?> . |
Node.COMMENT_NODE | 8 | Un noeud Comment. |
Node.DOCUMENT_NODE | 9 | Un noeud Document. |
Node.DOCUMENT_TYPE_NODE | 10 | Un noeud DocumentType c'est-à-dire <!DOCTYPE> |
Node.DOCUMENT_FRAGMENT_NODE | 11 | Un noeud DocumentFragment |
Exemples:
Différents types de noeuds
L'exemple suivant vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.
À partir de l’adresse https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType
Les événements en JavaScript sont des actions déclenchées par l'utilisateur ou par le navigateur lui-même, tels que cliquer sur un bouton, survoler un élément ou charger une page.
Il existe deux façons de gérer les événements en JavaScript :
Utiliser les attributs d'événements HTML, tels que onclick
, onmouseover
, etc. Ces attributs sont directement ajoutés à l'élément HTML et exécutent du code JavaScript lorsqu'un événement se produit. Voici un exemple :
Ici, la fonction alert()
sera exécutée lorsque l'utilisateur cliquera sur le bouton.
Utiliser la méthode addEventListener()
de l'objet DOM pour associer un événement à un élément HTML et spécifier une fonction à exécuter lorsque l'événement se produit. Voici un exemple :
Ici, la fonction anonyme passée en deuxième argument de la méthode addEventListener()
sera exécutée lorsque l'utilisateur cliquera sur le bouton.
La méthode addEventListener()
présente plusieurs avantages par rapport aux attributs d'événements HTML. Elle permet notamment d'ajouter plusieurs écouteurs d'événements pour un même type d'événement sur un même élément, de spécifier l'ordre dans lequel les écouteurs d'événements doivent être exécutés, et de supprimer facilement les écouteurs d'événements. De plus, elle sépare le code HTML du code JavaScript, ce qui rend le code plus maintenable.
Exemples
Voici quelques exemples d'input HTML et de la façon de les manipuler en JavaScript avec addEventListener :
En JavaScript, vous pouvez récupérer la valeur de cet input et écouter les événements avec la méthode addEventListener comme ceci :
En JavaScript, vous pouvez récupérer la valeur sélectionnée dans le select et écouter les événements avec la méthode addEventListener comme ceci :
En JavaScript, vous pouvez récupérer la valeur sélectionnée dans le groupe de radio boutons et écouter les événements avec la méthode addEventListener comme ceci :
En JavaScript, vous pouvez récupérer l'état de la checkbox et écouter les événements avec la méthode addEventListener comme ceci :
Notez que ces exemples sont simples et que les implémentations peuvent varier en fonction de la situation et de l'objectif de votre code.
target
= élément qui a déclenché l'événement.
currentTarget
= élément qui a l'écouteur d'événement.
En JavaScript, le code peut s'exécuter de manière synchrone ou asynchrone. Le code synchrone est exécuté de manière linéaire, une ligne après l'autre. Le code asynchrone, en revanche, peut être exécuté en parallèle, sans bloquer l'exécution du reste du programme.
La programmation asynchrone est souvent utilisée pour les tâches qui prennent du temps à s'exécuter, comme les appels réseau, les accès à la base de données ou les animations graphiques. Au lieu de bloquer l'exécution du programme pendant que ces tâches sont en cours d'exécution, le programme peut continuer à s'exécuter en parallèle, et recevoir une notification lorsque la tâche asynchrone est terminée.
Voici un exemple simple pour illustrer le principe de l'asynchrone en JavaScript :
Ici, nous utilisons la fonction setTimeout
pour simuler une tâche asynchrone qui prend 2 secondes à s'exécuter. Pendant ce temps, le programme continue à s'exécuter, et affiche "Fin du programme". Après 2 secondes, la fonction passée en argument à setTimeout
est exécutée, et affiche "Tâche asynchrone terminée !".
Un autre exemple concret d'utilisation de l'asynchrone est l'appel réseau avec la fonction fetch
. Cette fonction permet d'effectuer une requête HTTP pour récupérer des données depuis un serveur distant, et renvoie une Promise
. Le programme peut continuer à s'exécuter pendant que la requête est en cours, et recevoir une notification lorsque les données sont disponibles. Voici un exemple :
Ici, nous utilisons la fonction fetch
pour récupérer les données d'un utilisateur GitHub. La fonction fetch
renvoie une Promise
qui est résolue lorsque les données sont disponibles. Nous utilisons les méthodes then
pour traiter les données renvoyées par la Promise
. Pendant ce temps, le programme continue à s'exécuter, et affiche "Fin du programme". Une fois que les données sont disponibles, la fonction passée en argument au deuxième then
est exécutée, et affiche les données récupérées. Si une erreur se produit, la fonction passée en argument à catch
est exécutée.
Il existe plusieurs fonctions asynchrones en JavaScript, en voici quelques-unes :
setTimeout() : La fonction setTimeout() permet de planifier l'exécution d'une fonction donnée après un certain délai (en millisecondes). Elle renvoie un identifiant de temporisation qui peut être utilisé pour annuler la temporisation à tout moment en appelant la fonction clearTimeout().
Exemple :
La fonction retourne setTimeout retourne l'id du processus
setInterval() : La fonction setInterval() permet d'exécuter une fonction donnée à intervalles de temps réguliers (en millisecondes). Elle renvoie un identifiant de temporisation qui peut être utilisé pour arrêter l'intervalle en appelant la fonction clearInterval().
Exemple :
Promesses : Les promesses sont un moyen de gérer des opérations asynchrones en JavaScript. Elles sont utilisées pour encapsuler une valeur qui peut être disponible immédiatement ou plus tard. Une promesse peut être dans l'un des trois états suivants : en attente, résolue ou rejetée. Les promesses sont créées à l'aide du constructeur Promise().
Exemple :
Attention, les promesses ne peuvent pas être réutilisées une fois acceptées ou rejetées
fetch() : La fonction fetch() est utilisée pour récupérer des données à partir d'une URL. Elle renvoie une promesse qui peut être résolue avec la réponse de la requête HTTP. La réponse est généralement convertie en JSON ou en texte à l'aide de la méthode then().
Exemple :
Voir plus de détails sur :
localStorage
est une fonctionnalité du Web Storage API qui permet de stocker des données de manière persistante dans le navigateur web. Contrairement aux cookies, les données stockées dans localStorage
ne sont pas automatiquement envoyées au serveur avec chaque requête. Elles restent disponibles même après la fermeture du navigateur ou le redémarrage de l'ordinateur.
localStorage
est très utile pour stocker des informations telles que les préférences de l'utilisateur, les paniers d'a
, les données de connexion, ou toute autre donnée pertinente pour une application web. Les avantages de localStorage
sont :
Simplicité d'utilisation : localStorage
offre une API simple et facile à utiliser pour stocker et récupérer des données.
Persistence des données : Les données stockées dans localStorage
restent disponibles même après la fermeture du navigateur ou la réouverture de la page.
Stockage côté client : Les données sont stockées localement sur l'ordinateur de l'utilisateur, ce qui réduit la charge du serveur en évitant de stocker toutes les données du côté du serveur.
Capacité de stockage : localStorage
offre généralement une capacité de stockage de plusieurs méga-octets, ce qui permet de stocker des quantités significatives de données.
Cependant, il est important de noter que localStorage
a certaines limitations. Il ne peut stocker que des valeurs sous forme de chaînes de caractères, ce qui signifie que si vous souhaitez stocker des objets JavaScript, vous devrez les convertir en JSON à l'aide des fonctions JSON.stringify()
et JSON.parse()
.
De plus, les données stockées dans localStorage
sont partagées entre tous les scripts du même domaine, il est donc important de faire preuve de prudence lors du stockage de données sensibles et de prendre en compte les problématiques de sécurité liées à l'accès à ces données.
En résumé, localStorage
est une fonctionnalité pratique pour stocker des données de manière persistante côté client dans le navigateur, offrant une solution simple pour la persistance des informations et améliorant l'expérience utilisateur des applications web.
Exemples
voici quelques exemples simples sur l'utilisation de localStorage
en JavaScript.
localStorage
:localStorage
:localStorage
:localStorage
:Notez que localStorage
est limité à environ 5 à 10 Mo de données selon le navigateur et le système d'exploitation utilisé. Il est également important de noter que les données stockées dans localStorage
sont disponibles pour tous les scripts du même domaine, il est donc important de ne pas y stocker des données sensibles.
En JavaScript, les classes sont des structures de programmation qui permettent d'organiser et de regrouper des données et des comportements liés dans un objet. Les classes sont introduites dans ECMAScript 2015 (ES6) et elles sont utilisées pour implémenter l'orientation objet en JavaScript.
Les classes permettent de créer des objets avec des propriétés et des méthodes. Les propriétés sont des variables qui contiennent des données, tandis que les méthodes sont des fonctions qui peuvent être appelées sur ces objets. Les classes fournissent un moyen de définir la structure des objets et les relations entre eux
Les classes permettent également d'utiliser l'héritage, ce qui signifie qu'une classe peut hériter des propriétés et des méthodes d'une autre classe. Cela permet de réutiliser du code et de créer des relations entre les objets qui partagent des fonctionnalités communes
En somme, les classes en JavaScript permettent de structurer le code de manière plus organisée et plus modulaire, en offrant un moyen de regrouper des données et des comportements liés dans des objets, ainsi qu'en permettant l'héritage pour réutiliser et partager du code entre les objets.
Voici un exemple de classe:
Lorsqu'on veut instancier un objet avec des valeurs pour ses propriétés, il est nécessaire que la classe possède une méthode constructor. En d'autres termes, la méthode constructor permet d'initialiser l'objet.
Les getters et setters sont des méthodes qui permettent d'accéder à des propriétés définies.
get
est utilisée pour récupérer la valeur d'une propriétéset
permet de la modifier.Pour les getters et setters, il est courant de préfixer le nom de la propriété par un underscore _
, par exemple : _firstName
.
Les propriétés statiques sont des propriétés qui appartiennent à la classe elle-même plutôt qu'à une instance de la classe. Elles peuvent être utilisées pour stocker des données qui doivent être partagées entre toutes les instances de la classe. Les propriétés statiques sont définies en utilisant le mot-clé static
.
Dans cet exemple, la propriété count
est une propriété statique de la classe Person. Elle est utilisée pour stocker le nombre d'instances de la classe Person créées jusqu'à présent. Chaque fois qu'une nouvelle instance est créée, la propriété count est incrémentée de 1.
Les propriétés privées sont des propriétés qui ne sont pas accessibles en dehors de la classe. Elles sont définies en utilisant le préfixe #. Les propriétés privées ne peuvent être lues ou écrites que par des méthodes à l'intérieur de la classe.
Dans cet exemple, la propriété genre
est définie comme une propriété privée en utilisant le préfixe #
. La méthode get genre()
est utilisée pour lire la valeur de la propriété genre
, et la méthode set age() est utilisée pour modifier sa valeur. Ces méthodes sont les seules méthodes autorisées à accéder à la propriété #age.
La classe est un modèle pour la création d'objets, et le prototype est un objet qui contient des propriétés et des méthodes qui peuvent être héritées par les objets. Chaque objet créé à partir d'une classe hérite des propriétés et des méthodes de son prototype, ainsi que de ceux de ses ancêtres dans la chaîne de prototypes.
Lorsqu'on utilise l'héritage avec la méthode extend
, les propriétés et les méthodes des prototypes sont d'abord appelées dans le prototype le plus proche de l'objet, puis dans les ancêtres. Cela signifie que si une méthode est définie dans la classe enfant et dans la classe parent, la méthode de la classe enfant sera appelée en premier, même si la méthode de la classe parent a le même nom. Cela est possible grâce à la chaîne de prototypes, qui permet aux classes enfants d'hériter des propriétés et des méthodes de leurs classes parentes.
En résumé, la classe est le modèle pour créer des objets, tandis que le prototype est un objet qui contient des propriétés et des méthodes qui peuvent être héritées par les objets créés à partir de cette classe. Les objets héritent des propriétés et des méthodes de leur prototype et de la chaîne de prototypes de leur classe parente. L'héritage permet aux classes enfants d'hériter des propriétés et des méthodes de leurs classes parentes, ce qui permet de réutiliser et de partager du code entre les objets.