Cours Programmation Web 2 - 2016

Ministère de l’Enseignement Supérieur de la Recherche
Scientifique
Direction Générale des Etudes Technologiques
SUPPORT DE COURS
Programmation Web 2
Natija BOUZIDI
Assistante technologue à ISET Sidi Bouzid
AU : 2015-2016
Support de Cours : Programmation Web 2 –TI1 ISET Sidi Bouzid
Avant Propos
Ce support de cours intitulé « Programmation Web 2 » est à l’intention des étudiants de

la première année en Licence Appliqués en Technologies de l’Informatique de l’Institut
Supérieur des Etudes Technologiques de Sidi Bouzid.
Le cours comporte sept chapitres qui sont reparties comme suit :
Chapitre n°1 : Introduction au langage JavaScript
Chapitre n°2 : Syntaxes de base du langage JavaScript
Chapitre n°3 : Objets prédéfinis du JS
Chapitre n°4 : Evénements et Formulaires du JS
Chapitre n°5 : Le DOM en JavaScript
Chapitre n°6 : Langage XML
Chapitre n°7 : La validation XML avec DTD
L’objectif principal est de faire apprendre aux étudiants d’utiliser le Web 2. J’introduirai dans
le Chapitre n°1 une introduction sur l’un des langages côté Client, JavaScript, j’ai présenterai
dans ce chapitre la présentation de ce langage ainsi que les fonctions d’entrée/sortie utilisées.
Dans un 2éme chapitre j’ai présenterai la syntaxe de base du JS par exemple les variables, les
structures de contrôles, les fonctions utilisateurs etc. Puis dans le chapitre n°3, j’ai introduirai
les différents objets prédéfinis du JS.
Le chapitre n°4 sera consacré aux événements JS et l’utilisation des formulaires.
Par la suite, on a un chapitre n°5 qui étudie le DOM et sa syntaxe de base en JavaScript. Les 2
derniers chapitres seront consacrés au langage XML et sa validation avec DTD.
Chaque cours sera suivi par un TD, chaque étudiant doit préparer sérieusement le TD se
rapportant à la manipulation qu’il va effectuer et ce à l’aide du cours.
Enfin, J’espérai que le présent support aura le mérite d’être un bon support pédagogique pour
l’enseignant et un document permettant une concrétisation expérimentale pour l’étudiant.
L’auteur
Natija BOUZIDI
Fiche matière
PRE REQUIS
 Programmation web1, algorithmique et structure de données 1 et Atelier
Développement Web et Multimédia I
OBJECTIFS GENERAUX
A la fin de ce module, l’étudiant doit être capable de :
 Découvrir et comprendre l'ensemble des concepts de base du langage côté client :
JavaScript.
 Etudier la syntaxe de base du JS
 ;<= Maîtriser la syntaxe d’un langage de script coté client
 Apprendre à programmer les contrôles des champs d’un formulaire.
 Comprendre des notions relatives à XML.
POPULATION
 Profil : Licence
 Spécialité : Technologies de l’informatique.
 Niveau : L1(S2)
DEROULEMENT
 Volume horaire : 1h 30 de cours intégré /semaine
 Durée : 15 semaines
EVALUATION
 Tests
 Interrogation Orale
 Devoir de contrôle et devoir de synthèse
MOYEN PEDAGOGIQUE
 Tableau
 Polycopiés de Travaux Dirigés
Table des matières

Chapitre n°1 : Introduction au langage JavaScript .................................................................................. 1
I. Le besoin en JavaScript ............................................................................................................... 2
I.1. Les défauts du langage HTML ............................................................................................ 2
I.2. Les différentes solutions proposées ..................................................................................... 2
I.3. Présentation du JavaScript ................................................................................................... 2
II. Concept de base du langage JavaScript ................................................................................... 4
II.1. Les objets JavaScript et leur hiérarchie ............................................................................... 4
II.2. Les différents emplacements du code JavaScript ................................................................ 6
II.3. Les Entrées/Sorties en JavaScript ........................................................................................ 7
III. Exercices d’application ........................................................................................................... 8
Chapitre n°2 : Syntaxes de base de JavaScript ........................................................................................ 9
I. Généralités ................................................................................................................................. 10
II. Les variables .......................................................................................................................... 10
II.1. La déclaration et l’affectation ............................................................................................ 10
II.2. Les types de variables ........................................................................................................ 10
II.3. Les booléens ...................................................................................................................... 11
II.4. Les opérateurs.................................................................................................................... 11
II.5. Les chaînes de caractères................................................................................................... 12
II.6. Les tableaux ....................................................................................................................... 12
III. Les structures de contrôle ...................................................................................................... 13
III.1. Les opérateurs................................................................................................................ 13
III.2. Les tests ......................................................................................................................... 13
III.3. Les boucles .................................................................................................................... 14
IV. Les fonctions ......................................................................................................................... 14
IV.1. Définition....................................................................................................................... 14
IV.2. Déclaration .................................................................................................................... 15
IV.3. Les fonctions dans l’en-tête ........................................................................................... 15
IV.4. L'appel d'une fonction ................................................................................................... 15
IV.5. Fonctions manipulant des valeurs ................................................................................. 15
IV.6. Variables locales et variables globales .......................................................................... 16
IV.7. Les fonctions prédéfinies ............................................................................................... 17
V. Exercices d’application ............................................................................................................. 18
Chapitre n°3 : Les objets prédéfinis du langage JavaScript .................................................................. 20
I. Notion objet ............................................................................................................................... 21
I.1. Le concept objet ................................................................................................................ 21
I.2. Création d’un objet ............................................................................................................ 21

I.3. Accès aux propriétés et aux méthodes ............................................................................... 21
II. L’objet math .......................................................................................................................... 21
II.1. Méthodes de l’objet MATH .............................................................................................. 21
II.2. Simplification .................................................................................................................... 22
III. L’objet string ......................................................................................................................... 22
III.1. Généralités ..................................................................................................................... 22
III.2. La propriété ................................................................................................................... 23
III.3. Les méthodes ................................................................................................................. 23
IV. L’objet date............................................................................................................................ 28
IV.1. Généralités ..................................................................................................................... 28
IV.2. Les méthodes ................................................................................................................. 29
V. L’objet array .............................................................................................................................. 30
V.1. Généralités ......................................................................................................................... 30
V.2. Création et affectation d’un tableau .................................................................................. 30
V.3. Propriétés et méthodes ....................................................................................................... 32
VI. L’objet image ........................................................................................................................ 33
VI.1. L’objet ........................................................................................................................... 33
VI.2. Les propriétés ................................................................................................................ 34
VI.3. Afficher une image ........................................................................................................ 35
VII. Exercices d’application ......................................................................................................... 36
Chapitre n°4 : Formulaires et événements en JavaScript ...................................................................... 39
I. Les formulaires .......................................................................................................................... 40
I.1. La balise form .................................................................................................................... 40
I.2. Champ de texte .................................................................................................................. 40
I.3. Cases à sélectionner ........................................................................................................... 42
I.4. Liste de sélection ............................................................................................................... 43
I.5. Bouton ............................................................................................................................... 43
I.6. Contrôle caché ................................................................................................................... 44
II. Les événements ..................................................................................................................... 45
II.1. Fonctionnement ................................................................................................................. 45
II.2. Le clic de souris ................................................................................................................. 45
II.3. Le chargement ................................................................................................................... 46
II.4. Le passage de la souris ...................................................................................................... 47
II.5. Le focus ............................................................................................................................. 47
II.6. Les changements ............................................................................................................... 48
II.7. La sélection........................................................................................................................ 48
II.8. L’envoi .............................................................................................................................. 48
II.9. Le reset .............................................................................................................................. 48
III. Exercices d’application ......................................................................................................... 49
Chapitre n°5 : Le DOM en JavaScript................................................................................................... 50
I. Définition................................................................................................................................... 51
II. La structure DOM ................................................................................................................. 51
III. Accès aux éléments ............................................................................................................... 52
III.1. getElementById() .......................................................................................................... 52
III.2. getElementsByTagName() ............................................................................................ 52
III.3. getElementsByName() .................................................................................................. 52
III.4. querySelector() et querySelectorAll() ........................................................................... 53
IV. Edition des éléments .............................................................................................................. 53
IV.1. Les attributs : Via l'objet Element ................................................................................. 53
IV.2. La classe ........................................................................................................................ 53
IV.3. Récupérer du HTML ..................................................................................................... 53
IV.4. innerText ....................................................................................................................... 53
V. Noeuds DOM ............................................................................................................................ 53
VI. Manipuler les éléments de l’arbre DOM ............................................................................... 55
VII. Exercices d’application ......................................................................................................... 56
Chapitre n°6 : Langage XML ................................................................................................................ 59
I. XML, qu'est ce que c'est ? ......................................................................................................... 60
I.1. Définition........................................................................................................................... 60
I.2. Exemple ............................................................................................................................. 60
II. Pourquoi XML ? .................................................................................................................... 61
II.1. Caractéristiques de HTML ................................................................................................ 62
II.2. Caractéristiques de XML................................................................................................... 62
III. Les principales utilisations de XML...................................................................................... 63
III.1. Le stockage de données pour des raisons d’archivage .................................................. 63
III.2. L’échange de données entre systèmes hétérogènes ....................................................... 63
IV. Intérêt de XML ...................................................................................................................... 63
IV.1. Séparation stricte entre contenu et présentation ............................................................ 63
IV.2. Simplicité, universalité et extensibilité .......................................................................... 64
IV.3. Format texte avec gestion des caractères spéciaux ........................................................ 64
IV.4. Structuration forte.......................................................................................................... 64
IV.5. Format libre ................................................................................................................... 65
V. Spécifications du langage XML ................................................................................................ 65

V.1. Contenu d'un document XML ........................................................................................... 65
V.2. Résumé des spécifications ................................................................................................. 66
V.3. Le prologue........................................................................................................................ 66
V.4. XML : les commentaires ................................................................................................... 66
V.5. Les balises (éléments)........................................................................................................ 67
V.6. Arbre d'éléments ................................................................................................................ 67
V.7. Les attributs ....................................................................................................................... 68
V.8. Les références d'entités ...................................................................................................... 68
VI. Exercices d’application ......................................................................................................... 69
Chapitre n°7 : La validation XML avec les DTD.................................................................................. 70
Introduction ....................................................................................................................................... 71
I. Les concepts de base des DTD .................................................................................................. 71
I.1. Les types de DTD .............................................................................................................. 71
I.2. Les règles de DTD ............................................................................................................. 72
II. Déclarations d'éléments (balises) .......................................................................................... 72
II.1. Élément texte ..................................................................................................................... 73
II.2. Élément vide ...................................................................................................................... 73
II.3. Séquence d'éléments .......................................................................................................... 74
II.4. Choix d'éléments ............................................................................................................... 74
II.5. Indicateurs d'occurrence .................................................................................................... 74
II.6. Élément quelconque .......................................................................................................... 75
II.7. Élément à contenu mixte ................................................................................................... 76
III. Déclarations d'attributs .......................................................................................................... 76
III.1. Type chaîne de caractères .............................................................................................. 77
III.2. Les valeurs énumérées ................................................................................................... 78
III.3. Les Types ID, IDREF et IDREFS ................................................................................. 78
IV. Exercices d’application ......................................................................................................... 79
Bibliographies ....................................................................................................................................... 81
Chapitre n°1 : Introduction au langage JavaScript
Objectifs spécifiques
A la fin de ce chapitre, l’étudiant doit être capable de :
 Comprendre la notion du langage côté client

 Choisir un langage côté client convenable
 Différencier entre le Web 1 et Web 2.
 Utiliser un code JavaScript
 Utiliser les fonctions d’entrée/sortie du JavaScript.
Plan du chapitre
Introduction au JS
Le besoin en JavaScript
Concept de base du langage JavaScript
Différents emplacements du code JavaScript
Les Entrées/Sorties en JavaScript
Volume horaire :
1 heure et demi
Enseignante : Mme Natija BOUZIDI 1

I. Le besoin en JavaScript
I.1. Les défauts du langage HTML
 Absence de toutes structures algorithmiques (conditionnelles ou itératives)

 Un langage de création d’interface sans aucune logique de programmation évoluée
(notion de sous programmes, gestion des évènements, variables...).
 Aucune communication avec la plateforme d’exécution (date système, le navigateur
utilisé...)
 Absence de toutes fonctionnalités de création d’animations ou de contrôle de saisie dans
un formulaire ou d’interfaçage avec une base de données.
 Absence de mécanismes de verrouillage de code source (pour pouvoir le visualiser, il
suffit d’utiliser l’option affichage code source de votre navigateur).
I.2. Les différentes solutions proposées
Pour pallier à ses lacunes deux catégories de solutions ont été proposées :
 Utilisation des langages côté client (JavaScript ou le VbScript) : ce sont des langages
qui permettent d’ajouter toutes les fonctionnalités omises au niveau du langage HTML,
tel que les structures algorithmiques à part celles qui concernent la connexion à des
bases de données et le verrouillage de code. L’avantage majeur de cette catégorie de
solutions est le fait de pouvoir exécuter le code écrit avec ses langages sans nécessiter
une installation particulière, il suffit d’avoir un navigateur web. Le JavaScript est le plus
utilisé vu sa compatibilité avec les différents navigateurs.
 Utilisation des langages côté serveur (ASP, PHP, …) : ses Langages permettent d’avoir
les mêmes fonctionnalités que les langages côte client plus la possibilité de se connecter
à des bases de données.
I.3. Présentation du JavaScript
Le langage JavaScript est un langage de script développé par les sociétés Netscape et Sun
Microsystems vers la fin de l'année 1995. Il s’agit d’un langage interprété, qui permet de réaliser
de la programmation multimédia dynamique.
Ce langage permet d’introduire de l'interactivité avec les pages HTML, et effectuer des
traitements simples sur le poste de travail de l'utilisateur.
Contrairement à ce que pourrait laisser penser son nom, JavaScript n’est pas apparenté avec le
langage Java. Il vaut mieux considérer qu’il s’agit de deux langages complètement différents.

Pour programmer avec JavaScript, il faut introduire de petits programmes, appelés SCRIPTS,
dans les pages HTML.
C'est un langage basé sur des objets, très simple et conçu, en principe, pour des non spécialistes.
Les principales caractéristiques et avantages de ce langage sont:
 JS est un langage de programmation structurée qui concourt à enrichir le HTML, à le
rendre plus "intelligent" et interactif.
 Le code JS est intégré complètement dans le code HTML, et interprété par le navigateur
client ;
 JS comporte une syntaxe intégrant la notion de programmation objet (limité aux objets
simples : String, Date, Image, Tableau, … ).
 JS contient des gestionnaires d'événement : il reconnaît et réagit aux demandes de
l'utilisateur, comme un clic de la souris, une validation de formulaire, etc...
Mais c'est un langage limité :
 ce n'est pas un langage de programmation à part entière, indépendant.
 c'est un langage de script, dépendant de HTML, c'est une extension de HTML.
 ce n'est pas véritablement un langage orienté objet (pas d'héritage de classe, ni de
polymorphisme...)
Le langage JavaScript est un langage interprété, il n’a donc pas besoin d’être compilé ;
en revanche, il est nécessaire de disposer d’un interpréteur JavaScript pour pouvoir exécuter
des scripts JavaScript. Comme c’est la machine cliente qui se charge du traitement JavaScript,
c’est elle qui doit donc disposer d’un interpréteur JavaScript.

II. Concept de base du langage JavaScript
II.1. Les objets JavaScript et leur hiérarchie
Au niveau du JavaScript, les différentes fonctionnalités offertes sont accessibles à travers

un ensemble d’objets intrinsèques prédéfinis. Les objets JavaScript peuvent être répartis en 2
catégories :
 Les objets d’interface : permettent de gérer les aspects visuels de différents contrôles
graphiques pouvant se trouver au niveau d’une interface.
On peut citer comme exemple : l’objet window, document, button, radio, checkbox...etc.
 Les objets bibliothèques de propriétés et de fonctions prédéfinis : permettent de fournir

les différentes ressources logicielles requises pour la programmation.
Ces objets sont : L’objet string, math, date, navigator, array, et object.
II.1.1. La hiérarchie des objets d’interface
JavaScript divise une page web en objets et surtout va permettre d'accéder à ces objets,
d'en retirer des informations et de les manipuler.
Chaque page web s'affiche dans une fenêtre  C'est l'objet fenêtre (window).
Dans chaque fenêtre, il y a un document Html  C'est l'objet document.
Autrement dit l'objet fenêtre contient l'objet document, qui lui-même peut contenir autre objet.
Exemple :
Voyons une illustration des différents objets qu'une page peut contenir.
Dans ce document, on trouve un formulaire au sens Html  C'est l'objet formulaire. Autrement
dit, l’objet fenêtre contient un objet document qui lui contient un objet formulaire.
Dans ce document, on trouve trois objets. Des boutons radio, un bouton classique et une zone
de texte. Ce sont respectivement l'objet radio, l'objet bouton, l'objet texte.

Pour accéder à un objet, il faudra donner le chemin complet de l'objet en allant du

contenant le plus extérieur à l'objet à l'objet référencé.
Soit par exemple pour l’objet bouton radio:
(window).document.form.radio[0].
Nous avons mis l'objet window entre parenthèses car comme il occupe la première place dans
la hiérarchie, il est repris par défaut par Javascript et devient donc facultatif.
II.1.2. Les propriétés des objets
Une propriété est un attribut, une caractéristique, une description de l'objet. Les objets
JavaScript ont des propriétés personnalisées. Dans le cas des boutons radio, une de ses
propriétés est, par exemple, sa sélection ou sa non-sélection (checked en anglais).
En JavaScript, pour accéder aux propriétés, on utilise la syntaxe :
Nom_de_l'objet.nom_de_la_propriété
Dans le cas du bouton radio, pour tester la propriété de sélection, on écrira :
document.form.radio[0].checked
II.1.3. Les méthodes des objets

A chaque objet JavaScript, le concepteur du langage a prévu un ensemble de méthodes
(ou fonctions dédiées à cet objet) qui lui sont propres.
Par exemple l’objet document, JavaScript a dédié la méthode "écrire dans le document", c'est
la méthode write(). La syntaxe est assez simple soit :
document.write("votre texte");
On peut aussi écrire une variable, soit la variable résultat,
document.write(resultat);
Pour associer du texte (chaînes de caractères) et des variables (concaténation), on utilise
l'instruction :
Res=33 ;
document.write("Le résultat est " + res);
On peut utiliser les balises Html pour agrémenter ce texte

document.write("<B>Le résultat est</B>" + res); ou
document.write ("<B>" + "Le résultat est " + "</B>" + res)
document.write("<FONT COLOR='red'>Le résultat est"+ res +"</FONT>");

Remarque :
La méthode writeln() est fort proche de write() à ceci près qu'elle ajoute un retour chariot à la
fin des caractères affichés par l'instruction
II.2. Les différents emplacements du code JavaScript
D’abord il faut préciser que rien n'interdit de mettre plusieurs scripts dans une même page
Html. En effet, on peut inclure un ou plusieurs codes JavaScript entre les deux balises<BODY>
et </BODY> ou même entre le <HEAD> et </HEAD>.
Ce dernier emplacement est généralement utilisé pour la déclaration des fonctions.
II.2.1. Utilisation d’un même fichier HTML

Un exemple illustratif :
<HTML>
<HEAD><TITLE> Exemple </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function fin() {window.close() ; }
</SCRIPT>
</HEAD>
<BODY>
document.write("vous pouvez fermer cette fenêtre en cliquant") ;
</SCRIPT>
<A HREF="#" onClick="fin()"> ici </A><BR>
<A HREF="#" onMouseOver="fin()"> cela </A>
</BODY><
/HTML>
Les différentes solutions permettant l’insertion du code JavaScript dans une page HTML sont :
 La première consiste à insérer des instructions JavaScript entre
<SCRIPT>....</SCRIPT> dans la partie <BODY> et </BODY> ;
 La seconde consiste à déclarer des fonctions puis les appeler entre <BODY> et
</BODY> ;
 La troisième à utiliser un des gestionnaires d’évènements, rattachés aux balises HTML,
pour appeler des fonctions préalablement définies.

II.2.2. Extension .js pour scripts externes

Il est possible d'utiliser des fichiers externes pour les programmes JavaScript. On peut
ainsi stocker les scripts dans des fichiers distincts (avec l'extension .js) et les appeler à partir
d'un fichier Html. La balise devient :
<SCRIPT LANGUAGE='javascript' SRC='nomdefichier.js'></SCRIPT>
Exemple: Le fichier exp1.html :
<HTML>
<HEAD><TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="bib.js"> </SCRIPT>
</HEAD>
<BODY>vous pouvez fermer cette fenêtre en cliquant
<A HREF="#" onClick="fin()"> ici </A>
</BODY>
</HTML>
Le fichier bib.js :
function fin(){window.close()}
La déclaration de fonctions JavaScript peut se faire :
 Entre <HEAD> et </HEAD>
 Entre <BODY> et </BODY>
 Dans un fichier texte externe, avec l'extension .js, à inclure par la suite dans les
fichiers HTML.
II.3. Les Entrées/Sorties en JavaScript
Dans le langage JavaScript, les opérations d’Entrées/Sorties sont utilisées comme suit :
 L’entrée (lecture) : est faisable soit avec la méthode prompt de l’objet window, soit à
l’aide d’objets graphiques du formulaire HTML.
 La sortie (écriture) : est possible en utilisant la méthode write de l’objet document, la
méthode alert de l’objet window ou à l’aide d’objets graphiques du formulaire HTML.
Syntaxes :
L’entrée :
nom_variable = prompt("texte de la boite d'invite","valeur par défaut");

La sortie :
document.write(" message " + nom_variable) ;
Alert(" message " + nom_variable) ;
Exemples
A=prompt("Donner votre numéro ","");
Document.write("Votre moyenne en Programmation Web2 est ="+M);
alert("Votre moyenne en Programmation Web2 est = "+M);
Remarque :
Les Entrées/Sorties à l’aide des objets graphiques des formulaires seront traitées ultérieurement.
III. Exercices d’application
Exercice n°1 :
Écrire un programme HTML contenant un script JavaScript qui affiche le message

"Bonjour tout le monde !" sur la page.
Exercice n°2 :

d’Alert "Bonjour tout le monde !".
Exercice n°3 :

"Bonjour tout le monde !" sur la page, utiliser un fichier .js contenance le code JavaScript.

Chapitre n°2 : Syntaxes de base de JavaScript
 Comprendre la syntaxe de base du langage JavaScript

 Utiliser un code JavaScript
 Utiliser les fonctions du JavaScript.
Plan du chapitre
Syntaxe de base du JS
Les variables et les opérateurs de base en JS
Les tableaux et les chaines de caractère en JS
Les structures de contrôles : les tests et les boucles
Les fonctions en JS : fonction prédéfini, fonction utilisateur
Volume horaire :
3 heures

I. Généralités
Le langage JavaScript a une syntaxe qui se rapproche des langages C/C++ :
 Le JavaScript est sensible à la casse : la variable « A » n’est pas la même que « a ».
 Comme en langage C, chaque instruction se termine par un point-virgule (;).
 Un nombre à virgule (réel) est séparé par un point (.) et non par une virgule (12.75).
 Pour mettre en commentaire toute une ligne on utilise le double slach (//commentaires).
 Pour mettre un commentaire sur plusieurs lignes, on utilise le */ et le /*.
 Les niveaux d’imbrication de boucle sont indiquées avec les caractères ‘{’ et ‘}’ ;
 Pour que l’interpréteur JavaScript puisse reconnaître du code JavaScript, on l’insère
dans la page HTML à l’aide de la balise <script>.
II. Les variables
En JavaScript, le type d’une variable n’est pas explicité. Le type de la variable est donc
fixé en fonction de son contenu.
II.1. La déclaration et l’affectation
 La déclaration : consiste à donner un nom à la variable ; Le mot-clé var permet de déclarer

une ou plusieurs variables.
 L’affectation : consiste à donner une valeur à la variable. Après la déclaration de la
variable, il est possible de lui affecter une valeur par l'intermédiaire du signe d'égalité (=).
 Si une valeur est affectée à une variable sans que cette dernière ne soit déclarée, alors
JavaScript la déclare automatiquement.
Exemple:
var i, j, k; //Déclaration de i, de j et de k.
i = 1; //Affectation de i.
var prix = 0; //Déclaration et affectation de prix.
II.2. Les types de variables
Les types disponibles en JavaScript sont classiques :

 boolean :booléen, ex. : var isOK = true ;
 number : nombre entier ou réel, ex. : var nb = 15;
 string : chaîne de caractère, ex. : var nom = "Jean";
 Array: tableau, liste de valeur, ex. : var tab = new array(12,4,2) ;
 objet: objet (au sens programmation orientée objet).

II.3. Les booléens
Ils ne peuvent prendre que deux valeurs: true ou false.
II.4. Les opérateurs
Comme tout langage informatique, JS possède des opérateurs pour effectuer les calculs.
On prend dans les exemples, x=11 et y=5 ;
II.4.1. Les opérateurs de calcul

Les opérateurs de calcul dans JavaScript sont présentés dans le tableau suivant :
Signe Nom Signification Exemple Résultat

+ Plus Addition x+3 14
- Moins Soustraction x–3 8
* multiplié par multiplication x*2 22
/ divisé par Division x/2 5.5
% Modulo reste de la division par x % 5 1
= Affectation a la valeur x=5 5
II.4.2. Les opérateurs de comparaison

Les opérateurs de comparaison dans JavaScript sont présentés dans le tableau suivant :
Signe Nom Exemple Résultat

== Egal x == 11 true
< Inférieur x < 11 false
<= Inférieur ou égal x <= 11 true
> Supérieur x > 11 false
>= Supérieur ou égal x >= 11 true
!= Différent x != 11 false
Ces opérateurs seront utilisés dans les boucles conditionnelles. Le résultat s’exprime alors en
valeur booléenne.
II.4.3. Les opérateurs associatifs

Les opérateurs associatifs dans JavaScript sont présentés dans le tableau suivant :
Signe Description Exemple Signification Résultat

+= plus égal x += y x=x+y 16

-= moins égal x -= y x=x–y 6

*= multiplié égal x *= y x=x*y 55
/= divisé égal x /= y x=x/y 2.2
Ces opérateurs permettent une incrémentation ou une décrémentation autre que 1.
II.4.4. Les opérateurs logiques

Les opérateurs logiques dans JavaScript sont présentés dans le tableau suivant :
Signe Nom Exemple Signification

&& Et (condition1) && (condition2) condition1 et condition2
|| Ou (condition1) || (condition2) condition1 ou condition2
On utilisera ces opérateurs dans les boucles conditionnelles principalement. Chaque
condition correspondant à une expression avec un opérateur de comparaison. Ces opérateurs
fonctionnent comme un ET logique et un OU logique.
II.4.5. Les opérateurs d'incrémentation

Les opérateurs d’incrémentation dans JavaScript sont présentés dans le tableau suivant :
Signe Description Exemple Signification Résultat

x++ incrémentation y = x++ y =x+1 6
x-- décrémentation y= x-- y =x–1 4
II.5. Les chaînes de caractères
Les chaînes de caractères peuvent être délimitées aussi bien par le caractère « ' ' »
(apostrophe) que par le caractère « " " » (guillemets).
On peut concaténer les chaînes facilement avec l’opérateur ‘+’ (plus).
Certains caractères peuvent être insérés dans les chaînes de caractères : le retour arrière (\b), le
saut de page (\f), le saut de ligne (\n), l’entrée (\r), la tabulation (&) et l’apostrophe (\’).
II.6. Les tableaux
On peut définir des tableaux grâce au mot clé Array. Plus qu’un mot clé, il s’agit en fait
d’un objet. Pour définir un tableau, on effectue donc une instanciation de la classe Array (avec
le mot clé new ).
Exemple:
var tab1 = new Array();
var tab2 = new Array('Jean','Michel');
var tab3 = new Array(2);

tab3[0] = 'Jean';
Les tableaux sont dynamiques, c’est-à-dire que la taille s’adapte automatiquement en
fonction du nombre de valeurs enregistrées. On peut aussi définir des tableaux associatifs, ainsi
que des tableaux multi-dimensions.
III. Les structures de contrôle
Elles sont identiques au langage C.
III.1. Les opérateurs
 opérateurs de tests : ==, !=, >, <, >=, <= ;

 opérateurs logiques : AND ou &&, OR ou ||, NOT ou !, XOR ou ^^.
Le résultat obtenu est un booléen.
III.2. Les tests
III.2.1. Test simple

On réalise un test simple avec l’instruction if () éventuellement associée avec l’instruction
else, suivant la syntaxe :
if (condition) {
/* instructions si condition validée */
}
else {
/* instructions si condition invalidée */
}
Exemple:
x = prompt ("votre age?","age");
if ( x < 40) {
alert ('vous êtes jeune') ;
}
else {
alert ('vous êtes vieux') ;
}
III.2.2. Test multiple

On réalise un test multiple avec les instructions switch et case éventuellement associées
avec l’instruction default, suivant la syntaxe :
switch (variable) {
case valeur1 : /* instructions si variable vaut valeur1 */
break
case valeur2 : /* instructions si variable vaut valeur2 */
break
...
default : /* instructions si variable ne vaut aucune des valeurs */

III.3. Les boucles
III.3.1. Boucle « tant que… faire… »

On réalise une boucle « tant que » (répétition avec aucune exécution au minimum) avec
l’instruction while (), suivant la syntaxe :
while (condition) {
/* instructions */
}
III.3.2. Boucle « répéter… jusqu’a »

On réalise une boucle « répéter tant que » (répétition avec aucune exécution au minimum)
avec les instructions do et while (), suivant la syntaxe :
do {
/* instructions */
}
while (condition);
III.3.3. Boucle « pour… faire »

On réalise une boucle « pour » (répétition contrôlée) avec l’instruction for (), suivant la
syntaxe :
for (initialisation ; condition ; incrémentation ou décrémentation) {
/* instructions */
}
Exemple :
for (i = 0; i < 10; i++) {
document.write(i + " ");
}
IV. Les fonctions
IV.1. Définition
C’est un groupe d’instruction prédéfini et exécuté lorsqu’il est appelé et que l’on peut
appeler plusieurs fois.
En JavaScript, il existe deux types de fonctions :

 les fonctions propres à JavaScript, appelées méthodes. Elles sont associées à un objet
en particulier.
 les fonctions que vous définissez vous-même. Ce sont celles qui nous intéressent ici.
IV.2. Déclaration
Pour déclarer ou définir une fonction, on utilise le mot-clé function.

La syntaxe d'une déclaration de fonction est la suivante :
Syntaxe :
function nom_de_la_fonction (arguments) {
code des instructions
}
Le nom d’une fonction suit les mêmes règles que celui d’une variable. Chaque nom de
fonction doit être unique dans un même script. Les parenthèses sont obligatoires même si il n’y
a pas d’arguments, puisque JavaScript reconnaît une fonction grâce à elles.
IV.3. Les fonctions dans l’en-tête
Il est plus prudent de placer les déclarations de fonctions dans l’en-tête <head>…</head>
pour qu’elles soient prises en compte par l’interpréteur avant leur exécution dans le corps de
la page <body>…</body>
IV.4. L'appel d'une fonction
Syntaxe :
nom_de_la_fonction();
Il faut que la fonction ait été définie avant l’appel, étant donné que l’interpréteur lit le
script de haut en bas.
IV.5. Fonctions manipulant des valeurs
IV.5.1. Passer une valeur à une fonction

On peut passer des valeurs à une fonction. On parle alors de paramètres. Pour passer un
paramètre à une fonction, on fournit un nom d'une variable dans la déclaration de la fonction.
On peut passer plusieurs paramètres à une fonction, en séparant les paramètres par des virgules.
Syntaxe :
function nom_de_la_fonction(arg1, arg2, arg3) {
instructions
}

Exemple:
function cube(nombre) {
y = nombre*nombre*nombre;
return y; //retour de valeur
}
x = cube(5); //appel avec paramètre
document.write(x); //résultat
IV.5.2. Retourner une valeur

Une fonction peut retourner une valeur. Il suffit alors de placer le mot-clé return suivi de
la valeur ou de la variable à retourner.
Exemple:
function cube(nombre) { //Définition de la fonction
var c = nombre*nombre*nombre ;
return c; //Retour du cube du paramètre
}
var x = cube(5) ; // appel avec paramètre
document.write (x) ; //affichage
NB : Le mot-clé return est facultatif.
IV.6. Variables locales et variables globales
Une variable déclarée dans une fonction par le mot-clé var aura une portée limitée à cette
seule fonction. On l'appelle donc variable locale et ne pourra être utilisé dans le reste du script.
Exemple:
var c = nombre*nombre*nombre ;
}
Si la variable est déclarée sans utiliser le mot var, sa portée sera globale.
Les variables déclarées tout au début du script, en dehors et avant toutes fonctions, seront
toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle.
Exemple:
var cube=1
var cube = nombre*nombre*nombre ;
}

IV.7. Les fonctions prédéfinies
IV.7.1. eval
 Cette fonction exécute un code JavaScript à partir d'une chaîne de caractères.
...
function evaluation() {
document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }
</SCRIPT>
...
<FORM NAME="formulaire">
Saisissez une expression mathématique : <INPUT TYPE="text" NAME=saisie
MAXLENGTH=40 SIZE=40>
<INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()">
<INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40>
</FORM>...
IV.7.2. isFinite
 Détermine si le paramètre est un nombre fini. Renvoie false si ce n'est pas un
nombre ou l'infini positif ou infini négatif.
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false
IV.7.3. isNaN
 détermine si le parametre n’est pas un nombre (NaN : Not a Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false
IV.7.4. parseFloat
 analyse une chaîne de caractères et retourne un nombre décimal.
 Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
IV.7.5. parseInt
 analyse une chaîne de caractères et retourne un nombre entier de la base spécifiée.
 La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2
(binaire).

var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
IV.7.6. Number
 convertit l'objet spécifié en valeur numérique
var jour = new Date("December 17, 1995 03:24:00"); /*converit la date en millisecondes*/
alert (Number(jour));
IV.7.7. String
 convertit l'objet spécifié en chaîne de caractères
jour = new Date(430054663215); /*Convertit le nombre en date Mois jour, Annéee etc.*/
alert (String(jour));
IV.7.8. Escape
 retourne la valeur hexadécimale à partir d'une chaîne de caractère codée en ISO-
Latin-1.
escape("!&") //retourne %21%26%
V. Exercices d’application
Exercice n°1:
Créer un document HTML contenant un script JavaScript qui permet d'entrer un prix hors taxe
puis calcule et affiche le prix TTC pour un taux de TVA de 18%.
Exercice n°2 :
Écrire un programme HTML contenant un script JavaScript qui demande trois nombres a, b et
c et qui effectue une permutation circulaire, donc rend c, a, b (la valeur de c doit être dans la
variable a, la valeur de a dans la variable b et la valeur b dans la variable c).
Exercice n°3 :
Écrire un programme HTML contenant un script JavaScript qui demande deux nombres et rend
le plus grand.
Exercice n°4 :
Écrire un programme HTML contenant un script JavaScript qui demande le nombre de notes,
puis calcule la moyenne.
Exercice n°5 :
Écrire un programme HTML contenant un script JavaScript qui affiche tous les nombres
impairs inferieurs à N après avoir demandé N.
Exercice n°6 :
Écrire un programme HTML contenant un script JavaScript faisant apparaitre les nombres
premiers compris entre 0 et 100.
Exercice n°7 :
Ecrire en JavaScript une fonction qui permet de tester si un nombre donnée est premier ou non.
(Si nombre premier la fonction retourne « true », si non retourne « false »)
Exercice n°8 :
Ecrire en JavaScript une fonction Somme et multiplie qui permet de calculer la somme et la
multiplication des entiers de 0 à n. (Écrire les deux fonctions de deux façons (sans et avec
argument)).
Exercice n°9 :
Ecrire en JavaScript une fonction qui retournera la racine quatrième de la valeur passée en
argument.
Exercice n°10 :
Ecrire une fonction qui permette de donner la factorielle d’un nombre positif de trois façon, à
l'aide d'une boucle for, boucle while puis de manière récursive.
Explication :
factorielle(n) = 1×2×3×4×...×n = n!
Est définie récursivement par 0! = 1 et lorsque n>0 par n! = n × (n-1)!

Chapitre n°3 : Les objets prédéfinis du langage

JavaScript
 Comprendre la notion d’un objet en JS

 Utiliser un objet en JS
 Connaitre les objets prédéfinis en JS
Plan du chapitre
Objet en JavaScript
Objet String
Objet Date
Objet Array
Objet Image
Volume horaire :
4 heure et demi

I. Notion objet
I.1. Le concept objet
Un objet, en général, possède des caractéristiques et des compétences. On peut voir ces
caractéristiques et utiliser les compétences. En informatique, un objet possède des variables et
des fonctions, qui permettent de décrire son comportement. Ces variables sont appelées
propriétés et ces fonctions sont appelées méthodes. De cette façon, on peut voir les propriétés
et utiliser les méthodes.
I.2. Création d’un objet
Un objet est créé en utilisant une fonction spéciale de la classe, précédée du mot new.
Cette fonction est appelée constructeur, et porte le nom de la classe. Un objet est appelé
instance de la classe.
Syntaxe :
var objet = new classe ();
Exemple:
var montableau = new Array ();
I.3. Accès aux propriétés et aux méthodes
On accède aux propriétés, et aux méthodes, d’un objet en accolant l’objet et sa propriété
avec l’opérateur « . ».
Syntaxe :
objet.propriété
objet.méthode()
II. L’objet math
II.1. Méthodes de l’objet MATH
Ces méthodes correspondent à des fonctions mathématiques. Ces fonctions

mathématiques usuelles ont été transcrites en langage JS à travers l’objet Math. La plupart des
fonctions s’utilisent selon la même syntaxe.
Syntaxe :
var1 = math.fonction(paramètres) ;
Par exemple, alert(Math.max(1,2)) renvoie 2.
II.1.1. Fonctions diverses

Ces fonctions étant simples, je ne fournirai pas d’exemples.
 abs(x) : renvoie la valeur absolue de x.

 ceil(x) : renvoie l’entier supérieur à x.

 floor(x) : renvoie l’entier inférieur à x.
 round(x) : renvoie l’entier le plus proche de x.
 max(x,y) : renvoie le plus grand nombre entre x et y.
 min(x,y) : renvoie le plus petit nombre entre x et y.
 pow(x,y) : renvoie le nombre x à la puissance y.
 random(x,y) : renvoie un nombre aléatoire entre 0 et 1.
 sqrt(y) : renvoie la racine carrée de x.
II.1.2. Fonctions trigonométriques

sin(x), cos(x), tan(x), atan(x)
II.1.3. Fonctions logarithmiques

exp(x), log(x)
II.1.4. Constantes
Math.PI, Math.LN2, Math.LN10, Math.E, Math.LOG2E, Math.LOG10E
II.2. Simplification
Si vous utilisez beaucoup l’objet math, l’écriture deviendra vite pénible. Il est possible de
ne pas avoir à écrire le mot "Math" à chaque fois. Il suffit d’encadrer la zone de code par des
accolades et l’expression with(Math).
Syntaxe :
with (Math) {
code...
}
Exemple :
with (Math) {
x = sqrt (238) ;
y = sin (x) ;
document.write(y) ;
}
III. L’objet string
III.1. Généralités
Un objet string est une chaîne de caractères. Il possède une propriété et plusieurs
méthodes. Cette classe permet la manipulation des caractères qui s’avère très utile en JS. Il est
à préciser que l’objet string ne se construit pas comme les autres objets. Une chaîne de caractère
est un objet string.
III.2. La propriété
Il s’agit de la longueur de la chaîne, "length".
Syntaxe :
variable1 = variable2.length ;
variable = (“chaine”).length ;
Exemple:
x = "Mon château" ;
y = x.length ;
document.write(y) ;
III.3. Les méthodes
III.3.1. CharAt ()
Cette méthode renvoie le caractère situé à la position x fournie en paramètre. Le numéro
de la position est compris entre 0 et la longueur de la chaîne –1.
Syntaxe :
chaine1 = chaine2.charAt(x) ;
chaine1 = (“chaine”).charAt(x) ;
chaine1 = charAt(chaine2,x) ;
Exemple:
x = "Mon Château" ;
y = x.charAt(4) ;
document.write(y) ;
III.3.2. IndexOf ()
Cette méthode renvoie la première position d’une chaîne partielle dans une autre chaîne
en partant de gauche, à partir de la position x indiquée en paramètre. Si elle n’est pas présente,
la méthode renvoie –1. Le numéro de la position est compris entre 0 et la longueur de la chaîne
–1.
Syntaxe :
variable = chaine.indexOf (chaine_partielle, x)
Exemple:
x = "maman" ;
y = x.indexOf("ma",0) ;
document.write(y) ;
III.3.3. LastIndexOf ()
Elle renvoie la première position d’une chaîne partielle dans une autre chaîne en partant
de gauche, à partir de la position x indiquée en paramètre. Si elle n’est pas présente, la méthode
renvoie –1.
Le numéro de la position est compris entre 0 et la longueur de la chaîne –1.

Syntaxe :
variable = chaine.lastIndexOf (chaine_partielle, x)
Exemple:
x = "maman" ;
y = x.lastIndexOf("ma",4) ;
document.write(y) ;
III.3.4. Substring ()
Cette méthode renvoie la sous-chaîne comprise entre les positions x et y indiquées en
paramètres, dans la chaîne principale.
Syntaxe :
variable = chaine.substring (x,y)
Exemple:
x = "maman" ;
y = x.substring(1,3) ;
document.write(y) ;
III.3.5. Substr ()
Cette méthode renvoie le texte une sous-chaîne de la String de la méthode, à partir du
début et sur n caractères.
Syntaxe :
variable = chaine1.substr(début, n)
Exemple:
y = "un texte";
document.write(y.substr(5,2)) ;
III.3.6. Slice ()
Equivalent à substring(). La fin est facultative.
Syntaxe :
variable = chaine.slice(début, fin)
Exemple:
y = " un texte ";
document.write(y.slice(7)) ;

III.3.7. Split ()
Cette méthode renvoie un tableau de sous-chaînes découpées selon le séparateur passé en
paramètres.
Syntaxe :
variable = chaine.split(séparateur)
Exemple:
x = " un texte " ;
y = x.split("@") ;
document.write(y[0] + "<br>" + y[1]) ;
III.3.8. Concat ()
Cette méthode renvoie la concaténation de la chaîne passée en paramètre avec celle de la
méthode.
Syntaxe :
variable = chaine1.concat(chaine2)
Exemple:
x = "Ecrivez-moi à " ;
y = " un texte ";
z = x.concat(y) ;
document.write(z) ;
III.3.9. ToLowerCase ()
Cette méthode renvoie la chaîne avec tous les caractères en minuscules
Syntaxe :
variable = chaine.toLowerCase()
Exemple:
x = "MAMAN" ;
y = x.toLowerCase() ;
document.write(y) ;
III.3.10. ToUpperCase ()
Cette méthode renvoie la chaîne avec tous les caractères en majuscules
Syntaxe :
variable = chaine.toUpperCase()
Exemple:
x = "Maman" ;
y = x.toUpperCase() ;
document.write(y) ;

III.3.11. FontColor ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <font
color=couleur>…</font>.
Syntaxe :
variable = chaine1.fontColor(couleur)
Exemple:
y = " un texte ";
document.write(y.fontColor("blue")) ;
III.3.12. FontSize ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <font
size=taille>…</font>.
Syntaxe :
variable = chaine1.fontSize(taille)
Exemple:
y = " un texte ";
document.write(y.fontSize("16")) ;
III.3.13. Fixed ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <pre>…</pre>.
Syntaxe :
variable = chaine1.fixed()
Exemple:
y = " un texte ";
document.write(y.fixed()) ;
III.3.14. Bold ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <b>…</b>.
Syntaxe :
variable = chaine1.bold()
Exemple:
y = " un texte ";
document.write(y.bold()) ;
III.3.15. Strike ()
Cette méthode renvoie le texte de l’objet barré.
Syntaxe :
variable = chaine1.strike()
Exemple:
y = " un texte ";

document.write(y.strike()) ;
III.3.16. Sub ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <sub>…</sub>.
Syntaxe :
variable = chaine1.sub()
Exemple:
y = " un texte ";
document.write(y.sub()) ;
III.3.17. Big ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <big>…</big>.
Syntaxe :
variable = chaine1.big()
Exemple:
y = " un texte ";
document.write(y.big()) ;
III.3.18. Sup ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <sup>…</sup>.
Syntaxe :
variable = chaine.sup()
Exemple:
y = " un texte ";
document.write(y.sup()) ;
III.3.19. Blink ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <blink>…</blink>. Ne
fonctionne que sous Netscape
Syntaxe :
variable = chaine.blink()
Exemple:
y = " un texte ";
document.write(y.blink()) ;
III.3.20. Small ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <small>…</small>.
Syntaxe :
variable = chaine.small()
Exemple:
y = " un texte ";

document.write(y.small()) ;
III.3.21. Italics ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <i>…</i>.
Syntaxe :
variable = chaine.italics()
Exemple:
y = " un texte ";
document.write(y.italics()) ;
III.3.22. Link ()
Cette méthode renvoie le texte de l’objet en y ajoutant les balises <a href=URL >…</a>.
Syntaxe :
variable = chaine1.link(URL)
Exemple:
y = " un texte ";
document.write(y.link("http://www.google.fr")) ;
III.3.23. Anchor ()
Cette méthode crée un ancre,et renvoie le texte de l’objet en y ajoutant les balises <a
name=ancre >…</a>.
Syntaxe :
variable = chaine1.anchor(ancre)
Exemple:
y = " un texte "
document.write(y.anchor("ancre")) ;
IV. L’objet date
IV.1. Généralités
La date et l’heure sont regroupées en JS dans la classe Date. On créé alors une variable
Date grâce au constructeur.
Syntaxe :
variable =new Date()
La date et l’heure en JS ne commencent qu’à partir du 1er janvier 1970, 0h 0min 0s. Toute
référence à une date antérieure donnera un résultat aléatoire.

IV.2. Les méthodes
IV.2.1. Get
Une fois notre variable Date créée, il faut lui donner les informations sur la date et l’heure
actuelle. Les fonctions suivantes remplissent la variable – qui est une chaîne – Date avec les
données courantes. Elles utilisent toutes la même syntaxe, ce sont des méthodes objet.
Syntaxe :
variable1 =new Date()
variable2 = variable1.getInfo();
 getYear() : Retourne les 2 derniers chiffres de l’année. Il faudra donc rajouter le préfixe
"20".
 getFullYear() : Retourne la date sur 4 chiffres.
 getMonth() : Retourne le mois sous la forme d’un entier compris entre 0 et 11.
 getDate() : Retourne le jour du mois sous forme d’un entier compris entre 1 et 31.
 getDay() : Retourne le jour de la semaine sous forme d’un entier compris entre 0 et 6.
 getHours() : Retourne l’heure sous forme d’un entier compris entre 0 et 23.
 getMinutes() : Retourne les minutes sous forme d’un entier compris entre 0 et 59.
 getSeconds() : Retourne les secondes sous forme d’un entier compris entre 0 et 59.
 getMilliseconds() : retourne les millisecondes de la date. A ne pas confondre avec
getTime().
IV.2.2. Set
Il est aussi possible de remplir la variable Date avec nos propres données. Les fonctions
suivantes remplissent la variable – qui est une chaîne – Date avec les données que vous voulez.
Elles utilisent toujours la même syntaxe, ce sont des méthodes objet.
Syntaxe :
variable1 = new Date()
variable2 = variable1.setInfo();
 setYear() : Assigne les 2 derniers chiffres de l’année, sous forme d’un entier supérieur
à 1900.
 setYear() : Assigne l’année sur 4 chiffres.
 setMonth() : Assigne le mois sous la forme d’un entier compris entre 0 et 11.
 setDate() : Assigne le jour du mois sous forme d’un entier compris entre 1 et 31.
 setDay() : Assigne le jour de la semaine sous forme d’un entier compris entre 0 et 6.
 setHours() : Assigne l’heure sous forme d’un entier compris entre 0 et 23.
 setMinutes() : Assigne les minutes sous forme d’un entier compris entre 0 et 59.

 setSeconds() : Assigne les secondes sous forme d’un entier compris entre 0 et 59.
 setMilliseconds() : assigne les millisecondes de la date. A ne pas confondre avec
setTime().
IV.2.3. L’heure
L’heure est très utile en JS, elle possède donc plusieurs méthodes utiles. La syntaxe est
toujours la même.
Syntaxe :
variable1 =new Date()
variable2 = variable1.méthode();
 getTime() : Renvoie l’heure courante sous forme d’un entier représentant le nombre de
millisecondes depuis le 1er janvier 1970 00h 00min 00s.

 getTimezoneOffset() : Renvoie la différence entre l’heure locale et l’heure GMT sous
forme d’un entier en minutes.
 setTime() : Assigne l’heure courante sous forme d’un entier représentant le nombre de
millisecondes depuis le 1er janvier 1970 00h 00min 00s.
 toGMTString() : Renvoie la valeur actuelle de la variable Date en heure GMT.
 toLocaleString() : Renvoie la valeur actuelle de l’heure de la variable Date. C’est plus
rapide que de combiner getHours(), getMinutes(), et getSeconds().
V. L’objet array
V.1. Généralités
L’objet Array n’est rien d’autre qu’un tableau. Un tableau est en quelque sorte une liste
d’éléments indexés que l’on pourra lire – chercher les données - ou écrire – entrer les données
– à volonté.
V.2. Création et affectation d’un tableau
V.2.1. Création d’un tableau

On créé un tableau comme n’importe quel objet de classe. On invoque le constructeur
de classe. On indique en paramètre du constructeur le nombre maximum d’éléments (x) que
l’on souhaite entrer dans le tableau. Ce nombre est cependant facultatif, car JS prend en compte
le numéro du dernier élément entré comme taille du tableau si le ce nombre n’est pas indiqué.
Syntaxe :
variable = new Array(x) ;
Exemple:

var MonTableau = new Array (10) ;
V.2.2. Affectation d’un tableau

On affecte un tableau très simplement. Il suffit d’affecter une valeur (y) à la variable avec
le numéro de l’élément (i) entre crochets. Ces derniers ne sont pas présents lors de la création
mais sont indispensables lors de l’affectation. Le numéro commence à 0 et finit au nombre
maximum moins 1.
Syntaxe :
variable = new Array(x) ;
variable [i] = y;
Exemple:
MonTableau [0] = 7 ;
Evidemment, à ce rythme-là, l’affectation est longue, surtout si votre tableau compte
plus que quelques éléments. C’est pourquoi on utilise la boucle itérative for. L’exemple suivant
entre une série de nombre en ajoutant 1 à chaque fois. Il s’agit d’un exemple rapide et simple,
mais on peut imaginer faire un calcul ou demander une valeur à l’utilisateur à chaque boucle.
Exemple:
for ( var i = 0 ; i < 5 ; i++) {
MonTableau [i] = i;
document.write (MonTableau[i]);
}
V.2.3. Accès aux données d’un tableau

On accède aux données d’un tableau en indiquant le numéro de l’élément entre crochets.
On affecte cette valeur à une variable, par exemple. On peut aussi la rentrer comme paramètre
d’une fonction.
Syntaxe :
variable1 = new Array(x) ;
variable1 [i] = y ;
variable2 = variable1 [i] ;
Exemple:
var element = MonTableau [0] ;
document.write (MonTableau [0]) ;

V.2.4. Tableau à 2 dimensions

Pour créer un tableau à 2 dimensions, on utilise l’astuce suivante : on déclare chaque
élément comme un nouveau tableau.
Syntaxe :
variable = new Array (x) ;
variable [i] = new Array (y) ;
Exemple:
MonTableau [0] = new Array (7) ;
Il est bien entendu plus rapide d’utiliser une instruction itérative pour créer ce tableau à 2
dimensions.
Exemple:
for ( var i = 0 ; i < 5 ; i++) {
MonTableau [i] = new Array (3);
}
Avec ce système, on peut créer un tableau à 3,4 dimensions ou plus, bien que l’utilité en
soit quelque peu douteuse…
V.3. Propriétés et méthodes
Comme tout objet, l’objet Array possède une propriété et des méthodes qui s’avèrent
assez utiles.
V.3.1. Propriété
L’objet Array ne possède qu’une propriété – length – qui désigne le nombre d‘éléments
du tableau.
Syntaxe :
variable = new Array (x) ;
y = variable.length ;
Exemple:
document.write (MonTableau.length) ;
V.3.2. Méthodes
L’objet Array possède plusieurs méthodes qui permettent de manier les éléments du
tableau.
Syntaxe :
tableau.méthode() ;

 join (séparateur) : regroupe tous les éléments du tableau en une seule chaîne. Chaque
élément est séparé par un séparateur. Ci celui-ci n’est pas précisé, ce sera une virgule.
 reverse () : inverse l’ordre des éléments sans les trier.
 sort () : Renvoie les éléments par ordre alphabétique, s’ils sont de même nature.
 concat(tableau) : concatène le tableau passé en paramètre avec celui de la méthode.
 pop() : supprime le dernier élément du tableau.
 push(élément1,…) : ajoute l(es) élément(s) passé(s) en paramètre à la fin du tableau.
 shift() : supprime le premier élément du tableau.
 slice(début,fin) : renvoie les éléments contenus entre la position supérieure ou égale à
début et inférieure à fin.
 splice(début, nombre, éléments) : supprime les éléments à partir de la position début et
sur nombre de position. Les éléments sont remplacés par ceux fournis en paramètre
(facultatif).
 unshift(élément1,…) : ajoute l(es) élément(s) passé(s) en paramètre au début du tableau.
Exemple:
MonTableau [0] = “Moi” ;
MonTableau [1] = “Toi” ;
MonTableau [2] = “Lui” ;
MonTableau [3] = “Elle” ;
MonTableau.reverse() ;
document.write (MonTableau.join(‘ ‘)) ;
MonTableau.sort() ;
document.write ("<br>" + MonTableau.join(‘ ‘)) ;
VI. L’objet image
VI.1. L’objet
La classe Image correspond à la balise HTML <img>. Cette partie permet de manipuler
les images de façon dynamique, ce qui est impossible avec le HTML. On rappellera que les
images sont stockées dans le tableau images[] de l’objet document.
Grâce à un objet Image, on peut pré-charger une image et la stocker en cache,
contrairement au HTML. L’image ne sera cependant pas affichée. Elle le sera à l’aide de la
balise <img>.
Un objet Image est appelé selon la syntaxe objet habituelle, avec le constructeur Image().
L’objet possède alors les propriétés de la balise HTML <img>.

VI.2. Les propriétés
VI.2.1. Syntaxe
Un objet Image possède plusieurs propriétés, que l’on peut assimiler aux attributs de la
balise <img>.
Syntaxe :
variable = new Image();
variable.propriété = x ;
var2 = variable.propriété ;
VI.2.2. Src
Il s’agit de l’URL absolue ou relative le l’image. Elle peut être modifiée. Cela permet de
charger en cache l’image lors du chargement de la page.
Exemple:
<img src="0.gif" name="image1"
onMouseOver="document.image1.src='2.gif';"
onMouseOut="document.image1.src='0.gif';">
VI.2.3. Name
C’est le nom défini par l’attribut name="…" de la balise <img>. A ne pas confondre avec
l’ID. Permet de trouver l’image dans le tableau document.images[].
Exemple:
<img src="0.gif" name="image1" onMouseOver="alert('Adresse de
l\'image : ' + document.images['image1'].src);">
VI.2.4. Id
C’est l’ID défini par l’attribut id="…" de la balise <img>. A ne pas confondre avec le
nom. Permet de retrouver l’image grâce à la méthode document.getElementById().
Exemple:
<img src="0.gif" name="image1" onMouseOver="alert('Adresse de
l\'image : ' + document.getElementById('image1').src);">
VI.2.5. Width
Il s’agit de la largeur de l’image. Elle contient la valeur de l’attribut width de la balise
<img>. Si cet attribut n’est pas précisé, elle contient la largeur réelle de l’image. Ne peut être
modifiée.
Exemple:

<img src="0.gif" name="image1" onMouseOver="alert('Largeur de

l\'image : ' + document.getElementById('image1').width);">
VI.2.6. Height
Il s’agit de la hauteur de l’image. Elle contient la valeur de l’attribut height de la balise
<img>. Si cet attribut n’est pas précisé, elle contient la hauteur réelle de l’image. Ne peut être
modifiée.
Exemple:
<img src="0.gif" name="image1" onMouseOver="alert('Hauteur de
l\'image : ' + document.getElementById('image1').height);">
VI.2.7. Complete
C’est un booléen qui indique si le chargement de l’image est terminé. Renvoie true si le
chargement est achevé et false dans le cas contraire.
Exemple:
<img src="0.gif" name="image1"
onMouseOver="alert(‘chargement complété ? ' +
document.getElementById('image1').complete);">
VI.2.8. Alt
Elle contient le texte qui affiché avant la chargement de l’image et en info-bulle
lorsqu’elle est survolée. Contient la valeur de l’attribut alt="…" de la balise <img>. Ne peut
être modifiée.
Exemple:
<img src="0.gif" name="image1" alt="Image"
onMouseOut="alert(‘alt : ' +
document.getElementById('image1').alt);">
VI.2.9. FileSize
Elle contient la taille en octets de l’image. N’est accessible que lorsque le chargement est
terminé, d’où l’utilité de la propriété complete.
Exemple:
<img src="0.gif" name="image1" alt="Image"
onMouseOver="alert(‘Octets : ' +
document.getElementById('image1').fileSize);">
VI.3. Afficher une image
Il suffit de prendre l’élément <img> voulu dans la page et de changer sa propriété. Cet
élément est assimilé à un objet Image, faisant partie de l’objet document.

Exemple:
document.image1.src = ‘img2.jpg’ ;
Dans ce cas précis, l’image change et img2.jpg est affiché dans le champ image1.
L’intérêt de créer un objet Image reste donc discutable, puisqu’on ne l’utilise pas…
L’objet image permet de stocker l’image en cache au moment du chargement de la page. Il ne
reste plus qu’à trouver le moyen de l’afficher… De plus, on peut créer un tableau d’objets
Image, ce qui nous facilitera les manipulations ensuite.
VII. Exercices d’application

Exercice n°1 : l'objet math
1. Ecrire une fonction en JavaScript qui retournera l’arrondi de la note passée en argument au
demi près.
2. Ecrire une fonction en JavaScript qui retournera la racine quatrième de la valeur passée en
argument.
3. Ecrire une fonction qui retournera un nombre entier aléatoire entre 50 et 52, puis écrire une
autre fonction qui retournera la racine quatrième de ce nombre (en utilisant la fonction
racine quatrième déjà vu précédemment).
4. Ecrire une fonction calculant le maximum de trois nombres en utilisant la fonction
Max(x,y).
Exercice n°2 : l'objet string
1. Longueur d'une chaine : Ecrire la fonction nbCar(txt), qui retourne le nombre de
caractères présents dans le paramètre txt. Par exemple nbCcar(’abc’) retourne 3, tandis que
nbCar(’un exercice’) retourne 11.
2. Conversion d’une chaîne : Ecrire la fonction Maj(txt), dont le code JavaScript, saisit une
chaîne correspondante à un Prénom, puis affiche ce prénom, en majuscule, ainsi que sa
longueur .
3. Décomposition d’une chaîne : Ecrire la fonction Decomp(txt), dont le code JavaScript
saisie une chaîne ayant le format d’une date "15/03/2010" puis affiche dans la page web le
jour, le mois et l’année séparés comme suit :
02
13
2015
Jour=02
Mois=13
Année=2015
4. Extraction d’une chaîne : Ecrire la fonction Extract(txt), dont le code JavaScript saisit
une chaîne ayant le format d’une adresse URL complète puis extrait de cette URL celle du
serveur.
Exemple : La chaîne saisie est = "http://www.technologie-web.com/app/fr/index.html"
L’URL du serveur = www.technologie-web.com
5. Décomposition d’une chaîne (méthode générale) : Ecrire la même fonction précédente

dont le code JavaScript saisit une chaîne correspondante à une adresse URL puis affiche le
dernier label (suffixe) de l’adresse. Exemple :
Chaîne saisie = "www.google.com"
Label affiché = .com
6. Conversion de chaînes : Ecrire la fonction Convert(txt), dont le code JavaScript saisit un
prénom puis l’affiche toujours selon le format suivant : 1ère lettre majuscule, le reste
minuscule.
Exemples :
Remarque : vous pouvez utiliser la méthode chaine.substring(position1) sans position2

qui signifie extraire une sous-chaîne de position1 jusqu’à la fin de la chaîne.
Exercice n°3 : l'objet tableau
1. Ecrire les méthodes join(), pop(), shift(), push(elt) et unshift(elt) en manipulant
directement les éléments du tableau .(insérer un tableau à manipuler à votre choix).
2. Ecrire une fonction carre() qui retourne un tableau, dont tous les éléments correspondent
au carré des éléments du tableau donné en paramètre. Par exemple, carre([1,2,3,4]) donnera
[1,4,9,16], et carre([2,6]) donnera [4,36].
3. Retourne une tranche de tableau composé des éléments ayant un indice supérieur ou égal
à début et strictement inférieur à fin.
La tranche de tableau a donc exactement fin - debut éléments. puis le trier selon l'ordre
alphabétique.
Rappel : le premier élément d'un tableau commence à l'indice 0. Le dernier élément a
comme indice tableau.length - 1.

4. Définir en JavaScript un tableau contenant des notes d'étudiants comprises entre 0 et 20.
Implémenter en JavaScript les fonctions qui permettent d'afficher un tel tableau, de savoir
combien d'étudiants ont eu 10 plus, de calculer la moyenne des notes, de connaître la note
maximale, Compte et affiche le nombre d'apparitions d'un élément dans un tableau et
Indique si un élément est présent dans un tableau ou non.
Exercice n°4 : l'objet date

1. Afficher la date système : Créer un document HTML qui permet d'écrire (afficher) la date
système sous la forme suivante : jj/mm/aaaa
Ajouter les contrôles nécessaires pour que l’affichage des valeurs inférieures à 10 soient
précédées par un 0. Exemple : la date 2/3/2011 doit s’afficher 02/03/2011.
2. Afficher l’heure système : Ajouter au document précédent le traitement qui permet d'écrire
(afficher) l’heure système sous la forme suivante : h : m : s
Ajouter les contrôles nécessaires pour que l’affichage des valeurs inférieures à 10 soient
précédées par un 0. Exemple : l’heure 9 : 8 : 44 doit s’afficher 09 : 08 : 44.
3. Améliorer l’affichage de la date système : On veut maintenant améliorer l’affichage de la
date système, de telle manière que la date affichée 02/03/2011 devient sous la forme
suivante : Mercredi 02 Mars 2011.
Pour cela, il faut créer 2 tableaux (de type Array()) : l’un contenant les noms des jours de la
semaine et l’autre les noms des mois de l’année.
Utiliser ces 2 tableaux pour afficher la date comme indiquée plus haut.
4. Comparer deux dates) : On souhaite convertir deux chaînes saisies au format "jj/mm/aaaa"
en objet date JavaScript, puis comparer ces deux dates et afficher le résultat de comparaison.

Chapitre n°4 : Formulaires et événements en

JavaScript
 Utiliser les formulaires en JavaScript

 Utiliser les événements de JavaScript
 Connaitre la relation entre les formulaires et les événements en JS
Plan du chapitre
Les formulaires du JavaScript
Les événements en JavaScript
Volume horaire :
3 heures

I. Les formulaires
Sans les formulaires, les pages HTML ne proposent aucune interactivité avec l’utilisateur.
En effet, la page appelée est envoyée par le serveur et le browser ne fait que l’afficher, il ne
peut rien faire avec le serveur. Les champs de formulaire (form) permettent l’utilisateur d’entrer
des informations auxquelles la page pourra réagir. Cela reste assez limité, puisque l’interaction
ne quitte pas la machine du client, mais on peut effectuer quelques traitements.
I.1. La balise form
Chaque formulaire doit être encadré par les balises <form>…</form>. Toutes les balises
seront comprises entre ces deux-là.
Si vous travaillez avec PHP ou un autre langage (langage de script coté serveur), vous
aurez sûrement besoin d’envoyer les informations à un serveur. Dans ce cas, vous indiquez dans
la balise <form> la méthode (post ou get) et l’URL du script qui traitera l’information.
Exemple:
<form method=’post’ action=’traitement.php’>
………
</form>
Si vous désirez que les informations du formulaire vous soient envoyées par mail,
précisez ‘mailto:…’ dans l’action.
Exemple:
<form method=’post’ action=’mailto:e-mail’>
………
</form>
Dans chaque cas, n’oubliez pas d’insérer un bouton submit dans votre formulaire.
I.2. Champ de texte
I.2.1. Ligne de texte

Il s’agit de l’élément d’entrée/sortie le plus courant en JS. Une simple ligne où l’utilisateur
peut écrire quelques mots.
i. Syntaxe HTML
<input type=”text” name=”nom” value="valeur" size=x maxlength=z>
ii. Paramètres HTML
 name : le nom du champ (servira lors de la programmation)
 value : la valeur que vous voulez afficher dans la ligne de texte (facultatif).
 size : la longueur de la ligne de texte. Si le texte est trop long, la ligne défilera.
 maxlength : le nombre de caractères maximum contenus dans la ligne de texte
(facultatif mais conseillé).
iii. Propriétés JS
 name : indique le nom du contrôle.
 defaultvalue : indique la valeur par défaut affichée dans la ligne de texte.
 value : indique la valeur actuellement dans la zone de texte.
I.2.2. Zone de texte

Il s’agit de plusieurs lignes de textes. Utile quand le texte est long.
i. Syntaxe HTML
<textarea name=”nom” rows=x cols=y> texte par défaut </textarea>

 rows : le nombre de lignes affichés à l’écran. Si le texte est trop long, la zone de
texte défilera.
 cols : le nombre de colonnes affichées à l’écran.
 value : indique la valeur actuellement dans la zone de texte.
I.2.3. Champ password

Il s’agit d’une ligne de texte dont les caractères sont cachés.
i. Syntaxe HTML
<input type=”password” name=”nom” value="valeur" size=x maxlength=z>

 value : la valeur que vous voulez afficher dans le champ (facultatif).
 size : la longueur de la ligne de texte. Si le texte est trop long, la ligne défilera.
 maxlength : le nombre de caractères maximum contenus dans la ligne de texte
(facultatif mais conseillé).

 value : indique la valeur actuellement dans le champ password.
I.3. Cases à sélectionner
I.3.1. Boutons radios

Il s’agit de cases à cocher à choix unique. D’une forme ronde, elles sont liées entre elles
au niveau du code JS.
i. Syntaxe HTML
<input type=”radio” name=”nom” value="valeur"> texte

 name : le nom du champ (servira lors de la programmation) il doit être identique pour
chaque choix.
 checked : à mettre sur un seul bouton, qui sera sélectionné par défaut.
Il est nécessaire de préciser le label après le contrôle (texte)
 checked : indique si le bouton radio est coché, actuellement.
 defaultchecked : indique si le bouton radio est coché ou non par défaut.
 value : indique la valeur du bouton radio.
 index : indique le rang du bouton radio, à partir de 0.
I.3.2. Checkbox
Il s’agit de cases à cocher à choix multiple.
i. Syntaxe HTML
<input type=”checkbox” name=”nom” value="valeur"> texte
 name : le nom du champ (servira lors de la programmation). Il doit être différent pour
chaque choix.
 checked : à mettre sur un (ou plusieurs) bouton, qui sera sélectionné par défaut.
Il est nécessaire de préciser le label après le contrôle (texte)
 checked : indique si la case est cochée, actuellement.
 defaultchecked : indique si la case est cochée ou non par défaut.
 value : indique la valeur de la case à cocher.
I.4. Liste de sélection
Il s’agit d’une liste déroulante dans laquelle on peut sélectionner une option.
i. Syntaxe HTML
<select name=”nom” size=x>
<option value="valeur"> texte
</select>
 name : le nom du champ (servira lors de la programmation).
 size : le nombre d’options que vous voulez afficher à l’écran. S’il n’est pas précisé, la
liste n’affiche qu’une seule ligne.
 selected : à mettre dans une balise <option>. Cette option sera sélectionnée par défaut.
 Multiple : à mettre dans une balise <select>. Autorise la sélection de plusieurs options
dans la liste déroulante.
Chaque option de la liste déroulante correspond à une balise <option>. Il est nécessaire
de préciser le label après chaque option contrôle (texte).
 selected : indique si le bouton radio est sélectionné
 defaultselected : indique si le bouton radio est coché ou non par défaut.
 length : indique le nombre d‘éléments de la liste.
I.5. Bouton
I.5.1. Bouton simple

i. Syntaxe HTML
<input type=”button” name=”nom” value=”valeur”>
 value : la valeur que vous voulez afficher sur le bouton.

 value : indique la valeur actuelle du bouton.
 defaultselected : indique la valeur par défaut du bouton.
I.5.2. Bouton reset

Il permet de remettre la valeur par défaut de tous les champs du formulaire.
i. Syntaxe HTML
<input type=”reset” name=”nom” value=”valeur”>
I.5.3. Bouton submit

Il permet d’exécuter l’action prévue dans la balise <form>.
i. Syntaxe HTML
<input type=”submit” name=”nom” value=”valeur”>
I.6. Contrôle caché
Il permet de mettre dans le script des éléments (souvent des données) qui ne seront pas
affichées par le navigateur, mais qui pourront être envoyées par mail ou à un serveur.
i. Syntaxe HTML
<input type=”hidden” name=”nom” value=”valeur”>


 value : la valeur qui sera contenue dans le contrôle.
 value : indique la valeur actuelle du contrôle.
 defaultselected : indique la valeur par défaut du contrôle.
II. Les événements

Les événements sont l’intérêt du JS en matière de programmation Web. Ils donnent une
interactivité à la page que vous consultez, ce qui n’existe pas avec le HTML, si on excepte bien
entendu le lien hypertexte. Le JS permet de réagir à certaines actions de l’utilisateur. On nomme
évènement le mot Event, et gestionnaire d’événement le mot-clé onEvent.
II.1. Fonctionnement
Les évènements sont indiqués dans la balise, d’un formulaire, le plus souvent. Ils
apparaissent comme un paramètre supplémentaire et suivent une syntaxe particulière.
Syntaxe :
<balise onEvent=”code">
 balise : désigne le nom de la balise HTML qui supporte l’événement.
 onEvent : désigne le gestionnaire d’événement associé à l’événement Event.
 Le code inséré entre guillemets fait le plus souvent référence à une fonction définie dans
les balises <head>…</head>. Il peut cependant s’agir d’instructions directement.
Plusieurs gestionnaires d’évènements peuvent être placés dans la même balise. Certaines
balises n’appartenant pas à un formulaire peuvent supporter des gestionnaires d’évènement.
II.2. Le clic de souris
Lorsque vous cliquez sur un élément de formulaire de la page que vous consultez.
Gestionnaire d’événement :
onClick
Exemple :
<input type=”button” onClick=”alert(‘vous avez cliqué sur le bouton’) ;">
Balises supportées : <input type="button">, <input type="checkbox">, <input type="radio">,

<input type="reset">, <input type="submit">, <a href..>

II.3. Le chargement
II.3.1. Load
Lorsque la page que vous consultez finit de se charger.
onLoad
Exemple:
<body onLoad=”alert(‘la page est chargée !’) ;">
Balises supportées : <body>, <frameset>
II.3.2. UnLoad
Lorsque vous quittez un document ou une page web.
onUnLoad
Exemple:
<body onUnLoad=”alert(‘Vous quittez la page !’) ;">
Balises supportées : <body>, <frameset>
II.3.3. Error
Lorsque le chargement d’une page ou d’un image s’interrompt en erreur.
onError
Exemple:
<img src="pix.gif" onError=”alert(‘Erreur de chargement !’) ;">
Balises supportées : <body>, <frameset>, <img>
II.3.4. Abort
Lorsque vous interrompez le chargement d’une image.
onAbort
Exemple :
<img src="pix.gif" onAbort=”alert(‘Vous avez interrompu le chargement de
l’image !’) ;">
Balises supportées : <img>

II.4. Le passage de la souris
II.4.1. MouseOver
Lorsque vous survolez un lien ou une zone d’image activable. Une zone d’image activable est
une partie d’image qui a été transformée en lien. Je ne reviendrai pas sur ce sujet, ce n’est pas
l’objet de ce cours.
onMouseOver
Exemple:
<a href="http://www.google.fr" onMouseOver=”alert(‘Pour aller sur
google.fr, cliquer ici’) ;">http://www.google.fr</a>
Balises supportées : <a href…>, <area href…>
II.4.2. MouseOut
Lorsque vous sortez de la zone de survol d’un lien ou d’une zone d’image activable.
onMouseOut
Exemple:
<a href="http://www.google.fr" onMouseOut=”alert(‘Vous ne voulez pas y
aller ?’) ;">http://www.google.fr</a>
Balises supportées : <a href…>, <area href…>
II.5. Le focus
II.5.1. Focus
Lorsque vous activer un contrôle texte ou sélection.
onFocus
Exemple:
<input type="text" value="votre nom" name=”nom” onFocus=”alert(‘Ecrivez
votre nom ici’) ;">
Balises supportées : <input type="text">, <select>, <textarea>, <input type="password">
II.5.2. Blur
Lorsque vous quitter un contrôle texte ou sélection.
onBlur
Exemple:
<input type="text" value="votre nom" name=”nom” onBlur=”alert(‘Vous

n\’avez rien oublié ?’) ;">
II.6. Les changements
Lorsque la valeur d’un texte ou d’une option change dans un formulaire. Si vous cliquez dans
la zone de texte mais que vous ne touchez pas au texte, rien ne se produit.
onChange
Exemple:
<input type="text" value="votre nom" name=”nom” onChange=”alert(‘Vous
avez changé votre nom ??’) ;">
II.7. La sélection
Lorsque vous sélectionnez du texte dans un champ de texte.

onSelect
Exemple:
<input type="text" value="votre nom" name=”nom” onSelect=”alert(‘Vous
avez sélectionné un champ’) ;">
Balises supportées : <input type="text">, <textarea>
II.8. L’envoi
Lorsque vous cliquez sur un bouton « submit » d’un formulaire de type « post » ou « get ».
onSubmit
Exemple:
<input type="submit" value="Envoyer" name=”envoi”
onSubmit=”alert(‘C’est parti !’) ;">
Balises supportées : <input type="submit">
II.9. Le reset
Lorsque vous sélectionnez un champ de texte.

onReset
Exemple:

<input type="reset" value="Effacer" name=”effacer” onSubmit=”alert(‘On

efface tout !’) ;">
Balises supportées : <input type="reset">
III. Exercices d’application
Exercice n°1 : (manipulations simples et champs)

On veut écrire un petit programme JavaScript permettant de calculer un produit somme.
L'utilisateur saisira les valeurs à ajouter dans deux champs :
Exercice n°2 : (Numéro inscription ISET)

Ecrire une expression régulière qui vérifie le numéro d’inscription d’un étudiant à l’ISET:
Une lettre majuscule suivie de cinq chiffres.
Exercice n°3 :
Imaginez un lien en HTML dont l'aspect (couleur du texte, couleur de background et autres)
se modifient lorsque l'on survole ce lien avec la souris.
Exercice n°4 :
Soit le formulaire suivant :
Ecrire une fonction JavaScript qui cherche dans une chaîne ch la dernière occurrence
d'une sous-chaîne a et la remplace par une sous-chaîne b. (Utilisez les formulaires pour saisir
la chaine initiale et les sous-chaines et pour l’affichage du résultat utilisez la méthode Alert).

Chapitre n°5 : Le DOM en JavaScript
 Comprendre la notion du DOM

 Connaitre La relation entre JavaScript et DOM
 Comprendre le rôle du DOM
 Utiliser la structure du DOM
 Utiliser les éléments et les nœuds du DOM
Plan du chapitre
Structure du DOM
Les éléments du DOM et ses utilisations
Les nœuds du DOM
Volume horaire :
3 heures

I. Définition
Le Document Object Model (DOM), c’est-à-dire le modèle orienté objet d’une page web,
est un standard du W3C qui fournit une interface indépendante de tout langage de
programmation et de toute plate-forme, permettant à des programmes informatiques et à des
scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents.
Le DOM s'utilise avec les documents XML (Extensible Markup Language « langage de
balisage extensible ») et HTML ('HyperText Markup Language), et permet, via le JavaScript,
d'accéder au code XML et/ou HTML d'un document. C'est grâce au DOM que nous allons
pouvoir modifier des éléments HTML (afficher ou masquer un <div> par exemple), en ajouter,
en déplacer ou même en supprimer.
II. La structure DOM

Le DOM pose comme concept que la page Web est vue comme un arbre, comme une
hiérarchie d'éléments. On peut donc schématiser une page Web simple comme ceci :
<html>
<head> <body>
<meta> <title> <div>
#text <p>
#text <a>
#text
L'élément <html> contient deux éléments, appelés enfants : <head> et <body>. Pour ces
deux enfants, <html> est l'élément parent. Chaque élément est appelé nœud (node en anglais).
L'élément <head> contient lui aussi deux enfants : <meta> et <title>. <meta> ne contient pas
d'enfant tandis que <title> en contient un, qui s’appelle #text. Comme son nom l'indique, #text
est un élément qui contient du texte.
Le schéma adopté des documents est une arborescence hiérarchisée.

Les différentes composantes d'une telle arborescence sont désignées comme étant des nœuds.
L'objet central du modèle DOM est pour cette raison l'objet node (node = noeud).
Il existe différents types de nœuds : les noeuds-élément, les noeuds-attribut, noeuds-cdata et les
noeuds-texte.
Exemple XML :
<personne sexe="masculin"> 111111
<nomprenom>Ali BEN SALAH</nomprenom >
</ personne >
L'élément personne est le noeud de départ dans ce petit extrait de structure arborescente.
Ce noeud a d'après les règles du modèle DOM, deux noeuds enfant et un noeud associé :
 Les noeuds enfant sont d'une part le noeud texte avec le mot "111111", d'autre part le
noeud élément de l'élément nomprenom.
 L'attribut sexe dans la balise ouvrante <personne> n'est pas par contre un noeud-enfant
mais un noeud associé.
 Le noeud-attribut a toutefois lui-même un noeud enfant à savoir la valeur affectée
(masculin).
Même le noeud-élément de l'élément nomprenom a, à son tour, un noeud-enfant, à savoir le
noeud-texte de son contenu de caractères.
III. Accès aux éléments
III.1. getElementById()
Cette méthode permet d'accéder à un élément en connaissant son ID qui est simplement
l'attribut id de l'élément.
III.2. getElementsByTagName()
Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments de la
famille.
III.3. getElementsByName()
Cette méthode est semblable à getElementsByTagName() et permet de ne récupérer que

les éléments qui possèdent un attribut name que vous spécifiez.

III.4. querySelector() et querySelectorAll()
Ces deux méthodes prennent pour paramètre un seul argument : une chaîne de caractères.
Cette chaîne de caractères doit être un sélecteur CSS. La première, querySelector(), renvoie le
premier élément trouvé correspondant au sélecteur CSS, tandis que querySelectorAll() va
renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni.
IV. Edition des éléments

Après avoir accédé aux éléments, nous allons à priori les éditer. Les éléments HTML sont
souvent composés d'attributs (l'attribut href d'un <a> par exemple), et d'un contenu, qui est de
type #text. Le contenu peut aussi être un autre élément HTML.
IV.1. Les attributs : Via l'objet Element
Pour interagir avec les attributs, l'objet Element nous fournit deux méthodes :
 getAttribute() : permet de récupérer un attribut.
 setAttribute() : permet d'éditer un attribut.
Le premier paramètre est le nom de l'attribut, et le deuxième, dans le cas de setAttribute()
uniquement, est la nouvelle valeur à donner à l'attribut.
IV.2. La classe
l'attribut class d'un élément HTML, il suffit d'utiliser className.
IV.3. Récupérer du HTML
innerHTML permet de récupérer le code HTML enfant d'un élément sous forme de texte. Ainsi,
si des balises sont présentes, innerHTML les retournera sous forme de texte : Pour éditer ou
ajouter du contenu HTML, il suffit de faire l'inverse, c'est-à-dire de définir un nouveau contenu.
IV.4. innerText
Le fonctionnement d'innerText est le même qu'innerHTML excepté le fait que seul le texte est
récupéré, et non les balises.
V. Noeuds DOM
Pour accéder aux éléments HTML, on utilise les méthodes getElementById() et
getElementsByTagName(). Une fois que l'on a atteint un élément, il est possible de se déplacer
de façon un peu plus précise, avec toute une série de méthodes et de propriétés.
Pour accéder aux éléments HTML, on utilise les méthodes getElementById() et
getElementsByTagName(). Une fois que l'on a atteint un élément, il est possible de se déplacer
de façon un peu plus précise, avec toute une série de méthodes et de propriétés.
Selon le standard du DOM, tout est un nœud dans un document HTML :

 Le document dans son complexe est un noeud document .
 Chaque élément HTML est un noeud élément .
 le texte dans les éléments HTML est constitué par des noeuds texte
 Chaque attribut HTML est un noeud attribut.
 Même les commentaires sont des noeuds commentaire.
Dans la terminologie DOM, on utilise des conventions d’appellation pour se référer aux
noeuds qui sont en relation avec un noeud donné. Voici les plus utiles :
Fonction Description
L’attribut renvoie son noeud parent. S’il n’a pas de noeud parent,
parentNode
il renvoie NULL
L’attribut renvoie un tableau de tous ses noeuds enfants. S’il n’a
childNote
pas de noeud enfant, alors il renvoie un tableau vide.
L’attribut renvoie son premier noeud enfant. S’il n’a pas de noeud
firstChild
enfant, il renvoie NULL
L’attribut renvoie son dernier noeud enfant. S’il n’a pas de noeud
lastChild
enfant, il renvoie NULL
L’attribut renvoie le noeud frere qui le suit. S’il n’a pas de noeud
nextSilbing
suivant, il renvoie NULL
L’attribut renvoie le noeud frere qui le précède. S’il n’a pas de
previousSilbing
noeud précédent, il renvoie NULL
Considérons le fragment d’HTML suivant :

<html>
<head>
<title>Introduction à DOM</title>
</head>
<body>
<h1>Première séance</h1>
<p>Bonjour !</p>
</body>
</html>
Sur la base de ce fragment, on peut affirmer que :
 le noeud <html> n’a pas de parent : c’est la racine de l’arbre ;
 le parentNode des noeuds <head> et <body> est le noeud <html> ;
 le parentNode du noeud texte “Bonjour !” est le noeud <p> ;

par ailleurs,
 le noeud <html> a deux childNodes : <head> et <body> ;
 le noeud <head> a un childNode : le noeud <title> ;
 le noeud <title> aussi n’a qu’un childNode : le noeud texte “Introduction à DOM” ;
 le noeud <h1> est previousSibling de <p> et ce dernier est nextSibling de <h1> ; les
deux sont childNodes de <body> ;
 l’élément <head> est le firstChild de l’élément <html> ;
 l’élément <body> est le lastChild de l’élément <html> ;
 l’élément <h1> est le firstChild de l’élément <body> ;
 l’élément <p> est le lastChild de l’élément <body>.
VI. Manipuler les éléments de l’arbre DOM

Maintenant que vous savez vous déplacez dans l’arbre DOM, nous allons découvrir
comment manipuler et modifier ses nœuds grâce aux attributs suivants :
A la première ligne, on créer un élément de type DIV, ensuite on créer un deuxième noeud
(2eme ligne), mais de type TEXT, avec comme valeur : « Bonjour à tous ». Le noeud TEXT qui
vient d’être insérer est considérer comme un enfant de l’élément DIV.
Fonction Description
Cette méthode permet de créer un élément du type passé en
paramètre. Dans l’exemple ci-dessous, la ligne de code permet de
créer un élément DIV :
createElement
1 document.createElement("div")
createTextNode Cette méthode permet de créer un élément de type Text.
Cette méthode permet d’insérer un noeud en dernière position de

ses éléments enfants.
1 nouveauDiv = document.createElement("div");
appendChild 2 text = document.createTextNode("Bonjour à tous");
3 nouveauDiv.appendChild(text);
4 document.body.appendChild(nouveauDiv);

Cette méthode permet d’insérer un noeud enfant A avant un noeud

enfant B.
insertBefore 1 noeudA = document.createElement("div");
2 document.body.insertBefore(noeudA, noeudB);
Cette méthode permet de remplacer un noeud enfant A par un noeud

enfant B.
replaceChild
1 elementParent.replaceChild(noeudB, noeudA);
Cette méthode permet de cloner un noeud A, et de facon optionnel

ses enfants, et un noeud B.
1 noeudB = noeudA.cloneNode(true);
cloneNode
Si le paramètre est définis avec la valeur TRUE, alors les noeuds

enfants seront inclus, par contre, si la valeur est égale à FALSE,
seul le noeud sera concerné.
Cette méthode permet de supprimer un noeud enfant.
removeChild 1 elementParent.removeChild(noeud);
VII. Exercices d’application

Exercice n°1 :
Considérons le code HTML suivant :
<h1 class= centre> bonjour</h1>
Donner la structure arborescente de cette page
Exercice n°2 :
Considérons le code HTML suivant :
<h1 class= centre> bonjour <i>LATI1</i> web2</h1>
Donner la structure arborescence de cette page

Exercice n°3 :
a. Type de la valeur de retour
Quels sont les paramètres et le type de valeur de retour des fonctions suivantes :
 getElementById
 getElementByTagName
b. Les propriétés d’un objet noeud
Quel es la valeur retournée par les propriétés suivantes
 nodeName
 nodeType
 nodeValue
Exercice n°4 : Application avec la méthode : getElementsByTagName
a. Ecrire le code de l’exercice n°2
b. Ajouter l’évènement onload comme attribut dans la balise body
c. Affecter la fonction "afficher" pour l’attribut onload et ajouter les instructions
nécessaires.
d. Traitement d’une balise HTML: cas de "h1"
 Afficher le nombre des noeuds de la balise "h1"
 Donner l’instruction javascript qui permet de retourner les noeuds de la balise "h1"
 Ecrire le code qui permet d’afficher le mot bonjour en utilisant les propriétés de
DOM.
 Afficher le type et le nom du noeud "bonjour".
 Modifier le script précédent pour le cas de plusieurs balises "h1"
e. Traitement des fils d’un noeud : cas de "h1"
 Afficher la liste des types de tous les noeuds enfants du "h1".
 Compléter l’affichage des noms et valeurs de tous les noeuds enfants du "h1".
Exercice n°5 : Modifier l’arborescence
a. Modifier la couleur de l’arrière plan de la balise "h1"
b. Modifier la couleur de texte de la balise " h1".
c. Afficher le contenu de la balise h1 en utilisant la propriété innerHTML.
d. Changer ce contenu en utilisant la même propriété.
Exercice n°6 : Application avec la méthode : getElementById
a. Placer deux images dans votre répertoire de travail.

b. Dans une page web, insérer une des 2 images (avec un identifiant) et 2 liens hypertextes
vides.
c. Afficher (par alert) la source de l’image insérée en utilisant la méthode getElementById
et la propriété src.
d. On veut maintenant que le clic sur le premier lien changera la source de l’image par
l’image non insérée et que le clic sur le deuxième lien changera la source pour apparaître
l’image de départ :
 Ajouter les événements Onclick correspondants
 Définir une fonction javascript qui changera la source de l’image selon le lien cliqué.

Chapitre n°6 : Langage XML
 Connaitre la syntaxe de base du langage XML

 Utiliser la structure de XML
 Savoir le rôle de XML et son intérêt par rapport à HTML
Plan du chapitre
Signification de XML
Différences entre HTML et XML
Utilité de XML
Intérêt de XML
Syntaxe de base de XML
Volume horaire :
3 heures

I. XML, qu'est ce que c'est ?
I.1. Définition
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 document que pour la transmission de données entre applications.
Il s’agit d’un langage de balisage structuré destiné pour la description, le stockage et le transfert
de données.
 XML est indépendant de toute plateforme.
 XML est une recommandation W3C.
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
I.2. Exemple
Les entreprises aéronautiques ont créé un langage basé sur XML pour l'échange
d'informations relatives aux données techniques des avions. De même, il existe plusieurs
langages utilisés dans les milieux financiers pour l'échange d'informations relatives aux
transactions.
Dans l'exemple suivant, on présente la composition d'une molécule :

Structure d'une molécule en se basant sur xml (source :

http://perso.livehost.fr/pdf/appweb/Cours3_XML.pdf)
XML représente un ensemble balises descriptives (signification des données) plutôt que
procédurales (présentation des données), il est libre, indépendant des plateformes logicielles ou
matérielles.
IL est extensible : ne contient pas un ensemble fixé de balises. Les documents XML doivent
être bien formés suivant une syntaxe définie, et peuvent donc être formellement validés. Les
documents XML doivent être bien formés suivant une syntaxe définie, et peuvent donc être
formellement validés.
Etant libre, indépendant des plateformes logicielles ou matérielles, il est particulièrement adapté
à l'échange de données et de documents. En fait, il était créé dans le but de décrire les données
de manière aussi bien compréhensible par les hommes qui écrivent les documents XML que
par les machines qui les exploitent.
II. Pourquoi XML ?

Le web est confronté à deux problèmes :
 HTML n'est pas extensible, il ne peut pas répondre aux besoins spécifiques de tous les
domaines (mathématiques, chimie, musique, astronomie...) et ne définit plus le contenu
du document ;
 SGML qui permettrait de définir de nouveaux langages de balisage spécifiques est
complexe.
=> XML apporte une réponse à ces problèmes.
II.1. Caractéristiques de HTML
 HTML est une application SGML.

 HTML est restrictif : il définit un ensemble d'éléments et attributs fixe, qui permet de
décrire un document simple (en-têtes, corps, ce dernier contenant des paragraphes,
listes, tableaux, illustrations, ...). De manière plus formelle HTML 4.0 est une DTD de
SGML (et XHTML1.0 est à présent une DTD XML), c'est-à dire qu'une grammaire
définit tous les éléments et attributs autorisés.
 L'ajout de nouveaux éléments est impossible, on ne peut pas créer des balises pour
définir pour le document une structure de type résumé, chapitre, index, bibliographie.
 HTML qui devait décrire le contenu du document s'est orienté vers la présentation du
contenu :
o à l'origine, l'idée du créateur de HTML était de fournir aux auteurs un outil
d'échange de données indépendant des plate-formes et de l'affichage :
 HTML devait décrire les différentes parties d'un document simple à
l'aide d'éléments (Hn, P, STRONG, CITE, ...),
 les navigateurs devaient se charger de l'affichage final du document.
o Des éléments d'affichage ont été rajoutés pour personnaliser les pages web (B,
I, FONT, CENTER, TABLE dans la version 3.2, FRAME dans la version 4.0)
et des éléments ont été détournés (emploi de BLOCKQUOTE pour créer une
marge gauche alors que cette balise est censée introduire une citation entre
guillemets)
o Le W3C a supprimé les éléments relatifs à la présentation au profit des feuilles
de style CSS, cependant il subsistera des pages HTML non conformes pendant
plusieurs années.
 Les documents HTML sont rarement conformes aux règles établies par la DTD, les
attributs sont rarement entre guillemets, les éléments ne sont pas toujours correctement
imbriqués..., ceci est en partie la faute des navigateurs qui essayent d'afficher tous les
documents HTML, même s'ils ne sont pas valides.
II.2. Caractéristiques de XML
 XML est un sous-ensemble de SGML, dont les caractéristiques inutiles pour la

publication sur le web ont été supprimées, la création de DTD est plus simple qu'avec
SGML.

 il est destiné à décrire le contenu du document, pas son affichage (les feuilles de style
CSS et XSL gèrent l'affichage).
 il est flexible, on peut définir ses balises, et les utiliser dans un ou plusieurs documents
(DTD externe)
 le document ne sera affiché que s'il est bien formé et valide (s'il suit une DTD).
 il est lisible pour l'humain (l'information contenue sera toujours accessible,
contrairement aux fichiers de certains logiciels, par exemple, il est impossible de
visualiser du RTF sans un logiciel qui connaisse ce format)
 le document XML est un texte qui n'est pas destiné à être lu par l'humain (mais le fait
que ce soit un texte permet aux experts d'utiliser un éditeur de texte pour corriger le
fichier).
III. Les principales utilisations de XML

Les principales utilisations de XML peuvent être résumées en deux points :
III.1. Le stockage de données pour des raisons d’archivage
Le langage XML utilise un simple format texte sémantique, ce qui constitue un double
avantage : il est significatif et donc auto-documenté, de plus ne fais appel ‘a un format
spécifique de stockage qui risque un jour de devenir techniquement obsolète, et donc
difficilement exploitable (tel que une base de données)
III.2. L’échange de données entre systèmes hétérogènes
La quasi-totalité des langages de programmation et des systèmes d’exploitation actuels,

proposent des bibliothèques logicielles dédiées au traitement de fichiers au format XML (des
parsers XML). Ce qui fait que le XML est la solution d’excellence pour le transfert de données
entre systèmes hétérogènes.
IV. Intérêt de XML
IV.1. Séparation stricte entre contenu et présentation
Une des idées directrices de XML est la séparation entre contenu et présentation. Il faut
bien distinguer le contenu d'un document et la présentation qui en est donnée. Un même contenu
peut être rendu de façons très différentes. Cet ouvrage peut, par exemple, se présenter comme
un livre imprimé ou comme une collection de pages WEB. Le contenu est constitué, au départ,
de textes et d'illustrations mais aussi de liens entre ces éléments. L'organisation du texte en
chapitres, sections et sous-sections ainsi que les renvois entre chapitres font partie intégrante

du contenu du document. La présentation est au contraire la façon de présenter ce contenu au

lecteur.
IV.2. Simplicité, universalité et extensibilité
Une des caractéristiques essentielles de XML est son extensibilité et sa flexibilité.

Contrairement à HTML, le vocabulaire, c'est-à-dire l'ensemble des balises autorisées, n'est pas
figé. La norme HTML fixe les balises pouvant apparaître dans un document ainsi que leur
imbrication possible.
À titre d'exemple, la balise <li> peut uniquement apparaître dans le contenu d'une balise <ul>
ou <ol>. En revanche, les noms des balises XML sont libres. Il appartient aux auteurs de
documents de fixer les balises utilisées. Il est seulement nécessaire que les auteurs s'entendent
sur le vocabulaire, c'est-à-dire la liste des balises utilisées, lorsque des documents sont
échangés. Cette liberté dans les noms de balises permet de définir des vocabulaires particuliers
adaptés aux différentes applications. Il existe ainsi des vocabulaires pour décrire des dessins
vectoriels, des échanges commerciaux ou des programmes de télévision.
Ces vocabulaires particuliers sont appelés dialectes XML. Il en existe des centaines voire des
milliers pour couvrir tous les champs d'application de XML.
IV.3. Format texte avec gestion des caractères spéciaux
Un des atouts d'XML est sa prise en charge native des caractères spéciaux grâce à
Unicode. De plus, il est possible d'utiliser les différents codages (UTF8, Latin1, …) possibles
puisque l'entête d'un document spécifie le codage.
IV.4. Structuration forte
Un second principe de XML est une structuration forte du document. Pour illustrer ce
principe, la même adresse est donnée ci-dessous dans un style HTML puis dans un style XML.
Style HTML :
Anas BOUDHIEF<br/>
21, rue du ISET<br/>
9100 Sidi Bouzid<br/>
<tt>anas.boudhief@gmail.com</tt>
Style XML :
<address>
<personname>
<firstname>Anas</firstname> <surname>BOUDHIEF</surname>
</personname>
<street>

<streetnumber>21</streetnumber>
<streetname>rue de ISET</streetname>
</street>
<zipcode>9100</zipcode><city>Sidi Bouzid</city>
<email> anas.boudhief@gmail.com </email>
</address>
IV.5. 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.
V. Spécifications du langage XML
V.1. Contenu d'un document XML
Un document XML est composé de :





Un document XML qui respecte les règles syntaxique est dit bien formé. Il est utilisable sans
DTD (La grammaire de notre document XML).
Un document XML bien formé qui respecte sa DTD est dit valide. Il est plus facile d'écrire des
feuilles de style (XSL) pour les documents valides.
V.2. Résumé des spécifications



 ent doit contenir un et un seul élément racine




V.3. Le prologue
La première déclaration (qui est optionnelle) permet de définir la version et le codage du

document. L'encodage est basé sur la norme ISO 10646 XML comprend automatiquement
l'encodage UTF8 et UTF16 (UTF8 est l'encodage par défaut). La référence à la DTD externe
doit être placée au début du fichier :
<!DOCTYPE nom_d_élément SYSTEM "test.dtd">
On peut enrichir la DTD externe avec des déclarations locales :
<!DOCTYPE nom_d_élément SYSTEM "test.dtd«[ déclarations ] >

On peut se passer de référence à une DTD externe et définir toutes les balises dans le document
XML :
<!DOCTYPE nom_d_élément [ déclarations ] >
V.4. XML : les commentaires
En XML les commentaires se notent :


Les contraintes d'utilisation sont : pas de double tiret dans le texte, pas de commentaire dans un
élément (l'exemple ci-dessous est incorrect),
<produit
nom="DVD"

prix='100' <!—en dinars-- >

/>
V.5. Les balises (éléments)
Forme générale :
<nom_d_élément> contenu </nom_d_élément>
Les noms sont libres (contrairement à HTML). Ils obéissent à quelques règles:
 er caractère {alphabétique, «-», «_» },
 -», «_», «:» }.



Le contenu d'un élément peut être :




<article> Le langage <def>XML</def> contient <liste>

<élément> du texte, </élément>
<élément> des éléments, </élément>
</liste></article>
Les blancs comptent : <a> X </a> est différent de <a>X</a>.
V.6. Arbre d'éléments
Un document XML est un et un seul arbre d'éléments. C'est à dire : Pas de chevauchement
d'éléments. La notation suivante :
<list> ... <item> ... </list> ... </item> : est invalide.
Il faut la corriger comme suit : <list> ... <item> ... </item> ... </list>
Un document XML est composé d'un seul élément. La notation suivante :
<?xml version="1.0" encoding="iso88591"?>
<article> ... </article>
est invalide. Il faut la corriger comme suit :
<?xml version="1.0" encoding="iso88591"?>
<stock>
</stock>
V.7. Les attributs
Un élément ouvrant peut être enrichi par des couples de la forme attribut1="valeur1",
comme dans l'exemple :
<produit nom="DVD" prix='200'>
La valeur doit être entourée d'apostrophes si elle contient des guillemets, et inversement.
Le nom des attributs suit les mêmes règles syntaxiques que les noms d'éléments.
<produit>
<nom>DVD</nom>
<prix>150</prix>
</produit>
L'attribut doit changer l'interprétation des données:
<prix monnaie="Dinars"> 150 </prix>
Les attributs réservés
 xml:lang='langue' permet de définir la langue utilisée dans l'élément et tous les sous
éléments. La langue suit la norme ISO 3166 définie par la RFC 1766 (Request For
Comment). Par exemple fr ou en-US ou fr-FR.
 xml:space='preserve' ou xml:space='default' permet de définir l'interprétation des
espaces dans l'élément et tous les sous-éléments.
 xml:id='identificateur' permet d'associer une et une seule clef à un élément .
 xml:idref='identificateur' permet de faire référence à une clef.
V.8. Les références d'entités
Il existe des entités prédéfinies :
 & donne &
 < donne <
 > donne >
 " donne ’’
 ' donne ‘
 &#nnn; donne le caractère de code décimal nnn,
 &#xnnn; donne le caractère de code héxadécimal nnn,

VI. Exercices d’application

Exercice n°1 :
Créer un document XML structurant les données d'un répertoire.
Votre répertoire doit comprendre au moins 2 personnes. Pour chaque personne, on souhaite
connaître les informations suivantes :
 Son sexe (homme ou femme).
 Son nom.
 Son prénom.
 Son adresse.
 Un ou plusieurs numéros de téléphone (téléphone portable, fixe, bureau, etc.).
 Une ou plusieurs adresses email (adresse personnelle, professionnelle, etc.).
Exercice n°2 : Modéliser des articles avec bibliographie
L'objectif de l'exercice est de proposer un format XML permettant de stocker des articles
quelconques. Un article est constitué d'un titre, d'un texte et d'une bibliographie. Le texte lui-
même est une succession de paragraphes, chaque paragraphe pouvant contenir :
 des mots ou expressions importants et devant donc être différenciés du reste du
paragraphe ;
 des références bibliographiques ;
 une entrée dans la bibliographie peut décrire soit un site web, soit un ouvrage ;
 un site web est décrit par un nom et une url ;
 pour un ouvrage, on trouve le titre, les auteurs, la date de parution et l'éditeur.
Questions :
1. Discuter des différentes possibilités de codage en XML.
2. Écrire une DTD et un document respectant cette DTD contenant au moins deux
paragraphes et trois entrées bibliographiques (en utilisant les deux types d'entrées
possibles).

Chapitre n°7 : La validation XML avec les DTD
 Comprendre la notion du DTD

 Comprendre la relation entre XML et DTD
 Savoir utiliser un schéma XML
Plan du chapitre
Concept de base du DTD
Utilisation du DTD
Validation de XML avec DTD
Volume horaire :
3 heures

Introduction
Il peut être parfois nécessaire de préciser les balises et les attributs auxquels on a droit
lors de la rédaction d'un document XML, par exemple si l'on veut pouvoir partager le même
type de document avec une communauté d'autres rédacteurs.
Deux solutions sont possibles : les "Schémas XML" et les "DTD : Document Type Definition".
Ces dernières sont les plus simples à manipuler et sont apparues en premier, alors que les
Schémas n'étaient pas encore définis. Il ne faut pas oublier néanmoins qu'il existe une autre
solution, plus complexe certes, mais aussi plus puissante.
Elle permet notamment d'informer plus efficacement l'utilisateur sur les balises auxquelles il a
droit, ou bien de spécifier de manière plus détaillée le formatage autorisé pour le contenu de la
balise ou de l'attribut.
I. Les concepts de base des DTD
I.1. Les types de DTD
Une DTD peut être stockée dans deux endroits différents. Elle peut être incorporée au
document XML (elle est alors dite interne), ou bien être un fichier à part (on parle alors de DTD
externe). Cette dernière possibilité permet de la partager entre plusieurs documents XML. Il est
possible de mêler DTD interne et externe (DTD mixte).
ll existe de surcroît deux types de DTD externes : privé ou public. Les DTD publiques sont
normalisées et accessibles sur Internet, tandis que les DTD privées sont disponibles uniquement
sur le système utilisé pour valider le document XML.
 Syntaxe d’une DTD externe :
<!DOCTYPE Élément-racine Type [identifiant] Emplacement>
 Syntaxe d’une DTD interne :
<!DOCTYPE Élément-racine
[
Les Déclarations Internes
]
>
 Syntaxe D’une DTD Mixte :
<!DOCTYPE Élément-racine Type Emplacement
[
Les Déclarations Internes
]>
Cette déclaration se place juste après le prologue du document.

Les paramètres de DOCTYPE sont :
élément-racine: le nom de l’élément racine du document XML.
Type : SYSTEM (DTD privée) ou PUBLIC (DTD publique)
identifiant : identifiant normalisé de la DTD (à définir uniquement avec les DTD PUBIC);
I.2. Les règles de DTD
Les règles d’une DTD portent principalement sur les éléments et les attributs. Elles
permettent de définir si un élément a, par exemple, le droit de contenir d’autres éléments ou
bien de ne contenir que des données textuelles. Une règle s’écrit dans une DTD de la façon
suivante:
<!mot-clé Paramétre1 Paramétre2 … >
Le nombre de caractères d’espacement entre les paramètres est sans effet. Il est donc également
possible d’écrire une règle comme suit :
<!mot-clé
Paramétre1
Paramétre2 …
>
Les mots clés possibles sont :
ELEMENT : relatif à un élément XML (balise XML) ;
ATTLIST : relatif à un attribut d’élément XML ;
ENTITY : relatif à des caractères spéciaux, à des macros texte.

Remarque :
Au même titre qu’un fichier XML un fichier DTD peut commencer par :
<?xml version="1.0" encoding="UTF8"?>
II. Déclarations d'éléments (balises)

On peut regrouper les différents cas d’utilisation de balise dans un fichier XML en 3
possibilités:
Une balise avec un contenu de type texte:
Exemple:
<nom> Boudhief </nom>
Une balise vide
Exemple :

<adresse numero="21" rue="rue de ISET” ville="Sidi Bouzid" />

Une balise composée d’une liste de sous balise
Exemple:
<etudiant>
<nom> Boudhief </nom>
<prenom>Anas </prenom>
</etudiant>
Remarque:
Il est possible de combiner ces 3 cas en un seul cas.
Exemple:
<etudiant> 1111
<<nom> Boudhief </nom>
<prenom>Anas </prenom>
<adresse numero="21" rue="rue de ISET” ville="Sidi Bouzid" />
</etudiant>
La syntaxe d’une déclaration d'éléments est de la forme:
<!ELEMENT Nom_element Type_element>
nom_element est le nom de l'élément et type_element est le type auquel il est associé.
Un élément peut être de type:
Texte (#PCDATA)
vide: EMPTY,
séquence ou choix d'élément: dans ces cas, on indique la liste des éléments-enfants
entourée par des parenthèses.
II.1. Élément texte
Cet élément est le plus répandu, puisque c'est celui qui contient du texte. Il se déclare ainsi:
<!ELEMENT Elt (#PCDATA)>
II.2. Élément vide
Un élément vide est, comme son nom l'indique, un élément qui n'a aucun contenu que ce soit
de type texte, ou bien un autre élément. Le mot-clef utilisé pour la déclaration de ce type
d'élément est :
EMPTY : <!ELEMENT Elt EMPTY>
Exemple d'utilisation :<elt />
Un élément vide peut fort bien posséder un ou plusieurs attributs. Par exemple :
<img width="100" height="30" src="paysage.jpg" alt="Paysage de neige" />
II.3. Séquence d'éléments
Une séquence d'éléments est une liste ordonnée des éléments qui doivent apparaître en
tant qu'éléments-enfants de l'élément que l'on est en train de définir. Ce dernier ne pourra
contenir aucun autre élément que ceux figurant dans la séquence. Cette liste est composée
d'éléments séparés par des virgules et est placée entre parenthèses.
Chaque élément-enfant doit de plus être déclaré par ailleurs dans la DTD (avant ou après la
définition de la liste, peu importe). Dans le fichier XML, ils doivent apparaître dans l'ordre de
la séquence.
Une liste ordonnée dont les éléments sont uniques et obligatoires
<!ELEMENT Elt0 (elt1, Elt2, Elt3)>
Exemple d'utilisation valide : <elt0> <elt1>(...)</elt1> <elt2>(...)</elt2> <elt3>(...)</elt3></elt0>
Exemple d'utilisation non valide : <elt0> <elt1>(...)</elt1> <elt3>(...)</elt3></elt0>
II.4. Choix d'éléments
Un choix d'élément donne le choix dans une liste de plusieurs éléments possibles. De
même que pour la séquence, les éléments-enfants doivent être déclarés dans la DTD. Cette liste
est composée d'éléments séparés par le caractère |.
Exemple d'utilisation valide : <elt0> <elt1>(...)</elt1> </elt0>
Exemple d'utilisation valide : <elt0> <elt2>(...)</elt2> </elt0>
Exemple d'utilisation non valide : <elt0> <elt2>(...)</elt2> <elt3>(...)</elt3></elt0>
Remarque :
Il est possible de combiner les listes ordonnées et les listes de choix.
Exemple :
<!ELEMENT personne ( (M|Mme|Mlle) , nom, prenom)>
Cette règle précise que le noeud personne doit contenir un premier noeud enfant qui pourra être
au choix soit M, soit Mme, soit Mlle. Les deuxième et troisième éléments enfanst seront
respectivement nom et prenom.
II.5. Indicateurs d'occurrence
Lors de la déclaration de séquence ou de choix d'éléments, à chaque élément enfant peut

être attribuée une indication d'occurrence (?, + ou *).
 ? : zéro ou un élément enfant facultatif;
 * : zéro ou plusieurs éléments enfants facultatifs;

 + : un ou plusieurs éléments enfants.
L’absence d’opérateur de cardinalité signifie que l’élément correspondant ne peut figurer
qu’une seule fois.
Exemple :
<!ELEMENT personne (nom, prénom, prénom2 ?, adresse, téléphone+ )>
Cette règle signifie qu’un élément personne devra avoir, dans cet ordre, les éléments nom,
prénom, prénom2, adresse et téléphone. L’élément prénom2 pourra être absent et plusieurs
occurrences de l’élément téléphone seront possibles.
Voici un exemple xml valide au regard de cette règle :
<personne>
<nom> Boudhief</nom>
< prénom>Anas </ prénom>
< prénom2>Lotfi </ prénom2>
<adresse> Sidi Bouzid</adresse>
<telephone> 11223344</ téléphone> <telephone> 11776655</ téléphone>
</ personne>
Exemple d'utilisation d'un choix d'éléments avec indicateurs d'occurrence par élément:
<!ELEMENT elt0 (elt1* | elt2* | elt3*)>
Exemple d'utilisation valide : <elt0> <elt2>(...)</elt2><elt2>(...)</elt2></elt0>
Exemple d'utilisation non valide: <elt0> <elt3>(...)</elt3><elt2>(...)</elt2></elt0>
Exemple d'utilisation d'un choix d'éléments avec indicateur d'occurrence global :
<!ELEMENT Elt0(elt1 | Elt2 | Elt3)*>
Exemple d'utilisation valide : <elt0> <elt2>(...)</elt2> <elt3>(...)</elt3><elt1>(...)</elt1></elt0>
Dans ce dernier cas, il n'y a pas de contrainte visible sur l'ordre d'apparition des éléments.
II.6. Élément quelconque
L'élément quelconque contenir tout autre élément défini dans la DTD, aussi bien qu'être
vide ou contenir du texte.
Les éléments-enfants éventuels peuvent apparaître dans n'importe quel ordre, et en quantité non
définie. Il est préférable de ne pas utiliser trop souvent ce type de déclaration, car on perd les
avantages qu'offre la rédaction d'une DTD, qui sont de fixer des contraintes précises sur la
structure du document XML qui lui est lié. Le mot-clef utilisé pour la déclaration de ce type
d'élément est ANY : <!ELEMENT Elt ANY>

II.7. Élément à contenu mixte
Un élément à contenu mixte peut contenir aussi bien du texte, que des éléments-enfants.
Il se présente comme une liste de choix, avec des indicateurs d'occurrence bien choisis. Le texte
contenu peut se trouver à n'importe quel endroit dans l'élément, et peut être une section
CDATA.
Exemple de déclaration: <!ELEMENT citation(#PCDATA | auteur)*>
Exemple d'utilisation :
<citation> Être ou ne pas être

<auteur>Shakespeare</auteur></citation>
Dans le cas de contenu de type élément, l’ordre utilisé pour préciser ces éléments a une
importance. La liste délimitée est appelée une liste d’éléments ordonnée.
Les contenus de type mixte permettent d’accepter qu’un élément contient à la fois du texte et
d’autres éléments.
Exemple :
<exemple>
Ceci illustre un contenu mixte
<balise>le contenu de cet élément est du type pcdata </balise>
</exemple>
Dans la définition des règles pour les éléments avec du contenu mixte, le mot clé #PCDATA
doit se situer en premier, suivi par les noms des éléments enfants. Par contre, l’ordre des
éléments n’a pas d’importance.
Le corps d’une page HTML est un exemple courant de modèle de contenu mixte xml. Le
contenu de l’élément body est composé à la fois de données textuelles et d’autres éléments. De
plus, des éléments peuvent être vides, comme le code de retour à la ligne <br>.
III. Déclarations d'attributs

Comme on peut trouver dans un document XML des éléments possédant des attributs, il
est normal que la DTD permette de définir des contraintes sur ces derniers.
On peut déclarer et attacher à un élément donné chaque attribut séparément, mais il est
préférable de les assembler sous la forme d'une liste. Chaque attribut défini dans la liste possède
un nom et un type.
Syntaxe :
<!ATTLIST NomElement NomAttribut Type ValeurParDefaut>
Avec :
 NomElement : Le nom d’un élément XML.

 NomAttribut : Le nom d’un attribut d’un élément XML.
 Type : le type de données de l’attribut (par exemple CDATA pour dire une chaine de
caractères).
 ValeurParDefaut : Permet de définir le comportement du parseur en cas d’absence de
l’attribut.
Cette valeur peut prendre l’une des quatre valeurs suivantes :
 #REQUIRED : la présence de l’attribut est obligatoire;
 #IMPLIED : la présence de l’attribut est optionnelle;
 #FIXED : la présence de l’attribut est optionnelle, mais s’il est présent, sa valeur doit
être identique à la valeur précisée comme valeur de cet attribut.
Une valeur qui sera utilisée comme valeur par défaut en cas d’absence de l’attribut.
Exemple 1 : Déclaration d'un attribut avec une valeur par défaut :
<!ELEMENT elt(...)><!ATTLIST elt attr CDATA "valeur">
Un tel attribut n'est pas obligatoire. S'il est omis dans le fichier XML lors de l'utilisation de
l'élément elt, il est considéré comme valant valeur. Dans cet exemple, si on écrit <elt>(...)</elt>,
cela est équivalent à écrire <elt attr="valeur">(...)>/elt>.
Exemple 2 : Déclaration d'un attribut requis :
<!ELEMENT elt (...)><!ATTLIST elt attr CDATA #REQUIRED>
Un tel attribut est obligatoire. Son absence déclenche une erreur du vérificateur syntaxique sur
le fichier XML.
Exemple 3 : Déclaration d'un attribut optionnel :
<!ELEMENT elt(...)><!ATTLIST elt attr CDATA #IMPLIED>
Exemple 4 : Déclaration d'un attribut avec une valeur fixe :
<!ELEMENT elt(...)><!ATTLIST elt attr CDATA #FIXED "valeur">
L'utilité d'un tel attribut peut sembler bizarre à première vue, puisqu'il ne peut prendre qu'une
seule valeur. Cette fonctionnalité est cependant utile lors d'une mise à jour d'une DTD, pour
préserver la compatibilité avec des versions ultérieures.
III.1. Type chaîne de caractères
Il s'agit là du type d'attribut le plus courant. Une chaîne de caractères peut être composée
de caractères ainsi que d'entités analysables. Le mot-clef utilisé pour la déclaration de chaîne
de caractère est CDATA.
Exemple de déclaration de CDATA :
<! ELEMENT elt(...)><! ATTLIST elt attr CDATA #IMPLIED>
Exemples d'utilisations :
<elt attr="Chaîne de caractères"></elt>
<!ENTITY car "caractères"><elt attr="Chaîne de &car;">(...)</elt>
III.2. Les valeurs énumérées
On peut parfois désirer limiter la liste de valeurs possibles pour un attribut. On le définit
alors comme étant de type énuméré. Donner une autre valeur dans le fichier XML provoque
une erreur. Les valeurs énumérées se définissent comme une liste entre parenthèses dont les
valeurs sont séparées des autres par le caractère «|» (barre verticale)
Exemple de déclaration d'une liste de choix d'attributs :
<!ELEMENT img EMPTY>
<!ATTLIST img format (BMP | GIF | JPEG) "JPEG">
Cet exemple déclare un attribut format d'un élément img. La valeur de cet attribut peut être
BMP, GIF ou JPEG. Si aucune valeur n'est affectée à cet attribut, c'est la valeur par défaut qui
le sera affectée, ici JPEG. On notera l'absence de guillemets dans la liste des valeurs possibles.
C'est une source courante d'erreur dans la rédaction d'une DTD.
<!ATTLIST personne civilite (Mme | Melle | M) #REQUIRED >
III.3. Les Types ID, IDREF et IDREFS
Ce type sert à indiquer que l'attribut en question peut servir d'identifiant dans le fichier
XML. Deux éléments ne pourront pas posséder le même attribut possédant la même valeur.
Exemple de déclaration de type ID optionnel :
<?xml version="1.0" encoding=« UTF8"?>
<!DOCTYPE document SYSTEM "exemple1.dtd" ><document>
<personne IDpersonne="id_1">
<nom>Salah</nom><prenom>Mohamed</prenom></personne>
<personne IDpersonne="id_2">
<nom>Said</nom>
<prenom>Anas</prenom></personne>
<livre auteur="id_1">Mes nouvelles</livre>
</document>
Le fichier DTD correspondant est :
<?xml version="1.0" encoding="ISO88591"?>
<!ELEMENT document (personne*,livre*)>
<!ELEMENT personne (nom, prenom)>
<!ATTLIST personne IDpersonne ID #REQUIRED>

<!ELEMENT nom (#PCDATA)>
<!ELEMENT prenom (#PCDATA)>
<!ELEMENT livre (#PCDATA)>
<!ATTLIST livre auteur IDREF #IMPLIED>
Pour établir un lien entre des éléments XML de type plusieurs à plusieurs, on utilise le type
IDREFS
Exemple : pour chaque livre peut correspondre plusieurs auteurs :
Dans ce cas, la syntaxe suivante n’est pas valide :
<livre auteur="id_1" auteur="id_2">Mes nouvelles</livre>
On utilise la syntaxe suivante :
<livre auteur="id_1 id_2">Mes nouvelles</livre>
Le fichier DTD correspondant est :
<?xml version="1.0" encoding="ISO88591"?>
<!ELEMENT document (personne*,livre*)>
<!ELEMENT personne (nom, prenom)>
<!ATTLIST personne IDpersonne ID #REQUIRED>
<!ELEMENT nom (#PCDATA)>
<!ELEMENT prenom (#PCDATA)>
<!ELEMENT livre (#PCDATA)>
<!ATTLIST livre auteur IDREFS #IMPLIED>
IV. Exercices d’application

Exercice n°1 :
On souhaite compléter la structure du document XML de l’exercice précédent par les attributs
nom et prénom pour les auteurs et titre pour le livre, les sections et les chapitres.
Analysez la structure du nouveau document. Y a-t-il des simplifications possibles ?
Vérifiez, à l’aide de l’éditeur, que votre document est bien formé.
Exercice n°2 : Création d’une DTD
Créez une DTD livre.dtd à partir du document livre2.xml créé dans l’exercice n°1.
Exercice n°3:
Rédiger une DTD pour une bibliographie. Cette bibliographie :
contient des livres et des articles ;
les informations nécessaires pour un livre sont :

o son titre général ;
o les noms des auteurs ;
o ses tomes et pour chaque tome, leur nombre de pages ;
o des informations générales sur son édition comme par exemple le nom de
o l'éditeur, le lieu d'édition, le lieu d'impression, son numéro ISBN ;
les informations nécessaires pour un article sont :
o son titre ;
o les noms des auteurs ;
o ses références de publication : nom du journal, numéro des pages, année
o de publication et numéro du journal
on réservera aussi un champ optionnel pour un avis personnel.

Bibliographies
1) Chedly FEHRI « Cours Technologies XML », Ecole Nationale des Ingénieurs de Sfax,
2005/2006.
2) Alexandre Brillant «XML cours et exercices» Maison d’édition : Eyrolles 2007 ISBN : 978-
2-212-12151-3
3) http://xml.chez.com/initiation/
4) http://perso.livehost.fr/pdf/appweb/Cours3_XML.pdf
5) https://fr.wikipedia.org/wiki/Extensible_Markup_Language
6) http://www.grappa.univ-ille3.fr/~torre/Enseignement/tp/XML/
7) http://deptinfo.unice.fr/twiki/pub/Minfo03/ServletEtXml/00-xml-presentation.pdf

Cours Programmation Web 2 - 2016

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Programmation Web 2 - 2016

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Supérieur de la Recherche

Ce support de cours intitulé « Programmation Web 2 » est à l’intention des étudiants de

Table des matières

I.2. Création d’un objet ............................................................................................................ 21

V. Spécifications du langage XML ................................................................................................ 65

Chapitre n°1 : Introduction au langage JavaScript

A la fin de ce chapitre, l’étudiant doit être capable de :

 Comprendre la notion du langage côté client

Concept de base du langage JavaScript

Différents emplacements du code JavaScript

Les Entrées/Sorties en JavaScript

Enseignante : Mme Natija BOUZIDI 1

I.1. Les défauts du langage HTML

 Absence de toutes structures algorithmiques (conditionnelles ou itératives)

I.2. Les différentes solutions proposées

I.3. Présentation du JavaScript

Enseignante : Mme Natija BOUZIDI 2

Enseignante : Mme Natija BOUZIDI 3

II. Concept de base du langage JavaScript

II.1. Les objets JavaScript et leur hiérarchie

Au niveau du JavaScript, les différentes fonctionnalités offertes sont accessibles à travers

 Les objets bibliothèques de propriétés et de fonctions prédéfinis : permettent de fournir

Enseignante : Mme Natija BOUZIDI 4

Pour accéder à un objet, il faudra donner le chemin complet de l'objet en allant du

II.1.3. Les méthodes des objets

On peut utiliser les balises Html pour agrémenter ce texte

Enseignante : Mme Natija BOUZIDI 5

II.2. Les différents emplacements du code JavaScript

II.2.1. Utilisation d’un même fichier HTML

Enseignante : Mme Natija BOUZIDI 6

II.2.2. Extension .js pour scripts externes

II.3. Les Entrées/Sorties en JavaScript

Enseignante : Mme Natija BOUZIDI 7

Écrire un programme HTML contenant un script JavaScript qui affiche le message

Écrire un programme HTML contenant un script JavaScript qui affiche le message

Écrire un programme HTML contenant un script JavaScript qui affiche le message

Enseignante : Mme Natija BOUZIDI 8

Chapitre n°2 : Syntaxes de base de JavaScript

A la fin de ce chapitre, l’étudiant doit être capable de :

 Comprendre la syntaxe de base du langage JavaScript

Les variables et les opérateurs de base en JS

Les tableaux et les chaines de caractère en JS

Les structures de contrôles : les tests et les boucles

Les fonctions en JS : fonction prédéfini, fonction utilisateur

Enseignante : Mme Natija BOUZIDI 9

II.1. La déclaration et l’affectation

 La déclaration : consiste à donner un nom à la variable ; Le mot-clé var permet de déclarer

II.2. Les types de variables

Les types disponibles en JavaScript sont classiques :

Enseignante : Mme Natija BOUZIDI 10

II.3. Les booléens

Ils ne peuvent prendre que deux valeurs: true ou false.

II.4. Les opérateurs

II.4.1. Les opérateurs de calcul

Signe Nom Signification Exemple Résultat

II.4.2. Les opérateurs de comparaison

Signe Nom Exemple Résultat

II.4.3. Les opérateurs associatifs

Signe Description Exemple Signification Résultat

Enseignante : Mme Natija BOUZIDI 11

-= moins égal x -= y x=x–y 6

II.4.4. Les opérateurs logiques

Signe Nom Exemple Signification