Développement
Web II
JAVASCRIPT: PARTIE III
GESTION DES ÉVÈNEMENTS
1- C’est quoi un évènement? 2
Un évènement est provoqué par une action de l'utilisateur ou du navigateur lui-même.
Les évènements ont des noms tels que click, load et mouseover.
Une fonction appelée en réponse a un événement se nomme un écouteur (event handler ou event
listener). Souvent, leur nom commence par on comme par exemple onclik ou onload.
Associer des écouteurs aux évènements possibles peut se faire de manières différentes:
HTML (à étudier durant ce cours)
DOM
2- Gestion des évènements 3
Syntaxe
<balise onEvent="code js">…….. </balise>
▪ balise : désigne le nom de la balise HTML qui supporte l’événement.
▪ onEvent : désigne le gestionnaire d’événement associé à l’événement Event. (Exemple le
gestionnaire d’événement onClick qui réagit à l'événement click)
▪ Le code inséré entre guillemets fait le plus souvent référence à une fonction définie dans les balises
<head>…</head>. Il peut cependant s’agir d’instructions JS directement, séparées par des virgules.
2- Gestion des évènements 4
Exemple 1 : afficher une alert lorsque vous cliquez sur un bouton
Code JavaScript
<html>
<body>
<button onclick =" alert('You clicked me!’) "> Je suis un bouton</button>
</body>
</html>
Ecouteur d’évènement click
Exécution
click
2- Gestion des évènements 5
Exemple 2 : une fonction qui affiche une alert si vous cliquer sur le bouton
<html>
<head>
<script>
function affiche()
{ Déclaration d’une fonction
alert("You clicked me !")
}
</script>
</head>
<body>
<button onclick=" affiche() "> Je suis un bouton</button>
</body>
</html>
Appel de la fonction lorsque vous
clickez sur le bouton
2- Gestion des évènements 6
Plusieurs gestionnaires d’évènements peuvent être associés au même élément Html
Exemple : évènements click et change sur un input
<input type="text"
onclick="alert('You clicked me')"
onchange="alert('You changed me')">
7
Exemples d’évènements
Exemples d’évènement 8
Exemple 1 : afficher une alert de bienvenue au chargement de la page « load »
<html>
<body onload="alert('Bienvenue')">
<h1> Event : Load Page </h1>
</body>
</html>
Exemples d’évènement 9
Exemple 2 : convertir le contenu de l’input en majuscule lorsque vous perdez le focus
<html>
<script>
function majus()
{
//sélectionner l'input
let nom = document.getElementById('nom')
//modifier le contenu de l’input
nom.value = nom.value.toUpperCase()
}
</script>
<body>
Saisir votre nom <input type="text" id="nom" name="nom" onblur="majus()" >
</body>
</html>
Lorsque vous
quitter l’input
Exemples d’évènement 10
Exemple 3 : Afficher dans une alert la valeur sélectionnée dans un select (change)
<html>
<script>
function choix()
{
//sélectionner le sélect
let pays = document.getElementById('pays’) Lorsque vous
//récupérer la valeur de l’option sélectionnée choisissez par
alert("Votr pays est " + pays.value) exemple Algérie
}
</script>
<body>
Pays <select id="pays" name="pays" onchange="choix()">
<option value="Tunisie">Tunisie</option>
<option value="Algerie">Algerie</option>
<option value="Maroc">Maroc</option>
</select>
</body>
</html>
Exemples d’évènement 11
Exemple 4 : modifier la couleur d’un paragraphe et sa taille lorsque la souris entre dans la zone
(mouseover) du paragraphe et inversement lorsqu’elle le quitte (mouseout).
<html>
<script>
function couleurRouge()
{
$element = document.getElementById('p1')
$element.style.color = 'red'
$element.style.fontSize = '30px'
}
function couleurBleu()
{
$element = document.getElementById('p1')
$element.style.color = 'blue'
$element.style.fontSize = '20px'
}
</script>
<body>
<br><br>
<p id="p1" onmouseover="couleurRouge()" onmouseout="couleurBleu()"> Paragraphe 1</p>
</body>
</html>
Exercice 1 12
o Ecrire un code (en Html et JavaScript) qui permet de créer un formulaire de conversion
Dinar/Euros lorsque vous cliquez sur le bouton
o Afficher dans un div un message d’erreur si le montant à convertir n’ai pas donné.
o Vider l’input du résultat lorsque le focus est dans le premier input du formulaire
Exercice 13
<head>
<meta charset="utf-8">
<script>
Correction (1/2) function convertir()
{
let valeurDt = document.getElementById('dt')
let valeurDollar = document.getElementById('dollar')
let errors = document.getElementById('errors')
if(valeurDt.value=="")
errors.innerText = 'veuillez saisir le montant en dinars'
else
valeurDollar.value = parseFloat(valeurDt.value)/3
}
function vider()
{
document.getElementById('errors').innerText=""
document.getElementById('dollar').value=""
}
</script>
</head>
Exercice 14
Correction(2/2 )
<body>
<h1> Convertisseur dinars vers euro </h1>
<form>
Saisir le montant <input type="number" id="dt" onfocus="vider()">
<button type="button" onclick="convertir()"> Convertir vers dollar</button>
<input type="text" id="dollar" readonly>
</form>
<div id="errors" style="color:red"></div>
</body>
Exercice 2 15
o Ecrire un code (en Html et JavaScript) qui permet de créer le formulaire suivant:
o En cliquant sur le lien hypertexte,
o Si poids et taille sont valides (non vides, poids >0 et taille>0 et taille <=3), alors utiliser calculer la
formule d’obésité suivante : rseultat= taille*100/poids
o Afficher « Obèse » si le résultat <=0.5
o Afficher « Normal » >0.5 et <=1
o Afficher « Mince » >1
o Sinon, afficher un message d’erreur
<head>
<meta charset="utf-8">
Exercice 2 : <script>
function afficherEtat() 16
correction {
let poids = parseFloat(document.getElementById('poids').value)
let taille = parseFloat (document.getElementById('taille').value)
let etat = document.getElementById('etat')
if(isNaN(poids) || isNaN(taille))
alert("Saisir taille et poids")
else
{
if(poids<=0 || taille <=0 || taille>3 )
alert("Taille et poids doivent être positifs")
else
{ let formule = taille*100/poids;
if(formule<=0.5)
etat.innerHTML ="<span style='color:red'>Faire un régime</span>"
else if(formule>0.5 && formule <=1)
etat.innerHTML ="<span style='color:green'>Tu es normal</span>"
else
etat.innerHTML ="<span style='color:orange'>Tu es mince</span>"
}
}
}
</script>
</head>
17
Exercice 2 :correction
<body>
<h1> Votre état d'obésité</h1>
<form>
Saisir votre poids <input type="number" id="poids"><br>
Saisir votre taille <input type="number" id="taille"> <br>
<a href="#" onclick="afficherEtat()">Afficher mon état d'obé
sité</a>
<div id="etat"></div>
</form>
</body>
