xhtml - AgroParisTech

Transcription

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
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.)
CGI
Principe d'appel d'un programme sur un serveur
Mécanismes
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/
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 « & »
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/
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)
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
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
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
APPLIQUETTES EN JAVA
Utilisation d'une appliquette
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 ».
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>
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
JAVASCRIPT
Cas de script introduit dans une page
Mise en œuvre avec quelques outils
Exemples de script
Principales caractéristiques du langage Javascript
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
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.
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=""
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
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">

</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
<![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)
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.
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
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.
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)
// la zone identifiee par l'objet "zone",
// exemple d'appel : zmajus(this);
{
} // function
TEXTE DE LA PAGE EN XHTML (EXTRAIT)
<form
action="http://www.agroparistech.fr/cgi-bin/winfo/mouchard.pl">
<p><label>Nom
<input type="text" size="20" maxlength="20" name="znom"
id="znom" onchange="zmajus(this);" /></label>
</form>
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 :
PAGE DE L'HEURE COURANTE
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<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>
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 ;
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 :
PAGE DE LA LISTE DE LIENS
<head>
<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>
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;
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 :
2 Variables dont la valeur est conservée en permanence pendant l'exécution des scripts de la page
2
PAGE AVEC LE DÉFILEMENT
<head>
<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
</noscript>
<hr />
<script type="text/javascript" src="defil.js"></script>
</body>
fichier des scripts
</html>
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
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)
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
PAGE DES INFORMATIONS SUR L'ÉCRAN
<head>
<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 />
<script type="text/javascript" src="ecran.js"></script>
</body>
</html>
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);
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
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" />
<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">
</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;
}
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/
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
<![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
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()
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.
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
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.
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.
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.
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
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
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
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
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
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()
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.
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
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
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
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
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) {
// la zone identifiee par l'objet "zone",
// exemple d'appel : zmajus(this);
} // 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'
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
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
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
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
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
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.
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
DOM
Principales caractéristiques de cette norme
Cas d'utilisation en Javascript
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
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 !');
}
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
DOM : EXEMPLE DE PARCOURS
ANALYSE DE LA STRUCTURE D'UNE PAGE

PAGE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Analyse selon DOM</title>
</head>
<body>
<h1>Analyse selon DOM</h1><hr />
<form action="">
<input type="button" value="Analyse" onclick="analyser()" />
</form>
<noscript>
</noscript>
<hr />
<script type="text/javascript" src="analysedom.js"></script>
</body>
</html>

RÉSULTATS
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 }
// action
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
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;
break;
case codetype.uncommentaire: // commentaire
message += 'Commentaire';
break;
default: // autre
message += 'Type inattendu : ' + noeud.nodeType;
break;
} // switch
} // function
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.
DOM : EXEMPLE DE MODIFICATION
AJOUTS DE PARAGRAPHES DANS UNE PAGE

PAGE
<head>
<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>
</noscript>
<hr />
<div id="ajouts">
</div>
<hr />
<script type="text/javascript" src="modifdom.js"></script>
</body>
</html>

RÉSULTATS
DOM : EXEMPLE DE MODIFICATION (SUITE)
/*
modifdom.js - Michel Cartereau - 4 XII 2007
*/
// exemple d'appel : domhtmldispo('1.0')
// action
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
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
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/
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).
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) {
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
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) {
// 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
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.
SOLUTIONS DU TEST DE CONNAISSANCES
1. Vrai [voir page 7].
2. Vrai [voir page 12]
4. Faux, c'est un langage indépendant du Web en fait [voir page 6]
6. Faux [voir page 22]
7. Faux, les objets et classes y existent [voir page 51]
8. Vrai, c'est unload [voir page 59]
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
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
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
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

xhtml - AgroParisTech

Transcription

Documents pareils

Paramètres (arguments)

Tutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16

Identification Banque en Ligne Crédit Agricole

JAVASCRIPT : LE MODELE OBJET DU

TD TD –– Javascript

Erreurs JavaScript (bogues) :

Configuration requise pour la consultation du site

Envoyer un mail à partir de Flash

Théorie : internet, comment ça marche