0% ont trouvé ce document utile (0 vote)
104 vues2 pages

TP N°7 HTML 5 CSS3 JavaScript

Transféré par

Fayza Akermi
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
0% ont trouvé ce document utile (0 vote)
104 vues2 pages

TP N°7 HTML 5 CSS3 JavaScript

Transféré par

Fayza Akermi
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/ 2

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
<!--Ajouter le lien pour le fichier javascript-->
<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

Vous aimerez peut-être aussi