Programmation Web avEC javascript
TP3 : Associer des gestionnaires d'évènement aux éléments avec
addEventListener
Exercice 1 :
1. Développez une page HTML contenant un formulaire qui contient :
Deux champs <input type="text"> ayant respectivement id = "entier1" et id ="entier2"
Un troisième champ <input type="text"> ayant id ="resultat"
Un bouton <input type = "button" value = "Addition"> ayant id = "btn-calcul"
2. Nous voulons maintenant qu'à chaque fois qu'on clique sur le bouton "btnCalcul", on affiche
le résultat de la somme des deux entiers "entier1" et "entier2" dans le troisième champ
"resultat".
Cliquez après la balise</form>, et appuyez sur [Entrée]
Tapez : <script> </script>
Ecrire le code JavaScript permettant de faire le traitement suivant :
// On accède au bouton identifié par "btn-calcul"
var btnCalcul = ............................................
//On associe un gestionnaire de l'évènement click au bouton
btnCalcul.
btnCalcul.addEventListener(......., calculer);
// On définit la fonction calculer()
function calculer()
{
// On récupère la valeur de l'entier identifié par "entier1"
var e1 = ............................................
// On récupère la valeur de l'entier identifié par "entier2"
var e2 = ............................................
// On affecte la somme des deux entiers à "resultat"
document.getElementById("resultat").value = .................
}
Remarque : vous pouvez prendre cet exercice comme base pour créer une calculatrice.
1
Programmation Web avEC javascript
Exercice2 :
Dans cet exercice nous allons ajouter et supprimer dynamiquement des éléments d'une liste <ul>
1. Ecrire le code suivant dans un fichier HTML
<body>
<form id = "add-form">
<input type = "text" id ="item"/>
<input type = "submit" value = "Ajouter"/>
</form>
<ul id="list-items">
<li> <button class="btn"> x </button> item1 </li>
<li> <button class="btn"> x </button> item2 </li>
<li> <button class="btn"> x </button> item3 </li>
</ul>
<script>
............................................
</script>
</body>
2. Entre <script> et </script>, écrire le code JavaScript nécessaire pour :
a) Accéder au formulaire dentifié par "add-form"
var myForm = ............................................
b) Accéder à la liste dentifiée par "list-items"
var listItem = ............................................
c) Définir le gestionnaire d'évènement 'submit' pour le formulaire myForm :
myForm.addEventListener(......., addItem);
d) Définir le gestionnaire d'évènement 'click' pour la liste d'éléments listItem
listItem.addEventListener(.......,supprimerItem);
e) Complétez le code de la fonction suivante par le code nécessaire :
function addItem(e)
{
e.preventDefault();
// On récupère la valeur du champ identifié par "item"
2
Programmation Web avEC javascript
var newItem = ............................................
// On crée un nouvel élément de type li
var newLi = ............................................
// On crée un nouvel élément de type button
var newBtn = ............................................
// On crée un nouveau nœud textuel contenant le texte 'x'
var txt = ............................................
// On insère le nœud 'txt' comme enfant de l'élément 'newBtn'
............................................
// On associe à l'élément 'newBtn' la classe "btn"
............................................
// On insère le nœud 'newBtn' comme enfant de l'élément 'newLi'
............................................
//On insère un nœud textuel contenant "newItem" comme enfant de
'newLi'
newLi.appendChild(document.createTextNode(newItem));
// On insère le nœud 'newLi' comme enfant de l'élément 'listItem'
............................................
}
f) Ajouter le code de la fonction ci-dessous pour compléter l'exercice :
function supprimerItem(e)
{ // e.target : retourne l'élément sur lequel on a cliqué
// Le test sera effectué sur le bouton qui a class ="btn"
if(e.target.classList.contains('btn'))
if(confirm("Etes vous sûr de supprimer?"))
// On récupère le li parent du bouton sur lequel on a cliqué
var li = e.target.parentElement;
// On supprime ce li de la liste
listItem.removeChild(li);
}
3
Programmation Web avEC javascript
Exercice3:
1. Créer une page fondcolor.html dans laquelle l’utilisateur choisira la couleur de fond de la page à
partir d’un menu déroulant (Voir l'exemple1-1 du cours DOM). La couleur du fond devra changer
à chaque fois que l'utilisateur change de couleur.
Utilisez document.bgColor pour changer la couleur de fond de la page.
Exercice4 :
Ecrire une page multiplication.html permettant d’afficher dans un textarea la table de
multiplication du nombre saisi par l’utilisateur dans une zone de texte (l'utilisateur devra bien
sûr cliquer sur le bouton "Calculer" pour voir le résultat.)
<input type="button" ... />
<input type="text" … />
<textarea ….></textarea>
