4 Sti HTML - Css - Js
4 Sti HTML - Css - Js
4 Sti HTML - Css - Js
TP 7
Créer les pages suivantes :
"calcul.html"
"style.css"
"verificateur.js"
1. La page " calcul.html" contient
Un header avec le titre « Calcul »
Un formulaire comme suit.
Un bouton Verifier.
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 « style.css »
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 « calcul.html »
<body>
<header>
<h1>Calcul</h1>
</header>
Fichier « Verificateur.js »
//Methode 1
c=document.f.r.value;
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";
}
document.getElementById("aff").innerHTML=n+msg+c;
document.getElementById("aff").style.backgroundColor=col;
}
4 STI HTML - CSS - JS
Fichier « Verificateur.js »
//Methode 2
c="";
if(document.getElementById("r1").checked)
c="premier";
if(document.getElementById("r2").checked)
c="parfait";
if(document.getElementById("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";
}
document.getElementById("aff").innerHTML=n+msg+c;
document.getElementById("aff").style.backgroundColor=col;
}
4 STI HTML - CSS - JS
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 = x.length
for (i=0 ; i<a ; i++ )
ch = x.charAt(i) + ch
ok = (x==ch)
return(ok)
}