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>

Support du cours : Programmation Web 2

Support du cours : Programmation Web 2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Support du cours : Programmation Web 2

Similaire à Support du cours : Programmation Web 2 (20)

Dernier

Dernier (19)

Support du cours : Programmation Web 2