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 « [Link] » et « [Link] »
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é « [Link] ».
Travail demandé
Le clique sur le bouton « Ajouter » fait appel à une fonction
Document HTML « [Link] »
JavaScript intitulée « verif1 » qui vérifie les champs ci-dessous
<!--Ajouter le lien pour le fichier javascript-->
<head><script src="[Link]"></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 « [Link] »
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=[Link]('permis').value
nom=[Link]('nom').value
prenom=[Link]('prenom').value
//Construire une chaine a partir du permis sans '/'
ch=[Link](0,2)+[Link](3,([Link])-1)
if (([Link] != 8) || ([Link]("/")!= 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)||([Link]<|| [Link] > 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)||([Link]<3||[Link]>20)){
alert("Prenom invalide")
Sécurité Un entier entre 1 et 5.
return false}
Conduite Un entier entre 1 et 5. genre=[Link]('femme').checked ||
([Link]('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 : [Link]
//fonction pour tester si une chaine est forme uniquement par des lettres
function alpha(ch)
{
//Mettre en majuscule la chaine
chaine=[Link]()
i=0
while ((i<[Link])&& ([Link](i)>="A"&& [Link](i)<="Z"))
{i++}
return i==[Link]
}
//fonction pour tester si une chaine est formé uniquement par des chiffres
function numerique(chaine)
{
i=0
while ((i<[Link])&&
(([Link](i)>="0"&& [Link](i)<="9")))
{ i++ }
return i==([Link])
}
function verif1()
{
//Obtenir les valeur des champs
permis=[Link]('permis').value
nom=[Link]('nom').value
prenom=[Link]('prenom').value
//Construire une chaine a partir du champs permis sans '/'
ch=[Link](0,2)+[Link](3,([Link])-1)
if (([Link] != 8) || ([Link]("/")!= 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) ||([Link] < 3 || [Link] > 20) )) {
alert("Nom invalide ")
return false
}
if (!alpha(prenom)||([Link] < 3 || [Link] > 20)){
alert("Prenom invalide")
return false
}
genre=[Link]('femme').checked || ([Link]('homme').checked)
if(!genre)
{
alert("Vous devez choisir le genre ")
return false
}
}
Niveau : 4EME Sciences de l’informatique 2 Prof : [Link]
