Support du cours : Programmation Web 2

Faycel CHAOUA (faycelchaoua@gmail.com)
ISET KELIBIA | ROUTE OUED ELKHATF, CAMPUS UNIVERSITAIRE DE KELIBIA
Support du cours
PROGRAMMATION WEB 2
LMD  L1 (Tronc Commun)
Ministère de l'Enseignement Supérieur et de la Recherche Scientifique
Direction Générale des Études Technologiques
ISET Kélibia
Département Technologies de l’Informatique
Janvier 2018

Faycel CHAOUA Programmation Web 2 i
Conditions d’utilisation de ce support
Ce support de cours est mis à disposition selon les termes de la licence « Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0
International ».
https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
Vous êtes autorisé à :
» Partager  copier, distribuer et communiquer le matériel par tous moyens et sous tous
formats.
» Adapter  remixer, transformer et créer à partir du matériel
Selon les conditions suivantes :
» Attribution  Vous devez créditer l'œuvre, intégrer un lien vers la licence et indiquer
si des modifications ont été effectuées à l'œuvre. Vous devez indiquer ces
informations par tous les moyens raisonnables, sans toutefois suggérer que l'offrant
vous soutient ou soutient la façon dont vous avez utilisé son œuvre.
» Pas d’utilisation commerciale  Vous n'êtes pas autorisé à faire un usage commercial
de cette œuvre, tout ou partie du matériel la composant.
Partage dans les mêmes conditions  Dans le cas où vous effectuez un remix, que vous
transformez, ou créez à partir du matériel composant l'œuvre originale, vous devez diffuser
l'œuvre modifiée dans les même conditions, c'est à dire avec la même licence avec laquelle
l'œuvre originale a été diffusée.

Faycel CHAOUA Programmation Web 2 ii
Les objectifs généraux
A l’issue des modules présentés dans ce support, l’apprenant sera capable de :
 Comprendre la syntaxe du langage JavaScript.
 Écrire des scripts en JavaScript.
 Gérer les événements JavaScript.
 Manipuler les objets JavaScript.
 Contrôler les formulaires avec JavaScript.
 Comprendre la syntaxe du langage XML.
 Comprendre la syntaxe du langage DTD.
 Écrire des documents XML conformes et valides.
Plan du cours
Ce support est constitué principalement des chapitres suivants :
 Partie 1 : JavaScript.
 Chapitre 1 : Introduction au JavaScript.
 Chapitre 2 : Syntaxe du JavaScript.
 Chapitre 3 : Les événements JavaScript.
 Chapitre 4 : Les objets JavaScript.
 Chapitre 5 : DOM (Document Object Model).
 Chapitre 6 : Les chaînes de caractères – l’objet String.
 Chapitre 7 : Feuilles de style en cascade (CSS).
 Chapitre 8 : Les formulaires.
 Partie 2 : XML.
 Chapitre 9 : Présentation de XML.
 Chapitre 10 : Syntaxe de XML.
 Chapitre 11 : DTD (Document type definition).

Tables des matières
Chapitre 1. Introduction au JavaScript ................................................................................. 1
1.1. JavaScript......................................................................................................................... 1
1.2. Navigateurs...................................................................................................................... 2
1.3. Limites du JavaScript ...................................................................................................... 2
Chapitre 2. Syntaxe du JavaScript ......................................................................................... 3
2.1. Instructions - Conditions - Boucles ................................................................................. 4
2.2. Scripts dans l'en-tête du fichier HTML ........................................................................... 5
2.3. Scripts externes................................................................................................................ 6
2.4. Commentaires.................................................................................................................. 6
2.5. Objets internes ................................................................................................................. 7
2.6. Variables.......................................................................................................................... 8
Chapitre 3. Les événements JavaScript ................................................................................. 9
3.1. Pseudo-URL .................................................................................................................. 10
3.2. Exemples d'événements................................................................................................. 10
3.3. L’objet event.................................................................................................................. 11
3.4. Réaction aux événements JavaScript............................................................................. 12
3.5. Événements de clavier................................................................................................... 13
3.6. Événements de souris .................................................................................................... 14
Chapitre 4. Les objets JavaScript......................................................................................... 15
4.1. Les objets du navigateur................................................................................................ 16
4.1.1. L'objet window........................................................................................................ 17
4.1.2. L'objet navigator ..................................................................................................... 18
4.1.3. L’objet location....................................................................................................... 18
4.1.4. L'objet document..................................................................................................... 19
4.1.5. L’objet history......................................................................................................... 20
4.2. Les objets du noyau JavaScript ..................................................................................... 20
Chapitre 5. DOM (Document Object Model) ...................................................................... 22
5.1. Représentation de la page : Propriétés des nœuds......................................................... 23
5.2. Création, insertion, suppression d'un nœud................................................................... 24
5.2.1. Méthodes JavaScript pour la gestion des nœuds..................................................... 24
5.2.2. Exemple .................................................................................................................. 24
5.3. Ajax ............................................................................................................................... 28

Faycel CHAOUA Programmation Web 2 ii
Chapitre 6. Les chaînes de caractères – l’objet String........................................................ 29
6.1. La propriété lenght......................................................................................................... 30
6.2. Les méthodes d’environnement..................................................................................... 30
6.2.1. La méthode charAt()............................................................................................... 30
6.2.2. Les méthodes charCodeAt() et fromCharCode().................................................... 31
6.2.3. La méthode concat() ............................................................................................... 31
6.2.4. La méthode indexOf()............................................................................................. 31
6.2.5. Les méthodes substring() et substr()....................................................................... 32
6.2.6. La méthode split()................................................................................................... 33
6.2.7. Les méthodes toUpperCase() et toLowerCase()..................................................... 33
6.2.8. Autres méthodes...................................................................................................... 33
Chapitre 7. Feuilles de style en cascade (CSS)..................................................................... 35
7.1. Accès aux styles CSS .................................................................................................... 36
7.2. Accès aux classes CSS .................................................................................................. 36
7.3. Accès aux feuilles de style individuelles....................................................................... 37
7.4. Accès aux règles de CSS individuelles.......................................................................... 38
7.5. Laisser disparaître le contenu d'un site Web ................................................................. 39
Chapitre 8. Les formulaires................................................................................................... 41
8.1. Formulaires HTML avec JavaScript.............................................................................. 42
8.2. Accès aux champs de texte............................................................................................ 43
8.3. Accès aux cases à cocher............................................................................................... 44
8.4. Accès à des boutons radio ............................................................................................. 44
8.5. Accès à des listes de sélection ....................................................................................... 45
8.6. Accès à une liste à choix multiple ................................................................................. 46
8.7. Envoi d'un formulaire.................................................................................................... 47
8.8. Eviter les envois répétés de formulaires........................................................................ 47
Chapitre 9. Présentation de XML......................................................................................... 50
9.1. Historique ...................................................................................................................... 51
9.2. Intérêts ........................................................................................................................... 51
9.3. Langages apparentés...................................................................................................... 52
9.4. Premier exemple : un carnet d’adresse.......................................................................... 52
Chapitre 10. Syntaxe de XML............................................................................................... 55
10.1. Premier exemple.......................................................................................................... 56
10.2. Caractères .................................................................................................................... 57
10.2.1. Caractères spéciaux............................................................................................... 57

Faycel CHAOUA Programmation Web 2 iii
10.2.2. Caractères d'espacement ....................................................................................... 57
10.2.3. Jetons et noms XML............................................................................................. 57
10.2.4. Codage .................................................................................................................. 58
10.2.5. Collations.............................................................................................................. 58
10.2.6. Normalisation........................................................................................................ 59
10.3. URI, URL et URN....................................................................................................... 59
10.4. Syntaxe et structure ..................................................................................................... 60
10.5. Composition globale d'un document ........................................................................... 60
10.6. Prologue....................................................................................................................... 61
10.7. Corps du document...................................................................................................... 62
10.7.1. Éléments................................................................................................................ 62
10.7.2. Sections littérales .................................................................................................. 63
10.7.3. Attributs ................................................................................................................ 64
10.7.4. Commentaires ....................................................................................................... 64
10.7.5. Instructions de traitement...................................................................................... 65
Chapitre 11. DTD (Document type definition) .................................................................... 66
11.1. Un premier exemple .................................................................................................... 68
11.2. Déclaration de la DTD................................................................................................. 69
11.2.1. DTD interne .......................................................................................................... 69
11.2.2. DTD externe.......................................................................................................... 70
11.2.3. DTD mixte ............................................................................................................ 71
11.3. Contenu de la DTD...................................................................................................... 71
11.4. Commentaires.............................................................................................................. 71
11.5. Entités.......................................................................................................................... 71
11.5.1. Entités générales ................................................................................................... 72
11.5.2. Entités paramètres................................................................................................. 74
11.6. Déclaration d'élément .................................................................................................. 75
11.6.1. Contenu pur d'éléments......................................................................................... 75
11.6.2. Contenu textuel..................................................................................................... 77
11.6.3. Contenu mixte....................................................................................................... 77
11.6.4. Contenu vide......................................................................................................... 78
11.6.5. Contenu libre......................................................................................................... 78
11.7. Déclaration d'attribut ................................................................................................... 78
11.7.1. Types des attributs ................................................................................................ 79
11.7.2. Valeur par défaut................................................................................................... 79
11.8. Outils de validation...................................................................................................... 80

Faycel CHAOUA Programmation Web 2 iv
TD (Travaux dirigés) ............................................................................................................. 81
TD N° 1 ................................................................................................................................ 82
TD N° 2 ................................................................................................................................ 84
TD N° 3 ................................................................................................................................ 86
TD N° 4 ................................................................................................................................ 88
TD N° 5 ................................................................................................................................ 91
Correction des TD .................................................................................................................. 93
Correction du TD N° 1 ......................................................................................................... 94
Correction du TD N° 2 ....................................................................................................... 100
Références (Bibliographie / Webographie)........................................................................ 120

Partie I : JavaScript

Faycel CHAOUA Programmation Web 2 1
Chapitre 1. Introduction au JavaScript
Chapitre 1 : Introduction au JavaScript
֍ Durée : 1 heure 30 minutes.
֍ Mots clés : JavaScript, window, document, objet.
֍ Objectifs : À l'issue de ce chapitre, vous serez en mesure de :
» Lister les propriétés du langage JavaScript.
» Définir un objet JavaScript.
» Identifier les limites du langage JavaScript.
Plan du chapitre :
1.1. JavaScript......................................................................................................................... 1
1.2. Navigateurs...................................................................................................................... 2
1.3. Limites du JavaScript ...................................................................................................... 2

1.1. JavaScript
JavaScript est un langage interprété par le navigateur. C’est un langage « client », c'est-à-dire
exécuté chez l'utilisateur lorsque la page Web est chargée. Il a pour but de dynamiser les sites
Internet.
Le JavaScript est un langage sensible à la casse (« case sensitive »).
JavaScript est un langage objet : chaque objet possède des méthodes (ou fonctions), des
propriétés et des objets. Dans une page Web, l'objet le plus élevé dans la hiérarchie est la
fenêtre du navigateur : window. Cet objet window contient entre autres l'objet document qui
lui-même contient tous les objets contenus dans la page Web (paragraphes, formulaires, etc.).
En plus de ces objets, il existe des objets créés par l'utilisateur.
Les méthodes sont des fonctions qui permettent d'agir sur certaines propriétés de l'objet, les
propriétés contiennent les paramètres d'un objet.
Exemple d'un objet voiture : on va lui attribuer
 des propriétés : la couleur, la marque, le numéro d'immatriculation ;
 des méthodes : tourner(), avancer(), reculer(), changer la couleur() ;
 des objets : les phares, les pneus.
Pour résumer une méthode engendre une action, un verbe qualifie cette action, une propriété
est généralement qualifiée par un nom.
Dans l'exemple précédent une méthode permet de changer la couleur de la voiture, par contre
aucune méthode n’autorise à changer la marque de cette voiture (ce qui entraînerait une
modification des autres propriétés et éventuellement l'apparition ou la disparition de
méthodes).
Il en sera ainsi également avec nos objets JavaScript : on pourra accéder voire modifier les
propriétés (couleur du texte, style de la fonte) des objets grâce aux méthodes.

1.2. Navigateurs
Voici une liste non exhaustive des navigateurs :
Linux / UNIX Windows MacOS
Firefox, Netscape, Mozilla,
Konqueror, Lynx, Opéra
Internet Explorer, Firefox,
Netscape, Opéra, Chrome
Internet Explorer, Konqueror,
Opéra, Safari
NB : Lynx est un navigateur qui n'interprète pas le JavaScript.
Tout irait pour le mieux si ces navigateurs utilisaient pour un même objet, les mêmes
propriétés et les mêmes méthodes pour les définir. Ce qui est loin d'être le cas. Par ailleurs,
Internet Explorer (IE) interprète également le JScript, un JavaScript créé par Microsoft
(ActiveX).
1.3. Limites du JavaScript
JavaScript est difficilement compatible entre les différents navigateurs. Il faut toujours se
décider jusqu'à quel point ça doit être compatible.
Tout le monde n'a pas JavaScript : Il faut toujours que la page contienne l'ensemble de
l'information, accessible même sans JavaScript. JavaScript est là pour apporter un plus
(ergonomie, dynamisme), mais on doit pouvoir s'en passer.
JavaScript n'est pas sécurisé. Les programmes JS sont exécutés sur le client, on n'est jamais
sûr de leurs résultats, il ne faut donc jamais faire confiance à une donnée provenant du client.

Chapitre 2. Syntaxe du JavaScript
Chapitre 2 : Syntaxe du JavaScript
֍ Mots clés : function, if, for, while, do … while, script, getElementById, var.
» Utiliser des instructions, des conditions et des boucles.
» Intégrer un Script dans un fichier HTML.
» Mémoriser les objets internes.
» Déclarer des variables.
Plan du chapitre :
2.1. Instructions - Conditions - Boucles ................................................................................. 4
2.2. Scripts dans l'en-tête du fichier HTML ........................................................................... 5
2.3. Scripts externes................................................................................................................ 6
2.4. Commentaires.................................................................................................................. 6
2.5. Objets internes ................................................................................................................. 7
2.6. Variables.......................................................................................................................... 8

2.1. Instructions - Conditions - Boucles
Il est fortement recommandé de terminer l'ensemble des instructions JavaScript par un point-
virgule (même si, en effet, ce n'est pas toujours nécessaire).
Les instructions ci-dessous ne se terminent pas par un point-virgule :
Les définitions de fonctions
function maFonction()
{
...............
}
Les conditions
if (var1==var2)
{
...............
}
else
{
...............
}
Syntaxe des conditions :
 égalité : == (cette syntaxe est également utilisée pour comparer deux chaînes de
caractères)
 différent de : != (même remarque que ci-dessus)
 inférieur ou égal à : <=
 supérieur ou égal à : >=
 inférieur à : <
 supérieur à : >
 et logique : &&
 ou logique : ||
 identique à : ===
 non identique à : !==
 et bit à bit : &
 ou bit à bit : |

La boucle for
for (i=0; i<5; i++)
{
...............
}
La boucle while
while (a<b)
{
...............
}
La boucle do … while
do
{
...............
}while (a<b)
2.2. Scripts dans l'en-tête du fichier HTML
Tout script est encadré des balises <script> </script>, on précise également le type MIME
grâce à l'attribut type :
Script dans l'en-tête du fichier HTML
<!DOCTYPE html>
<html>
<head>
<title>Script dans l’en-tête du fichier HTML</title>
<script type="text/javascript">
<!—
...............
//-->
</script>
</head>
<body>
</body>
</html>

Les commentaires restent présents pour une raison historique : les premiers navigateurs
n'interprétant pas le JavaScript et pour éviter un affichage du texte dans la page web, les
scripts étaient encadrés de commentaires.
De plus, le fait d’omettre les commentaires amène les validateurs à tenter d'interpréter le code
JavaScript comme du HTML, ce qui implique des erreurs de validation non justifiées.
Ne pas confondre les commentaires HTML et les commentaires JavaScript.
Ces balises script sont généralement insérées dans le head de la page, ou entre les balises
body. Dans ce dernier cas les scripts sont exécutés au fur et à mesure du chargement de la
page.
Il est possible d'insérer du code JavaScript dans les balises HTML. Cependant, il faut que le
code inséré soif bref pour des questions de lisibilité (dans le cas des événements).
2.3. Scripts externes
On peut enregistrer le script dans un fichier indépendant de la page Web. Dans ce cas, on
précise dans le head le lien vers ce fichier. L'avantage est que l'on peut ainsi réutiliser le script
pour une autre page.
Lien vers un script externe
<!DOCTYPE html>
<html>
<head>
<title>Lien vers un script externe</title>
<script type="text/javascript" src="MonFichier.js"></script>
</head>
<body>
</body>
</html>
2.4. Commentaires
Commentaire HTML

Il existe des commentaires « multilignes » : ils commencent par /* et se terminent par */ et
des commentaires sur une ligne : ils débutent par //
Commentaire JavaScript
// Ceci est un commentaire JavaScript sur une ligne
/* Ceci est un commentaire JavaScript
sur plusieurs
lignes */
Il semblerait que la présence des accents et des apostrophes dans ces commentaires
contribuerait à une mauvaise interprétation des scripts. Cette source d'erreurs peut-être levée
en précisant le charset du fichier JavaScript.
De plus, l'utilisation de commentaires multilignes peut perturber l'interprétation dans le cas
d'utilisation d'expressions régulières du fait de la présence possible des caractères /* ou */
dans celles-ci.
2.5. Objets internes
Les objets internes JavaScript commencent par une majuscule : String, Math, Array,
Boolean, Date, Number, Function (à ne pas confondre avec le mot-clef function), RegExp,
etc.
Les méthodes ainsi que les propriétés d'un objet commencent par une minuscule. Toutes les
méthodes internes à JavaScript sont sensibles à la casse (« case sensitive »).
 Exemple de méthodes : toLowerCase() ; getElementById() ; charAt() ;
fromCharCode() ; etc.
 Exemple de propriétés : id ; type ; innerHTML ; tagName ; style ; etc.
L'accès à une méthode ou à une propriété d'un objet se fait en plaçant un point entre le nom de
l'objet et la propriété ou la méthode.
Exemple
var monObjet = document.getElementById("idObjet");
monObjet.style.display = "none";

ou
Exemple
document.getElementById("idObjet").style.display = "none";
NB : Le langage JavaScript est un langage « case sensitive » : les variables, les méthodes, les
attributs, les mots-clefs, etc. ont une syntaxe très précise. Le non-respect de cette règle peut
conduire à une mauvaise exécution des scripts.
2.6. Variables
En JavaScript les variables ne sont pas typées. Il faut néanmoins les déclarer grâce au mot
clef var. Une variable peut, au cours du programme, être tour à tour un entier, une chaîne de
caractères, ou un booléen. Même si cette possibilité de programmation est offerte, il ne faut
surtout pas s'y laisser tenter. Une variable doit garder le même type du début à la fin. Et donc
ne pas hésiter à créer autant de variables que nécessaire.
À ne pas faire
var i; //déclaration
i = 2; //entier
i = "bonjour"; //chaîne de caractères
i = true; //booléen
Ce qu'il faut faire
var i, chaine, bool; //Déclaration de 3 variables
i = 2;
chaine = "bonjour";
bool = true;
Bannir des noms de variables :
 du genre : truc, machin, toto, etc. ;
 « kilométriques » : ceciEstLeNomDeMaVariable ;
 avec des accents : maChaîneDeCaractères.
NB : Les variables ne doivent pas être des mots-clefs JavaScript : var, form, document, etc.

Chapitre 3 : Les événements JavaScript
Chapitre 3. Les événements JavaScript
֍ Mots clés : event, attachEvent, addEventListener, detachEvent, removeEventListener,
keyCode, clientX, clientY, pageX, pageY, innerHTML.
» Mémoriser les principaux événements JavaScript.
» Manipuler l'objet event.
» Gérer les événements de clavier.
» Gérer les événements de souris.
Plan du chapitre :
3.1. Pseudo-URL .................................................................................................................. 10
3.2. Exemples d'événements................................................................................................. 10
3.3. L’objet event.................................................................................................................. 11
3.4. Réaction aux événements JavaScript............................................................................. 12
3.5. Événements de clavier................................................................................................... 13
3.6. Événements de souris .................................................................................................... 14

Introduction
Tous les événements commencent par on : onclick, onload, onmouseout, onmouseover etc.
Ils peuvent être insérés dans les balises HTML du document. Il est vivement conseillé de les
écrire en minuscules.
Syntaxe des événements
<body onload="maFonction()">
<input type="button" onclick="maFonction()" />
3.1. Pseudo-URL
Les pseudos-URL sont insérées dans les balises de lien avec la syntaxe suivante :
Pseudo-URL
<a href="javascript:alert('Bonjour !')">Mon Lien</a>
et ce pour faire la distinction avec un lien vers une autre page :
URL
<a href="maPage.htm">Mon Lien</a>
3.2. Exemples d'événements
Événement Survient
onload après le chargement de la page.
onunload lors de la fermeture de la page.
onbeforeunload juste avant la fermeture de la fenêtre.
onclick lors d'un clic (sur le bouton gauche).
ondblclick lors d'un double-clic (sur le bouton gauche).
onmousedown quand on enfonce le bouton de la souris (un clic gauche ou un clic droit).
onmouseup quand on relâche le bouton de la souris (un clic gauche ou un clic droit).
onmousemove lorsque la souris se déplace dans un objet du document.
onmouseover lorsque le curseur de la souris est positionné au-dessus d'un élément.
onmouseout lorsque le curseur de la souris quitte un élément.
onkeydown quand on enfonce une touche du clavier.
onkeyup quand on relâche la touche.
onkeypress quand on enfonce une touche du clavier.

onblur quand l'élément perd le focus.
onfocus quand l'élément a le focus.
onchange quand l'élément perd le focus et que son contenu a changé.
onsubmit juste avant l'envoi d'un formulaire.
onreset lors de la réinitialisation du formulaire.
onselect quand le contenu d'un élément est sélectionné.
onscroll lors de l'utilisation de la barre de défilement.
onbeforeprint avant l'impression (après le clic sur le bouton Ok de la fenêtre d'impression).
onafterprint après l'impression.
oncopy lors du copier vers le presse-papier.
onpaste lors du coller depuis le presse-papier.
ondragdrop lors d’un glisser-déposer sur la fenêtre du navigateur.
onerror lorsqu'une erreur apparaît durant le chargement de la page.
onresize lorsque la fenêtre du navigateur est redimensionnée.
onabort lorsque le chargement de l'image est interrompu.
NB : Chaque événement ne peut pas être associé à n'importe quel objet. Il est évident par
exemple qu'un événement onchange ne pourra pas s'appliquer à un lien hypertexte.
3.3. L’objet event
Il arrive souvent que l'un des arguments de la fonction appelée lors d'un événement soit l'objet
event (gestionnaire des événements). Le cas le plus classique est lorsque l'on veut connaître
la position de la souris.
Avec IE, l'objet event est contenu dans l'objet window : window.event. Avec Firefox ou
Netscape, l'objet event est généré lors d'un événement (onclick par exemple) à la seule
condition que celui-ci soit inclus dans la balise HTML. Par conséquent, pour récupérer
l'événement produit, il faut que l'objet event soit un paramètre de la fonction.
Récupération de l'événement produit dans la page Web
<!DOCTYPE html>
<html>
<head>
<title>Récupération de l'événement produit dans la page Web</title>
function position(ev)
{

var Xfen, Yfen, el;
Xfen = ev.clientX;
Yfen = ev.clientY;
el = document.getElementById("idMouse");
el.innerHTML= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";
}
window.onload=function(){
document.onmousemove=position;
}
</script>
</head>
<body>
<div id="idMouse">
</div>
</body>
</html>
Cependant, (et c'est un gros avantage) ce code fonctionne également sous IE. Il n'est donc
pas nécessaire d'ajouter des tests pour savoir s'il faut utiliser le paramètre ev de la fonction ou
le gestionnaire d'événements window.event que seul IE comprend.
3.4. Réaction aux événements JavaScript
La réaction aux événements JavaScript peut être réalisée de deux manières :
 avec l'attribut HTML : <body onload="xyz();"> ;
 avec l'attribut JavaScript onXXX : window.onload = xyz;.
Il existe toutefois plusieurs mécanismes d'événements concurrentiels dans les différents
navigateurs. IE accepte que des événements soient attachés à un élément à l'aide de la
méthode attachEvent(). Le nom de l'événement ici est égal à l'attribut HTML, pour qu’on
puisse utiliser "onload", par exemple (même si l'événement est appelé "load").
Tous les autres grands navigateurs acceptent la méthode addEventListener(), qui fait partie
du modèle W3C. Ici, on apporte le nom de l'événement, donc juste load au lieu d'onload.
L'exemple suivant montre comment attacher un événement à un bouton de manière que cela
fonctionne dans tous les navigateurs :

Réaction aux événements : attacher un événement à un bouton
function eventHandler() {
window.alert("Événement déclenché !");
}
window.onload = function() {
var button = document.getElementById("eventButton");
if (button.addEventListener) {
button.addEventListener("click", eventHandler, false);
}
else if (button.attachEvent) {
button.attachEvent("onclick", eventHandler);
}
};
</script>
<input type="button" id="eventButton" value="Cliquer ici !" />
NB : On peut également supprimer les gestionnaires d'événements. IE utilise detachEvent(),
tandis que d'autres navigateurs suivent les recommandations du W3C et nomment leurs
fonctions removeEventListener().
3.5. Événements de clavier
Les événements du clavier ne font pas partie de DOM niveau 1 ou 2, mais ils sont
implémentés dans les navigateurs récents. L'accès aux événements diffère de la méthode
générale (window.event dans IE ; l'événement servant de paramètre automatique de la
fonction dans tous les autres navigateurs). Mais alors, la propriété keyCode renvoie le code
ASCII de la touche, qui peut ensuite être traité, comme dans le code suivant :
Écoute des événements du clavier
function showKey(e) {
var key;
if (window.event) {
key = window.event.keyCode;
} else {
key = e.keyCode;
}

key = String.fromCharCode(key);
document.getElementById("para").innerHTML += key;
}
document.onkeydown = showKey;
}
</script>
<p id="para">Cliquer et écrire ici : </p>
3.6. Événements de souris
L'utilisation de la souris donne lieu à un événement assez intéressant à écouter : mousemove.
La position de la souris peut en effet être déterminée si l'on étudie certaines de ses propriétés.
Une fois de plus, ces propriétés dépendent du groupe de navigateurs auquel appartient le
client, IE ou le reste du monde :
 clientX et clientY pour IE ;
 pageX et pageY pour tous les autres navigateurs.
L’exemple suivant montre la position actuelle de la souris dans le corps du document :
Suivi des mouvements de la souris
function showPosition(e) {
var x, y;
if (window.event) {
x = window.event.clientX;
y = window.event.clientY;
}
else {
x = e.pageX;
y = e.pageY;
}
document.body.innerHTML = "x: " + x + ", y: " + y;
}
document.onmousemove = showPosition;
}
</script>

Chapitre 4. Les objets JavaScript
Chapitre 4 : Les objets JavaScript
֍ Mots clés : window, navigator, location, history, document, alert, confirm, prompt,
getElementById, Array, Boolean, Date, Function, Math, Number, RegExp, String.
» Distinguer les objets du navigateur.
» Lister les objets du noyau JavaScript.
Plan du chapitre :
4.1. Les objets du navigateur................................................................................................ 16
4.1.1. L'objet window........................................................................................................ 17
4.1.1.1. Demande de confirmation à l'utilisateur........................................................... 17
4.1.1.2. Demande de données utilisateur....................................................................... 17
4.1.2. L'objet navigator ..................................................................................................... 18
4.1.2.1. Détection du type de navigateur....................................................................... 18
4.1.2.2. Détection du numéro de version du navigateur................................................ 18
4.1.3. L’objet location....................................................................................................... 18
4.1.3.1. Redirection du navigateur ................................................................................ 18
4.1.3.2. Rechargement de la page.................................................................................. 19
4.1.4. L'objet document..................................................................................................... 19
4.1.5. L’objet history......................................................................................................... 20
4.2. Les objets du noyau JavaScript ..................................................................................... 20

Introduction
En JavaScript, tout est objet ! On distingue toutefois parmi ceux-ci, deux types : les objets de
type primitif et les objets de type composé. Les premiers sont ceux qui se résument à une
valeur unique : les nombres, les booléens et les chaînes. Les seconds (tableaux, fonctions ou
objets) comportent plusieurs valeurs (propriétés), chacune bénéficiant d'un nom et d'une
valeur, l'ensemble réuni en une seule entité (l'objet), elle aussi identifiée par un nom.
L'accès à une propriété (pour lui affecter ou en lire sa valeur) devra obligatoirement préciser
en premier lieu le nom de l'objet suivi du nom de la propriété concernée. On peut affecter à
une propriété n'importe quel type d'objet (objets de type primitif ou de type composé).
4.1. Les objets du navigateur
Les objets de base du navigateur sont : navigator, window, location, history et document.
Les objets du navigateur sont classés dans une hiérarchie qui décrit la page affichée à l'écran,
et qui permet d'accéder à n'importe quel objet grâce à une désignation dépendant de la
hiérarchie.
Pour accéder à un objet du navigateur, il faut parcourir la hiérarchie du navigateur, en partant
du sommet (l'objet window), puis en parcourant tous les maillons jusqu'à atteindre l'objet
désiré. La syntaxe est window.objet1.objet2.objet3.objet_visé (ici il y a trois objets
intermédiaires [objet1, objet2 et objet3] mais ce nombre peut varier de 0 à un très grand
nombre d'objets, suivant l'imbrication des objets dans la page).
Pour lire ou modifier le contenu d'une propriété de l'objet visé il suffit de rajouter un point,
puis le nom de la propriété. Certaines propriétés sont modifiables, c'est-à-dire qu’il est
possible de modifier dynamiquement un élément (du texte, une image, etc.). Certaines
propriétés sont par contre en lecture seule, c'est-à-dire qu'elles permettent uniquement de
récupérer des informations mais qu'il est impossible de les modifier.

4.1.1. L'objet window
Cet objet représente le navigateur contenant l'objet document. Il est créé lors de l'ouverture du
navigateur et contient toutes les propriétés et les méthodes de gestion de la fenêtre. Ses
propriétés et ses méthodes peuvent être appelées sans devoir préciser l'objet window.
Une méthode de l'objet window
window.alert ("Bonjour !");
L'objet window est sous-entendu
alert("Bonjour !");
4.1.1.1. Demande de confirmation à l'utilisateur
JavaScript propose une prise en charge limitée des fenêtres modales. La méthode
window.alert() est assez commune mais il existe d'autres options. Avec
window.confirm(), l'utilisateur se voit présenter une fenêtre de type Oui/Non. S'il clique sur
Oui, window.confirm() renvoie true, et false dans le cas contraire. Le code de l’exemple
suivant l'utilise comme valeur de retour pour un lien. Ainsi, si l'utilisateur clique sur Non, le
navigateur ne suit pas le lien.
Demande de confirmation à l’utilisateur
<a href="page.html" onclick="return window.confirm('Visiter le lien?');">Cliquer ici</a>
4.1.1.2. Demande de données utilisateur
La méthode window.prompt()permet aux utilisateurs de saisir du texte dans un champ de
texte d'une seule ligne. Ces informations correspondent à la valeur de retour de l'appel de
méthode et peuvent ensuite être utilisées dans le script.
Demande de données utilisateur
var name = window.prompt("Entrer votre nom !", "<Votre nom>");
if (name != "") {
window.alert("Bonjour, " + name + "!");
}
</script>

4.1.2. L'objet navigator
Cet objet contient les propriétés du navigateur (nom, version, langue, etc.). On utilise de
moins en moins souvent cet objet pour identifier le navigateur de l'utilisateur car certaines
propriétés peuvent être modifiées (cas d'Opera).
On utilisera plutôt certaines propriétés de l'objet document pour réaliser ces tests.
4.1.2.1. Détection du type de navigateur
L'objet navigator propose des informations sur le navigateur. Sa propriété userAgent, qui
contient la chaîne d'identification complète du navigateur, est très utile mais parfois difficile à
analyser.
Pour déterminer simplement le type d'un navigateur, il suffit d'employer la propriété appName.
Détermination du type de navigateur
window.alert(navigator.appName);
4.1.2.2. Détection du numéro de version du navigateur
Pour déterminer le numéro de version du navigateur, il existe plusieurs manières. La plupart
du temps, on doit rechercher navigator.userAgent.
4.1.3. L’objet location
Cet objet contient des informations relatives à l'adresse de la page à l'écran.
4.1.3.1. Redirection du navigateur
La propriété location.href permet un accès en lecture et en écriture à l'URL de la page en
cours. Régler location.href sur une autre valeur redirige le navigateur, qui charge alors la
nouvelle page.
location.href()
location.href = "nouvellePage.html";

La page précédente arrive ensuite dans l'historique du navigateur. Si on souhaite remplacer
l'ancienne page dans l'historique, on utilise la méthode location.replace() :
location.replace()
location.replace("nouvellePage.html");
4.1.3.2. Rechargement de la page
La méthode reload() de l'objet location recharge la page en cours, l'équivalent de
location.href = location.href.
Rechargement de la page
location.reload();
4.1.4. L'objet document
L'objet document regroupe toutes les méthodes de gestion de la page Web. Ses fonctions
permettent de cibler un objet (un paragraphe par exemple) pour modifier ses attributs.
Pour modifier les attributs d'un élément (paragraphe, lien, etc.), celui-ci doit être au préalable
identifié par un identifiant unique (attribut id). L'objet est ensuite ciblé grâce à la méthode
getElementById() contenue dans l'objet document. Si l'élément possédant cet id n'existe
pas la méthode renvoie null.
Utilisation des objets contenus dans le document
//objet contient toutes les propriétés de idElement
var monElement = document.getElementById("idElement") ;
//pour modifier la taille de la police
monElement.style.fontSize = "12px";
//pour modifier la police
monElement.style.fontFamily = "Arial";
//pour modifier le contenu du paragraphe (balises div, span, p et body uniquement).
monElement.innerHTML = "Salut tout le monde !!";
Dès qu'un serveur Web envoie une ressource au client, il envoie également la date de dernière
modification du document. La propriété lastModified récupère cette date.

Date de dernière modification
document.write(document.lastModified);
4.1.5. L’objet history
C’est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment.
Les propriétés et les méthodes de l'objet history sont peu nombreuses, elles peuvent
néanmoins être très utiles pour aider à la navigation.
 La propriété length permet de connaître le nombre d'objets dans l'historique.
 La méthode back permet d'aller à l'URL précédent dans l'historique.
 La méthode forward permet d'aller à l'URL suivant dans l'historique.
 La méthode go(variable) permet d'aller à un des URL de l'historique. Le paramètre
variable est un nombre entier (positif ou négatif) qui détermine le nombre de pages
relatif auquel se trouve l'URL désiré. Il est possible d'entrer une chaîne de caractères
en paramètre, auquel cas le navigateur cherchera la page de l'historique la plus proche
contenant cette chaîne.
Navigation dans l'historique d'un navigateur
// Exemple 1
window.history.back(); // history.back();
// Exemple 2
window.history.forward(); // history.forward();
4.2. Les objets du noyau JavaScript
JavaScript fournit en standard un certain nombre d'objets proposant des propriétés et des
méthodes permettant d'effectuer simplement un grand nombre de manipulations. Ces objets
sont appelés objets du noyau JavaScript, car ils ont été standardisés par l'ECMA (European
Computer Manufacturer Association) et constituent la base du langage JavaScript.
Les objets du noyau sont indépendants du navigateur du client, contrairement aux
objets du navigateur.

Présentation des objets du noyau JavaScript
Nom de l’objet Description
Array
permet de créer des tableaux. Il possède de nombreuses méthodes permettant d'ajouter, de
supprimer ou d'extraire des éléments d'un tableau ainsi que de les trier.
Boolean
permet de créer des valeurs booléennes, c'est-à-dire des éléments possédant deux états
(vrai et faux).
Date permet de créer des dates et des durées. Il propose des méthodes permettant de les manipuler.
Function permet de définir des fonctions personnalisées.
Math
permet de manipuler des fonctions mathématiques, comme par exemple les fonctions
trigonométriques.
Number permet de faire des opérations de base sur les nombres.
RegExp
permet de créer des expressions régulières, c'est-à-dire des éléments permettant de faire des
opérations avancées sur les chaînes de caractères.
String propose une grande variété de méthodes permettant de manipuler des chaînes de caractères.

Chapitre 5. DOM (Document Object Model)
Chapitre 5 : DOM (Document Object Model)
֍ Mots clés : childNodes, firstChild, lastChild, nextSibling, previousSibling, parentNode,
nodeName, nodeValue, nodeType, createElement, createTextNode, appendChild,
insertBefore, removeChild, xmlHttpRequest, XHR.
» Distinguer les propriétés des nœuds.
» Manipuler le DOM.
» Gérer des nœuds.
Plan du chapitre :
5.1. Représentation de la page : Propriétés des nœuds......................................................... 23
5.2. Création, insertion, suppression d'un nœud................................................................... 24
5.2.1. Méthodes JavaScript pour la gestion des nœuds..................................................... 24
5.2.2. Exemple .................................................................................................................. 24
5.2.2.1. Arborescence du document .............................................................................. 25
5.2.2.2. Création des éléments....................................................................................... 25
5.2.2.3. Insertion des objets dans le document.............................................................. 27
5.3. Ajax ............................................................................................................................... 28

5.1. Représentation de la page : Propriétés des nœuds
Le DOM (Document Object Model) est un modèle standardisé par le W3C (World Wide Web
Consortium). Ce modèle propose de représenter un document sous la forme d'un arbre. Toutes
les balises HTML sont donc des nœuds de l'arbre et les feuilles sont soit des balises sans
contenu, soit le texte de la page HTML.
Propriétés des nœuds
Propriété Description
childNodes nœuds enfants.
firstChild premier nœud enfant.
lastChild dernier nœud enfant.
nextSibling prochain nœud d'un type (nœud de même niveau).
parentNode nœud parent.
previousSibling nœud précédent d'un type (nœud de même niveau).
nodeName nom du nœud.
nodeValue valeur / contenu du nœud.
nodeType type du nœud.
Types de nœuds : 1 - Nœud élément ; 2 - Nœud attribut ; 3 - Nœud texte ; 4 - Nœud pour
CDATA ; 5 - Nœud pour référence d'entité ; 6 - Nœud pour entité ; 7 - Nœud pour instruction
de traitement ; 8 - Nœud pour commentaire ; 9 - Nœud document ; 10 - Nœud type de
document ; 11 - Nœud de fragment de document ; 12 - Nœud pour notation.
innerHTML est une instruction qui permet de modifier le contenu d'une balise ou d'insérer un
objet dans la page.
Insertion d'une image en utilisant innerHTML
//Ciblage du paragraphe
var MonParagraphe = document.getElementById("idPg");
//Modification de son contenu
MonParagraphe.innerHTML = "<img src='imageInseree.gif' /> Mon nouveau texte";
Une image sera insérée dans le paragraphe. Néanmoins, cette méthode présente quelques
inconvénients lorsqu'il s'agit de modifier le contenu d'un formulaire (balise form). Lors de
l'envoi du formulaire, les valeurs des objets créés via innerHTML ne sont pas toujours

transmises au serveur. C'est pour cette raison qu'il est préférable d'utiliser les méthodes gérant
les nœuds.
Insertion d'une image en utilisant nodeValue
//Ciblage du paragraphe
var e = document.getElementById("idPg");
//Création de l'image
var i = document.createElement("img");
//Source de l'image
i.src = "imageInseree.gif";
//Modifiaction du texte (nœud #text)
e.firstChild.nodeValue ="Mon nouveau texte";
//Ajout de l'image avant le texte
e.insertBefore(i, e.firstChild);
5.2. Création, insertion, suppression d'un nœud
5.2.1. Méthodes JavaScript pour la gestion des nœuds
Quelques fonctions permettant de gérer les nœuds du document.
Méthodes Description
createElement() créer un nouvel élément HTML dans le document (div, p, span, a, form, etc.).
createTextNode() créer un nœud texte.
appendChild()
ajouter l'élément créé dans le document. L'élément sera ajouté comme étant le dernier
nœud enfant d'un élément parent.
insertBefore() ajouter l'élément créé avant un autre nœud.
removeChild() supprimer un nœud.
5.2.2. Exemple
Soit un formulaire dans lequel on trouve un groupe d'éléments :
• trois textes : « Votre texte » ; « Vos options » ; « La suite »
• deux boîtes de textes
• une liste d'options
ET un bouton qui permet d'ajouter à ce formulaire un nouveau groupe d'éléments identique au
précédent. Ce nouveau groupe sera inséré avant le bouton.

Aspect final du formulaire :
5.2.2.1. Arborescence du document
Arborescence du document HTML
|-- BODY
|-- FORM id = "idFormulaire"
|-- #text : Votre texte :
|-- INPUT value = "" type = "text"
|-- #text : Vos options :
|-- SELECT size = "1"
|-- OPTION value = "" text="Votre choix"
|-- OPTION value = "valeur1" text="Option 1"
|-- #text : La suite :
|-- INPUT value = "" type = "text"
|-- BR
|-- BR
|-- INPUT value = "Ajouter un élément" type = "button" id = "idBouton" onclick ="addLigne()"
|-- BR
5.2.2.2. Création des éléments
Dans un premier temps on va créer tous les éléments qui seront dans la page :
 Création de deux input de type texte : On utilise la fonction createElement().
Syntaxe de la méthode createElement()
document.createElement("element HTML à créer");
Création des input de type text
var eltInput = new Array();
for (i=0;i<2;i++)
{
eltInput[i] = document.createElement("input");
eltInput[i].type = "text";
}

 Création des trois textNode « Votre texte » ; « Vos options » ; « La suite » : on utilise
la fonction createTextNode().
Syntaxe de la méthode createTextNode()
document.createTextNode("Texte du nœud");
Création des textNode
// Tableau dans lequel seront stockés les éléments
var eltTxt = new Array();
//Textes des éléments
var tabTxt = new Array("Votre texte : ","Vos options : ","La suite : ");
for (i=0; i<tabTxt.length; i++)
{
eltTxt[i] = document.createTextNode(tabTxt[i]);
}
 Création de la liste déroulante : le code suivant ne permet de créer que la balise select.
On verra plus loin comment créer et ajouter les options à la liste.
Création de la liste déroulante
//création de l'élément select
var eltSelect = document.createElement("select");
//nombre d'éléments visibles
eltSelect.size = "1";
 Création des options de la liste déroulante : Les options sont des objets de la liste. Pour
les créer on n'utilise pas la méthode createElement(). On va créer ces objets en
utilisant la syntaxe suivante :
Créer une option
new Option("Text","Value", "defaultSelected true / false", "selected true / false");
NB : Les objets sont créés mais ne sont pas ajoutés à la liste pour autant.
Création des options d'une liste
//Tableau contenant les options de la liste
var eltOption = new Array(
new Option("Votre choix", "", false, false),
new Option("Option 1", "valeur1", false, false),

new Option("Option 4", "valeur4", false, false)
);
 Création d'une ligne pour séparer chaque groupe. Une feuille de style s'appliquera sur
cette ligne.
Création d'une ligne
var ligne = document.createElement("hr");
ligne.className= "styleLigne";
5.2.2.3. Insertion des objets dans le document
Maintenant on va ajouter ces éléments au document. Ces éléments seront ajoutés dans le
formulaire juste au-dessus du bouton "Ajouter un élément". On va avoir besoin de l'objet
formulaire (élément parent) et de l'objet bouton (référence).
La fonction utilisée est insertBefore(e1, e2) avec :
 e1 : le nouvel élément enfant à insérer ;
 e2 : un élément enfant avant lequel le nouvel élément enfant doit être inséré.
Ajout des éléments dans le document
//Appel des objets formulaire et bouton
var eltForm = document.getElementById("idFormulaire");
var objBouton = document.getElementById("idBouton");
//Ajout de la ligne de séparation
eltForm.insertBefore(ligne, objBouton);
eltForm.insertBefore(eltTxt[0], objBouton); //1er texte
eltForm.insertBefore(eltInput[0], objBouton); //1er INPUT
eltForm.insertBefore(eltTxt[1], objBouton); //2ème texte
eltForm.insertBefore(eltSelect, objBouton); //Ajout du select
//Ajout dans le select des options (*)
for (i=0;i<eltOption.length;i++)
{
eltSelect.options.add(eltOption[i]);
}
eltForm.insertBefore(eltTxt[2], objBouton); //3ème texte

eltForm.insertBefore(eltInput[1], objBouton); //2ème INPUT
//Saut de ligne 1
eltForm.insertBefore(document.createElement("br"), objBouton);
//Saut de ligne 2
eltForm.insertBefore(document.createElement("br"), objBouton);
(*) IE : il faut insérer le select dans le document avant d'ajouter les options.
5.3. Ajax
AJAX est une méthode de programmation des pages Web qui s'appuie sur des scripts
JavaScript en utilisant l'objet xmlHttpRequest (aussi appelé XHR). Celui-ci permet de réaliser
des requêtes vers le serveur de manière asynchrone et ainsi de mettre à jour tout ou partie du
contenu d'une page Web.

Chapitre 6. Les chaînes de caractères – l’objet String
Chapitre 6 : Les chaînes de caractères – l’objet String
֍ Durée : 45 minutes.
֍ Mots clés : String, charAt, charCodeAt, fromCharCode, concat, indexOf, substring,
substr, split, toUpperCase, toLowerCase.
» Manipuler l'objet String.
» Identifier les méthodes d’environnement.
Plan du chapitre :
6.1. La propriété lenght......................................................................................................... 30
6.2. Les méthodes d’environnement..................................................................................... 30
6.2.1. La méthode charAt()............................................................................................... 30
6.2.2. Les méthodes charCodeAt() et fromCharCode().................................................... 31
6.2.3. La méthode concat() ............................................................................................... 31
6.2.4. La méthode indexOf()............................................................................................. 31
6.2.5. Les méthodes substring() et substr()....................................................................... 32
6.2.6. La méthode split()................................................................................................... 33
6.2.7. Les méthodes toUpperCase() et toLowerCase()..................................................... 33
6.2.8. Autres méthodes...................................................................................................... 33

L'objet String est un objet qui contient un certain nombre de propriétés et de méthodes
permettant la manipulation de chaînes de caractères.
6.1. La propriété lenght
L'objet String a une seule propriété : la propriété length, qui permet de retourner la
longueur d'une chaîne de caractères.
Syntaxe de la propriété length
x = nom_de_la_chaine.length;
// ou
x = ('chaine de caracteres').length;
6.2. Les méthodes d’environnement
Les méthodes de l'objet String permettent de récupérer une portion d'une chaîne de caractère,
ou bien de la modifier.
6.2.1. La méthode charAt()
Syntaxe de la méthode charAt()
Chaine.charAt(position) // Retourne le caractère situé à la position donnée en paramètre.
Le paramètre position est un entier qui représente la position du caractère à récupérer,
il doit être compris entre 0 et n-1 (où n représente la longueur de la chaîne). Dans le cas
contraire (le paramètre position négatif ou supérieur ou égal à la longueur), charAt()
renvoie une chaîne de longueur nulle.
Exemples d’utilisation de la méthode charAt()
var Chaine = 'Cours JavaScript !';
var Resultat1 = Chaine.charAt(0); // retourne le caractère 'C'
var Resultat2 = ("Cours JavaScript !").charAt(1); // retourne le caractère 'o'
var Resultat3 = Chaine.charAt(17); // retourne le caractère '!'
var Resultat4 = Chaine.charAt(18); // retourne le caractère ''
var Resultat5 = Chaine.charAt(-1); // retourne le caractère ''

6.2.2. Les méthodes charCodeAt() et fromCharCode()
Syntaxe de la méthode charCodeAt()
Chaine.charCodeAt(position)
Elle renvoie le code Unicode du caractère situé à la position donnée en paramètre.
Syntaxe de la méthode fromCharCode()
Chaine.fromCharCode(code1[, code2, …])
Elle renvoie une chaîne de caractères composée de caractères correspondant au(x) code(s)
Unicode donné(s) en paramètre.
6.2.3. La méthode concat()
Syntaxe de la méthode concat()
Chaine1.concat(Chaine2)
Elle permet de concaténer les chaînes passées en paramètre, c'est-à-dire de les joindre bout à
bout.
Exemple d’utilisation de la méthode concat()
var Chaine1 = 'Cours';
var Chaine2 = ' JavaScript';
var Resultat = Chaine1.concat(Chaine2); // retourne la chaîne 'Cours JavaScript'
6.2.4. La méthode indexOf()
Syntaxe de la méthode indexOf()
Chaine.indexOf(sous-chaîne, position)
Elle retourne la position d'une sous-chaîne (lettre ou groupe de lettres) dans une chaîne de
caractères, en effectuant la recherche de gauche à droite, à partir de la position spécifiée en
paramètre.
Exemples d’utilisation de la méthode indexOf()
var Sous_Chaine = 'Java';
var Resultat1 = Chaine.indexOf(Sous_Chaine, 2); // retourne 6
var Resultat2 = Chaine.indexOf(Sous_Chaine); // retourne 6

var Resultat3 = Chaine.indexOf(Sous_Chaine, 6); // retourne 6
var Resultat4 = Chaine.indexOf(Sous_Chaine, 7); // retourne -1
var Resultat5 = Chaine.indexOf(Sous_Chaine, -1); // retourne -1
La position indiquée en argument permet de déterminer la position du caractère à partir
duquel la recherche est effectuée. L'argument position doit être compris entre 0 et n-1. Si
cet argument est omis, la recherche débutera à la position 0.
Lorsque la recherche est infructueuse, la méthode indexOf() renvoie la valeur -1.
6.2.5. Les méthodes substring() et substr()
Syntaxe de la méthode substring()
Chaine.substring(position1, position2)
Elle retourne la sous-chaîne (lettre ou groupe de lettres) comprise entre position1 et la
position2 données en paramètre.
Exemples d’utilisation de la méthode substring()
var Resultat1 = Chaine.substring(1, 2); // retourne 'o'
var Resultat2 = Chaine.substring(2, 2); // retourne ''
var Resultat3 = Chaine.substring(5, 7); // retourne ' J'
var Resultat4 = Chaine.substring(6, 10); // retourne 'Java'
var Resultat5 = Chaine.substring(10, 20); // retourne 'Script !'
var Resultat6 = Chaine.substring(4); // retourne 's JavaScript !'
var Resultat7 = Chaine.substring(4, 0); // retourne 'Cour'
Les arguments position1 et position2 doivent être compris entre 0 et n-1.
 Si l'argument position1 est plus petit que l'argument position2, la méthode
substring() retourne la sous-chaîne commençant à position1 et s'arrêtant au
caractère situé avant position2.
 Si l'argument position1 est plus grand que l'argument position2, la méthode
substring() retourne la sous-chaîne commençant à position2 et s'arrêtant au
caractère situé avant la position1.
 Si l'argument position1 est égal à l'argument position2, la méthode substring()
retourne une chaîne vide.

Syntaxe de la méthode substr()
Chaine.substr(position1, longueur)
Elle retourne une sous-chaîne commençant à l'index dont la position et la longueur sont
données en paramètre.0
6.2.6. La méthode split()
Syntaxe de la méthode split()
Chaine.split(caractère)
Elle découpe la chaîne en fonction du caractère choisi et met le tout dans un tableau (Array).
6.2.7. Les méthodes toUpperCase() et toLowerCase()
Syntaxe de la méthode toUpperCase()
Chaine.toUpperCase()
Elle convertit tous les caractères d'une chaîne en majuscule.
Syntaxe de la méthode toLowerCase()
Chaine.toLowerCase()
Elle convertit tous les caractères d'une chaîne en minuscule.
6.2.8. Autres méthodes
Le tableau suivant contient quelques autres méthodes de l’objet String.
Autres méthodes de l’objet String
Méthode Description
Chaine.anchor("nom") Transforme le texte en ancrage HTML.
Chaine.fixed() Transforme le texte en caractères de police fixe (balise <tt>).
Chaine.big() Augmente la taille de la police.
Chaine.blink() Transforme le texte en texte clignotant.
Chaine.bold() Met le texte en gras (balise <b>).
Chaine.fontcolor(couleur)
Modifie la couleur du texte (admet comme argument la couleur en
hexadécimal ou en valeur littérale).
Chaine.fontsize(size) Modifie la taille de la police, en affectant la valeur passée en paramètre.
Chaine.italics() Transforme le texte en italique (balise <i>).

Chaine.link(URL) Transforme le texte en lien hypertexte (balise <a href>)
Chaine.small() Diminue la taille de la police.
Chaine.strike() Transforme le texte en texte barré (balise <strike>).
Chaine.sub() Transforme le texte en indice (balise <sub>).
Chaine.sup() Transforme le texte en exposant (balise <sup>).
Chaine.toSource() Renvoie le code source de création de l'objet.
Chaine.valueOf() Renvoie la valeur de l'objet String.
NB : Ces méthodes ne sont pas supportées par tous les navigateurs Web. Par exemple, la
méthode blink() n’est pas supportée par IE, Firefox, Chrome, ou Safari. Par contre, elle est
supportée par Opera.

Chapitre 7. Feuilles de style en cascade (CSS)
Chapitre 7 : Feuilles de style en cascade (CSS)
֍ Mots clés : document, styleSheets, rules, cssRules, style, setTimeout, className.
֍ Objectifs : À l'issue de ce chapitre, vous serez en mesure d' :
» Appliquer les effets des CSS à la volée.
» Accéder aux propriétés CSS avec JavaScript.
Plan du chapitre :
7.1. Accès aux styles CSS .................................................................................................... 36
7.2. Accès aux classes CSS .................................................................................................. 36
7.3. Accès aux feuilles de style individuelles....................................................................... 37
7.4. Accès aux règles de CSS individuelles.......................................................................... 38
7.5. Laisser disparaître le contenu d'un site Web ................................................................. 39

Grâce à JavaScript, les effets des CSS peuvent être appliqués à la volée.
7.1. Accès aux styles CSS
JavaScript peut définir n'importe quelle commande CSS et utilise "presque" comme propriété
le nom de la commande CSS. Un problème demeure toutefois : certains caractères, comme le
tiret, ne sont pas autorisés dans une propriété JavaScript. Mais de nombreuses commandes
CSS (font-weight par exemple) contiennent des tirets. Le langage JavaScript utilise alors
une syntaxe de type majusculeDeuxièmeMot : à l'exception du premier, chaque mot
commence par une lettre majuscule. Ainsi, la commande CSS font-weight peut être définie
à l'aide de la propriété fontWeight.
Modification d'une commande CSS
function makeBold() {
document.getElementById("para").style.fontWeight ="bold";
window.setTimeout("makeLighter();", 1000);
}
function makeLighter() {
document.getElementById("para").style.fontWeight = "lighter";
window.setTimeout("makeBold();", 1000);
}
window.onload = makeBold;
</script>
<p id="para">CSS & JavaScript</p>
7.2. Accès aux classes CSS
La manière la plus usitée d'appliquer du CSS à une page HTML consiste à utiliser les classes.
Avec JavaScript, la classe de chaque élément est accessible avec la propriété className.
Modification de la classe CSS
document.getElementById("para").className ="strong";
}

</style>
<p>CSS & JavaScript</p>
7.4. Accès aux règles de CSS individuelles
Les règles individuelles d'une feuille de style sont également accessibles par la voie de la
programmation, mais les navigateurs Web diffèrent les uns des autres. IE accepte la
propriété rules, tandis que tous les autres navigateurs utilisent la propriété cssRules. La
seule exception revient au navigateur Opera, qui n'accepte ni l'une ni l'autre.
Accès aux règles CSS
if (document.styleSheets[0].rules) {
document.styleSheets[0].rules[0].style.color = randomColor();
} else if (document.styleSheets[0].cssRules) {
document.styleSheets[0].cssRules[0].style.color = randomColor();
}
}
if (document.styleSheets[0].rules) {
} else if (document.styleSheets[0].cssRules) {
}
}
</script>
<style type="text/css" id="strong">

p {font-weight: bold;}
span {font-style: italic;}
</style>
<style type="text/css" id="weak">
p {font-weight: lighter;}
span {font-style: normal;}
</style>
<p>CSS <span>&</span> JavaScript</p>
7.5. Laisser disparaître le contenu d'un site Web
Un effet JavaScript assez commun sur le Web, et qui utilise les CSS, consiste à laisser les
éléments d'une page apparaître ou disparaître à la demande.
Réglage de la visibilité d'un élément
function showHide(show, hide) {
document.getElementById(show).style.visibility = "visible";
document.getElementById(hide).style.visibility = "hidden";
}
</script>
<p> <br /> </p>
<p id="tab1" style="position: absolute; top: 5px; left: 5px;">
Tab 1
</p>
<p id="tab2" style="position: absolute; top: 5px; left: 5px; visibility: hidden;">
Tab 2
</p>
<input type="button" value="Tab 1" onclick="showHide('tab1', 'tab2');" />
Toutefois, le positionnement absolu entraîne des différences subtiles selon les navigateurs.
Il vaut mieux utiliser une mise en page par blocs et définir la propriété display de l'élément
sur block ou none :
Réglage du mode d'affichage d'un élément
function showHide(show, hide) {
document.getElementById(show).style.display = "block";

document.getElementById(hide).style.display = "none";
}
</script>
<p id="tab1">
Tab 1
</p>
<p id="tab2" style="display: none;">
Tab 2
</p>

Chapitre 8. Les formulaires
Chapitre 8 : Les formulaires
֍ Mots clés : document, getElementById, forms, elements, this, submit.
» Valider les données d'un formulaire.
» Accéder aux éléments d'un formulaire.
» Contrôler l'envoi d'un formulaire.
Plan du chapitre :
8.1. Formulaires HTML avec JavaScript.............................................................................. 42
8.2. Accès aux champs de texte............................................................................................ 43
8.3. Accès aux cases à cocher............................................................................................... 44
8.4. Accès à des boutons radio ............................................................................................. 44
8.5. Accès à des listes de sélection ....................................................................................... 45
8.6. Accès à une liste à choix multiple ................................................................................. 46
8.7. Envoi d'un formulaire.................................................................................................... 47
8.8. Eviter les envois répétés de formulaires........................................................................ 47

Introduction
Les formulaires sont un aspect très utile du HTML lorsqu'on travaille avec les technologies
côté serveur car ils permettent de "communiquer" avec le serveur : des données sont saisies
dans le formulaire qui est ensuite envoyé au serveur.
Les formulaires HTML sont également très intéressants pour JavaScript. Leurs options sont
quelque peu limitées, mais JavaScript apporte son aide. Les données utilisateur devront être
validées, les formulaires peuvent n'accepter que certains types d'entrées, l'envoi de
formulaires peut n'être possible que lorsque certaines exigences sont respectées, etc. Tout
cela, et bien d'autres choses, est rendu possible par JavaScript.
8.1. Formulaires HTML avec JavaScript
Généralement, on accède à un élément HTML grâce à son identifiant, puis avec
document.getElementById(). Toutefois, pour les formulaires HTML, on utilisera
document.forms. En effet, on fait appel à l'attribut de nom de chaque élément de formulaire
pour l'envoyer au serveur.
document.forms représente un tableau de tous les formulaires de la page en cours. Ainsi, si la
page ne contient qu'un formulaire, on y accède par document.forms[0]. Les formulaires
peuvent aussi obtenir un nom :
<form name="mainForm">
...
</form>
On accède alors au formulaire avec document.forms["mainForm"].
Tous les éléments du formulaire sont également référencés par leurs noms, qui servent
d'indices de tableau pour sa propriété elements. Par exemple, si le premier formulaire d'une
page possède un élément portant l'attribut name="element1". Le code JavaScript suivant y
accède :
document.forms[0].elements["element1"]

Il existe d'autres manières, plus courtes, d'accéder à ces informations. Ainsi, un formulaire
nommé "mainForm" et un élément "element1" permettent ce raccourci :
document.mainForm.element1
On emploie habituellement la manière plus détaillée qui fait appel au tableau forms et plus
particulièrement au tableau elements, car elle n'est autorisée qu'avec un accès automatisé aux
éléments de formulaire.
JavaScript est capable de modifier les éléments de formulaire, d'agir sur certains événements
déclenchés et d'envoyer le formulaire (ou d'empêcher son envoi). De même, il montre toute
son utilité dans le domaine de la validation des données de formulaire mais il faut garder
toujours à l'esprit qu'il peut être désactivé : le formulaire doit donc également fonctionner sans
JavaScript.
Chaque élément de formulaire accepte la propriété form, qui pointe vers le formulaire dans
lequel il réside. Ainsi, this.form est souvent employé dans le code pour que des éléments de
champ de formulaire accordent un accès facile au formulaire de l'élément, sans avoir à
parcourir le tableau document.forms.
8.2. Accès aux champs de texte
HTML accepte trois types de champs :
 des champs de texte sur une seule ligne : <input type="text" /> ;
 des champs de texte sur plusieurs lignes : <textarea></textarea> ;
 des champs de mot de passe : <input type="password" />.
Ces champs se comportent différemment dans un navigateur Web, mais l'accès depuis
JavaScript est assez similaire pour les trois. Leur attribut value contient le texte du champ. Il
peut servir pour lire et pour écrire le texte du champ.
Le code suivant montre deux choses : comment accéder à la propriété du champ, puis
comment utiliser this.form pour offrir un accès facile au formulaire du champ.

Accès à un champ de texte
function afficherEtat(f) {
window.alert(f.elements["textfield"].value);
}
</script>
<form>
<input type="text" name="textfield" />
<input type="button" value="Afficher le texte" onclick="afficherEtat(this.form);" />
</form>
8.3. Accès aux cases à cocher
La propriété checked d’une case à cocher HTML est une valeur booléenne renvoyant true si
la case est cochée et false dans le cas contraire. Le code suivant illustre cela :
Accès à une case à cocher
window.alert("The checkbox is " + (f.elements["chkbox"].checked ? "checked." : "not checked."));
}
</script>
<form>
<input type="checkbox" name="chkbox" />
<input type="button" value="Afficher l'état" onclick="afficherEtat(this.form);" />
</form>
8.4. Accès à des boutons radio
À la différence des cases à cocher, les boutons radio HTML sont toujours présentés par
groupe. Ainsi, document.forms[nombre].elements[groupeboutonsradio] accède à
l'ensemble du groupe de boutons radio, c'est-à-dire un tableau. Chaque sous-élément de ce
tableau correspond à un bouton radio et accepte la propriété checked, laquelle fonctionne de
la même manière que celle de la case à cocher : true signifie que le bouton radio est activé et
false le contraire. L'accès à la valeur de chaque bouton est également possible : c'est la
propriété value qui s'en occupe.
Le code suivant analyse tous les boutons radio et donne leur état :

Accès à un groupe de boutons radio
var s = "";
for (var i=0; i<f.elements["radiobutton"].length; i++) {
var btn = f.elements["radiobutton"][i];
s += btn.value + ": " + btn.checked + "<br>";
}
document.getElementById('res').innerHTML = s;
}
</script>
<form>
<input type="radio" name="radiobutton" value="R" />red
<input type="radio" name="radiobutton" value="G" />green
<input type="radio" name="radiobutton" value="B" />blue
</form>
<div id="res"></div>
8.5. Accès à des listes de sélection
Une liste de sélection HTML comprend un élément <select>, qui pose les bases de la liste et
fournit son nom complet (dans son attribut name). Les éléments de liste sont représentés par
deux sections <option> et contiennent une légende (les données présentées dans le
navigateur) et une valeur (les données envoyées au serveur lorsque le formulaire est envoyé).
Deux manières d'accéder aux données de liste sont possibles :
 selectedIndex. Fournit l'indice (en commençant par 0) de l'élément de liste
actuellement sélectionné ; une valeur de -1 signifie qu'aucune valeur n'a été
sélectionnée (applicable uniquement pour les listes dont la taille est supérieure à 1).
 options. Représente un tableau comptant toutes les options de liste. Chaque option
accepte la propriété selected. Lorsqu'elle renvoie true, cela signifie que l'option de
liste est sélectionnée.
Le code suivant accède à toutes les informations importantes concernant l'option sélectionnée:
Accès à une liste de sélection
var index = f.elements["selectionlist"].selectedIndex;
if (index == -1) {
window.alert("No element selected");

} else {
var element = f.elements["selectionlist"].options[index];
window.alert("Element #" + index + " (caption: " + element.text + ", value: " + element.value + ")
selected");
}
}
</script>
<form>
<select name="selectionlist" size="3">
<option value="R">red</option>
<option value="G">green</option>
<option value="B">blue</option>
</select>
</form>
8.6. Accès à une liste à choix multiple
Lorsqu'une liste de sélection HTML récupère l'attribut multiple="multiple", il est possible
de sélectionner plusieurs éléments.
Le code suivant donne des informations sur tous les éléments de liste et indique notamment
s'ils sont sélectionnés :
Accès à une liste à choix multiples
function showStatus(f) {
var s = "";
var list = f.elements["selectionlist"];
for (var i=0; i<list.options.length; i++) {
var option = list.options[i];
s += "Element #" + i + " (" + option.text + "/" + option.value + ") " + (option.selected ? "selected." :
"not selected.") + "n";
}
document.getElementById('res').innerHTML = s;
}
</script>
<form>
<select name="selectionlist" size="3" multiple="multiple">

<option value="R">red</option>
<option value="G">green</option>
<option value="B">blue</option>
</select>
<input type="button" value="Show status" onclick="showStatus(this.form);" />
</form>
<div id="res"></div>
8.7. Envoi d'un formulaire
Généralement, un bouton d'envoi (<input type="submit" />) permet d'envoyer les
données du formulaire au serveur Web. JavaScript peut aussi employer sa méthode submit().
Cela permet au programmeur d'utiliser un lien HTML mais aussi d'augmenter la flexibilité
pour le concepteur.
Envoi d'un formulaire
<form>
<input type="hidden" name="field" value="data" />
</form>
<a href="javascript:document.forms[0].submit();"> Submit form</a>
Le code précédent ne fonctionne que lorsque JavaScript est activé.
8.8. Eviter les envois répétés de formulaires
Il existe de bonnes raisons d'empêcher le navigateur d'envoyer un formulaire, par exemple
lorsque certains champs obligatoires n'ont pas été remplis. Pour ce faire, il faut renvoyer
false dans le code de gestion de l'événement submit du formulaire :
<form onsubmit="return false;">
Bien entendu, le code doit décider, en fonction des données entrées, si le formulaire peut être
envoyé. C'est généralement une fonction personnalisée qui s'en occupe et renvoie, au final,
true ou false.
Le formulaire ne peut être envoyé que lorsque le champ de texte est rempli
<script language="JavaScript" type="text/JavaScript">
function checkform(f) {
if (f.elements["textfield"].value == "") {

return false;
} else {
return true;
}
}
</script>
<form onsubmit="return checkform(this);" action="inscription.php">
Username <input type="text" name="textfield" />
<input type="submit" value="Submit data" />
</form>
Une fois de plus, cela ne fonctionne que lorsque JavaScript est activé, raison de plus pour
valider toutes les données côté serveur.

Partie II : XML

Chapitre 9. Présentation de XML
Chapitre 9 : Présentation de XML
֍ Mots clés : XML, XLink, XPointer, XPath, XQuery, Schémas XML, DTD, XSLT.
» Situer le langage XML.
» Reconnaître les principaux langages qui font partie de l'environnement XML.
» Définir la structure d'un document XML.
Plan du chapitre :
9.1. Historique ...................................................................................................................... 51
9.2. Intérêts ........................................................................................................................... 51
9.3. Langages apparentés...................................................................................................... 52
9.4. Premier exemple : un carnet d’adresse.......................................................................... 52

Introduction
Le langage XML (eXtended Markup Language) est un format général de documents orienté
texte. Il s'est imposé comme un standard incontournable de l'informatique. Il est aussi bien
utilisé pour le stockage de documents que pour la transmission de données entre applications.
Sa simplicité, sa flexibilité et ses possibilités d'extension ont permis de l'adapter à de
multiples domaines allant des données géographiques au dessin vectoriel en passant par les
échanges commerciaux. De nombreuses technologies se sont développées autour de XML et
enrichissent ainsi son environnement.
Le langage XML dérive de SGML (Standard Generalized Markup Language) et de HTML
(HyperText Markup Language). Comme ces derniers, il s'agit d'un langage orienté texte et
formé de balises qui permettent d'organiser les données de manière structurée.
9.1. Historique
La version 1.0 de XML a été publiée en 1998 par le consortium W3C (World Wide Web
Consortium).
Une redéfinition XHTML de HTML 4.0 à travers XML a été donnée en 1999. Ensuite, une
seconde version 1.1, qui est simplement une mise à jour pour les caractères spéciaux en lien
avec Unicode, a été publiée en 2004.
9.2. Intérêts
Les caractéristiques essentielles de XML sont :
 Séparation stricte entre contenu et présentation.
 Simplicité, universalité et extensibilité.
 Format texte avec gestion des caractères spéciaux.
 Structuration forte.
 Modèles de documents (DTD et Schémas XML).
 Format libre.
Le langage XML est totalement libre car il est développé par le W3C. Chacun peut l'utiliser
sans devoir acheter une quelconque licence. Cette absence de droits favorise le

développement de logiciels libres mis à disposition de la communauté. Il existe ainsi une très
grande variété de logiciels libres autour de XML qui en couvrent les différents aspects.
9.3. Langages apparentés
La liste ci-dessous énumère les principaux langages qui font partie de l'environnement XML :
 XLink et XPointer (liens entre documents) : XML contient un mécanisme pour
matérialiser des liens entre des éléments d'un document. XLink et XPointer
permettent d'établir des liens entre documents et plus particulièrement entre un
élément d'un document et un fragment d'un autre document.
 XPath (langage de sélection) : XPath est un langage d'expressions permettant de
sélectionner des éléments dans un document XML. Il est la pierre angulaire du
langage XSLT pour la transformation de documents.
 XQuery (langage de requête) : XQuery est un langage permettant d'extraire des
informations à partir d'un ou plusieurs documents XML et de synthétiser de nouvelles
informations à partir de celles extraites. Il s'apparente à un langage d'interrogation de
bases de données et joue le rôle de SQL pour les documents XML.
 Schémas XML (modèles de documents) : Les schémas XML remplacent les DTD héritées
de SGML pour décrire des modèles de documents. Ils sont beaucoup plus souples et
beaucoup plus puissants que les DTD.
 XSLT (transformation de documents) : XSLT est un langage permettant d'exprimer
facilement des transformations complexes entre documents XML. Il s'appuie sur la
structuration forte des documents XML vus comme des arbres. Chaque transformation
est décrite par des règles pour chacun des éléments du document.
9.4. Premier exemple : un carnet d’adresse
On va stocker une liste de personnes dont on possède différentes informations (nom, courriel,
téléphone, etc.). Intuitivement, une personne est représentée par :
<personne>
<nom>Sami TABBANE</nom>
<email>sami.tabbane SUR supcom.rnu.tn</email>
<adresse>114, 2e rue à Tunis (TUNISIE)</adresse>
</personne>

Cette représentation a un gros désavantage : on ne peut différencier le nom du prénom, et on
ne peut retrouver le pays dans l'adresse. On peut alors utiliser une autre représentation :
<personne>
<nom>
<prenom>Sami</prenom>
<nom>TABBANE</nom>
</nom>
<email>
<identifiant>sami.tabbane</identifiant>
<serveur>supcom.rnu.tn</serveur>
</email>
<adresse>
<numero>114</numero>
<rue>2e rue</rue>
<ville>TUNIS</ville>
<pays>TUNISIE</pays>
</adresse>
</personne>
Maintenant qu'on a défini une personne, on va définir comment les personnes sont stockées
dans le carnet d'adresse :
<carnet_adresse>
<groupe>
<nom>Amis</nom>
<personne>...</personne>
</groupe>
<groupe>
<nom>Travail</nom>
</groupe>
<groupe>
<nom>Famille</nom>
</groupe>
</carnet_adresse>

On a regroupé les personnes dans des groupes. Ceci rajoute une information supplémentaire
sur une personne : on sait à quel groupe de personnes elle appartient. On a donné un nom au
groupe par une balise nom, mais on peut également utiliser un attribut :
<groupe nom="Amis">
...
</groupe>
<groupe nom="Famille">
...
</groupe>

Chapitre 10. Syntaxe de XML
Chapitre 10 : Syntaxe de XML
֍ Durée : 2 heures.
֍ Mots clés : nom XML, jeton XML, CDATA, xml:lang, xml:space, xml:base, xml:id.
» Analyser un document XML.
» Définir la structure d'un document XML.
» Écrire un document XML.
Plan du chapitre :
10.1. Premier exemple.......................................................................................................... 56
10.2. Caractères .................................................................................................................... 57
10.2.1. Caractères spéciaux............................................................................................... 57
10.2.2. Caractères d'espacement ....................................................................................... 57
10.2.3. Jetons et noms XML............................................................................................. 57
10.2.4. Codage .................................................................................................................. 58
10.2.5. Collations.............................................................................................................. 58
10.2.6. Normalisation........................................................................................................ 59
10.3. URI, URL et URN....................................................................................................... 59
10.4. Syntaxe et structure ..................................................................................................... 60
10.5. Composition globale d'un document ........................................................................... 60
10.6. Prologue....................................................................................................................... 61
10.7. Corps du document...................................................................................................... 62
10.7.1. Éléments................................................................................................................ 62
10.7.2. Sections littérales .................................................................................................. 63
10.7.3. Attributs ................................................................................................................ 64
10.7.4. Commentaires ....................................................................................................... 64
10.7.5. Instructions de traitement...................................................................................... 65

Introduction
La syntaxe de XML est relativement simple. Elle est constituée de quelques règles pour
l'écriture d'un entête et des balises pour structurer les données. Ces règles sont très similaires à
celles du langage HTML utilisé pour les pages web mais elles sont, en même temps, plus
générales et plus strictes.
10.1. Premier exemple
On commence par donner un premier exemple de document XML comme il peut être écrit
dans un fichier bibliography.xml. Ce document représente une bibliographie de livres sur
XML. Ce document contient une liste de livres avec pour chaque livre, le titre, l'auteur,
l'éditeur, l'année de parution, le numéro ISBN et éventuellement une URL.
<?xml version="1.0" encoding="iso-8859-1"?> 
 
<!DOCTYPE bibliography SYSTEM "bibliography.dtd"> 
<bibliography> 
<book key="Michard01" lang="fr"> 
<title>XML langage et applications</title>
<author>Alain Michard</author>
<year>2001</year>
<publisher>Eyrolles</publisher>
<isbn>2-212-09206-7</isbn>
<url>http://www.editions-eyrolles/livres/michard/</url>
</book>
<book key="Zeldman03" lang="en">
<title>Designing with web standards</title>
<author>Jeffrey Zeldman</author>
<year>2003</year>
<publisher>New Riders</publisher>
<isbn>0-7357-1201-8</isbn>
</book>
...
</bibliography> 
 Entête XML avec la version 1.0 et l'encodage iso-8859-1 des caractères.
 Commentaire délimité par les caractères .

 Déclaration de DTD externe dans le fichier bibliography.dtd.
 Balise ouvrante de l'élément racine bibliography.
 Balise ouvrante de l'élément book avec deux attributs de noms key et lang et de valeurs
Michard01 et fr.
 Balise fermante de l'élément racine bibliography.
10.2. Caractères
10.2.1. Caractères spéciaux
Les cinq caractères '<', '>', '&', ''' et '"' ont une signification particulière dans les documents
XML. Les deux caractères '<' et '>' servent à délimiter les balises, ainsi que les commentaires
et les instructions de traitement. Le caractère '&' marque le début des références aux entités
générales. Pour introduire ces caractères dans le contenu du document, il faut utiliser des
sections littérales ou les entités prédéfinies. Les caractères ''' et '"' servent également de
délimiteurs, en particulier pour les valeurs des attributs. Dans ces cas, il faut encore avoir
recours aux entités prédéfinies pour les introduire.
10.2.2. Caractères d'espacement
Chaque caractère d'espacement est équivalent à un espace et plusieurs espaces consécutifs
sont encore équivalents à un seul espace. C'est le comportement habituel des langages de
programmation classiques. Le traitement des caractères d'espacement par une application est
commandé par l'attribut xml:space. Les caractères d'espacement sont l'espace, la tabulation,
le saut de ligne et le retour chariot.
Les fins de lignes sont normalisées par l'analyseur lexical (parser). Ceci signifie que les
différentes combinaisons de fin de ligne sont remplacées par un seul caractère avant d'être
transmises à l'application. Cette transformation garantit une indépendance vis à vis des
différents systèmes d'exploitation.
10.2.3. Jetons et noms XML
Les identificateurs sont utilisés en XML pour nommer différents objets comme les éléments,
les attributs, les instructions de traitement. Ils servent aussi à identifier certains éléments par
l'intermédiaire des attributs de type ID. XML distingue deux types d'identificateurs : les

jetons et les noms XML. La seule différence est que les noms XML doivent commencer par
certains caractères particuliers.
Les caractères autorisés dans les identificateurs sont tous les caractères alphanumériques,
c'est-à-dire les lettres minuscules [a-z], majuscules [A-Z] et les chiffres [0-9] ainsi que le
tiret '-', le point '.', les deux points ':' et le tiret souligné '_'. Un jeton est une suite quelconque
de ces caractères. Un nom XML est un jeton qui, en outre, commence par une lettre majuscule
ou minuscule [a-zA-Z], le caractère ':' ou le caractère '_'.
Les deux caractères '-' et '.' ainsi que les chiffres ne peuvent pas apparaître au début des
noms. Le caractère ':' est réservé à l'utilisation des espaces de noms.
Les noms commençant par les trois lettres xml en minuscule ou majuscule sont réservés aux
usages internes de XML. Les noms commençant par xml: comme xml:base font partie de
l'espace de noms XML.
Quelques exemples d'identificateurs :
 Noms XML valides : name, id-42, xsl:template, sec.dtd-3.1 et _special_
 Jetons qui ne sont pas des noms : -name, 42, 42-id et .sect.
 Noms réservés : xml:id et xml-stylesheet
10.2.4. Codage
Les principaux codages utilisés par les documents XML sont : US-ASCII, UCS-4 ou UTF-32,
UCS-2, UTF-16, UTF-8, ISO-8859-1, ISO-8859-15.
Les logiciels manipulant des documents XML doivent gérer les codages UTF-8 et UTF-16. Les
autres codages sont facultatifs. Il est essentiel que le codage d'un document soit indiqué dans
l'entête du document.
10.2.5. Collations
Certaines ligatures comme le caractère 'œ' sont considérées par Unicode comme un seul
caractère plutôt que comme la fusion des deux caractères 'oe'. Il s'ensuit que les deux mots

cœur et coeur sont, a priori, considérés comme distincts. Ce problème est résolu par
l'utilisation de collations lors du traitement des documents.
Une collation est une collection de règles qui établissent des équivalences entre des caractères
ou des suites de caractères. Une collation peut, par exemple, déclarer que le caractère 'œ' est
équivalent aux deux caractères 'oe'. Une collation établit aussi l'ordre des caractères utilisé
pour l'ordre lexicographique.
10.2.6. Normalisation
Le même caractère peut avoir plusieurs points de code. Cette ambiguïté provient du fait
qu'Unicode a été construit en fusionnant plusieurs codages et qu'il tente de rester compatible
avec chacun d'eux.
Ce codage multiple conduit à des problèmes, en particulier pour la comparaison des chaînes
de caractères. Pour pallier à ce problème, Unicode introduit des normalisations qui
transforment les différents codages en un codage canonique.
La normalisation la plus standard est la normalisation C. La normalisation d'une chaîne de
caractères peut être obtenue avec la fonction XPath normalize-unicode().
10.3. URI, URL et URN
Les significations exactes de ces trois termes dans la terminologie XML sont :
 URI : Uniform Resource Identifier.
 URL : Uniform Resource Locator.
 URN : Uniform Resource Name.
La notion la plus générale est celle d'URI. Les URI comprennent les URL et les URN même si
certains URI peuvent être simultanément des URL et des URN. Un URI est un identifiant qui
permet de désigner sans ambiguïté un document ou plus généralement une ressource. Cet
identifiant doit donc être unique de manière universelle. Une URL identifie un document en

spécifiant un mécanisme pour le retrouver. Elle est composée d'un protocole (http, https, ftp,
file, etc.) suivi d'une adresse permettant de récupérer le document avec le protocole. Un URN
est, au contraire, un nom donné à un document indépendamment de la façon d'accéder au
document.
10.4. Syntaxe et structure
Pour qu'un document XML soit correct, il doit d'abord être bien formé et, ensuite, être valide.
La première contrainte est de nature syntaxique. Un document bien formé doit respecter
certaines règles syntaxiques propres à XML. Il s'agit, en quelque sorte, de l'orthographe
d'XML. La seconde contrainte est de nature structurelle. Un document valide doit respecter
un modèle de document. Un tel modèle décrit de manière rigoureuse comment doit être
organisé le document. Un modèle de documents peut être vu comme une grammaire pour des
documents XML. Cette possibilité d'adapter la grammaire aux données confère une grande
souplesse à XML. Il existe plusieurs langages pour écrire des modèles de document. Les DTD
(Document Type Description), héritées de SGML, sont simples mais aussi assez limitées. Les
schémas XML sont beaucoup plus puissants.
Un document XML est généralement contenu dans un fichier texte dont l'extension est .xml.
Il peut aussi être réparti en plusieurs fichiers en utilisant les entités externes ou XInclude. Les
fichiers contenant des documents dans un dialecte XML peuvent avoir une autre extension qui
précise le format. Les extensions pour les schémas XML, les feuilles de style XSLT, les
dessins en SVG sont, par exemple, .xsd, .xsl et .svg.
10.5. Composition globale d'un document
La composition globale d'un document XML est immuable. Elle comprend toujours les
constituants suivants :
 Prologue : Il contient des déclarations facultatives.
 Corps du document : C'est le contenu même du document.
 Commentaires et instructions de traitement : Ceux-ci peuvent apparaître partout
dans le document, dans le prologue et le corps.

Le document se découpe en fait en deux parties consécutives qui sont le prologue et le corps.
Les commentaires et les instructions de traitement sont ensuite librement insérés avant, après
et à l'intérieur du prologue et du corps. La structure globale d'un document XML est la
suivante :
Dans l'exemple donné au début de ce chapitre, le prologue comprend les trois premières
lignes du fichier. La première ligne est l'entête XML et la deuxième est simplement un
commentaire utilisé par l’éditeur de texte pour mémoriser le nom du fichier et sa date de
dernière modification. La troisième ligne est la déclaration d'une DTD externe contenue dans
le fichier bibliography.dtd. Le corps du document commence à la quatrième ligne du
fichier avec la balise ouvrante <bibliography>. Il se termine à la dernière ligne de celui-ci
avec la balise fermante </bibliography>.
10.6. Prologue
Le prologue contient deux déclarations facultatives mais fortement conseillées ainsi que des
commentaires et des instructions de traitement. La première déclaration est l'entête XML qui
précise entre autre la version de XML et le codage du fichier. La seconde déclaration est la
déclaration du type du document (DTD) qui définit la structure du document. La déclaration
de type de document est omise lorsqu'on utilise des schémas XML ou d'autres types de
modèles qui remplacent les DTD. La structure globale du prologue est la suivante :
L'entête XML a la forme générale suivante :
<?xml version="..." encoding="..." standalone="..." ?>

L'entête doit se trouver au tout début du document. Cet entête peut contenir trois attributs
version, encoding et standalone. Chaque attribut a une valeur délimitée par une paire
d'apostrophes ''' ou une paire de guillemets '"'.
L'attribut version précise la version d'XML utilisée. Les valeurs possibles actuellement sont
1.0 ou 1.1. L'attribut encoding précise le codage des caractères utilisé dans le fichier.
L'attribut standalone précise si le fichier est autonome, c'est-à-dire s'il existe des
déclarations externes qui affectent le document. La valeur de cet attribut peut être yes ou no
et sa valeur par défaut est no.
L'attribut version est obligatoire et l'attribut encoding l'est aussi dès que le codage des
caractères n'est pas le codage par défaut UTF-8. Quelques exemples d'entête XML sont donnés
ci-dessous :
<?xml version="1.0"?>
<?xml version='1.0' encoding='UTF-8'?>
<?xml version="1.1" encoding="iso-8859-1" standalone="no"?>
10.7. Corps du document
Le corps du document est constitué de son contenu qui est organisé de façon hiérarchique.
L'unité de cette organisation est l'élément. Chaque élément peut contenir du texte simple,
d'autres éléments, ou encore un mélange des deux. Il y a un élément spécifique appelé élément
racine qui contient l'intégralité du document.
10.7.1. Éléments
Un élément est formé d'une balise ouvrante, d'un contenu et de la balise fermante
correspondante. La balise ouvrante prend la forme <name>. Des attributs peuvent
éventuellement être ajoutés. La balise fermante prend la forme </name>. Les noms des
éléments sont des noms XML quelconques. Ils ne sont pas limités à un ensemble fixé de
noms prédéfinis comme en HTML. Le contenu d'un élément est formé de tout ce qui se trouve

entre la balise ouvrante et la balise fermante. Il peut être constitué de texte, d'autres éléments,
de commentaires et d'instructions de traitement.
Lorsque le contenu est vide, c'est-à-dire lorsque la balise fermante suit immédiatement la
balise ouvrante, les deux balises peuvent éventuellement se contracter en une seule balise de
la forme <name/>.
L'imbrication des balises doit être correcte. Si deux éléments tag1 et tag2 ont un contenu
commun, alors l'un doit être inclus dans l'autre. Autrement dit, si la balise ouvrante <tag2> se
trouve entre les deux balises <tag1> et </tag1>, alors la balise fermante </tag2> doit aussi
se trouver entre les deux balises <tag1> et </tag1>.
Tout le corps du document doit être compris dans le contenu d'un unique élément appelé
élément racine. Le nom de cet élément racine est donné par la déclaration de type de
document si celle-ci est présente. L'élément bibliography est l'élément racine de l'exemple
donné au début du chapitre.
10.7.2. Sections littérales
Les caractères spéciaux '<', '>' et '&' ne peuvent pas être inclus dans le contenu d'un document.
Ils peuvent être inclus par l'intermédiaire des entités prédéfinies.
Il est souvent fastidieux d'inclure beaucoup de caractères spéciaux à l'aide des entités. Les
sections littérales, appelées aussi sections CDATA en raison de leur syntaxe, permettent
d'inclure des caractères qui sont recopiés à l'identique. Une section littérale commence par la
chaîne de caractères '<![CDATA[' et se termine par la chaîne ']]>'. Tous les caractères qui se
trouvent entre ces deux chaînes font partie du contenu du document, y compris les caractères
spéciaux.

<![CDATA[Contenu avec des caractères spéciaux <, > et & ]]>
Une section CDATA ne peut pas contenir la chaîne de caractères ']]>' qui permet à
l'analyseur lexical de détecter la fin de la section. Il est en particulier impossible d'imbriquer
des sections CDATA.
10.7.3. Attributs
Les balises ouvrantes peuvent contenir des attributs associés à des valeurs. L'association de la
valeur à l'attribut prend la forme attribute='value' ou la forme attribute="value" où
attribute et value sont respectivement le nom et la valeur de l'attribut. Chaque balise
ouvrante peut contenir zéro, une ou plusieurs associations de valeurs à des attributs comme
dans les exemples génériques suivants :
<tag attribute="value"> ... </tag>
<tag attribute1="value1" attribute2="value2"> ... </tag>
Le nom de chaque attribut doit être un nom XML. L'ordre des attributs n'a pas d'importance.
Les attributs d'un élément doivent avoir des noms distincts. Il est donc impossible d'avoir
deux occurrences du même attribut dans une même balise ouvrante.
Il existe quatre attributs particuliers xml:lang, xml:space, xml:base et xml:id qui font
partie de l'espace de noms XML :
 xml:lang : utilisé pour décrire la langue du contenu de l'élément.
 xml:space : permet d'indiquer à une application le traitement des caractères
d'espacement.
 xml:base : permet de préciser l'URI de base d'un élément.
 xml:id : permet d'associer un identificateur à tout élément indépendamment de toute
DTD ou de tout schéma.
10.7.4. Commentaires
Les commentaires sont délimités par les chaînes de caractères '' comme en
HTML. Ils ne peuvent pas contenir la chaîne '--' formée de deux tirets '-' et ils ne peuvent
donc pas être imbriqués. Ils peuvent être présents dans le prologue et en particulier dans la

DTD. Ils peuvent aussi être placés dans le contenu de n'importe quel élément et après
l'élément racine. En revanche, ils ne peuvent jamais apparaître à l'intérieur d'une balise
ouvrante ou fermante.
10.7.5. Instructions de traitement
Les instructions de traitement sont destinées aux applications qui traitent les documents
XML. Elles sont l'analogue des directives #... du langage C qui s'adressent au compilateur.
Elles peuvent apparaître aux mêmes endroits que les commentaires à l'exception du contenu
de la DTD.
Les instructions de traitement sont délimitées par les chaînes de caractères '<?' et '?>'. Les
deux caractères '<?' sont immédiatement suivis du nom XML de l'instruction. Le nom de
l'instruction est ensuite suivi du contenu. Ce contenu est une chaîne quelconque de caractères
ne contenant pas la chaîne '?>' utilisée par l'analyseur lexical pour déterminer la fin de
l'instruction. Le nom de l'instruction permet à l'application de déterminer si l'instruction lui est
destinée.
Une feuille de style XSLT peut être attachée à un document XML par l'intermédiaire d'une
instruction de traitement de nom xml-stylesheet :
<?xml-stylesheet href="list.xsl" type="text/xsl" title="En liste"?>
L'entête XML <?xml version=... ?> ressemble à une instruction de traitement de nom xml
avec des paramètres version, encoding et standalone. Elle utilise en effet la même
syntaxe. Elle n'est pourtant pas une instruction de traitement et elle ne fait pas partie du
document.

Chapitre 11. DTD (Document type definition)
Chapitre 10 : DTD (Document type definition)
֍ Durée : 2 heures.
֍ Mots clés : DTD, DOCTYPE, ELEMENT, ATTLIST, ENTITY, #PCDATA,
NMTOKEN, NMTOKENS, CDATA, ID, IDREF, IDREFS, NOTATION, ENTITY,
ENTITIES, #REQUIRED, #IMPLIED, #FIXED.
» Distinguer les différents types de déclarations.
» Distinguer les différents types d'entités.
» Distinguer les différents types de contenus d'éléments.
» Valider un document XML par rapport à une DTD.
Plan du chapitre :
11.1. Un premier exemple .................................................................................................... 68
11.2. Déclaration de la DTD................................................................................................. 69
11.2.1. DTD interne .......................................................................................................... 69
11.2.2. DTD externe.......................................................................................................... 70
11.2.2.1. Adressée par FPI ............................................................................................ 70
11.2.2.2. Adressée par URL .......................................................................................... 70
11.2.3. DTD mixte ............................................................................................................ 71
11.3. Contenu de la DTD...................................................................................................... 71
11.4. Commentaires.............................................................................................................. 71
11.5. Entités.......................................................................................................................... 71
11.5.1. Entités générales ................................................................................................... 72
11.5.1.1. Déclaration et référence.................................................................................. 72
11.5.1.2. Entités prédéfinies.......................................................................................... 72
11.5.1.3. Entités internes ............................................................................................... 73
11.5.1.4. Entités externes............................................................................................... 73
11.5.2. Entités paramètres................................................................................................. 74

11.6. Déclaration d'élément .................................................................................................. 75
11.6.1. Contenu pur d'éléments......................................................................................... 75
11.6.2. Contenu textuel..................................................................................................... 77
11.6.3. Contenu mixte....................................................................................................... 77
11.6.4. Contenu vide......................................................................................................... 78
11.6.5. Contenu libre......................................................................................................... 78
11.7. Déclaration d'attribut ................................................................................................... 78
11.7.1. Types des attributs ................................................................................................ 79
11.7.2. Valeur par défaut................................................................................................... 79
11.8. Outils de validation...................................................................................................... 80

Introduction
Le rôle d'une DTD (Document Type Definition) est de définir précisément la structure d'un
document. Il s'agit d'un certain nombre de contraintes que doit respecter un document pour
être valide. Ces contraintes spécifient quels sont les éléments qui peuvent apparaître dans le
contenu d'un élément, l'ordre éventuel de ces éléments et la présence de texte brut. Elles
définissent aussi, pour chaque élément, les attributs autorisés et les attributs obligatoires.
Les DTD ont l'avantage d'être relativement simples à utiliser mais elles sont parfois aussi un
peu limitées. Les schémas XML permettent de décrire de façon plus précise encore la
structure d'un document. Ils sont plus sophistiqués mais plus difficiles à mettre en œuvre. Les
DTD sont donc particulièrement adaptées pour des petits modèles de documents. En
revanche, leur manque de modularité les rend plus difficiles à utiliser pour des modèles plus
conséquents.
11.1. Un premier exemple
On reprend la petite bibliographie du fichier bibliography.xml déjà utilisée au chapitre
précédent. La troisième ligne de ce fichier est la déclaration de la DTD qui référence un
fichier externe bibliography.dtd.
Le nom bibliography de l'élément racine du document apparaît dans cette déclaration juste
après le mot clé DOCTYPE.
<!DOCTYPE bibliography SYSTEM "bibliography.dtd">
On présente maintenant le contenu de ce fichier bibliography.dtd qui contient la DTD du
fichier bibliography.xml. La syntaxe des DTD est héritée de SGML et elle est différente du
reste du document XML. Il n'y a pas de balises ouvrantes et fermantes. La DTD contient des
déclarations d'éléments et d'attributs délimitées par les chaînes de caractères '<!' et '>'. Un mot
clé juste après la chaîne '<!' indique le type de la déclaration.

<!ELEMENT bibliography (book)+> 
<!ELEMENT book (title, author, year, publisher, isbn, url?)> 
<!ATTLIST book key NMTOKEN #REQUIRED> 
<!ATTLIST book lang (fr | en) #REQUIRED> 
<!ELEMENT title (#PCDATA)> 
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT url (#PCDATA)>
 Déclaration de l'élément bibliography devant contenir une suite non vide d'éléments
book.
 Déclaration de l'élément book devant contenir les éléments title, author, …, isbn et
url.
Du  Déclarations des attributs obligatoires key et lang de l'élément book.
 Déclaration de l'élément title devant contenir uniquement du texte.
11.2. Déclaration de la DTD
La déclaration de la DTD du document doit être placée dans le prologue. La DTD peut être
interne, externe ou mixte. La déclaration est introduite par le mot clé DOCTYPE et a la forme
générale suivante où root-element est le nom de l'élément racine du document.
<!DOCTYPE root-element ... >
11.2.1. DTD interne
Lorsque la DTD est incluse dans le document, sa déclaration prend la forme suivante où son
contenu est encadré par des caractères crochets '[' et ']'.
<!DOCTYPE root-element [ declarations ]>
Les déclarations declarations constituent la définition du type du document. Dans
l'exemple suivant, le nom de l'élément racine est simple. La DTD déclare en outre que cet
élément ne peut contenir que du texte (Parsed Characters DATA) et pas d'autre élément.
<!DOCTYPE simple [

<!ELEMENT simple (#PCDATA)>
]>
11.2.2. DTD externe
Lorsque la DTD est externe, celle-ci est contenue dans un autre fichier dont l'extension est
généralement .dtd.
Le document XML se contente alors de donner l'adresse de sa DTD pour que les logiciels
puissent y accéder. L'adresse de la DTD peut être donnée explicitement par une URL ou par
un FPI (Formal Public Indentifier).
11.2.2.1. Adressée par FPI
La déclaration d'une DTD externe peut utiliser un FPI pour désigner la DTD. La référence à
un FPI est introduite par le mot clé PUBLIC suivi du FPI et d'une URL délimitée par des
apostrophes ''' ou des guillemets '"'.
L'URL est utilisée dans le cas où le FPI ne permet pas à l'application de retrouver la DTD.
<!DOCTYPE root-element PUBLIC "fpi" "url">
11.2.2.2. Adressée par URL
La référence à une URL est introduite par le mot clé SYSTEM suivi de l'URL délimitée par des
apostrophes ''' ou des guillemets '"'.
<!DOCTYPE root-element SYSTEM "url">
L'URL url peut être soit une URL complète commençant par http:// ou ftp:// soit plus
simplement le nom d'un fichier local comme dans les exemples suivants :
<!DOCTYPE bibliography SYSTEM "http://www.iset.tn/Ens/bibliography.dtd">
<!DOCTYPE bibliography SYSTEM "bibliography.dtd">

11.2.3. DTD mixte
Il est possible d'avoir simultanément une DTD externe adressée par URL ou FPI et des
déclarations internes. La DTD globale est alors formée des déclarations internes suivies des
déclarations externes. La déclaration prend alors une des deux formes suivantes On retrouve
un mélange de la syntaxe des DTD externes avec les mots clés SYSTEM et PUBLIC et de la
syntaxe des DTD internes avec des déclarations encadrées par les caractères '[' et ']'.
<!DOCTYPE root-element SYSTEM "url" [ declarations ]>
<!DOCTYPE root-element PUBLIC "fpi" "url" [ declarations ]>
11.3. Contenu de la DTD
Une DTD est constituée de déclarations d'éléments, d'attributs et d'entités. Elle peut aussi
contenir des déclarations de notations. Chacune de ces déclarations commence par la chaîne
'<!' suivi d'un mot clé qui indique le type de déclaration. Les mots clés possibles sont
ELEMENT, ATTLIST et ENTITY. La déclaration se termine par le caractère '>'.
11.4. Commentaires
Une DTD peut contenir des commentaires qui utilisent la syntaxe des commentaires XML
délimités par les chaînes de caractères ''. Ceux-ci sont placés au même niveau que
les déclarations d'éléments, d'attributs et d'entités. Ils ne peuvent pas apparaître à l'intérieur
d'une déclaration.

<!ELEMENT bibliography (book)+>

<!ELEMENT book (title, author, year, publisher, isbn, url?)>
...
11.5. Entités
Les entités constituent un mécanisme hérité de SGML. Elles sont des macros semblables aux
#define du langage C. Elles permettent également de réaliser des inclusions de documents
comme la directive #include du langage C. Les entités sont définies dans la DTD du
document. Il existe deux types d'entités. Les entités générales sont destinées à être utilisées

dans le corps du document. Les entités paramètres sont destinées à être utilisées au sein de la
DTD. Le nom de chaque entité générale ou paramètre doit être un nom XML.
11.5.1. Entités générales
Les entités générales sont les entités les plus courantes et les plus utiles puisqu'elles peuvent
être utilisées dans le corps du document.
11.5.1.1. Déclaration et référence
La déclaration d'une entité commence par <!ENTITY suivi du nom de l'entité. Elle prend une
des trois formes suivantes où name est le nom de l'entité, fragment est un fragment de
document, fpi et url sont un FPI et une URL.
<!ENTITY name "fragment">
<!ENTITY name SYSTEM "url">
<!ENTITY name PUBLIC "fpi" "url">
Lorsque l'entité est déclarée avec la première syntaxe, elle est dite interne car le fragment est
explicitement donné dans la DTD du document. Lorsqu'elle est déclarée avec une des deux
dernières syntaxes, elle est dite externe car le fragment provient d'un autre document.
Une entité de nom name est référencée, c'est-à-dire utilisée, par &name; où le nom name de
l'entité est encadré par les caractères '&' et ';'. Lorsque le document est traité, la référence à
une entité est remplacée par le fragment de document correspondant. Une entité interne peut
être référencée dans les contenus d'éléments et dans les valeurs d'attribut alors qu'une entité
externe peut seulement être référencée dans les contenus d'éléments.
<tag meta="attribute: &name;">Content: &name;</tag>
11.5.1.2. Entités prédéfinies
Il existe des entités prédéfinies permettant d'inclure les caractères spéciaux '<', '>', '&', ''' et '"'
dans les contenus d'éléments et dans les valeurs d'attributs. Ces entités sont les suivantes :
Entité Caractère
< <

> >
& &
' '
" "
11.5.1.3. Entités internes
La valeur d'une entité interne est le fragment de document associé à celle-ci lors de sa
déclaration. Cette valeur peut contenir des caractères ainsi que des éléments avec leurs
balises.
Il est possible d'utiliser des entités dans la définition d'une autre entité pourvu que ces entités
soient également définies. L'ordre de ces définitions est sans importance car les substitutions
sont réalisées au moment où le document est lu par l'analyseur de l'application. Les définitions
récursives sont bien sûr interdites.
<!DOCTYPE book [

<!ENTITY mci "Michel Colucci &aka; 'Coluche'">
<!ENTITY aka "also known as">
]>
<book>&mci;</book>
11.5.1.4. Entités externes
Une entité peut désigner un fragment de document contenu dans un autre fichier. Ce
mécanisme permet de répartir un même document sur plusieurs fichiers comme dans
l'exemple suivant. La déclaration utilise alors le mot clé SYSTEM suivi d'une URL qui peut,
simplement, être le nom d'un fichier local.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE book [

<!ENTITY chapter1 SYSTEM "chapter1.xml">
<!ENTITY chapter2 SYSTEM "chapter2.xml">
]>
<book>

&chapter1;

&chapter2;
</book>
11.5.2. Entités paramètres
Les entités paramètres sont des entités qui peuvent uniquement être utilisées à l'intérieur de la
DTD. La terminologie est historique et provient de SGML. Ces entités ont le même rôle que
les entités générales. Elles sont surtout utilisées pour apporter de la modularité aux DTD. La
déclaration d'une entité paramètre prend une des trois formes suivantes où name est le nom de
l'entité, fragment est un fragment de document, fpi et url sont un FPI et une URL.
<!ENTITY % name "fragment">
<!ENTITY % name SYSTEM "url">
<!ENTITY % name PUBLIC "fpi" "url">
La seule différence avec la déclaration d'une entité générale est la présence du caractère '%'
entre le mot clé ENTITY et le nom de l'entité déclarée. Comme pour les entités générales,
l'entité est dite interne lorsqu'elle est déclarée avec la première syntaxe. Elle est dite externe
lorsqu'elle est déclarée avec une des deux dernières syntaxes.
L'entité name ainsi déclarée peut être référencée, c'est-à-dire utilisée, par %name; où le nom de
l'entité est encadré les caractères '%' et ';'.
L'exemple suivant définit deux entités paramètres idatt et langatt permettant de déclarer
des attributs id et xml:lang facilement.

<!ENTITY % idatt "id ID #REQUIRED">
<!ENTITY % langatt "xml:lang NMTOKEN 'fr'">

<!ATTLIST chapter %idatt; %langatt;>
<!ATTLIST section %langatt;>

11.6. Déclaration d'élément
Les déclarations d'éléments constituent le cœur des DTD car elles définissent la structure des
documents valides. Elles spécifient quels doivent être les enfants de chaque élément et l'ordre
de ces enfants.
La déclaration d'un élément est nécessaire pour qu'il puisse apparaître dans un document.
Cette déclaration précise le nom et le type de l'élément. Le nom de l'élément doit être un nom
XML et le type détermine les contenus valides de l'élément. On distingue les contenus purs
uniquement constitués d'autres éléments, les contenus textuels uniquement constitués de texte
et les contenus mixtes qui mélangent éléments et texte.
De manière générale, la déclaration d'un élément prend la forme suivante où element et type
sont respectivement le nom et le type de l'élément. Le type de l'élément détermine quels sont
ses contenus autorisés.
<!ELEMENT element type>
11.6.1. Contenu pur d'éléments
Le contenu d'un élément est pur lorsqu'il ne contient aucun texte et qu'il est uniquement
constitué d'éléments qui sont ses enfants. Ces enfants peuvent, à leur tour, avoir des contenus
textuels, purs ou mixtes. Un élément de contenu pur peut donc indirectement contenir du texte
si celui-ci fait partie du contenu d'un de ses descendants.
La déclaration d'un élément de contenu pur détermine quels peuvent être ses enfants et dans
quel ordre ils doivent apparaître. Cette description est indépendante du contenu de ces enfants.
Elle dépend uniquement des noms des enfants. Le contenu de chaque enfant est décrit par sa
propre déclaration. Une déclaration d'élément prend la forme suivante :
<!ELEMENT element regexp>
Le nom de l'élément est donné par l'identifiant element. L'expression rationnelle regexp
décrit les suites autorisées d'enfants dans le contenu de l'élément. Cette expression rationnelle
est construite à partir des noms d'éléments en utilisant les opérateurs ',', '|', '?', '*' et '+' ainsi
que les parenthèses '(' et ')' pour former des groupes. Les opérateurs ',' et '|' sont binaires

alors que les opérateurs '?', '*' et '+' sont unaires et postfixés. Ils se placent juste après leur
opérande, c'est-à-dire derrière le groupe auquel ils s'appliquent.
Opérateur Signification
, Mise en séquence
| Choix
? 0 ou 1 occurrence
* Répétition d'un nombre quelconque d'occurrences
+ Répétition d'un nombre non nul d'occurrences
<!ELEMENT elem (elem1, elem2, elem3)>
L'élément elem doit contenir un élément elem1, un élément elem2 puis un élément elem3
dans cet ordre.
<!ELEMENT elem (elem1 | elem2 | elem3)>
L'élément elem doit contenir un seul des éléments elem1, elem2 ou elem3.
<!ELEMENT elem (elem1, elem2?, elem3)>
L'élément elem doit contenir un élément elem1, un ou zéro élément elem2 puis un élément
elem3 dans cet ordre.
<!ELEMENT elem (elem1, elem2*, elem3)>
L'élément elem doit contenir un élément elem1, une suite éventuellement vide d'éléments
elem2 et un élément elem3 dans cet ordre.
<!ELEMENT elem (elem1, (elem2 | elem4), elem3)>
L'élément elem doit contenir un élément elem1, un élément elem2 ou un élément elem4 puis
un élément elem3 dans cet ordre.
<!ELEMENT elem (elem1, elem2, elem3)*>
L'élément elem doit contenir une suite d'éléments elem1, elem2, elem3, elem1, elem2, …
jusqu'à un élément elem3.

<!ELEMENT elem (elem1 | elem2 | elem3)*>
L'élément elem doit contenir une suite quelconque d'éléments elem1, elem2 ou elem3.
<!ELEMENT elem (elem1 | elem2 | elem3)+>
L'élément elem doit contenir une suite non vide d'éléments elem1, elem2 ou elem3.
11.6.2. Contenu textuel
La déclaration de la forme suivante indique qu'un élément peut uniquement contenir du texte.
Ce texte est formé de caractères, d'entités qui seront remplacées au moment du traitement et
de sections littérales.
<!ELEMENT element (#PCDATA)>
Dans l'exemple suivant, l'élément text est de type #PCDATA.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE texts [
<!ELEMENT texts (text)*>
<!ELEMENT text (#PCDATA)>
]>
<texts>
<text>Du texte simple</text>
<text>Une <![CDATA[ Section CDATA avec < et > ]]></text>
<text>Des entités < et ></text>
</texts>
11.6.3. Contenu mixte
La déclaration de la forme suivante indique qu'un élément peut uniquement contenir du texte
et les éléments element1, …, elementN. C'est la seule façon d'avoir un contenu mixte avec
du texte et des éléments. Dans une telle déclaration, le mot clé #PCDATA doit apparaître en
premier avant tous les noms des éléments.
<!ELEMENT element (#PCDATA | element1 | ... | elementN)*>

Dans l'exemple suivant, l'élément book possède un contenu mixte. Il peut contenir du texte et
des éléments em et cite en nombre quelconque et dans n'importe quel ordre.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE book [
<!ELEMENT book (#PCDATA | em | cite)*>
<!ELEMENT em (#PCDATA)>
<!ELEMENT cite (#PCDATA)>
]>
<book>
Du <em>texte</em>, une <cite>citation</cite> et encore du <em>texte</em>.
</book>
11.6.4. Contenu vide
La déclaration suivante indique que le contenu de l'élément element est nécessairement vide.
Cet élément peut uniquement avoir des attributs. Les éléments vides sont souvent utilisés pour
des liens entre éléments.
<!ELEMENT element EMPTY>
11.6.5. Contenu libre
La déclaration suivante n'impose aucune contrainte sur le contenu de l'élément element. En
revanche, ce contenu doit, bien entendu, être bien formé et les éléments contenus doivent
également être déclarés.
<!ELEMENT element ANY>
11.7. Déclaration d'attribut
Pour qu'un document soit valide, tout attribut présent dans la balise ouvrante d'un élément doit
être déclaré. La déclaration d'attribut prend la forme générale suivante. Cette déclaration
comprend également le type et la valeur par défaut de l'attribut. Le nom de l'attribut doit être
un nom XML.
<!ATTLIST element attribut type default>

Il est possible de déclarer simultanément plusieurs attributs pour un même élément. Cette
déclaration prend alors la forme suivante où l'indentation est bien sûr facultative.
<!ATTLIST element attribut1 type1 default1
attribut2 type2 default2
...
attributN typeN defaultN>
11.7.1. Types des attributs
Le type d'un attribut détermine quelles sont ses valeurs possibles. Les DTD proposent
uniquement un choix fini de types pour les attributs. Le type doit en effet être pris dans la liste
suivante. Les types les plus utilisés sont CDATA, ID et IDREF.
 CDATA : Ce type est le plus général. Il n'impose aucune contrainte à la valeur de
l'attribut. Celle-ci peut être une chaîne quelconque de caractères.
 NMTOKEN : La valeur de l'attribut est un jeton.
 NMTOKENS : La valeur de l'attribut est une liste de jetons séparés par des espaces.
 ID : La valeur de l'attribut est un nom XML. Un élément peut avoir un seul attribut de
ce type.
 IDREF : La valeur de l'attribut est une référence à un élément identifié par la valeur de
son attribut de type ID.
 IDREFS : La valeur de l'attribut est une liste de références séparées par des espaces.
 NOTATION : La valeur de l'attribut est une notation.
 ENTITY : La valeur de l'attribut une entité externe non XML.
 ENTITIES : La valeur de l'attribut une liste d'entités externes non XML.
11.7.2. Valeur par défaut
Chaque déclaration d'attribut précise une valeur par défaut pour celui-ci. Cette valeur par
défaut peut prendre une des quatre formes suivantes :
 "value" ou 'value' : La valeur value est une chaîne quelconque de caractères
délimitée par des apostrophes ''' ou des guillemets '"'. Si l'attribut est absent pour un
élément du document, sa valeur est implicitement la chaîne value. Cette valeur doit,
bien sûr, être du type donné à l'attribut.

 #IMPLIED : L'attribut est optionnel et il n'a pas de valeur par défaut. Si l'attribut est
absent, il n'a pas de valeur.
 #REQUIRED : L'attribut est obligatoire et il n'a pas de valeur par défaut.
 #FIXED "value" ou #FIXED 'value' : La valeur value est une chaîne quelconque
de caractères délimitée par des apostrophes ''' ou des guillemets '"'. La valeur de
l'attribut est fixée à la valeur value donnée. Si l'attribut est absent, sa valeur est
implicitement value. Si l'attribut est présent, sa valeur doit être value pour que le
document soit valide. Cette valeur doit, bien sûr, être du type donné à l'attribut.
Beaucoup d'applications ne prennent pas en compte la DTD pour traiter un document XML.
L'utilisation des valeurs par défaut est donc à éviter pour une portabilité maximale.
11.8. Outils de validation
Il existe plusieurs outils permettant de valider un document XML par rapport à une DTD. Il
existe d'abord des sites WEB dont l'avantage est une interface conviviale. On trouve par
exemple, la page de validation du W3C : [http://validator.w3.org/].
L'inconvénient majeur de ces sites WEB est la difficulté de les intégrer à une chaîne de
traitement automatique puisqu'ils requièrent l'intervention de l'utilisateur. Dans ce cas, il est
préférable d'utiliser un logiciel comme xmllint.

TD (Travaux dirigés)
TD
(Travaux
dirigés)

Faycel CHAOUA Programmation Web 2 – TD1 82
Exercice 1
Écrire un programme JavaScript qui affiche la suite des chiffres de 1 à 10.
Exercice 2
Écrire un programme JavaScript qui affiche la suite des nombres [3, 6, 9, ..., 99] en utilisant :
a. la boucle while
b. la boucle do … while
c. la boucle for
Exercice 3
Écrire un programme JavaScript qui affiche la suite des chiffres de 1 à 10 le nombre de fois
spécifié par l'utilisateur.
Exercice 4
Écrire un programme JavaScript qui effectue le calcul de nombre à la puissance k, le résultat
est représenté par puissanceK. k est positif ou nul. Les variables nombre et k sont entrées par
l'utilisateur.
Exercice 5
Écrire un programme JavaScript composé de boucles qui écrit la suite de nombres :
1,2,3,1,2,3,1,2,3.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Programmation Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 1 heure 30 min
TD N° 1

Exercice 6
1,1,1,2,2,2,3,3,3.
Exercice 7
2,3,4,3,4,5,4,5,6.
Exercice 8
Écrire un programme JavaScript qui trace des triangles d'astérisques. Ces triangles sont des
triangles rectangles dont les côtés opposés à l'hypoténuse sont égaux (même nombre
d'astérisques). La largeur de la base est entrée par l'utilisateur. Par exemple, si l'usager indique
que la base du triangle doit faire 6 astérisques de largeur, le triangle suivant est tracé :
*
**
***
****
*****
******

Exercice 1
Écrire un programme JavaScript qui saisit un jour de la semaine et une date et qui affiche un
message si le jour est vendredi et la date est 13, et un autre message dans les autres cas.
Exercice 2
Écrire un programme JavaScript qui saisit un nom de personne parmi cinq choix possibles et
qui affiche un message différent pour chacun d'eux. Ne pas utiliser de switch.
Exercice 3
qui affiche un message différent pour chacun d'eux. Utiliser un switch.
Exercice 4
Réécrire le code suivant en utilisant une structure switch :
if (logiciel = = "Photoshop") {
alert ("Retouche d'images");
} else if (logiciel = = "Flash") {
alert ("Animation et programmation web");
} else if (logiciel = = "Illustrator") {
alert ("Dessin vectoriel");
} else if (logiciel = = "Dreamweaver") {
alert ("Conception de sites Web");
} else {
alert ("Logiciel inconnu.");
}
Niveau : LMD ‒ L1
TD N° 2

Exercice 5
Réécrire le code suivant en utilisant une structure switch mettant en œuvre un minimum
d'instructions break.
if ((jour > 0) && (jour < 6)) {
alert ("C'est la semaine...");
} else if ((jour = = 6) || (jour = = 7)) {
alert ("C'est le week-end");
} else {
alert ("ERREUR");
}

Exercice 1
Écrire un programme qui affiche, dans la console du navigateur, la moyenne des 3 nombres
contenus dans un tableau. Le tableau à utiliser est : [76, 81, 98]
Exercice 2
Écrire un programme qui affiche le nom d'un mois de l'année d'après un entier saisi. Cet entier
correspond au mois (1 = janvier, 2 = février, etc.). On doit utiliser un tableau. Afficher dans
une fenêtre d'alerte le nom du mois sous forme d'une phrase complète. On doit utiliser que
deux variables.
Exercice 3
Écrire un programme qui affiche dans la console du navigateur, un message pris au hasard
dans un tableau à une dimension contenant des phrases adressées à l'utilisateur pour le flatter.
Exercice 4
Soit le tableau des 5 villes les plus peuplées au monde :
tVilles =["Tokyo","Mexico","New-York","Sao Paulo","Shangai"]
Quelle(s) instruction(s) doit on écrire pour :
a. Afficher " New-York " ?
b. Ajouter "Pékin" à la fin du tableau ?
c. Afficher le contenu du tableau ?
d. Compter et afficher le nombre d'items dans le tableau ?
Niveau : LMD ‒ L1
TD N° 3

e. Afficher le dernier item du tableau ?
Exercice 5
Développer une fonction qui permet d'afficher dans la console du navigateur, un en dessous
de l'autre, toutes les valeurs d'un tableau à une dimension qui lui est passé en paramètre.
Exercice 6
Développer une fonction qui affiche dans une fenêtre d'alerte, la somme des nombres d'un
tableau reçu en paramètre.

Exercice 1
Distinguer les noms XML corrects des noms incorrects et corriger les erreurs.
» <Drivers_License_Number>98 NY 32</Drivers_License_Number>
» <Diver's_License_Number>98 NY 32</Diver's_License_Number>
» <month-day-year>7/23/2001</month-day-year>
» <first name>Alan</first name>
» <àçttûä>øåú</àçttûä>
» <first_name>Alan</first_name>
» <month/day/year>7/23/2001</month/day/year>
» <_4-lane>I-610</_4-lane>
» <téléphone>011 33 91 55 27 55 27</téléphone>
» <4-lane>I-610</4-lane>
Exercice 2
Observer le document XML suivant :
Niveau : LMD ‒ L1
TD N° 4

1. Ce document est-il bien formé (i.e. respecte-t-il la syntaxe XML) ?
2. Sinon, corriger les erreurs.
Exercice 3
Lire les exemples suivants et vérifier si les documents XML sont bien formés :
Exemple 1 Exemple 2
Exemple 3 Exemple 4
Exemple 5 Exemple 6
Exemple 7 Exemple 8
Exemple 9 Exemple 10

Exercice 1
Soit la DTD suivante qui représente les films de cinéma. Écrire un document XML valide
implémentant cette DTD.
Exercice 2
Soit la DTD suivante qui représente une CDthèque. Écrire un document XML valide
Niveau : LMD ‒ L1
TD N° 5

TD (Travaux dirigés)
Correction
des TD

Faycel CHAOUA Programmation Web 2 – Correction du TD1 94
Exercice 1
Écrire un programme JavaScript qui affiche la suite des chiffres de 1 à 10.
Exercice 2
Écrire un programme JavaScript qui affiche la suite des nombres [3, 6, 9, ..., 99] en utilisant :
a. la boucle while
b. la boucle do … while
c. la boucle for
Niveau : LMD ‒ L1
Correction du TD N° 1

Exercice 3
Écrire un programme JavaScript qui affiche la suite des chiffres de 1 à 10 le nombre de fois
spécifié par l'utilisateur.

Exercice 4
Écrire un programme JavaScript qui effectue le calcul de nombre à la puissance k, le résultat
est représenté par puissanceK. k est positif ou nul. Les variables nombre et k sont entrées par
l'utilisateur.

Exercice 5
1,2,3,1,2,3,1,2,3.
Exercice 6
1,1,1,2,2,2,3,3,3.

Exercice 7
2,3,4,3,4,5,4,5,6.
Exercice 8
Écrire un programme JavaScript qui trace des triangles d'astérisques. Ces triangles sont des
triangles rectangles dont les côtés opposés à l'hypoténuse sont égaux (même nombre
d'astérisques). La largeur de la base est entrée par l'utilisateur. Par exemple, si l'usager indique
que la base du triangle doit faire 6 astérisques de largeur, le triangle suivant est tracé :

*
**
***
****
*****
******

Exercice 1
Écrire un programme JavaScript qui saisit un jour de la semaine et une date et qui affiche un
message si le jour est vendredi et la date est 13, et un autre message dans les autres cas.
Niveau : LMD ‒ L1

Exercice 2
qui affiche un message différent pour chacun d'eux. Ne pas utiliser de switch.
Exercice 3
qui affiche un message différent pour chacun d'eux. Utiliser un switch.

Exercice 4
Réécrire le code suivant en utilisant une structure switch :
if (logiciel = = "Photoshop") {
alert ("Retouche d'images");
} else if (logiciel = = "Flash") {
alert ("Animation et programmation web");
} else if (logiciel = = "Illustrator") {
alert ("Dessin vectoriel");
} else if (logiciel = = "Dreamweaver") {
alert ("Conception de sites Web");
} else {
alert ("Logiciel inconnu.");
}

Exercice 5
Réécrire le code suivant en utilisant une structure switch mettant en œuvre un minimum
d'instructions break.
if ((jour > 0) && (jour < 6)) {
alert ("C'est la semaine...");
} else if ((jour = = 6) || (jour = = 7)) {
alert ("C'est le week-end");
} else {
alert ("ERREUR");
}

Exercice 1
Écrire un programme qui affiche, dans la console du navigateur, la moyenne des 3 nombres
contenus dans un tableau. Le tableau à utiliser est : [76, 81, 98]
Niveau : LMD ‒ L1

Exercice 2
Écrire un programme qui affiche le nom d'un mois de l'année d'après un entier saisi. Cet entier
correspond au mois (1 = janvier, 2 = février, etc.). On doit utiliser un tableau. Afficher dans
une fenêtre d'alerte le nom du mois sous forme d'une phrase complète. On doit utiliser que
deux variables.
Exercice 3
Écrire un programme qui affiche dans la console du navigateur, un message pris au hasard
dans un tableau à une dimension contenant des phrases adressées à l'utilisateur pour le flatter.

Exercice 4
Soit le tableau des 5 villes les plus peuplées au monde :
tVilles =["Tokyo","Mexico","New-York","Sao Paulo","Shangai"]
Quelle(s) instruction(s) doit on écrire pour :
a. Afficher " New-York " ?
b. Ajouter "Pékin" à la fin du tableau ?
c. Afficher le contenu du tableau ?
d. Compter et afficher le nombre d'items dans le tableau ?
e. Afficher le dernier item du tableau ?

Exercice 5
Développer une fonction qui permet d'afficher dans la console du navigateur, un en dessous
de l'autre, toutes les valeurs d'un tableau à une dimension qui lui est passé en paramètre.

Exercice 6
Développer une fonction qui affiche dans une fenêtre d'alerte, la somme des nombres d'un
tableau reçu en paramètre.

Exercice 1
Distinguer les noms XML corrects des noms incorrects et corriger les erreurs.
» <Drivers_License_Number>98 NY 32</Drivers_License_Number>
 "Drivers_License_Number" est un nom XML.
» <Diver's_License_Number>98 NY 32</Diver's_License_Number>
 L’apostrophe est non autorisé : "Diver's_License_Number" n’est pas un nom XML.
» <month-day-year>7/23/2001</month-day-year>
 "month-day-year" est un nom XML.
» <first name>Alan</first name>
 "first name" n’est pas un nom XML. Il faut remplacer l’espace par un autre caractère
(first-name, first_name, firstname, firstName, etc.).
» <àçttûä>øåú</àçttûä>
 "àçttûä" est un nom XML.
» <first_name>Alan</first_name>
 "first_name" est un nom XML.
» <month/day/year>7/23/2001</month/day/year>
 Ce caractère « / » est non autorisé : "month/day/year" n’est pas un nom XML (month-
day-year, month_day_year, month.day.year, etc.).
» <_4-lane>I-610</_4-lane>
 "_4-lane" est un nom XML.
» <téléphone>011 33 91 55 27 55 27</téléphone>
 "téléphone" est un nom XML.
» <4-lane>I-610</4-lane>
 Un nom XML ne doit pas commencer par un chiffre : "4-lane" n’est pas un nom XML.
Niveau : LMD ‒ L1

Exercice 2
Observer le document XML suivant :
1. Ce document est-il bien formé (i.e. respecte-t-il la syntaxe XML) ?
2. Sinon, corriger les erreurs.
Le document n’est pas conforme :
 Des guillemets ouvrants sont attendus pour l'attribut "date" associé avec un type
d'élément "note".
 Le type d'élément "to" doit se terminer par la balise de fin correspondante "</to>".
 Le balisage dans le document suivant l'élément racine doit être conforme.
 Le type d'élément "note" doit être suivi par l'une ou l'autre des spécifications d'attribut,
">" ou "/>".
 Le nom de l'entité doit suivre immédiatement '&' dans la référence d'entité.
 Le type d'élément "from" doit se terminer par la balise de fin correspondante
"</from>".

Exercice 3
Lire les exemples suivants et vérifier si les documents XML sont bien formés :
Exemple 1 Exemple 2
Exemple 3 Exemple 4
Exemple 5 Exemple 6

Exemple 7 Exemple 8
Exemple 9 Exemple 10
Exemple 1
Le type d'élément "item" doit se terminer par la balise de fin correspondante "</item>".
Exemple 2
Des guillemets ouvrants sont attendus pour l'attribut "val" associé avec un type d'élément
"item".

Exemple 3
Le document est conforme.
Exemple 4
Le nom d'attribut "small" associé avec un type d'élément "font" doit être suivi par le caractère
' = '.
Exemple 5
Le type d'élément "d" doit se terminer par la balise de fin correspondante "</d>".
Exemple 6
Le document est conforme mais n’est pas valide :

 Le type d'élément "bf" doit être déclaré.
 Le contenu du type d'élément "text" doit correspondre à "EMPTY".
Exemple 7
Des guillemets ouvrants sont attendus pour l'attribut "att1" associé avec un type d'élément
"elem".
Exemple 8
Le balisage dans le document suivant l'élément racine doit être conforme.
Exemple 9
Le type d'élément "li" doit se terminer par la balise de fin correspondante "</li>".

Exemple 10
Le document est conforme.

Exercice 1
Soit la DTD suivante qui représente les films de cinéma. Écrire un document XML valide
Niveau : LMD ‒ L1

Exercice 2
Soit la DTD suivante qui représente une CDthèque. Écrire un document XML valide

Références (Bibliographie / Webographie)
Références (Bibliographie / Webographie)
[1] C. Wenz, JavaScript : L’essentiel du code et des commandes, 2e
éd. Pearson. 2007.
[2] D. Charnay et P. Chaléat, HTML et Javascript. Eyrolles, 1998.
[3] « Javascript - Les objets du noyau Javascript ». [En ligne]. Disponible sur:
http://www.commentcamarche.net/contents/581-javascript-les-objets-du-noyau-javascript.
[Consulté le: 29-déc-2017].
[4] « Javascript - Les objets du navigateur », CommentCaMarche. [En ligne]. Disponible sur:
http://www.commentcamarche.net/contents/583-javascript-les-objets-du-navigateur.
[5] « Javascript - l’objet history ». [En ligne]. Disponible sur:
http://www.commentcamarche.net/contents/575-javascript-l-objet-history. [Consulté le: 29-
déc-2017].
[6] « Javascript - L’objet String », CommentCaMarche. [En ligne]. Disponible sur:
http://www.commentcamarche.net/contents/586-javascript-l-objet-string. [Consulté le: 29-
déc-2017].
[7] O. Carton, « L’essentiel de XML : Cours XML ». 18-déc-2014.
[8] J.-L. Massat, « Présentation des DTD (“Document Type Definition”) ». [En ligne].
Disponible sur: http://jean-luc.massat.perso.luminy.univ-amu.fr/ens/xml/03-dtd.html.
[9] D. Gonzalez, « XML et DocBook, une initiation », 12-juill-2006. [En ligne]. Disponible
sur: http://www.grappa.univ-lille3.fr/polys/xml-DG/index.html. [Consulté le: 29-déc-2017].

Support du cours : Programmation Web 2

Contenu connexe

Tendances

Similaire à Support du cours : Programmation Web 2

Dernier

Support du cours : Programmation Web 2