Your SlideShare is downloading. ×
0
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Documents intéractifs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Documents intéractifs

676

Published on

Common Gateway Interface, JavaScript, Web Forms

Common Gateway Interface, JavaScript, Web Forms

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
676
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • (FOR référence l’ID de l’attribut)
  • Pour créer un bouton qui sera défini plus tard (par JavaScript, par exemple) <input type=button>
  • Transcript

    1. Documents intéractifs CGI - JavaScript Saïd Radhouani Université de Genève avril 2005
    2. Introduction <ul><li>HTML seul ne permet pas de créer des documents interactifs </li></ul><ul><li>Besoin d’un programme </li></ul><ul><ul><li>Exécuté côté serveur </li></ul></ul><ul><ul><ul><li>Exemples : CGI (Common Gateway Interface), PHP (PHP Hypertext Preprocessor) </li></ul></ul></ul><ul><ul><li>Exécuté côté client </li></ul></ul><ul><ul><ul><li>Exemple: Javascript </li></ul></ul></ul><ul><li>HTML permet en revanche de créer l’interface de ces programmes </li></ul><ul><ul><li>Formulaires </li></ul></ul><ul><ul><li>Affichage des résultats d’un programme </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    3. CGI – Common Gateway Interface <ul><li>Une CGI ( Common Gateway Interface) est une technique qui permet à un client d'exécuter des programme s spécifiques sur un serveur, il permet de : </li></ul><ul><ul><li>produ ire de s pages html dynamiques </li></ul></ul><ul><ul><li>accès à des bases de données </li></ul></ul><ul><ul><li>l'affichage de données traitées par le serveur </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Un des grands intérêts est la possibilité de fournir des pages dynamiques. L'application la plus fréquente repose sur l'utilisation de formulaire HTML : </li></ul><ul><ul><li>ça permet à l'utilisateur de choisir ou saisir des données, puis à cliquer sur un bouton de soumission du formulaire, envoyant alors les données du formulaire en paramètre du programme CGI... </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    4. CGI - généralités <ul><li>Un programme CGI peut être écrit dans n'importe quel langage qu i est : </li></ul><ul><ul><li>capable de lire le flux de données d'entrée </li></ul></ul><ul><ul><li>capable de traiter des chaînes de caractères </li></ul></ul><ul><ul><li>capable d'écrire sur le flux standard de sortie </li></ul></ul><ul><ul><li>exécutable ou interprétable par le serveur </li></ul></ul><ul><li>Les langages de programmation les plus utilisés pour écri r e des CGI sont : </li></ul><ul><ul><li>Le langage Perl (majoritairement) </li></ul></ul><ul><ul><li>Les langages C, C++ </li></ul></ul><ul><ul><li>Java </li></ul></ul><ul><ul><li>... </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    5. CGI – principe de fonctionnement <ul><li>Lorsqu'une requête est envoyée au serveur, celui-ci examine l'extension du fichier demandé afin de déterminer l'action qu'il va effectuer </li></ul><ul><li>Exemples : </li></ul><ul><ul><li>fichier HTML (extension .htm ou .html ) : le serveur gén ère des en-têtes de réponse HTTP et envoie le fichier HTML au navigateur </li></ul></ul><ul><ul><li>fichier CGI écrit en Perl (extension .pl ) : le serveur exécute l'interpréteur Perl, celui-ci interprète le code contenu dans le fichier .pl puis envoie les données au serveur, qui va les envoyer au navigateur ( comme dans le cas d'un fichier HTML ) </li></ul></ul><ul><ul><li>fichier CGI écrit en langage C (extension .exe ) : le serveur exécute la CGI, puis envoie vers le navigateur les données que le programme lui aura transmis </li></ul></ul><ul><ul><li>… </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    6. CGI – principe de fonctionnement <ul><li>Exécution d'un programme sur le serveur et création de la page </li></ul><ul><li>La page html envoyée est générée dynamiquement </li></ul>04 avril 2005 Saïd Radhouani - CUI Navigateur web (client) <html> … </html> http://www. ...[paramètres] page html Serveur Web La page HTML est créée en fonction de la requête HTTP Le client reçoit la page dont le contenu est créé en temps réel Chaque client reçoit une page dont le contenu est dépendant de sa requête
    7. Les formulaires <ul><li>Permettent aux auteurs de dialoguer </li></ul><ul><li>avec leurs lecteurs </li></ul>04 avril 2005 Saïd Radhouani - CUI
    8. Les formulaires - La balise FORM <ul><li>La balise FORM ~ un conteneur </li></ul><ul><li>Balise <form>…</form> </li></ul><ul><li>Permet de regrouper des éléments d’un formulaire qui vont permettre à l'utilisateur de choisir ou de saisir des données , qui seront envoyées à l'URL indiqué dans l'attribut ACTION par la méthode indiquée par l'attribut METHOD </li></ul><ul><li>Il est possible d'insérer n'importe quel élément HTML de base dans une balise FORM (textes, boutons, tableaux, liens,...) mais il est surtout intéressant d'insérer des éléments interactifs. Ces éléments sont : </li></ul><ul><ul><li>La balise INPUT: un ensemble de boutons et de champs de saisie </li></ul></ul><ul><ul><li>La balise TEXTAREA: une zone de saisie </li></ul></ul><ul><ul><li>La balise SELECT: une liste à choix multiples </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    9. Les formulaires - La balise FORM <ul><li>Attributs obligatoires : </li></ul><ul><ul><li>Method => sous quelle forme seront envoyées les réponses </li></ul></ul><ul><ul><ul><li>GET : le contenu du formulaire apparaît dans l’URL </li></ul></ul></ul><ul><ul><ul><li>POST : le contenu est posté dans le corps de la requête http </li></ul></ul></ul><ul><ul><li>Action => indique l’adresse d’envoi </li></ul></ul><ul><ul><ul><li>Script CGI : URL du programme qui va traiter les données </li></ul></ul></ul><ul><ul><ul><li>e-Mail : mailto:adresse@machine.com </li></ul></ul></ul><ul><li>Attributs facultatifs : </li></ul><ul><ul><li>Name : nom du formulaire </li></ul></ul><ul><ul><li>Enctype => spécifie le codage des données transmises </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    10. Les formulaires - La balise FORM <ul><li>Syntaxe : </li></ul><ul><li><FORM </li></ul><ul><li>NAME = «nom_form» </li></ul><ul><li>METHOD =«POST» ou «GET» </li></ul><ul><li>ACTION = «URL» </li></ul><ul><li>ENCTYPE = «type mime» </li></ul><ul><li>> </li></ul><ul><li>… </li></ul><ul><li></FORM> </li></ul><ul><li>Exemples : </li></ul><ul><ul><li><form name=&quot;formulaire&quot; method= &quot;get&quot; action =  &quot;http://www.machin.com/ cgi-bin /script.cgi&quot;> </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    11. Les formulaires - Envoi des données <ul><li>Les données sont envoyées sous forme de paire nom/valeur </li></ul><ul><ul><li>Syntaxe : champ1=valeur&champ2=valeur&… </li></ul></ul><ul><li>eg. Google </li></ul><ul><li>Envoi par email : <form action =&quot;mailto:adresse_email&quot; method =&quot;post&quot; enctype =&quot;text/plain&quot;> </li></ul><ul><li>enctype =&quot;text/plain&quot; => éviter d’avoir un message illisible comme : nom=Radhouani&prenom=Sa%EFd&email=Said.Radhouani%40cui.unige.ch& </li></ul><ul><li>Ajouter un sujet au message </li></ul><ul><ul><li>action = &quot;mailto:adresse_email?subject=...&quot; </li></ul></ul><ul><li>eg. </li></ul>04 avril 2005 Saïd Radhouani - CUI
    12. Les formulaires - La balsie INPUT <ul><li>INPUT => créer des éléments interactifs </li></ul><ul><li>Syntaxe : </li></ul><ul><ul><li><INPUT type=“type de l’élément” value=“valeur par défaut” name=“nom de l’élément” </li></ul></ul><ul><li>Attributs </li></ul><ul><ul><li>Type : spécifie le type d’élément </li></ul></ul><ul><ul><li>Value : valeur initiale </li></ul></ul><ul><ul><li>Name : nom de l’élément </li></ul></ul><ul><ul><li>Size : nombre de caractères </li></ul></ul><ul><ul><li>Maxlength : nombre max. de caractères </li></ul></ul><ul><ul><li>checked (pour les boutons “radio”) indique que l’élément est sélectionné </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    13. <ul><li>Champ de saisi de texte - une ligne </li></ul><ul><ul><li>Syntaxe : <input type=&quot;text&quot; name=&quot;nom&quot;> </li></ul></ul><ul><ul><li>Size : taille de la case </li></ul></ul><ul><ul><li>Maxlength : nombre max de caractères </li></ul></ul><ul><li>Password </li></ul><ul><ul><li>Syntaxe : <input type=&quot;password&quot; name=&quot;pwd&quot;> </li></ul></ul>Les formulaires - Champ de saisi 04 avril 2005 Saïd Radhouani - CUI
    14. Les formulaires - Champ de saisi <ul><li>Champ de saisi - plusieurs lignes (≠ INPUT type = “texte”) </li></ul><ul><ul><li>Syntaxe : <TEXTAREA name=”nom&quot; rows=”x&quot; cols=”y” …> texte par défaut </TEXTAREA> </li></ul></ul><ul><ul><li>Cols : le nombre de caractères que peut contenir une ligne </li></ul></ul><ul><ul><li>Rows : le nombre de lignes </li></ul></ul><ul><ul><li>Name : le nom associé au champ </li></ul></ul><ul><ul><li>Readonly : permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ </li></ul></ul><ul><ul><li>Value : la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par l'utilisateur </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    15. Les formulaires - Cases à cocher <ul><li>Case à cocher </li></ul><ul><ul><li>Deux états : checked (coché)/ unchecked (non coché) </li></ul></ul><ul><li>Syntaxe : <input type=”CHECKBOX&quot; name=”nom&quot; value=”valeur&quot;> texte affiché</input> </li></ul><ul><li>Exemple : </li></ul><ul><li><input type=&quot;checkbox&quot; name=”navigateurs&quot; value=”Netscape&quot;> Netscape</input> <br> </li></ul><ul><li><input type=&quot;checkbox&quot; name=&quot;navigateurs” value=&quot;mozilla&quot;> Mozilla</input><br> </li></ul><ul><li>… </li></ul><ul><li><input type=&quot;checkbox&quot; name=&quot;navigateurs” value=&quot;autre&quot;> Autre</input> </li></ul>04 avril 2005 Saïd Radhouani - CUI
    16. Les formulaires - Bonton option <ul><li>Bouton option : radio - un seul choix parmi plusieurs </li></ul><ul><li>Tous les boutons ont le m ême nom </li></ul><ul><li>Checked : attribut permettant de sélectionner un élément par défaut </li></ul><ul><li>Exemple : </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;boisson&quot; value=&quot;cafe&quot;>café</input><br> </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;boisson&quot; checked value=&quot;orange” checked>jus d'oranges</input><br> </li></ul><ul><li>… </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;boisson&quot; value=&quot;autre&quot;>autre</input><br> </li></ul>04 avril 2005 Saïd Radhouani - CUI
    17. Les formulaires - La balise SELECT <ul><li>La balise SELECT => créer une liste déroulante d’éléments </li></ul><ul><li>Les éléments sont précisés par les balises OPTION </li></ul><ul><li>Attributs : </li></ul><ul><ul><li>Name : le nom du champ </li></ul></ul><ul><ul><li>Disabled : créer une liste désactivée (affichée en grisée) </li></ul></ul><ul><li>Exemple : </li></ul><ul><li>< select name=&quot;couleur_prefere&quot;> </li></ul><ul><li><option value=&quot;bleu&quot;>Bleu</option> </li></ul><ul><li><option value=&quot;jaune&quot;>Jaune</option> </li></ul><ul><li><option value=&quot;rouge&quot;>Rouge</option> </li></ul><ul><li><option value=&quot;vert&quot;>Vert</option> </li></ul><ul><li><option value=&quot;orange&quot;>Orange</option> </li></ul><ul><li><option value=&quot;violet&quot;>Violet</option> </li></ul><ul><li></ select > </li></ul>04 avril 2005 Saïd Radhouani - CUI
    18. Les formulaires - La balise SELECT <ul><li>Autres attributs : </li></ul><ul><ul><li>MULTIPLE => Sélection multiple </li></ul></ul><ul><ul><li>SIZE => nombre d’éléments affichés en même temps </li></ul></ul><ul><li>Exemple : </li></ul><ul><ul><li><select multiple=&quot;multiple&quot; name=&quot;couleurs_detestees&quot; size=&quot;6&quot;> </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    19. Les formulaires - Groupement dans une sélection <ul><li>Groupement dans une sélection => Balise OPTGROUP </li></ul><ul><li>Exemple : </li></ul><ul><ul><li><select name=&quot;couleur_prefere&quot;> </li></ul></ul><ul><li>< optgroup label =&quot;couleurs de base&quot;> </li></ul><ul><li><option value=&quot;bleu&quot;>Bleu</option> </li></ul><ul><li><option value=&quot;jaune&quot;>Jaune</option> </li></ul><ul><li><option value=&quot;rouge&quot;>Rouge</option> </li></ul><ul><li></ optgroup > </li></ul><ul><li>< optgroup label =&quot;mélanges&quot;> </li></ul><ul><li><option value=&quot;vert&quot;>Vert</option> </li></ul><ul><li><option value=&quot;orange&quot;>Orange</option> </li></ul><ul><li><option value=&quot;violet&quot;>Violet</option> </li></ul><ul><li></ optgroup > </li></ul><ul><ul><li></select> </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    20. Les formulaires - Regroupement d’éléments <ul><li>Grouper des éléments </li></ul><ul><li>FIELDSET : Regroupement de champs </li></ul><ul><li>LEGEND : Légende d'un regroupement - texte affiché </li></ul><ul><li>LABEL : étiquette du champ - texte affiché </li></ul><ul><li>ID du champ </li></ul><ul><li>Exemple: </li></ul><ul><li><fieldset> </li></ul><ul><li><legend>Auteur</legend> </li></ul><ul><li><label for=&quot; nom &quot;>Nom:</label> </li></ul><ul><li><input type=&quot;text&quot; id=&quot; nom &quot; name=&quot;nom&quot; /> </li></ul><ul><li><label for=” prenom&quot; >Prénom:</label> </li></ul><ul><li><input type=&quot;text&quot; id=&quot; prenom &quot; name=&quot;prenom&quot; /> </li></ul><ul><li></fieldset> </li></ul>04 avril 2005 Saïd Radhouani - CUI
    21. Les formulaires - Sélection d’un fichier <ul><li>Sélection d’un fichier à envoyer avec le formulaire </li></ul><ul><li>Préciser le type de données pouvant être envoyées grâce à l’attribut ENCTYPE </li></ul><ul><li>Exemple : </li></ul><ul><ul><li><form enctype=”…&quot; method=“post” action =”mailto:...&quot;> </li></ul></ul><ul><li>fichier à envoyer <input type=“ file ” size=20 name=“fichier”> </li></ul><ul><li></form> </li></ul>04 avril 2005 Saïd Radhouani - CUI
    22. Les formulaires - Champs cachés <ul><li>Champs cachées </li></ul><ul><li>Ça permet de transmettre de l’information d’un formulaire au suivant, lorsqu’on a prévu un enchaînement de formulaires </li></ul><ul><li>Syntaxe : <input type=“ hidden ” name=“...” value=“...”> </li></ul><ul><li>Exemple : écolde doctorale de Grenoble http://adum.igh.cnrs.fr/index.pl </li></ul>04 avril 2005 Saïd Radhouani - CUI
    23. Les formulaires - Bouton SUBMIT/RESET <ul><li>Bouton de remise à zéro : rétablir les éléments du formulaires à leurs valeurs par défaut </li></ul><ul><li>Attributs : </li></ul><ul><ul><li>TYPE : type du bouton = RESET </li></ul></ul><ul><ul><li>NAME : nom du bouton </li></ul></ul><ul><ul><li>VALUE : le texte du bouton </li></ul></ul><ul><li>Syntaxe <input type=&quot; reset &quot; name=&quot;effacer&quot; value=&quot;clear&quot;> </li></ul><ul><li>Bouton de soumission - envoi du formulaire au programme (ou email) </li></ul><ul><li>Syntaxe : <input type=&quot; submit &quot; name=&quot;envoi&quot; value=&quot;envoi&quot;> </li></ul><ul><li>Bouton de soumission personnalisé : son apparence est l’image située à l’emplacement précisé par son attribut SRC </li></ul><ul><li>Syntaxe : SRC = “URL” </li></ul>04 avril 2005 Saïd Radhouani - CUI
    24. Démos <ul><li>Exemple de recherche de vidéo : Cf. Charhad </li></ul><ul><li>Autres exemples : </li></ul><ul><ul><li>Formulaires sans/avec contr ôle </li></ul></ul><ul><li>Référence : </li></ul><ul><ul><li>W3C : http://www.la-grange.net/w3c/html4.01/interact/forms.html </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    25. Introduction à JavaScript contr ôle des champs d’un formulaire
    26. Langage de script - JavaScript <ul><li>C ' est un langage de programmation </li></ul><ul><li>Le l angage de script est incorporé dans un document HTML </li></ul><ul><li>A pporter des améliorations au langage HTML </li></ul><ul><li>E xécuter des commandes du côté client </li></ul><ul><li>Fonctionnement : </li></ul>04 avril 2005 Saïd Radhouani - CUI ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ HTML Script <SCRIPT language=&quot;Javascript&quot;> L e code d u script </SCRIPT >
    27. Web intéractif <ul><li>Les langages de script permet d'avoir des pages actives et non dynamiques </li></ul><ul><li>Le contenu des pages est fixe </li></ul>04 avril 2005 Saïd Radhouani - CUI Navigateur web (client) <html> … < javascript …> … </html> http://www.unige.ch/… Serveur Web Interpréteur Java script page html
    28. JavaScript - Utilisation <ul><li>Affichage d'un message dans la barre d'état quand l'utilisateur positionne le curseur de la souris sur un lien </li></ul><ul><li>Ouverture d'une boîte de dialogue lors d'un click </li></ul><ul><li>Modification d'une image lors du survol d'un lien par le pointeur de la souris </li></ul><ul><li>Fermer une fenêtre lors d’un click </li></ul><ul><li>Ouverture d'une fenêtre popup </li></ul><ul><li>Modifier l'apparence d'une page web </li></ul><ul><li>Afficher des message pour l'utilisateur </li></ul><ul><li>Afficher une horloge </li></ul><ul><li>… </li></ul><ul><li>Contr ôler les champs d'un formulaire </li></ul>04 avril 2005 Saïd Radhouani - CUI
    29. JavaScript <ul><li>Balise script (n’importe où dans la page HTML) </li></ul><ul><li><script language=&quot;javascript&quot;> <!-- </li></ul><ul><li>instructions JavaScript </li></ul><ul><li>// --> </li></ul><ul><li></script> </li></ul><ul><li>Dans un fichier externe </li></ul><ul><li><script language=&quot;javascript&quot; src=&quot;fich.js&quot;> document.write(&quot;script non trouvé&quot;); </script> </li></ul>04 avril 2005 Saïd Radhouani - CUI
    30. javaScript - Variables <ul><li>Une variable est un objet repéré par un nom; </li></ul><ul><li>Elle est prévue pour contenir des données qui pourront changer au cours de l’exécution du programme </li></ul><ul><li>Une variable peut être déclarée : </li></ul><ul><ul><li>Explicitement var i; var j = 1; </li></ul></ul><ul><ul><li>Implicitement nom = “toto”; </li></ul></ul><ul><li>Types de données (pas besoin de préciser) </li></ul><ul><ul><li>Entiers </li></ul></ul><ul><ul><li>Flottants </li></ul></ul><ul><ul><li>Booléens (true / false) </li></ul></ul><ul><ul><li>Chaînes de caractères (entre ‘ ‘ ou “ “) </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    31. javaScript - Quelques opérateurs <ul><li>i=0; affectation </li></ul><ul><li>== comparaison </li></ul><ul><li>>, >=, <, <= + - / * </li></ul><ul><li>&& et, || ou, != différent </li></ul><ul><li>! Not </li></ul><ul><li>++, -- incrément, décrément </li></ul><ul><li>% modulo </li></ul><ul><li>i += x; i-= x; ajoute / retire x à i </li></ul><ul><li>i *= x; i /= x; </li></ul>04 avril 2005 Saïd Radhouani - CUI
    32. JavaScript : Structures de contrôle <ul><li>if (condition) { </li></ul><ul><ul><li>instructions; </li></ul></ul><ul><li>} </li></ul><ul><li>else { </li></ul><ul><li>instructions; </li></ul><ul><li>} </li></ul><ul><li>condition ? </li></ul><ul><ul><li>instructions à exécuter si vrai </li></ul></ul><ul><ul><li>instructions à ne pas exécuter si faux </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    33. javaScript : Structures de contrôle <ul><li>switch ( Variable ) { </li></ul><ul><li>case Valeur1 : </li></ul><ul><li>Liste d'instructions; </li></ul><ul><li>break ; </li></ul><ul><li>case Valeur2 : </li></ul><ul><li>Liste d'instructions; </li></ul><ul><li>break; </li></ul><ul><li>… </li></ul><ul><li>default: </li></ul><ul><li>Liste d'instructions; </li></ul><ul><li>break; </li></ul><ul><li>} </li></ul>04 avril 2005 Saïd Radhouani - CUI
    34. JavaScript : Boucles <ul><li>for (initialisation; condition d’arrêt; incrément) </li></ul><ul><ul><li>{ instructions </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>while (condition) </li></ul><ul><li>{ </li></ul><ul><li>instructions </li></ul><ul><li>} </li></ul><ul><li>do { </li></ul><ul><li>Instructions </li></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>while (condition) </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    35. JavaScript : Fonctions <ul><li>Une fonction attribue un nom à un ensemble d’instructions (sous-programme) </li></ul><ul><li>Permet d’exécuter plusieurs fois les mêmes instructions sans avoir à tout réécrir </li></ul><ul><li>Permet de modulariser le code </li></ul><ul><li>Une fonction peut avoir zéro ou plusieurs paramètres </li></ul><ul><li>Retourne parfois un résultat </li></ul>04 avril 2005 Saïd Radhouani - CUI
    36. JavaScript : Evénements <ul><li>Les événements permettent de conditionner l’exécution de code JavaScript aux actions de l’utilisateur </li></ul><ul><ul><li>(double) clics de souris </li></ul></ul><ul><ul><li>Positionner le curseur sur un élément de l’interface </li></ul></ul><ul><ul><li>Fermeture d’une page </li></ul></ul><ul><ul><li>... </li></ul></ul>04 avril 2005 Saïd Radhouani - CUI
    37. JavaScript- Contr ôle des champs d’un formulaire <ul><li>Principe : appeler une fonction JavaScript qui permet de contr ôler les champs du formulaire </li></ul><ul><li><form method=&quot;get&quot; action=  &quot;URL ou email&quot; </li></ul><ul><li> name= &quot;nom du formulaire&quot; </li></ul><ul><li>onsubmit =&quot;return Fonction_JavaScript(this)&quot; </li></ul><ul><li>> </li></ul><ul><li>Fonction_JavaScript est une fonction JavaScript </li></ul><ul><li>Elle a comme paramètre le contenu du formulaire (this) </li></ul><ul><li>Elle permet de contr ôler tous les champs du formulaire </li></ul>04 avril 2005 Saïd Radhouani - CUI
    38. Liens tiles <ul><li>Il existe des sites sur lequels on peut trouver des dizaines de programmes JavaScript prêts à l’emploi </li></ul><ul><li>Exemple : http://www.editeurjavascript.com/scripts/ </li></ul>04 avril 2005 Saïd Radhouani - CUI

    ×