xhtml - AgroParisTech
Transcription
xhtml - AgroParisTech
BASES DE LA CRÉATION DE PAGES DYNAMIQUES VUES DU CÔTÉ DU NAVIGATEUR (CGI, APPLIQUETTES EN JAVA, JAVASCRIPT) * Objectifs Savoir utiliser les principales techniques de création de pages dynamiques employées du côté du navigateur Pour un autodidacte, contrôler et mettre à niveau ses connaissances Compléments nécessaires Un éditeur pour XHTML (Notepad++, BlueFish, etc.) Fichiers d'exemples disponibles sur le site de l'auteur * Niveau de compétences en pré-requis Savoir-faire en écriture de pages et de formulaires Connaissance des bases de l'algorithmique * Ce document d'enseignement est diffusé pour usage individuel. Il est librement téléchargeable sur le site de l'auteur *. Michel Cartereau - Novembre 2013 AgroParisTech - UFR d'informatique - 16, rue Claude Bernard - F 75231 PARIS CEDEX 05 michel.cartereau @ agroparistech.fr - Téléphone : +33 1 44 08 16 80 * http://www.agroparistech.fr/mmip/mc/ SAVEZ-VOUS ? Répondre soit par vrai ou faux. 1. Lors de l'envoi de données à partir d'un formulaire avec la méthode "get", les informations sont encodées avec l'adresse du programme envoyée au serveur 2. La passerelle CGI permet de recueillir l'adresse du poste de consultation 3. Une appliquette écrite en Java est considérée comme une image par le navigateur 4. Perl est normalisé dans DHTML 5. ECMAScript correspond à Javascript 6. Un script écrit en Javascript se place toujours dans l'entête de la page en XHTML 7. Javascript est un langage de niveau assez primitif, sans manipulation d'objets 8. XHTML définit un événement associé au début de l'affichage d'une page 9. Il est possible de programmer en Javascript l'ouverture d'une nouvelle fenêtre de navigation ne comportant pas de menus 10. En Javascript, une variable peut changer de type 11. Il n'est pas possible de contruire un tableau multidimensionnel en Javascript 12. Il n'existe pas en XHTML d'événement associé à la validation d'un formulaire 13. Javascript permet la manipulation de tableaux associatifs 14. Le modèle DOM normalise les interactions entre un script et un document affiché dans un navigateur 15. Il n'est pas possible de modifier par un script l'étiquette d'un bouton de formulaire 16. Le code de traitement d'un événement en Javascript est en fait une méthode. 17. DOM fournit une méthode afin de rechercher tous les paragraphes d'un document en XHTML. 18. Avec DOM, il est possible de supprimer un élément d'un document en XHTML. Pages dynamiques du côté du navigateur - Page 2 INTRODUCTION Qu'est-ce qu'une page dynamique ? Pages dynamiques du côté du navigateur - Page 3 PAGES DYNAMIQUES EXEMPLE DE PAGE DYNAMIQUE RECHERCHE RESULTAT agronomie agronomie INA PG www.inapg.inra.fr ENSAIA ensaia.u-nancy.fr FORMULAIRE D'INTERROGATION PAGE CRÉÉE DYNAMIQUEMENT CARACTÉRISTIQUES GÉNÉRALES PAGE CRÉÉE, ANIMÉE OU MODIFIÉE DYNAMIQUEMENT contenu variable en fonction d'une interaction généralement RÉSULTAT DE L'EXÉCUTION D'UN PROGRAMME sur le poste de consultation ou sur le serveur ELÉMENTS SPÉCIFIQUES DÉFINIS DEPUIS LA NORME HTML 4.0 Dynamic HTML (DHTML) - problèmes de compatibilité PRINCIPAUX MÉCANISMES SOIT ASSOCIATION D'UN PROGRAMME EXÉCUTÉ PAR LE NAVIGATEUR langages JavaScript, JScript, VBScript ; appliquettes en Java SOIT EXÉCUTION D'UN PROGRAMME SUR LE SERVEUR interface « CGI » (common gateway interface) avec Perl, etc. scripts dans une page, écrits en PHP, JSP, etc. création automatique (serveur d'application, gestion de contenu, etc.) Pages dynamiques du côté du navigateur - Page 4 CGI Principe d'appel d'un programme sur un serveur Mécanismes Pages dynamiques du côté du navigateur - Page 5 CAS N°1 : ENREGISTREMENT SUR LE SERVEUR renseignements znom=... programme sur serveur FORMULAIRE Nom Tarzan Alb Adresse Catégorie jungle nouvelle page <html> <head> ... RESULTAT Mr TARZAN Albert , inscription finie ! A bientôt Envoi FORMULAIRE D'ENREGISTREMENT PAGE DE CONFIRMATION RÉALISATION TRANSMISSION DES DONNÉES VERS UN PROGRAMME SUR SERVEUR paramètrage du formulaire avec l'adresse du programme EXÉCUTION D'UN PROGRAMME SUR LE SERVEUR VIA L'INTERFACE CGI activation avec en entrée les renseignements transmis, et en résultat, le texte en XHTML d'une nouvelle page CAS DU LANGAGE PERL UN LANGAGE TRÈS RÉPANDU (UNIX, WINDOWS, ETC.) bien adapté à la manipulation de texte mais peu intuitif ECRITURE DE PROGRAMME APPELÉS « SCRIPTS » texte en clair interprété lors de l'éxécution POUR PLUS D'INFORMATION SUR PERL : http://www.perl.com/ ET SUR CGI : http://www.cgi-resources.com/ Pages dynamiques du côté du navigateur - Page 6 PARAMÈTRAGE DU FORMULAIRE ENTÊTE DU FORMULAIRE TRANSMISSION DES DONNÉES DU FORMULAIRE VERS LE PROGRAMME la destination est l'adresse du programme sur son serveur FORME GÉNÉRALE action="http://serveur/programme" method="get" 1 enctype="application/x-www-form-urlencoded" (optionnel) EXEMPLE <form action="http://gaia.agroparistech.fr/cgi-bin/mouchard.pl" method="get"> ENCODAGE DES DONNÉES CODAGE EN 1 SEULE LIGNE DE TOUTES LES INFORMATIONS une zone intitulé=valeur la liaison entre zones & 2 un espace + un signe spécial (ex. : é) %code ISO hexadécimal (ex. : %E9) EXEMPLE znom=JANE+Doroth%E9e&zadresse=Jungle A L'ENVOI, DONNÉES MISES DANS L'ADRESSE, APRÈS « ? » EXEMPLE : http://...mouchard.pl?znom=JANE&... 1 la méthode de transmission dépend en fait du programme destinataire ; dans certains cas, ce peut donc être la méthode "post" (envoi des données séparé de l'adresse) 2 EnHTML, la notation « & » peut être utilisée à la place de « & » Pages dynamiques du côté du navigateur - Page 7 SCRIPT EN PERL SCRIPT PRODUISANT UNE PAGE AVEC LES RENSEIGNEMENTS REÇUS TEL QUE http://www.perl.com/ #!/usr/bin/perl # # mouchard.pl - Michel CARTEREAU - INA PG - 15 XI 1997 # SCRIPT ECRIT EN PERL 5.0 (REECRITURE DE printenv.pl) # RENVOI D'UNE PAGE AVEC LES PARAMETRES TRANSMIS VIA CGI sub banniereHTTP { # PREMIERE LIGNE EN BANNIERE (HEADER) POUR LE SERVEUR HTTP print "Content-type: text/html\n\n"; } sub debutPage { # DEBUT DE LA PAGE EN HTML print "<html>\n<head>\n"; print "<title>renseignements transmis </title>"; print "</head>\n"; } sub corpsPage { # CORPS DE LA PAGE EN HTML AVEC LES DONNEES EN QUERY_STRING print "<body>\n<h1>renseignements transmis</h1><hr>\n"; print "DONNEES : $ENV{QUERY_STRING}<br>\n"; print "<hr><i>mouchard.pl</i>\n</body>\n"; } sub finPage { # FIN DE LA PAGE EN HTML print "</html>\n"; } # ACTION &banniereHTTP ; &debutPage ; &corpsPage ; &finPage ; # FIN DE mouchard.pl SCRIPT STOCKÉ DANS UN DOSSIER SPÉCIFIQUE, EXEMPLE SOUS LINUX : /usr/lib/cgi-bin/ Pages dynamiques du côté du navigateur - Page 8 EXERCICE DU FORMULAIRE DE RECHERCHE RECONSTITUER LA PAGE DONNÉE CI-DESSOUS zone de saisie bouton de lancement de la recherche CARACTÉRISTIQUES DU FORMULAIRE ADRESSE DU PROGRAMME http://fr.search.yahoo.com/search IDENTIFICATION DE LA ZONE DES MOT-CLEF(S) p (nom de la zone, imposé par le script du serveur de Yahoo) Pages dynamiques du côté du navigateur - Page 9 EXERCICE DU COMPTEUR RECONSTITUER LA PAGE DONNÉE CI-DESSOUS PRINCIPE LE COMPTEUR EST UNE IMAGE PRODUITE PAR UN PROGRAMME NOMBRE DE CONSULTATIONS CONSERVÉ DANS UN FICHIER SPÉCIFIQUE PROCÉDÉ PARTICULIER, DÉPENDANT DU SERVEUR D'HÉBERGEMENT EXEMPLE DE MISE EN OEUVRE À AGROPARISTECH ADRESSE SPÉCIALE DE L'IMAGE http://gaia.agroparistech.fr/cgi-bin/vcounter.cgi?page=nom (remplacer « nom » par votre nom de compte) EXEMPLE http://gaia.agroparistech.fr/cgi-bin/vcounter.cgi?page=lili Pages dynamiques du côté du navigateur - Page 10 COMPLÉMENTS SUR CGI : MÉCANISMES PRINCIPES 1) LE SERVEUR INTERPRÈTE L'ADRESSE DE LA PAGE DEMANDÉE reconnaissance du programme destinataire 2) LE SERVEUR LANCE LE PROGRAMME CORRESPONDANT programme installé dans un dossier spécifique, contraintes de sécurité très importantes 3) LES DONNÉES SONT FOURNIES AU PROGRAMME PAR LE SERVEUR soit dans une variable d'environnement (méthode « get »), soit en entrée du programme (méthode « post ») le programme dispose aussi d'autres informations (cf. ci-après) 4) LE SERVEUR ATTEND LA FIN DE L'EXÉCUTION DU PROGRAMME renvoi des résultats produits sous la forme d'une page, avec un entête d'information (Content-Type: text/html) PASSAGE DES DONNÉES DONNÉES CODÉES PAR LE NAVIGATEUR informations généralement issues de zones d'un formulaire CAS DE LA MÉTHODE « get » données transmises dans l'adresse (après le « ? »), mises dans la variable d'environnement « QUERY_STRING » CAS DE LA MÉTHODE « post » données transmises séparément de l'adresse, fournies pour lecture par le programme (« entrée standard »), informations associées dans des variables d'environnement : « CONTENT_LENGTH » : taille des données, « CONTENT_TYPE » : type (MIME) des données Pages dynamiques du côté du navigateur - Page 11 COMPLÉMENTS SUR CGI : INFORMATIONS VARIABLES DISPONIBLES DANS L'ENVIRONNEMENT DU PROGRAMME EXÉCUTÉ SUR LE SERVEUR INFORMATIONS SUR LE SERVEUR SERVER_SOFTWARE ......... logiciel du serveur Web SERVER_NAME .................. nom du serveur sur l'Internet GATEWAY_INTERFACE ..... logiciel de la passerelle CGI INFORMATIONS SUR LES DONNEES ET LEUR TRANSMISSION CONTENT_TYPE ................ type des données envoyées à part CONTENT_LENGTH .......... longueur des données envoyées à part QUERY_STRING ................ données transmises dans l'adresse REMOTE_ADDR .................. adresse IP du poste de consultation REMOTE_HOST .................. nom du poste de consultation 1 REQUEST_METHOD ............ méthode d'envoi (GET ou POST) SCRIPT_NAME .................. identification du script, dans l'adresse SERVER_PROTOCOL ......... protocole HTTP de transmission SERVER_PORT .................. port TCP-IP de réception INFORMATIONS SUR LE NAVIGATEUR HTTP_USER_AGENT ......... identification du navigateur HTTP_ACCEPT .................. types (MIME) reconnus par le navigateur RÉFÉRENCE : http://hoohoo.ncsa.uiuc.edu/cgi/env.html 1 Le nom du poste, exemple : poste.ici.fr, n'existe pas toujours au contraire de son adresse IP Pages dynamiques du côté du navigateur - Page 12 APPLIQUETTES EN JAVA Utilisation d'une appliquette Pages dynamiques du côté du navigateur - Page 13 CAS N°2 : EFFET D'ANIMATION PARTICULIER RÉALISATION CONSTRUCTION D'UN PETIT PROGRAMME 1 EN LANGAGE JAVA téléchargement sur le poste avec le texte de la page EXÉCUTION DU PROGRAMME SUR LE POSTE DE CONSULTATION nécessite un logiciel d'exécution installé sur le poste, le résultat est une image affichée dans la page LE LANGAGE JAVA UN LANGAGE DE PROGRAMMATION PORTABLE ET TRÈS UTILISÉ disponible sur beaucoup de systèmes (Unix, Windows, Mac, ...) DÉVELOPPEMENT DE NIVEAU PROFESSIONNEL compétences avancées (programmation orientée objet) ATTENTION ! PROBLÈMES DE LENTEUR D'EXÉCUTION SUR CERTAINS POSTES BIBLIOTHÈQUE D'APPLIQUETTES : http://javascriptkit.com/java/ 1 La petite application s'appelle en anglais « applet » (application widget), qui se traduit en français par « appliquette » ou « applette ». Pages dynamiques du côté du navigateur - Page 14 EXEMPLE D'APPLIQUETTE EN JAVA BALISE SPÉCIALE POUR UNE APPLIQUETTE BALISE <object> (XHTML) <h1>Exemple d'appliquette en Java</h1> <hr /><p> <object classid="java:RainbowText.class" codetype="application/java" width="460" height="60"> <param name="text" value="Arc en ciel javanais" /> Désolé, ce navigateur est incompatible avec Java </object> </p> NOM DU FICHIER CONTENANT LE PROGRAMME (classid="java:fichier" ) TYPE DE PROGRAMME (codetype="application/java") TAILLE DE LA ZONE D'AFFICHAGE (width="..." height="..." ) PARAMÈTRAGE DE L'APPLIQUETTE (<param name="..." value="..." />) TEXTE DE REMPLACEMENT EN CAS DE NON EXÉCUTION DE L'APPLIQUETTE BALISE OBSOLÈTE <applet> (HTML 3.2) <h1>Exemple d'appliquette en Java</h1> <hr /><p> <applet code="RainbowText.class" width="460" height="60"> <param name="text" value="Arc en ciel javanais" /> Désolé, ce navigateur est incompatible avec Java </applet> </p> NOM DU FICHIER CONTENANT LE PROGRAMME (code="..." ) TAILLE DE LA ZONE D'AFFICHAGE (width="..." height="..." ) PARAMÈTRAGE DE L'APPLIQUETTE (<param name="..." value="..." />) TEXTE DE REMPLACEMENT EN CAS DE NON EXÉCUTION DE L'APPLIQUETTE <applet> REMPLACÉ PAR <object> DEPUIS HTML 4 ATTENTION ! INTERNET EXPLORER EST UN CAS À PART 1 1 Internet explorer nécessite un paramètrage spécifique de <object>, mais pas de <applet> Pages dynamiques du côté du navigateur - Page 15 APPLIQUETTE « RAINBOWTEXT » ORIGINE AUTEUR : GLENN RICHARD APPLIQUETTE DIFFUSÉE LIBREMENT (AVEC LE TEXTE SOURCE) http://www.javaboutique.internet.com/RainbowText/index.html PARAMÈTRAGE text texte à afficher ; par défaut d'indication : RainbowText bgcolor couleur du fond (RRVVBB) ; par défaut : 000000 (noir) fontname police pour le texte ; par défaut : TimesRoman fontstyle effet d'affichage : gras (B), italique (I), les deux (BI) ; par défaut : aucun fontsize taille de la police du texte ; par défaut : 36 sleeptime délai (en ms) entre les changements de couleur ; par défaut : 100 Pages dynamiques du côté du navigateur - Page 16 JAVASCRIPT Cas de script introduit dans une page Mise en œuvre avec quelques outils Exemples de script Principales caractéristiques du langage Javascript Pages dynamiques du côté du navigateur - Page 17 CAS N°3 : VALIDATION LORS DE LA SAISIE FORMULAIRE FORMULAIRE NOM NOM tarzan TARZAN PASSAGE AUTOMATIQUE DU NOM EN MAJUSCULE RÉALISATION ASSOCIATION D'UN PETIT PROGRAMME À LA PAGE ÉCRITE EN XHTML texte du « script » placé dans la page ou dans un autre fichier balises et attributs spécifiques, normalisés depuis HTML 4 CAS DU LANGAGE JAVASCRIPT LANGAGE DE SCRIPT INTERMÉDIAIRE ENTRE C ET JAVA interprétation plus ou moins parfaite selon les navigateurs (dès Netscape Navigator 2 et Microsoft Internet Explorer 3) LANGAGE DÉVELOPPÉ INITIALEMENT PAR NETSCAPE (À PARTIR DE 1995) langages concurrents (de Microsoft) : JScript et VBscript normalisation en ECMAScript (ECMA-262, ISO/IEC 16262 1) EVOLUTION SELON PLUSIEURS VERSIONS : JAVASCRIPT 1.1 À 1.8 2 interprétation plus ou moins parfaite selon les navigateurs, présentation ici de la version 1.5 de Javascript 3 A UTILISER AVEC UNE TRÈS GRANDE PRUDENCE ! 1 Norme disponible en : http://www.ecma-international.org/publications/standards/Ecma-262.htm Documentations disponibles en : http://developer.mozilla.org/fr/docs/JavaScript 3 Compatible avec ECMAScript édition 3, et globalement reconnue par les navigateurs Mozilla, Firefox, Safari, Opera 7 et +, Internet explorer 6 et 7. 2 Pages dynamiques du côté du navigateur - Page 18 EXEMPLE N°1 EN JAVASCRIPT : MAJUSCULE EXEMPLE SIMPLE D'INTRODUCTION DE SCRIPT DANS UNE PAGE OBJECTIF Mise en majuscule systématique après la saisie du nom PRINCIPE 1) Déclenchement de la mise en majuscule après modification un événement associé à la fin de modification : onchange 2) Passage en majuscule assurée par une fonction en Javascript fonction zmajus(idzone) 1 définie dans le fichier zmajus.js 2, inséré en fin de la page 3 3) Indication du nom de la zone à l'appel de la fonction : onchange="zmajus('znom');" 4 avec identification en XHTML de la zone de saisie du texte (attribut id) ATTENTION ! minuscules ET MAJUSCULES DISTINCTES EN JAVASCRIPT 1 Texte de la fonction disponible sur les pages de l'auteur, à la présentation de ce document : http://www.agroparistech.fr/mmip/mc/agro/htmldyna.html 2 Par convention, les noms de fichier contenant du code en Javascript portent le suffixe « .js » 3 A priori l'insertion du script s'effectue en fin de page afin de ne pas retarder l'affichage de celle-ci 4 Les guillemets (« " ») délimitent la valeur de l'attribut en XHTML. Pages dynamiques du côté du navigateur - Page 19 PAGE DE LA MISE EN MAJUSCULE TEXTE DE LA PAGE EN XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> langage de script utilisé, quand non précisé <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Exemple n°1 en Javascript</title> </head> <body> <h1>Exemple n°1 en Javascript</h1> <h2>Passage en majuscule</h2> <form action="http://gaia.agroparistech.fr/cgi-bin/mouchard.pl"> <p><label>Nom identification de la zone <input type="text" size="20" maxlength="20" name="znom" id="znom" onchange="zmajus('znom');" /></label> <input type="submit" value="envoyer" /></p> </form> attribut spécifique pour l'événement déclencheur <script type="text/javascript" src="zmajus.js"></script> </body> insertion du texte du script </html> langage de script par défaut : balise <meta http-equiv="Content-Script-Type" /> texte du script : balise pour placement dans la page, <script> événement déclencheur : attribut spécifique de balise, onchange="" Pages dynamiques du côté du navigateur - Page 20 SCRIPT DE LA MISE EN MAJUSCULE TEXTE DU SCRIPT DANS LE FICHIER zmajus.js function zmajus(idzone) { // passe en majuscule la valeur de // la zone identifiee par la valeur de "idzone" // exemple d'appel : zmajus('znom'); var zone; // objet de la zone // action zone = document.getElementById(idzone); zone.value = zone.value.toUpperCase(); } // function Script : composé d'une fonction function nom (paramètres) { instructions } identifiée par le nom zmajus avec le paramètre d'appel idzone Variable définie à l'intérieur de la fonction : déclaration au début du texte de la fonction : var nom ; Passage en majuscule : zone définie par document.getElementById(idzone) (la zone identifiée par "idzone" dans la page) texte de la zone identifié par zone.value copie en majuscules par zone.value.toUpperCase() Commentaires en Javascript : /* texte */ ou // suivi d'un texte jusqu'à la fin de la ligne Insertion en fin de la page en XHTML Pages dynamiques du côté du navigateur - Page 21 NOTATION D'UN (JAVA)SCRIPT EN XHTML CAS DE SCRIPT EXTERNE À LA PAGE (CONSEILLÉ 1) BALISE <script> AVEC ATTRIBUT INDIQUANT LE FICHIER 2 DU SCRIPT <script type="text/javascript" src="fichier"></script> EXEMPLE <script type="text/javascript" src="zmajus.js"></script> CAS DE TEXTE INTERNE À LA PAGE (DÉCONSEILLÉ 1) <script> COMPLÉTÉ PAR DES NOTATIONS SPÉCIALES <script type="text/javascript"> <!-- // <![CDATA[ texte du script // ]]> --> </script> BALISE <![CDATA[ ]]> CAR SINON INTERPRÉTATION DE « < > & » Autre notation recommandée afin de contourner des incompatibilités de navigateurs : <script type="text/javascript" > <!--//--><![CDATA[//><!-texte du script //--><!]]> </script> EXEMPLE <script type="text/javascript"> <!--//--><![CDATA[//><!-function zmajus(nomzone) ... } // function // --><!]]> </script> INDICATION DU LANGAGE DE SCRIPT POUR LA PAGE Métadonnée placée dans l'entête de la page afin de fixer le langage quand non explicitement indiqué (cas de script dans une balise 3) <meta http-equiv="Content-Script-Type" content="text/javascript" /> 1 Mise du script dans un fichier externe conseillé pour favoriser la réutilisation et éviter certaines contraintes posées par de vieux navigateurs ou par XHTML. 2 Par convention, le fichier d'un javascript porte le suffixe « .js » 3 En son absence, aucune garantie n'existe sur la bonne exécution du script dans le navigateur. Pages dynamiques du côté du navigateur - Page 22 JAVASCRIPT AVEC FIREFOX CAS DE LA VERSION 3 DE FIREFOX 1 CONSOLE INTÉGRÉE D'AIDE À LA MISE AU POINT Commande OUTILS CONSOLE D'ERREURS Visualisation d'un message de détail sur l'anomalie avec un lien pour visualiser le texte du script erroné EXÉCUTION DIRECTE DE CODE Soit en tapant l'instruction en Javascript dans la console puis en validant afin d'obtenir son exécution Soit avec l' adresse de navigation, javascript:instruction Exemple : javascript:"un petit essai".toUpperCase() (dans la fenêtre principale de navigation) EXTENSION POUR LA MISE AU POINT : FIREBUG 2 en bas à droite Activation via AFFICHER FIREBUG ou le bouton Débogage 3 via un clic sur la ligne en erreur ou dans l'onglet SCRIPT 1 Navigateur gratuit, disponible en http://www.mozilla-europe.org/fr/products/firefox/ Extension à installer via la commande OUTILS MODULES COMPLÉMENTAIRES puis CATALOGUE 3 L'outil de débogage facilite la détection d'une anomalie à l'aide de fonctions d'exécution pas à pas et de visualisation de la valeur de variables. 2 Pages dynamiques du côté du navigateur - Page 23 JAVASCRIPT AVEC INTERNET EXPLORER CAS DE LA VERSION 8 DE INTERNET EXPLORER 1 BLOCAGE DE L'EXÉCUTION DE SCRIPT Au chargement d'une page avec un script en Javascript intégré, message signalant une restriction sur l'exécution de scripts : Réglage pour supprimer ce blocage : OUTILS OPTIONS INTERNET puis dans l'onglet AVANCÉ à la rubrique SÉCURITÉ : activer l'option AUTORISER L'EXÉCUTION DU CONTENU ACTIF DANS LES FICHIERS DE ... AIDE À LA MISE AU POINT Possibilité de signalement détaillé d'erreur à l'exécution d'un script : OUTILS OPTIONS INTERNET, onglet AVANCÉ, rubrique NAVIGATION, cocher AFFICHER UNE NOTIFICATION DE CHAQUE ERREUR DE SCRIPT ou aussi avec l'accès à un outil d'aide à la mise au point (débogage de script) : OUTILS OPTIONS INTERNET, onglet AVANCÉ, rubrique NAVIGATION, décocher DÉSACTIVER LE DÉBOGAGE DES SCRIPTS (INTERNET EXPLORER) Confirmation afin d'activer l'outil de débogage 2 : Retour à la page via le bouton ARRÊTER LE DÉBOGAGE 1 Du fait de ses caractéristiques (non respect des normes, sensibilité aux logiciels malveillants, etc.), le navigateur Internet explorer de Microsoft est déconseillé au profit du logiciel Firefox de Mozilla. 2 L'outil de débogage facilite la détection d'une anomalie à l'aide de fonctions d'exécution pas à pas et de visualisation de la valeur de variables. Pages dynamiques du côté du navigateur - Page 24 AUTRE VERSION DE LA MISE EN MAJUSCULE VERSION SIMPLIFIÉE PRINCIPE ACCÈS À LA ZONE (OU OBJET) CONCERNÉE PAR L'ÉVÉNEMENT désignée par la notation this dans le code associé à l'événement NOMS DE FORMULAIRE ET DE ZONE INUTILISÉS objet passé en paramètre à la fonction de passage en majuscule ECRITURE TEXTE DU SCRIPT DANS LE FICHIER zmajus.js function zmajus(zone) // passe en majuscule la valeur de // la zone identifiee par l'objet "zone", // exemple d'appel : zmajus(this); { zone.value = zone.value.toUpperCase(); } // function TEXTE DE LA PAGE EN XHTML (EXTRAIT) <form action="http://www.agroparistech.fr/cgi-bin/winfo/mouchard.pl"> <input type="submit" value="envoyer" /></p> <p><label>Nom <input type="text" size="20" maxlength="20" name="znom" id="znom" onchange="zmajus(this);" /></label> <input type="submit" value="envoyer" /></p> </form> Pages dynamiques du côté du navigateur - Page 25 EXEMPLE N°2 EN JAVASCRIPT : HEURE COURANTE AFFICHAGE DE L'HEURE COURANTE DANS LA PAGE CONSULTÉE OBJECTIF Insertion de l'heure courante dans un paragraphe PRINCIPE 1) Affichage du texte de l'heure dans la page script 1 placé à l'endroit de l'affichage de l'heure dans la page document.write( heure() ); 2) Message affiché si Javascript ignoré par le navigateur texte placé au sein de d'une balise spécifique : <noscript> <noscript> ... </noscript> affichage dans la page : script dans le corps, document.write() navigateur incompatible : texte de remplacement, <noscript> 1 Texte de la fonction disponible sur les pages de l'auteur, à la présentation de ce document : http://www.agroparistech.fr/mmip/mc/agro/htmldyna.html Pages dynamiques du côté du navigateur - Page 26 PAGE DE L'HEURE COURANTE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Afficher l'heure en Javascript</title> <body> <h1>Afficher l'heure en Javascript</h1> <hr /> <p>Voici l'heure courante déterminée par une fonction écrite en Javascript : <script type="text/javascript" src="heure.js"></script> </p> insertion du script de l'affichage de l'heure <noscript> <strong>Désolé, impossible d'utiliser Javascript !</strong> </noscript> message si navigateur incompatible <hr /> <address>Michel Cartereau - 23 XI 2007</address> </body> </html> Pages dynamiques du côté du navigateur - Page 27 SCRIPT DE L'HEURE COURANTE TEXTE DU SCRIPT DANS LE FICHIER heure.js function heure() { // renvoie l'heure courante dans une chaine : 'hh H mm' // exemple d'appel : document.write( heure() ); var horodatecourante, resultat ; // action horodatecourante = new Date(); resultat = horodatecourante.getHours() + ' H ' + horodatecourante.getMinutes(); return resultat; } // function // affichage de l'heure dans la page document.write( heure() ); Affichage dans la page : document.write( texte ) Fonction produisant le texte de l'heure courante : function heure() { ... } Variables définies à l'intérieur de la fonction : déclaration au début de son texte : var nom ; regroupement possible de déclarations : var nom1, nom2 ; Manipulation d'une horodate : objet de l'horodate courante : new Date() heures d'une horodate : horodate.getHours() minutes d'une horodate : horodate.getMinutes() Construction d'un texte : texte noté entre apostrophes ou guillemets : 'texte' ou "texte" collage de morceaux (« concaténation ») : texte1 + texte2 Renvoi d'une valeur par la fonction : instruction spécifique : return valeur ; Pages dynamiques du côté du navigateur - Page 28 EXEMPLE N°3 EN JAVASCRIPT : LISTE DE LIENS CHOIX D'UN LIEN DANS UNE LISTE OBJECTIF Formulaire de consultation d'un site au choix dans une liste PRINCIPE 1) Formulaire avec une zone de liste pour les sites proposés valeur de chaque élément de liste : adresse du site (sans http://) 2) Bouton d'activation du script zone spécifique : <input type="button" onclick="" value="" /> 1 3) Fonction de visite du site sélectionné : visiter(idzone); fichier du texte du script 2 inséré en fin de page 4) Contenu affiché si Javascript ignoré par le navigateur texte placé au sein de d'une balise spécifique : <noscript> bouton déclencheur de script : <input type="button" onclick="..." /> 1 Depuis HTML 4, il existe aussi l'élément <button type="button"> mais il est déconseillé car non reconnu par certains navigateurs et d'avenir incertain dans les futures normes. 2 Texte de la fonction disponible sur les pages de l'auteur, à la présentation de ce document : http://www.agroparistech.fr/mmip/mc/agro/htmldyna.html Pages dynamiques du côté du navigateur - Page 29 PAGE DE LA LISTE DE LIENS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Liens en liste</title> </head> <body> <h1>Liens en liste</h1> <hr /> identification de la zone du défilement <form action=""> <label>Site : <select name="zadresse" id="zadresse" size="1"> <option selected="selected" value="">(vide)</option> <option value="www.lemonde.fr">Le Monde</option> <option value="www.liberation.fr">Libération</option> <option value="www.sncf.fr">SNCF</option> adresse de site (sans le préfixe) </select></label> <input type="button" value="Visiter" onclick="visiter('zadresse');" /> </form> bouton avec appel de la fonction contenu pour navigateur incompatible <noscript> <p>Désolé, le formulaire est inutilisable sans Javascript. Liens :</p> <ul> <li><a href="http://www.lemonde.fr">Le Monde</a></li> <li><a href="http://www.liberation.fr">Libération</a></li> <li><a href="http://www.sncf.fr">SNCF</a></li> </ul> </noscript> <hr /> <address>Michel CARTEREAU - 15 XI 2013</address> <script type="text/javascript" src="visiter.js"></script> </body> insertion du script de la fonction </html> Pages dynamiques du côté du navigateur - Page 30 SCRIPT DE LA LISTE DE LIENS TEXTE DU SCRIPT DANS LE FICHIER visiter.js function visiter(idzone) { // activation d'un lien (non vide), // code en valeur de l'option selectionnee // sous la forme d'une adresse sans le prefixe "http://", // dans la zone de liste identifiee par la valeur de "idzone " // exemple d'appel : visiter('zadresse'); var adresse ; // adresse choisie (sans prefixe http://) var zone ; // objet de la zone de liste var rang ; // rang de l'option choisie dans la zone de liste // action // determination de l'objet de la zone zone = document.getElementById(idzone); // recuperation de l'identification du choix rang = zone.selectedIndex; // recuperation de la valeur de la zone adresse = zone.options[rang].value; // visite de la page si adresse non vide if ('' != adresse) { window.location = 'http://' + adresse; } } // function Zone du formulaire : identification de la zone de liste : idzone objet de la zone : document.getElementById(idzone) Propriétés d'un objet de zone de liste : rang de l'option choisie : zone.selectedIndex valeur de l'option en rang : zone.options[rang].value Instruction conditionnelle : if (condition) { instructions } condition de chaîne non vide : '' != variable (vide n'est pas la valeur de variable) Passage à une nouvelle page : indication de son adresse (URL) : window.location = url; Pages dynamiques du côté du navigateur - Page 31 EXEMPLE N°4 EN JAVASCRIPT : DÉFILEMENT DÉFILEMENT D'UN TEXTE DANS LA PAGE OBJECTIF Défilement d'un texte dans une zone PRINCIPE 1 1) Formulaire réduit à une zone de texte sur une ligne zone de texte de nom fixé (ici 'zdefil') 2) Script d'initialisation du défilement associé à l'événement d'ouverture de la page (onload) <body onload= "initdefil('zdefil', 'ce texte défile...', 100);"> fonction initdefil(idzone, message, vitesse) avec conservation de paramètres dans des variables globales 3) Fonction assurant une étape de défilement du texte activdefil() placé dans un script en début de page 4) Auto-entretien du défilement renouvellement du défilement assuré à l'aide d'une minuterie setTimeout('activdefil()', vitessedefil); événement de fin de chargement de la page : <body onload=""> variables globales au script : déclaration avant les fonctions, var 1 Programmes disponibles sur les pages de l'auteur, à la présentation de ce document : http://www.agroparistech.fr/mmip/mc/agro/htmldyna.html 2 Variables dont la valeur est conservée en permanence pendant l'exécution des scripts de la page Pages dynamiques du côté du navigateur - Page 32 2 PAGE AVEC LE DÉFILEMENT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Exemple de défilement en JavaScript</title> </head> initialisation <body onload="initdefil('zdefil', 'ce texte défile...', 100);"> <h1>Exemple de défilement en JavaScript</h1> <hr /> <form action=""> <input name="zdefil" id="zdefil" type="text" size="10" /> </form> <noscript> identification de la zone du défilement message pour navigateur incompatible <strong>Désolé, impossible d'utiliser Javascript !</strong> </noscript> <hr /> <address>Michel Cartereau - 15 XI 2013</address> <script type="text/javascript" src="defil.js"></script> </body> fichier des scripts </html> Pages dynamiques du côté du navigateur - Page 33 SCRIPT DU DÉFILEMENT TEXTE DU SCRIPT DANS LE FICHIER defil.js Variables globales au script : déclaration avant et en dehors des fonctions, var nom; utilisation sans redéclaration dans n'importe quelle fonction, cas ici d'une initialisation à la déclaration : var pasdefil = 1; // variables globales : parametres du defilement var messagedefil; // texte a defiler var vitessedefil; // vitesse de defilement (en ms) var zonedefil; // objet de la zone de defilement var pasdefil = 1; // pas du defilement (nombre de lettres) function initdefil(idzone, message, vitesse) { // initialisation du defilement : enregistrement // - de la zone de defilement (identifiee par "idzone") // en "zonedefil", // - du texte a defiler en "messagedefil" // - de la vitesse en "vitessedefil" mesuree en ms. // exemple d'appel : initdefil('zdefil', 'Ah...', 1000); // // initialisations de parametres en variables globales messagedefil = message + ' '; vitessedefil = vitesse; zonedefil = document.getElementById(idzone); // initialisation de la zone zonedefil.value = messagedefil; // demarrage du defilement activdefil(); } // function Pages dynamiques du côté du navigateur - Page 34 SCRIPT DU DÉFILEMENT (SUITE) function activdefil() { // defilement, de "pasdefil" lettre(s), du contenu de la zone // "zonedefil", puis preparation de // la prochaine execution dans "vitessedefil" ms (milliseconde) // premiere execution precedee par l'appel de initdefil() // exemple d'appel : activdefil(); var contenu; // texte contenu dans la zone // action // re-armement de la minuterie setTimeout('activdefil()', vitessedefil); // recuperation du contenu courant de la zone contenu = zonedefil.value; // decalage du contenu selon pasdefil zonedefil.value = contenu.substring(pasdefil) + contenu.substring(0, pasdefil); } // function Mécanisme de minuterie : exécution différée après un délai fixé en millisecondes, activation : setTimeout('code à exécuter', délai en ms); Extraction dans une chaîne de caractères : tout le texte à partir de rang (1er en 0) : chaîne.substring(rang) ou jusqu'à borne (non comprise) : chaîne.substring(rang, borne) Pages dynamiques du côté du navigateur - Page 35 EXEMPLE N°5 EN JAVASCRIPT : FENÊTRE D'INFO. AFFICHAGE DES CARACTÉRISTIQUES DE L'ÉCRAN DANS UNE PETITE FENÊTRE OBJECTIF Affichage d'un message dans une fenêtre d'informations PRINCIPE 1 1) Formulaire réduit à un bouton de commande bouton d'activation de script 2) Script d'affichage de la fenêtre d'informations fonction ecran() 3) Objet associé à l'écran d'affichage de la page window.screen désigne l'écran contenant la page objet pour la fenêtre d'affichage : window objet pour l'écran d'affichage : window.screen 1 Programmes disponibles sur les pages de l'auteur, à la présentation de ce document : http://www.agroparistech.fr/mmip/mc/agro/htmldyna.html Pages dynamiques du côté du navigateur - Page 36 PAGE DES INFORMATIONS SUR L'ÉCRAN <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Informations sur l'écran</title> </head> <body> <h1>Informations sur l'écran</h1> <hr /> <form action=""> <input type="button" value="Caractéristiques de l'affichage" onclick="ecran();" /> </form> <noscript> <strong>Désolé, il impossible d'utiliser Javascript !</strong> </noscript> <hr /> <address>Michel Cartereau - 23 XI 2007</address> <script type="text/javascript" src="ecran.js"></script> </body> </html> Pages dynamiques du côté du navigateur - Page 37 SCRIPT DES INFORMATIONS SUR L'ÉCRAN TEXTE DU SCRIPT DANS LE FICHIER ecran.js function ecran() { // affiche dans une petite fenêtre d'information, la taille // en pixels et la taille de codage des couleurs de l'ecran var message; // texte à afficher // action // collecte des informations dans un message message = "Ecran de " + window.screen.width + " x " + window.screen.height + " pixels, " + "en couleurs codées sur " + window.screen.colorDepth + " bits"; // affichage du message dans une fenêtre d'information window.alert(message); } // function Propriétés de l'écran d'affichage window.screen : largeur et hauteur en pixels : width et height taille en bits du codage des couleurs : colorDepth Affichage d'un message dans une petite fenêtre d'information : notation : window.alert(message); Pages dynamiques du côté du navigateur - Page 38 EXEMPLE N°6 EN JAVASCRIPT : CARTE INTERACTIVE AFFICHAGE D'UNE CARTE INTERACTIVE DANS LA PAGE OBJECTIF Affichage d'une carte interactive centrée sur un point cliquable PRINCIPE 1 1) Zone dédié à l'affichage de la carte une division en HTML de taille fixée 2) Scripts d'affichage de la carte bibliothèques de script (OpenLayers, Mapstraction) fonction initialiser() déclenchée à l'affichage de la page (onload) bibliothèques en Javascript : OpenLayers, Mapstraction affichage de la carte dans un élément conteneur en HTML 1 Programmes disponibles sur les pages de l'auteur, à la présentation de ce document : http://www.agroparistech.fr/mmip/mc/agro/htmldyna.html Pages dynamiques du côté du navigateur - Page 39 PAGE DE LA CARTE INTERACTIVE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Exemple de carte produite par OpenStreetMap</title> <link rel="stylesheet" type="text/css" href="carte.css"/> <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"> </script> <script type="text/javascript" src= "http://mapstraction.googlecode.com/svn/trunk/source/mxn.js?(openlayers)"> </script> <script type="text/javascript" src="carte.js"></script> </head> <body onload="initialiser()"> <div id="entete"> <h1>Exemple de carte produite par OpenStreetMap</h1> </div> <div id="zone_carte"></div> <div id="pied"> <address>Michel Cartereau - 15 XI 2013</address> </div> </body> </html> et sa feuille de style : /* carte.css - Michel Cartereau - 9 XI 2012 */ body { margin: 2em; } #entete, #pied { padding: 0.5em; border: thin dotted Teal; } #zone_carte { width: 100%; height: 300px; } h1 { font-size: 120%; font-weight: bold; } Pages dynamiques du côté du navigateur - Page 40 SCRIPT DE LA CARTE INTERACTIVE TEXTE DU SCRIPT DANS LE FICHIER carte.js : var carte; // variable representant la carte function initialiser() { // initialisation de la carte et association a la zone d'affichage carte = new mxn.Mapstraction('zone_carte','openlayers'); // creation d'un point repere, determine par latitude et longitude 1 var repere_carte = new mxn.LatLonPoint(48.84, 2.35); // centrage de la carte sur le repere carte.setCenterAndZoom(repere_carte, 16); // pose d'une marque sur la carte var marque = new mxn.Marker(new mxn.LatLonPoint(48.83976, 2.34854)); var libelle = '<a href="http://www.agroparistech.fr/" ' + ' target="_blank">AgroParisTech</a>'; marque.setInfoBubble(libelle); carte.addMarker(marque); // ajout de boutons sur la carte carte.addControls( { pan: true , // boutons de deplacement zoom: 'small', // barre de zoom, 'large' ou 'small' map_type: false // bouton de choix du fond } ); } Carte interactive création : carte = new mxn.Mapstraction('conteneur', 'openlayers'); centrage et zoom sur un point : carte.setCenterAndZoom(point, niveau); Point localisé selon ses cooordonnées géographiques notation : point = new mxn.LatLonPoint(latitude, longitude); Marque sur la carte associée à un point création : marque = new mxn.Marker(point); association d'un libellé (en cas de clic) : marque.setInfoBubble(libelle); ajout à la carte : carte.addMarker(marque); 1 Site pour déterminer les coordonnées d'un point à l'aide d'une carte : http://itouchmap.com/ Pages dynamiques du côté du navigateur - Page 41 APERÇU SUR JAVASCRIPT INSERTION DANS LE TEXTE EN XHTML BALISE POUR INSERTION D'UN FICHIER DE JAVASCRIPT 1 : <script> insertion a priori en fin de page (avant </body>) <script type="text/javascript" src="fichier"></script> 2 CAS D'UN TEXTE DE SCRIPT INTERNE À LA PAGE (DÉCONSEILLÉ) texte en Javascript encadré par deux lignes spéciales 3 <script type="text/javascript"> <!--//--><![CDATA[//><!-texte en Javascript //--><!]]> </script> CODE ÉCRIT DANS DES BALISES (CHAMP RELATIF À UN ÉVÉNEMENT) <... événement="code en Javascript"> POUR SIGNALER LA PRÉSENCE DE SCRIPTS (NAVIGATEUR INCOMPATIBLE) <noscript> affichage si Javascript non reconnu </noscript> EXECUTION SOIT PAR ASSOCIATION À UN ÉVÉNEMENT LIÉ À UN ÉLÉMENT DE LA PAGE par exemple, quand on clique sur un bouton SOIT LORS DE LA VISUALISATION DE LA PAGE par exemple, affichage de l'heure dans la page POSSIBILITÉ D'EXÉCUTION DIRECTE DANS UN NAVIGATEUR dans la zone de l'adresse, taper le code préfixé de « javascript: » POUR PLUS D'INFORMATION : http://www.ecma-international.org/, http://www.mozilla.org/js/scripting/ 1 Un fichier de (java)script contient le code sans balise d'HTML ; suffixe « .js » par convention ; exemple : general.js 2 L'attribut type a été introduit en HTML 4 ; certains vieux navigateurs reconnaissent un autre attribut hors norme (language) ; exemple : <script language="javascript"> 3 Ces deux lignes de commentaires évitent l'affichage du texte de script par de vieux navigateurs Pages dynamiques du côté du navigateur - Page 42 CARACTÉRISTIQUES GÉNÉRALES JAVASCRIPT EST PROCHE DU LANGAGE C AVEC UNE ORIENTATION OBJET ECRITURE RÉPARTITION SUR LES LIGNES LIBRE A PRIORI pour faciliter la lecture, indenter les lignes (surtout les blocs) et entourer les symboles d'opérations par une espace retour-à-la-ligne à éviter dans le texte d'une instruction 1 INSTRUCTIONS instruction terminée par un point-virgule (« ; ») 2 bloc : une ou plusieurs instructions entre accolades (« { } ») exemples : nb = 1; if (total > 100) { nb = 0; i = 0; } COMMENTAIRES soit une ligne débutant par « // », soit une ou plusieurs lignes de texte encadrées par « /* » et « */ » exemple : // fait par MC en mai 2005 VALEURS NUMÉRIQUES : NOMBRES ENTIERS OU RÉELS NaN 3 pour désigner une valeur indéterminée, Infinity pour l'infini exemples : 1 6.55957 2.1e5 0xFF (hexadécimal) CHAÎNES DE CARACTÈRES : ENTRE GUILLEMETS OU APOSTROPHES il n'est pas possible d'étaler le texte sur plusieurs lignes exemples : 'mardi' "c'est extra !" CARACTÈRES SPÉCIAUX : NOTATION DÉBUTANT PAR « \ » \n (retour-à-la-ligne) \t (tabulation) \\ (véritable « \ ») \' \" (au sein d'une chaîne délimitée par ce symbole) \xHH (caractère UTF-8 de code hexadécimal HH) exemple : 'L\'orme champ\xEAtre' (« L'orme champêtre ») VALEUR NON DÉFINIE : null LOGIQUES : true false valeurs fausses particulières : non définie, chaîne vide, nombre nul ATTENTION À LA DIFFÉRENCIATION minuscules - MAJUSCULES ! 1 Une fin de ligne peut être considérée comme une fin d'instruction en Javascript ! Si besoin de couper en fin de ligne, le faire après une virgule ou un opérateur (comme « + ») 2 Ceci n'est en fait obligatoire que si l'instruction est suivie d'une autre sur la même ligne mais cela est très fortement conseillé afin d'éviter des anomalies d'interprétation du code. 3 NaN (not a number), par exemple une valeur numérique mais non réelle comme la racine carrée de -1 ; attention à l'orthographe, ce n'est ni nan ni NAN ni Nan ! se détecte avec la fonction isNaN() Pages dynamiques du côté du navigateur - Page 43 CARACTÉRISTIQUES DES VARIABLES NOMS DE VARIABLES composé de lettres, chiffres, ou trait de souligné (« _ ») différenciation des minuscules et MAJUSCULES, pas d'accents le premier caractère ne peut pas être un chiffre et éviter « _ » exemples : nb total_mois x007 tableNoms TYPE DES VARIABLES une variable n'a pas de type fixé une fois pour toutes et donc, elle peut contenir successivement des valeurs de types différents exemple : x007 = 'espion' ; x007 = 7; DÉCLARATION DÉCLARATION EXPLICITE 1 var liste de noms séparés par une virgule ; avec une initialisation possible : nom = valeur exemples : var i, j; var nom = "rose"; DÉCLARATION IMPLICITE automatique dès la première affectation d'une valeur à la variable exemple : pi = 3.14; VARIABLE GLOBALE (seulement si nécessaire 2) soit déclarée explicitement en dehors d'une fonction, soit déclarée implicitement en dehors ou dans une fonction VARIABLE LOCALE À UNE FONCTION 3 déclaration obligatoirement explicite au sein de la fonction exemple : function dernier(chaine) { // renvoie le dernier caractere de chaine, ou null si vide var resultat = null; // valeur renvoyee if ( ('string' == (typeof chaine) ) && (chaine.length > 0) { resultat = chaine.charAt(chaine.length - 1); } return resultat; } 1 La déclaration explicite est fortement conseillée afin d'éviter toute modification malencontreuse d'une variable globale au sein d'une fonction. 2 Une variable globale peut servir de définition d 'une constante, en l'absence de mécanisme ad hoc. 3 Seule possibilité de variable locale car il n'existe pas d'autre type de variable locale malgré la possibilité de déclaration dans un bloc ; exemple : for (var i = 0; i < 10; ++i) {t[i] = 0;} ici, i est une variable locale à la fonction englobante si existante ou sinon alors une variable globale. Pages dynamiques du côté du navigateur - Page 44 PRINCIPALES EXPRESSIONS CALCULS ÉLÉMENTAIRES + - / ( 1) * % (modulo) + (concaténation de chaînes) && (et logique 2) || (ou logique 2) ! (négation) exemples : (nb * 10) + 100 vide || ( ! plein) 100 % 12 'http://' + adressepage COMPARAISONS < <= > >= == (égalité de valeur 3) != (différence de valeurs) === (identité en valeur et type 4) !== (différence de valeur ou type) exemples : (taille >= 10) && (taille <= plafond) nom != 'zorro' nomElement === nomBouton EXPRESSION CONDITIONNELLE condition ? valeur si vérifiée : valeur sinon exemple : (sexe == 'F') ? 'femme' : 'homme' DÉTERMINATION DE TYPE typeof élément où élément : nom de variable, nom de fonction, valeur ou objet renvoi d'un libellé indiquant le type de l'élément : 'undefined' (inexistant, non déclaré), 'number' (numérique), 'string' (chaîne de caractères), 'boolean' (logique), 'function' (fonction) ou sinon 'object' (objet, ou variable à la valeur null) exemple : if ('undefined' == (typeof PI) ) { PI = 3.14; } 1 La division de deux nombres entiers donne un résultat réel ; exemple : 1.5 pour 3 / 2 Attention à ne pas mettre un seul « & » ou « | » (car opération spéciale sur des bits) 3 Ne pas oublier d'être vigilant sur les fautes de frappe afin d'éviter la confusion avec l'affectation (« = ») ; une astuce consiste à placer systématiquement une constante à gauche de la comparaison 4 Utile notamment pour éviter une confusion entre la valeur zéro et une chaîne vide 2 Pages dynamiques du côté du navigateur - Page 45 PRINCIPALES INSTRUCTIONS MODIFICATION D'UNE VARIABLE affectation de valeur à une variable : variable = valeur; modification d'une variable avec une valeur : variable opérateur = valeur; avec opérateur : + - * / % équivalent à : variable = variable opérateur valeur; incrémentation, décrémentation : ++variable; --variable; ( 1) exemples : rang = 0; t[0] = 1; trait += "-"; ++nb; --t[2]; TESTS if (expression) { instruction(s); } if (expression) { instruction(s)1; } else { instruction(s)2; } switch (expression) { case valeur1: instruction(s)1; break; case valeur2: instruction(s)2; break; ... default: instruction(s); } exemples : if (0 == nb) { i = 0; } else { i = 1; k = 0; } if ("fr" == langue) { if ("0" == code) { pays = "France"; } else { pays = 'francophone'; } } switch (indicatif) { case 33 : pays = 'France'; break; case 32 : pays = 'Belgique'; break; default: pays = 'inconnu'; } 1 Il existe aussi les post-(dé)incrémentations (variable++ variable--) mais il s'agit d'opérations peu intuitives qui sont source d'erreurs fréquentes et donc déconseilées. Pages dynamiques du côté du navigateur - Page 46 PRINCIPALES INSTRUCTIONS (SUITE) ITÉRATIONS 1 while (condition d'itération) { instruction(s); } do { instruction(s); } while (condition d'itération); 2 for (initialisation ; condition d'itération ; continuation 3) { instruction(s); } sortie par break, passage à l'itération suivante par continue exemples : /* itération en nombre fixe (pour de a faire) */ for (i = 0 ; i < 10 ; ++i) { noms[i]= ''; } for (i = 0, j = 9 ; i < 10 ; ++i, --j) { x[i] = y[j]; } /* itération conditionnelle (répéter jusqu'à) */ do { accord = demander(); } while (! accord) /* itération conditionnelle (tant que faire) */ while (nb < plafond) { nb = nb * 2; } /* itération avec sortie au milieu (itérer sortirsi) */ i = 0 ; do { document.write(noms[i] + ' '); if ('fin' == noms[i]) { break; } ++i; } while (true) 1 Les accolades ne sont pas obligatoires pour une instruction unique dans une itération, mais elles sont très fortement conseillées afin d'éviter des erreurs de codage très difficiles à détecter. 2 Exécution avant la première itération ; possibilité de noter plusieurs instructions séparées par virgule. 3 Exécution avant l'itération suivante ; possibilité de noter plusieurs instructions séparées par virgule. Pages dynamiques du côté du navigateur - Page 47 TABLEAUX : GÉNÉRALITÉS CLASSE Array CRÉATION tableau créé sans valeur initiale par new Array(taille)ou [] avec valeurs initiales par new Array(valeur1, ...)ou [valeur1, ...] MANIPULATIONS DES ÉLÉMENTS rang compté à partir de 0, noté entre crochets (« [ ] ») valeur d'un élément : tableau [ rang ] ajout ou modification d'un élément : tableau [ rang ] = valeur ; suppression d'un élément : delete tableau [ rang ]; éléments non nécessairement définis pour tous les rangs (possibilité d'existence de trous entre deux rangs définis) PROPRIÉTÉS length ............................... taille du tableau PRINCIPALES MÉTHODES push(élément-s)................ ajout d'élément(s) 1 à la fin du tableau pop().................................. retrait et renvoi du dernier élément unshift(élément-s) ......... ajout d'élément(s) 2 au début du tableau shift() ............................. retrait et renvoi du premier élément slice(départ) ................... renvoie le sous-tableau constitué des éléments à partir du rang indiqué slice(départ, borne)........ renvoie le sous-tableau du rang de départ jusqu'avant le rang de borne (non inclus) concat(élément-s) ........... renvoie un tableau en complétant le tableau considéré par le (les 1) élément(s) join(séparateur) .............. chaîne composée de tous les éléments accolés avec le séparateur indiqué reverse() ......................... inversion de l'ordre des éléments sort() ............................... tri par ordre lexicographique EXEMPLES var noms = new Array('Gaia', 'Maia'); var liste = []; noms[2] = 'Li'; nb = noms.length; noms.push('Jules', 'Jim'); noms.reverse(); delete noms[2]; liste = noms.join(', '); 1 2 Liste d'éléments séparés par une virgule (« , ») Liste d'éléments séparés par une virgule (« , ») et ajouté alors dans l'ordre de la liste. Pages dynamiques du côté du navigateur - Page 48 TABLEAUX : CAS PARTICULIERS TABLEAU MULTIDIMENSIONNEL (CLASSE Array) tableau multidimensionnel sous la forme d'un tableau de tableaux accès à un élément : tableau [ rang1 ] [ rang2 ] ... exemples var matrice = new Array(1, 1); matrice[0] = new Array(5, 2); matrice[1] = new Array(7, 9); matrice[1][0] = matrice[0][1]; TABLEAU ASSOCIATIF (CLASSE Object) tableau de correspondance entre des noms et des valeurs objet spécial créé par { nom1:valeur1, nom2:valeur2 ... } 1 tableau associatif vide créé par {} valeur d'un élément : tableau['nom'] 2 ou tableau.nom ajout ou modification d'un élément : tableau['nom'] = valeur ; accès simplifié aux éléments sur leur seul nom : with ( objet ) { instruction(s); } 3 itération sur les noms des éléments (ou propriétés) d'un objet : for ( nom in objet ) { instruction(s); } exemples var point = {couleur: 'white', x: 0, y: 0}; point.x = 100; point['couleur'] = "red"; for (propriete in point) { propriete = null; } 1 Attention ! la valeur initiale est précédée du symbole « : » et non de « = » Le nom peut être noté entre soit des apostrophes (« ' »), soit des guillemets (« " ») 3 Attention ! usage déconseillé car confusions possibles avec d'autres objets homonymes 2 Pages dynamiques du côté du navigateur - Page 49 MANIPULATIONS DE CHAÎNE DES CARACTÈRES CLASSE String PRINCIPALES OPÉRATIONS concaténation ......................................... + comparaisons ......................................... > >= < <= ordre lexicographique (MAJUSCULES avant minuscules) == != conversion d'un objet en une chaîne ....... objet.toString() PRINCIPALES MÉTHODES taille de la chaîne .................................... length copie de la chaîne, en majuscules .......... toUpperCase() copie de la chaîne, en minuscules .......... toLowerCase() caractère en rang 1 ................................. charAt(rang) 2 code du caractère en rang ................... charCodeAt(rang) première position d'une sous-chaîne ...... indexOf(sous-chaîne) 3 renvoit le rang si sous-chaîne trouvée, -1 si absente dernière position d'une sous-chaîne ....... lastIndexOf(sous-chaîne) 3 renvoit le rang si sous-chaîne trouvée, -1 si absente extraction d'une sous-chaîne .................. substring(début, borne) 4 renvoit le texte à partir du rang début jusqu'avant le rang borne découpage selon un séparateur .............. split(séparateur) renvoit le tableau des sous-chaînes délimitées par séparateur FONCTIONS ASSOCIÉES extraction d'une valeur entière................. parseInt(chaîne, 10) renvoit le nombre entier situé en début de chaîne ou NaN si inexistant extraction d'une valeur réelle................... parseFloat(chaîne) renvoit le nombre réel situé en début de chaîne ou NaN si inexistant EXEMPLES msg = '<p>' + msg + '</p>'; lg = msg.length; ligne = ligne.toUpperCase(); if (ligne.indexOf('-') >= 0) { parties = ligne.split('-'); code2lettresg = parties[0].substring(0, 2); code2lettresd = parties[1].substring(0, 2); } numdepartement = parseInt( codepostal.substring(0, 2) , 10); 1 Rang compté à partir de zéro (et non pas de un) Renvoie la valeur entière dans le codage Unicode ; rang compté à partir de zéro (et non pas de un) 3 Second paramètre optionnel : rang de départ de la recherche (0 si omis) 4 Si le second paramètre est absent, renvoi de tout le reste de la chaîne 2 Pages dynamiques du côté du navigateur - Page 50 OBJETS CLASSE Object GÉNÉRALITÉS objet créé à partir d'une classe : new Classe(valeur-s) ou renvoyé par une fonction ou une méthode ou créé explicitement : {propriété1: valeur1, propriété2: valeur2, ...} 1 propriété accessible par la notation : objet.nom ou aussi une notation alternative : objet["nom"] ou objet['nom'] méthode activée par la notation : objet.méthode l'objet considéré (à l'intérieur d'une méthode) : this exemples var ladate = new Date(); minuterie = window.setTimeout("marchedefil()", 10); var resolution = {x: 800, y: 600} document.location = 'suite.htm'; document['location'] = 'suite.htm'; window.alert('largeur :' + resolution.x); this.couleur = white; MANIPULATIONS GÉNÉRALES testd'existence d'un objet : if (objet) { actions sur l'objet existant } suppression 2 d'un objet : delete objet; suppression d'une propriété d'un objet : delete objet.nom; accès aux propriétés d'un objet sur le seul nom de propriété : 3 with ( objet ) { instruction(s); } itération sur les noms des propriétés d'un objet : for ( variable in objet ) { instruction(s); } conversion d'un objet en une chaîne : objet.toString() exemple liste = '<ul>\n'; for (nom in window) { liste += '<li>' + nom + '=' + window[nom] + '</li>\n' ; } liste += '</ul>\n'; 1 Attention ! la valeur initiale est précédée du symbole « : » et non de « = » La suppression n'est pas à gérer systématiquement par le programmeur car il y existe un mécanisme automatique de nettoyage de la mémoire (ramasse-miettes, garbage collector) lors de l'exécution. 3 Attention ! usage déconseillé car confusions possibles avec d'autres objets homonymes 2 Pages dynamiques du côté du navigateur - Page 51 FONCTIONS CLASSE Function DÉFINITION D'UNE FONCTION forme générale (à placer avant tout appel de la fonction) : function nom-de-fonction(liste de paramètres){ déclaration des variables locales à la fonction 1 instructions 2 } liste de paramètres 3 : une ou plusieurs variables séparées par « , » variable globale : toute variable non déclarée dans la fonction fin explicite de la fonction : return; fin avec renvoi d'un résultat : return expression; 4 exemples : function heure() { // renvoie l'heure courante dans une chaine : ""hh H mm" // exemple d'appel : document.write( heure() ); var datecourante = new Date(); var resultat = datecourante.getHours() + " H " + datecourante.getMinutes(); return resultat; } // function function paragraphe(texte) { // affichage de texte en HTML dans la page, // sous la forme d'un paragraphe document.write( '<p>' + texte + '</p>\n'); } // function APPEL DE FONCTION nom de la fonction (paramètres d'appel) pas d'erreur d'exécution si nombre incorrect de paramètres à l'appel (ceux en trop sont ignorés, ceux manquants considérés indéfinis) déclaration de la fonction nécessairement placée avant tout appel exemples : paragraphe(ligne); texte = '<strong>' + heure() + '</strong>'; 1 Si une variable utilisée dans une fonction n'y est pas déclarée, il s'agit alors d'une variable globale A l'intérieur d'une fonction, il est possible de déclarer une ou plusieurs fonctions. 3 Une fonction ne peut délivrer une valeur que via le paramètre en résultat, autrement dit il n'existe pas de mécanisme d'appel par référence (modification d'un paramètre en entrée). 4 Veiller à ne pas laisser le mot-clef return seul sur sa ligne, car il sera alors exécuté sans renvoi de valeur (fin de ligne considérée comme une fin d'instruction !). 2 Pages dynamiques du côté du navigateur - Page 52 OBJETS POUR LA NAVIGATION NORMALISATION PAR LE W3C : DOM (document object model) HIÉRARCHIE PRINCIPALE DES OBJETS PRINCIPAUX OBJETS 1 window et frames[] la fenêtre du navigateur, ou un cadre document ou window.document le document contenu dans la fenêtre, ou un cadre screen ou window.screen l'écran du poste de consultation utilisé, principales propriétés : largeur width et hauteur height en pixels navigator ou window.navigator le navigateur utilisé sur le poste de consultation, propriété userAGent délivrant son identification complète history ou window.history l'historique de navigation, adresses inaccessibles par sécurité, méthodes pour aller en avant, forward(), ou en arrière, back() 1 Voir en http://www.w3.org/DOM/ et ci-après dans ce document Pages dynamiques du côté du navigateur - Page 53 OBJET POUR UNE FENÊTRE IL CORRESPOND À UNE FENÊTRE DE NAVIGATION OU À UN CADRE, ET IL EST IDENTIFIÉ PAR window (CLASSE Window) PROPRIÉTÉS l'adresse complète............................................................ location texte sur la barre d'état par défaut 1...................... defaultStatus texte sur la barre d'état ........................................................ status document contenu (page en HTML a priori) .................... document cadres .............................................................................. frames[] nombre de cadres................................................................ length nom (cas de cadre notamment)................................................ name fenêtre immédiatement englobante (cas de cadre) ............. parent fenêtre englobante maximale (cas de cadre) ............................ top historique de navigation .................................................... history navigateur utilisé ........................................................... navigator écran d'affichage ................................................................. screen MÉTHODES ouverture d'une boîte d'information ..................... alert(message) ouverture d'une boîte de confirmation ............. confirm(question) renvoie true si confirmation, false sinon ouverture d'une boîte de saisie...... prompt(message, texte initial) renvoie la chaîne de caractères saisie ou la valeur null si annulation fermeture de la fenêtre ...................................................... close() nouvelle fenêtre de navigation [voir ci-après] ......... open(adresse) déplacement relatif (en pixel).................. moveBy(deltaX, deltaY) déplacement absolu (en pixel)................................ moveTo(X, Y) redimensionnement relatif (en pixel)... resizeBy(deltaX, deltaY) redimensionnement absolu (en pixel)................. resizeTo(X, Y) défilement relatif (en pixel).................. scrollBy(deltaX, deltaY) défilement absolu (en pixel)................................ scrollTo(X, Y) exécution différée (en ms) ...... setTimeout("instruction", délai) renvoie l'identification d'une minuterie réutilisable avec clearTimeout() annulation d'une exécution différée .... clearTimeout(minuterie 2) 1 2 Visible quand le navigateur n'a pas à afficher un libellé ponctuellement (ex. : cas de survol d'un lien) Cette information doit avoir été conservée au préalable, car renvoyé par setTimeout() Pages dynamiques du côté du navigateur - Page 54 OUVERTURE D'UNE FENÊTRE MÉTHODE open() DE LA CLASSE Window (RÉ)OUVERTURE D'UNE FENÊTRE nouvelle fenêtre : fenêtre.open(url, nom, caractéristiques) le résultat est l'identification de la fenêtre créée réutilisation : fenêtre.open(url, nom) PARAMÈTRES (chaîne de caractères) url soit une adresse de document à afficher soit vide, si contenu créé dynamiquement ultérieurement nom identification destinée à sa réutilisation 1, ou vide si inutile caractéristiques chaîne de caractères contenant une liste de propriétés, séparées par une virgule et sans espace séparateur la valeur d'une propriété est soit implicite (vrai, yes), soit fixée explicitement (propriété=valeur) propriétés 2 height=taille ...................................... hauteur (en pixel) width=taille ......................................... largeur (en pixel) menubar ........................................ avec barre de menu toolbar ........................................... avec barre d'outils location ..................................... avec zone d'adresse status ................................................ avec zone d'état scrollbars ................ barres de défilement si besoin resizable ...................... redimensionnement possible EXEMPLES f = window.open("http://www.agroparistech.fr/", "", "menubar,toolbar,location,status"); f = window.open("glossaire.htm", "glossaire", ""); 1 2 Ce nom peut servir comme valeur de l'attribut target dans un lien (<a href="">) Il existe aussi la propriété opener indiquant la fenêtre parente, mais celle-ci est déconseillée car mal gérée par les navigateurs. Pages dynamiques du côté du navigateur - Page 55 OBJET POUR UN DOCUMENT document PROPRIÉTÉS VISUALISÉ DANS UNE FENÊTRE (CLASSE Document) 1 titre ....................................................................................... title (*) adresse........................................................... URL (*) ou location 2 ancres.................................................................................. anchor[] appliquettes ...................................................................... applets[] mouchard(s) ............................................................................ cookie formulaires............................................................................. forms[] images................................................................................. images[] liens ......................................................................................... links[] domaine de l'Internet du serveur ............................................. domain date de dernière modification ............................. lastModified (*) page ayant abouti au document via un lien ou vide ....... referrer (*) Les propriétés marquées (*) ne sont pas modifiables MÉTHODES ouverture pour (ré)écriture, au format HTML 3 ......................... open() ou dans un format spécifique 4 ........................ open('type MIME') 5 écriture d'un texte 6......................................................... write(texte) écriture avec retour à la ligne ..................................... writeln(texte) fermeture en fin de (ré)écriture.............................................. close() EXEMPLE fenetre = window.open("", "traces", "menubar,toolbar"); page = fenetre.document; page.open(); page.writeln('<html>'); ... page.close(); 1 Autres propriétés obsolètes : bgcolor fgcolor linkColor vlinkColor alinkColor Il peut y avoir une différence dans le cas d'une redirection de la page : URL désigne alors la nouvelle adresse, tandis que location correspond à l'adresse avant la redirection. 3 L'éventuel contenu pré-existant du document est automatiquement effacé à l'ouverture. 4 L'éventuel contenu pré-existant du document est automatiquement effacé à l'ouverture. 5 Par exemple, au format de texte brut : 'text/plain' 6 Ecriture possible seulement lors du premier affichage du document 2 Pages dynamiques du côté du navigateur - Page 56 OBJETS POUR UN FORMULAIRE D'HTML FORMULAIRE (CLASSE FORM) accès au formulaire : document.forms[nom 1 du formulaire] ou : document.forms[rang 2 du formulaire] propriétés : nom du formulaire (attribut id sinon name) .............................. name action et type d'encodage associés .................. action encoding méthode d'envoi associée ("get" ou "post") ..................... method tableau des zones et nombre de zones......... elements[] length méthodes : envoi des données et remise à zéro................ submit() reset() ELÉMENT D'UN FORMULAIRE accès à une zone : formulaire.elements[nom de la zone 3] ou : formulaire.elements[rang de la zone] classes : Checkbox, Hidden, Input, Option, Password, Radio, Reset, Select, Submit, Text, Textarea propriétés : nom de la donnée associée (attribut name) ......................... name (*) formulaire parent ................................................................. form (*) type de zone, valeur 4 de l'attribut type en HTML ............... type (*) valeur courante (sauf liste d'options) ........................................ value valeur initiale, sauf liste d'options ......................... defaultValue (*) désactivation de la zone ...................................................... disabled fixation de la valeur ............................................................. readonly état courant d'un choix, exclusif ou à cocher........................ checked état initial d'un choix, exclusif ou à cocher......... defaultChecked (*) table des options d'une zone de liste................................. options[] nombre d'options d'une zone de liste ..................................... length libellé d'une option ...................................................................... text état d'une option ................................................................. selected sélection initiale d'une option........................... defaultSelected (*) rang d'une option dans la liste ................................................. index indice de l'option (unique 5) sélectionnée ........... selectedIndex (*) Les propriétés marquées (*) ne sont pas modifiables 1 Ce nom correspond à l'identification via l'attribut id, ou sinon via l'attribut name Rang comptabilisé selon l'ordre d'apparition dans la page ; il commence au numéro zéro (et non un) 3 Ce nom correspond à l'identification via l'attribut id, ou sinon via l'attribut name sauf dans le cas d'un choix exclusif (radio) où chaque bouton doit avoir une identification unique via l'attribut id 4 Cas particuliers de liste à options unique ou multiple : select-one ou select-multiple 5 En cas de possibilité de sélection multiple dans la liste, les options sélectionnées se déterminent par examen de la propiété selected de chacune des options existantes 2 Pages dynamiques du côté du navigateur - Page 57 OBJETS POUR LIENS, ANCRES ET IMAGES LIENS (CLASSE Link) accès à un lien : document.links[nom 1 du lien] ou : document.links[rang 2 du lien] propriétés 3 : adresse complète, en destination du lien ................................. href nom de la fenêtre visée ....................................................... target alphabet et langue du document visé ............. charset hreflang type MIME du document visé .................................................. type nature de la relation avec le document visé ..................... rel rev raccourci et rang de sélection au clavier ..... accesskey tabindex ANCRES (CLASSE Anchor) accès à une ancre : document.anchors[nom 1 de l'ancre] ou : document.anchors[rang 2 de l'ancre] propriété : nom .......................................................................................... name IMAGES (CLASSE Image) accès à une image : document.images[nom 1 de l'image] ou : document.images[rang 2 de l'image] propriétés : fichier de l'image ........................................................................ src largeur et hauteur d'affichage (en pixel) ................. width height marges d'affichage (en pixel) ............................... hspace vspace image cliquable et carte associée............................. ismap usemap document d'information associé ...................................... longdesc indicateur de chargement par le navigateur .................... complete (à faux si pas de chargement démarré) 1 Ce nom correspond à l'identification via l'attribut id, ou sinon via l'attribut name Rang comptabilisé selon l'ordre d'apparition dans la page ; il commence au numéro zéro (et non un) 3 Anciennes propriétés non normalisées : protocol, hostname, port, host, hash 2 Pages dynamiques du côté du navigateur - Page 58 PRINCIPAUX ÉVÉNEMENTS CLASSE Event onfocus (<a>, <area>, <input>, <select>, <textarea>, <button>, <label>) au début de l'activation, par remplissage ou accès via le clavier onblur (<a>, <area>, <input>, <select>, <textarea>, <button>, juste après la désactivation, par passage à autre chose <label>) onchange (<input>, <select>, <textarea>) juste après la modification de la zone de formulaire onclick (<a>, <input>) après l'activation d'un bouton ou d'un lien onload (<body>, <frameset>) à la fin de l'affichage de la page entière ou du jeu de cadres onunload (<body>, <frameset>) avant le chargement d'une nouvelle page ou jeu de cadres onmouseover (<a>, <area>) au début du passage du curseur sur un lien ou une zone cliquable onmouseout (<a>, <area>) à la fin du passage du curseur sur un lien ou une zone cliquable onsubmit (<form>) après la validation de la saisie de données dans le formulaire onreset (<form>) après la remise à zéro du formulaire ATTENTION ! SI LE NOM D'ÉVÉNEMENT EST UTILISÉ DANS DU CODE EN JAVASCRIPT, IL DOIT ÊTRE INTÉGRALEMENT ÉCRIT EN LETTRES minuscules Pages dynamiques du côté du navigateur - Page 59 COMPLÉMENT SUR LES ÉVÉNEMENTS ELÉMENT HTML CONCERNÉ PAR UN ÉVÉNEMENT ACCÈS À L'OBJET DE L'ÉLÉMENT désigné par this dans le code associé à l'événement EXEMPLE cas d'une zone d'un formulaire en HTML : <input ... événement="code en Javascript"> extrait en HTML : <input type="text" size="20" name="znom" id="znom" onchange="zmajus(this);" /> avec le script : function zmajus(zone) { // passe en majuscule la valeur de // la zone identifiee par l'objet "zone", // exemple d'appel : zmajus(this); zone.value = zone.value.toUpperCase(); } // function MÉTHODE ASSOCIÉE À UN ÉVÉNEMENT CODE DE TRAITEMENT D'ÉVÉNEMENT : UNE MÉTHODE Méthode identifiée par le nom de l'événement (libellé sans « on »), avec en paramètre l'objet event 1 associé à l'événement EXEMPLE <input type="text" size="20" name="znom" id="znom" onchange="zmajus(this);" /> avec la méthode change correspondant à : function change(event) { zmajus(this); } 1 Objet mal géré par certains vieux navigateurs ; propriété principale type indiquant son nom, exemple : event.type valant 'change' Pages dynamiques du côté du navigateur - Page 60 DATE CLASSE Date OBJET POUR UNE DATE objet de la date courante : new Date() MÉTHODES jour du mois (de 1 à 31) ................................ jour de la semaine (de 0 à 6, samedi) .......... mois (de 0 à 11, décembre) .......................... année (à quatre chiffres) ............................... millisecondes (de 0 à 999) ............................ secondes (de 0 à 59) ..................................... minutes (de 0 à 59) ....................................... heures (de 0 à 23) ......................................... getDate() getDay() getMonth() getFullYear() getMilliseconds() getSeconds() getMinutes() getHours() EXEMPLE var datecourante= new Date(); document.write("Il est " + datecourante.getHours() + " heures " + datecourante.getMinutes() + " minutes " + datecourante.getSeconds() + " secondes, le " + datecourante.getDate() + " - " + (datecourante.getMonth() + 1) + " - " + datecourante.getFullYear() ); Il est 19 heures 20 minutes 40 secondes, le 15 - 5 - 2005 Pages dynamiques du côté du navigateur - Page 61 EXERCICE DE LA MONTRE AFFICHAGE DE L'HEURE DANS UNE FENÊTRE SUR COMMANDE ASSOCIATION DE L'OUVERTURE DE LA PETITE FENÊTRE AU CLIC SUR LE BOUTON Pages dynamiques du côté du navigateur - Page 62 EXERCICE DU LIEN ULTRA SENSIBLE LIEN SENSIBLE AU PASSAGE DE LA SOURIS AFFICHAGE D'UNE NOUVELLE PAGE DES LE PASSAGE DU POINTEUR DE LA SOURIS SUR LE LIBELLÉ DU LIEN Pages dynamiques du côté du navigateur - Page 63 EXERCICE DU RÉVEIL AFFICHAGE D'UNE FENÊTRE DE L'HEURE PENDANT QUELQUES INSTANTS, AU BOUT D'UN DÉLAI FIXÉ DANS UNE BOÎTE DE DIALOGUE ET AVEC UN DÉCLENCHEMENT À PARTIR D'UN BOUTON PUIS AU BOUT DU DÉLAI, AFFICHAGE PENDANT QUELQUES SECONDES DE : page en http://syrte.obspm.fr/cgi-bin/heure_op_js Pages dynamiques du côté du navigateur - Page 64 EXERCICE DU DÉFILEMENT CONTRÔLÉ REPRISE DE L'EXEMPLE DU DÉFILEMENT D'UN TEXTE, EN AJOUTANT LA POSSIBILITÉ DE LE CONTRÔLER VIA UN BOUTON DE MARCHE OU D'ARRÊT MODIFICATION DU TEXTE DU BOUTON PAR LE SCRIPT Pages dynamiques du côté du navigateur - Page 65 EXERCICE DES COULEURS FORMULAIRE POUR ESSAIS DE COULEURS DE TEXTE ET DE FOND DE PAGE AVEC CHOIX D'UN TEXTE AFFICHAGE DU TEXTE DANS UNE FENÊTRE SELON LES COULEURS SAISIES AVEC LA DÉTECTION DE LA SAISIE DE CODE DE COULEUR ERRONÉ INDICATIONS Simplifier le contrôle de validité du code de couleur (chaîne de 6 caractères). Pour obtenir l'application des couleurs, placer des styles au sein du code HTML de la page affichée dans la fenêtre. Pages dynamiques du côté du navigateur - Page 66 EXERCICE DE LA CARTE PERSONALISÉE FORMULAIRE POUR AFFICHER LA CARTE INTERACTIVE CORRESPONDANT À DES COOORDONNÉES GÉOGRAPHIQUES ET AVEC CHOIX DU ZOOM Indications Niveaux de zoom : 0 / monde, 4 / continent, 8 / région, 12 / département, 14 / quartier, 16 / rue Créer deux fonctions en Javascript : la première d'initialisation de la carte, la seconde de centrage sur un repère associé aux coordonnées Utiliser les fonctions de conversion de texte vers une valeur numérique pour récupérer les valeurs saisies : parseFloat(texte) qui renvoie une valeur réelle et parseInt(texte, 10) pour une valeur entière Pages dynamiques du côté du navigateur - Page 67 DOM Principales caractéristiques de cette norme Cas d'utilisation en Javascript Pages dynamiques du côté du navigateur - Page 68 DOM DOCUMENT OBJECT MODEL INTERFACE NORMALISÉE INTERACTIONS ENTRE PROGRAMME ET FENÊTRE DE NAVIGATION manipulations des éléments d'une page au format HTML ou XML, consultation, ajout, modification ou suppression NORMALISATION PAR ÉTAPES DEPUIS 1998 PAR LE W3C 1 présentation ici en javascript du niveau 1 de DOM pour HTML avec les caractéristiques généralement disponibles 2 PRINCIPALES CARACTÉRISTIQUES REPRÉSENTATION D'UN DOCUMENT 3 arborescence calquée sur la structure en HTML ou XML, principaux types de noeuds : élément HTML, texte 4, commentaire MANIPULATIONS parcours ou recherche des noeuds de l'arbre consultation ou modification des caractéristiques d'un noeud ajout ou suppression de noeuds 1 Pages du W3C sur DOM : http://www.w3.org/DOM/ Principaux navigateurs (quasi-)compatibles avec DOM HTML 1 : Firefox, Mozilla, Opera (7), Safari, Internet explorer (5 Windows et Mac) . Source : http://www.quirksmode.org/dom/w3c_html.html 3 Firefox comporte un outil spécifique, l'inspecteur DOM, sous la forme d'un module complémentaire à installer via la commande OUTILS MODULES COMPLÉMENTAIRES puis CATALOGUE 4 Il s'agit ici du texte associé à un élément HTML, par exemple le contenu d'un paragraphe. 2 Pages dynamiques du côté du navigateur - Page 69 DOM : VÉRIFICATION DE LA DISPONIBILITÉ COMMENT S'ASSURER QUE LE NAVIGATEUR EST COMPATIBLE ? INFORMATIONS DANS L'INTERFACE DOM PROPRIÉTÉ SPÉCIFIQUE DANS LA CLASSE Document propriété implementation fournie par l'interface DOM MÉTHODE D'INFORMATION SUR LE NIVEAU DE COMPATIBILITÉ méthode hasFeature(type, niveau) de implementation avec type : 'HMTL', 'XML', ... - niveau : '1.0', '2.0', ... et à résultat logique (vrai si compatibilité assurée) EXEMPLE function domhtmldispo(version) { // renvoit un indicateur logique de disponibilite // de l'interface DOM pour HTML, // dans la version indiquee ('1.0' ou '2.0') // exemple d'appel : domhtmldispo('1.0') var resultat = false; // action if (document.implementation && document.implementation.hasFeature) { resultat = document.implementation.hasFeature('HTML', version); } return resultat; } // function avec comme exemple d'utilisation : if ( domhtmldispo('1.0') ) { // DOM HTML 1 disponible ... } else { window.alert ('Interface DOM non disponible !'); } Pages dynamiques du côté du navigateur - Page 70 DOM : REPRÉSENTATION D'UN DOCUMENT INFORMATIONS RACINE DE L'ARBORESCENCE (EN HTML, ÉLÉMENT 'HTML') propriété documentElement de la classe Document doctype : représentation du type de document 1 PRINCIPALES PROPRIÉTÉS 2 ET MÉTHODES D'UN NOEUD nodeType : nature du noeud, codé par un numéro, 1 (élément HTML), 3 (texte), 8 (commentaire), 9 (document) etc. nodeName : nom 3 de l'élément HTML en MAJUSCULES, ou sinon '#text' (texte) ou '#comment' (commentaire) nodeValue : contenu du texte ou du commentaire, indéfini sinon getAttribute(nom) : pour un élément HTML, renvoit la valeur de l'attribut identifié par nom 4 (ou une chaîne vide si indéfini) childNodes : tableau des noeuds des fils (vide si feuille de l'arbre) parentNode : noeud du père (le document pour la racine) firstChild : noeud du premier fils (null si inexistant) lastChild : noeud du dernier fils (null si inexistant) nextSibling : noeud du frère suivant (null si inexistant) previousSibling : noeud du frère précédent (null si inexistant) EXEMPLE lesfils = document.documentElement.childNodes; RECHERCHE D'ÉLÉMENT HTML MÉTHODES DANS LA CLASSE Document getElementById(identification): renvoit le noeud de l'élément identifié par identification via l'attribut id, ou null si inexistant getElementsByTagName(nom): renvoit le tableau des noeuds de tous les éléments de la balise nom (tableau vide si aucun) méthode aussi disponible pour un noeud : recherche dans la sousarborescence dans le noeud considéré est la racine EXEMPLE noeudpanneau = document.getElementById('panneau'); lesparties = noeudpanneau.getElementsByTagName('H2'); 1 La principale propriété de doctype est son intitulé name (exemple de valeur : 'html'). Attention à des propriétés non normalisées comme innerHTML (texte complet de la balise) 3 Pour un élément HTML, le nom de la balise est aussi délivré par la propriété tagName 4 Le nom d'attribut se note en minuscules, exemple : 'class' ; utiliser avec précaution cette méthode qui reste inutilisable notamment pour l'attribut 'style' dans certains navigateurs. La norme définit aussi pour chaque élément HTML les propriétés id, title, dir, lang et className (classe de style). 2 Pages dynamiques du côté du navigateur - Page 71 DOM : EXEMPLE DE PARCOURS ANALYSE DE LA STRUCTURE D'UNE PAGE PAGE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Analyse selon DOM</title> </head> <body> <h1>Analyse selon DOM</h1><hr /> <form action=""> <input type="button" value="Analyse" onclick="analyser()" /> </form> <noscript> <strong>Désolé, impossible d'utiliser Javascript !</strong> </noscript> <hr /> <address>Michel Cartereau - 24 XI 2007</address> <script type="text/javascript" src="analysedom.js"></script> </body> </html> RÉSULTATS Pages dynamiques du côté du navigateur - Page 72 DOM : EXEMPLE DE PARCOURS (SUITE) /* analysedom.js - Michel Cartereau - 4 XII 2007 */ var codetype = // codage des principaux types de noeud (DOM) {unelement: 1, untexte: 3, uncommentaire: 8 } function domhtmldispo(version) { // renvoit un indicateur logique de disponibilite // de l'interface DOM pour HTML, // dans la version indiquee ('1.0' ou '2.0') var resultat = false; // action if (document.implementation && document.implementation.hasFeature) { resultat = document.implementation.hasFeature('HTML', version); } return resultat; } // function function analyser() { // analyse du document utilisant ce script // avec affichages dans une fenetre creee ad hoc var fenetreanalyse; // fenetre pour les affichages de l'analyse var pageanalyse; // document des affichages de l'analyse var texte; // action // abandon si DOM indisponible if (! domhtmldispo('1.0') ) { window.alert('Interface DOM non disponible !'); return; } // ouverture d'une fenetre fenetreanalyse = window.open('', 'analyse'); pageanalyse = fenetreanalyse.document; // demarrage de l'ecriture dans la fenetre pageanalyse.open(); // debut du code HTML de la page texte = '<!DOCTYPE html PUBLIC ' + ' "-//W3C//DTD XHTML 1.0 Transitional//EN" ' + ' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' + '<html xmlns="http://www.w3.org/1999/xhtml" ' + ' xml:lang="fr" lang="fr">\n' + '<head>\n' + '<meta http-equiv="Content-Type" ' + ' content="text/html; charset=UTF-8" />\n' + '<title>Analyse</title></head>\n' + '<body><h1>Analyse</h1>\n<pre>'; pageanalyse.writeln(texte); // lancement de l'analyse analysernoeud(pageanalyse, document.documentElement, 1) // fin du code HTML de la page pageanalyse.writeln('</pre><p><strong>Fin</strong></p></body>\n'); // fin de l'ecriture dans la fenetre pageanalyse.close(); } // function Pages dynamiques du côté du navigateur - Page 73 DOM : EXEMPLE DE PARCOURS (SUITE) function analysernoeud(page, noeud, niveau) { // analyse pour "noeud", selon la profondeur "niveau" // avec affichages dans "page" var message, rang, fils, texte; // action message = ''; // decalage selon le niveau de profondeur for (rang = 0; rang <= niveau; ++rang) { message += ' '; } message += '- '; switch (noeud.nodeType) { case codetype.unelement: // element HTML message += 'Element : ' + noeud.nodeName; // analyse des fils fils = noeud.childNodes; message += ', '; if (fils.length > 0 ) { message += fils.length + ' fils'; } page.writeln(message); for (rang = 0; rang < fils.length; ++rang) { analysernoeud(page, fils[rang], niveau + 1); } break; case codetype.untexte: // texte message += 'Texte de longueur ' + noeud.nodeValue.length; page.writeln(message); break; case codetype.uncommentaire: // commentaire message += 'Commentaire'; page.writeln(message); break; default: // autre message += 'Type inattendu : ' + noeud.nodeType; page.writeln(message); break; } // switch } // function Pages dynamiques du côté du navigateur - Page 74 DOM : MODIFICATION D'UN DOCUMENT MANIPULATION DE L'ARBORESCENCE CRÉATION DE NOEUDS DANS LA CLASSE Document createElement(nom): renvoit le noeud de l'élément créé pour l'élément HTML de la balise nom 1 createTextNode(texte): renvoit le noeud de l'élément créé pour un texte, avec comme valeur texte createComment(texte): renvoit le noeud de l'élément créé pour un commentaire, avec comme valeur texte MODIFICATION DES DONNÉES D'UN NOEUD nodeValue ou data : contenu, modifiable, d'un noeud de texte setAttribute(nom, valeur) : pour un élément HTML, définit la valeur de son attribut identifié par nom 2 PRINCIPALES MÉTHODES D'UN NOEUD, POUR MISE À JOUR DE SES FILS appendChild(noeudfils): insertion du noeud noeudfils comme dernier fils (si noeudfils déjà un des fils, déplacé en dernier) insertBefore(noeudfils, frere): insertion du noeud noeudfils avant le fils frere (si noeudfils déjà un des fils, déplacement) replaceChild(noeudnouveau, noeudancien): remplacement du fils noeudancien par noeudnouveau (si déjà fils, déplacement) removeChild(noeudfils): suppression du noeud noeudfils des fils EXEMPLES nouveaunoeud = document.createElement('P') ; noeudtexte = document.createTextNode('Bonjour'); nouveaunoeud.appendChild(noeudtexte); noeuddivision.appendChild(nouveaunoeud); 1 Pour le cas d'HTML, le nom de la balise peut être noté aussi bien en minuscules qu'en majuscules ; il est cependant conseillé de le noter en lettres miniscules pour compatibilité future avec XML. 2 A utiliser avec précaution, inutilisable notamment pour l'attribut 'style' dans plusieurs navigateurs. Pages dynamiques du côté du navigateur - Page 75 DOM : EXEMPLE DE MODIFICATION AJOUTS DE PARAGRAPHES DANS UNE PAGE PAGE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Modification via DOM</title> </head> <body> <h1>Modification via DOM</h1> <form action="" name="finterface" > <input type="button" value="Nouveau paragraphe" onclick="domajoutp(document, 'ajouts')" /> </form> <noscript> <strong>Désolé, impossible d'utiliser Javascript !</strong> </noscript> <hr /> <div id="ajouts"> </div> <hr /> <address>Michel Cartereau - 24 XI 2007</address> <script type="text/javascript" src="modifdom.js"></script> </body> </html> RÉSULTATS Pages dynamiques du côté du navigateur - Page 76 DOM : EXEMPLE DE MODIFICATION (SUITE) /* modifdom.js - Michel Cartereau - 4 XII 2007 */ function domhtmldispo(version) { // renvoit un indicateur logique de disponibilite // de l'interface DOM pour HTML, // dans la version indiquee ('1.0' ou '2.0') // exemple d'appel : domhtmldispo('1.0') var resultat = false; // action if (document.implementation && document.implementation.hasFeature) { resultat = document.implementation.hasFeature('HTML', version); } return resultat; } // function function domajoutp(page, nomid) { // insertion d'un paragraphe dans la page XHTML "page" via DOM, // dans l'element HTML identifie par "nomid" // avec saisie interactive du texte du paragraphe // ou affichage d'un message en cas d'anomalie var zone, noeudelement, noeudtexte, textep; // action // abandon si DOM indisponible if (! domhtmldispo('1.0') ) { window.alert('Interface DOM non disponible !'); return; } // recherche de l'element de la zone zone = page.getElementById(nomid); if (zone) { // trouve textep = window.prompt('Texte du paragraphe ?', ''); if (textep) { // ajout si texte effectif et non vide noeudelement = page.createElement('p'); noeudtexte = page.createTextNode(textep); noeudelement.appendChild(noeudtexte); zone.appendChild(noeudelement); } } else { window.alert('Anomalie ! identification "' + nomid + '" introuvable dans la page'); } } // function Pages dynamiques du côté du navigateur - Page 77 DOM : TABLES ET COLLECTIONS TABLE Propriétés : 1 largeur .................................................................................... width légende (noeud) ................................................................ caption résumé ............................................................................... summary bordure et encadrement ............................. border frame rules marges ............................................. cellpadding cellspacing rangées (collection, non modifiable) ......................................... rows sections d'entête et de pied (noeuds) ........................ tHead tFoot sections horizontales (collection, non modifiable) ............. tBodies Méthodes : légende ........................... createCaption() deleteCaption() sections d'entête ..................... createTHead() deleteTHead() sections de pied ...................... createTFoot() deleteTFoot() rangées ........................... insertRow(rang) deleteRow(rang) SECTIONS Cas des sections d'entête, de pied ou horizontales Propriétés : alignements ............................................................. align valign symbole et position d'alignement interne ......................... ch chOff rangées (collection, non modifiable) ......................................... rows Méthodes : rangées ........................... insertRow(rang) deleteRow(rang) COLLECTION Propriétés : taille ..................................................................................... length Méthodes : élément selon son rang (à partir de 0) ..... [rang] ou item(rang) élément selon son nom .................... [nom] ou namedItem(nom) (identification via id sinon name) 1 Autres propriétés obsolètes : align bgcolor Pages dynamiques du côté du navigateur - Page 78 NORMALISATION DE DOM NORMALISATION DE DOM PAR LE W3C 1 MAIS IMPLÉMENTATIONS INCOMPLÈTES DANS LES NAVIGATEURS 2 EVOLUTION DE DOM NIVEAUX DE 0 À 3 DOM 0 (1996) : objets pour un document en javascript (Netscape 2) DOM 1 (1998) : 1ère normalisation sous la forme d'un arbre DOM 2 (2000) : 2ème normalisation plus complète DOM 3 (2004) : compléments (load and save, validation) DOM 2 Norme découpée par parties thématiques : noyau (core) HTML 4 (HTML) ou XML 1.0 (XML) styles (CSS et CSS2) événements (events) parcours (traversal) sélection (range) COMPATIBILITÉ DE NAVIGATEURS AVEC LE NIVEAU 2 DE DOM DOM 2 implémenté par la plupart des navigateurs récents : Firefox 2, 3 et 3.5, Opera 9 et 10, Safari 3 et 4, Chrome 1, 2 et 3, Internet explorer 6, 7 et 8 Cas particulier de Internet explorer : implémentations partielles et extensions spécifiques développées par Microsoft Vérification programmable en javascript : document.implementation.hasFeature(partie, '2.0') UTILISER DOM AVEC BEAUCOUP DE PRUDENCE ! 1 2 Site de référence du W3C : http://www.w3.org/DOM/DOMTR Voir le site dédié au respect des normes par les navigateurs : http://www.quirksmode.org/ ; et aussi le site des tests Acid de conformité : http://www.webstandards.org/ Pages dynamiques du côté du navigateur - Page 79 DOM : GESTIONNAIRE D'ÉVÉNEMENT MÉCANISME ET MODALITÉS DE GESTION VARIABLES SELON LES NIVEAUX DE DOM ET LES NAVIGATEURS MÉCANISME DE PROPAGATION PROPAGATION GÉNÉRIQUE D'UN ÉVÉNEMENT DANS L'ARBRE DU DOCUMENT 1) phase de descente (capture) : de la racine vers l'élément concerné 2) atteinte de la cible (target) : application à l'élément concerné 3) phase de remontée (bubbling) : de l'élément vers la racine 1 GESTIONNAIRE(S) D'ÉVÉNEMENT (LISTENER) possibilités de définir un gestionnaire à chaque étape et chaque phase, en complément ou à la place du gestionnaire par défaut du navigateur CAS DU NIVEAU 0 DE DOM GESTIONNAIRE ASSOCIÉ UNIQUEMENT À LA PHASE DE REMONTÉE par convention, propagation contrôlée par une valeur logique renvoyée par le code du gestionnaire (arrêt de la propagation si valeur fausse) EXEMPLE <form id="f" onsubmit="return valider(this)" action=""> Nom : <input type="texte" name="znom" id="znom" /> <input type="submit" value="Envoi" /> </form> avec function valider(formulaire) { // contrôle de la validation du formulaire // renvoi d'un indicateur logique de bonne validation if ('' == formulaire.elements['znom'].value) { window.alert("Il manque le nom !"); return false; // annulation de l'envoi de données } return true; // envoi de données lors de la propagation } 1 Cette phase de remontée ne concerne pas tous les événements (cas de load). Pages dynamiques du côté du navigateur - Page 80 DOM : GESTIONNAIRE D'ÉVÉNEMENT (SUITE) EVÉNEMENTS NON PRIS EN COMPTE PAR LE NIVEAU 1 DE DOM CAS DU NIVEAU 2 DE DOM CLASSE DÉFINIE POUR UN ÉVÉNEMENT : Event propriétés sur sa nature : type (nom 1), target (élément de la cible) et sur la propagation : bubbles (en remontée) et cancelable (annulable) méthodes associées : preventDefault() : annulation de la prise en charge par le navigateur stopPropagation() : arrêt de la propagation MÉTHODES ASSOCIÉES À UN NOEUD D'ÉLÉMENT affectation ou retrait d'un gestionnaire : addEventListener (événement, gestionnaire, phase) removeEventListener (événement, gestionnaire, phase) avec : événement (nom), gestionnaire (fonction), phase (remontée si vrai) la fonction du gestionnaire comporte un paramètre : l'événement possibilités d'affecter plusieurs gestionnaires de même type à un noeud EXEMPLE <body onload="initialisation()"> <form id="f" action=""> Nom : <input type="texte" name="znom" id="znom" /> <input type="submit" value="Envoi" /> </form> </body> avec function initialisation() { // definition de gestionnaire de validation du formulaire 'f' document.getElementById('f') .addEventListener('submit', valider, true); } function valider(evenement) { // controle de la validation du formulaire // annulation de l'envoi si donnee manquante if ('' == document.getElementById('znom').value) { window.alert("Il manque le nom !"); evenement.preventDefault(); // annulation de l'envoi } } 1 Dans DOM 2, le nom d'événement ne comporte pas le préfixe on ; exemple : click et non pas onclick Pages dynamiques du côté du navigateur - Page 81 DOM : GESTIONNAIRE D'ÉVÉNEMENT (FIN) CAS PARTICULIER DE INTERNET EXPLORER INCOMPATIBILITÉ AVEC LE NIVEAU 2 DE DOM OBJET DÉFINI POUR UN ÉVÉNEMENT : window.event prise en charge seulement de la phase de remontée (et pas la capture) propriétés sur sa nature : type (nom 1), srcElement (élément de la cible) et sur la propagation : returnValue : prise en charge par le navigateur (annulée si faux) cancelBubble : arrêt de la propagation (annulée si vrai) MÉTHODES ASSOCIÉES À UN NOEUD D'ÉLÉMENT affectation ou retrait d'un gestionnaire : attachEvent (événement, gestionnaire) detachEvent (événement, gestionnaire) avec : événement (nom), gestionnaire (fonction) la fonction du gestionnaire comporte un paramètre : l'événement possibilités d'affecter plusieurs gestionnaires de même type à un noeud EXEMPLE DE DOM 2 ADAPTÉ POUR INTERNET EXPLORER function initialisation() { // definition de gestionnaire de validation du formulaire 'f' var formulaire = document.getElementById('f'); if (formulaire.addEventListener) { formulaire.addEventListener("submit", valider, true); } else if (formulaire.attachEvent) { formulaire.attachEvent("onsubmit", valider); } } function valider(evenement) { // controle de la validation du formulaire // annulation de l'envoi si donnee manquante if ('' == document.getElementById('znom').value) { window.alert("Il manque le nom !"); // annulation de l'envoi if (evenement.preventDefault) { evenement.preventDefault(); } else { event.returnValue = false; } } } 1 Dans IE, le nom d'événement comporte le préfixe on ; exemple : onclick et non pas click Pages dynamiques du côté du navigateur - Page 82 EXERCICE DU MARQUAGE MARQUAGE D'ÉLÉMENTS D'UNE PAGE CHOISIS, VIA UN FORMULAIRE INDICATIONS Définir une classe de style correspondant au marquage. Prévoir le cas où l'élément HTML possède déjà une classe de style. Pages dynamiques du côté du navigateur - Page 83 SOLUTIONS DU TEST DE CONNAISSANCES 1. Vrai [voir page 7]. 2. Vrai [voir page 12] 3. Vrai [voir page 14] 4. Faux, c'est un langage indépendant du Web en fait [voir page 6] 5. Vrai [voir page 17] 6. Faux [voir page 22] 7. Faux, les objets et classes y existent [voir page 51] 8. Vrai, c'est unload [voir page 59] 9. Vrai [voir page 55] 10. Vrai [voir page 44] 11. Faux [voir page 49] 12. Faux [voir page 59] 13. Vrai [voir page 49] 14. Vrai [voir page 56] 15. Faux [voir page 57] 16. Vrai [voir page 60] 17. Vrai [voir page 71] 18. Vrai [voir page 75] Pages dynamiques du côté du navigateur - Page 84 INDEX --, 46 ancre, 58 compteur, 10 !, 45 appendChild, 75 concaténation, 45 !=, 45 applet, 14 confirm, 54 !==, 45 applets, 56 CONTENT_LENGTH, 11, 12 %, 7 applette, 14 CONTENT_TYPE, 11, 12 &, 7 Content-Script-Type, 22 &&, 45 application/x-www-formurlencoded, 7 &, 7 appliquette, 14 cookie, 56 */, 43 Array, 48 createCaption, 78 .js, 19 bgcolor, 56, 78 createComment, 75 /*, 43 boolean, 45 createElement, 75 //, 43 border, 78 createTextNode, 75 ;, 43 break, 46, 47 createTFoot, 78 ?, 7, 11, 45 caption, 78 createTHead, 78 \, 43 carte interactive, 39 data, 75 \\, 43 case, 46 date, 61 \xHH, 43 cellpadding, 78 Date, 61 ]]>, 22 cellspacing, 78 déclaration, 44 {}, 49 CGI, 11 default, 46 ||, 45 ch, 78 defaultChecked, 57 +, 7, 50 chaîne, 43 defaultSelected, 57 ++, 46 charAt, 50 defaultStatus, 54 <![CDATA[, 22 charCodeAt, 50 defaultValue, 57 <applet>, 15 charset, 58 delete, 48, 51 <noscript>, 26, 29, 42 Checkbox, 57 deleteCaption, 78 <object>, 15 checked, 57 deleteRow, 78 <script>, 22, 42 childNodes, 71 deleteTFoot, 78 =, 7 chOff, 78 deleteTHead, 78 ==, 45 classid, 15 DHTML, 4 ===, 45 className, 71 dir, 71 accesskey, 58 clearTimeout, 54 do, 47 action, 7, 57 close, 54, 56 doctype, 71 alert, 54 code, 15 document, 53, 54, 56 align, 78 codetype, 15 Document object model, 69 alinkColor, 56 collection, 78 documentElement, 71 anchor, 56 commentaire, 43 DOM, 53, 69 anchors, 58 complete, 58 domain, 56 continue, 47 Pages dynamiques du côté du navigateur - Page 85 ECMA-262, 18 HTTP_ACCEPT, 12 method, 7, 57 ECMAScript, 18 HTTP_USER_AGENT, 12 méthode, 51 égalité, 45 id, 71 minuterie, 54 elements, 57 identité, 45 moveBy, 54 else, 46 if, 46 moveTo, 54 enctype, 7 Image, 58 name, 54, 57, 58 événement, 42, 59, 60 images, 56, 58 namedItem, 78 event, 60 implementation, 70 NaN, 43 false, 43 index, 57 navigateur, 42 fichier de script, 42 indexOf, 50 navigator, 53, 54 Firefox, 69 Infinity, 43 new, 51 firstChild, 71 innerHTML, 71 nextSibling, 71 fonction, 52 Input, 57 nodeName, 71 for, 47 insertBefore, 75 nodeType, 71 for in, 49, 51 insertRow, 78 nodeValue, 71, 75 form, 57 inspecteur DOM, 69 nom, 44 forms, 56, 57 isNaN, 43 null, 43, 45 formulaire, 7, 57 ISO-8859-1, 43 object, 45 frame, 78 item, 78 objet, 51 frames, 54 itérations, 47 onblur, 59 function, 52 Java, 14 onchange, 59 GATEWAY_INTERFACE, 12 Javascript, 18, 42 onclick, 59 get, 11 javascript:, 23, 42 onfocus, 59 getAttribute, 71 join, 48 onload, 59 getElementById, 71 js, 42 onmouseout, 59 getElementsByTagName, 71 JScript, 18 onmouseover, 59 hasFeature, 70 lang, 71 onreset, 59 hash, 58 lastChild, 71 onsubmit, 59 height, 53, 55 lastIndexOf, 50 onunload, 59 heigth, 58 lastModified, 56 open, 54, 56 hexadécimal, 43 length, 50, 54, 57, 78 open(), 55 Hidden, 57 lien, 58 opener, 55 history, 53, 54 linkColor, 56 OpenLayers, 39 host, 58 links, 56, 58 Option, 57 hostname, 58 location, 54, 55, 56 options, 57 href, 58 logique, 43 page dynamique, 4 hreflang, 58 Mapstraction, 39 param, 15 hspace, 58 menubar, 55 paramètre, 52 HTML, 7 meta, 22 parent, 54 Pages dynamiques du côté du navigateur - Page 86 parentNode, 71 SCRIPT_NAME, 12 text, 57 parseFloat, 50 scrollbars, 55 Text, 57 parseInt, 50 scrollBy, 54 Textarea, 57 Password, 57 scrollTo, 54 tFoot, 78 Perl, 6, 8 Select, 57 tHead, 78 pop, 48 selected, 57 this, 25, 51, 60 port, 58 selectedIndex, 57 title, 56, 71 post, 11 select-multiple, 57 toLowerCase, 50 previousSibling, 71 select-one, 57 toolbar, 55 prompt, 54 SERVER_NAME, 12 top, 54 propriété, 51 SERVER_PORT, 12 toString(), 50, 51 protocol, 58 SERVER_PROTOCOL, 12 toUpperCase, 50 push, 48 SERVER_SOFTWARE, 12 true, 43 QUERY_STRING, 11, 12 setAttribute, 75 type, 45, 57, 58 Radio, 57 setTimeout, 54 typeof, 45 referrer, 56 shift, 48 undefined, 45 rel, 58 slice, 48 unshift, 48 REMOTE_ADDR, 12 sort, 48 URL, 56 REMOTE_HOST, 12 split, 50 userAGent, 53 removeChild, 75 src, 22, 58 valign, 78 replaceChild, 75 status, 54, 55 value, 57 REQUEST_METHOD, 12 submit, 57 var, 44 reset, 57 Submit, 57 variable, 44 Reset, 57 substring, 50 variable globale, 44, 52 resizable, 55 summary, 78 variable locale, 44 resizeBy, 54 switch, 46 VBscript, 18 resizeTo, 54 tabindex, 58 vlinkColor, 56 retour-à-la-ligne, 43 table, 78 vspace, 58 return, 52 tableau associatif, 49 while, 47 rev, 58 width, 53, 55, 58, 78 reverse, 48 tableau multidimensionnel, 49 rows, 78 tabulation, 43 with, 49, 51 rules, 78 tagName, 71 write, 56 screen, 36, 53, 54 target, 58 writeln, 56 script, 6 tBodies, 78 script, langage, 22 tests, 46 window, 36, 53, 54 Pages dynamiques du côté du navigateur - Page 87 Sommaire Savez-vous ? .........................................2 Introduction ............................................3 Pages dynamiques............................................4 CGI ........................................................5 Cas n°1 : enregistrement sur le serveur ...........6 Paramètrage du formulaire ...............................7 Script en Perl.....................................................8 Exercice du formulaire de recherche ................9 Exercice du compteur .....................................10 Compléments sur CGI : mécanismes .............11 Compléments sur CGI : informations..............12 Appliquettes en Java............................13 Cas n°2 : effet d'animation particulier .............14 Exemple d'appliquette en Java .......................15 Appliquette « RainbowText » ..........................16 Javascript.............................................17 Cas n°3 : validation lors de la saisie ...............18 Exemple n°1 en Javascript : majuscule ..........19 Page de la mise en majuscule ........................20 Script de la mise en majuscule .......................21 Notation d'un (java)script en XHTML ..............22 Javascript avec Firefox ...................................23 Javascript avec Internet explorer ....................24 Autre version de la mise en majuscule ...........25 Exemple n°2 en Javascript : heure courante ..26 Page de l'heure courante ................................27 Script de l'heure courante ...............................28 Exemple n°3 en Javascript : liste de liens ......29 Page de la liste de liens ..................................30 Script de la liste de liens .................................31 Exemple n°4 en Javascript : défilement..........32 Page avec le défilement..................................33 Script du défilement ........................................34 Script du défilement (suite) .............................35 Exemple n°5 en Javascript : fenêtre d'info......36 Page des informations sur l'écran...................37 Script des informations sur l'écran..................38 Exemple n°6 en Javascript : carte interactive.39 Page de la carte interactive ............................40 Script de la carte interactive............................41 Aperçu sur Javascript .....................................42 Caractéristiques générales .............................43 Caractéristiques des variables ....................... 44 Principales expressions.................................. 45 Principales instructions................................... 46 Principales instructions (suite)........................ 47 Tableaux : généralités .................................... 48 Tableaux : cas particuliers.............................. 49 Manipulations de chaîne des caractères........ 50 Objets.............................................................. 51 Fonctions ........................................................ 52 Objets pour la navigation ................................ 53 Objet pour une fenêtre.................................... 54 Ouverture d'une fenêtre.................................. 55 Objet pour un document ................................. 56 Objets pour un formulaire d'HTML ................. 57 Objets pour liens, ancres et images ............... 58 Principaux événements .................................. 59 Complément sur les événements ................... 60 Date ................................................................ 61 Exercice de la montre ..................................... 62 Exercice du lien ultra sensible ........................ 63 Exercice du réveil ........................................... 64 Exercice du défilement contrôlé ..................... 65 Exercice des couleurs .................................... 66 Exercice de la carte personalisée................... 67 DOM .................................................... 68 DOM................................................................ 69 DOM : vérification de la disponibilité .............. 70 DOM : représentation d'un document............. 71 DOM : exemple de parcours........................... 72 DOM : exemple de parcours (suite)................ 73 DOM : exemple de parcours (suite)................ 74 DOM : modification d'un document ................ 75 DOM : exemple de modification ..................... 76 DOM : exemple de modification (suite) .......... 77 DOM : tables et collections............................. 78 Normalisation de DOM ................................... 79 DOM : gestionnaire d'événement ................... 80 DOM : gestionnaire d'événement (suite) ........ 81 DOM : gestionnaire d'événement (fin)............ 82 Exercice du marquage.................................... 83 Solutions du test de connaissances .... 84 Index.................................................... 85 Pages dynamiques du côté du navigateur - Page 88