Module 2 : Systèmes, technologies et Internet JavaScript
JavaScript
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
JavaScript intitulée «verif1 » qui vérifie les champs ci-dessous � Document HTML « enregistrement.html »
<!--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>
Champ Contrôle <!—Appel de la fonction verif1() avec l’évènement
onclick pour le bouton Ajouter -->
N° Permis Une chaîne de 8 caractères respectant le format suivant :
xx/xxxxx <input type="submit" class="bt" value="Ajouter"
onclick="return verif1();" />
Nom Une chaîne alphabétique de longueur entre 3 et 20.
� Fichier JavaScript « controle.js »
//Fonction pour tester si une chaine est
Prénom Une chaîne alphabétique de longueur entre 3 et 20.
//formée uniquement par des lettres, retourne booléen
La sélection d’un genre est obligatoire.
Genre function alpha(chaine){ .............. }
//Fonction pour tester si une chaine
� Le clique sur le bouton « Valider » fait appel à une fonction //est formée uniquement par des chiffres,retourne booléen
JavaScript intitulée «verif2 » qui vérifie les champs ci-dessous function numerique(chaine){ ......... }
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 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))) {
Le même contrôle cité précédemment. alert("Nom invalide ")
N° Permis
return false}
Modèle testé La sélection d’un modèle est obligatoire.
if (!alpha(prenom)||(prenom.length<3||prenom.length>20)){
Sécurité Un entier entre 1 et 5. alert("Prenom invalide") return
false}
Conduite Un entier entre 1 et 5.
genre=document.getElementById('femme').checked ||
Confort Un entier entre 1 et 5. (document.getElementById('homme').checked) if(!genre)
{ alert("Vous devez choisir le genre ") return
Je ne suis pas un robot La sélection de case à cocher est obligatoire false}
}
1
//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
}
}
2
