Les évènements input et change
Révision
Question 1
function isDigit(ch) {
let i = 0, valid = true;
while (i < ch.length && valid) {
valid = '0' <= ch[i] <= "9"; i++;
}
return valid;
}
console.log(isDigit("123")); // true
console.log(isDigit("ABC")); // trueLa fonction isDigit(ch) retourne toujours true indépendamment de la valeur de
ch.
Comment corriger cette fonction en ne modifiant qu'une seule instruction ?
valid = ch[i] >= '0' && ch[i] <= '9';Question 2
function somme(t) {
const s = 0;
for (let i = 0; i < t.length; i++) s += t[i];
return s;
}
console.log(somme([])); // 0
console.log(somme([1,2,3])); // invalid assignment to const 's'L'appel de la fonction somme(t) produit toujours l'erreur
invalid assignment to const 's' lorsque le tableau t n'est pas vide.
Comment corriger cette erreur en ne modifiant qu'une seule ligne ?
let s = 0;Question 3
function randint(a, b) {
return a + Math.random() * (b - a + 1);
}
console.log(randint(1, 6)); // 1.439311099391309
console.log(randint(0, 9)); // 7.606718899286581La fonction randint(a, b) est supposée retourner un entier aléatoire dans l'intervalle [a, b].
Or, lors du test elle retourne un réel.
Comment corriger ce problème ?
return Math.floor(a + Math.random() * (b - a + 1));Question 4
function reverseString(ch) {
let i = 0, j = ch.length - 1;
while (j > i) {
const t = ch[i]; ch[i] = ch[j]; ch[j] = t;
i++; j--;
}
return ch;
}
console.log(reverseString("ahmed")); // "ahmed" au lieu de "demha"La fonction reverseString(ch) a pour fonction d'inverser l'ordre des caractères d'une chaîne.
L'opértion est réalisée par l'instruction : const t = ch[i]; ch[i] = ch[j]; ch[j] = t;.
Seulement, il y a un problème qui l'empêche de bien fonctionner.
Lequel ?
L'écriture ch[i] = ch[j] est incorrecte car une chaine en JavaScript est immutable, il n'est
pas possible de modifier une portion de la chaine.
Utiliser la méthode ch.substring() pour corriger cette instruction.
ch = ch.substring(0, i) + ch[j] + ch.substring(i+1, j) + ch[i] + ch.substring(j+1);Question 5
Soit le code HTML suivant :
<div><input type="text" id="nom"></div>
<div id="res"></div>et le code JavaScript suivant :
const inpNom = document.getElementById("Nom");
const divRes = document.getElementById("res");
function nomChanged() {
divRes.value = inpNom.value;
}Le code précédent a été reproduit afin d'afficher le contenu du champ du texte inpNom dans le
div divRes lorsqu'on y tape un texte.
Bien que tout semble à première vue correct, la fonction nomChanged() n'est pas appelée
lorsqu'on saisit quelque chose dans le champ du texte inpNom.
Comment résoudre ce problème et répondre à l'évènement input ?
inpNom.addEventListener("input", nomChanged);Après correction du problème précédent, un nouveau surgit. L'erreur suivante s'affiche dans la console dès
qu'on tape une touche du clavier : inpNom is null.
Pourquoi inpNom est-il null ?
Au lieu de taper l'id du champ de texte nom l'élève a tapé Nom qui ne correspond
à aucun élément HTML. L'id est sensible à la casse.
Après correction du problème, le script n'est pas fonctionnel bien que la fonction nomChanged()
soit appelée lorsqu'on tape un texte dans le champ. L'unique instruction de cette fonction semble contenir une
erreur.
Laquelle ?
divRes n'a pas de propriété value car il s'agit d'un <div>. On devra soit
utiliser divRes.textContent ou bien divRes.innerHTML
L'évènement change
L'évènement change se produit lorsque la sélection, l'état coché ou le contenu d'un élément ont changé.
Dans certains cas, cela ne se produit que lorsque l'élément perd le focus.
L'évènement change peut être utilisé avec les contrôles <input>,
<select> et <textarea>.
Exemple
Code HTML
<div><input type="text" name="nom" id="nom" placeholder="Votre nom"></div>
<div id="message"></div>Code JavaScript
const nom = document.getElementById("nom");
const msg = document.getElementById("message");
let nom_actuel = nom.value;
function nomValueChanged(e) {
const nouv_nom = nom.value;
msg.innerHTML += "Nom est changé de '" + nom_actuel + "' à '" + nouv_nom + "'<br>";
nom_actuel = nouv_nom;
}
nom.addEventListener("change", nomValueChanged);L'évènement input
L'évènement input est utile pour détecter le changement d'un élément <textarea> ou <input>.
A l'inverse de l'événement change qui se déclenche uniquement lorsque l'élément perd le focus, l'évènement input se produit immédiatement après la modification.
Exemple
Code HTML
<div><input type="text" name="nom" id="nom" placeholder="Votre nom"></div>
<p>input Event</p>
<div id="msg-input"></div>
<p>change Event</p>
<div id="msg-change"></div>Code JavaScript
const inpNom = document.getElementById("nom");
const divMsgInput = document.getElementById("msg-input");
const divMsgChange = document.getElementById("msg-change");
function inputEvent(e) {
const nom = inpNom.value;
divMsgInput.innerHTML += "Nom est contient '" + nom + "'<br>";
}
function changeEvent(e) {
const nom = inpNom.value;
divMsgChange.innerHTML += "Nom est contient '" + nom + "'<br>";
}
nom.addEventListener("input", inputEvent);
nom.addEventListener("change", changeEvent);