Scribd
Importer
14 vues17 pages

JavaScript_HTML_part3

Ce document traite de la gestion des événements en JavaScript, expliquant ce qu'est un événement et comment les écouter à l'aide d'écouteurs. Il fournit des exemples pratiques de code pour illustrer l'utilisation des événements tels que click, load et mouseover, ainsi que des exercices pour mettre en pratique ces concepts. Les exemples incluent des alertes, des modifications de style et des formulaires interactifs.

Transféré par

Ghenimi Alaa
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
14 vues17 pages

JavaScript_HTML_part3

Ce document traite de la gestion des événements en JavaScript, expliquant ce qu'est un événement et comment les écouter à l'aide d'écouteurs. Il fournit des exemples pratiques de code pour illustrer l'utilisation des événements tels que click, load et mouseover, ainsi que des exercices pour mettre en pratique ces concepts. Les exemples incluent des alertes, des modifications de style et des formulaires interactifs.

Transféré par

Ghenimi Alaa
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 17

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>

Vous aimerez peut-être aussi