TD4 Corrigé Hadhami ISSAOUI

Objectifs spécifiques

 Gérer des événements JavaScript.

 Connaître les contrôles sur les formulaires.

Exercice n°1 :

Ecrire un script qui permet d’afficher « bravo » si le pointeur de la souris passe

au dessus du lien « message important ».

Exercice n°2 :

L’exercice consiste à faire un bouton dont la valeur s’incrémente à chaque clic.

Exercice n°3 :

Ecrire un code permettant d’afficher une image et de la modifier par une autre
lorsqu’on clique sur elle.

Exercice n°4 :

Ecrire une valeur quelconque dans une zone de texte d’entrée. Appuyez sur le
bouton « copier » pour afficher cette valeur dans une zone de sortie.

Exercice n°5 :

Ecrire le code d'un fichier HTML permettant de calculer et d'afficher le carré

d'un nombre saisi au clavier.

1
TD4 Corrigé Hadhami ISSAOUI

Exercice n°6 :

Ecrire le code d'un document HTML, intitulé Calcul, contenant une zone de
saisie qui permet d'entrer une opération à calculer, un bouton (=) pour afficher le
résultat et une zone de réponse.

Ajouter un lien hypertexte permettant d’afficher le résultat.

Exercice n°7 :

Ecrire un code permettant de demander 3 informations à un utilisateur, puis de

les afficher dans une zone de texte en faisant une phrase. Il faudra demander le
nom à l’aide d’une boite de message, ainsi que l’âge et la ville avec des lignes
de texte. Ensuite, en cliquant sur un bouton, on affiche une phrase contenant les
3 informations dans une zone de texte.

2
TD4 Corrigé Hadhami ISSAOUI

Exercice N°8:

Ecrire une page Web contenant :

 Trois boutons radio.
 Un bouton avec l'étiquette " Afficher votre choix " qui permet après son clique
d'afficher sur un composant alert le choix sélectionné.

Exemple : Dans l’exemple ci-dessous, écrire la page web ainsi que le script JS
correspondants :

Lequel des éléments suivants n’est pas un navigateur :

o Mozilla Firefox
o Netscape
o Microsoft Bing
o Opéra

Exercice N°9:

Ecrire une page Web avec une liste défilante contenant les différents types de la musique
(classique, jazz, rock et pop). Le choix d’un type dans cette liste sera affiché dans une boite
du dialogue.

Exercice N°10:

Supposant que vous avez tout un album d'images à afficher sur la même zone d'image.
 Mettez les noms de ces images dans une liste défilante (Exemple Chien, Chat, Lapin,
Cheval…).
 Le choix du nom d'une image implique le chargement de l'image sélectionnée.
Par défaut l'image sélectionnée dans la liste défilante est Lapin.

3
TD4 Corrigé Hadhami ISSAOUI

Exercice N°11:

Ecrire une page Web "login.htm" avec un formulaire contenant:

 Un champ pour le login.
 Un champ pour le mot de passe.
 Un bouton qui permet de vérifier que les deux champs ont bien été saisis,
 S'il y a une erreur (l'un de champs est vide ou les deux), il y a une fenêtre de type alert
qui s'affiche et demande à l'utilisateur de corriger cette erreur.

Exercice N°12:

Ecrire une page Web "login.htm" avec un formulaire contenant:

 Un champ pour le login.
 Un champ pour le mot de passe.
 Un bouton qui permet de vérifier que les deux champs ont bien été saisis, et de
charger la page admin.htm à condition que le login et le mot de passe soient corrects
(supposant que le login de l’administrateur est «Etudiant » et le mot de passe est
« ISETGafsa»).
 S'il y a une erreur (l'un de champs est vide ou les deux), il y a une fenêtre de type alert
qui s'affiche et demande à l'utilisateur de corriger cette erreur.

Exercice N°13:

Ecrire une page Web contenant :

 Une question avec plusieurs réponses (au moins trois)
Par exemple Il faut sélectionner les numéros 1,2 et 4 pour avoir la bonne réponse.
 Devant chaque réponse un bouton checkbox.
 Un bouton avec l'étiquette "Corriger " qui permet après son clique d'afficher sur un
composant alert si la réponse proposée est correct ou fausse.

4
TD4 Corrigé Hadhami ISSAOUI

Exercice N°15:

Ecrire une page Web avec un bouton qui permet de charger une page web
nommée : « fichier.htm ».

Exercice N°16:

Créer un fichier HTML, intitulé Formation, contenant le formulaire suivant :

 Le clic sur le bouton "Envoyer" de type submit fait l'appel à une fonction
"Verif" écrite en JavaScript et qui permet de vérifier les conditions
suivantes :

5
TD4 Corrigé Hadhami ISSAOUI

 Les champs Nom et Prénom, CIN et Adresse e-mail doivent être

non vides.
 Le champ CIN ne contient que 8 chiffres de 0 à 9.
 L’adresse e-mail doit comporter le caractère @.
 Le niveau Secondaire est sélectionné par défaut.
 On peut choisir au maximum deux modules de formation.

 Si les conditions précédentes sont satisfaites, le message suivant sera

affiché : "Inscription achevée !!"
 Le bouton "Annuler" permet de remettre à vide tous les champs du
formulaire.

Exercice N°17:

Ecrire une page Web qui permet d’afficher la date du système au moment de chargement
de la page.

6
TD4 Corrigé Hadhami ISSAOUI

CORRECTION TD4: LES EVENEMENTS & LES FORMULAIRES

Correction Exercice n°1:

<HTML>
<HEAD>
<SCRIPT >
function message(){ alert("Bravo !") }
</SCRIPT>
</HEAD>
<BODY>
<A HREF="" onmouseOver="message()">message important</A>
</BODY>
</HTML>

Correction Exercice n°2:

<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script>
Function IncVal() {
document.form1.bouton.value++; // incrémenter la
valeur du bouton
}
</script>
</HEAD>
<BODY>
<form name="form1">
<center><input type="button" name="bouton"
value="0" onClick = "IncVal();"></center>
<!--bouton-->
</form>
</BODY>

7
TD4 Corrigé Hadhami ISSAOUI

</HTML>

Correction Exercice n°3 :

<HTML>
<HEAD>
<SCRIPT >
function lightUp() {
document.images["home"].src="img1.jpg" }
function dimDown() {
document.images["home"].src="img2.jpg" }
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="lightUp();"
onmouseOut="dimDown();">
<IMG SRC="img.jpg" name="home" width=900 height=300
border=0></A>
</BODY>
</HTML>

Correction Exercice n°4 :

<HTML>
<HEAD>
<SCRIPT >
function afficher(form2) {
let testin =document. form2.input.value;
document.form2.output.value=testin ;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> Zone de texte d'entrée <BR>

8
TD4 Corrigé Hadhami ISSAOUI

<INPUT TYPE="button" NAME="bouton"

VALUE="Copier" onClick="afficher(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> Zone de texte de sortie
</FORM>
</BODY>
</HTML>

Correction Exercice N°5: Carré

<html>
<head><title>CARRE</title></head>
<body>
<script >
function carre()
{
let c=document.f.nb.value*document.f.nb.value;
alert("Le carré de "+document.f.nb.value+" est " +c);
}
</script>
<FORM name="f">
<INPUT type="text" name="nb" size="4">
<INPUT type="button" value="Calculer le carré"
onclick="carre()">
</FORM>
</body>
</html>
Correction Exercice N°6:
<html>
<head><title>Calcul</title>
<script language ="JavaScript">
function resultat(){
let a=document.f.zt1.value;
let b=eval(a);
document.f.zt2.value=b;
}
</script>
</head>
<body>
<form name="f">
<input type="text" name="zt1">

9
TD4 Corrigé Hadhami ISSAOUI

<input type="button" value=" = " onClick="resultat()">

<input type="text" name="zt2"><br>
<a href="#" onclick="resultat()">Voir</a>
</form>
</body>
</html>

Correction Exercice N°7:

<HTML>
<HEAD>
<TITLE>BIENVENUE </TITLE>
<script>
let nom = prompt ("Votre nom?", "nom");
functionAffich() { document.form1.result.value
= nom + " a " + document.form1.age.value + " ans et
habite à " + document.form1.ville.value + "."; }
</script>
</HEAD>
<BODY>
<form name="form1">
<center>
<input type="text" name="age" value="age"><br/>
<input type="text" name="ville" value="ville"><br/>
<input type="button" name="clic" value="Résultat"
onClick="Affich();"><br/>
<textarea name="result" rows=3 cols=20></textarea>
</center>
</form>
</BODY>
</HTML>

Correction Exercice N°8:

Source :

<HTML>
<HEAD>
<SCRIPT >
function choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez sélectionné le
choisi numéro " + form3.choix[0].value) };
if (form3.choix[1].checked) { alert("Vous avez sélectionné le
choisi numéro " + form3.choix[1].value) };

10
TD4 Corrigé Hadhami ISSAOUI

if (form3.choix[2].checked) { alert("Vous avez sélectionné le

choisi numéro " + form3.choix[2].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel est votre choix ?"
onClick="choixprop(form3)">
</FORM>
</BODY>
</HTML>

Résultat :

Correction Exercice N°9:

Source :

<html><head><title>Programme </title><head>
<script >
function Preferer(x)
{ switch(x)
{ case 1 : alert('Votre choix : '+'classique');break;
case 2 : alert('Votre choix : '+'jazz'); break;
case 3 : alert('Votre choix : '+'rock'); break;
case 4 : alert('Votre choix : '+'pop'); break;
};
};
</script></head><body>

11
TD4 Corrigé Hadhami ISSAOUI

<form name="musique">
Sélectionner un choix que vous préférez:
<select name="choix"
onChange="Preferer(document.musique.choix.selectedIndex)">
<option value = "choix">choisissez :
<option value = "classique">classique
<option value = "jazz">jazz
<option value = "rock">rock
<option value = "pop ">pop
</select></form></body></html>

Résultat :

Correction Exercice N°10:

Source :

<html>
<head>
<title>Programme JAVASCRIPT</title>
<script >
function Choisir(x)
{
switch(x)
{
case 0 :document.mesImages.src='chien.jpg';break;
case 1 :document.mesImages.src='chat.jpg';break;
case 2 :document.mesImages.src='lapin.jpg';break;
case 3 :document.mesImages.src='cheval.jpg';break;
default:document.mesImages.src='lapin.jpg';break;
}
}
</SCRIPT>
</head>
<body>
Choisir une image:
<form name="monForm">
<select name="maSelection" size="1"

12
TD4 Corrigé Hadhami ISSAOUI

onChange="Choisir(document.monForm.maSelection.selectedIndex)">
<option>Chien
<option>Chat
<option>Lapin
<option>Cheval
</select></form></td>
<img name="mesImages" src="Lapin.jpg" width=80 height=80>

</form>
</body>
</html>

Résultat :

Correction Exercice N°11:

Source :

<HTML>

<HEAD>
<TITLE>
Programme
</TITLE>
<SCRIPT >
function valid_form() {
if ( form1.username.value.length == 0 ||
form1.userpwd.value.length == 0 ) {
alert ( "Vous devez entrer un login et un mot de passe." );
return false;
}
return true;
}
</SCRIPT>
</head>

<BODY >
<CENTER>
<BR>
<form NAME="form1">
<TABLE WIDTH=50% BORDER=1 CELLPADDING=3 CELLSPACING=0>

<TR>

13
TD4 Corrigé Hadhami ISSAOUI

<TH WIDTH=50%>Login </TH>

<TH WIDTH=50%>Password</TH>
</TR>
<TR>
<TD ALIGN="CENTER"><input type=text name="username"></TD>
<TD ALIGN="CENTER"><input type=password name="userpwd"></TD>
</TR>
<TR>
<TD ALIGN="CENTER" COLSPAN=2><input type=submit value="Login"
Onclick="valid_form()"></TD>
</TR>
</TABLE>
</form>
</center>
</Body>
</HTML>

Résultat :

Correction Exercice N°12:

Source exercice 12:

<HTML>

<HEAD>
<TITLE>
Programme
</TITLE>
<SCRIPT >
function valid_form()
{

14
TD4 Corrigé Hadhami ISSAOUI

if ( form1.username.value == "" || form1.userpwd.value == "" )

alert ("Vous devez entrer un login et un mot de passe.");
else if (form1.username.value=="Etudiant" &&
form1.userpwd.value=="ISETGafsa")
document.location.href='admin.htm';

else
alert ( "Verfier votre login et votre mot de passe." );

}
</SCRIPT>
</head>

<BODY >
<CENTER>
<BR>
<form NAME="form1">
<TABLE WIDTH=50% BORDER=1 CELLPADDING=3 CELLSPACING=0>

<TR>
<TH WIDTH=50%>Login </TH>
<TH WIDTH=50%>Password</TH>
</TR>
<TR>
<TD ALIGN="CENTER"><input type=text name="username"></TD>
<TD ALIGN="CENTER"><input type=password name="userpwd"></TD>
</TR>
<TR>
<TD ALIGN="CENTER" COLSPAN=2><input type=submit value="Login"
Onclick="valid_form()"></TD>
</TR>
</TABLE>
</form>
</center>

Correction Exercice N°13:

Source Exercice13:

<HTML>
<HTML>
<HEAD>
<script>
function reponse(form4) {
if ( (form4.check1.checked) == true && (form4.check2.checked) ==
true && (form4.check3.checked) == false
&& (form4.check4.checked) == true)
{ alert("C'est la bonne réponse! ") }
else
{alert("Désolé, continuez à chercher.")}
}
</SCRIPT>
</HEAD>
<BODY>

15
TD4 Corrigé Hadhami ISSAOUI

Entrez votre choix :

<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="CHECKBOX" NAME="check2" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="CHECKBOX" NAME="check3" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="CHECKBOX" NAME="check4" VALUE="4">Choix numéro 4<BR>
<INPUT TYPE="button"NAME="but" VALUE="Corriger"
onClick="reponse(form4)">
</FORM>
</BODY>
</HTML>

Résultat :

Correction Exercice N°15:

Source :

<html><head>
<script language=JavaScript>
<TITLE>
Programme
</TITLE>
function charger()
{document.location.href='fichier.htm';
}
</script></head>
<body>
<form>
<input type="button" value="charger" onClick="charger()">
</form>

16
TD4 Corrigé Hadhami ISSAOUI

</body></html>

Résultat :

Correction Exercice N°16: Formation

<html>
<head><title>FORMATION</title>
<script language ="JavaScript">
function verif()
{ if(document.f.nom.value == "") { alert("Veuillez taper votre nom et prénom!"); return false; };
if(document.f.cin.value == "") { alert("Veuillez taper votre CIN!"); return false; };
let v = 1;
let taille =document.f.cin.value.length;
for(i=0;i<taille;++i)
{if(document.f.cin.value.charAt(i) < "0" || document.f.cin.value.charAt(i) > "9" || taille!=8) v = -1;}
if(v == -1) {alert("Le numérode votre CIN est incorrect!"); return false; }
if(document.f.email.value == "") { alert("Veuillez entrer votre adresse e-mail!"); return false; }
if(document.f.email.value.indexOf('@') == -1) { alert("Adresse e-mail incorrecte!"); return false;
}
taille=document.f.list.options.length;
let n=0;
for(i=0;i<taille;i++){if (document.f.list[i].selected){n+=1};}
if (n==0) {alert("Veuillez choisir un module de formation!"); return false;}
if (n>2) {alert("Veuillez sélectionner au ma
ximum 2 choix!");return false;}
}
</script>
</head>
<body bgcolor="#FFCCCC">
<h2 align="center"><u>INSCRIPTION</u></h2>
<br>
<form name="f" action="sauvegarder.html" method="post" onSubmit="return verif()">
<pre>
Nom et Prénom * : <inp
ut type="text" size="30" name="nom"> <br><br>
CIN * : <input type="text" size="10" name="cin"><br><br>
Adresse e-mail * : <input type="text" size="30" name="email"> <br><br>
Niveau :
<input type="radio" name="r" checked value="1"> Secondaire <input type="radio" name="r"
value="2"> Universitaire <input type="radio" name="r" value="3"> Autre<br><br>
Modules de formation :<br>
<SELECT name="list" multiple size="3" >
<OPTION VALUE="Bureautique" >Bureautique</OPTION>
<OPTION VALUE="SE et Réseaux info.">SE et Réseaux info.</OPTION>

17
TD4 Corrigé Hadhami ISSAOUI

<OPTION VALUE="TIC">TIC</OPTION>
<OPTION VALUE="Programmation">Programmation</OPTION>
</SELECT><br><br>
(*) Champs obligatoire
<input type="submit" value="Envoyer"> <input type="reset" value="Annuler">
</pre>
</form>
</body>
</html>

Correction Exercice N°17:

Source :

<HTML>
<HEAD>
<TITLE>Programme JavScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function print_todays_date()
{
var d = new Date();
document.write(d.toLocaleString());
}
</SCRIPT>
</HEAD>
<BODY>
<HR>
la date est:<BR><B>
<SCRIPT LANGUAGE="JavaScript">

print_todays_date();
</SCRIPT>

</B><HR>
</BODY>
</HTML>

Résultat :

18