Formation Java Script
Formation Java Script
SCRIPT
IT TALENT SCHOOL
Kamel.bahmed.info@gmail,com
PRÉREQUIS
1. Connaissances générales de la terminologie de l’algorithmique objet (type, fonction, etc.)
2. HTML
3. CSS
PROGRAMME
Les base je javascript • Manipulation du DOM
• Introduction (Document Object Model)
• Possibilités d'affichage
• BOM
• Variables • Écouteur d'événements
• Let • Événements de synchronisation • Navigation JavaScript
• Const • Méthodes HTML DOM • Relations de nœud
• Opérateurs arithmétiques • Naviguer entre les nœuds
• Recherche d'éléments
• Opérateurs d'affectation • Ajout et suppression de nœuds
• Opérateurs de chaîne • Modification des éléments HTML • L'objet HTML Collection
• Opérateurs de comparaison • Ajout et suppression d'éléments • JQuery (Extra)
• Opérateurs logiques
• Recherche d'objets HTML
• Fonctions
• Événements • Formulaires JavaScript
• Méthodes de chaîne • Modification du style HTML
• Tableaux
• Animation JavaScript
• Les conditions
• Les boucles
JAVASCRIPT
• Le JavaScript est un langage de programmation créé en 1995. Le JavaScript est aujourd’hui
l’un des langages de programmation les plus populaires et il fait partie des langages web
dits « standards » avec le HTML et le CSS. Son évolution est gérée par le groupe ECMA
International qui se charge de publier les standards de ce langage.
• On dit que le HTML, le CSS et le JavaScript sont des standards du web car les principaux
navigateurs web (Google Chrome, Safari, Firefox, etc.) savent tous « lire » (ou « comprendre
» ou « interpréter ») ces langages et les interprètent généralement de la même façon ce qui
signifie qu’un même code va généralement produire le même résultat dans chaque
navigateur.
JAVASCRIPT
• Pour définir ce qu’est le JavaScript et le situer par rapport aux autres langages, et donc pour
comprendre les intérêts et usages du JavaScript il faut savoir que :
langage (principalement) • Un langage « côté client » ou « client side » est un langage qui va
être exécuté dans le navigateur des utilisateurs qui demandent la
côté client page..
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>
Vous pouvez placer n'importe quel nombre de
</body> scripts dans un document HTML.
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
Placer des scripts dans des fichiers externes </body>
présente certains avantages : </html>
• Vous pouvez également affecter une valeur à la variable lorsque vous la déclarez :
• Les variables déclarées à l'intérieur d'un bloc { } avec Let ne sont pas
accessibles depuis l'extérieur du bloc :
CONST JAVASCRIPT
• Une const variable ne peut pas être réaffectée :
OPÉRATEURS ARITHMÉTIQUES JAVASCRIPT
• Les opérateurs arithmétiques sont utilisés pour effectuer des opérations
arithmétiques sur des nombres :
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
OPÉRATEURS D'AFFECTATION JAVASCRIPT
• Les opérateurs d'affectation attribuent des valeurs aux variables JavaScript.
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
OPÉRATEURS LOGIQUES JAVASCRIPT
Operator Description
&& logical and
|| logical or
! logical not
FONCTIONS JAVASCRIPT
• Une fonction JavaScript est un bloc de code conçu pour effectuer une
tâche particulière.
• Une fonction JavaScript est exécutée lorsque "quelque chose" l'invoque
(l'appelle).
VARIABLES LOCALES
• Les variables déclarées dans une fonction JavaScript deviennent LOCALES à la
fonction.
• Les variables locales ne sont accessibles qu'à partir de la fonction.
• Étant donné que les variables locales ne sont reconnues qu'à l'intérieur de
leurs fonctions, les variables portant le même nom peuvent être utilisées
dans différentes fonctions.
• Les variables locales sont créées lorsqu'une fonction démarre et
supprimées lorsque la fonction est terminée.
ÉVÉNEMENTS JAVASCRIPT
• Les événements HTML sont des "choses" qui arrivent aux éléments HTML.
• Lorsque JavaScript est utilisé dans des pages HTML, JavaScript peut "réagir" à
ces événements.
• Voici quelques exemples d'événements HTML :
• Une page Web HTML a fini de se charger
• Un champ de saisie HTML a été modifié
• Un bouton HTML a été cliqué
• HTML permet d'ajouter des attributs de gestionnaire d'événements, avec du
code JavaScript , aux éléments HTML.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
</body>
</html>
Événement La description
<p id="demo"></p>
<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>
Method Description
charAt() Renvoie le caractère à un index spécifié (position)
charCodeAt() Renvoie l'unicode du caractère à un index spécifié
concat() Retourne deux chaînes rejoints ou plus
endsWith() Renvoie si une chaîne se termine par une valeur spécifiée
fromCharCode() Renvoie les valeurs Unicode en tant que caractères
includes() Renvoie si une chaîne contient une valeur spécifiée
indexOf() Renvoie l'index (position) de la première occurrence d'une valeur dans une
chaîne
lastIndexOf() Renvoie l'index (position) de la dernière occurrence d'une valeur dans une
chaîne
localeCompare() Compare deux chaînes dans le lieu actuel
match() Recherche une chaîne pour une valeur, ou une expression régulière, et
renvoie les correspondances
repeat() Renvoie une nouvelle chaîne avec un certain nombre de copies d'une
chaîne
replace() Recherche une chaîne pour une valeur, ou une expression régulière, et renvoie une chaîne
où les valeurs sont remplacées
search() Recherche une chaîne pour une valeur ou une expression régulière, et renvoie l'index
(position) de la correspondance
slice() Extrait une partie d'une chaîne et renvoie une nouvelle chaîne
split() Divise une chaîne dans un tableau de sous-chaînes
startsWith() Vérifie si une chaîne commence par des caractères spécifiés
substr() Extrait un certain nombre de caractères d'une chaîne, à partir d'un index de départ
(position)
substring() Extrait les caractères d'une chaîne, entre deux indices spécifiés (positions)
toLocaleLowerC
ase() Renvoie une chaîne convertie en lettres minuscules, en utilisant le lieu de l'hôte
toLocaleUpperC
ase() Renvoie une chaîne convertie en lettres majuscules, en utilisant le lieu de l'hôte
toLowerCase() Renvoie une chaîne convertie en lettres minuscules
toString() Renvoie une chaîne ou un objet de chaîne en tant que chaîne
toUpperCase() Renvoie une chaîne convertie en lettres majuscules
trim() Renvoie une chaîne avec des espaces blancs supprimés
valueOf() Renvoie la valeur primitive d'une chaîne ou d'un objet de chaîne
TABLEAUX JAVASCRIPT
• Un tableau est une variable spéciale, qui peut contenir plusieurs valeurs :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
• On accède à un élément du tableau en se référant au numéro d'index :
Remarque : Les index de tableau commencent par 0.
[0] est le premier élément. [1] est le deuxième élément.
• La propriété de longueur
MÉTHODES DE TABLEAU
JAVASCRIPT
Method Description
concat() Rejoint deux tableaux ou plus et renvoie une copie des tableaux joints
copyWithin() Copie les éléments du tableau dans le tableau, vers et depuis des positions spécifiées
entries() Renvoie un objet d'itération du tableau de paire de clés / valeur
every() Vérifie si chaque élément d'un tableau passe un test
fill() Remplissez les éléments dans un tableau avec une valeur statique
filter() Crée un nouveau tableau avec chaque élément d'un tableau qui passe un test
find() Renvoie la valeur du premier élément d'un tableau qui passe un test
findIndex() Renvoie l'index du premier élément d'un tableau qui passe un test
forEach() Appelle une fonction pour chaque élément de tableau
from() Crée un tableau à partir d'un objet
includes() Vérifiez si un tableau contient l'élément spécifié
indexOf() Recherchez le tableau un élément et renvoie sa position
isArray() Vérifie si un objet est un tableau
join() Rejoint tous les éléments d'un tableau dans une chaîne
keys() Renvoie un objet d'itération du tableau, contenant les clés du tableau d'origine
lastIndexOf() Recherchez le tableau un élément, à partir de la fin, et renvoie sa position
map()
Crée un nouveau tableau avec le résultat de l'appel d'une fonction pour chaque élément de tableau
pop() Supprime le dernier élément d'un tableau et renvoie cet élément
push() Ajoute de nouveaux éléments à la fin d'un tableau et renvoie la nouvelle longueur
unshift() Ajoute de nouveaux éléments au début d'un tableau et renvoie la nouvelle longueur
valueOf() Renvoie la valeur primitive d'un tableau
reduce()
Réduire les valeurs d'un tableau à une seule valeur (aller à droite)
reduceRight()
Réduire les valeurs d'un tableau à une seule valeur (aller droit à gauche)
reverse()
Inverse l'ordre des éléments dans un tableau
shift()
Supprime le premier élément d'un tableau et renvoie cet élément
slice()
Sélectionne une partie d'un tableau et renvoie le nouveau tableau
some()
Vérifie si l'un des éléments d'un tableau passe un test
sort()
Trie les éléments d'un tableau
splice()
Ajoute / supprime les éléments d'un tableau
toString()
Convertit un tableau en une chaîne et renvoie le résultat
MAP DE TABLEAU
JAVASCRIPT()
• La map() méthode crée un nouveau tableau en exécutant une fonction sur chaque élément du tableau.
• La map() méthode n'exécute pas la fonction pour les éléments de tableau sans valeurs.
• La map() méthode ne modifie pas le tableau d'origine.
<!DOCTYPE html> Cet exemple multiplie chaque valeur
<html>
de tableau par 2 :
<body>
<h2>JavaScript Array.map()</h2>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
Notez que la fonction prend 3
function myFunction(value, index, array) { arguments :
return value * 2;
} •La valeur de l'article
</script> •L'index des articles
</body> •Le tableau lui-même
</html>
• Lorsqu'une fonction de rappel utilise uniquement le paramètre value, les
paramètres index et array peuvent être omis :
FILTRE DE TABLEAU JAVASCRIPT()
• La filter() méthode crée un nouveau tableau avec des éléments de tableau qui réussit un test.
• Cet exemple crée un nouveau tableau à partir d'éléments dont la valeur est supérieure à 18 :
• Dans l'exemple ci-dessus, la fonction de rappel n'utilise pas les paramètres d'index et de tableau, ils peuvent donc être
omis :
L'INSTRUCTION IF
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if</h2>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>
<script>
const hour = new Date().getHours();
let greeting;
document.getElementById("demo").innerHTML = greeting;
</script>
<script>
const time = new Date().getHours();
let greeting;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
BOUCLES JAVASCRIPT
LE MODÈLE D'OBJET DE
NAVIGATEUR (BOM)
• Le Browser Object Model (BOM) permet à JavaScript de "parler" au
navigateur.
• Il n'existe pas de normes officielles pour le Browser O bject Model
( BOM ).
• Étant donné que les navigateurs modernes ont implémenté (presque) les
mêmes méthodes et propriétés pour l'interactivité JavaScript, on y fait
souvent référence en tant que méthodes et propriétés du BOM.
WINDOW OBJET
• L' window objet est pris en charge par tous les navigateurs. Il représente la fenêtre
du navigateur.
• Tous les objets, fonctions et variables JavaScript globaux deviennent
automatiquement membres de l'objet window.
• Les variables globales sont des propriétés de l'objet window.
• Les fonctions globales sont des méthodes de l'objet window.
• Même l'objet document (du DOM HTML) est une propriété de l'objet window :
• window.document.getElementById("header");
• est le même que:
• document.getElementById("header");
PROPRIÉTÉS DE L'OBJET
WINDOW
Property Description
closed Renvoie un Boolean True si une fenêtre est fermée.
console Renvoie l'objet console pour la fenêtre.
Voir aussi l'objet Console.
defaultStatus Déprécié.
document Renvoie l'objet document pour la fenêtre.
Voir aussi l'objet de document.
frameElement
Renvoie le cadre dans lequel la fenêtre s'exécute.
frames Renvoie tous les objets de fenêtre en cours d'exécution dans la fenêtre.
history Renvoie l'objet historique de la fenêtre.
Voir aussi l'objet historique.
innerHeight
Renvoie la hauteur de la zone de contenu de la fenêtre (fenêtre), y compris les barres de défilement
innerWidth
Renvoie la largeur de la zone de contenu d'une fenêtre (fenêtre), y compris les barres de défilement
length Renvoie le nombre d'éléments <frame> dans la fenêtre actuelle
localStorage
Permet d'enregistrer les paires de clés / valeur dans un navigateur Web. Stocke les données sans date d'expiration
location Renvoie l'objet d'emplacement pour la fenêtre.
Voir aussi l'objet de localisation.
name Définit ou renvoie le nom d'une fenêtre
navigator Renvoie l'objet Navigator pour la fenêtre.
Voir aussi l'objet Navigator.
opener Renvoie une référence à la fenêtre qui a créé la fenêtre
outerHeight
Renvoie la hauteur de la fenêtre du navigateur, y compris les barres d'outils / barres de défilement
outerWidth
Renvoie la largeur de la fenêtre du navigateur, y compris les barres d'outils / barres de défilement
pageXOffset
Renvoie les pixels que le document actuel a été défilé (horizontalement) du coin supérieur gauche de la fenêtre
pageYOffset
Renvoie les pixels que le document actuel a été défilé (verticalement) du coin supérieur gauche de la fenêtre
parent Renvoie la fenêtre parent de la fenêtre actuelle
screen
Renvoie l'objet d'écran pour la fenêtre
Voir aussi l'objet d'écran
screenLeft
Method Description
alert()
Affiche une boîte d'alerte avec un message et un bouton OK
atob()
Décode une chaîne codée de base-64
blur()
Supprime la mise au point de la fenêtre actuelle
btoa()
Code pour une chaîne dans la base-64
clearInterval()
Efface un jeu de minuterie avec setInterval ()
clearTimeout()
Efface un jeu de minuterie avec setTimeout ()
close()
Ferme la fenêtre actuelle
confirm()
Appelle une fonction ou évalue une expression à intervalles spécifiés (en millisecondes)
setTimeout()
Appelle une fonction ou évalue une expression après un nombre spécifié de millisecondes
stop()
Empêche la fenêtre de charger
ÉVÉNEMENTS DE
SYNCHRONISATION JAVASCRIPT
• Si la fonction n'a pas encore été exécutée, vous pouvez arrêter l'exécution en
appelant la clearTimeout() méthode :
<script>
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
COMMENT ARRÊTER L'EXÉCUTION ?
• La clearInterval()méthode arrête les exécutions de la fonction spécifiée dans la
méthode setInterval().
• La clearInterval()méthode utilise la variable renvoyée par setInterval():
<p id="demo"></p>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
JAVASCRIPT HTML DOM
• Avec le DOM HTML, JavaScript peut accéder et modifier tous les éléments d'un document HTML
• Lorsqu'une page Web est chargée, le navigateur crée un modèle d' objet de document de la
page.
• Le modèle HTML DOM est construit comme un arbre d' Objets :
• Avec le modèle objet, JavaScript obtient toute la puissance dont il a besoin
pour créer du HTML dynamique :
• JavaScript peut modifier tous les éléments HTML de la page
• JavaScript peut modifier tous les attributs HTML de la page
• JavaScript peut modifier tous les styles CSS de la page
• JavaScript peut supprimer des éléments et des attributs HTML existants
• JavaScript peut ajouter de nouveaux éléments et attributs HTML
• JavaScript peut réagir à tous les événements HTML existants dans la page
• JavaScript peut créer de nouveaux événements HTML dans la page
•
QU'EST-CE QUE LE DOM HTML ?
La méthode getElementById
Le moyen le plus courant d'accéder à un élément
HTML est d'utiliser le idde l'élément.
La propriété innerHTML
Le moyen le plus simple d'obtenir le contenu d'un
élément consiste à utiliser la innerHTMLpropriété.
Method Description
document.getElementById(id)
Property Description
La description
element.setAttribute(attribute, value)
Method Description
document.createElement(element)
Method Description
document.getElementById(id).onclick = function(){code}
Ajout du code du gestionnaire d'événements à un
événement OnClick
RECHERCHE D'OBJETS HTML
Property Description
document.anchors
Renvoie tous les <a> éléments qui ont un attribut de nom
document.applets
Décousu
document.baseURI
Renvoie l'uri de base absolue du document
document.body
Renvoie l'élément <body>
document.cookie
Renvoie le cookie du document
document.doctype
Renvoie le doctype du document
document.documentElement
Renvoie l'élément <html>
document.documentMode
Renvoie le mode utilisé par le navigateur
document.documentURI
Renvoie l'URI du document
document.domain
Renvoie le nom de domaine du serveur de documents
document.domConfig
Obsolète.
document.embeds
Renvoie tous les éléments <embed>
document.forms
Renvoie tous les éléments <form>
document.head
Renvoie l'élément <éadfre
document.images
Renvoie tous les éléments <img>
document.implementation
Renvoie l'implémentation DOM
document.inputEncoding
Renvoie l'encodage du document (jeu de caractères)
document.lastModified
Renvoie la date et l'heure au mise à jour
document.links
Renvoie tous les éléments <a-zone> et <a> qui ont un attribut HREF
document.readyState
Renvoie l'état (de chargement) du document
document.referrer
Renvoie l'URI du référentiel (le document de liaison)
document.scripts
Renvoie tous les éléments <cript>
document.strictErrorChecking
Renvoie si la vérification des erreurs est appliquée
document.title
Renvoie l'élément <itle>
document.URL
Renvoie l'URL complète du document
RECHERCHE D'ÉLÉMENTS HTML
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + element.innerHTML;
</script>
RECHERCHE D'ÉLÉMENTS HTML PAR
NOM DE BALISE
• Cet exemple trouve l'élément avec id="main", puis trouve tous les <p>éléments à
l'intérieur "main":
<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>
<p id="demo"></p>
<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;
</script>
RECHERCHE D'ÉLÉMENTS HTML PAR
NOM DE CLASSE
• const x = document.getElementsByClassName("intro");
RECHERCHE D'ÉLÉMENTS HTML PAR DES
SÉLECTEURS CSS
• Si vous voulez trouver tous les éléments HTML qui correspondent à un sélecteur CSS
spécifié (id, noms de classe, types, attributs, valeurs des attributs, etc.), utilisez la
querySelectorAll()méthode.
• Cet exemple renvoie une liste de tous les <p>éléments avec class="intro".
<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>
MODIFICATION DE LA VALEUR D'UN
ATTRIBUT
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" onsubmit="validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
JAVASCRIPT PEUT VALIDER UNE
ENTRÉE NUMÉRIQUE
• JavaScript est souvent utilisé pour valider une entrée numérique :
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
MODIFICATION DU STYLE HTML
ANIMATION JAVASCRIPT HTML DOM
EXERCICE
• Pour montrer comment créer des animations HTML avec JavaScript, nous
allons utiliser une simple page Web :
Toutes les animations doivent être relatives à un
élément conteneur.
<!Doctype html>
<html>
<style>
• L'élément conteneur doit être créé #container {
width: 400px;
avec style=" position: relative". height: 400px;
position: relative;
• L'élément d'animation doit être créé background: yellow;
avec style=" position: absolute". }
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>
• Les animations JavaScript sont réalisées en programmant des changements
progressifs dans le style d'un élément.
• Les modifications sont appelées par une minuterie. Lorsque l'intervalle de
minuterie est petit, l'animation semble continue.
• Le code de base est :
<body>
<div id="container">
<div id="animate"></div>
<!DOCTYPE html> </div>
<html>
<style> <script>
#container { function myMove() {
width: 400px; let id = null;
height: 400px; const elem = document.getElementById("animate");
position: relative; let pos = 0;
background: yellow; clearInterval(id);
} id = setInterval(frame, 5);
</body>
</html>
ÉCOUTEUR D'ÉVÉNEMENTS
JAVASCRIPT HTML DOM
• La addEventListener() méthode attache un gestionnaire d'événements à l'élément spécifié.
• La addEventListener()méthode attache un gestionnaire d'événements à un élément sans
écraser les gestionnaires d'événements existants.
• Vous pouvez ajouter plusieurs gestionnaires d'événements à un élément.
• Vous pouvez ajouter plusieurs gestionnaires d'événements du même type à un élément,
c'est-à-dire deux événements "clic".
• Vous pouvez ajouter des écouteurs d'événements à n'importe quel objet DOM, pas
seulement aux éléments HTML. c'est-à-dire l'objet fenêtre.
• La addEventListener()méthode facilite le contrôle de la réaction de l'événement au
bouillonnement.
• Lors de l'utilisation de la addEventListener()méthode, le JavaScript est séparé du balisage
HTML, pour une meilleure lisibilité et vous permet d'ajouter des écouteurs d'événement
même lorsque vous ne contrôlez pas le balisage HTML.
• Vous pouvez facilement supprimer un écouteur d'événement en utilisant la
removeEventListener()méthode.
• Il existe deux manières de propager les événements dans le DOM HTML, le bouillonnement et la
capture.
• La propagation des événements est un moyen de définir l'ordre des éléments lorsqu'un
événement se produit. Si vous avez un élément <p> à l'intérieur d'un élément <div> et que
l'utilisateur clique sur l'élément <p>, quel événement "click" de l'élément doit être géré en
premier ?
• Dans le bouillonnement , l'événement de l'élément le plus interne est géré en premier, puis
l'événement externe : l'événement click de l'élément <p> est géré en premier, puis l'événement
click de l'élément <div>.
• Lors de la capture , l'événement de l'élément le plus externe est traité en premier, puis
l'événement interne : l'événement click de l'élément <div> sera traité en premier, puis
l'événement click de l'élément <p>.
• Avec la méthode addEventListener() vous pouvez spécifier le type de propagation en utilisant le
paramètre "useCapture":
<!DOCTYPE html>
<html>
<body> EXERCICE
<h2>JavaScript addEventListener()</h2>
<p id="demo"></p>
<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
document.getElementById("demo").innerHTML = a * b;
}
</script>
</body>
</html>
NAVIGATION JAVASCRIPT HTML
DOM
• Vous pouvez utiliser les propriétés de nœud suivantes pour naviguer entre les
nœuds avec JavaScript :
• parentNode <!DOCTYPE html>
<html>
• childNodes[nodenumber]
• firstChild <body>
• previousSibling <script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").childNodes[0].nodeValue;
</script>
L'accès à la propriété innerHTML est
</body>
identique à l'accès au nodeValue
</html>
LA PROPRIÉTÉ NODENAME
La remove()méthode ne fonctionne pas dans les anciens navigateurs, voir l'exemple ci-dessous pour
savoir comment l'utiliser à la removeChild()place.
• Remplacement des éléments HTML
• Pour remplacer un élément dans le DOM HTML, utilisez la
replaceChild()méthode :
L'OBJET HTML COLLECTION
• La getElementsByTagName()méthode renvoie un HTMLCollectionobjet.
• Un HTMLCollectionobjet est une liste de type tableau (collection) d'éléments HTML.
• Le code suivant sélectionne tous les <p>éléments d'un document :
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p id="demo"></p>
<script>
const myCollection = document.getElementsByTagName("p");
</body>
</html>
LONGUEUR DE LA COLLECTION
HTML
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>Hello Norway!</p>
<script>
function myFunction() {
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
}
</script>
</body>
</html>