Apprendre le developpement web plateforme


Télécharger Apprendre le developpement web plateforme

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


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

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

 

 

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

    Le besoin en JavaScript

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).

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.

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.

 

    Concept de base du langage JavaScript

     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).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 :

.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

     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>

<SCRIPT LANGUAGE="JavaScript">

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=''></SCRIPT>

Exemple: Le fichier :

<HTML>

<HEAD><TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript" SRC=""> </SCRIPT>

</HEAD>

<BODY>vous pouvez fermer cette fenêtre en cliquant

<A HREF="#" onClick="fin()"> ici </A>

</BODY>

</HTML>

Le fichier :

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.

     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 :

Écrire un programme HTML contenant un script JavaScript qui affiche le message d’Alert "Bonjour tout le monde !".

Exercice n°3 :

Écrire un programme HTML contenant un script JavaScript qui affiche le message "Bonjour tout le monde !" sur la page, utiliser un fichier .js contenance le code JavaScript.

 

Objectifs spécifiques

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

•   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

    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>.

    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.

     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.

     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).

     Les booléens

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

     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

     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 (\’).

     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.

     Les structures de contrôle

Elles sont identiques au langage C.

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.

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 */

}

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 + " ");

}

     Les fonctions

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.

Déclaration

               Pour     déclarer    ou    définir    une    fonction,     on

La syntaxe d'une déclaration de fonction est la suivante :

Syntaxe : 

utilise

le

mot-clé

function.

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.

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>

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.

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.

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:

function cube(nombre) { 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 function cube(nombre) {

var cube = nombre*nombre*nombre ;

}

Les fonctions prédéfinies

           IV.7.1.      eval

Ø Cette fonction exécute un code JavaScript à partir d'une chaîne de caractères.

<SCRIPT LANGUAGE="JavaScript">  

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 ISOLatin-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)!

 

Objectifs spécifiques

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

•   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

    Notion objet

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. 

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 ();

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()

    L’objet math

     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((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.LN2, Math.LN10, Math.E, Math.LOG2E, Math.LOG10E

     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) ;

}

     L’objet string

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.

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) ;

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 = ()

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 = ()

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 = ()

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 = ()

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 = (URL)

Exemple:

y = " un texte "; document.write(y.link("")) ;

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")) ;

     L’objet date

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. 

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 = Info();

Ø  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().

    L’objet array

     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é. 

     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:

var MonTableau = new Array (2) ;

MonTableau [0] = 7 ;

MonTableau [1] = 4 ; 

 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:

var MonTableau = new Array (5) ; 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 MonTableau = new Array (2) ; MonTableau [0] = 7 ; 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:

var MonTableau = new Array (2) ; 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:

var MonTableau = new Array (5) ; 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…

     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:

var MonTableau = new Array (2) ; 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:

var MonTableau = new Array (4) ;

MonTableau [0] = “Moi” ;

MonTableau [1] = “Toi” ;

MonTableau [2] = “Lui” ;

MonTableau [3] = “Elle” ; MonTableau.reverse() ;

document.write ((‘ ‘)) ; () ;

document.write ("<br>" + (‘ ‘)) ;

     L’objet image

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>. 

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="='2.gif';" onMouseOut="='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);">

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:

= ‘’ ;

Dans ce cas précis, l’image change et 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.

    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 = "" L’URL du serveur =

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 = ""

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.

 

Objectifs spécifiques

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

•   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

    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. 

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=’’>

………

</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. 

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>

ii.     Paramètres HTML

ü  name : le nom du champ (servira lors de la programmation)

ü  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.

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.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>

ii.      Paramètres HTML 

ü  name : le nom du champ (servira lors de la programmation)

ü  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é).


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 le champ password.

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

ii.      Paramètres HTML

ü  name : le nom du champ (servira lors de la programmation) il doit être identique pour chaque choix.

ü  value : la valeur que vous voulez afficher dans le champ (facultatif).

ü  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) iii.Propriétés JS 

ü  name : indique le nom du contrôle.

ü  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

ii.      Paramètres HTML

ü  name : le nom du champ (servira lors de la programmation). Il doit être différent pour chaque choix.

ü  value : la valeur que vous voulez afficher dans le champ (facultatif).

ü  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)

Propriétés JS

ü  name : indique le nom du contrôle.

ü  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.

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>

ii.      Paramètres HTML  

ü  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.

ü  value : la valeur que vous voulez afficher dans le champ (facultatif).

ü  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).

       iii.Propriétés JS 

ü  name : indique le nom du contrôle.

ü  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.

Bouton

        I.5.1.         Bouton simple

i.      Syntaxe HTML 

<input type=”button” name=”nom” value=”valeur”>

ii.      Paramètres HTML  

ü  name : le nom du champ (servira lors de la programmation).

ü  value : la valeur que vous voulez afficher sur le bouton.

Propriétés JS

ü  name : indique le nom du contrôle.

ü  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”>

ii.     Paramètres HTML  

ü  name : le nom du champ (servira lors de la programmation).

ü  value : la valeur que vous voulez afficher sur le bouton.

iii.      Propriétés JS 

ü  name : indique le nom du contrôle.

ü  value : indique la valeur actuelle du bouton.

ü  defaultselected : indique la valeur par défaut du bouton.

        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”>

ii.      Paramètres HTML  

ü  name : le nom du champ (servira lors de la programmation).

ü  value : la valeur que vous voulez afficher sur le bouton.

       iii.Propriétés JS  

ü  name : indique le nom du contrôle.

ü  value : indique la valeur actuelle du bouton.

ü  defaultselected : indique la valeur par défaut du bouton.

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”>

ii.      Paramètres HTML  


ü   name : le nom du champ (servira lors de la programmation).

ü   value : la valeur qui sera contenue dans le contrôle. iii.Propriétés JS  

ü   name : indique le nom du contrôle.

ü   value : indique la valeur actuelle du contrôle.

ü   defaultselected : indique la valeur par défaut du contrôle.

    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.

     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.

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..>

     Le chargement

           II.3.1.       Load

Lorsque la page que vous consultez finit de se charger.

Gestionnaire d’événement : 

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.

Gestionnaire d’événement : 

                                                                                        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.

Gestionnaire d’événement : 

onError

Exemple:

<img src="" onError=”alert(‘Erreur de chargement !’) ;">

Balises supportées : <body>, <frameset>, <img>

           II.3.4.        Abort

Lorsque vous interrompez le chargement d’une image.

Gestionnaire d’événement : 

onAbort

Exemple :

<img src="" onAbort=”alert(‘Vous avez interrompu le chargement de l’image !’) ;">

Balises supportées : <img>

     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.

Gestionnaire d’événement : 

onMouseOver

Exemple:

<a href="" onMouseOver=”alert(‘Pour aller sur

, cliquer ici’) ;"></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.

Gestionnaire d’événement : 

onMouseOut

Exemple:

<a href="" onMouseOut=”alert(‘Vous ne voulez pas y aller ?’) ;"></a>

Balises supportées : <a href…>, <area href…>

           II.5.      Le focus

       Focus

Lorsque vous activer un contrôle texte ou sélection.

Gestionnaire d’événement : 

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.

Gestionnaire d’événement : 

onBlur

Exemple:

<input type="text" value="votre nom" name=”nom” onBlur=”alert(‘Vous

n\’avez rien oublié ?’) ;">

Balises supportées : <input type="text">, <select>, <textarea>, <input type="password">

     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.

Gestionnaire d’événement : 

onChange

Exemple:

<input type="text" value="votre nom" name=”nom” onChange=”alert(‘Vous avez changé votre nom ??’) ;">

Balises supportées : <input type="text">, <select>, <textarea>, <input type="password">

     La sélection

Lorsque vous sélectionnez du texte dans un champ de texte.

Gestionnaire d’événement : 

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>

     L’envoi

Lorsque vous cliquez sur un bouton « submit » d’un formulaire de type « post » ou « get ».

Gestionnaire d’événement : 

onSubmit

Exemple:

<input type="submit" value="Envoyer" name=”envoi”

onSubmit=”alert(‘C’est parti !’) ;">

Balises supportées :  <input type="submit">

     Le reset

Lorsque vous sélectionnez un champ de texte.

Gestionnaire d’événement : 

onReset

Exemple:

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

efface tout !’) ;">

Balises supportées : <input type="reset">

     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).

 

Objectifs spécifiques

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

•   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

    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. 

    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 :

 

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.

     Accès aux éléments 

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. 

getElementsByTagName() 

Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments de la famille. 

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. 

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. 

     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. 

Les attributs : Via l'objet Element  

Pour interagir avec les attributs, l'objet Element nous fournit deux méthodes :

v  getAttribute() : permet de récupérer un attribut.

v  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. 

La classe 

l'attribut class d'un élément HTML, il suffit d'utiliser className. 

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.  

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. 

    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

parentNode

L’attribut renvoie son noeud parent. S’il n’a pas de noeud parent, il renvoie NULL

childNote

L’attribut renvoie un tableau de tous ses noeuds enfants. S’il n’a pas de noeud enfant, alors il renvoie un tableau vide.

firstChild

L’attribut renvoie son premier noeud enfant. S’il n’a pas de noeud enfant, il renvoie NULL

lastChild

L’attribut renvoie son dernier noeud enfant. S’il n’a pas de noeud enfant, il renvoie NULL

nextSilbing

L’attribut renvoie le noeud frere qui le suit. S’il n’a pas de noeud suivant, il renvoie NULL

previousSilbing

L’attribut renvoie le noeud frere qui le précède. S’il n’a pas de 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 :

v  le noeud <html> n’a pas de parent : c’est la racine de l’arbre ;

v  le parentNode des noeuds <head> et <body> est le noeud <html> ;

v  le parentNode du noeud texte “Bonjour !” est le noeud <p> ;

par ailleurs,

v  le noeud <html> a deux childNodes : <head> et <body> ;

v  le noeud <head> a un childNode : le noeud <title> ;

v  le noeud <title> aussi n’a qu’un childNode : le noeud texte “Introduction à DOM” ;

v  le noeud <h1> est previousSibling de <p> et ce dernier est nextSibling de <h1> ; les deux sont childNodes de <body> ;

v  l’élément <head> est le firstChild de l’élément <html> ;

v  l’élément <body> est le lastChild de l’élément <html> ;

v  l’élément <h1> est le firstChild de l’élément <body> ; v l’élément <p> est le lastChild de l’élément <body>.

     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

createElement

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 :

1 document.createElement("div")

createTextNode

Cette méthode permet de créer un élément de type Text.

appendChild

Cette méthode permet d’insérer un noeud en dernière position de ses éléments enfants.

1   nouveauDiv = document.createElement("div");

2   text = document.createTextNode("Bonjour à tous");

3   nouveauDiv.appendChild(text);

4   .appendChild(nouveauDiv);

insertBefore

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

1   noeudA = document.createElement("div");

2   .insertBefore(noeudA, noeudB);

replaceChild

Cette méthode permet de remplacer un noeud enfant A par un noeud enfant B.

1 elementParent.replaceChild(noeudB, noeudA);

cloneNode

Cette méthode permet de cloner un noeud A, et de facon optionnel ses enfants, et un noeud B.

1 noeudB = noeudA.cloneNode(true);

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é.

removeChild

Cette méthode permet de supprimer un noeud enfant.

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é.  

           

 

Objectifs spécifiques

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

•   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

    XML, qu'est ce que c'est ? 

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 balisesqui permettent d'organiser les données de manière structurée 

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 : )

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. 

    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.

     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.

     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).

     Les principales utilisations de XML  

Les principales utilisations de XML peuvent être résumées en deux points : 

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) 

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. 

     Intérêt de XML 

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. 

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. 

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. 

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></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> </email> 

</address> 

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. 

   Spécifications du langage XML 

     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. 

     Résumé des spécifications 

Ø

Ø

Ø

           Ø              ent doit contenir un et un seul élément racine 

Ø

Ø

Ø

Ø

     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 ""> 

On peut enrichir la DTD externe avec des déclarations locales :

<!DOCTYPE nom_d_élément SYSTEM "«[ 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 ] > 

     XML : les commentaires 

En XML les commentaires se notent : 

<!--texte du commentaire --> 

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-- >  /> 

      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>. 

     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>  <article> </article> 

est invalide. Il faut la corriger comme suit : 

<?xml version="1.0" encoding="iso88591"?> 

 

Enseignante : Mme Natija BOUZIDI 67 <stock> 

<article> </article> 

<article> </article> 

</stock> 

     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. 

     Les références d'entités 

Il existe des entités prédéfinies : 

v  &amp; donne & 

v  &lt; donne < 

v  &gt; donne > 

v  &quot; donne ’’ 

v  &apos; donne ‘ 

v  &#nnn; donne le caractère de code décimal nnn, 

v  &#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 luimê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).

 

Objectifs spécifiques

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

•   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

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. 

    Les concepts de base des DTD

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. 

v  Syntaxe d’une DTD externe : 

<!DOCTYPE Élément-racine Type [identifiant] Emplacement>  

v  Syntaxe d’une DTD interne : 

<!DOCTYPE Élément-racine  

[  

Les Déclarations Internes  

]  

>  

v  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); 

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"?> 

     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: 

v Une balise avec un contenu de type texte: 

Exemple:

<nom> Boudhief </nom> 

v Une balise vide  Exemple :

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

v 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. 

     É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)> 

     É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="" alt="Paysage de neige" /> 

     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> 

     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. 

     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. 

     É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> 

     É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>. 

    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. 

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>  

 

Enseignante : Mme Natija BOUZIDI 77 Exemples d'utilisations :  

<elt attr="Chaîne de caractères"></elt>  

<!ENTITY car "caractères"><elt attr="Chaîne de &car;">( )</elt>  

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 >  

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 "" ><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)>  

 

Enseignante : Mme Natija BOUZIDI 78 <!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 à partir du document 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.

             

 

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)  

4)  

5)  

6)  

7)  



9