Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Université Frère Mentouri-Constantine1 – Département d’électronique – Technolog

Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire Manque Exo2b : donner un code en déduire le formulaire affiché Exercice 1 (M2 R&T devoir-td formulaire 2020) Ecrire le programme html correspondant au formulaire suivant. La première figure correspond au fichier html en b&w et sans css, la deuxième avec du code CSS (intégré au fichier html) où on gère les couleurs. Formulaire sans css Formulaire avec css Pour les daïras de résidence la liste est la suivante : Valeur stockée Nom de la daira Valeur stockée Nom de la daira Virginie Ferdjioua Ain Abid Ain Abid Sarim Batim Constantine Hamma Plaisance Hamma Bouziane El Khroubs Khroub St Arnaud El Eulma Ain Mlila Ain Mlila Chateaudun du Rhumel Chelghoum Laid Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 2 Formulaire rempli Après avoir cliqué sur « envoyer », voici le message affiché dans ma boîte hamdi.hocine.dz@gmail.com Après avoir cliqué sur « envoyer » dans l’affichage précédent, voici le message reçu dans hhamdi@umc.edu.dz Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 3 Code de la solution sans css <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Devoir sur le formulaire sans css</title>  </head> <body> <h1>formulaire d'inscription au cours de technologie-web</h1> <p>Aucun traitement n'est effectué. Le formulaire est juste envoyé avec encryptage à hhamdi@umc.edu.dz</p> <form action="mailto:hhamdi@umc.edu.dz" method="post"> <table border="0" cellpadding="3" cellspacing="0"> <tbody> <tr> <td align="right">Nom de famille:</td> <td><input value="Toto" name="nom" class="civilité" size="20" maxlength="30"></td> <td align="right">Prénom:</td> <td><input value="BenToto" name="prenom" class="civilité" size="20" maxlength="30"></td> </tr> <tr> <td align="right" valign="top">Statut:</td> <td> <input class="genre" name="statut" value="N" type="radio">nouveau<br> <input class="genre" name="statut" value="R" type="radio">répétitif<br> <input class="genre" name="statut" value="AL" type="radio">auditeur libre </td> </tr><tr> <td align="right" valign="top">Formes d'inscription:</td> <td> <input class="cocher" name="inscrit à" value="cours" type="checkbox"> cours <input class="cocher" name="inscrit à" value="td" type="checkbox"> travaux dirigés <input class="cocher" name="inscrit à" value="TP" type="checkbox"> travaux pratiques </td> </tr> <tr> <td align="right" valign="top">Daira de résidence:</td> <td> <select name="Daira" class="choix_ville" size="1"> <option value="Virginie">Ferdjioua</option> <option value="Sarim Batim">Constantine</option> <option value="El Khroubs">Kroub</option> <option value="Ain Abid">Ain Abid</option> <option value="Hamma Plaisance">Hamma Bouziane</option> <option value="St Arnaud">El Eulma</option> <option value="Ain Mlila">Ain Mlila</option> <option value="Chateaudun du Rhumel">Chelghoum Laid</option> </select> </td> </tr> Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 4 <tr> <td align="right" valign="top">Commentaire:</td> <td><textarea name="Text" class="observations" rows="10" cols="50"></textarea></td> </tr> <tr> <td align="right">Formulaire:</td> <td> <input class="Bouton" value="Envoyer" type="submit"> <input class="Bouton" value="Tout Effacer" type="reset"> </td> </tr> </tbody> </table> </form> </body> </html> Solution avec code css intégré au fichier html <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Devoir sur le formulaire avec css</title>  <style type="text/css"> form { background-image:url(background.gif); padding:20px; border:6px solid #DDDDDD; } td, input, select, textarea { font-size:13px; font-family:Verdana,sans-serif; font-weight:bold; } p { color:#ff0000; } input, select, textarea { color:#0000CC; } .observations, .civilite { background-color:#FFFFAA; width:300px; border:6px solid #DDDDDD; } .bouton_radio { background-color:#CCFFFF; width:200px; border:6px solid #DDDDDD; } .cocher, .choix_ville { background-color:#DDFFFF; border:3px solid #DDDDDD; } .bouton { background-color:#CCFFFF; width:150px; border:6px solid #DDDDDD; } </style> </head> <body> <h1>formulaire d'inscription au cours de technologie-web</h1> <p>Aucun traitement n'est effectué. Le formulaire est juste envoyé avec encryptage à hhamdi@umc.edu.dz</p> <form action="mailto:hhamdi@umc.edu.dz" method="post">  <table border="0" cellpadding="3" cellspacing="0"> <tbody> <tr> <td align="right">Nom de famille:</td> <td><input value="Toto" name="nom" class="civilite" size="20" maxlength="30"></td> <td align="right">Prénom:</td> <td><input value="BenToto" name="prenom" class="civilite" size="20" maxlength="30"></td> </tr> Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 5 <tr> <td align="right" valign="top">Statut:</td> <td> <input class="genre" name="statut" value="N" type="radio">nouveau<br> <input class="genre" name="statut" value="R" type="radio">répétitif<br> <input class="genre" name="statut" value="AL" type="radio">auditeur libre </td> </tr> <tr> <td align="right" valign="top">Formes d'inscription:</td> <td> <input class="cocher" name="inscrit à" value="cours" type="checkbox"> cours <input class="cocher" name="inscrit à" value="td" type="checkbox"> travaux dirigés <input class="cocher" name="inscrit à" value="TP" type="checkbox"> travaux pratiques </td> </tr> <tr> <td align="right" valign="top">Daira de résidence:</td> <td> <select name="Daira" class="choix_ville" size="1"> <option value="Virginie">Ferdjioua</option> <option value="Sarim Batim">Constantine</option> <option value="El Khroubs">Kroub</option> <option value="Ain Abid">Ain Abid</option> <option value="Hamma Plaisance">Hamma Bouziane</option> <option value="St Arnaud">El Eulma</option> <option value="Ain Mlila">Ain Mlila</option> <option value="Chateaudun du Rhumel">Chelghoum Laid</option> </select> </td> </tr> <tr> <td align="right" valign="top">Commentaire:</td> <td><textarea name="Text" class="observations" rows="10" cols="50"></textarea></td> </tr> <tr> <td align="right">Formulaire:</td> <td> <input class="bouton" value="Envoyer" type="submit"> <input class="bouton" value="Tout Effacer" type="reset"> </td> </tr> </tbody> </table> </form> </body> </html> Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 6 Exercice 2a : d’après le cours de Philippe dax (voir adresse en fin de fichier) Donnez ce qui est affiché par le programme suivant <html> <head> <title>Technologie-Web_td4_exo2.a</title> </head> <body> <H1>Exemple simple de formulaire utilisant l'interface CGI</H1> <P> Ceci est un formulaire simple qui illustre l'utilisation de la bibliothèque de fonctions CGI permettant de traiter les informations saisies dans les zones de dialogue. </P> <HR> <form method="post" action="formulaire-simple.cgi"> <H2>Questionnaire</H2> Quel est votre prénom ? <input name="prenom"> <P> Quel est votre nom ? <input name="nom"> <P> Quelle est votre couleur favorite ? <select name="couleur"> <option selected>blanc <option>jaune <option>orange <option>rouge <option>vert <option>bleu <option>violet <option>noir </select> <P> Aimez vous l'informatique ? <input type="radio" name="choix" value="oui" checked> Oui ou <input type="radio" name="choix" value="non"> Non <P> Veuillez expliquer brièvement ci-dessous le choix que vous venez de faire : <input name="message" size=60,5> <P> Cliquez sur <input type="submit" value="Valider"> pour soumettre votre requête., sinon <input type="reset" value="Annuler"> </form> <address>Philippe Dax / dax@inf.enst.fr</address> $Date: 20/09/1995 $ </body> </html> Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 7 Capture d’écran Exercice 2.b Donnez ce qui est affiché par le programme suivant Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 8 Exercice3 : formulaire et javascript (exo2 ctrl M2R&T22janv2019) Ecrire le programme permettant d’afficher la figure suivante : Figure 1 Remarque : même la fermeture de la fenêtre principale fonctionne ! Solution exercice 3 (extrait d’exo 5 td3 2018 version 5 e4 : fichier « td3-exo5-version_e4.html ») <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>exo2ctrl2019M2R&T</title> <script> function recupere_date() { jours = new Array ("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"); mois = new Array ("janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre", "novembre","décembre"); date_du_jour = new Date(); j=jours[date_du_jour.getDay()]; if (date_du_jour.getDate()<10) {n="0"+date_du_jour.getDate()} else {n=date_du_jour.getDate()}; m=mois[date_du_jour.getMonth()]; an=date_du_jour.getFullYear(); date_aujourdhui="Nous sommes le "+j+" : "+n+" "+m+" "+an; document.formul_affichage.champ_date.value =date_aujourdhui; return ; } function bienvenue() { pren= document.formul_affichage.prenom.value; if (pren.length==0) { pren = ' Inconnu(e) ' ; } var phrase = new String('Bonjour ') ; NewPhrase = phrase + pren.toUpperCase() + ' de UFMC1 ' + '.' ; document.formul_affichage.champ_bonjour.value = NewPhrase; return ; } </script> </head> Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 9 <body> <br> <form name="formul_affichage" action=""> <font color="#000080" size="5"> <b> <center> <input value="Cliquez pour fermer la fenêtre principale" onclick="window.close();" type="button"> </center> </b></font> <b> <font color="#0000ff" size="5"> <br><br> <center>On va chercher la date <input value="Cliquez pour afficher la date" onclick="recupere_date()" type="button"> </center> </font></b> <br><br> <b> <font color="#00ff00" size="4"> Champ date du jour qui sera rempli automatiquement <center><input name="champ_date" size="80" type="text"> </center> <br></font></b> <hr><br><br><b> <font color="#ff0000" size="5"> <center>Entrez votre prénom <input size="20" name="prenom" type="text"> <br> Puis cliquez sur le bouton de validation <input onclick="bienvenue()" value="Validation Prénom" type="button"> </center></font><br><br> <font color="#00ff00" size="4">Champ de bienvenue qui sera rempli automatiquement <center><input name="champ_bonjour" size="80" type="text"></center> </font></b> </form> </body> </html> Affichage après exécution du code et deux clics Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 10 Exercice 4 : formulaire et javascript (extrait de exo3ctrl_M2_r&t2019v2) 1. Ecrire un programme html qui : - Affiche le texte : Entrez votre prénom - Puis après saisie du prénom et validation, affiche en grands caractères le texte « Bonjour toto de Zerzara from UFMC1 » (où toto a la valeur du prénom saisi) - Demande de saisir au clavier un nombre entier « n » - Puis après saisie du nombre et validation, appelle la fonction « calcul(n) » - Puis affiche le texte « le produit des val1 entiers est égal à val2 » (où val1 et val2 correspondent respectivement aux valeurs de n et du résultat renvoyé par la fonction calcul (n)) 2. Donner le contenu du fichier JavaScript « exo3M2R&T2019.js » qui contient la fonction « calcul(n) », qui calcule le produit des n premiers entiers. Solution Exercice 4 version 1 : solution 100% JavaScript, c’est « une » solution simple parmi d’autres ! <html> <head> <title>TD4_formulaire_exo4_v1:100pc-js</title> <script type="text/javascript" src="td4_exo4.js"> </script> </head> <body> <br> <script type="text/javascript"> var prenom = prompt ("entrez votre prénom") ; alert("Hello "+ prenom + " from UFMC1"); var nombre = prompt ("entrez le nombre n pour la fonction calcul()"); var resultat = calcul(nombre) ; alert("le produit des " + nombre + " premiers entiers est égal à " + resultat); </script> </body> </html> Fichier en javascript « td4_exo4.js » contenant la fonction « calcul ( ) » function calcul(limite) { var produit = 1 ; for (var index =1 ; index <= limite ; index++) produit = produit*index; return produit ; } // fin de fonction calcul Affichage après exécution du programme Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : formulaire 11 Affichage après validation du prénom Affichage après clic sur ok Affichage après validation du nombre par clic sur ok Université Frère Mentouri-Constantine1 – Département d’électronique – Technologie Web – TD4 : uploads/Science et Technologie/ soltion-exercices.pdf