Apparence
Information ❗
En JavaScript, l'objet Window est le contexte global pour le code exécuté dans un navigateur web. Elle contient un document DOM.
En réalité, il faudrait écrire window.document pour accéder au document, mais comme window est l'objet global, on peut simplement écrire document.
Débogage dans une page web
Il est possible d'utiliser les outils de développement intégrés dans les navigateurs web pour déboguer le code JavaScript exécuté dans une page web. Chaque navigateur a ses propres outils de développement, mais la plupart d'entre eux offrent des fonctionnalités similaires comme :
- Inspection des éléments HTML et CSS
- Console JavaScript pour exécuter du code et afficher des messages de débogage
- Débogueur pour définir des points d'arrêt et examiner l'état du code pendant son exécution
- Analyse des performances pour identifier les goulots d'étranglement dans le code JavaScript (avancé)
Chaque navigateur a une documentation détaillée sur l'utilisation de ses outils de développement, il est donc recommandé de consulter la documentation spécifique au navigateur que vous utilisez.
Il existe également des extensions pour les IDE qui permettent de déboguer le code JavaScript exécuté dans un navigateur web.
Gestion des événements en JavaScript
Premièrement, il faut comprendre que :
- Dans une page web, le code JavaScript est exécuté lorsque la page est chargée (aucune interaction possible à ce stade).
- Il existe un moyen d'exécuter du code JavaScript en réponse à des actions de l'utilisateur (Ps. C'est ce qu'on va appeler des événements).
Qu'est-ce qu'un événement?
Au plus simple, un événement est une action déclenchée par l'utilisateur ou par le navigateur lui-même.
Cela peut inclure des actions telles que :
- Clics de souris
- Appuis sur des touches du clavier
- Défilement de la page
- Lors d'un changement de valeur dans un champ
- Etc.
Utilisation via les attributs HTML
La manière la plus simple d'ajouter un gestionnaire d'événements est d'utiliser des attributs HTML directement dans les éléments HTML.
Truc 💡
C'est ce que nous avons fait lors du devoir de la semaine 3, je vous avais fourni le code pour gérer l'événement onclick afin d'envoyer le signal d'effectuer le calcul.
W3 schools - Événement(Anglais)
Voici quelques exemples d'attributs d'événements couramment utilisés :
onclick: Déclenché lorsqu'un élément est cliqué.onmouseover: Déclenché lorsque le curseur de la souris survole un élément.onchange: Déclenché lorsqu'une valeur dans un champ de formulaire change.onkeydown: Déclenché lorsqu'une touche du clavier est enfoncée.- Etc.
Voici un exemple avec le onclick que l'on a utilisé lors du devoir de la semaine 3 :
html
<!DOCTYPE html>
<html>
<head>
<title>Exemple avec onclick</title>
</head>
<body>
<!-- Bouton avec gestionnaire d'événement onclick -->
<button onclick="effectuerCalcul()" class="btn btn-primary">Calculer</button>
<script>
// Fonction appelée lors du clic sur le bouton
function effectuerCalcul() {
let resultat = 2 + 2;
alert(resultat);
}
</script>
</body>
</html>Voici un autre exemple sans utiliser de fonction (avec textContent) :
html
<!DOCTYPE html>
<html>
<head>
<title>Exemple avec onclick</title>
</head>
<body>
<!-- Bouton avec gestionnaire d'événement onclick -->
<button onclick="this.textContent = 'Bouton cliqué!'" class="btn btn-primary">Cliquez-moi</button>
</body>
</html>Information ❗
this.textContent sert a modifier le texte d'un élément directement dans la déclaration de l'événement.
La différence entre this.textContent et la méthode innerHTML est que textContent modifie uniquement le texte à l'intérieur de l'élément, tandis que innerHTML permet de modifier le contenu HTML complet, y compris les balises HTML.
Essayons de modifier l'exemple précédent en utilisant innerHTML au lieu de textContent et d'analyser le résultat 😉
Utilisation via JavaScript
Une autre manière d'ajouter des gestionnaires d'événements est d'utiliser JavaScript pour attacher des écouteurs d'événements aux éléments HTML.
Exemple avec le DOM
W3 schools - Gestion d'événement et DOM
html
<!DOCTYPE html>
<html>
<head>
<title>Exemple avec addEventListener</title>
</head>
<body>
<!-- Bouton sans gestionnaire d'événement -->
<button id="monBouton" class="btn btn-primary">Cliquez-moi</button>
<script>
// Sélectionner le bouton par son ID
const bouton = document.getElementById('monBouton');
bouton.onclick = function() {
alert('Bouton cliqué!');
}
</script>
</body>
</html>Ici, nous avons sélectionné le bouton en utilisant document.getElementById et nous avons attaché un gestionnaire d'événements pour le clic en utilisant la propriété onclick. De cette manière, nous pouvons exécuter du code au moment du click du bouton.
Exemple avec addEventListener
html
<!DOCTYPE html>
<html>
<head>
<title>Exemple avec addEventListener</title>
</head>
<body>
<!-- Bouton sans gestionnaire d'événement -->
<button id="monBouton" class="btn btn-primary">Cliquez-moi</button>
<script>
// Sélectionner le bouton par son ID
const bouton = document.getElementById('monBouton');
// Ajouter un écouteur d'événement pour le clic
bouton.addEventListener('click'/*Nom de l'événement/action*/, function() {
alert('Bouton cliqué!');
});
</script>
</body>
</html>Truc 💡
Que ce soit avec le DOM ou avec les Event listener, cela va produire le même résultat. À vous d'utiliser la méthode qui comblera le plus vos besoins
Formulaire avancé parti 1
Comme vu dans le précédent cours de web (automne), les formulaires HTML permettent de collecter des données auprès des utilisateurs. Ils sont composés de divers éléments tels que des champs de texte, des boutons radio, des cases à cocher, des listes déroulantes, etc.
Voici un exemple de formulaire simple :
html
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<label for="email">Email :</label>
<input type="email" id="email" name="email">
<input type="submit" value="Envoyer">
</form>Avec le DOM et les événements, nous pouvons interagir avec les formulaires de manière dynamique.
Par exemple, nous pouvons valider les données saisies par l'utilisateur avant de soumettre le formulaire ou afficher des messages d'erreur.
Voici le même formulaire avec une validation simple en JavaScript :
html
<!DOCTYPE html>
<html>
<head>
<title>Exemple avec addEventListener</title>
</head>
<body>
<form id="monFormulaire">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<label for="email">Email :</label>
<input type="email" id="email" name="email">
<input type="submit" value="Envoyer">
</form>
<script>
// Sélectionner le formulaire par son ID
const formulaire = document.getElementById('monFormulaire');
// Ajouter un écouteur d'événement pour la soumission du formulaire
formulaire.addEventListener('submit', function(event) {
// Empêcher la soumission par défaut du formulaire
event.preventDefault();
// Récupérer les valeurs des champs
const nom = document.getElementById('nom').value;
const email = document.getElementById('email').value;
// Validation simple
if (nom === '' || email === '') {
ajouterMessageErreur('Veuillez remplir tous les champs.');
} else {
// Gérer la réception de données ici
retirerMessageErreur();
alert("Houra!")
}
});
function ajouterMessageErreur(message) {
const messageErreur = document.createElement('p');
messageErreur.textContent = message;
messageErreur.style.color = 'red';
messageErreur.id = "messageErreur";
formulaire.appendChild(messageErreur);
}
function retirerMessageErreur() {
const messageErreur = document.getElementById("messageErreur");
if(messageErreur !== null){
formulaire.removeChild(messageErreur);
}
}
</script>
</body>
</html>Explication :
- Nous avons ajouté un écouteur d'événement pour l'événement
submitdu formulaire. - Nous avons utilisé
event.preventDefault()pour empêcher la soumission par défaut du formulaire. - Nous avons récupéré les valeurs des champs de texte et effectué une validation simple pour vérifier si tous les champs sont remplis avant de soumettre le formulaire.
- Si la validation échoue, nous affichons un message d'erreur.
Attention ⚠
La validation est une chose, mais la rétroaction à l'utilisateur est encore plus complexe à gérer. C'est la raison pourquoi il existe des bibliothèques pour simplifier les validations et rétroaction.
C'est très rare que l'on fasse des validations manuellement avec le DOM sur des sites web modernes.
Mais il faut commencer quelque part 😉
Utilisation des noms d'attributs pour les formulaires
Lorsque l'on travaille avec un formulaire, on peut accéder aux éléments avec la manière vue jusqu'a maintenant, c'est-à-dire avec le DOM :
javascript
const nom = document.getElementById('nom');
// .value est une propriété qui permet de récupérer la valeur saisie dans un champ de formulaire.
nom.value;Mais il est également possible d'accéder aux éléments du formulaire en utilisant les noms d'attributs des champs de formulaire.
javascript
const formulaire = document.getElementById('monFormulaire');
// Accéder aux éléments du formulaire en utilisant les noms d'attributs
const nom = formulaire.elements['nom'].value;
const email = formulaire.elements['email'].value;
// OU
const nom = formulaire.nom.value;
const email = formulaire.email.value;En détails formulaire.elements est une collection d'objets représentant les éléments du formulaire. En utilisant formulaire.elements['nom'], nous pouvons accéder à l'élément du formulaire avec le nom d'attribut "nom". De même formulaire.nom est une syntaxe plus concise pour accéder à l'élément du formulaire avec le nom d'attribut "nom".
Truc 💡
Avec l'utilisation des noms d'attributs, il est important de s'assurer que les noms sont uniques dans le formulaire pour éviter les conflits. Si plusieurs éléments du formulaire ont le même nom d'attribut, cela peut entraîner des comportements inattendus lors de l'accès aux éléments du formulaire.
Cette méthode nous permet également d'accéder aux éléments du formulaire de manière plus intuitive, en utilisant les noms d'attributs plutôt que les identifiants ou les classes CSS.