Question de veille sur l’interface Web
Dynamique
Groupe 5
June 11, 2025
1. Quels sont les 5 événements JavaScript les plus
utilisés pour rendre une interface interactive ?
Question de
veille sur
l’interface
Web
Dynamique Les 5 événements JavaScript les plus couramment utilisés pour
Groupe 5 rendre une interface interactive sont :
1-click : Déclenché lorsque l’utilisateur clique sur un élément.
C’est l’événement le plus fondamental pour l’interactivité
(boutons, liens, etc.).
2-submit : Déclenché lorsqu’un formulaire est soumis. Essentiel
pour la validation des formulaires avant l’envoi des données au
serveur.
3-input : Déclenché chaque fois que la valeur d’un élément
<input>, <select> ou <textarea> est modifiée. Très utile
pour des validations en temps réel ou des filtrages dynamiques.
Question de
veille sur
l’interface
Web
Dynamique
Groupe 5 4-mouseover / mouseout (ou mouseenter / mouseleave) :
Déclenchés respectivement lorsque le pointeur de la souris
entre ou sort d’un élément. Utilisés pour les effets de survol, les
infobulles, etc. (mouseenter/mouseleave sont préférables car ils
ne se propagent pas aux éléments enfants).
5-keydown / keyup : Déclenchés lorsque l’utilisateur appuie ou
relâche une touche du clavier. Essentiels pour les raccourcis
clavier, les jeux, ou la saisie contrôlée dans des champs de
texte.
2. Comment utiliser [Link]()
pour modifier le contenu d’un élément HTML ?
Question de
veille sur
l’interface
Web [Link]() permet de récupérer une référence
Dynamique
à un élément HTML unique en utilisant son attribut id. Une
Groupe 5
fois l’élément récupéré, cela permettra modifier son contenu,
ses attributs, ou son style.
Exemple :
<p id="texte">Bonjour</p>
<button onclick="changerTexte()">Changer le
texte</button>
<script>
function changerTexte()
[Link]("texte").textContent = "Nouveau
texte !";
</script>
3-Quelle est la différence entre innerHTML et
textContent en JavaScript ?
Question de
veille sur
l’interface
Web
Dynamique innerHTML et textContent sont deux propriétés JavaScript
Groupe 5 utilisées pour manipuler le contenu des éléments HTML, mais
elles agissent différemment :
a)-textContent :
-Renvoie ou définit le contenu textuel visible d’un élément.
-Il ignore toutes les balises HTML et ne renvoie que le texte
brut.
-Il est plus sûr pour insérer du texte fourni par l’utilisateur car il
ne permet pas -l’injection de balises HTML potentiellement
malveillantes (attaques XSS).
-Plus performant pour manipuler uniquement du texte.
Question de
veille sur
l’interface
Web
Dynamique
Groupe 5 b)-innerHTML :
-Renvoie ou définit le contenu HTML complet d’un élément, y
compris toutes les balises -HTML qu’il contient.
-Si innerHTML est définit, le navigateur interprétera la chaîne
comme du HTML et la rendra en conséquence.
-Moins sûr que textContent si vous insérez du contenu non
fiable, car il peut introduire des vulnérabilités XSS.
-Utile lorsque vous avez besoin d’insérer des balises HTML
dynamiquement.
Question de
veille sur
l’interface
Web
Dynamique
Groupe 5
Exemple :
<p id="exemple">Texte <strong>important</strong></p>
<button onclick="modifieTexte()">Changer</button>
<script>
function modifieTexte()
[Link]("exemple").innerHTML = "Texte
<em>modifié</em>";
</script>
4-Comment valider un formulaire HTML avec
JavaScript avant soumission ?
Question de
veille sur
La validation de formulaire avant soumission est cruciale pour
l’interface
Web
garantir la qualité des données et améliorer l’expérience
Dynamique utilisateur.
Groupe 5 Exemple :
<form onsubmit="return validerFormulaire()">
<input type="email" id="email" required>
<button type="submit">Envoyer</button>
</form>
<script>
function validerFormulaire()
const email = [Link]("email").value;
if (![Link]("@") || ![Link]("."))
alert("Email invalide !");
return false; // Bloque la soumission
return true;
</script>
Question de
veille sur
l’interface
Web Explication :
Dynamique
1. Structure HTML :
Groupe 5
- <form> : Conteneur du formulaire.
-onsubmit="return validerFormulaire()" : Appelle la fonction
JavaScript lors de la soumission. Le return est crucial pour
bloquer la soumission si la validation échoue.
-<input> : Champ email avec :
type="email" : Indique aux navigateurs modernes que c’est un
champ email (validation basique automatique).
-required : Attribut HTML5 qui empêche la soumission si le
champ est vide.
-<button type="submit"> : Bouton qui déclenche la
soumission du formulaire.
Question de
veille sur
l’interface
Web
Dynamique 2. Fonction JavaScript :
Groupe 5 Récupération de la valeur :
[Link]("email").value : Accède à la valeur
saisie dans le champ email.
Validation :
Vérifie la présence de @ et . (validation très basique, en réalité
il faudrait une regex pour plus de robustesse).
Gestion du retour :
return false : Empêche l’envoi du formulaire et affiche une
alerte.
return true : Autorise l’envoi si la validation réussit.
5-Qu’est-ce que le DOM ?
Question de
veille sur
l’interface
Web
Dynamique
Groupe 5
Le DOM (Document Object Model) est une représentation du
contenu d’une page HTML sous forme d’arbre d’objets. Le
W3C a défini le DOM comme une interface indépendante de la
plate-forme et du langage qui permet aux programmes et aux
scripts d’accéder et de mettre à jour dynamiquement le
contenu, la structure et le style d’un document.
6-Comment créer un carousel d’images simple avec
JavaScript?
Question de
veille sur
l’interface
Web
Dynamique Créer un carousel d’images simple avec JavaScript peut se faire
Groupe 5 en utilisant HTML, CSS et JavaScript. Voici une approche
basique :
[Link] HTML : conteneur + images
[Link] : Masquer toutes avec un(display: none) et afficher
seulement les images avec display: block; ( Affiche uniquement
l’image active )
[Link] :
-Variable pour l’image active
-Fonctions next()/prev() pour changer d’image
-setInterval() pour défilement autole .
7-Qu’est-ce qu’une fonction callback en JavaScript
?
Question de
veille sur
l’interface
Web
Dynamique
Groupe 5
Cette fonction permet de passer en argument à une autre
fonction, exécutée après un événement.
Exemple:
[Link]("bouton").addEventListener("click",
function()
alert("Bouton cliqué !");
);
8-Comment afficher/masquer un élément HTML
au clic sur un bouton ?
Question de
veille sur
l’interface
Web
Dynamique
voici le code attendu :
Groupe 5
<button
onclick="toggleElement()">Afficher/Masquer</button>
<div id="element">Contenu secret</div>
<script>
function toggleElement()
const el = [Link]("element");
[Link] = ([Link] === "none") ? "block" :
"none";
</script>
9. Quelles sont les bonnes pratiques pour éviter les
erreurs courantes en JavaScript ?
Question de
veille sur
l’interface
Web
Dynamique
Groupe 5
les bonnes pratiques pour éviter les erreurs courantes en
javascript sont entre autre:
[Link] const/let au lieu de var.
2.Vérifier les entrées utilisateur (éviter les injections).
3.Gérer les erreurs avec try/catch.
[Link] les sélecteurs DOM (querySelector au lieu de
getElementById si besoin).
10- Comparez let, const et var : lequel utiliser pour
des variables liées à l’UI ?
Question de
veille sur
l’interface
Web
Dynamique voici la comparaison entre let,const et var:
Groupe 5 1-const : Utilisé pour les elements du DOM(boutoun,input,etc)
qui ne changent pas.
Exemple :
const bouton = [Link]("monBouton");
2- let: Utiliser pour les variables qui changent (compteurs,état,
etc)
Exemple :
let compteur = 0;
3-var : Utilsé dans les anciennes syntaxes, moins fiable que
let/const. et n’est pas utilisé dans les projets modernes
