Scribd Logo
Importer

Bienvenue sur Scribd !

  • 4 Sti HTML - Css - Js

    Transféré par

    Hani Haddad
    94 vues7 pages

    Titre original

    Untitled

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    94 vues7 pages

    4 Sti HTML - Css - Js

    Transféré par

    Hani Haddad

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    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.

    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 « 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>

    <form action="#" method="post" name="f">


    <fieldset name="Group1">
    <legend>Verificateur</legend>
    <label>Nombre&nbsp;&nbsp; </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="verificateur.js"></script>
    </body>
    4 STI HTML - CSS - JS

    Fichier « Verificateur.js »

    Methode 1 pour les boutons radio


    function verif(){
    n = document.getElementById("n").value;
    if((n=="")||(n<=0)){
    alert("Saisir un nombre positif");
    return false;
    }

    //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 pour les boutons radio


    function verif(){
    n = document.getElementById("n").value;
    if((n=="")||(n<=0)){
    alert("Saisir un nombre positif");
    return false;
    }

    //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

    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 = x.length
    for (i=0 ; i<a ; i++ )
    ch = x.charAt(i) + ch
    ok = (x==ch)
    return(ok)
    }

    Vous aimerez peut-être aussi