Chapitre 4 : les objets en javascript

 Les objets en JavaScript sont des structures de données fondamentales

qui permettent de stocker des informations sous forme de paires clé-
valeur. Ils sont omniprésents dans le langage et constituent la base de
nombreuses fonctionnalités, notamment les API, le DOM et bien plus
encore.
 Il existe plusieurs façons de créer un objet en JavaScript :
 Créer un objet littéral ;
 Utiliser le constructeur Object() ;
 Utiliser une fonction constructeur personnalisée ;
 Créer une classe avec class
Créer un objet littéral
const amina = {
nom : 'sory',
prenom : 'amina',
age : 29,
mail : '[Link]@[Link]',

bonjour: function(){
alert('Bonjour, je suis ' + [Link] + ', j\'ai ' + [Link] + ' ans');
}
};
 On accède aux propriétés "nom" et "age" de "amina" et on affiche leur
valeur dans deux paragraphes p id='p1' et p id='p2'.
 [Link]('p1').innerHTML = 'Nom : ' + [Link];
 [Link]('p2').innerHTML = 'Age : ' + [Link];
 A noter : "document" est en fait aussi un objet, getElementById() une
méthode et innerHTML une propriété de l'API "DOM"!
 On modifie la valeur de la propriété "age" de "amina"
 [Link] = 30;
 On accède à la méthode "bonjour" de l'objet "amina" qu'on exécute de
la même façon qu'une fonction anonyme stockée dans une variable
 [Link]();
Création avec le constructeur Object
let amina = new Object();
[Link]='sory',
[Link]='amina',
[Link]=29,
[Link]='[Link]@[Link]',

[Link] =function(){
alert('Bonjour, je suis ' + [Link] + ', j\'ai ' + [Link] + ' ans');
}
Création à l’aide d’un constructeur personnalisé
function personne(nom, prenom, age, mail)
{
[Link]=nom;
[Link]=prenom;
[Link]=age;
;[Link]=mail;
[Link]= function(){
alert('Bonjour, je suis ' + [Link] + ', j\'ai ' + [Link] + ' ans');
};
}
amina=new personne('sory','amina',29,'[Link]@[Link]');
On ne peut pas ajouter une nouvelle propriété à un constructeur d'objets
existant.
function personne(nom, prenom, age, mail)
{
[Link]=nom;
[Link]=prenom;
[Link]=age;
[Link]=mail;
[Link]= function(){
alert('Bonjour, je suis ' + [Link] + ', j\'ai ' + [Link] + ' ans');
};
}
amina=new personne('sory','amina',29,'[Link]@[Link]');
[Link]='maroc';
[Link]('p1').innerHTML = 'Nom : ' + [Link];;
[Link]('p4').innerHTML = 'nationalité : ' + [Link];
Pour qu’on puisse ajouter une propriété on a deux possibilités:
 L’ajouter à l’intérieur de la fonction constucteur:
function personne(nom, prenom, age, mail)
{
[Link]=nom;
[Link]=prenom;
[Link]=age;
[Link]=mail;
[Link]='maroc';
[Link]= function(){
alert('Bonjour, je suis ' + [Link] + ', j\'ai ' + [Link] + ' ans');
};
}
 Utiliser la propriété prototype : [Link]é='maroc'
Boucler sur un objet
Boucle for …in
for (key in object) {
// code block to be executed
}
let text = "";
for (let x in amina) {
text += amina[x]+'<br>';
}
[Link]('p1').innerHTML = text;
Depuis ES6, JavaScript introduit la syntaxe des classes pour simplifier la
création d’objets.
class Personne {
constructor(nom, age) {
[Link] = nom;
[Link] = age; }
sePresenter() {
alert(`Je m'appelle ${[Link]} et j'ai ${[Link]} ans.`);
}
}
let pierre = new Personne("Pierre", 30); [Link](); // Je
m'appelle Pierre et j'ai 30 ans.
Héritage avec extends et super
Une classe peut hériter d’une autre
class Employe extends Personne {
constructor(nom, age, poste) {
super(nom, age);
[Link] = poste;
}
travailler() {
alert(`${[Link]} travaille en tant que ${[Link]}.`);
}
}
let employe1 = new Employe("Marie", 28, "Développeuse");
[Link](); // Marie travaille en tant que Développeuse.
Les tableaux
• Les tableaux en JavaScript sont des objets spéciaux permettant de
stocker des collections de valeurs. Ils sont très puissants et largement
utilisés en programmation.
• chaque élément du tableau est identifié par un index, qui commence
toujours à 0.
• Pour créer un tableau on utilise soit la notation [ ], soit le constructeur
Array.
let fruits = ["Pomme", "Banane", "Orange"];
let fruits= new Array("Pomme", "Banane", "Orange" );
alert(fruits[0]); // Pomme
alert(fruits[1]); // Banane
alert([Link]); // 3
Parcourir un tableau
Boucle for classique
let nombres = [10, 20, 30];
let x=''
for (let i = 0; i < [Link]; i++)
{ x+=nombres[i]+' '; }
[Link]('p1').innerHTML = x;
La boucle for … of (ES6)
for(let num of nombres)
{ x+=num+' '; }
forEach : la méthode la plus utilisée
<script>
let months=new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
text=''
[Link](function(month, index, array) {
text+=[Link]()+'<br>';
});
[Link]('p1').innerHTML = text;
</script>
Dans le code ci-déssus, forEach parcours le tableau et applique la fontion
anonyme à chacun de ces éléments. La fonction permet de stocker dans la
chaine de caractères text les noms des mois en majuscule
Les tableaux
• Les tableaux en JavaScript sont des objets spéciaux permettant de
stocker des collections de valeurs. Ils sont très puissants et largement
utilisés en programmation.
• chaque élément du tableau est identifié par un index, qui commence
toujours à 0.
• Pour créer un tableau on utilise soit la notation [ ], soit le constructeur
Array.
let fruits = ["Pomme", "Banane", "Orange"];
let fruits= new Array("Pomme", "Banane", "Orange" );
alert(fruits[0]); // Pomme
alert(fruits[1]); // Banane
alert([Link]); // 3
Parcourir un tableau
Boucle for classique
let nombres = [10, 20, 30];
let x=''
for (let i = 0; i < [Link]; i++)
{ x+=nombres[i]+' '; }
[Link]('p1').innerHTML = x;
La boucle for … of (ES6)
for(let num of nombres)
{ x+=num+' '; }
forEach : la méthode la plus utilisée
<script>
let months=new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
text=''
[Link](function(month, index, array) {
text+=[Link]()+'<br>';
});
[Link]('p1').innerHTML = text;
</script>
Dans le code ci-déssus, forEach parcours le tableau et applique la fontion
anonyme à chacun de ces éléments. La fonction permet de stocker dans la
chaine de caractères text les noms des mois en majuscule
Modification d’un tableau
let fruits = ["pomme", "banane"];
Ajouter, Supprimer des éléments à la fin
 push() : Ajoute à la fin.
[Link]("raisin", "orange");
[Link](fruits); // ["pomme", "banane", "raisin", "orange"]
 pop() : Supprime le dernier élément
let dernier = [Link]();
[Link](dernier); // "orange"
[Link](fruits); // ["pomme", "banane", "raisin"]
Ajouter, Supprimer des éléments au début
unshift() : Ajoute au début
[Link]("pastèque");
[Link](fruits); // ["pastèque", "pomme", "banane", "raisin"]
shift() : Supprime le premier élément.
let premier = [Link]();
[Link](premier); // "pastèque«
[Link](fruits); // ["pomme", "banane", "raisin"]
splice() : Ajouter, supprime ou remplace des éléments
[Link](1, 1, "orange"); // Supprime 1 élément à l'index 1 et ajoute
"orange")
[Link](fruits); // ["pomme", "orange" ,"raisin"]
Accéder et rechercher des éléments dans un tableaux
indexOf() : Renvoie l'index de la première occurrence d'un élément (ou -1 s'il
n'existe pas).
[Link]([Link]("orange")); // 1
includes() : Retourne true si l'élément est trouvé dans le tableau
[Link]([Link]("pomme")); // true
[Link]([Link]("ananas")); // false
find() : Retourne le premier élément qui satisfait la condition
let nombres = [10, 25, 30, 45];
let grandNombre = [Link](num => num > 20);
[Link](grandNombre); // 25
findIndex() : Trouver l'index selon une condition
let index = [Link](num => num > 20);
[Link](index); // 1
slice() : Extraire une portion du tableau
let partie = [Link](1, 3); // De l'index 1 à 2 (3 non inclus)
[Link](partie); // [25, 30]
Autres méthodes utiles
sort() : Trier un tableau
let chiffres = [5, 2, 8, 1, 3];
[Link]();
[Link](chiffres); // [1, 2, 3, 5, 8]
reverse() : Inverser l'ordre
[Link]();
[Link](chiffres); // [8, 5, 3, 2, 1]
join() : Convertir en chaîne
[Link]([Link](" - ")); // "pomme - orange - raisin"
split() : Convertir une chaîne en tableau
let texte = "Bonjour, monde!";
let mots = [Link](" ");
[Link](mots); // ["Bonjour,", "monde!"]
Transformation d’un tableau
map() : La méthode map() permet de transformer chaque élément d'un
tableau et de retourner un nouveau tableau avec les éléments modifiés.
[Link]((element, index, array) => {
return nouvelleValeur;
});

element : L’élément actuel du tableau.

index (optionnel) : L’index de l’élément dans le tableau.
array (optionnel) : Le tableau original sur lequel map est appelé.
let double = [Link](num => num * 2);
[Link](double); // [20, 50, 60, 90]
let utilisateurs = [
{ nom: "Ali", age: 25 },
{ nom: "Ahmed", age: 30 },
{ nom: "Chaima", age: 35 }
];

let noms = [Link](user => [Link]);

[Link](noms); // ['Ali', 'Ahmed', 'Chaima']
[Link]("p1").innerHTML = noms;//Ali,Ahmed,Chaima
filter() : utilisée pour filtrer un tableau en gardant seulement les éléments qui
répondent à une condition spécifique.
[Link]((element, index, array) => {
return condition; // true pour inclure l'élément, false pour l'exclure
});
element : L’élément actuel du tableau.
index (optionnel) : L’index de l’élément dans le tableau.
array (optionnel) : Le tableau original sur lequel filter est appelé.

let grandsNombres = [Link](num => num > 20);

[Link](grandsNombres); // [25, 30, 45]
Reduce : utilisée pour réduire un tableau à une seule valeur (nombre, objet,
chaîne, etc.). en appliquant une fonction sur chaque élément du tableau.
[Link]((accumulateur, element, index, array) => {
return nouvelleValeurAccumulateur;
}, valeurInitiale);
accumulateur : La valeur accumulée au fil des itérations.
element : L’élément actuel du tableau.
index (optionnel) : L’index de l’élément dans le tableau.
array (optionnel) : Le tableau original sur lequel reduce est appelé.
valeurInitiale : La valeur initiale de l’accumulateur.
Si initialValue n'est pas fourni, reduce utilisera le premier élément du tableau
comme valeur initiale et commencera à exécuter la fonction à partir du second
élément.
let somme = [Link]((acc, num) => acc + num, 0);
[Link](somme); // 110
let max = [Link]((acc, num) => (num > acc ? num : acc), nombres[0]);
[Link](max); // 45

let mots = ["pomme", "banane", "pomme", "orange", "banane", "pomme"];

Compter le nombre d’occurrence des éléments du tableau
let compteur = [Link]((acc, mot) => {
if(acc[mot])
acc[mot] = acc[mot] + 1;
else
acc[mot]=1;
return acc;
}, {});
[Link](compteur); //{pomme: 3, banane: 2, orange: 1}
L’objet JavaScript String, propriétés et méthodes
 length : La propriété qui permet d’obtenir la longueur d’une chaine de
caractères
 includes() : permet de déterminer si une chaine de caractères est inclue
dans une autre.
 startsWith() : La méthode startsWith() permet de déterminer si une chaine
commence par une certaine sous chaine (ou expression)
 endsWith() : permet de déterminer si une chaine se termine par une
certaine sous chaine
 substring() retourne une sous-chaîne de la chaîne courante à partir d’un
indice de départ comme paramètre. On va également pouvoir passer un
deuxième indice facultatif pour préciser une position de fin pour notre
sous-chaine.
replace() : permet de rechercher une expression dans une chaine de caractères
et de la remplacer par une autre.
toLowerCase() : retourne une chaine de caractères en minuscules.
toUpperCase() : retourne une chaine de caractères en majuscules.
trim() : supprime les espaces en début et en fin de chaîne.

Les expressions régulières

Les expressions régulières (RegExp) sont des motifs permettant de rechercher,
de comparer ou de manipuler du texte en JavaScript. Elles sont particulièrement
utiles pour la validation de formulaires, la recherche et le remplacement de
texte, et le traitement de données textuelles.
1.2.

Création d'une expression régulière

Il existe deux manières de créer une expression régulière en JavaScript :
 Avec la notation littérale (/pattern/flags)
let regex = /hello/i; // Motif "hello" insensible à la casse
 Avec le constructeur RegExp()
let regex = new RegExp("hello", "i");
Les drapeaux (flags)
Les drapeaux modifient le comportement des expressions régulières :
Recherche d’un mot exact
let regex = /chat/;
[Link]([Link]("J'ai un chat")); // true
[Link]([Link]("J'ai un chien")); // false
Recherche globale (toutes les occurrences)
let regex = /a/g;
[Link]("bAnana".match(regex)); ['a', 'a']
let regex = /a/gi;
[Link]("bAnana".match(regex)); ['A', 'a', 'a']
Métacaractères
Les métacaractères sont des symboles spéciaux permettant de créer des
motifs flexibles.
[Link](/\d/.test("Année 2025")); // true (contient un chiffre)
[Link](/\D/.test("12345")); // false (ne contient que des chiffres)
[Link](/\w/.test("-!@1));// true (_ est alphanumérique)
[Link](/\s/.test("Hello World")); // true (contient un espace)
Quantificateurs
Les quantificateurs définissent le nombre de répétitions d’un motif.
[Link](/a+/.test("aabbcc"));// true (1 ou plus)
[Link](/a*/.test("bc")); // true (0 ou plus )
[Link](/a*/.test("abc")); // true
[Link](/a{2,4}/.test("aaab")); // true (entre 2 et 4 'a')
Classes de caractères ([...])
Les classes de caractères permettent de définir un ensemble de caractères
acceptés.
 [Link](/[aeiou]/.test("hello")); // true (contient une voyelle)
[Link](/[^0-9]/.test("123")); // false (pas de non-chiffre)

Fonctions utiles en JavaScript

test()
Retourne true si la chaîne contient le motif.
let regex = /hello/i;
[Link]([Link]("Hello World")); // true
match()
Retourne un tableau des correspondances.
let result = "Bonjour bon bon".match(/bon/g);
[Link](result); // ["bon", "bon"]
let result = "Bonjour bon bon".match(/bon/);
[Link](result); //['bon', index: 8, input: 'Bonjour bon bon', groups:
undefined]
replace()
Remplace une correspondance par une autre.
let text = "Je suis un développeur";
[Link]([Link](/développeur/, "ingénieur")); // Je suis un ingénieur
let text = "Je suis un dével2oppeur1";
[Link]([Link](/[0-9]/, "")); //Je suis un développeur1
[Link]([Link](/[0-9]/g, "")); // Je suis un développeur
[Link]([Link](/[0-9]./g, ""));// Je suis un dévelppeur1
[Link]([Link](/[0-9].*/g, ""));// Je suis un dével

split()
Divise une chaîne en fonction d’une expression régulière.
let data = "Jean,Paul,Marie";
[Link]([Link](/,/)); // ["Jean", "Paul", "Marie"]
let text = "déve1lopp2eur";
[Link]([Link](/[0-9]/)); //['déve', 'lopp', 'eur']
[Link]([Link](//));//erreur
[Link]([Link](/ /));//['déve1lopp2eur']
Chapitre 5 :Manipulation du DOM

 Le DOM (Document Object Model) en JavaScript est une interface de

programmation qui représente la structure d'une page HTML sous forme
d'un arbre hiérarchique.
 Grâce au DOM, JavaScript peut interagir dynamiquement avec le contenu,
la structure et le style d'une page web.
 Il est composé de plusieurs interfaces essentielles qui permettent d'interagir
avec les différents éléments du document:
 Interface Document
 Représente l'ensemble du document HTML ou XML.
 Fournit des méthodes pour accéder aux éléments formant le document
(getElementById, querySelector, etc.).
[Link]([Link]) // Affiche le titre du document
 Interface Element
 Représente un élément HTML (ex: <div>, <p>, <span>).
 Permet de manipuler le contenu, les attributs et le style d’un élément.
let div = [Link]("myDiv");
[Link] = "Bonjour DOM!";
[Link] = "red";
 Interface Node
 Interface de base de tous les objets du DOM (Document, Element, Text,
etc.).
 Contient des propriétés et méthodes générales (parentNode, childNodes,
appendChild, etc.).
let parent = [Link]("container");
let firstChild = [Link]; // Premier nœud enfant
 Interface Text
Représente le contenu textuel à l'intérieur d'un élément.
let textNode = [Link]("Hello World");
[Link](textNode);
 Interface Attr
Représente un attribut d’un élément HTML.
let attr = [Link]("link").getAttribute("href");
[Link](attr);
 Interface EventTarget
Interface qui permet d'ajouter ou de supprimer des écouteurs d'événements
(addEventListener).
[Link]("btn").addEventListener("click", () => {
alert("Bouton cliqué!");
});
 Interface HTMLElement
 Interface spécifique aux éléments HTML (hérite de Element).
 Contient des propriétés comme innerText, hidden, className,
etc.

let para = [Link]("p");

[Link] = "Textajouté";
[Link](para);
Assertions conditionnelles (lookahead/lookbehind)
Ces assertions regardent autour d’un point donné dans la chaîne, mais sans capturer
le texte.
Positive lookahead (?=...)
x(?=y ) Correspond à 'x' seulement si est suivi de 'y'.
/foo(?=bar)/ correspond à "foo" dans "foobar", mais pas dans "foobaz"
Negative lookahead (?!...)
x(?!y ) Correspond à 'x' seulement si x n’est pas suivi de 'y'.
/foo(?!bar)/ correspond à "foo" dans "foobaz" mais pas dans "foobar"
Positive lookbehind (?<=...)
(?<=y)x Correspond à x seulement si x est précédé par y
/(?<=\$)\d+/ correspond à "100" dans "$100" mais pas dans "USD100"
Negative lookbehind (?<!...)
(?<!y)x Correspond à x seulement si x n’est pas précédé par y
/(?<!\$)\d+/ correspond à « USD100" dans "100" mais pas dans "$100"
let regex=/\d+(?=\.)/g;
[Link]("la valeur de pi vaut 3.143 et ne pas 4.25".match(regex));//['3', '4']
let regex=/\d+(?!\.)/g;
[Link]("la valeur de pi vaut 3.143 et ne pas 4.25".match( regex));//['143',
'25']
let regex=/\d(?=\d{2,})/g;
[Link]("la valeur de pi vaut 3143 et ne pas 425".match( regex));//['3', '1',
'4']
[Link]("la valeur de pi vaut 3143 et ne pas 425".replace( regex,'0'));//la
valeur de pi vaut 0043 et ne pas 025
Utilisation de plusieurs (?=…)
const regex = /^(?=.*chat)(?=.*chien)(?=.*oiseau).*/;
Elle vérifie que "chat", "chien", et "oiseau" sont tous présents quelque
part, peu importe l'ordre.
let regex = /(?=.*bar)(?=.*foo).*/g;
let str = "foobarparbon";
let test = [Link](str);
let match =[Link]( regex);
[Link](match);//['foobarparbon']
[Link](test);//true
Chapitre 5 :Manipulation du DOM

 Le DOM (Document Object Model) en JavaScript est une interface de

programmation qui représente la structure d'une page HTML sous forme
d'un arbre hiérarchique.
 Grâce au DOM, JavaScript peut interagir dynamiquement avec le contenu,
la structure et le style d'une page web.
 Il est composé de plusieurs interfaces essentielles qui permettent d'interagir
avec les différents éléments du document:
 Interface Document
 Représente l'ensemble du document HTML ou XML.
 Fournit des méthodes pour accéder aux éléments formant le document
(getElementById, querySelector, etc.).
 [Link]([Link]) // Affiche le titre du document
 Interface Element
 Représente un élément HTML (ex: <div>, <p>, <span>).
 Permet de manipuler le contenu, les attributs et le style d’un élément.
let div = [Link]("myDiv");
[Link] = "Bonjour DOM!";
[Link] = "red";
 Interface Node
 Interface de base de tous les objets du DOM (Document, Element,
Text, etc.).
 Contient des propriétés et méthodes générales (parentNode,
childNodes, appendChild, etc.).
let parent = [Link]("container");
let firstChild = [Link]; // Premier nœud enfant
 Interface Text
 Représente le contenu textuel à l'intérieur d'un élément.
let textNode = [Link]("Hello World");
[Link](textNode);
 Interface Attr
 Représente un attribut d’un élément HTML.
let attr = [Link]("link").getAttribute("href");
[Link](attr);
 Interface EventTarget
 Interface qui permet d'ajouter ou de supprimer des écouteurs d'événements
(addEventListener).
[Link]("btn").addEventListener("click", () => {
alert("Bouton cliqué!");
});
 Interface HTMLElement
 Interface spécifique aux éléments HTML (hérite de Element).
 Contient des propriétés comme innerText, hidden, className, etc.

let para = [Link]("p");

[Link] = "Textajouté";
[Link](para);
Accéder aux éléments dans un document avec JavaScript et
modifier leur contenu
Pour manipuler du contenu HTML déjà présent sur la page, on doit
avant accéder à ce contenu. JavaScript offre différentes propriétés et
méthodes permettant de faire cela:
 Accéder à un élément à partir de son sélecteur CSS associé
 Accéder à un élément en fonction de la valeur de son attribut id
 Accéder à un élément en fonction de la valeur de son attribut class
 Accéder à un élément en fonction de son identité
 Accéder à un élément en fonction de son attribut name
 Accéder directement à des éléments particuliers avec les propriétés de
Document
Accéder à un élément à partir de son sélecteur CSS associé
La façon la plus simple d’accéder à un élément dans un document va être de
la faire en le ciblant avec le sélecteur CSS qui lui est associé.
Deux méthodes nous permettent de faire cela :
querySelector() : Retourne un objet Element représentant le premier élément
dans le document correspondant au sélecteur (ou au groupe de sélecteurs)
CSS passé en argument ou la valeur null si aucun élément correspondant
n’est trouvé.
querySelectorAll() : La méthode renvoie un objet de type NodeList ( listes
de nœuds) contenant des éléments du document qui correspondent au
sélecteur (ou au groupe de sélecteurs) CSS spécifiés. L’objet NodeList
renvoyé est une liste statique (c’est-à-dire une liste dont le contenu ne sera
pas affecté par les changements dans le DOM).
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<script src='[Link]' async></script>
</head>
<body>
<h1 class='bleu'>Titre principal</h1>
<p id='p1'>Un paragraphe</p>
<div>
<p>Un paragraphe dans le div</p>
<p class='bleu'>Un autre paragraphe dans le div</p>
</div>
<p>Un autre paragraphe</p>
</body>
</html>
On met dans le fichier html précédent le fichier [Link] suivant:

[Link]('p').textContent = '1er paragraphe du document';

let documentDiv = [Link]('div');
[Link]('p').textContent = '1er paragraphe du premier div';
[Link]('[Link]').[Link] = 'blue';
let documentParas = [Link]('p');
let divParas = [Link]('p');
[Link](function(nom, index){
[Link] += ' (paragraphe n°:' + index + ')';
})
[Link](function(nom, index){
[Link] += ' (paragraphe n°:' + index + ' dans le div)';
});
Lorsqu’on utilise querySelector() ou querySelectorAll() avec un objet Document, la recherche
se fait dans tout le document. Lorsqu’on utilise l’une de ces méthodes à partir d’un objet
Element, la recherche se fait parmi les descendants de l’élément sur lequel on appelle la
méthode en question
<body>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
<script>
[Link]("li").forEach(item => {
[Link] = "blue";
});
</script>
</body>
Accéder à un élément en fonction de la valeur de son attribut id
getElementById() : est une méthode qu’on va implémenter à partir d’un objet
Document. Elle renvoie un objet Element qui représente l’élément dont la
valeur de l’attribut id correspond à la valeur spécifiée en argument.

[Link]('p1').[Link] = 'blue'; /*la seul ligne dans

[Link]*/
Accéder à un élément en fonction de la valeur de son attribut class
 getElementsByClassName() : Les interfaces Element et Document vont
toutes deux définir cette méthode qui va renvoyer une liste des éléments
possédant un attribut class avec la valeur spécifiée en argument.
 La liste renvoyée est un objet de l’interface HTMLCollection qu’on va
pouvoir traiter quasiment comme un tableau.
 En utilisant la méthode getElementsByClassName() avec un objet
Document, la recherche des éléments se fera dans tout le document. En
l’utilisant avec un objet Element, la recherche se fera dans l’élément en
question.
let elements = [Link]("bleu");
retourne une HTMLCollection qui n'a pas de méthode forEach()
Pour utiliser forEach(), il faut convertir HTMLCollection en array :

[Link](elements).forEach(function(nom, index) {
[Link] = 'blue';
});
OU utiliser l'opérateur de décomposition [...] :
let elements = [Link]("bleu");

[...elements].forEach(function(nom, index) {
[Link] = 'blue';
});
On peut utiliser la boucle for
for (let element of elements) {
[Link] = "blue";
}
Accéder à un élément en fonction de son identité
 getElementsByTagName() permet de sélectionner des éléments en
fonction de leur nom et renvoie un objet HTMLCollection qui consiste en
une liste d’éléments correspondant au nom de balise passé en argument.
 Lorsqu’on utilise getElementsByTagName() avec un objet Document, la
recherche se fait dans tout le document tandis que lorsqu’on utilise
getElementsByTagName() avec un objet Element, la recherche se fera
dans l’élément en question seulement
Accéder à un élément en fonction de son attribut name
 getElementsByName() renvoie un objet NodeList contenant la liste des
éléments portant un attribut name avec la valeur spécifiée en argument.
 On va pouvoir utiliser cette méthode pour sélectionner des éléments de
formulaire par exemple.
Accéder directement à des éléments particuliers avec les propriétés de Document
Finalement, l’interface Document fournit également des propriétés qui vont nous permettre
d’accéder directement à certains éléments ou qui vont retourner des objets contenant des listes
d’éléments. Les plus intéressant ici sont les suivantes :
 La propriété body qui retourne le nœud représentant l’élément body ;
 La propriété head qui retourne le nœud représentant l’élément head ;
 La propriété links qui retourne une liste de tous les éléments a ou area possédant un href avec
une valeur ;
 La propriété title qui retourne le titre (le contenu de l’élément title) du document ou permet de
le redéfinir ;
 La propriété url qui renvoie l’URL du document sous forme de chaine de caractères ;
 La propriété scripts qui retourne une liste de tous les éléments script du document ;
 La propriété cookie qui retourne la liste de tous les cookies associés au document sous forme
de chaine de caractères ou qui permet de définir un nouveau cookie.
//Sélectionne l'élément body et applique une couleur bleu
[Link] = 'blue';
//Modifie le texte de l'élément title
[Link]= 'Le Document Object Model';
Naviguer ou se déplacer dans le DOM en JavaScript grâce aux nœuds
Dans de nombreux cas, nous n’allons pas pouvoir accéder directement à un
élément car nous ne disposerons pas de moyen de le cibler. Dans cette
situation, il va être nécessaire de savoir comment naviguer dans le DOM,
pour atteindre celui qui nous intéresse.
Accéder au parent ou à la liste des enfants d’un nœud
parentNode : cette propriété renvoie le parent du nœud spécifié dans
l’arborescence du DOM ou null si le nœud ne possède pas de parent.
childNodes : cette propriété renvoie une liste des nœuds enfants de
l’élément donné.
children : est utilisée si on ne souhaite récupérer que les nœuds enfants
éléments,
parentElement : permet d’accéder au parent s’il s’agit d’un nœud Element
ou null sinon.
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Titre principal</h1>
<p id='p1'>Un paragraphe <span>avec un span</span></p>
<div>
<p id='p2'>Un paragraphe dans le div</p>
<p>Un autre paragraphe dans le div</p>
</div>
<p>Un autre paragraphe</p>
</body>
<script>
let p1 = [Link]('p1');
let p2 = [Link]('p2');
[Link] = 'RGBa(240,160,000,0.5)'; //Orange
</script>
</html>
<script>
let p1 = [Link]('p1');
let p2 = [Link]('p2');
[Link] =
'RGBa(240,160,000,0.5)'; //Orange
let enfantsP1 = [Link];
enfantsP1[1].[Link] = 'bold';
let enfantsEltP1 = [Link];
enfantsEltP1[0].[Link] = 'underline';
</script>
Accéder à un nœud enfant en particulier à partir d’un nœud parent
firstChild : cette propriété de l’interface renvoie le premier nœud enfant direct d’un certain nœud ou null s’il
n’en a pas.
lastChild : cette propriété au contraire, renvoie le dernier nœud enfant direct d’un certain nœud ou null s’il n’en
a pas.
firstElementChild : permet de renvoyer le premier nœud enfant de type élément seulement d’un certain nœud
lastElementChild : permet de renvoyer le dernier nœud enfant de type élément seulement d’un certain nœud
On ajoute au fichier .html précédent le script suivant:
<script>
let bodyFirstChild = [Link];
let bodyLastChild = [Link];
let bodyFirstElementChild = [Link];
let bodyLastElementChild = [Link];
alert(
'Premier noeud enfant de body : ' + bodyFirstChild +
'\nPremier noeud enfant élément de body : ' + bodyFirstElementChild +
'\nDernier noeud enfant de body : ' + bodyLastChild +
'\nDernier noeud enfant élément de body : ' + bodyLastElementChild
);</script>
Accéder au nœud précédent ou suivant un nœud dans l’architecture
DOM
previousSibling : cette propriété de l’interface renvoie le nœud précédent un certain nœud
dans l’arborescence du DOM (en ne tenant compte que des nœuds de même niveau) ou
null si le nœud en question est le premier.
nextSibling : cette propriété, au contraire, renvoie elle le nœud suivant un certain nœud
dans l’arborescence du DOM (en ne tenant compte que des nœuds de même niveau) ou
null si le nœud en question est le dernier.

Si on souhaite accéder spécifiquement au nœud élément précédent ou suivant un certain

nœud, on utilisera plutôt les propriétés previousElementSibling et nextElementSibling.
<script>
let p1 = [Link]('p1');
let p1PreviousElementSibling = [Link];
let p1NextElementSibling = [Link];
[Link] = 'blue';
[Link] = 'RGBa(240,160,40,0.5)'; //Orange
</script>
Obtenir le nom d’un nœud, son type ou son contenu
Lorsqu’on accède à un certain nœud, on voudra généralement obtenir
le nom de de nœud, savoir ce qu’il contient et connaitre son type. Nous
allons pour cela pouvoir utiliser les propriétés suivantes:
nodeName : retourne une chaine de caractères contenant le nom du
nœud (nom de la balise dans le cas d’un nœud de type Element ou
#text dans le cas d’un nœud de type Text) ;
nodeValue: renvoie ou permet de définir la valeur du nœud. On pourra
notamment utiliser cette propriété sur des nœuds #text pour obtenir le
texte qu’ils contiennent ;
nodeType : renvoie un entier qui représente le type du nœud.
<script>
let p1 = [Link]('p1');
let p1PreviousSibling = [Link];
let p1PreviousElementSibling = [Link];
alert(
'Nom noeud p1 : ' + [Link] +
'\nValeur noeud p1 : ' + [Link] +
'\nType noeud p1 : ' + [Link] +
'\nNom p1PreviousSibling : ' + [Link] +
'\nNom p1PreviousElementSibling: '[Link]+
'\nValeur du premier noeud enfant de p1 : ' + [Link]
);
</script>
Ajouter, modifier ou supprimer des éléments du DOM avec JavaScript
Créer de nouveaux nœuds et les ajouter dans l’arborescence du DOM
createElement() : est une méthode de l’interface qui permet de créer un nouvel
élément HTML. Cette méthode va prendre en argument le nom de l’élément
HTML que l’on souhaite créer.
let newP = [Link]('p');
Nous avons ici créé un nouvel élément p. Celui-ci ne contient pour le moment ni
attribut ni contenu textuel, et n’a pas encore été inséré à l’intérieur de notre page à
un endroit précis. Pour insérer du texte dans notre nœud élément, on va pouvoir
par exemple utiliser la propriété textContent.
[Link] = 'Paragraphe créé et inséré grâce au JavaScript';
On peut également créer directement un nœud de type texte en utilisant la
méthode createTextNode() et ensuite insérer ce nœud dans un nœud élément avec
l’une des méthodes que nous allons voir par la suite.
let newTexte = [Link]('Texte écrit en JavaScript');
Il existe différentes méthodes qui nous permettent d’insérer des nœuds dans d’autres nœuds.
La différence entre ces méthodes va souvent consister dans la position où le nœud va être
inséré.
prepend() : permet d’insérer un nœud ou du texte avant le premier enfant d’un certain nœud
append() : permet d’insérer un nœud ou du texte après le dernier enfant d’un certai nœud.

<script>
let b = [Link];
let newP = [Link]('p');
let newTexte = [Link]('Texte écrit en JavaScript');
[Link] = 'Paragraphe créé et inséré grâce au JavaScript';
//Ajoute le paragraphe créé comme premier enfant de l'élément body
[Link](newP);
//Ajoute le texte créé comme dernier enfant de l'élément body
[Link](newTexte);
</script>
appendChild() : permet d’ajouter un nœud en tant que dernier
enfant d’un nœud parent.
Les différences entre append() et appendChild() sont les suivantes :
 La méthode append() permet également d’ajouter directement
une chaine de caractères tandis que appendChild() n’accepte que
des objets de type Node ;
 La méthode append() peut ajouter plusieurs nœuds et chaines de
caractères au contraire de appendChild() qui ne peut ajouter
qu’un nœud à la fois ;
 La méthode append() n’a pas de valeur de retour, tandis que
appendChild() retourne l’objet ajouté
let b = [Link];
let newP = [Link]('p');
let newTexte = [Link]('Texte inséré avec appendChild()');
[Link] = 'Paragraphe créé et inséré grâce au JavaScript';
//Ceci fonctionne
[Link](newP, 'Texte inséré avec append()');
//Ceci fonctionne
[Link](newTexte);
//Ceci ne fonctionne pas : [Link]('Texte écrit en JavaScript');
//Ceci ne fonctionne pas non plus : [Link](newP, newTexte);
insertBefore() : permet pour sa part d’insérer un nœud en tant qu’enfant d’un autre
nœud juste avant un certain nœud enfant donné de ce parent.
Cette méthode va prendre en arguments le nœud à insérer et le nœud de référence
<script>
let b = [Link];
let p1 = [Link]('p1');
let newP = [Link]('p');
[Link] = 'Paragraphe créé et inséré grâce au JavaScript';
[Link](newP,p1);
</script>
D’autres methodes peuvent être utilisées
insertAdjacentElement() insère un nœud élément à une position donnée par rapport à
l’élément sur lequel il est appelé.
insertAdjacentText() insère un nœud texte à une position donnée par rapport à
l’élément sur lequel il est appelé.
insertAdjacentHTML() analyse une chaine de caractères en tant que HTML et insère
les nœuds créés avec le balisage donné dans le DOM à une certaine position spécifiée.
Pour chacune de ces trois méthodes, nous allons devoir spécifier la position où on
souhaite insérer nos nœuds ainsi que le nœud à insérer en arguments. Pour la position, il
faudra fournir l’un des mots clefs suivants :
beforebegin : Insère le ou les nœuds avant l’élément ;
afterbegin : Insère le ou les nœuds avant le premier enfant de l’élément ;
beforeend : Insère le ou les nœuds après le dernier enfant de l’élément ;
afterend : Insère le ou les nœuds après l’élément.
<script>
let b = [Link];
let p1 = [Link]('p1');
let p2 = [Link]('p2');
let newP = [Link]('p');
let htmlContent = '<strong> et du texte important</strong>';
[Link] = 'Paragraphe créé et inséré grâce au JavaScript';
//Ajoute un paragraphe après p1
[Link]('afterend', newP);
//Ajoute le contenu de htmlContent avant la balise fermante de p1
[Link]('beforeend', htmlContent);
//Ajoute du texte après la balise ouvrante de p2
[Link]('afterbegin', 'Texte ajouté dans ');
</script>
Déplacer un nœud dans le DOM
Pour déplacer un nœud dans le DOM, on peut utiliser l’une des méthodes
appendChild() ou insertBefore() en leur passant en argument un nœud qui existe déjà
et qui est déjà placé dans le DOM.
Dans ce cas-là, les méthodes vont déplacer le nœud dans le DOM vers la nouvelle
position indiquée.
<script>
let b = [Link];
let p1 = [Link]('p1');
//On accède au dernier élément (le script)
let p4 = [Link];
//On déplace p1 juste avant p4 dans le DOM
[Link](p1, p4);
</script>
Cloner ou remplacer un nœud dans le DOM
cloneNode() : permet de cloner un nœud en renvoyant une copie du nœud
sur lequel elle a été appelée. Cette méthode prend un booléen en argument.
Si la valeur passée est true, les enfants du nœud seront également clonés. Si
on lui passe false, en revanche, seul le nœud spécifié sera cloné.
Par défaut, cette méthode copie également le contenu du nœud copiée.
replaceChild() : permet de remplacer un nœud, par un autre.
Cette méthode va prendre en arguments le nœud de remplacement et le
nœud qui doit être remplacé. Notez que si le nœud de remplacement existé
déjà dans le DOM, il sera d’abord retiré de son emplacement d’origine.
<script>
let b = [Link];
let p1 = [Link]('p1');
let p2 = [Link]('p2');
let p4 = [Link]('p4') ;//On accède au quatrième paragraphe
let newP = [Link]('p'); //On crée un nouveau paragraphe
[Link] = 'Paragraphe créé et inséré grâce au JavaScript';
//On clone p1 et on insère le clone après p2
let cloneP1 = [Link](true);
[Link]('afterend', cloneP1);
//On remplace p4 par newP
[Link](newP, p4);
</script>
Supprimer un nœud du DOM
removeChild() : permet de supprimer un nœud enfant passé en argument d’un certain
nœud parent de l’arborescence du DOM. Cette méthode retournele nœud retiré.
remove() : permet tout simplement de retirer un nœud de l’arborescence du DOM
let b = [Link];
let p1 = [Link]('p1');
let p2 = [Link]('p2');
//Supprime p1 du DOM et renvoie le noeud supprimé
let eltDel = [Link](p1);
//Supprime p2 du DOM
[Link]()
[Link]('Noeud supprimé du DOM : ' + eltDel + '\nContenu : '
+ [Link]);
Manipuler les attributs, les styles et le contenu des éléments
Tester la présence d’attributs
hasAttribute() : permet de tester la présence d’un attribut particulier pour un élément. Cette
méthode prend en argument le nom de l’attribut qu’on recherche et renvoie true si l’élément
possède bien cet attribut ou false sinon.
hasAttributes() : permet de vérifier si un élément possède des attributs ou pas. Cette
méthode retourne true si l’élément possède au moins un attribut ou false si l’élément ne
possède pas d’attribut.
getAttribute() : permet de récupérer la valeur d’un attribut donné pour un élément.
Cette méthode renvoie la valeur de l’attribut donné si celui-ci existe ou null ou la
chaine de caractères vide dans le cas contraire.
setAttribute() : ajoute ou modifie l’attribut class de l’élément avec l’ID monBouton.
getAttributeNames() permet récupérer que les noms des attributs d’un élément sous forme
de tableau (type Array).
removeAttribute() : permet de supprimer un attribut d’un élément,. Cette méthode va
prendre en argument le nom de l’attribut à supprimer.
<body>
<h1>Titre principal</h1>
<p id='p1' class='blue'>Un paragraphe <span>avec un span</span></p>
<div>
<p id='p2'>Un paragraphe dans le div</p>
<p>Un autre paragraphe dans le div</p>
</div>
<p>Un autre paragraphe</p>
<p id='vide'></p>
<script>
let p1 = [Link]('p');
let vide = [Link]('vide');
//Si p1 possède des attributs, hasAttributes() renvoie true
if([Link]()){
[Link] = 'p1 possède des attributs';
}
//Si p1 possède un attribut id, hasAttribute() renvoie true
if([Link]('id')){
[Link] += ' dont un attribut id';
}
</script>
Modifier les styles d’un élément
La propriété style de HTMLElement va nous permettre de définir les styles en ligne d’un
élément.
<script>
let p1 = [Link]('p');
let p2 = [Link]('p2');
[Link] = 'crimson'; //Nuance de rouge
[Link] = '20px';
[Link] = 'orange';
</script>
Modification du contenu d’un élément HTML
innerHTML : cette propriété permet de modifie le HTML interne d’un élément.
innerText : permet de modifie le texte visible d’un élément, sans interpréter le HTML.
textContent : Semblable à innerText
<body>
<h1>Titre principal</h1>
<p id="p1"></p>
<p id="p2"></p>
<div id="demo">Texte initial</div>
<script>
let element = [Link]("demo");
let p1=[Link]("p1");
let p2=[Link]("p2");
[Link] = "<em>Nouveau</em> contenu de P1";
[Link] = "<em>Nouveau</em> contenu"; // Affiche les balises
[Link] = "<em>Nouveau</em> contenu"; // Pareil ici
</script>
</body>
La gestion d’évènements en JavaScript
Un évènement est provoque par une action de l'utilisateur ou du navigateur
lui-même. Les évènements ont des noms tels que click, load et mouseover.
Une fonction appelée en réponse a un événement se nomme un écouteur
(event handler ou event listener). Souvent, leur nom commence par on
comme par exemple onclik ou onload.
Associer des écouteurs aux événements possibles peut se faire de trois
manières différentes:
• On peut utiliser des attributs HTML de type évènement;
• On peut utiliser des propriétés JavaScript liées aux évènements ;
• On peut utiliser la méthode addEventListener() (recommandé).
Liste des événements
click : Cliquer (appuyer puis relâcher) 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 : Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément
mouseup : Relâcher le bouton gauche de la souris sur l'élément
mousemove : Faire déplacer le curseur sur l'élément
keydown : Appuyer (sans relâcher) sur une touche de clavier sur l'élément
keyup : Relâcher une touche de clavier sur l'élément
keypress : Frapper (appuyer puis relâcher) une touche de clavier sur l'élément
focus : Cibler l'élément
blur : Annuler le ciblage de l'élément
change : Changer la valeur d'un élément spécifique aux formulaires (input,
checkbox, etc.)
select : Sélectionner le contenu d'un champ de texte (input, textarea, etc.)
Deux événements spécifiques à <form> :
submit : Envoyer le formulaire
reset : Réinitialiser le formulaire
Utiliser les attributs HTML pour gérer un évènement
Ces attributs HTML de « type évènement » possèdent souvent le nom de
l’évènement qu’ils doivent écouter et gérer précédé par « on » comme
onclick par exemple :
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<button onclick="alert('Bouton cliqué')">Cliquez moi !</button>
<div onmouseover="[Link]='orange'"
clic
onmouseout="[Link]='white'"> Passage souris
<p>Un paragraphe dans un div</p>
<p>Un autre paragraphe dans le div</p>
</div>
</body>
Utiliser les propriétés JavaScript pour gérer un évènement
Ces gestionnaires d’évènements sont des propriétés qui sont de la forme « on » + nom de l’évènement géré, c’est-à-
dire qui ont des noms similaires aux attributs HTML vus précédemment.
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<button>Cliquez moi !</button>
<div>
<p>Un paragraphe dans un div</p>
<p>Un autre paragraphe dans le div</p>
</div>
<script>
//On sélectionne le premier button et le premier div du document
let b1 = [Link]('button');
let d1 = [Link]('div');
//On utilise les propriétés gestionnaires d'évènement avec nos éléments
[Link] = function(){alert('Bouton cliqué')};
[Link] = function(){[Link] ='orange'};
[Link] = function(){[Link]='white'};
</script>
Inconvénient : on ne peut avoir qu’un seul gestionnaire par propriété (onclick, onmouseover, etc.).
Utiliser la méthode addEventListener() pour gérer un évènement
let b1 = [Link]('button');
let d1 = [Link]('div');
//On utilise la méthode addEventListener pour gérer des évènements
[Link]('click', function(){alert('Bouton cliqué')});
[Link]('mouseover', function(){[Link] ='orange'});
[Link]('mouseover', function(){[Link] ='bold'});
[Link]('mouseout', function(){[Link]='white'});
Supprimer un gestionnaire d’évènements avec removeEventListener()
let b1 = [Link]('button');
let d1 = [Link]('div');
function changeCouleur(){[Link] ='orange';}
//On utilise la méthode addEventListener pour gérer des évènements
[Link]('click', function(){alert('Bouton cliqué')});
[Link]('mouseover', changeCouleur);
[Link]('mouseover', function(){[Link] ='bold'});
//On supprime un évènement
[Link]('mouseover', changeCouleur);
La propagation des évènements en JavaScript
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<div id='d1'>
<p id='d1p1'>Un paragraphe dans un div</p>
<p id='d1p2'>Un autre paragraphe dans le div</p>
</div>
<script>
let d1 = [Link]('#d1');
let d1p1 = [Link]('#d1p1');
[Link]('click', function(){alert('div cliqué')});
[Link]('click', function(){alert('paragraphe cliqué')});
</script>
</body>
L’exécution du code ci-dessus montre que si on clique sur le paragraphe d1p1, l’alerte liée au paragraphe
d1p1 sera affiché avant l’alerte liée à son père div d1: l’événement se propage du fils vers le père
Propagation du père vers le fils
Pour que la propagation se fasse du père vers le fils, on ajoute le paramètre
true comme il est montré sur le code ci-dessous:

let d1 = [Link]('#d1');
let d1p1 = [Link]('#d1p1');
[Link]('click', function(){alert('div cliqué')}, true);
[Link]('click', function(){alert('paragraphe cliqué')}, true);
Stopper la propagation d’un évènement
let d1 = [Link]('#d1');
let d1p1 = [Link]('#d1p1');

[Link]('click', function(){alert('div cliqué')});

[Link]('click', cliqueAndStop);
//L'argument 'e' ici sert de référence à un objet Event
function cliqueAndStop(e){
alert('Paragraphe cliqué - Arrêt de la propagation');
[Link]();
}
Après l’exécution du code il y aura l’affichage de l’alerte du paragraphe seulement, celle de d1 sera
stoppée
Prévenir le comportement de base d’un évènement
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<!--On imagine que [Link] existe-->
<form method='post' action='[Link]'>
<label for='prenom'>Entrez un prénom</label>
<input type='text' name='prenom' id='prenom'>
<input type='submit' value='Envoyer' id='btn-envoi'>
</form>
<script>
let envoi = [Link]('btn-envoi');
[Link]('click', testDonnees);
function testDonnees(e){
/*Si (if...) les données ne remplissent pas certaines conditions, renvoie un
message et empêche l'action par défaut du clic = l'envoie du formulaire*/
alert('Envoi du formulaire bloqué');
[Link]();
}
</script>
</body>