TP N°7 HTML 5 CSS3 JavaScript

Module 2 : Systèmes, technologies et Internet
JavaScript
TP N°7 Rappels JavaScript

Important :
Enregistrer les fichiers au fur et à mesure dans le même dossier du TP précèdent.
Le travail consiste à ajouter quelques contrôles de saisie pour les pages « enregistrement.html » et « evaluation.html »
de Tp précédent en y intégrant des script JavaScript externe .
Pour cela nous allons ajouter des évènements relier à des cliques sur les boutons
Nb : Toutes les fonctions JavaScript devront être créées dans un fichier intitulé « controle.js ».
Travail demandé
 Le clique sur le bouton « Ajouter » fait appel à une fonction

 Document HTML « enregistrement.html »
JavaScript intitulée « verif1 » qui vérifie les champs ci-dessous

<head><script src="controle.js"></script></head>
<!—Ajouter des id pour les champs a contrôlées -->
<input type="text" name="" id="permis»/>
<input type="text" name="" id="nom" />
<input type="text" name="" id="prenom" />
<input type="radio" name="genre" id="homme" /><label
class="rad"> Femme</label>
<input type="radio" name="genre" id="femme"/> <label
class="rad">Homme</label>
<!—Appel de la fonction verif1() avec l’évènement
Champ Contrôle onclick pour le bouton Ajouter -->
Une chaîne de 8 caractères respectant le format suivant :
 N° Permis <input type="submit" class="bt" value="Ajouter"
onclick="return verif1();" />
xx/xxxxx
Une chaîne alphabétique de longueur entre 3 et 20.
 Fichier JavaScript « controle.js »
 Nom (où chaque x représente un chiffre). //Fonction pour tester si une chaine est
Une chaîne alphabétique de longueur entre 3 et 20. //formée uniquement par des lettres, retourne booléen
 Prénom function alpha(chaine){………………………………}
La sélection d’un genre est obligatoire.
 Genre //Fonction pour tester si une chaine
//est formée uniquement par des chiffres,retourne booléen
function numerique(chaine){…………………}
 Le clique sur le bouton « Valider » fait appel à une fonction function verif1()
{
JavaScript intitulée « verif2 » qui vérifie les champs ci-dessous //Obtenir les valeur des champs
permis=document.getElementById('permis').value
nom=document.getElementById('nom').value
prenom=document.getElementById('prenom').value
//Construire une chaine a partir du permis sans '/'
ch=permis.substr(0,2)+permis.substr(3,(permis.length)-1)
if ((permis.length != 8) || (permis.indexOf("/")!= 2)||
!(numerique(ch)))
{
//Message d'erreur a l'aide de la boite de dialogue
alert("Permis invalide longeur doit etre 8 et format
xx/xxxxx ")
return false}
Champ Contrôle if ((!alpha(nom)||(nom.length<|| nom.length > 20))) {
alert("Nom invalide ")
 N° Permis Le même contrôle cité précédemment. return false}
if
 Modèle testé La sélection d’un modèle est obligatoire.
(!alpha(prenom)||(prenom.length<3||prenom.length>20)){
alert("Prenom invalide")
 Sécurité Un entier entre 1 et 5.
return false}
 Conduite Un entier entre 1 et 5. genre=document.getElementById('femme').checked ||
(document.getElementById('homme').checked)
 Confort Un entier entre 1 et 5.
if(!genre)
{ alert("Vous devez choisir le genre ")
 Je ne suis pas un robot La sélection de case à cocher est obligatoire.
return false}
}
//De même pour verif2()
Niveau : 4EME Sciences de l’informatique 1 Prof : HENCHIRI.Sghaier

//fonction pour tester si une chaine est forme uniquement par des lettres
function alpha(ch)
{
//Mettre en majuscule la chaine
chaine=ch.toUpperCase()
i=0
while ((i<chaine.length)&& (chaine.charAt(i)>="A"&& chaine.charAt(i)<="Z"))
{i++}
return i==chaine.length
}
//fonction pour tester si une chaine est formé uniquement par des chiffres
function numerique(chaine)
{
i=0
while ((i<chaine.length)&&
((chaine.charAt(i)>="0"&& chaine.charAt(i)<="9")))
{ i++ }
return i==(chaine.length)
}
function verif1()
{
//Obtenir les valeur des champs
permis=document.getElementById('permis').value
nom=document.getElementById('nom').value
prenom=document.getElementById('prenom').value
//Construire une chaine a partir du champs permis sans '/'

ch=permis.substr(0,2)+permis.substr(3,(permis.length)-1)
if ((permis.length != 8) || (permis.indexOf("/")!= 2)|| !(numerique(ch)))
{
//Message d'erreur a l'aide du boite de dialogue
alert("Permis invalide longeur doit etre 8 et format xx/xxxxx ")
return false
}
if ((!alpha(nom) ||(nom.length < 3 || nom.length > 20) )) {

alert("Nom invalide ")
return false
}
if (!alpha(prenom)||(prenom.length < 3 || prenom.length > 20)){
alert("Prenom invalide")
return false
}
genre=document.getElementById('femme').checked || (document.getElementById('homme').checked)
if(!genre)
{
alert("Vous devez choisir le genre ")
return false
}
}
Niveau : 4EME Sciences de l’informatique 2 Prof : HENCHIRI.Sghaier

TP N°7 HTML 5 CSS3 JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

TP N°7 HTML 5 CSS3 JavaScript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP N°7 HTML 5 CSS3 JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

Module 2 : Systèmes, technologies et Internet

TP N°7 Rappels JavaScript

 Le clique sur le bouton « Ajouter » fait appel à une fonction

Niveau : 4EME Sciences de l’informatique 1 Prof : HENCHIRI.Sghaier

//Construire une chaine a partir du champs permis sans '/'

if ((!alpha(nom) ||(nom.length < 3 || nom.length > 20) )) {

Niveau : 4EME Sciences de l’informatique 2 Prof : HENCHIRI.Sghaier

Vous aimerez peut-être aussi