docTD10-2diaposParPage
download 
Plainte Transcription
TD10-2diaposParPage
INF 112 - TD10 INF112 - TD10 2003-20042007-2008 MODULE INF112 TD 10 2007 - 2008 1 INF112 - TD10 2003-20042007-2008 Plan • Les formulaires (suite) : – Traitement des données • Javascript (suite) – Calcul d’un score – Traduction algo/Javascript, itération • Mini site (CC3) : Cahier des charges 2 UJF : L1- L2 / Année 2007-2008 1 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Formulaires (suite) Traitement des données 3 INF112 - TD10 2003-20042007-2008 Que deviennent les données ? • CGI (ex : Google) • courrier électronique (ex : Satisaction des utilisateurs) • fonction Javascript (ex : Score d'un Quizz) 4 UJF : L1- L2 / Année 2007-2008 2 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 CGI HTML HTMLHTML HTML HTML HTML HTML Requête Client Client http http Résultat <html> blabla <html> Serveur SERVEUR Serveur http HTTP http Demande de recherche CGI résultat Programme (script CGI) : Ex : moteur de recherche • Données transmises par l’URL (méthode GET) ou par fichier accompagnant la requête (méthode POST) • Données traitées par la CGI du serveur HTTP 5 INF112 - TD10 2003-20042007-2008 Envoi des données par courrier électronique • Méthode POST • Le fichier de données est transmis au logiciel de courrier électronique du poste client (s'il existe). • Le logiciel de courrier électronique expédie le fichier normalement au destinataire. Client Client http http Paramètres Messagerie Messagerie électronique électronique Internet Messagerie Messagerie électronique électronique du dudestinataire destinataire 6 UJF : L1- L2 / Année 2007-2008 3 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Données utilisées par une fonction Javascript • Ex : calcul du score d'un questionnaire • Javascript inclus dans la page html du formulaire • Nécessite un interpréteur Javascript installé sur le poste client • La fonction récupérant et traitant les données est exécutée par le poste client. C'est elle qui envoie le message résultat. 7 INF112 - TD10 2003-20042007-2008 Balise <FORM> Exemples d’envoi et/ou de traitement de données : Par GCI : <FORM ACTION="/cgi-bin/cours1" METHOD=POST> <FORM NAME=gs METHOD=GET ACTION=/search> <FORM METHOD=GET ACTION="http://clips.imag.fr/cgi-bin/query"> Par courrier électronique : <FORM METHOD=POST ACTION="mailto:[email protected]"> <FORM ACTION="mailto:[email protected]" METHOD=POST> Par une fonction Javascript incluse dans la page html : <FORM NAME= "pg1"> UJF : L1- L2 / Année 2007-2008 8 4 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Exercice 10-1 : URL Quelle est l’URL produite lorsque l’utilisateur rentre la valeur “ biologie ” dans le champ de saisie texte et valide en appuyant sur le bouton "Recherche Google" ? 1. http://www.google.fr/search 2. http://www.google.fr/search?hl=fr&q=biologie&btn=Chercher&meta=lang_fr 3. http://www.google.fr/search?btn=Chercher&meta=countryFR 4. http://www.google.fr/search?hl=fr&q=biologie&btn=Chercher&meta=countryFR 5. http://www.google.fr/search?hl=de&q=biologie&btn=Chercher&meta=countryFR 6. http://www.google.fr/search?hl=fr&q=procaryote&btn=Chercher&meta=lang_fr q = « query term » ; terme de recherche meta=lang_fr ; choix langue … etc … INF112 - TD10 9 2003-20042007-2008 Javascript Calcul d’un score Traduction algo/Javascript, itération 10 UJF : L1- L2 / Année 2007-2008 5 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Javascript (1) • Permet de rendre les pages Web dynamiques • Exemples : jeux, boutons animés, vérification de formulaires, calcul de scores • Code Javascript – Soit dans la page HTML (partie entête) – Soit dans un fichier séparé 11 INF112 - TD10 2003-20042007-2008 Exemple : bouton dynamique <HTML> <HEAD> <TITLE>BoutonDynamique</TITLE> <SCRIPT LANGUAGE="JavaScript"> function VersionNavigateur(Netscape, Explorer) { if ((navigator.appVersion.substring(0,3) >= Netscape && navigator.appName == 'Netscape') || (navigator.appVersion.substring(0,3) >= Explorer && navigator.appName.substring(0,9) == 'Microsoft')) return true; else return false; } </SCRIPT> </HEAD> <BODY> <P> <A HREF="mailto:[email protected]" onMouseOver="if (VersionNavigateur(3.0,4.0)) img1.src='boutonAttract.png' " onMouseOut="img1.src='boutonRepos.png' "> <IMG NAME="img1" WIDTH=116 HEIGHT=44 BORDER=0 SRC="boutonRepos.png" onLoad="tempImg=new Image(0,0); tempImg.src='boutonAttract.png'"></A> 12 </BODY></HTML> UJF : L1- L2 / Année 2007-2008 6 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Exemple : calcul d'un score 13 INF112 - TD10 2003-20042007-2008 <html><head><title>Quizz</title> <script language="JavaScript"> function getScore() { var score; score = 0; var numQues=2; if (document.quizz.question1[1].checked == true) score++; if (document.quizz.question2[0].checked == true) score++; window.alert("score : "+ score*100/numQues + "%"); } </script> </head> <body> <p align="center"><font size="6" color="#9999FF">Auto-Evaluation </font></p> <p>Ceci est un test à choix multiples. En fin de .... Bonne chance !!</p> <form name= "quizz"> 1. Qu'est ce que le WWW ? <br> <input type="radio" name="question1" value="1"> Warp Wire Work <input type="radio" name="question1" value="2"> World Wide Web <input type="radio" name="question1" value="3"> World Web Workspace<br> <br> 2. Par quoi commence une page html ?<br> <input type="radio" name="question2" value="1"> <HTML> <input type="radio" name="question2" value="2"> <BEGIN> <input type="radio" name="question2" value="3"> <HTTP><br> <br> <p align="center"> <INPUT type="button" value="Score obtenu" onClick="getScore(this.form)"> </p> </form></body></html> 14 UJF : L1- L2 / Année 2007-2008 7 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Javascript (2) • Utilisation simplifiée pour cet enseignement • Similarité entre ce langage et VBA = mêmes types de constructions – – – – déclaration affectation condition boucle / itération (initialisation, arrêt, incrémentation) • Cf. fiche de traduction Algo/Javascipt 15 INF112 - TD10 2003-20042007-2008 Traduction Algo / Javascript (1) Commentaire Algorithme {phrase en commentaire } Déclaration de variable Affectation i : entier x←2 ch ← "chaine" Incrémenter une variable j ← j + 1 Opérateurs sur nombres + - x / Itération (pour tout) Itération (tant que) UJF : L1- L2 / Année 2007-2008 pour i= 1 à 3 faire action fin pour j←3 tant que j>0 faire action1 action2 j← j-1 Fin tant que Javascript // commentaire sur une ligne /* commentaire sur plusieurs lignes */ Var i x=2; ch = "chaine" ; j = j+1 (ou j ++ ) + - * / for(i=1; i<=3; i++) { action; } j=3 while (j>0) { action1; action2; j=j-1; } 16 8 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Traduction Algo / Javascript (2) Instruction condition Condition Algorithme Si cond alors action1 sinon action2 action3 Fin Si Javascript if (cond){ action1 } else { action2 action3 } A=B A>B && Mod Ex : A mod B A==B A>B (A = = B) && (A>B) % Ex : A % B Et logique Modulo (reste de la division entière) Fonction affichage de texte Ecrire (x,‘texte’ ) Fonction affichage fenêtre Fenêtre(‘texte’,i,j) Document.writeln (x,‘texte’) Alert(‘texte’,i,j) 17 INF112 - TD10 2003-20042007-2008 Exemple : bonjour <HTML> <HEAD> <TITLE>PageBonjour</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // Debut script function afficherBonjour() { document.writeln("Bonjour<BR>"); } // Fin script --> </SCRIPT> </HEAD> <BODY> <SCRIPT>afficherBonjour();</SCRIPT> </BODY> </HTML> UJF : L1- L2 / Année 2007-2008 18 9 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Exemple : itération <HTML> <HEAD> <TITLE>PageIteration</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // Debut script function afficherIteration() { var i; for (i=1;i<=10;i++) { document.writeln(i,"<BR>"); } } // Fin script --> </SCRIPT> </HEAD> <BODY> <SCRIPT>afficherIteration();</SCRIPT> </BODY> </HTML> INF112 - TD10 19 2003-20042007-2008 Exercice 10-2 : Ecrire une fonction Javascript qui, insérée au bon endroit dans une page html, permette l'affichage du texte suivant à l'aide d'une itération "for" : 1 bonjour 2 bonjour 3 bonjour 4 bonjour .... 10 bonjour 20 UJF : L1- L2 / Année 2007-2008 10 INF 112 - TD10 INF112 - TD10 2003-20042007-2008 Exercice 10-3 : A l'aide d'une condition "si", modifier la fonction précédente afin d'obtenir l'affichage du texte suivant : 1 bonjour 2 bonsoir 3 bonjour 4 bonsoir .... 10 bonsoir 21 UJF : L1- L2 / Année 2007-2008 11
