4 STI HTML - CSS - JS
TP 7
Créer les pages suivantes :
"[Link]"
"[Link]"
"[Link]"
1. La page " [Link]" contient
Un header avec le titre « Calcul »
Un formulaire comme suit.
Un bouton Verifier.
1. En utilisant le CSS mettre en forme la page pour obtenir le résultat suivant :
4 STI HTML - CSS - JS
Titre H1:
Couleur
Centré
Couleur de fond
Souligné
Taille 2.5 em
Zone de groupe :
Centrée
Largeur: 30%
Bordure (épaisseur et couleur)
Mettre en forme le bouton et ajouter un effet de survol
2. A l'aide d'un script JavaScript écrire une fonction verif() qui sera appelée lors du clic sur le
bouton Verifier :
La fonction permet de controler :
Que le champ Nombre n’est pas vide et positif
Qu’un des bouton radio est selectionné.
Suivant le choix de l’utilisateur afficher sous le formulaire si le nombre est premier, parfait ou
symetrique.
4 STI HTML - CSS - JS
Correction TP7
Fichier « [Link] »
h1 {
color: #003300;
font-size: 2.5em;
font-weight: bolder;
text-decoration: underline;
background-color: #66FFFF;
text-align: center;
}
fieldset {
border: 3px solid #000080;
width: 30%;
padding: 10px;
text-align: center;
margin: auto;
}
legend {
font-weight: bolder;
text-decoration: underline;
color: #000080;
background-color: #99CCFF;
border-radius: 6px;
padding: 5px;
}
#aff {
background-color: #66FF66;
text-align: center;
margin-top: 10px;
font-size: 2em;
}
#b1 {
background-color: #99CCFF;
font-weight: bold;
color: #800000;
border-radius: 6px;
margin-top: 5px;
cursor: pointer;
}
#b1:hover{
color: #99CCFF;
background-color:#800000;
}
4 STI HTML - CSS - JS
Fichier « [Link] »
<body>
<header>
<h1>Calcul</h1>
</header>
<form action="#" method="post" name="f">
<fieldset name="Group1">
<legend>Verificateur</legend>
<label>Nombre </label>
<input id="n" name="n" type="number"><br>
Premier<input id="r1" name="r" type="radio" value="premier">
Parfait <input id="r2" name="r" type="radio" value="parfait">
Symetrique<input id="r3" name="r" type="radio" value="symetrique"><br>
<input name="Button1" type="button" value="Verifier" onclick="verif()" id="b1">
</fieldset>
</form>
<div id="aff">
</div>
<script src="[Link]"></script>
</body>
4 STI HTML - CSS - JS
Fichier « [Link] »
Methode 1 pour les boutons radio
function verif(){
n = [Link]("n").value;
if((n=="")||(n<=0)){
alert("Saisir un nombre positif");
return false;
}
//Methode 1
c=[Link];
if( c=="")
{
alert("Veuillez choisir un test");
return false;
}
if(c=="premier")
test = premier(n);
else if(c=="parfait")
test = parfait(n);
else
test = symetrique(n);
if (test)
{ msg = " est ";
col="green";
}
else
{ msg= " n'est pas ";
col="red";
}
[Link]("aff").innerHTML=n+msg+c;
[Link]("aff").[Link]=col;
}
4 STI HTML - CSS - JS
Fichier « [Link] »
Methode 2 pour les boutons radio
function verif(){
n = [Link]("n").value;
if((n=="")||(n<=0)){
alert("Saisir un nombre positif");
return false;
}
//Methode 2
c="";
if([Link]("r1").checked)
c="premier";
if([Link]("r2").checked)
c="parfait";
if([Link]("r3").checked)
c="symetrique";
if( c=="")
{
alert("Veuillez choisir un test");
return false;
}
if(c=="premier")
test = premier(n);
else if(c=="parfait")
test = parfait(n);
else
test = symetrique(n);
if (test)
{ msg = " est ";
col="green";
}
else
{ msg= " n'est pas ";
col="red";
}
[Link]("aff").innerHTML=n+msg+c;
[Link]("aff").[Link]=col;
}
4 STI HTML - CSS - JS
Les fonctions premier, parfait et symetrique avec approches differentes :
function premier(x){
i = 2;
ok = true;
while( (i<=x/2) && (ok) )
{
if (x % i == 0)
ok = false;
else
i++;
}
return (ok);
}
function parfait(x){
s = 1;
for ( i=2; i<=x/2; i++)
if ( x % i == 0 )
s += i
ok = false
if (s == x )
ok = true
return (ok)
}
function symetrique(x){
ch=""
a = [Link]
for (i=0 ; i<a ; i++ )
ch = [Link](i) + ch
ok = (x==ch)
return(ok)
}
