Efm applications hypermédias 2015 2016: exelib hypermedia | Exam-Lib
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

Efm applications hypermédias 2015 2016: exelib hypermedia

abdelouafiDec 8, 2017

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      636
      Likes Received:
      14
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      upload_2017-12-8_20-46-23.png

      upload_2017-12-8_20-19-28.png
      upload_2017-12-8_20-29-38.png
      Infopayement.png
      Si l’utilisateur choisi le payement par carte bancaire, le formulaire devient :
      Infopayement2-examlib-exelib.png

      upload_2017-12-8_20-33-51.png
      upload_2017-12-8_20-34-43.png
       

      Attached Files:

      Last edited: Dec 8, 2017
      Loading...
      Partie Théorique

      [​IMG]


      Applique à tous les titres h1, h2, h3, h4, h5 et h6 un texte en italique avec soulignement, une couleur bleue , et un fond jaune .

      Par contre le sélecteur h1 h2 h3 h4 h5 h6 cible seulement le titre h6 descendant de h1 suivant la hiérarchie h1 h2 jusqu’à arriver à h6.



      Partie Pratique (34 pts)

      Exercice 1


      Question 1 :
      Code:
      <!doctype html>
      <html>
      <head>
          <title>EFM 2015</title>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="/style1.css">
      </head>
      <body>
          <div id="principal">
              <h1>Informations de payements</h1>
              <div id='erreur'>
              </div>
              <form name="form_payement" >
                  <div>
                    
                        <p>    <label>Nom et prenom du client : </label><input type="text" name='nom'></p>
                    
                    
                          <p><label>Adresse:</label><input type="text" name='adresse' style="width:300px"></p>
                    
                          <p><label>Numéro de téléphone :(+212)</label><input type="text" name='tel'></p>
                    
                          <p><label>Type de payement:</label></p>
                          <p>
                          <input type="radio" name='type_payement' checked="checked" onclick="pay()"><img src="/paypal.png"/>
                          <input type="radio" name='type_payement' onclick="pay()">Par carte bancaire <img src="/visa.png" width="150px" />
                      </p>
                
                
                  </div>
                  <div id="paypal">
                    
                    
                          <p><label>Entrez votre e-mail :</label><input type="text" name='email'></p>
                    
                          <p><label>Mot de passe :</label><input type="password" name='password'></p>
                  
                  </div>
                  <div id="carte_bancaire" style="display: none;">
                    
                          <p><label>Selectionnez le type de carte:</label>
                          <select name='type_carte'>
                              <option value="visa">Visa</option>
                              <option value="master_card">Master Card</option>
                              <option value="american_express">American Express</option>
                          </select>
                          <label>Numéro de carte :</label><input type="text" name='num_carte'>
                           </p>
                           <p>
                              <label>Expiration fin :</label>
                              <input type="number" name='mois' min=1 max=12 value="1">
                              <input type="number" name='annee' value="2015" style="width:60px">
                              <label>Code verification :</label><input type="text" name='code_verif' style="width:60px" >
                          </p>
                
                  </div>
                  <div>
                  <input type="button" value="Valider" onclick="valider()">
                  <input type="reset" value="Effacer">
              
                
              </form>
        
          <div id ='info'></div>
          </div>
      </body>
      
      
      




      Voici comment déclarer les variables globales :

      Code:
       var nom=document.form_payement.nom;
              var adresse = document.form_payement.adresse;
              var tel = document.form_payement.tel;
              var payement = document.getElementsByName('type_payement');
              var email = document.form_payement.email;
              var password = document.form_payement.password;
              var num_carte = document.form_payement.num_carte;
              var mois = document.form_payement.mois;
              var annee = document.form_payement.annee;
              var code = document.form_payement.code_verif;
              var erreur = document.getElementById('erreur');
              var info = document.getElementById('info');
      

      si l'utilisateur sélectionne un type de payement alors le panneau va se changer:
      Code:
      /*fonction appelée au clic sur le bouton radio type de payement*/
          function pay(){
             
              if(payement[0].checked){
                  document.getElementById('paypal').style.display="block";
                  document.getElementById('carte_bancaire').style.display="none";
              }
              else{
                  document.getElementById('paypal').style.display="none";
                  document.getElementById('carte_bancaire').style.display="block";
      
              }
          }
      



      Question 2

      La fonction "verifier" :


      Code:
      function verifier(){
              /*on vide les blocs d'affichage d'erreurs et d'e resultat*/
             erreur.innerHTML="";
             info.innerHTML="";
             /*Tous les champs sont obligatoires l'email et password sont obligatoires si le payment est de type paypal et les champs numero de carte ,mois ,année et code sont obligatoires si le payment est de type "par carte"*/
             if(nom.value=="" || adresse.value=="" || tel.value=="" || (payement[0].checked && (password.value=="" || email.value=="")) || (payement[1].checked && (num_carte.value=="" || mois.value=="" || annee.value=="" || code.value=="") ))
             {
                 /*Vous pouvez utiliser les boites de dialogues "alert" ou bien un bloc qui affiche les erreurs*/
                 //alert("Vous avez oublier de remplir un champs obligatoire");
                 //return false
                 erreur.innerHTML+="* Vous avez oublier de remplir un champs obligatoire<br>";
                 
             }
             if(!/^[0-9]{9}$/.test(tel.value)){
                    //alert("Le numéro de téléphone doit contenir seulement 9 chiffres");
                    //return false
                  erreur.innerHTML+="* Le numéro de téléphone doit contenir seulement 9 chiffres<br>";
                   
             }
             if(payement[0].checked && email.value.indexOf('@')==-1){
                     //alert("l'adresse mail est incorrecte");
                     //return false
                     erreur.innerHTML+="* L'adresse mail est incorrecte<br>";
                     
             }
             if(payement[1].checked && !/^[0-9]{16}$/.test(num_carte.value)){
                    //alert("le champs numero de carte doit contenir  16 chiffres");
                    //return false
                    erreur.innerHTML+="* Le champs numero de carte doit contenir  16 chiffres<br>";
                 
             }
             if(payement[1].checked && !/^[0-9]{3}$/.test(code.value)){
                    //alert("le champs code doit contenir 3 chiffres");
                    //return false
                     erreur.innerHTML+="* Le champs code doit contenir 3 chiffres<br>";
                    return false;
             }
             if(erreur.innerHTML!="")
                 return false;
             
             return true;
      
          }



      La fonction "valider" :
      Code:
      function valider (){
              if(verifier()){
      
                 
                 info.innerHTML="<b>Nom et prenom du client:</b>"+nom.value+"<br>"
                 +"<b>Numéro de téléphone </b>: (+212)"+tel.value+"<br>";
                 if(payement[0].checked)
                 info.innerHTML+="<b>Type de payement</b> : Paypal";
                 else
                 info.innerHTML+="<b>Type de payement</b> : Par carte bancaire";
              }
          }
      Exercice 2

      La feuille de style "style1.css":
      Code:
      #principal{
                  border:2px solid blue;
              }
              body{
                  background: url("images/arriere.jpg") no-repeat ;
                  background-size: cover;
              }
              #principal h1{
                  text-decoration: underline;
                  color:blue;
                  background: yellow;
                  border:1px solid blue;
              }
              div{
                  margin: 10px 20px;
                 
             
              }
              input:focus{
                  background: yellow;
              }
              /* Pour afficher le bloc des erreurs en couleur rouge */
              #erreur{
                  color: red;
              }
      

Share This Page

Share