JavaScript - Acquérir les fondamentaux (1/2) - Chapitre 6 - JavaScript dans le navigateur - Manipulation du DOM et Gestion des événements

Les objets disponibles

Plan de formation

Les objets existant dans le navigateur (The Browser Object Model - BOM)
Utilisation des principaux objets du BOM

Les objets existant dans le navigateur (The Browser Object Model - BOM)

Les objets disponibles dans le navigateur sont regroupés dans le BOM (Browser Object Model). Ils permettent d'interagir avec le navigateur et de manipuler la page web. On peut les représenter comme une hiérarchie d'objets, où chaque objet représente une partie du navigateur ou de la page web.

Hierarchie des objets dans le navigateur
Source : Alphorm.com → Formation JavaScript

Utilisation des principaux objets du BOM

L'objet Window

L'objet Window représente la fenêtre du navigateur. Les 2 éléments ci dessous sont données en pixels.

console.log(window.innerWidth);
console.log(window.innerHeight);

Sortie console :
849
416

Le site w3schools.com propose une liste des propriétés et méthodes de l'objet window : w3schools.com → Window Object.

Propriété `window.location`

L'objet window.location représente l'URL de la page actuelle. Il permet de récupérer ou de modifier l'URL de la fenêtre.

console.log(window.location.href);

Sortie console :
https://www.example.com

L'objet Form et ses enfants

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Formulaire</title>
	<script>
		window.document.forms['le_form'].le_champ_texte.value = "Nouvelle valeur";
	</script>
</head>
<body>
	<form name="le_form" action="">
		<input type="text" name="le_champ_texte">
	</form>
</body>
</html>

Important :
Pour l'utilisation JavaScript sur des formulaire, il est nécessaire que le JavaScript soit exécuté après le chargement du formulaire. Cela peut être fait en plaçant le script à la fin du corps de la page avant la fermeture de la balise </body> ou en utilisant l'événement DOMContentLoaded.

Voici l'exemple d'un formulaire simple avec JavaScript pour manipuler les champs du formulaire :

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Les objets disponibles - Formulaire</title>
</head>

<body>
	<form class="" action="index.html" method="post" name="le_form">
		nom : <input type="text" name="txt_nom" value="DURAND"> <br>
		Oui/Non : <input type="checkbox" name="chk_yes" checked="checked">
	</form>

	<script type="text/javascript">
		var form = document.forms['le_form'];
		var txt_nom = form.txt_nom;
		var chk_yes = form.chk_yes;
		console.dir(txt_nom.value);
		console.dir(chk_yes.checked);
	</script>
</body>
</html>

Le code ci-dessus crée un formulaire avec un champ de texte et une case à cocher. Il utilise JavaScript pour accéder aux éléments du formulaire et afficher leurs valeurs dans la console.

L'objet Document

L'objet Document représente la page web en cours. Il permet d'accéder et de manipuler le contenu de la page. Il faut être conscient que la page est un arbre d'objets, où chaque élément HTML est un noeud de cet arbre. W3C a normalise cet arbre en définissant le Document Object Model (DOM).

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Les objets disponibles - Formulaire</title>
</head>

<body>
	<h1 id="le_titre">Je suis le titre</h1>

	<script type="text/javascript">
		var le_titre = document.getElementById('le_titre');
		le_titre.innerHTML = "Titre de la page";
	</script>
</body>
</html>

Le code ci-dessus modifie le contenu du titre de la page en utilisant l'objet Document. Il utilise la méthode getElementById pour récupérer l'élément avec l'ID le_titre et modifie son contenu avec la propriété innerHTML.

Le cycle de vie d'une page web

Plan de formation

Comprendre le fonctionnement de JavaScript dans une page web
Exécuter du code au chargement de la page

Comprendre le fonctionnement de JavaScript dans une page web

Certaines méthodes JavaScript sont bloquantes, c'est-à-dire qu'elles empêchent le navigateur de continuer à charger la page jusqu'à ce qu'elles soient terminées. Par exemple, la méthode alert() affiche une boîte de dialogue et bloque l'exécution du script jusqu'à ce que l'utilisateur ferme la boîte de dialogue. C'est pourquoi il faut choisir où insérer le code JavaScript dans la page web pour éviter de bloquer le chargement de la page.
Dans le cas de la méthode alert(), il peut être intéressant de l'insérer juste avant la fermeture de la balise </body> pour que le navigateur puisse charger tout le contenu de la page avant d'afficher l'alerte.

Voici 2 exemples d'utilisation de la méthode alert() dans une page web :
Exemple 1 :
Dans la balise <head> de la page, le code JavaScript est exécuté avant le chargement du contenu de la page.
Exemple 2 :
Dans la balise <body> de la page, le code JavaScript est exécuté après le chargement du contenu de la page.
Le premier exemple peut bloquer le chargement de la page, tandis que le second permet de charger tout le contenu de la page avant d'exécuter le code JavaScript.

Exemple 1 - Code JavaScript dans la balise `<head>`

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Le cycle de vie d'une page web</title>
	<script type="text/javascript">
		alert("Hello");
	</script>
</head>
<body>
	<h1>Hello</h1>
</body>
</html>

Exemple 2 - Code JavaScript dans la balise `<body>`

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Le cycle de vie d'une page web</title>
</head>
<body>
	<h1>Hello</h1>
	<script type="text/javascript">
		alert("Hello");
	</script>
</body>
</html>

Exécuter du code au chargement de la page


<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Le cycle de vie d'une page web</title>
	<script type="text/javascript">
		function doload() {
			alert("Hello");
		}
	</script>
</head>

<body onload="doload()">
	<h1>Hello on load toto</h1>
</body>

</html>

Dans l'exemple ci-dessus, la fonction doload() est appelée lorsque la page est complètement chargée grâce à l'attribut onload de la balise <body>. Cela permet d'exécuter du code JavaScript après que tout le contenu de la page a été chargé, évitant ainsi les problèmes de blocage du chargement de la page.

Notion et utilisation des événements

Plan de formation

Notion d'événement
Les principaux événements en JavaScript

Notion d'événement

Les évènement vont permettre de réagir à des actions faites par l'utilisateur ou des évolutions de la page web. Par exemple, un clic sur un bouton, le chargement d'une page, ou la modification d'un champ de formulaire sont des événements. En JavaScript, on peut écouter ces événements et exécuter du code en réponse à ces actions.

Les principaux événements en JavaScript

Les principaux événements en JavaScript
Événement	Description
onchange	Un élément HTML a changé
onclick	Un utilisateur clique sur un élément HTML
onmouseover	Un utilisateur passe la souris sur un élément HTML
onmouseout	Un utilisateur quitte un élément HTML avec la souris
onkeydown	Un utilisateur appuie sur une touche du clavier
onload	Le navigateur a fini de charger la page

Principes de fonctionnement

Un événement en JavaScript est un objet qui représente une action ou un changement d'état dans la page web. Lorsqu'un événement se produit, il est capturé par le navigateur et peut être traité par du code JavaScript. Cet objet possède des propriétés et des méthodes qui permettent d'obtenir des informations sur l'événement, comme le type d'événement, l'élément cible, et d'autres détails pertinents.

L'événement `onchange`

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Notion et utilisation des évènements - l'événement onchange</title>
	<script>
		function doChange(e) {
			console.dir(e);
			console.log("onChange");
		}
	</script>
</head>
<body>
	<input type="text" onchange="doChange(event)">
</body>
</html>

L'événement onchange est déclenché lorsqu'un élément HTML change de valeur. Par exemple, dans le code ci-dessus, lorsque l'utilisateur modifie le contenu du champ de texte et le quitte, la fonction doChange est appelée avec l'objet événement passé en paramètre. Cela permet de réagir à ce changement et d'exécuter du code en conséquence.

L'événement `onclick`

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Notion et utilisation des évènements - l'événement onclick</title>
	<script>
		function doClick(e) {
			console.dir(e);
			console.log("click button");
		}

		function doClickDiv(e) {
			console.dir(e);
			console.log("click div");
		}
	</script>
</head>
<body>
	<div onclick="doClickDiv(event)">
		<input type="button" onclick="doClick(event)" value="Click">
	</div>
</body>
</html>

Sortie console :
PointerEvent
click button
PointerEvent
click div

L'événement onclick est déclenché lorsqu'un utilisateur clique sur un élément HTML. Dans l'exemple ci-dessus, lorsque l'utilisateur clique sur le bouton, la fonction doClick est appelée et par "bouillonnement" la boîte div est également affectée.
Par "bouillonnement", on entend que l'événement se propage de l'élément cible (le bouton) vers ses parents (la boîte div). Cela signifie que si un événement est déclenché sur un élément enfant, il peut également être capturé par les éléments parents. Dans cet exemple, le clic sur le bouton déclenche à la fois doClick et doClickDiv.

Javascript non intrusif

Il ne faut pas faire référence à du JavaScript dans une page web.
On ne devrait pas voir apparaître des attributs comme onclick dans les balises HTML. Le JavaScript doit être séparé du HTML pour une meilleure maintenabilité et lisibilité du code. On utilise des gestionnaires d'événements pour lier le JavaScript aux éléments HTML de manière non intrusive.
Webdesigner et Développeur ne sont pas forcément les mêmes personnes !

onChange non-intrusif

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Notion et utilisation des évènements - l'événement onchange non-intrusif</title>
	<script>
		window.onload = function() {
			var the_input = document.getElementById('the_input');
			the_input.onchange = function (e) {
				console.dir(e)
			}
		}
	</script>
</head>
<body>
	<input type="text" id="the_input">
</body>
</html>

Sortie console :
La console affiche bien l'Event.

Dans l'exemple ci-dessus, le gestionnaire d'événements onchange est attaché à l'élément input de manière non intrusive. Cela signifie que le code JavaScript est séparé du HTML, ce qui rend le code plus propre et plus facile à maintenir. Le gestionnaire d'événements est ajouté après le chargement de la page, ce qui garantit que l'élément est disponible dans le DOM.

onClick non-intrusif

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Notion et utilisation des évènements - l'événement onclick</title>
	<script>
		window.onload = function() {
			var the_button = document.getElementById("the_button");
			the_button.onclick = function (e) {
				console.dir(e)
			}
		}
	</script>
</head>
<body>
	<input type="button" value="Click" id="the_button">
</body>
</html>

Sortie console :
PointerEvent

Manipuler les formulaires

Plan de formation

Les formulaires
Les éléments de formulaire
La validation de formulaire

Les formulaires

Les formulaires sont des objets :

Propriétés : action, method,...
Méthodes : submit(), reset()

Les éléments de formulaires

Il y a peu d'éléments de formulaires :

input (text, file, date,...)
checkbox
radio
select
textarea
button

Accéder aux éléments de formulaires

Il y a différentes façon d'accéder aux éléments de formulaires :

document.forms[0].elements[2]
Récupère le formulaire avec index 0 (le premier), l'élément avec l'index 2 (le troisième élément du formulaire).
document.forms.monForm.elements.monElement_3
Récupère le formulaire par son nom ainsi que l'élément par son nom.
document.forms.monForm.elements['monElement_3']
Récupère le formulaire par son nom et l'élément sous forme de tableau.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Manipuler les formulaires</title>
	<script>
		window.onload = function() {
			var btn_submit = document.getElementById('btn_submit')
			btn_submit.onclick = function() {
				console.dir(document.forms[0].elements.nom.value);
				console.dir(document.forms[0].elements['prenom'].value);
				console.dir(document.forms[0].elements[2].value);
			}
		}
	</script>
</head>
<body>
	<form name="le_form">
		<input type="text" name="nom" placeholder="Nom"> <br>
		<input type="text" name="prenom" placeholder="Prénom"> <br>
		<input type="email" name="email" placeholder="E-Mail"> <br>
		<input type="button" value="envoyer" id="btn_submit">
	</form>
</body>
</html>

Sortie console :
Durant
Robert
durant.robert@gmail.com

Le .value permet à chaque fois de récupérer la valeur de l'élément du formulaire.

La validation de formulaires

Attention :
Valider un formulaire c'est empêcher son envoie s'il n'est pas correct.

Pour valider un formulaire, un utilise la méthode onsubmit qui doit renvoyer une valeur booléenne.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript - 01 Les fondamentaux - Chapitre 06 - Manipuler les formulaires</title>
	<script>
		window.onload = function() {
			document.forms.le_form.onsubmit = function() {
				var result = false;

				if(document.forms.le_form.elements.nom.value != "")
				result = true

				return result;
			}
		}
	</script>
</head>
<body>
	<form name="le_form">
		<input type="text" name="nom" placeholder="Nom"> <br>
		<input type="text" name="prenom" placeholder="Prénom"> <br>
		<input type="email" name="email" placeholder="E-Mail"> <br>
		<input type="submit" value="envoyer" id="btn_submit">
	</form>
</body>
</html>Sortie console :

Dans l'exemple ci-dessus, tant que la valeur de nom n'est pas vide, alors il sera possible d'envoyer le formulaire.

Manipuler une page web avec le DOM

Plan de formation

Approfondissement de la notion de DOM.
Récupération des éléments par différentes méthodes

Approfondissement de la notion de DOM

Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est une interface de programmation qui permet de manipuler la structure, le style et le contenu d'un document. Il représente le document sous forme d'un arbre d'objets, où chaque élément HTML est un noeud de cet arbre. Le DOM permet aux développeurs de modifier dynamiquement le contenu et la structure d'une page web en utilisant JavaScript.
Il a été normalisé par le W3C et est utilisé par tous les navigateurs modernes.
Il a été implémenté dans tous les languages.

Récupérer des éléments par différentes méthodes

Récupérer les éléments par ID

window.onload = function() {
	var p1 = document.getElementById("p1");
	console.log(p1.innerHTML);
}

Dans l'exemple ci-dessus, on utilise la méthode getElementById pour récupérer l'élément avec l'ID p1 et afficher son contenu dans la console.

Récupérer les éléments par tag

window.onload = function() {
	var arr_p = document.getElementsByTagName("p");
	console.log(arr_p);
}

Sortie console :
HTMLCollection(3) [p#p1, p#p2.la_class, p#p3.la_class, p1: p#p1, p2: p#p2.la_class, p3: p#p3.la_class]
0 : p#p1
1 : p#p2.la_class
2 : p#p3.la_class
p1 : p#p1
p2 : p#p2.la_class
p3 : p#p3.la_class
length : 3
[[Prototype]] : HTMLCollection

Dans l'exemple ci-dessus, on utilise la méthode getElementsByTagName pour récupérer tous les éléments <p> de la page. Cette méthode renvoie une collection d'éléments qui peuvent être parcourus comme un tableau.

Récupérer les éléments par class

window.onload = function() {
	var arr_p_class = document.getElementsByClassName("la_class");
	console.dir(arr_p_class)
}

Sortie console :
0: p#p2.la_class
1: p#p3.la_class
p2: p#p2.la_class
p3: p#p3.la_class
length: 2

Dans l'exemple ci-dessus, on utilise la méthode getElementsByClassName pour récupérer tous les éléments ayant la classe la_class. Cette méthode renvoie également une collection d'éléments qui peuvent être parcourus comme un tableau.

Récupérer les éléments par sélecteur CSS

Exemple 1 :
Utilisation de querySelector pour récupérer le premier élément correspondant au sélecteur CSS.

window.onload = function() {
	var p2_html5 = document.querySelector("#p2");
	console.log(p2_html5.innerHTML);
}
Sortie console :
Le contenu du paragraphe 2 est affiché.

Exemple 2 :
Utilisation de querySelectorAll pour récupérer tous les éléments correspondant au sélecteur CSS.

window.onload = function() {
	var p_html5 = document.querySelectorAll(".la_class");
	console.dir(p_html5);
}
Sortie console :
NodeList(2) [p#p2.la_class, p#p3.la_class]

Manipuler les styles CSS

Plan de formation

Manipuler les styles CSS en JavaScript
Afficher ou masquer des éléments

Rappels sur les notations

camel Case :
En JavaScript, les propriétés CSS sont écrites en camel case. Par exemple, la propriété CSS background-color devient backgroundColor en JavaScript.
Train case :
En CSS, les propriétés sont écrites en train case. Par exemple, la propriété CSS background-color est écrite avec un tiret entre les mots.

Manipuler les styles CSS en JavaScript

<!DOCTYPE html>
<html lang="EN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Manipuler les styles CSS en JavaScript</title>

	<script>
		window.onload = function() {
			var p = document.getElementById("p1");
			p.style.backgroundColor = "yellow";
		}
	</script>
</head>
<body>
	<p id="p1">
	p1
	Lorem ipsum dolor sit, amet consectetur adipiscine eilt. 
	</p>
</body>
</html>

Afficher ou masquer des éléments

<!DOCTYPE html>
<html lang="EN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Manipuler les styles CSS en JavaScript</title>

	<script>
		window.onload = function() {
			var btn = document.getElementById("btn");
			btn.onclick = function () {
				var le_paragraphe = document.getElementById("le_paragraphe");
				if (le_paragraphe.style.visibility == "hidden") {
					le_paragraphe.style.visibility = "visible"
				}
				else le_paragraphe.style.visibility = "hidden"
			}
		}
	</script>
</head>
<body>
	<input type="button" id="btn" value="Afficher/Masquer"><br>
	<p id="le_paragraphe">
	p1
	Lorem ipsum dolor sit, amet consectetur adipiscine eilt. 
	</p>
</body>
</html>

Les objets disponibles

Plan de formation

Les objets existant dans le navigateur (The Browser Object Model - BOM)

Utilisation des principaux objets du BOM

L'objet Window

Propriété window.location

L'objet Form et ses enfants

L'objet Document

Le cycle de vie d'une page web

Plan de formation

Comprendre le fonctionnement de JavaScript dans une page web

Exemple 1 - Code JavaScript dans la balise <head>

Exemple 2 - Code JavaScript dans la balise <body>

Exécuter du code au chargement de la page

Notion et utilisation des événements

Plan de formation

Notion d'événement

Les principaux événements en JavaScript

Principes de fonctionnement

L'événement onchange

L'événement onclick

Javascript non intrusif

onChange non-intrusif

onClick non-intrusif

Manipuler les formulaires

Plan de formation

Les formulaires

Les éléments de formulaires

Accéder aux éléments de formulaires

La validation de formulaires

Manipuler une page web avec le DOM

Plan de formation

Approfondissement de la notion de DOM

Qu'est-ce que le DOM ?

Récupérer des éléments par différentes méthodes

Récupérer les éléments par ID

Récupérer les éléments par tag

Récupérer les éléments par class

Récupérer les éléments par sélecteur CSS

Manipuler les styles CSS

Plan de formation

Rappels sur les notations

Manipuler les styles CSS en JavaScript

Afficher ou masquer des éléments

Propriété `window.location`

Exemple 1 - Code JavaScript dans la balise `<head>`

Exemple 2 - Code JavaScript dans la balise `<body>`

L'événement `onchange`

L'événement `onclick`