TP4 JavaScript P2
Transféré par
PROF PROFTP4 JavaScript P2
Transféré par
PROF PROFTP4_P2 JavaScript Systèmes, technologies et Internet 2020-2021
-Les déclencheurs d’événements.
-Utilisations des instructions d’affichage.
Objectif
-Utilisation des instructions d’entrée en utilisant
l’invite (prompt) et les champs du formulaire
(getElemntById).
Taper les codes HTML et JavaScript suivants:
Code HTML Code JavaScript
<!DOCTYPE HTML>
<html>
<head> <script>
<title>Code1</title> function citation() {
Code 1
<meta charset="UTF-8"/> alert("***La seule manière de faire du bon
</head> travail, c’est d’aimer ce que vous faites.***")
<body> }
<img onmouseover="citation()" </script>
src="smiley.gif" alt="Smiley"/>
</body>
</html>
<html>
<head>
<title>Code2</title>
<meta charset="UTF-8"/>
<script>
</head>
Code 2
function myFunction(x) {
<body>
write("Votre numéro est " + x);
<p>Taper votre numéro d'inscription
}
de 6 chiffres</p>
</script>
<input type="text" name="txt"
value="******"
onchange="myFunction(this.value)">
</body>
</html>
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page1
TP4_P2 JavaScript Systèmes, technologies et Internet 2020-2021
<html>
<head>
<title>Code3</title>
<script>
<meta charset="UTF-8"/>
function myFunction() {
</head>
var x =
<body>
Code 3
document.getElementById("saisir").value;
<p>Taper votre numéro
d'inscription de 6 chiffres</p>
document.getElementById("resultat").innerHTML
<input type="text" id="saisir"
= "vous écrivez " + x;
name="txt" value="******"
}
oninput="myFunction()">
</script>
<p id="resultat">le résultat est ici
</p>
</body>
</html>
Différence entre onchange et oninput :
La différence est que l'événement oninput se produit immédiatement après que la valeur d'un élément a
changé, tandis que onchange se produit lorsque l'élément perd le focus. L'autre différence est que
l'événement onchange fonctionne également sur les éléments <select>.
<!DOCTYPE HTML>
<html>
<head> <script>
<title>Code4</title> function myFunction() {
Code 4
<meta charset="UTF-8"/> alert("Vous avez appuiyé sur une touche du
</head> clavier");
<body> }
<p>Taper votre nom</p> </script>
<input type="text"
onkeydown="myFunction()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Code5</title> <script>
Code 5
<meta charset="UTF-8"/> function myFunction() {
</head> var x = document.getElementById("TextP");
<body> x.value = x.value.toUpperCase();
<p>Taper votre prénom</p> }
<input type="text" id="TextP" </script>
onkeyup="myFunction()">
</body>
</html>
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page2
TP4_P2 JavaScript Systèmes, technologies et Internet 2020-2021
<!DOCTYPE html>
<html>
<head>
<script>
<title>Code6</title>
function myFunction() {
<meta charset="UTF-8"/>
Code 6
alert("Votre numéro doit être formé de 6
</head>
chiffres")
<body>
}
<p>Taper votre numéro
</script>
d'inscription</p>
<input type="text" id="TextP"
onfocus="myFunction()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
<title>Code7</title>
function myFunction() {
Code 7
<meta charset="UTF-8"/>
var x = document.getElementById("TextP");
</head>
x.value = x.value.toUpperCase();
<body>
}
<p>Taper votre prénom</p>
</script>
<input type="text" name="fname"
id="TextP" onblur="myFunction()">
</body>
</html>
onblur est l'opposé de onfocus
<!DOCTYPE html>
<html>
<head>
<script>
Code 8
<title>Code8</title>
function myFunction() {
<meta charset="UTF-8"/>
console.log("voici la page");
</head>
}
<body onload="myFunction()">
</script>
<h1>Hello World!</h1>
</body>
</html>
2
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page3
TP4_P2 JavaScript Systèmes, technologies et Internet 2020-2021
Activité 2 :
Compléter le tableau par le nom de chaque attribut déclencheur d’événement :
Déclencheur d’événement Rôle
L'événement se produit lorsque l'utilisateur clique sur
un élément.
…………………………………………. Balises HTML prises en charge:
Tous les éléments HTML, SAUF: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>,
<script>, <style> et <title>
Se produit lorsque le pointeur de la souris est déplacé
sur un élément
…………………………………………. Balises HTML prises en charge:
Tous les éléments HTML, SAUF: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>,
<script>, <style> et <title>
Déclenche le moment où la valeur de l'élément est
modifiée.
Balises HTML prises en charge:
…………………………………………. <input type = "checkbox">, <input type = "file">,
<input type = "password">, <input type =
"radio">, <input type = "range">, <input type = "
search ">, <input type =" text ">, <select> et
<textarea>
Déclenche lorsqu'un élément reçoit une entrée
utilisateur.
…………………………………………. Balises HTML prises en charge:
<input type = "password">, <input type =
"search">, <input type = "text"> et <textarea>
L'événement se produit lorsque l'utilisateur appuie sur
une touche (sur le clavier).
…………………………………………. Balises HTML prises en charge:
Tous les éléments HTML, SAUF: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>,
<script>, <style> et <title>
L'événement se produit lorsque l'utilisateur relâche une
touche (sur le clavier).
…………………………………………. Balises HTML prises en charge:
Tous les éléments HTML, SAUF: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>,
<script>, <style> et <title>
L'événement se produit lorsqu'un élément obtient le
focus.
………………………………………….
Il est le plus souvent utilisé avec <input>, <select> et
<a>.
L’événement se déclenche au moment où l'élément
perd le focus.
…………………………………………. Balises HTML prises en charge:
Tous les éléments HTML, SAUF: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>,
<script>, <style> et <title>
L'événement se produit lorsqu'un objet a été chargé.
Balises HTML prises en charge:
…………………………………………. <body>, <frame>, <iframe>, <img>, <input
type="image">, <link>, <script>, <style>
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page4
