PDF Conception Dx27un Site Web DD

Plan du cours
Conception d'un
d'un s ite WEB
1
u Historique
u HyperDocuments
u Site Web
u Atelier de développement
u Pages statiques : langage HTML
u Programmation C G I :
: langage Perl
u Pages dynamiques : J avas
avascc ri pt
J ean DE MAR TIN I © 14.02.00
Historique
Conception d'un
d'un s ite WEB
2
u Projet "World Wide Web" présenté en 1989, au CERN

(Genève), par TimeBd'informat
mondiall d'échang
mondia erners
erne
d'i rs Leeions . un réseau
: pour
nformations
u De nombreux éléments favorables :
l développement du réseau de transport Internet ,
l système distribué pour l'annuaire des machines (DNS),
l besoin de la communauté mondiale des physiciens (10 000
chercheurs),
l une idée simple,
l compétences de l'initiateur du projet.

HyperDocuments
Conception d'un
d'un s ite WEB
3
u Structure de document adaptée à la consultation

informatique :
l petites pages,
l liens de navigation entre pages,
l exemples : documents Videotex, aides en ligne...
u Etendue au Multimedia :
l liens vers des "pages sonores" ou des "pages video".
u La consultation d'un hyperdocument nécessite des
outils de navigation adaptés : butineurs (browsers),
navigateurs, fureteurs ...
Navigateurs célèbres
Conception d'un
d'un s ite WEB
4
u Un des premiers : Mos aic

aic..
u Le plus répandu : Nets
Netscape
cape navig at
ator.
or.
u Le dernier en date : Inte
Internet
rnet E xplorer.
u Un navigateur joue plusieurs rôles :
l présentation d'un hyperdocument,
l accès aux pages distantes en suivant les liens.
u De nombreux greffons de présentation : les plugins.
l documents à imprimer : formats .pdf ...
l séquences sonores : formats .au, .wav ...
l images fixes : formats .gif, .jpeg ...
l images animées : formats .avi, .mov, .mpeg ...

WYSIWYG ? sûrement pas !

Conception d'un
d'un s ite WEB
5
u Brisons immédiatement un mythe actuel.

u C'est la structure d'un hyperdocument qui est décrite
et non pas sa présentation : langage HTML
(Hype
(Hy perText
rText Mark
Mark Up Languag e).
u Le navigateur interprète cette description puis
compose le document "au mieux" compte tenu du
contexte.
l résolution de l'écran,
l couleurs disponibles,
l polices disponibles,
l taille des images à afficher,
l taille de la fenêtre d'affichage.
Un type de document, une

Conception d'un
d'un s ite WEB
structure
6
u Un roman se lit :
:
l les pages se suivent,
l quelques notes de bas de page,
l une table des matière très sommaire.
u Un rappo
rapport
rt te
techni
chni que se consulte :
l les pages se suivent,
l des notes de bas de page,
l des renvois dans le document (texte, figures...),
l des renvois en annexe,
l une table des matières fournie,
l un index,
l une bibliographie (renvois hors du texte).

Documents interactifs
Conception d'un
d'un s ite WEB
7
u Quelques constatations :
l un écran est petit (en général),
l lire un écran est pénible,
l changer d'écran est rapide.
u Certains documents gagnent à être interactifs :
l notices techniques,
l documents de présentation,
l documentations commerciales.
u Certains documents ne peuvent pas être interactifs :
l documents de réflexion.
Un journal, un site Web

Conception d'un
d'un s ite WEB
8
u Un journal est conçu autour de sa une qui :

l identifie le journal (logo, typographie, mise en page),
l attire l'oeil (couleurs, iconographie),
l donne envie d'acheter le journal pour lire la suite des articles
introduits "à la une".
u Un service Web poursuit souvent les mêmes objectifs
et sera structuré de la même façon.
u Un détail important :
l les frais de consultation, et donc l'assiduité
l'assiduité du client, sont fonction
du temps de chargement des pages.

Structure d'un
Conception d'un
d'un s ite WEB
hyperdocument
9
u Un hyperdocument est articulé autour de sa page

d'accueil : la home pa
pagg e.
u La home pag
pag e représente un compromis difficile :
l doit être attrayante, colorée, animée,
l doit être claire,
l doit se charger vite !
u Le document doit être structuré de telle sorte qu'on
ne s'y perde pas :
l danger de la présence de trop de liens externes.
Edition sur le Web

Conception d'un
d'un s ite WEB
10
u Le réseau peut simplement servir de support de

diffusion pour un ouvrage :
l pas de frais d'impression,
l pas de frais de distribution.
u Le service correspondant a la structure d'une librairie
virtuelle et ne propose qu'un catalogue d'ouvrages.
u Les documents "intéressants" sont sous une forme
imprimable essentiellement :
l format pos ts cr ipt ,
l format acrobat .

Localisation d'un document

Conception d'un
d'un s ite WEB
11
u Un docu
document
ment Web est repéré par son UR L (Unique
Ressource Location).
u URL la plus simple :
protocole://serveur/
u URL courante :
protocole://serveur/repert/.../document
protocole://serveur/repert/.../document
u Quelques exemples :
http://www.inria.fr/
http://www.ti.com/
http://www.yahoo.com/
http://verdon.unice.fr/~jdem/
Architecture de fichiers Web

Conception d'un
d'un s ite WEB
12
racine de l'hôte
/
usr bin ...
local ...
... etc
racine du serveur
... htdocs
espace du serveur

Protection des documents

Conception d'un
d'un s ite WEB
13
u Le système de protection est double :

l protection de base des fichiers par le système d'exploitation de
l'hôte (Unix, Windows NT ...),
l protection des documents par le serveur
ser veur lui-même.
u Le serveur Web peut autoriser l'accès :
l aux lecteurs enregistrés : nom , mot de
de pas
pas s e
l aux lecteurs accédant depuis un domaine particulier (au sens
TCP/IP),
l aux lecteurs accédant depuis une machine particulière.
u Attention. Nous verrons qu'il est possible, dans
certains cas, de contourner ces protections.
World Wide Web

Conception d'un
d'un s ite WEB
14
Serveur
de pages
domaine
domaine
Serveur
"proxy"
Serveur
Client de noms
(DNS)

Quelques protocoles utiles

Conception d'un
d'un s ite WEB
15
HTTP
HTTP : protoc
protocol
ole
e d'é
d'éch
chan
ange
ge de do
docu
cume
ment
nts
s HTM
HTML
L
(HyperText Transfert Protocol)
FTP
FTP: proto
pro toco
cole
le d'
d'éc
écha
han
nge de fi
fich
chie
iers
rs que
uelc
lco
onq
nque
ues
s
(File Transfert Protocol).
SMTP
SMTP : prot
protoc
ocol
ole
e d'é
d'éch
chan
ange
ge de co
cour
urri
rier
er él
élec
ectr
tron
oniq
ique
ue..
TELNET
TELNET : proto
protocole
cole de
de connexion
connexion à distance.
distance.
Atelier de développement
Conception d'un
d'un s ite WEB
16
u Tout au long de ce cours nous supposerons que nous

nous trouvons dans la configuration suivante :
l le serveur est hébergé sur une machine Unix , le logiciel-serveur
Web étant A pache .
l le poste de développement est une machine en réseau de type PC
sous Windows 95 ou Window
Windowss NT .
u Le poste de développement utilisé :
l un outil pour la conception de sitesWeb : Dreamweaver de
Macromedia,
l un outil de dessin pour la construction ou la mise en forme des
images : Fireworks de Macromedia,
l un outil de transfert de fichiers : WS_FTP,
l un outil de connexion à distance : telnet,
l un navigateur : Internet Explorer 5.0.

Outils HTML
Conception d'un
d'un s ite WEB
17
u Il existe de nombreux éditeurs HTML :

l Front Page de Microsoft,
l HoT Metal de SoftQuad,
l Homesite de Allaire,
l Dreamweaver de Macromedia, ...
u Ceux qui permettent une édition WYSIWYG donnent
des résultats très intéressants aujourd’hui.
u Il existe également des convertisseurs de format
pouvant donner d'assez mauvais résultats.
l deux exceptions : LateX2HTML et RTF2HTML.
Outils de dessin
Conception d'un
d'un s ite WEB
18
u Les images utilisées sous de type bitmap.

u Il existe de nombreux outils de dessin bitmap :
l Paint Shop Pro de JASC,
l 3D Studio,
l Fireworks de Macromedia, ...
u Un outil de dessin doit être capable de :
l lire et produire différents formats d'image : .gif et .jpeg au moins,
l de produire des dessins à fond transparent,
u l'interfaçage avec un scanner (format twain par
exemple) est utile.

Outils de validation
Conception d'un
d'un s ite WEB
19
u La présentation d'une page Web dépendant du

navigateur, il est nécessaire de disposer de quelques
navigateurs sous différentes versions pour tester le
look d'une
d'une page :
l Nestscape 3.0 et 4.x — les versions 4.x est la plus répandue,
l Internet Explorer 4.0 et 5.0 — les versions antérieures sont
beaucoup trop rustiques.
l C’est la version Internet Explorer 5.x qui, aujourd’hui permet l’accès
au plus grand nombre de sites.
Outils de transfert de fichiers

Conception d'un
d'un s ite WEB
20
u Le service est construit sous la forme d'une maquette

dans l'espace
Lorsqu'il disqueil du
est validé, fautposte de développement.
le transférer dans l'espace
disque du serveur.
u WS_Ftp de IPSwitch donne d'excellents résultats.

Outil de connexion à
Conception d'un
d'un s ite WEB
distance
21
u Certains paramétrages et même certains

développements (programmation CGI) ne peuvent se
faire et/ou se valider que sur le serveur lui-même.
u Il est donc indispensable de pouvoir se connecter à
distance.
u QVT/Net de QPC Software donne d'excellents
résultats.
Le langage HTML
Conception d'un
d'un s ite WEB
22
u Ces quelques URL http://... vous donneront accès à

une information complémentaire.
l www.w3.org/
l www.w3.org/TR/REC-html32.html
l nephi.unice.fr/CoursHTML/
l www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml
u Le langage HTML décrit la structure d'un document à
l'aide de balises qui délimitent un élément du
document
l <NOM_de_BALISE paramètres>...</NOM_de_BALISE>
u Tout document HTML est délimité par :
l <HTML>...</HTML>

Structure d'un document

Conception d'un
d'un s ite WEB
HTML
23
u Un document HTML comprend toujours 2 éléments :

entête : <HEAD>...</HEAD>
corps : <BODY paramètres >...</BODY>
u La structure de base d'un document HTML est alors :
<HTML>
<HTML>
<HEAD>
<HEAD>
...
...
</HEAD>
</HEAD>
<BODY paramètres >>
<BODY
...
...
</BODY>
</BODY>
</HTML>
</HTML>
En-tête de document
Conception d'un
d'un s ite WEB
24
u Une en tête comprend deux parties :

l un titre de la page,
l une base de référence
u Le titre de la page est décrit par :
<TITLE>...</TITLE>
u La base de référence définit la racine d'accès par
défaut à toutes les URL utilisées dans la page :
<BASE HREF="UR L ">
u Si la base de référence n'est pas définie, toutes les
URL utilisées sont repérées par rapport au répertoire
de la page en cours.

Ma première page HTML

Conception d'un
d'un s ite WEB
25
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Ma
<TITLE>Ma premiè
première
re page</TITLE>
première page</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
Ma
Ma premiè
premi ère
re page
première page Web.
Web.
</BODY>
</BODY>
</HTML>
</HTML>
définition du caractère "è"
Et pour la voir ?
Conception d'un
d'un s ite WEB
26
u Tout d'abord, il faut taper le texte précédent en
textes) : un éditeur de
utilisant de textes (pas un traitement de
l EDIT de DOS
l NOTEPAD de Windows 3.x
l WORDPAD de Windows 95 (en mode texte).
u Cette page est, par exemple, la page d'accueil de
votre futur service :
l la sauvegarder sous le nom index.html dans le répertoire qui
servira de racine à la maquette de votre service.
u Utiliser un navigateur, hors connexion, en simple
consultation de fichier local.

La voici !
Conception d'un
d'un s ite WEB
27
Son titre
Quelques précisions
Conception d'un
d'un s ite WEB
28
u Il est souvent utile d'inclure des commentaires dans

votre description de page :
<! -- auteu
auteurs
rs : Tom & Jerry -->
u Le texte en commentaire n'est pas interprété par le
navigateur.
u Un premier pseudo-commentaire est utilisé par le
navigateur pour déterminer la version du langage
HTML utilisée dans la page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Caractères spéciaux
Conception d'un
d'un s ite WEB
29
u La plupart des alphabets comportent des caractères

utilisant des signes diacritiques qui sont
indisponibles sur le clavier utilisé. Ces caractères ont
donc été codés :
u Exemples :
é é ô ô
è è â â
ê ê ê ê
à à ï ï
ü ü ë ë
ç ç
Paragraphes...
Conception d'un
d'un s ite WEB
30
u En fait notre première page a été acceptée par le
paragraphe par
navigateur nonpure g enti
entilles
signalé. Illless
s e carla
faudrait elle contient
décrire par un
:
<!DOCTYPE
<!DOCTYPE HTML
HTML PUBLIC
PUBLIC "-//W3C//DTD
"-//W3C//DTD HTML
HTML 3.2
3.2
Final//EN">
Final//EN">
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Ma
<TITLE>Ma première
</HEAD>
</HEAD>
<BODY>
<BODY>
<P>Ma
<P> Ma première
<P>Ma première page
page Web.</P>
Web.</P>
Web.</P>
</BODY>
</BODY>
</HTML>
</HTML>

...Paragraphes
Conception d'un
d'un s ite WEB
31
u La meilleure présentation d'un paragraphe est

déterminée par le navigateur lorsqu'il compose la
page.
u Pour faciliter la compréhension de la structure du
document HTML, on présente, en général, les
paragraphes sur une seule ligne (pouvant largement
déborder de l'écran de saisie).
Ma deuxième page HTML

Conception d'un
d'un s ite WEB
32
u On remarque les indentations qui facilitent la lecture.

<!DOCTYPE
<!DOCTYPE HTML
HTML PUBLIC
PUBLIC "-//W3C//DTD
"-//W3C//DTD HTML
HTML 3.2
3.2
Final//EN">
Final//EN">
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Ma
<TITLE>Ma première
</HEAD>
</HEAD>
<BODY>
<BODY>
<P>Ma
<P>Ma première
première page
page Web.</P>
Web.</P>
<P>Un
<P>Un deuxième
deuxième paragraphe
paragraphe permet
permet
de
de la
la meubler
meubler un
un peu.</P>
peu.</P>
</BODY>
</BODY>
</HTML>
</HTML>

Que voici
Conception d'un
d'un s ite WEB
33
Les paragraphes
Eléments d'une page

Conception d'un
d'un s ite WEB
34
u Une page peut comporter :

l des paragraphes,
l des titres de paragraphes,
l des images,
l des ancres (liens),
l des listes à puces, à numéros, descriptives,
l des tableaux,
l des formulaires,
l des décorations.
u Des portions de textes peuvent être mises en
évidence en utilisant différents s tyles .

Titres de paragraphes...
Conception d'un
d'un s ite WEB
35
u On dispose de 6 niveaux de titres :

<Hn paramètres
paramètres >...</Hn> avec n = 1..6
<BODY>
<BODY>
<H1
<H1 ALIGN="LEFT">Niveau
ALIGN="LEFT">Niveau 1</H1>
1</H1>
<H2
<H2 ALIGN="CENTER">Niveau
ALIGN="CENTER">Niveau 2</H2>
2</H2>
<H3
<H3 ALIGN="RIGHT">Niveau
ALIGN="RIGHT">Niveau 3</H3>
3</H3>
<H4
<H4 ALIGN="JUSTIFY">Niveau 44 :: Ce
ALIGN="JUSTIFY">Niveau Ce titre
titre est
est
censé être
censé être
justifié.</H4>
justifié.</H4>
</BODY>
</BODY>
...Titres de paragraphes
Conception d'un
d'un s ite WEB
36

Styles de paragraphes...
Conception d'un
d'un s ite WEB
37
u Les paragraphes peuvent être :

l alignés à gauche,
l alignés à droite,
l centrés.
<BODY>
<BODY>
<P
<P ALIGN="LEFT"
ALIGN="LEFT">On
>On the night of 3rd December
ALIGN="LEFT">On
the
the
<P
<P ALIGN="CENTER"
ALIGN="CENTER">On
ALIGN="CENTER">On
<P
<P ALIGN="RIGHT"
ALIGN="RIGHT">On
ALIGN="RIGHT">On
th
th
</BODY>
</BODY>
...Styles de paragraphes
Conception d'un
d'un s ite WEB
38

Quelques décorations
Conception d'un
d'un s ite WEB
39
u On peut introduire des ruptures de lignes par <BR>

u On peut également introduire des traits de séparation
par <HR paramètres>
u Les espaces excédentaires sont supprimés sauf s’il
sont forcés par
<BODY>
<BODY>
<P>Un
<P>Un paragraphe
paragraphe peut
peut contenir
contenir un
un saut
saut à
à la
la ligne
ligne
interne
interne comme
comme ici
ici :<BR>
::<BR>
<BR> sans
sans
sans que
quepour
pourautant
autanton
onquitte
quitte le le
paragraphe.</P>
paragraphe.</P>
<P>On
<P>On peut
peut également
également introduire
introduire  &nbsp
   des
introduire   des;des traits
traits
de
de séparations</P>
séparations</P>
<HR
<HR ALIGN="LEFT"
ALIGN="LEFT" SIZE="2"
SIZE="2" WIDTH="100"
WIDTH="100" NOSHADE>
NOSHADE>
<HR
<HR ALIGN="CENTER"
ALIGN="CENTER" SIZE="4"
SIZE="4" WIDTH="100"
WIDTH="100" COLOR="Navy">
COLOR="Navy">
<HR
<HR ALIGN="RIGHT"
ALIGN="RIGHT" SIZE="8"
SIZE="8" WIDTH="100">
WIDTH="100">
</BODY>
</BODY>
Pour voir ceci...

Conception d'un
d'un s ite WEB
40

Ou bien cela !
Conception d'un
d'un s ite WEB
41
Multicolonnage
Conception d'un
d'un s ite WEB
42
u Certains navigateurs permettent le multicolonnage du

texte.
<BODY>
<BODY>
<MULTICOL
<MULTICOL COLS="2"
COLS="2" WIDTH="100%"
WIDTH="100%" GUTTER="10">
GUTTER="10">
<P ALIGN="JUSTIFY">Sans
<P ALIGN="JUSTIFY">Sans doute les
les notes
notes que
que nous
nous entendons
entendons
<P
<P ALIGN="RIGHT"><I>Du
ALIGN="RIGHT"><I>Du côté
côté de
de chez
chez Swann
Swann -- M
M
</MULTICOL>
</MULTICOL>
</BODY>
</BODY>

Ce qui donne ceci...

Conception d'un
d'un s ite WEB
43
Ou bien cela
Conception d'un
d'un s ite WEB
44

Styles physiques
Conception d'un
d'un s ite WEB
45
u Les styles physiques sont des conteneurs permettant

de définir le style d'affichage d'une portion de texte :
<B>...</B> en g r as,
< I> ...< /I> en italique,
<U>...</U> soulignée,
<SUP>
<S UP>.. ...<
.</S
/SUP>
UP> en ex
expoposa
sant
nt,,
<SUB
<S UB>. >...<
..</SU
/SUB>
B> en in
indi
dice
ce,,
<TT>...</TT> en style télétype.
Portion de texte <B>en gras</B>,<BR>

Portion de gras</B>,<BR>
Portion
Portion de
de texte <I>en italique</I>,<BR>
italique</I>,<BR>
Portion
Portion de texte
texte <U>soulignée</U>
<U>soulignée</U>,<BR>
,<BR>
<U>soulignée</U>,<BR>
Portion
Portion de texte <SUP>exposant</SUP>,<BR>
<SUP>exposant</SUP>
texte <SUP>exposant</SUP>,<BR>,<BR>
Portion
Portion de texte <SUB>indice</SUB>
<SUB>indice</SUB>,<BR>
,<BR>
<SUB>indice</SUB>,<BR>
Portion
Portion de
de texte <TT>en style télétype</TT>.
télétype</TT>.
Ce qui donne
Conception d'un
d'un s ite WEB
46

Styles logiques
Conception d'un
d'un s ite WEB
47
u Les styles logiques sont des conteneurs permettant

de définir un style d'affichage laissé à la discrétion du
navigateur :
l <STRONG>...</STRONG> pour insister,
l <EM>...</EM> pour mettre en évidence,
l <BLOCK
<BLOCKQUO
QUOTE>
TE>...
...</BL
</BLOCK
OCKQUO
QUOTE>
TE> une cita
citatio
tion,
n,
l <PRE>...</PRE> tel quel,
l <ADRESS>...</ADRESS> une adresse.
<P>Cette
<P>Cette portion
portion de
de texte, <STRONG>j'insiste</STRONG>
<STRONG>j'insiste</STRONG>,
<STRONG>j'insiste</STRONG>,, ne
<EM>doit
<EM>doit pas
pas être
être négligée</EM>.
négligée</EM>
négligée</EM>.. SunSun Tse
Tse dit
:</P>
:</P>
<P><BLOCKQUOTE>Prenez
<P> <BLOCKQUOTE>Prenez
<P><BLOCKQUOTE>Prenez
<P><BLOCKQUOTE> Prenez le nom de tous
tous vos officiers, inscrivez-
les
les sur
sur un
un répertoire spécial avec l'indication de de leurs
capacités
capacités et et de
de leurs
leurs aptitudes,
aptitudes, afin
afin que
que chacun
chacun soit
soit
employé
employé suivant
suivant ses
ses qualités.</BLOCKQUOTE
qualités.</BLOCKQUOTE>
></P>
qualités.</BLOCKQUOTE></P>
qualités.</BLOCKQUOTE> </P>
Présentation Netscape 3.0

Conception d'un
d'un s ite WEB
48

Les listes
Conception d'un
d'un s ite WEB
49
u HTML permet la définition de 3 types de listes :

l listes à puce : <UL>...<LI>...</UL>
l listes numérotées : <OL>...<LI>...</OL>
l listes descriptives : <DL>...<DT>...<DD>...</DL>
u Les puces peuvent être choisies parmi :
l ¡
u Les numérotations peuvent être choisies parmi :

l 1. 2. 3. ...
l a. b. c. ...
l A. B. C. ...
l i. ii. iii. ...
l I. II. III. ...
Listes à puces
Conception d'un
d'un s ite WEB
50
<MULTICOL
<MULTICOL COLS="2"
GUTTER="10">
<P>Un
<P>Un bon pot-au-feu nécessite :</P>
bon pot-au-feu nécessite :</P>
<UL
<UL TYPE="DISC">
TYPE="DISC">
<LI>des
<LI>des poireaux,
poireaux,
<LI>des carottes,
<LI>des carottes,
<LI>des
<LI>des navets.
navets.
</UL>
</UL>
<BR>
<BR>
<P>Un
<P>Un bon
bon pot-au-feu
pot-au-feu nécessite
nécessite :</P>
:</P>
<UL
<UL TYPE="SQUARE">
TYPE="SQUARE">
<LI>des
<LI>des poireaux,
poireaux,
<LI>des
<LI>des carottes,
carottes,
<LI>des
<LI>des navets.
navets.
</UL>
</UL>
</MULTICOL>
</MULTICOL>

Présentées ainsi
Conception d'un
d'un s ite WEB
51
Les listes numérotées

Conception d'un
d'un s ite WEB
52
<MULTICOL
<MULTICOL COLS="2"
GUTTER="10">
<P>Un
<P>Un
<OL bon
bon pot-au-feu
nécessite :</P>
:</P>
<OL TYPE="1">
TYPE="1">
<LI>des
<LI>des poireaux,
poireaux,
<LI>des
<LI>des carottes,
carottes,
<LI>des
<LI>des navets.
navets.
</OL>
</OL>
<BR>
<BR>
<P>Un
<P>Un bon
bon pot-au-feu
nécessite :</P>
:</P>
<OL TYPE="I">
<OL TYPE="I">
<LI>des
<LI>des poireaux,
poireaux,
<LI>des
<LI>des carottes,
carottes,
<LI>des
<LI>des navets.
navets.
</OL>
</OL>
</MULTICOL>
</MULTICOL>

Présentées ainsi
Conception d'un
d'un s ite WEB
53
Les listes de définitions

Conception d'un
d'un s ite WEB
54
u Ce type de liste est particulièrement indiqué pour

construire un glossaire ou un dictionnaire.
<DL>
<DL>
<DT>FLAMBARD<DD>n.
<DT>FLAMBARD<DD>n. m.m. <I>Fam.</I>
<I>Fam.</I> Fanfaron,
Fanfaron, orgueill
orgueill
<DT>FLAMBEAU<DD>n.
<DT>FLAMBEAU<DD>
<DT>FLAMBEAU<DD>n.n. m.
m. Torche,
Torche, chandelle
chandelle de
de cire
cire ou
cire ou
<DT>FLAMBÉE<DD>n.
<DT>FLAMBÉE<DD>n.
DD>n. f.f. Fe
<DT>FLAMBÉE<DD>n.
<DT>FLAMBÉE< Feu
uc
Feu clair
lair de
clair de menu
menu bois.
bois.
</DL>
</DL>
u Si les termes à définir sont courts, on peut la

compacter.
<DL
<DL COMPACT>
COMPACT>
<DT>N<DD>Newton.
<DT>N<DD>Newton.
<DT>Nm<DD>Newtonmètre.
<DT>Nm<DD>Newtonmètre.
<DT>Oe<DD>Oersted.
<DT>Oe<DD>Oersted.
</DL>
</DL>

Présentées ainsi
Conception d'un
d'un s ite WEB
55
Ou ainsi
Conception d'un
d'un s ite WEB
56

Listes imbriquées
Conception d'un
d'un s ite WEB
57
u Des listes de différentes natures peuvent être

imbriquées
<P>Un
<P>Un bon
bon pot-au-feu
nécessite :</P>
:</P>
<UL
<UL TYPE="DISC">
TYPE="DISC">
<LI>des
<LI>des poireaux
poireaux ::
<UL
<UL TYPE="SQUARE">
TYPE="SQUARE">
<LI>des
<LI>des petits,
petits,
<LI>des moyens,
<LI>des moyens,
<LI>des
<LI>des gros.
gros.
</UL>
</UL>
<LI>des
<LI>des carottes,
carottes,
<LI>des
<LI>des navets.
navets.
</UL>
</UL>
Ce qui donne
Conception d'un
d'un s ite WEB
58

Les images
Conception d'un
d'un s ite WEB
59
u Les pages Web sont souvent parsemées de petits

éléments décoratifs obtenus par inclusion d'images.
<IMG SRC="..." paramètres >
u La balise d'inclusion d'images comporte de très
nombreux paramètres :
l ALIGN= TOP | MIDDLE | BOTTOM | LEFT | RIGHT
l HSPACE= ma
marg
rg e horizontale
horizontale (pix els)
l VSPACE= marge verticale (pixels)
l WIDTH= largeur de l'image (pixels)
l HEIGHT= haut
hauteur
eur de l'i
l'i ma
magg e (pixels )
l BORDER= épa
épais
is s eur de l'encadreme
l'encadrement nt (pixels )
Inclusion d'une image

Conception d'un
d'un s ite WEB
60
<P> <IMG SRC="Image16.gif"

<P>
<P> <IM
IMG
G SRC=
SRC ="I
"Ima
mage
WIDTH=200
WIDTH=200 ge16
16.g
.gif
if""
HEIGHT=145
HEIGHT=145
BORDER=0
BORDER=0
ALIGN="LEFT"
ALIGN="LEFT"
HSPACE=20
HSPACE=20
VSPACE=10>
VSPACE=10>
Sans
Sans doute les notes que
doute les notes que nous
nous entendons
entendons alors,
alors, tendent
tendent
déjà,
déjà, selon
selon leur
leur hauteur
hauteur et et leur
leur quantité,
quantité,
à
à couvrir
couvrir devant
devant nos
nos yeux
yeux desdes surfaces
surfaces dede dimensions
dimensions
variées,
variées, à
à tracer
tracer des
des arabesques,
arabesques, à
à
nous
nous donner
donner desdes sensations
sensations dede largeur,
largeur, dede
ténuité,
ténuité, de de stabilité,
stabilité, de de caprice.</P>
caprice.</P>
<P>Mais
<P>Mais les
les notes
notes sont
sont évanouies
évanouies avant avant que
que ces
ces
sensations
sensations soient
soient assez
assez formées
formées en en nous
nous pour
pour ne
ne pas
pas
être
être submergées
submergées par par celles
celles qu'éveillent
qu'
qu'éveillent
qu'éveillent
éveillent
déjà
déjà lesles notes
notes suivantes
suivantes ou ou même
même
simultanées.</P>
simultanées.</P>

Aspect visuel
Conception d'un
d'un s ite WEB
61
Paramètres d'inclusion
Conception d'un
d'un s ite WEB
62
u Interprétation des paramètres d'inclusion :
vspace
height
width hspace

Paramètres d'alignement
Conception d'un
d'un s ite WEB
63
<P
<P ALIGN="CENTER">
ALIGN="CENTER">
<IMG
<IMG SRC="Image17a.gif"></P>
SRC="Image17a.gif"></P>
<P>Cette image
<P>Cette image
<IMG
<IMG SRC="Image17b.gif"
SRC="Image17b.gif" ALIGN="TOP"
ALIGN="TOP">
>
ALIGN="TOP">
est
est alignée
alignée
<IMG
SRC="Image17b.gif" ALIGN="MIDDLE"
ALIGN="MIDDLE">
>
ALIGN="MIDDLE">
de
de différentes
différentes
<IMG
SRC="Image17b.gif" ALIGN="BOTTOM"
ALIGN="BOTTOM">
ALIGN="BOTTOM">>
façons.</P>
façons.</P>
<P>On
<P>On remarque
remarque que
que son
son fond
fond à
à
été
été rendu
rendu transparent.</P>
transparent.</P>
Effets de présentation
Conception d'un
d'un s ite WEB
64

Fond d'écran
Conception d'un
d'un s ite WEB
65
u Une image peut également servir de fond d'écran.
<BODY
<BODY BACKGROUND="Image18.gif"
BACKGROUND="Image18.gif">
BACKGROUND="Image18.gif"> >
<P
<P ALIGN="CENTER"><IMG
ALIGN="CENTER"><IMG SRC="Image17a.gif"
SRC="Image17a.gif"
<P><B>Cette
<P><B>Cette image
image <IMG
SRC="Image17b.gif"
<P><B>On
<P><B>On remarque
remarque que
que son
son fond
fond à
à &eacu
&eacu
</BODY>
</BODY>
Image de fond et
Conception d'un
d'un s ite WEB
transparence
66

Les ancres
Conception d'un
d'un s ite WEB
67
u Les ancres indiquent des extrémités de liens vers

d'autres documents.
u Un lien peut pointer vers :
l un autre document : lien externe,
l un autre endroit de la page en cours : lien interne.
u Une ancre peut ainsi définir un poi
point
nt de départ :
:
<A HREF= "UR L ">cliquable</A>
u Elle peut également signaler un poi
point
nt d'arriv
d'arr ivée
ée :
<A NAME= "étiquette">non cliquabl
c liquable
e</A>
Schéma de liens externes

Conception d'un
d'un s ite WEB
simples
68
<BODY>
<BODY> index.html
<P>...<A
<P>...
<P>...<A
<A HREF="p1.html">Page
HREF="p1.html">Page 1</A>...</P>
1</A>...</P>
<P>...<A
<P>...<A HREF="p2.html">Page
<P>...<A HREF="p2.html">Page 2</A>...</P>
2</A>...</P>
<P>...<A
<P>...<A HREF="p3.html">Page
<P>...<A HREF="p3.html">Page 3</A>...</P>
3</A>...</P>
...
...
</BODY>
</BODY>
<HTML>
<HTML> p1.html
...
...
<HTML>
<HTML> p2.html
</HTML>
</HTML> ...
...
<HTML> p3.html
<HTML>
</HTML>
</HTML>... ...
</HTML>
</HTML>

Schéma de liens internes

Conception d'un
d'un s ite WEB
69
<BODY>
<BODY>
<P>...<A
<P>...<A HREF="#p1">Page
<P>...<A HREF="#p1">Page 1</A>...</P>
1</A> ...</P>
1</A>...</P>
...
...
<P>...<A
<P>...<A HREF="#p2">Page 2</A>...</P>
2</A> ...</P>
2</A>...</P>
...
...
<P>...<A
<P>...<A HREF="#p3">Page 3</A>...</P>
3</A> ...</P>
3</A>...</P>
...
...
<P><A
<P> <A NAME="p1"></A>...</P>
<P><A NAME="p1"></A> ...</P>
NAME="p1"></A>...</P>
...
...
<P><A
<P> <A NAME="p2"></A>...</P>
<P><A NAME="p2"></A> ...</P>
NAME="p2"></A>...</P>
...
...
<P><A
<P> <A NAME="p3"></A>...</P>
<P><A NAME="p3"></A> ...</P>
NAME="p3"></A>...</P>
...
...
</BODY>
</BODY>
Liens doubles
Conception d'un
d'un s ite WEB
70
u Les liens doubles définissent à la fois un point de

départ et un point d'arrivée.
<BODY>
<BODY>
<P>...<A
<P>...<A HREF="#p1"
<P>...<A HREF="#p1" NAME="r1">Page
NAME="r1">Page 1</A>...</P>
1</A> ...</P>
1</A>...</P>
...
...
...
...
<P><A
<P> <A HREF="#r1"
<P><A HREF="#r1" NAME="p1">Retour</A>...</P>
NAME="p1">Retour</A> ...</P>>
NAME="p1">Retour</A>...</P>
NAME="p1">Retour</A>...</P
...
...
...
...
</BODY>
</BODY>

Une page avec des liens

Conception d'un
d'un s ite WEB
71
<H2 ALIGN="CENTER">Tout sur

<H2 ALIGN="CENTER">Tout sur la fougasse</H2>
<P ALIGN="CENTER">
<P ALIGN="CENTER">
<A
<A HREF="chap-1.html"
HREF="chap-1.html">Chapitre
>Chapitre 11 :: La
HREF="chap-1.html">Chapitre La farine</A><BR>
farine</A><BR>
<A
HREF="chap-2.html">Chapitre
>Chapitre 22 :: Les
HREF="chap-2.html">Chapitre Les anchois</A></P>
<HR
<HR ALIGN="CENTER">
ALIGN="CENTER">
<P
<P ALIGN="CENTER">Aimez-vous
ALIGN="CENTER">Aimez-vous la la fougasse ?</P>
<P
<P ALIGN="CENTER">
ALIGN="CENTER">
<A
HREF="chap-1.html"><IMG
><IMG SRC="bout-1.gif"></A>
HREF="chap-1.html"><IMG SRC="bout-1.gif"></A>
<A
HREF="chap-2.html"><IMG
><IMG SRC="bout-2.gif"></A></P>
SRC="bout-2.gif"></A></P>
Qui s'affiche
Conception d'un
d'un s ite WEB
72

Les Tableaux
Conception d'un
d'un s ite WEB
73
u Le tableau est l’élément d’organisation le plus

puissant de HTML.
u C ’est lui qui permet de disposer dans une page de
différentes zones de texte ou d ’images.
u un tableau est un pavage de cellules (CELLS),
associées à des cellules de titre (HEADING
(HEADING CELLS) le
tout associé à une légende (CAPTION).
u Sa description est assez complexe, nous l’aborderons
donc pas à pas.
Un tableau élémentaire
Conception d'un
d'un s ite WEB
74
CAPTION
HEADING CELLS
CELLS

Structure d’un tableau

Conception d'un
d'un s ite WEB
75
u Un tableau est introduit par le conteneur :

<TABLE paramètres >...</TABLE>
u Le titre d’un tableau est introduit par le conteneur :
<CAPTION paramètres >...</CAPTION>
u Une ligne du tableau (ROW) est introduite par le
conteneur :
<TR paramètres >...</TR>
u Une ligne est composée de cellules* :
<TH paramètres >…</TH>
<TD paramètres >…</TD>
* pouvant contenir tout ce que l ’on veut et même un tableau.
Un tableau élémentaire 4x4

Conception d'un
d'un s ite WEB
76
<TABLE
<TABLE paramètres>>
paramètres
<CAPTION paramètres
<CAPTION paramètres>…</CAPTION>
>…</CAPTION>
<TR>
<TR>
<TD>...</TD><TH>...</TH><TH>...</TH><TH>…</TH>
<TD>...</TD><TH>...</TH><TH>...</TH><TH>…</TH>
</TR>
</TR>
<TR>
<TR>
<TH>...</TH><TD>...</TD><TD>...</TD><TD>...</TD>
</TR>
</TR>
<TR>
<TR>
</TR>
</TR>
<TR>
<TR>
<TH>...</TH><TD>...</TD><TD>...</TD><TD>…</TD>
<TH>...</TH><TD>...</TD><TD>...</TD><TD>…</TD>
</TR>
</TR>
</TABLE>
</TABLE>

Principaux paramètres
Conception d'un
d'un s ite WEB
77
u On dispose de nombreux paramètres :

l alignement horizontal,
l alignement vertical,
l couleur de fond,
l couleur de texte,
l image de fond
l …
u Lorsqu’un paramètre n’est pas défini, sa valeur est
héritée de la structure qui l ’englobe.
u Malheureusement, tous ces paramètres ne sont pas
traités par les navigateurs, ils peuvent ne pas avoir
d’effet.
Paramètres de <TABLE ...>

Conception d'un
d'un s ite WEB
78
CELLPADDING CELLSPACING BORDER

Paramètres de <CAPTION
Conception d'un
d'un s ite WEB
...>
79
ALIGN = L E F T |
| CENTER | RI GH T
VALIGN = TOP | BOTTOM
Superposition de cellules
Conception d'un
d'un s ite WEB
80
u On peut faire en sorte qu’une cellule en recouvre

d’autres donnant l’impression que des cellules ont été
regroupées.
u L’extension d ’une cellule sur ses voisines de droite
correspond au paramètre
COLSPAN = nombre de cellules
c ellules
u L’extension d’une cellule sur ses voisines du dessous
correspond au paramètre
ROWSPAN = nombre de c ellul
ellules
es

Paramètres de superposition
Conception d'un
d'un s ite WEB
81
ROWSPAN=2 COLSPAN=2
ROWSPAN=1 COLSPAN=2 ROWSPAN=3 COLSPAN=1
lignes 3
5
1 2 3 4
colonnes
Une belle table des matières

Conception d'un
d'un s ite WEB
82

Une belle page

Conception d'un
d'un s ite WEB
83
Images cliquables
Conception d'un
d'un s ite WEB
84
u Il est possible de définir des zones s ens i bles sur une

image bitmap et d’associer des liens à ces zones.
u Nous ne verrons que la technique la plus récente.
u Les zones sensibles définies sur une image sont
regroupées dans une carte (MAP) associée à l’image.

Carte des zones sensibles

Conception d'un
d'un s ite WEB
85
<IMG
<IMG SRC="Image16.gif"
SRC="Image16.gif" WIDTH="200"
WIDTH="200" HEIGHT="145"
HEIGHT="145"
ISMAP
ISMAP
USEMAP="#Image16"
USEMAP="#Ima ge16"
USEMAP="#Image 16" BORDER="0">
USEMAP="#Image16" BORDER="0">
<MAP
<MAP NAME="Image16">
NAME="Image16">
<AREA
<AREA SHAPE="CIRCLE"
SHAPE="CIRCLE" HREF=
HREF= "chap-1.html"
"chap-1.html"
COORDS="86,64,20">
COORDS="86,64,20">
<AREA
<AREA SHAPE="RECT"
SHAPE="RECT" HREF="chap-2.html"
HREF="chap-2.html"
COORDS="61,101,92,138">
COORDS="61,101,92,138">
</MAP>
</MAP>
Les formulaires
Conception d'un
d'un s ite WEB
86
u C'est le formulaire qui sert d'interface entre le monde

du Web et le monde de l'informatique.
u Il permet de construire des interfaces de présentation
à des logiciels d'application.
u Il utilise le mode CGI (Common Gateway Interface)
pour fonctionner et son utilisation nécessite la
coopération d'au moins 2 acteurs :
l Côté client : Le formulaire HTML,
l Côté serveur : un programme d'interface.

Dialogue Client-Serveur
Conception d'un
d'un s ite WEB
87
u Le côté client est
est représenté par le navigateur qui
interprète la page HTML qui comporte des balises
pouvant se traduire en requêtes.
u Le côté serveur est
est représenté par le serveur Web qui
interprète les requêtes provenant du navigateur et qui
lui transmet des pages HTML.
u Nous avons rencontré deux balises se traduisant en
requête :
l <A … >…</A> : requête pour une page externe,
l <IMG … > : requête pour une image externe.
Schéma de dialogue HTML

Conception d'un
d'un s ite WEB
88
http://…../xxx.html#yyy
http://…../xxx.html#yyy
Serveur
Navigateur Web
Content-type:
Content-type: text/html
text/html <HTML>
<HTML> …
… </HTML>
</HTML>
<HTML>
<HTML> …
… </HTML>
</HTML>

Schéma de dialogue CGI

Conception d'un
d'un s ite WEB
89
QUERY_STRING
QUERY_STRING == ...
...
http://…../xxx.cgi...
http://…../xxx.cgi...
Serveur Programme
Navigateur Web CGI
Content-type:
text/html Content-type:
text/html
<HTML>
<HTML> …
… </HTML>
</HTML> <HTML>
<HTML> …
… </HTML>
</HTML>
Formulaire
Conception d'un
d'un s ite WEB
90
u Un formulaire est introduit par le conteneur :

<FORM paramètres > … </FORM>
u Un formulaire est constitué d'un groupe d'outils de
saisie décrits par des conteneurs de la forme
f orme :
<INPUT paramètres > … </INPUT>
<SELECT paramètres > … </SELECT>
u Un formulaire comporte 2 boutons :
<INPUT TYPE=SUBMIT paramètres >
<INPUT TYPE=RESET paramètres >

Exemple 1
Conception d'un
d'un s ite WEB
91
<FORM
<FORM ACTION="query.cgi"
ACTION="query.cgi" … …
METHOD=
METHOD= "GET"
"GET" || "POST">
"POST">
<P><BIG><BIG>P</BIG></BIG>our
<P><BIG><BIG>P</BIG></BIG>
<P><BIG><BIG>P</BIG></BIG>our
<P><BIG><BIG>P</BIG></BIG>o our
ur faire
faire une
une bonne
bonne mayonnai
mayonnai
<INPUT
<INPUT TYPE=
TYPE="radio"
"radio"
TYPE="r adio" NAME="liquide"
TYPE="radio" NAME="liquide" VALUE="eau">
VALUE="eau">eau,eau,
VALUE="eau">eau,
<INPUT
<INPUT TYPE="radio"
TYPE="ra dio" NAME="liquide"
TYPE="radio" NAME="liquide" VA VALUE="huile">
LUE="huile">huile,
VALUE= huile,
VALUE="huile">huile,
"huile">huile,
<INPUT
<INPUT TYPE="radio"
TYPE="radio"
TYPE="ra dio" NAME="liquide"
TYPE="radio" NAME="liquide" V VALUE="lait">
VALUE="lait">lait
lait
VALUE="lait">lait
ALUE="lait">lait
</FORM>
</FORM>
Exemple 2
Conception d'un
d'un s ite WEB
92
<FORM
ACTION="query.cgi" … …
METHOD=
METHOD= "GET"
"GET" || "POST">
"POST">
...
...
<P><BIG><BIG>I</BIG></BIG>l
<P><BIG><BIG>I<
/BIG></BIG>l faut
fautaussi
aussi :</P>
:</P>
<INPUT
<INPUT TYPE="che
TYPE="checkbox"
ckbox"
TYPE="checkb ox" NAME="oeufs"
NAME= "oeufs" VALUE="on">oeufs,
NAME="oeufs" VALUE="on"> oeufs,
VALUE="on">oeufs,
VALUE="on">oeufs,
<INPUT
<INPUT TYPE="che
TYPE="checkbox"
TYPE="checkbox"
ckbox" NAME="sel"
TYPE="checkbox" NAME="
NAME="s sel"
el" VALUE="on">sel,
NAME="sel" VALUE="on"> sel,
VALUE="on">sel,
<INPUT
<INPUT TYPE="che
TYPE="checkbox"
TYPE="checkbox"
ckbox" NAME="mouta"
TYPE="checkbox" NAME=
NAME="mouta"
"mouta" VALUE="on">moutarde,
NAME="mouta" VALUE="on"> moutarde,
VALUE="on">moutarde,
<INPUT
<INPUT TYPE="che
TYPE="checkbox"
TYPE="checkbox"
ckbox" NAME="confit"
TYPE="checkbox" NAME="confit" VALUE="on">
V
VALUE="on">confiture
confiture
VALUE="on">confiture
ALUE="on">confiture
</FORM>
</FORM>

Exemple 3
Conception d'un
d'un s ite WEB
93
<FORM
ACTION="query.cgi"
METHOD=
METHOD= "GET"
"GET" || "POST">
"POST">
...
...
<P><BIG><BIG>O</BIG></BIG>n
<P><BIG><BIG>O</BIG></BIG>
<P><BIG><BIG>O</BIG></BIG>n n utilise
utilise ::
<SELECT NAME="recipient"
<SELECT NAME="recipient" SIZE="3">
NAME="recipient" SIZE="3">
<OPTION
<OPTION SELECTED>assiette
SELECTED>assiette
<OPTION>bol
<OPTION>bol
<OPTION>bouteille
<OPTION>bouteille
<OPTION>casserole
<OPTION>casserole
<OPTION>marmite</SELECT> </P>
</FORM>
</FORM>
Exemple 4
Conception d'un
d'un s ite WEB
94
<FORM
ACTION="query.cgi" METHOD=
METHOD= "GET"
"GET" || "POST">
"POST">
...
...
<P><BIG><BIG>D</BIG></BIG>écrivez,
<P><BIG><BIG>D</BIG>< /BIG>écrivez, en
<P><BIG><BIG>D</BIG></BIG>écrivez,
<P><BIG><BIG>D</B IG></BIG>écrivez, enquelques
quelques lignes
quelques lignes
les
les principales
principales qualités
qualités diététiques
diét&ea
diététiques
cute;tiques de
diététiques de
la
la mayonnaise
mayonnaise :<BR>
:<BR>
<TEXTAREA
<TEXTAREA NAM NAME="dissertation"
NAME E="dissertation"
="dissertation" ROWS="5"
NAME="dissertation" ROWS=
ROWS="5"
ROWS="5""5" COLS=20>
COLS=20>
</TEXTAREA>
</TEXTAREA>
</FORM>
</FORM>

Exemple 5
Conception d'un
d'un s ite WEB
95
<FORM
ACTION="query.cgi" METHOD=
METHOD= "GET"
"GET" || "POST">
"POST">
...
...
<P>
<P>
Donnez
Donnez votre
votre nom
nom et
et on
et on vous
on vous écrira<BR>
écrira<BR
écrira<BR>
écrira<BR> >
<INPUT
<INPUT TYPE
TYPE="text"
="text" NAME="nom">
TYPE="text"
TYPE="text" NAM E="nom">
NAME="nom">
</FORM>
</FORM>
Et pour finir
Conception d'un
d'un s ite WEB
96
<FORM
ACTION="query.cgi"
METHOD= "GET" | "POST">
...
... METHOD= "GET" | "POST">
<P>
<P>
<INPUT
<INPUT TYPE=
TYPE=reset
reset
TYPE=reset VALUE="Corriger">
VALUE= "Corriger">
VALUE="Corriger">

<INPUT TYP
TYPE=submit
E=submit
<INPUT TYPE=submit VALUE="OK">
VALUE="OK"></P>
</P>
TYPE=submit VALUE="OK"></P>
VALUE="OK"></P>
</FORM>
</FORM>

Conclusion provisoire
Conception d'un
d'un s ite WEB
97
u Nous avons vu l'essentiel de ce qu'il était nécessaire

de connaître de HTML pour réaliser de belles pages
Web.
u N'hésitez pas à examiner le source des pages que
vous consultez. Vous y découvrirez comment réaliser
des effets époustouflants.
u Il faut, à présent, étudier ce qui se passe du côté du
serveur (programmation CGI) et c'est la suite de ce
cours.
Programmes CGI
Conception d'un
d'un s ite WEB
98
u Un programme CGI doit être capable de composer

une page HTML et de l'émettre sur sa sortie standard
"stdout".
u Ce programme reçoit ses arguments sous différentes
formes que nous examinerons.
u Attention : un programme CGI mal conçu crée des
trous de sécurité dans le système qui l'héberge et
pour en savoir plus sur les problèmes de sécurité
dans le Web consulter :
http://www.w3.org/Security/Faq/www-security-faq.html

Programmation CGI
Conception d'un
d'un s ite WEB
99
u Un programme CGI peut être écrit dans n'importe quel

langage.
u Cependant certains langages sont plus commodes
que d'autres.
u On utilise typiquement :
l des langages interprétés tels s h , cs h, … et surtout Perl,
l des langages compilés tels C, C++,
C++, FORTR AN et et maintenant Visual
Basic ® dans un environnement Windows NT ®.
u Nous allons introduire,
introduire, dans ce cours, le langage le
plus utilisé actuellement : Perl.
Entrées - Sorties CGI

Conception d'un
d'un s ite WEB
100
Environnement d'exécution
SERVER_SOFTWARE
SERVER_SOFTWARE
SERVER_NAME
SERVER_NAME
GATEWAY_INTERFACE
GATEWAY_INTERFACE
SERVER_PROTOCOL
SERVER_PROTOCOL
SERVER_PORT
SERVER_PORT
REQUEST_METHOD
REQUEST_METHOD
PATH_INFO
PATH_INFO
QUERY_STRING
QUERY_STRING
CONTENT_LENGTH
CONTENT_LENGTH
...
...
"stdin" Programme
Programme CGI
CGI stdout
Message MIME
Content-type:
text/html
<HTML>…</HTML>
<HTML>…</HTML>

Invocation d'un programme

Conception d'un
d'un s ite WEB
CGI
101
u On dispose principalement de 3 méthodes pour

invoquer un programme CGI :
l invocation directe en tant que cible d'un lien :
<A HREF="foo.cgi">…</A>
l invocation par soumission d'un formulaire avec la méthode GET :
<FORM ACTION="foo.cgi" METHOD="GET" …>
… </FORM>
l invocation par soumission d'un formulaire avec la méthode POST :
<FORM ACTION="foo.cgi" METHOD="POST" …>
… </FORM>
Extension de l'URL
Conception d'un
d'un s ite WEB
102
u On peut passer les arguments d'un programme CGI

en étendant son URL :
<A HREF="URL/script_name/
HREF="URL/script_name/path_info?query_string">…</A>
path_info?query_string">…</A>
u C'est cette technique qui est utilisée lors de la

soumission d'un formulaire utilisant la méthode GET.
l L'extension de l'URL est effectuée par le navigateur lui-même.
u Les arguments (empaquetés dans une grande chaîne
de caractères) peuvent être obtenus en analysant les
variables d'environnement SCRIPT_NAME,
PATH_INFO et QUERY_STRING.

Entrée standard
Conception d'un
d'un s ite WEB
103
u Lorsqu'un formulaire est soumis en utilisant la

méthode POST, les arguments sont empaquetés dans
une grande chaîne de caractères présentée sur
l'entrée stdin.
u Cette grande chaîne ne se termine pas par EOF !
u Sa longueur est placée dans la variable
d'environnementt CONTENT_LENGTH
d'environnemen CONTENT_LENGTH..
Empaquetage des arguments

Conception d'un
d'un s ite WEB
104
u Un argument est représenté sous la forme d'un

couple nom=valeur.
u Une valeur est une chaîne de caractères,
u Chaque argument est séparé du précédent et du
suivant par le caractère &.
u Les espaces sont remplacés par le caractère + et les
caractères spéciaux sont remplacés par leur code
ASCII(hex) %xx.
u Exemple :
liquide=eau&œufs=on&sel=on&recipient=bol&
dissertation=Et+bien,la+mayonnaise,+c'est+tr%E8s+bon...&nom=Mick
ey+Mouse

En résumé
Conception d'un
d'un s ite WEB
105
u Un programme CGI doit :

l avoir un nom dont l'extension est .cgi,
l être capable de consulter des variables
vari ables d'environnement,
l être capable de lire une chaîne de caractères présentée sur stdin,
l être capable de l'analyser,
l être capable de composer une page HTML au format MIME et de la
présenter sur stdout.
u Il doit pouvoir, également, être capable de
communiquer avec d'autres applications.
u Le langage Perl permet de faire tout ça très
commodément.
Le langage Perl
Conception d'un
d'un s ite WEB
106
u Le langage Perl (Practical Extraction and Report

Language) ne peut pas être considéré comme un
langage de programmation orthodoxe. Sa seule
ambition est d'être commode.
u Nous n'en donnerons pas une présentation
exhaustive et nous ne l'introduirons qu'à partir
d'exemples significatifs.
u Pour en savoir plus, consulter :
http://www2.ec-lille.fr/~seguy/francais/perl/

Un programme Perl
Conception d'un
d'un s ite WEB
simplissime
107
#!/usr/local/bin/perl
print
print "Content-type:
"Content-type: text/html
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Première
<TITLE>Première page
page
scriptées</TITLE>
scriptées</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<P>Bonjour
<P>Bonjour à
à tous.</P>
tous.</P>
</BODY>
</BODY>
</HTML>
</HTML>
";
";
u Bien que très simple, ce premier programme nous

apprend déjà plein de choses.
Les commentaires
Conception d'un
d'un s ite WEB
108
u Un commentaire est une portion de texte

t exte commençant
par le caractère # et s'étendant jusqu'à la fin de la
ligne.
u Exemples :
# Que ce programme est beau et bien ecrit !
print 'bonjour tout le monde !';
!'; # qu'est-ce donc ?

Localisation de l'interprète
Conception d'un
d'un s ite WEB
109
u Dans un environnement Unix, tous les fichier

interprétés (au moins pour tous les "shell" que je
connais) indiquent, en première ligne, le chemin
d'accès à leur interprète.
u Cette indication prend la forme du pseudo
commentaire :
u C'est cette indication qui permet de considérer un tel
fichier comme un programme exécutable standard.
Les instructions
Conception d'un
d'un s ite WEB
110
u Une instruction est constituée :

l soit d'une commande et de ses paramètres,
l soit de l'affectation d'une variable à la valeur d'une expression.
u Une instruction se termine toujours par le caractère ;
u Ce premier programme ne comporte que l'instruction
l print "…";
u Comme on peut s'y attendre, la commande print
imprime (ici sur stdout).

Quote '…' & quasi-quote "..."

Conception d'un
d'un s ite WEB
111
u Une portion de texte qui ne doit pas être interprétée

est citée entre quotes :
'bonjour tout le monde !'
u Lorsqu'une telle portion de texte est répartie sur
plusieurs lignes, elle inclut les "RC" invisibles.
u Lorsqu'on cherche à construire des portions de texte,
il est commode d'y inclure des variables qui seront
évaluées. La portion de texte est alors citée entre
quasi-quotes :
"Je voudrais $n pizzas"
"Je voudrais une ${c}croute garnie"
Formats MIME
Conception d'un
d'un s ite WEB
112
u Le texte envoyé au navigateur par le serveur doit se

conformer à la norme MIME (Multipurpose Internet
Mail Extension) qui préconise d'indiquer en en-tête le
type de ce qui suit, ici :
u Cet en-tête doit être suivi d'une ligne vide !
u D'autres types MIME :
application/pdf
application/x-compress
audio/basic
image/gif
...

Variables
Conception d'un
d'un s ite WEB
113
u Perl supporte 3 types de variables :

l s calair es : nombres et chaînes de caractères,
l tableaux de
de scalaires dont les éléments sont indexés par un
nombre entier,
l table
tableaux
aux ass oci at
atifs
ifs dont les éléments sont indexés par un
symbole.
u Noms de variables, les noms de variables sont
préfixés :
l par $ pour les scalaires,
l par @ pour les tableaux,
l par % pour les tableaux associatifs.
u Les caractères $, @ et % définissent, plus
généralement, le contexte d'interprétation des
opérateurs Perl.
Contextes d'interprétation
Conception d'un
d'un s ite WEB
114
u Les différents contextes d'interprétation peuvent être

illustrés par ces exemples :
l $jour simple variable scalaire
l $jours[28] 29ème élément du tableau @jours
l $nom
$n ombr
bre_
e_de
de_j
_jou
ours
rs{'
{'ma
mars
rs'}
'} élém
él émen
entt assoc
associé
ié au symb
symbol
ole
e 'mars
'mars'' du
tableau associatif %nombre_de_jours
l $#jours dernier indice dans le tableau @ jours
l @ jours tableau dans son ensemble
l @ jours[3,4,5] tableau constitué des éléments
numéros 3, 4 et 5 du tableau @ jours
l @ jours[3..5] même tableau que ci-dessus
l @ nombre_de_jours{'mars','avril'}
tableau constitué des éléments
associés aux symboles 'mars' et 'avril'
du tableau associatif % nombre_de_jours
l % nombre_de_jours tableau associatif dans son ensemble

Petite généralisation
Conception d'un
d'un s ite WEB
115
u La composition d'une page HTML est décrite plus

généralement par :
$title
$title == …;
…;
$body
$body == …;…;
print
print "Content-type:
"Content-type: text/html
text/html
<HTML>
<HTML>
<HEAD><TITLE>$title</TITLE></HEAD>
<HEAD><TITLE>$title</TITLE></HEAD>
<BODY>$body</BODY>
<BODY>$body</BODY>
</HTML>
</HTML>
";
";
Les constantes
Conception d'un
d'un s ite WEB
116
u Les constantes sont utilisées soit pour initialiser des

variables, soit pour participer à l'évaluation d'une
expression.
u Nombres :
18 -14 3 .1 4 0.6e-3 0x1E
u Portions de texte :
'bonjour tout le monde.' "il est $b l'heure."
u Listes (indiçable comme un tableau) :
(18, 'est un divisible par', 2, 3, ' et ', 6)

Affectation
Conception d'un
d'un s ite WEB
117
u Comme toutes les opérations Perl, l'affectation

présente quelques magies.
$i = 3; comme d'habitude.
$i = '00
'0001
01';
'; estt inté
es intére
ress
ssan
antt si on veu
veutt prod
produi
uire
re un
un comp
compte
teur
ur
conservant ses 0 à gauche.
@jours = ('lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi',
'dimanche');
la liste a servi à construire un tableau.
@week_end = @jours[5,6];
@jours_ouvres = jours[0..4];
($a, $b, $c) = (3, 4, 5);
($a, $b, @des_jours) = @jours;
u Et bien d'autres magies que je vous laisse découvrir.
Quelques opérations
Conception d'un
d'un s ite WEB
scalaires
118
$a = 1 + 2; addition
$a = 2 - 4; soustraction
$a = 5 * 6; multiplication
$a = 7 / 2; division
$ a = 9 * * 3. 2; puissance (pas forcément entière)
$ a = 5 % 2; reste euclidien
++$a; pré-incrémentation
$a++; post-incrémentation
$a = 'bonjo
'bonjour
ur '.'tou
'.'toutt le monde
monde';
'; concat
concaténa
énatio
tion
n
$a = 'je bégaie ' x 8; répétition
$ a += 3; équivalent à $a = $a + 3

Opérations sur les tableaux

Conception d'un
d'un s ite WEB
119
@fruits = ('pomme', 'poire');
push(@fruits, 'banane', 'abricot') ;
modifie @fruits qui vaut alors ('pomme', 'poire', 'banane', 'abricot').
pop(@fruits);
modifie @fruits qui vaut alors ('pomme', 'poire', 'banane') et rend

'abricot'.
Fonctions
Conception d'un
d'un s ite WEB
120
u Comme dans tous les langages

de programmation, la fonction
est un outil de structuration
puissant.
u Déclaration (sub) et appel (&) sub
sub moyenne
moyenne {{
d'une fonction (Perl ne connaît (@_[0]
(@_[0] ++ @_[1])
@_[1]) // 2;
2;
pas le l ) : }}
u Les arguments sont passés print

print &moyenne(1,2);
&moyenne(1,2);
dans le tableau implicite @_.
u La valeur rendue est celle de la
dernière expression évaluée.

Manipulation des fichiers

Conception d'un
d'un s ite WEB
121
u Voici un programme élémentaire qui manipule un

fichier (pas trop gros) :
op
open
en(
en((( FICH
open
op FI
FICHIE
FICH IER,
CHIER,
R, 'fo
IER, ''fo
'foo.
o.tx
foo.txt'
o.tx t');
txt');
t');
); ## ou
ouve
ouvert
ouve rtur
verture*
rture*
e* d
ure* du
du
duu fi
fich
fichie
fich ier
chierr et
ier et
## création de son descripteur
création de son descripteur
@
@lliig
gnneess == <<F
FIIC
CHHIIE
ERR>>;; ## lleeccttu
urree d
du hiieerr ligne
u ffiicch ligne
# par
par lig ne et et construction
construction
## d'un
d'un tableau
tableau de de ces
ces lignes
lignes
ccllo
ossee((F
FIIC
CHHIIEERR));; ## ffeerrm
meettu urree d
duu ffiicch
hiieerr
pprriin
ntt @
@lliig
gnneess;; ## eett aaffffiicch
haag gee
* les fichiers STDIN, STDOUT et STDERR sont ouverts a priori.

Variables d'environnement
Conception d'un
d'un s ite WEB
122
u Les variables d'environnement sont empaquetées

dans le tableau associatif prédéfini %ENV.
u On y accède par leur nom :
$ENV{'REQUEST_METHOD'}
$ENV{'SCRIPT_NAME'}
$ENV{'PATH_INFO'}
$ENV{'QUERY_STRING'}
$ENV{'CONTENT_LENGTH'}

On entre dans le vif du sujet

Conception d'un
d'un s ite WEB
123
...
...
if
if ($ENV{'REQUEST_METHOD'}
($ENV{'REQUEST_METHOD'} eq eq "POST")
"POST") {{
read(STDIN,
read(STDIN, $buffer,
$buffer, $ENV{'CONTENT_LENGTH'));
$ENV{'CONTENT_LENGTH'));
}
} else
else {{
$buffer
$buffer == $ENV{'QUERY_STRING'};
$ENV{'QUERY_STRING'};
}
}
...
...
u On note 3 nouveautés :
l la structure de contrôle :
if <prédicat> {<conséquence>}
else {<alternative>}
l l'opérateur de comparaison : eq
l la fonction de lecture d'un bloc de caractères dans un fichier :
read().
Manipulation des chaînes

Conception d'un
d'un s ite WEB
124
u L'exemple précédent laisse en suspens deux

problèmes :
l comment être sûr que la chaîne "POST" est bien en majuscules ?
ou plus généralement composée de caractères de la même casse.
l Comment analyser le contenu de la variable $buffer qui contient
typiquement le résultat de la saisie d'un formulaire (cf. diapo 104).
u La manipulation des chaînes de caractères en Perl
utilise (comme beaucoup d'outils Unix tel regexp) des
motifs (patterns) décrits à l'aide d'expressions
régulières .

Expressions régulières
Conception d'un
d'un s ite WEB
125
u Une expression régulière est la description d'un motif

textuel à l'aide d'une for mule placée entre / et /.
u Une expression régulière est construite à partir :
l de constantes : caractères (signes typographiques),
l d'opérateurs : dénotés par des caractères spéciaux dont
dont
l'interprétation dépend du contexte.
u Le coin du théoricien : Les expressions régulières
régulières ont
été introduites pour décrire les langages réguliers
(T1) et leurs analyseurs qui sont des machines à états
finis.
Classes de caractères
Conception d'un
d'un s ite WEB
126
u Une classe de caractères est l'ensemble des

caractères qui peuvent apparaître en tel ou tel
emplacement d'un motif.
u Une classe de caractères est définie entre [ et ].
u Dans la définition d'une classe de caractères, les
signe - et ^ (placé en tête) signifient "entre" et "sauf".
u Exemples :
[abc] les 3 caractères a, b et c
[a-zA-Z
[a-zA-Z0-9
0-9]] n'impo
n'importe
rte quell
quelle
e lettre
lettre ou chiff
chiffre
re
[âbc] sauf les caractères a, b ou c

Caractères spéciaux
Conception d'un
d'un s ite WEB
127
u Certains caractères sont spéciaux car on ne peut pas

les taper au clavier (ils ont un effet immédiat),
exemples :
l \n nouvelle ligne
l \t tabulation
u D'autres servent de raccourcis syntaxique, exemples :
l . : n'i
n'im
mpor
orte
te qu
quel
el ca
cara
ract
ctèr
ère
e = [^\
^\n
n]
l \w : un caractère alpha-numérique = [a-zA-Z0-9]
[a-zA-Z0-9]
l \W : sauf un caractère alpha-numérique = [â-zA-Z0-9]
[â-zA-Z0-9]
l \d : un chiffre = [0-9]
l \D : sauf un chiffre = [^0-9]
l \s : un espacement = [ \t\n]
l \S : sauf un espacement = [^
[^ \t\n]
Concaténation, option et
Conception d'un
d'un s ite WEB
répétition
128
u L'opération de base est la concaténation dénotée par

la simple juxtaposition.
/[A-Z][0-9]/ dénote des motifs de la forme B3, Z8,
Z8, …
u Un caractère peut être optionnel dans un motif :
/pommes?/ dénote le mot "pomme"
"pomme" éventuellement au pluriel.
/par(t|c)/ dénote les mots "part" ou "parc"
u Un caractère peut être dupliqué dans un motif :
/b+/ dénote des motifs de la forme
forme "b", "bb", "bbb", "bbbb", …
/b*/ = (b+)?

Parenthèsage et
Conception d'un
d'un s ite WEB
échappement
129
u Pour définir ce sur quoi porte une opération, il peut

être nécessaire de parenthéser certains termes de
l'expression :
/(bon)+/ dénote des motifs de la forme "bon", "bonbon",
"bonbonbon", …
u Pour introduire un caractère qui joue normalement le
rôle d'un opérateur, il faut le faire précéder de \ :
\| \[ \]  \* \+ …
u Il est toujours possible d'introduire un caractère
spécial par son code ASCII :
\x82 dénote (sur PC sous DOS) le caractère "é"
Appariement
Conception d'un
d'un s ite WEB
130
u Une chaîne est appariée à un motif si on peut y

trouver ce motif.
u La relation d'appariement est notée =~
u Exemples :
'le p
peetit chat' =~ /le/ vaut "vrai"
'le petit chat' =~ /Le/ vaut "faux"
'un bon s auci s s s on' =~ /s+/ vaut "vrai"
u Cette relation d'appariement sera souvent utilisée en
tant que prédicat dans une structure "if (…) else {...}"

Contexte de l'appariement
Conception d'un
d'un s ite WEB
131
u L'appariement sur une partie du motif peut être

imposé en début de texte ou en fin de texte.
^ le te
term
rme
eqqui
ui su
suit
it es
estt con
confr
fron
onté
té au dé
débu
butt du
du tex
texte
te
$ le te
term
rme
e qui
qui préc
précèd
èdee est
est co
conf
nfro
ront
nté
é à la
la fin
fin du te
text
xte.
e.
u Exemples :
/^(bon)(.*)s$/ s'apparie avec tous les textes qui commencent par
par
"bon" et qui se terminent par la lettre "s".
Substitution
Conception d'un
d'un s ite WEB
132
u Une expres
expresss ion de
de s ubs
ubsttitut
itution
ion permet de remplacer,
dans un texte, un motif par un autre, elle vaut le
nombre des substitutions effectuées.
u Une expression de substitution est de la forme :
s/<reg-exp> /<expression> /<paramètres>
u Exemples :
s/saucisse/banane/
remplace la première occurrence du mot "saucisse" par le mot
"banane".
s/saucisse/saucisson/g
remplace toutes les occurrences du mot "saucisse" par le mot
"banane".

Utilisations de la substitution
Conception d'un
d'un s ite WEB
(1)
133
u Modification partielle d'une portion de texte :
$texte
$texte == ""
une
une bonne
bonne saucisse
saucisse sèche
sèche est
est
une
une saucisse
saucisse qui
qui aa bien
bien séché.";
séché.";
$texte
$texte =~ s/saucisse/banane/;
u Que devient la variable $texte ?
Conception d'un
d'un s ite WEB
(2)
134
u Modification globale d'une portion de texte :
$texte = "
une bonne saucisse sèche est
une saucisse qui a bien séché.";
$texte =~ s/saucisse/banane/g;

Conception d'un
d'un s ite WEB
(3)
135
u Sauf indication, la substitution porte sur la variable

prédéfinie* $_.
u Modification d'une portion de texte :
$_
$_ = "
une
une bonne
bonne saucisse
saucisse sèche
sèche est
est
$ns
$ns = s/saucisse/banane/g;
u Que deviennent les variables $_ et $ns ?

* ces variables prédéfin
prédéfinies
ies introduisent q
quelques
uelques magies dans Perl. Nous
en verrons quelques autres.
Traduction
Conception d'un
d'un s ite WEB
136
u Une expres
expresss ion de traduct
traduction
ion permet de remplacer,
dans un texte, des caractères par d'autres caractères
; elle vaut le
l e nombre des traductions effectuées.
u Une expression de traduction est de la forme :
tr/<cla
<class s e de caractères> /<cla
<class s e de caractères> /<paramètres>
u Exemples :
tr/a-z/A-Z/
remplace toutes les lettres minuscules par les majuscules
correspondantes. Toutes ?
tr/a-z/b-za/
utilise le code de César pour crypter un message.

Utilisations de la traduction
Conception d'un
d'un s ite WEB
(1)
137
$texte
$texte == ""
une
une bonne
bonne saucisse
saucisse sèche
sèche est
est
$texte
$texte =~ s/a-zèé/b-zaïâ/;
Utilisations de la traduction
Conception d'un
d'un s ite WEB
(2)
138
u Sauf indication, la traduction porte sur la variable

prédéfinie $_.
$_ = "
une bonne saucisse sèche est
$ntr = tr/a/a/;
u Que deviennent les variables $_ et $ntr ?

Mémoire de l'appariement
Conception d'un
d'un s ite WEB
(1)
139
u Un motif d'appariement peut être scindé en plusieurs

sous-motifs par parenthésage :
/^(.)(.*)(.)$/ définit 3 sous-motifs
u Lorsque ce motif est apparié avec succès à une
portion de texte, ce qui s'est apparié à chacun des
sous-motifs est conservé dans des variables
nommées \1, \2, … dans la définition de la substitution
et $1, $2, … dans le reste du programme.
Mémoire de l'appariement
Conception d'un
d'un s ite WEB
(2)
140
u Exemple :
/^(.)(.*)(.)$/ confronté au texte "bonne nuit
nuit les petits" conduit à :
\1 = $1 = "b"
\2 = $2 = "onne nuit les petit"
\3 = $3 = "s"
u Que fait donc la portion de programme suivante ?
$_
$_ == "bonne
"bonne nuit
nuit les
les petits";
petits";
s/^(.)(.*)(.)$/\3\2\1/;
s/^(.)(.*)(.)$/\3\2\1/;
print
print "$1
"$1 $2
$2 $3";
$3";

On retourne dans le vif du

Conception d'un
d'un s ite WEB
sujet
141
$ENV{'REQUEST_METHOD'} =~
=~ tr/a-z/A-Z/;
tr/a-z/A-Z/;
if
if ($ENV{'REQUEST_METHOD'}
($ENV{'REQUEST_METHOD'} eq eq "POST")
"POST") {{
read(STDIN,
} else
} else {{
$buffer
}
}
...
...
u A présent, peu importe que le nom de la méthode soit

écrit en minuscule ou en majuscule.
u Il ne reste plus qu'à exploiter le
l e contenu de la variable
$buffer.
Deux fonctions très utiles

Conception d'un
d'un s ite WEB
142
u Très fréquemment il est nécessaire d'éliminer le

dernier caractère d'une portion de texte (typiquement
\n) :
chop ($
($texte) élimine le
le de
dernier ca
cara
rac
ctère du
du te
texte co
contenu
dans $texte.
chop élimine le dernier caractère du texte contenu
dans $_.
u Encore plus fréquemment il est nécessaire de
tronçonner une portion de texte (typiquement pour
analyser une QUERY_STRING) :
split(<motif>,$tex
,$texte)
te) rend le tableau
tableau cons
constitué
titué des "tron
"tronçons"
çons"
découpés dans $texte, <motif> définissant le
séparateur.
split(<motif>) comme ci-dessus sur la variria
able $_.

Un tronçonnage utile
Conception d'un
d'un s ite WEB
143
$buffer
$buffer == "" liquide=eau&œufs=on&...&nom=Mickey+M
liquide=eau&œufs=on&...&nom=Mickey+Mouse"
liquide=eau&œufs=on&...&nom=Mickey ouse"
liquide=eau&œufs=on&...&nom=Mickey+Mouse"
+Mouse"
@paires
@paires == split(/&/,$buffer);
split(/&/,$buffer);
...
...
u Le tableau contient, maintenant, des termes de la

forme :
$paires[0] = "liquide=eau"
$paires[1] = "œuf=on"
…
$paires[..] = "nom=Mickey+Mouse"
Pour aller plus loin

Conception d'un
d'un s ite WEB
144
foreach $paire
foreach $paire (@paires)
(@paires) {{
($nom,
($nom, $valeur)
$valeur) == split(/=/,
split(/=/, $paire);
$paire);
$valeur
$valeur =~
=~ tr/+/
tr/+/ /;
/;
$valeur
$valeur =~
=~ s/%(..)/pack("C",
s/%(..)/pack("C", hex($1))/eg;
hex($1))/eg;
......
} }
u Quatre nouveautés :
l la structure d'itération
foreach <scalaire> (<tableau>) {…}
l la fonction hex()
l la fonction pack()
l l'option "e" dans "s/…/…/ge"

Structure d'itération en Perl

Conception d'un
d'un s ite WEB
145
u On trouve les structure d'itération suivantes :

foreach $var (@tab) {…}
for(<initialisation>;<test>;<incrémentation>) {…}
while (<prédicat>) {…}
do {…} while(<prédicat>)
u Les prédicats sont construits à partir ds relations
suivantes :
== égalité numérique
!= différence nu
numérique
eq égalité lexicographique
ne différence le
lexicographique
=~ appariement
!~ désappariement
Expressions logiques
Conception d'un
d'un s ite WEB
146
u Les expressions logiques sont construites à partir

des connecteurs suivants :
! négation lo
logique (p
(pas)
&& conj
conjon
onct
ctio
ionn lo
logi
giqu
quee (e
(et)
t)
|| disjonction lo
logique (o
(ou)
u Ces connecteurs sont évalués en mode pa
pares
res s eux . Le
ème
2 opérande n'est évalué qu'en cas de besoin :
&& le 2ème opérande n'est évalué que si le 1 er opérande s'évalue à
"vrai",
|| le 2ème opérande n'est évalué que si le 1 er opérande s'évalue à
"faux".

Fonction hex() & pack()

Conception d'un
d'un s ite WEB
147
u Fonction hex :
hex ($te
($texte
xte)) rend la valeu
rend valeurr entière
entière corre
correspo
sponda
ndant
nt à la
la chaîne
chaîne $tex
$texte
te
supposée représenter un nombre exprimé en notation
hexadécimale.
h ex comme ci-dessus sur la variable $_.
u Fonction pack :
pack(" C " ,<e
<expr
xpr ess ion à valeur
valeur entière>)
rend la chaîne contenant le caractères dont le code
ASCII est la valeur de l'expression.
u La fonction pack() présente de très nombreuses
options toutes plus obscures les unes que les autres ;
donc consultez la documentation.
L'option "e" de la
Conception d'un
d'un s ite WEB
substitution
148
u L'option "e" indique que le motif de remplacement est

le résultat de l'évaluation d'une expression Perl.
u Exemple :
Option d'évaluation
s/%(..)/pack("C", hex($1))/eg
Expression dont l'évaluation

produit le motif de substitution

Finalement, une fonction

Conception d'un
d'un s ite WEB
bien utile
149
sub
sub read_input
read_input {{
local
local ($buffer,
($buffer, @paires,
@paires, $paire,
$paire, $nom,
$nom, $valeur,
$valeur, %FORM);
%FORM);
$ENV{'REQUEST_METHOD'} =~ =~ tr/a-z/A-Z/;
tr/a-z/A-Z/;
if
if ($ENV{'REQUEST_METHOD')
($ENV{'REQUEST_METHOD') eq eq "POST")
"POST") {{
read(STDIN,
}} else
else {{
$buffer
}}
@paires
@paires == split(/&/,
split(/&/, $buffer);
$buffer);
foreach
foreach $paire
$paire (@paires)
(@paires) {{
($nom,
($nom, $value)
$value) == split(/=/,
split(/=/, $paire);
$paire);
$valeur
$valeur =~
=~ tr/+/
tr/+/ /;
/;
$valeur
$valeur =~
=~ s/%(..)/pack("C",
s/%(..)/pack("C", hex($1))/eg;
hex($1))/eg;
$FORM{$nom} = $valeur;
$FORM{$nom} = $valeur;
}}
%FORM;
%FORM;
}}
Quelques considérations
Conception d'un
d'un s ite WEB
150
u Il est souvent nécessaire de tester un script CGI hors

connexion (économies de téléphone).
u Nous allons donc voir comment écrire deux petits
scripts Perl de test pour :
l une communication selon la méthode GET,
l une communication selon la méthode POST.
u Ces deux petits scripts peuvent être utilisés aussi
bien dans un contexte Unix que dans un contexte
Windows 95 ou NT.

Test de la méthode GET

Conception d'un
d'un s ite WEB
151
Message à transmettre tel qu'il viendrait
d'un formulaire.
$message = 'liquide=lait&recipi
'liquide =lait&recipient=bol&...'
ent=bol&...';
'liquide=lait&recipien
'liquide=l t=bol&...';;
ait&recipient=bol&...';
$ENV
$ENV{'
{'RE
REQU
{'RE QUES
REQUEST_T_ME
EST_ METH
T_ME THOD
OD'}
'} = 'GET
'GET';
'GET ';
ET';
$ENV{ 'Q
V 'QU UERY _S T
_S RRING'} = $mmesssaag
e
mes gee;;
system('perl script.pl');
Script à tester
On utilise la commande s ys tem qui crée

unvariables
processus fils qui hérite des
d'environnement.
Test de la méthode POST

Conception d'un
d'un s ite WEB
152
Message à transmettre tel qu'il viendrait
d'un formulaire.
$message == 'liquide=lait&recipie
'liquide= lait&recipient=bol&...'
'liquide=lait&recipi nt=bol&...';;
'liquide =lait&recipient=bol&...'
ent=bol&...';
$longueur == length($message);
length($message);
$ENV
$ENV{'
$ENV {'RE
NV{'REQU
QUES
EST_
T_ME
METH
THOD
OD'}
'} = 'POST
'PO
'POST';
'POST ';
$ENV
$ENV{'
$ENV {'CO
NV{'CONT
{'CO NTEN
CONT ENT_
NTENT_LE
ENT_ LENG
NGTH
TH'}
'}
T_LE TH'}'} = $lo
$long
ngue
ueur
ngue ur;;
ueur
open(CGI,'|perl
perl script.pl');
open(CGI,'|perl
open(CGI,'| script.pl');
print CGI $message;
close CGI;
On utilise l'ouverture d'un pip
pipee qui
permet au script testé d'hériter à la fois Script à tester
des variables d'environnements et de
recevoir le message via STDIN.

Un petit exemple de script

Conception d'un
d'un s ite WEB
153
Sub
Sub read_input
read_input {{
…
…
}}
%formulaire
%formulaire == &read_input();
&read_input();
print
print ""
lliiqquuiiddee :: $f
$$f
$ffoorrm
muullaaiirree{{''lliiqquuiiddee''}}
re
reci
reci
re cipi
pien
cipi ent
pienenttt :: $for
$f ormu
$for
$f mula
ormu lair
mula ire{
lair e{'r
ire{ 'rec
e{'r'rececipipie
ecipipieient
nt'}
ient
nt'}'}
'}
nnoom m :: $$ffoorrmu l a i r e {
mulaire{'nom'} ' n o m '}
";
";
Rôle des scripts CGI

Conception d'un
d'un s ite WEB
154
u Les scripts CGI interviennent très souvent dans le

cadre d'un site Web :
l Site de recherche : gestion d'une base de donnée,
l Site de commerce électronique : parcours du catalogue,
construction du "panier", élaboration de la facture, déclenchement
du paiement,
l Dispositifs variés :
– compteurs d'accès,
– livre d'or (guestbook),
– …
l Scripts d'analyse du traffic :
– pays, domaines, machines d'origine,
– navigateur utilisé,
– …

Deux exemples un peu

Conception d'un
d'un s ite WEB
réalistes
155
u Nous allons en terminer sur notre présentation du

langage Perl par les deux exemples suivants :
l petit moteur de recherche : utilisation intensive du traitement des
chaînes de caractères de Perl,
l constructeur de "paniers" : utilisation systématique des "magic
cookies".
u Les "magic cookies" ou plus simplement "cookies"
est une technique introduite par Netscape (à partir de
la version 3.0 de son navigateur) pour pallier au
comportement purement combinatoire du protocole
HTTP.
Un petit moteur de recherche

Conception d'un
d'un s ite WEB
156
u Nous nous contenterons d'une

clé hiérarchis és , non optimisée,rech
recherch
danserche
unedomaine
par mots
par
bien ciblé :
Recherche gastronomique
u Nous n'en verrons que les grandes lignes (les détails
seront développés sur machine) :
l structure du fichier des informations,
l formulaire de référencement,
l formulaire d'interrogation,
l moteur de recherche,
l présentation des résultats de la recherche.

Le fichier des informations

Conception d'un
d'un s ite WEB
157
u Nous nous contenterons d'un fichier unique dans

lequel chaque enregistrement correspond à une ligne.
u Les enregistrements seront rangés dans l'ordre où ils
auront été introduits.
u Ce fichier s'appellera BASE.
u Cette structure peut suffire pour de petites bases de
données, elle conduirait, autrement, à des temps de
consultation prohibitifs.
Un enregistrement
Conception d'un
d'un s ite WEB
158
u
Un enregistrement est
champs-information constitué
séparés parde champs-clé
le signe "|" ; ilsetsont
de
séparés entre eux par le signe ":".
u Champs clé (dans cet ordre) :
l ville,
l spécialité : locales, asiatiques, viandes, poissons,
l catégorie de prix : 50-100, 100-200, 200-300, >300.
u Champs information (dans cet ordre) :
l photo (fichier JPEG),
l nom, sous titre,
l adresse,
l prix1, menu1, prix2, menu2.

Pages associées
Conception d'un
d'un s ite WEB
159
u Deux pages sont nécessaires :

l formulaire d'interrogation pour rechercher le restaurant qui nous
convient,
l formulaire de référencement pour permettre à un restaurateur de
référencer son restaurant dans la base.
Formulaire d'interrogation
Conception d'un
d'un s ite WEB
160

Formulaire de référencement
Conception d'un
d'un s ite WEB
161
Modèles de Page associées

Conception d'un
d'un s ite WEB
162
u
Un modèle de page est nécessaire :
l modèle de présentation pour afficher le résultat d'une recherche,
u Le modèle de présentation ne constitue pas une page

à proprement parler, il sert simplement de modèle à la
page que le script d'interrogation doit produire.

Modèle de présentation
Conception d'un
d'un s ite WEB
163
Format de l'enregistrement
Conception d'un
d'un s ite WEB
164
u
L'enregistrement est sur une seule ligne telle que :
ville:specialite:categorie|
ville:specialite:categorie|
photo:nom:soustitre:adresse:prix1:menu1:prix2:menu2
photo:nom:soustitre:adresse:prix1:menu1:prix2:menu2
Le champ pho
photo
to correspond au nom du fichier
JPEG, la photo sera parvenue par un autre canal
que celui du formulaire (La poste par exemple).

Les repères des formulaires

Conception d'un
d'un s ite WEB
165
u Les différentes champs de l'enregistrement

correspondent
corresponde nt aux entités de formulaire ayant les
noms suivants (sauf photo) :
l v ille : ville - clé n°1
l spec
sp ecia
iali
lite
te : sp
spéc
écia
iali
lité
té - cl
clé
é n°
n°2
2
l cate
ca tego
goririe
e : ca
caté
tégo
gori
riee - cl
clé
é n°
n°3
3
l nom : nom du restaurant - information
l sous
so usti
titr
tre
e : com
compl plém
émenentt de
de no
nom - in
info
form
rmat
atio
ion
n
l adre
ad ress
sse e : ad
adre
ressse - in
info
form
rmat
atio
ion
n
l p r i x1 : prix du menu n°1 - information
l menu1 : menu n°1 - information
l p r i x2 : prix du menu n°2 - information
l menu2 : menu n°2 - information
Les repères des scripts

Conception d'un
d'un s ite WEB
166
u
Les différentest aux
corresponden
correspondent champs de de
entités l'enregistrement
présentation suivantes :
l v ille : $ville
l spec
sp ecia
iali
lite
te : $sp
$spec
ecia
iali
lite
te
l cate
ca teggor
orie
ie : $c
$cat
ateg
egor
orie
ie
l photo : $photo
l nom : $nom
l soustitre : $s
$soustitre
l ad r esse : $adresse
l p r i x1 : $prix1
l menu1 : @menu1
l p r i x2 : $prix2
l menu2 : @menu2

Script d'interrogation :
Conception d'un
d'un s ite WEB
structure
167
u Le script d'interrogation comporte trois parties

décrites par trois fonctions :
%formulaire = &read_input();
construction du tableau associatif correspondant au formulaire
d'interrogation.
@resultats = &interrogation($cle1,$cle2,$cle3);
interrogation du fichier des données et construction du tableau
de la partie information des enregistrements trouvés.
do page(@resultats);
construction de la page de présentation.
Script d'interrogation :
Conception d'un
d'un s ite WEB
source
168
sub
sub read_input
read_input {...}
{...}
sub
sub interrogation
interrogation {...}
{...}
sub page {...}
sub page {...}
sub
sub compose_motif
compose_motif {...} {...}
sub
sub compose_menu
compose_menu {...} {...}
%formulaire
%formulaire == &read_input();
&read_input();
$cle1 = $formulaire{'ville'};
$cle1 = $formulaire{'ville'};
$cle2
$cle2 == $formulaire{'specialite'};
$formulaire{'specialite'};
$cle3
$cle3 == $formulaire{'categorie'};
$formulaire{'categorie'};
@resultats
@resultats == &interrogation($cle1,
&interrogation($cle1, $cle2,
$cle2, $cle3);
$cle3);

Fonction d'interrogation
Conception d'un
d'un s ite WEB
169
sub interrogation {
local
local ($cle1, $cle2,
$cle2, $cle3) == @_;@_;
open(BASE,"<base.rst") || die 'fichier
'fichier inconnu';
foreach $enregistrement (<BASE>) {
($cles,
($cles, $info) = split(/\|/,$enregistrement);
split(/\|/,$ enregistrement);
split(/\|/, $enregistrement);
($lc1, $lc2, $lc3) == split(/:/,$cles);
split(/:/, $cles);
if (($cle1
(($cle1 eq $lc1)&&
($cle2 eq $lc2)&&($cle3 eq $lc3)) {
push(@RESULTATS,$info);
}}
}
close
close BASE;
@RESULTATS;
@RESULTATS;
}
Composition de la page
Conception d'un
d'un s ite WEB
170
$nom $prix1 $prix2
$photo $soustitre
$menu1 $menu2
$adresse
u La présentation de la page est obtenue en combinant

des motifs construits à l'aide de 3 tables.
u Il y a autant de motifs que d'éléments dans le tableaux
@resultats.

Fonction de composition de
Conception d'un
d'un s ite WEB
la page
171
sub
sub page
page {{
print
print ""
Content-type:
text/html
<HTML>
<HTML>
<HEAD><TITLE>Résultats</TITLE></HEAD>
<HEAD><TITLE>Résultats</TITLE></HEAD>
<BODY
<BODY BGCOLOR=\"White\">";
BGCOLOR=\"White\">";
foreach
foreach $resultat
$resultat (@_)
(@_) {{
print
print ""
<TABLE
<TABLE WIDTH=\"100%\"
WIDTH=\"100%\" BORDER=\"2\"
BORDER=\"2\"
CELLSPACING=\"2\"
CELLSPACING=\"2\" CELLPADDING=\"2\">";
CELLPADDING=\"2\">";
do
do compose_motif($resultat);
compose_motif($resultat);
print
print "</TABLE>";
"</TABLE>";
}}
}} print
print "</BODY></HTM
"</BODY></HTML>
L>
"</BODY></HTML
"</BODY> > ";
</HTML> ";
Fonction de composition du
Conception d'un
d'un s ite WEB
motif
172
sub compose_motif
sublocal
compose_motif
local {{
($photo,$nom,$soustitre,$adresse,
($photo,$nom,$soustitre,$adresse,
$prix1,$menu1,$prix2,$menu2)
$prix1,$menu1,$prix2,$menu2)
== split(/:/,
split(/:/, @_[0]);
@_[0]);
print "<TR>
print "<TR>
<TD><IMG
<TD><IMG SRC=\"$photo\"></TD>
SRC=\"$photo\"></TD>
<TD
<TD ALIGN=\"CENTER\">
ALIGN=\"CENTER\">
<FONT
<FONT SIZE=\"+3\"><B>$nom</B></FONT><BR>
SIZE=\"+3\"><B>$nom</B></FONT><BR>
<B>$soustitre</B><HR>$adresse</TD>
<B>$soustitre</B><HR>$adresse</TD>
<TD
<TD ALIGN=\"CENTER\"
ALIGN=\"CENTER\" VALIGN=\"TOP\">
VALIGN=\"TOP\">
<B>Menu
<B>Men
<B>Menu
<B>Men u 1 : $prix1 F</B
F</B><HR>
><HR>
<HR>";
u 1 : $prix1 F</B><HR>
F</B> ";
do compose_menu(split(/\./,$menu1));
compose_menu(split(/\./,$men
do compose_menu(split(/\./,$menu
compose_menu(split(/\./,$menu1));u1));
1));
print
print "</TD>";
"</TD>";
…..
…..
print
print "</TR>";
"</TR>";
}}

Fonction de composition des

Conception d'un
d'un s ite WEB
menus
173
sub
sub compose_menu
compose_menu {{
print
print "<TABLE>";
"<TABLE>";
foreach
foreach $item
$item (@_)
(@_) {{
pr
prinint
inttt "" <T
prin
pr <TR>
R>
<TR>
<T R>
<TD
<TD VALIGN=\"TOP\">
VALIGN=\"TOP\">
<IMG
<IMG SRC=\"blueball.gif\"></TD>
SRC=\"blueball.gif\"></TD>
<TD VALIGN=\"TOP\">$item</TD>
<TD VALIGN=\"TOP\">$item</TD>
</TR>
</TR>
";
";
}}
print
print "</TABLE>";
"</TABLE>";
}
Script de référencement :
Conception d'un
d'un s ite WEB
source
174
sub
sub read_input
read_input {...}
{...}
sub
sub referencement {...}
referencement {...}
do
do referencement(%formulaire);
referencement(%formulaire);
u Cette version est minimale, on peut, bien sûr, la

compléter :
l On pourrait, par exemple, renvoyer une page analogue à la page de
présentation,
l ...

Fonction de référencement
Conception d'un
d'un s ite WEB
175
sub referencement {
local ($ville, $specialite, $categorie, ...) ==
(@_[0]){'ville'},
(@_[0]){'ville'}, @_[0]){'specialite'},
@_[0]){'specialite'}, …);
…);
open(BASE,">>base.rst") || die 'fichier inconnu';
print BASE "$ville:$specialite:
"$ville:$speci alite: …
… |$photo:
|$photo: … \n";
close
close BASE;
}
u Voici une version élémentaire de la fonction de

référencement.
u Il reste quelques petits problèmes à résoudre :
l traitement des caractères spéciaux,
l permettre le déréférencement,
l éviter les déréférencements "sauvages" ...
Le "panier de la ménagère"
Conception d'un
d'un s ite WEB
176
u
Lorsqu'on navigue
formulaires sur reprises,
à diverses un site, en
lesoumettant des
serveur ne peut
pas conserver chez lui la trace de ce qui a été saisi ; il
n' a aucun moyen d'identif
n'a d' identifier
ier qui
qu i l'appelle
l'appelle car les
adress es IP s ont pres
pres que toujours
toujours flflot
otttant
ntes
es .
u Pour ce faire, le serveur peut :
l Provoquer l'écriture d'une information de son choix dans un fichier
de la machine client.
l Relire l'information qu'il a fait écrire.
u Ces portions d'informations s'appellent des "magic
cookies".

Maintenir un "état"
Conception d'un
d'un s ite WEB
177
u L'utilisation de cookies n'est pas la seule technique

possible.
u On peut, également, utiliser les champs "cachés" des
formulaires :
<INPUT TYPE="HIDDEN" NAME="…" VALUE="…">
u Ces champs ne sont pas affichés, ils permettent au
serveur d'inclure dans un formulaire une information
qui lui sera retransmise.
u On peut ainsi créer des formulaires "à tiroirs".
ti roirs".
Mise en place d'un cookie

Conception d'un
d'un s ite WEB
178
u
Un cookie
renvoyé est
par leune portion
serveur de l'en-tête
(scriptl CGI)
'en-tête du document
et reçu par le
navigateur.
u Le cookie est rangé dans un fichier cookies.txt par le
navigateur Netscape, dans un répertoire Cookies par
Internet Explorer.
Content-type:
text/html
Set-Cookie: <Nom>==<Valeur>;; expires=
Set-Cookie: expires=<Date>
<Date>;;
path= <Chemin> <Domaine>
path=<Chemin>; domain=<Domaine>;;
; domain=
secure
secure
<HTML>
<HTML> …
… </HTML>
</HTML>

Paramètres des cookies (1)

Conception d'un
d'un s ite WEB
179
u <Nom>=<Valeur>
obligatoire — chaînes de caractères (sans point-virgule, virgule ou
espace qui peuvent être URL-encodés : %..) définissant le nom et la
valeur du cookie.
compte=1
u expires=<Date>
facultatif — indique la date à partir de laquelle le cookie doit être
détruit.
Si ce paramètre n'est pas fourni, le cookie est détruit au moment où
on quitte le
le navi
navi g ate
ateur
ur .
expires=Tuesday,19-May-1998 18:35:40 GMT

Conception d'un
d'un s ite WEB
180
u
domain= <Domaine>
facultatif — nom du domaine de la machine vers lequel le cookie peut
être renvoyé. Ce nom doit comporter au moins 2 points ".", La
comparaison est effectuée par la fin.
domain=.unice.fr
Ce nom de domaine correspond aux machines verdon.unice;fr,

hermes.unice.fr, i3S.unice.fr …
Si ce paramètre n'est pas fourni, le cookie ne peut être renvoyé qu'à la
machine qui l'a mis en place.


Conception d'un
d'un s ite WEB
181
u path=<Chemin>
facultatif — tête du chemin qui doit être indiqué dans l'URL requise
pour déclencher l'envoi du cookie.
path=/~jdem
Cette tête de chemin correspond au répertoire ~jdem ainsi qu'à tous

ses sous-répertoires.
Si ce paramètre n'est pas fourni, le cookie ne peut être renvoyé qu'en
s ui vant exactement
ex actement le même
même chemi n que celui de la requête à l'origine
de l'installation du cookie.
u secure
facultatif — le cookie ne peut être transmis qu'à un serveur s écu
écuri
ri s é.
Renvoi d'un cookie

Conception d'un
d'un s ite WEB
182
u
Lorsqu'une URL est
tous les cookies requise,etlerenvoi
concernés navigateur recherche
vers le serveur
un message de la forme :
Cookie: <Nom1>=<Valeur1>; <Nom2>=<Valeur2>; …
u Cette chaîne de caractères (sans "Cookie:") est
accessible dans la variable d'environnement
HTTP_COOKIE
u Le traitement de HTTP_COOKIE est analogue à celui
de QUERY_STRING (cf. diapo 149).

De plus ...
Conception d'un
d'un s ite WEB
183
u On peut envoyer plusieurs cookie dans le même en-

tête.
u Un client peut toujours supprimer un cookie avant
que le navigateur ne le détruise en éditant le fichier
cookies.txt.
u Pour supprimer un cookie, il suffit de renvoyer un
cookie de même définition qui expire dans
dans le pa
pass s é.
u Les cookies traversent les proxy-serveurs.
u Limitations :
l pas plus de 300 cookies,
l pas plus de 4Ko par cookie,
l pas plus de 20 cookies par serveur ou domaine.
Exemple de transaction
Conception d'un
d'un s ite WEB
184
Client Serveur
Set-cookie: client=Donald; path=/; expires=Monday,25-May-1998 23:59:59 GMT
Client Serveur
Cookie: client=Donald
Client Serveur
Set-cookie: legumes=carottes; path=/
Client Serveur
Cookie: client=Donald; legumes=carottes
Client Serveur
Set-cookie: laitages=yaourts; path=/
Client Serveur
Cookie: client=Donald; legumes=carottes; laitages=yaourts

Quelques références
Conception d'un
d'un s ite WEB
185
u La définition des cookies est en pleine évolution. Pour

plus d'informations, on peut consulter :
http://home.netscape.com/newsref/std/cookie_spec.html
bonne introduction (par les inventeurs) à l'utilisation
l 'utilisation des cookies.
http://www.illuminatus.com/cookie.fcgi
bonne réflexion sur les risques encourus (très peu) et l'utilisation
des cookies.
http://www.gh-interactive.com/WEBMASTERREPORT2.HTML
magazine à parution (relativement) périodique traitant de
différents sujets concernant l'administration d'un serveur Web.
A présent, changeons de côté

Conception d'un
d'un s ite WEB
186
u
Faisons le point :
Côté cl
client Côté se
serveur
Pages statiques Langage

LangageHTML
HTML
Scripts
Scripts Scripts
ScriptsCGI
CGI
Pages dynamiques
Javascript*
Javascript* Perl
Perl
* … et Applets Java (ou Active-X). Nous ne présenterons

présenterons que le langage Javascript
beaucoup plus utilisé (et admis pour cet usage) que le langage Java.

Javascript
Conception d'un
d'un s ite WEB
187
u J avas
avascc r ip
ipt
t est
est une extension de HTML qui permet
d'inclure, dans une page HTML, des fragments de
programmes interprétés par le navigateur.
u J avas
avascc r ip
ipt
t n'est
n'est pas du J ava simplifié. C'est un
langage de programmation à part entière, possédant
des possibilités très modernes, normalisé sous la
référence ECMA-262.
u Quelques références :
http://www.ecma.ch/
http://www.dpunkt.de/javascript/
http://developer.netscape.com/
http://www.imaginet.fr/ime/javascri.htm
Mon premier script

Conception d'un
d'un s ite WEB
188
<HTML>
<HTML>
<HEAD><TITLE>JavaScript
<HEAD><TITLE>Java
<HEAD><TITLE>Java Script
Script -- leçon
<HEAD><TITLE>JavaScript leçon
1</TITLE></HEAD>
1</TITLE></HEAD>
<BODY
<BODY BGCOLOR="White">
BGCOLOR="White">
<P>Texte
<P>Texte HTML
HTML normal.<BR>
normal.<BR>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="JavaScript">
document.write("Ceci
document.write("Ceci provient
provient d'un
d'un script
script JavaScript.")
JavaScript.")
</SCRIPT><BR>
</SCRIPT> <BR>
</SCRIPT><BR>
Et
Et voici,
voici, à
à nouveau,
à nouveau, du du texte
texte HTML.</P>
HTML.</P>
</BODY></HTML>
</BODY></HTML>
u On remarque une nouvelle balise-conteneur qui peut

être placée n'importe où dans la description d'une
page HTML :
<SCRIPT paramètres>…</SCRIPT>

Une petite précaution

Conception d'un
d'un s ite WEB
189
…
…
<SCRIPT
<SCRIPT LANGUAGE="JavaScr
LANGUAGE="JavaScript">
LANGUAGE="JavaScript">
LANGUAGE="JavaS ipt">
cript">

//-->
</SCRIPT>
</SCRIPT>
...
...
u Les navigateurs antérieurs à Netscape 2.0 et Internet

Explorer 3.0 ne reconnaissent pas J avas
avascc ri pt . Il est
donc prudent d'en cacher les instructions en simulant
des commentaires.
Les événements
Conception d'un
d'un s ite WEB
190
u
Evénements
mamelles la gprogrammation
de et es tion
tionnair
naires
es d'
d'événemen
Jévénements
avascc ri pt ts
avas . sont les 2
u La programmation J avas
avascr
cr i pt est
est donc
essentiellement réactive.
u Un événement est une situation fugitive qui est
apparaît dans certaines conditions :
onLoad on vient de charger unune nouvelle page,
onClick on vient de cliquer sur un bouton,
onMous
onM ouseOv
eOver
er la souri
souris
s vient
vient d'entrer
d'entrer dans
dans la
la zone
zone d'un
d'un lien,
lien,
onMo
on Mous
useO
eOut
ut la sou
souri
ris
s vien
vientt de sor
sorti
tirr d'une
d'une zon
zone
e de lie
lien,
n,
...

Une première réaction

Conception d'un
d'un s ite WEB
191
<HTML>
<HTML>
...
... Une expression
<BODY>
<BODY> J avas cr i pt.
<FORM>
<FORM> Remarquer " et '
<INPUT
<INPUT TYPE="Button"
TYPE="Button"
VALUE="Chiche
VALUE="Chiche !" !"
onClick="alert('Boum
onClick="alert('Boum !')">
!')"
!')">>
</FORM>
</FORM>
</BODY></HTML>
</BODY></HTML>
"Objets" J
Jav
avas
ascr
cr i pt
Conception d'un
d'un s ite WEB
192
u Le langage J avas
modèle-objet avascr
cr ipt est
simple. est construit autour d'un
u Toutes les entités que permettent de manipuler les
instructions de ce langage sont des atomes ou des
objets caractérisés par des attributs :
l certains définissent ses pr
propr
opriétés
iétés — qui sont d'autres objets ou
atomes,
l d'autres définissent ce que l'on peut lui faire : ce sont ses
méthodes .
u Nous verrons que les objets peuvent être définis et
créés, par contre, il n'existe aucun mécanisme
d'héritage.

Entités prédéfinies
Conception d'un
d'un s ite WEB
193
u Javascript prédéfinit les types d'atomes suivants :

l nombres
nomb res : 3 ou 3.
3.14
14 ou
ou 0.03
0.031e
1e2
2
l bool
bo olée
éens
ns : tru
true
e ou
ou fal
false
se
l chaî
ch aîne
nes
s : "c"cou
ouco
cou"
u" ou 'c
'cou
ouco
cou'
u'
l fermetures :fonction et son environnement de définition
u Le modèle objet de Javascript est construit autour de
la structure de dictionnaire symbolique (tableau
associatif) dont la seule constante est this. Ce
dictionnaire symbolique est instanciable et les objets
Javascript seront tous des instances de this.
Accès aux attributs et aux

Conception d'un
d'un s ite WEB
méthodes
194
u Un objet étant
(propriétés ou un dictionnaire,
méthodes) peut l'accès aux attributs
donc naturellement
être :
l Math["sin"] fonction
Math["sin"] fonction sinus
l Math["
Math["PI"]
PI"] val
valeur
eur du nom
nombre
bre Pi
u Cette écriture étant assez lourde, on lui a associé un
sucre syntaxique (opérateur "." qui s'associe à
gauche) :
l Math.PI Math.sin
u Exemple :
l Math
Math.s
.sin
in(1
(1.5
.5)) calc
calcul
ule
e le si
sinu
nus
s d'
d'un
un an
angl
gle
e de 1.
1.5
5 ra
radi
dian
ans
s

Une page HTML

Conception d'un
d'un s ite WEB
195
u Lorsqu'une fenêtre (contenant une page HTML) est

construite par le navigateur, une hiérarchie d'objets
Javascript est construite parallèlement.
u Les scripts Javascript pourront accéder et manipuler
les éléments de cette fenêtre (donc de la page HTML)
à travers cette hiérarchie.
u Seront manipulables (entre autres) :
l les ancres ou liens,
l les images,
l les formulaires.
Hiérarchie des objets

Conception d'un
d'un s ite WEB
Jav
J avas
ascr
cr i pt
196
window
navigator document history[..]
mi
mim
meT
eTyp
ypes
es[.
[..]
.] an
anch
chor
ors[
s[..
..]] / li
lin
nks
ks[.
[..]
.]
Plugins[..] forms[..] elements[..]
images[..]
location

Composantes d'une page (1)

Conception d'un
d'un s ite WEB
197
u La hiérarchie des objets associés à l'objet document

est construite au fur et à mesure que le texte HTML
est interprété.
u Ainsi :
l Les images seront repérées par :
document.images[0]
document.images[1]
…
l Les liens seront repérés par :
document.links[0]
document.links[1]
…
l etc...
Composantes d'une page (2)

Conception d'un
d'un s ite WEB
198
u La
esthiérarchie
plus faciledes objets associés
à parcourir à l'objetses
si on a nommé document
éléments.
u Ainsi :
l L' image définie par :
– <IMG SRC="../Image1.gif" NAME="Chiche" ...>
sera repérée par : document.Chiche
l Le lien défini par :
– <A HREF="lesson_1.html" NAME="lesson_1">…
sera repéré par : document.lesson_1
l etc...

Un exemple plus conséquent

Conception d'un
d'un s ite WEB
199
<FORM
<FORM NAME="somme">
NAME="somme">
<INPUT
<INPUT TYPE="Text"
TYPE="Text" NAME="x"
NAME="x" VALUE="0"><BR>
VALUE="0"><BR> ++
<INPUT
<INPUT TYPE="Text"
TYPE="Text" NAME="y"
NAME="y" VALUE="0"><BR>
VALUE="0"><BR>
<INPUT
<INPUT TYPE="Button"
TYPE="Button"
VALUE="
VALUE=" == ""
onClick=
onClick=
"document.somme.z.value
"document.somme.z.value ==
String(parseInt(document.somme.x.value)
String(parseInt(document.somme.x.value) ++
parseInt(document.somme.y.value))">
parseInt(document.somme.y.value))">
<INPUT
<INPUT TYPE="Text"
TYPE="Text" NAME="z"
NAME="z" VALUE="0">
VALUE="0">
</FORM>
</FORM>
Structure d'un programme

Conception d'un
d'un s ite WEB
200
u
A
et la base,
des . atomes , des objets , des variables
on a des
opérateurs
u Une variable est, a priori, un nom utilisé pour
désigner la valeur d'un atome ou d'un objet.
u Les atomes, les objets, les variables, les opérateurs et
les expressions peuvent être regroupés pour former
des expressions .
u Un pr
prog
og r amme est une expression.
Et c'est tout !
u Nous avons déjà vus certains atomes et certains
objets, voyons les opérateurs.

Nom de variable
Conception d'un
d'un s ite WEB
201
u Un nom de variable est un symbole uniquement

conçu pour ne pas être confondu avec autre chose
(un nombre par exemple).
u En J avas
avascc ri pt , un nom de variable est formé de lettres
et de chiffres et commence par une lettre.
l Le signe _ est considéré comme une lettre.
u On distingue les lettres majuscules des lettres
minuscules.
<nom> ::= [a-zA-Z_] [0-9a-zA-Z_]*
Opérateurs
Conception d'un
d'un s ite WEB
202
u A la base, l'opérateur représente une fonction au sens

mathématique.
+ addition
- différence
* produit
/ division
u Certains opérateurs ne produisent que des effets :
v a r .. = .. définition d'une variable
function .. .. (.
(..) ..
.. définition d'
d'une fe
ferm
rme
eture
wr i t e écriture — cf. document.write(...)
u Un opérateur est appliqué à ses arguments lors de
l'évaluation de l'expression qui le contient.
u Une fermeture est un opérateur défini par lele
programmeur.

Expressions : sémantique
Conception d'un
d'un s ite WEB
203
u La syntaxe des expressions n'est pas unifiée ni tout à

fait régulière (comme dans certains langages comme
Scheme), elle dépend de l'opérateur et du contexte.
u Sémantiquement, une expression est toujours
associée à un arbre d'évaluation dont les feuilles sont
des atomes ou des objets et dont les nœuds sont des
opérateurs.
u Un mécanisme d'évaluation associe une valeur à
toute expression.
Evaluation
Conception d'un
d'un s ite WEB
204
u Comme
fonction,un opérateur de
l'évaluation estl'expression
la représentation
qui led'une
contient
revient à remplacer, dans sa formule de définition, ses
paramètres par ses arguments.
si f(x) = 3.x + 2 alors f(2) = 3.2 + 2
paramètre argument

Deux stratégies d'évaluation

Conception d'un
d'un s ite WEB
205
Soit f(x)
Soit f(x) = 1 + x.
x.(2
(2 + 3.x)
3.x)
et g(y) = y.y
Que vaut f(g(5)) ?
f(g(5))
f(g(5)) = 1 + g(5).
g(5).(2
(2 + 3
3.g(5)
.g(5))) f(g(5)
f(g(5))) = f(5.5)
f(5.5)
= 1 + 5.5.(2 + 3.5.5) = f(25)
= 1926 = 1 + 25.(2 + 3.25)
Evaluation en = 1926
ordre nor ma
mall Evaluation en
les arguments sont ordre applicatif
applicatif
passés non évalués
lespassés
arguments sont
évalués
Laquelle choisir ?
Conception d'un
d'un s ite WEB
206
u Les théoriciens (théorèmes de Church-Rosser)

montré que l'évaluation en ordre normal aboutitont
toujours.
u Mais l'évaluation en ordre applicatif est plus rapide.
u Alors :
l on évalue en ordre applicatif les expressions qui le peuvent :
for mes s tandards ,
l on évalue en ordre normal les expressions* que ne peuvent pas
être évaluées en ordre applicatif : for mes s péci ales .
* ces expressions sont en petit nombre et bien connues. Heureusement !

Expressions vs Instructions
Conception d'un
d'un s ite WEB
207
u Certains opérateurs produisent essentiellement un

"effet". Par exemple :
read(..)
write(..)
u Lorsqu'une expression ne produit qu'un effet ou
lorsque sa valeur n'est pas utilisée, on l'appelle,
l 'appelle, en
général, une instruction .
u Les instructions ne sont réellement indispensables
que lorsqu'il s'agit de décrire un comportement
d'interface. Il peut, cependant, être commode d'en
utiliser dans d'autres contextes.
Séquences
Conception d'un
d'un s ite WEB
208
u En ordre applicatif, l'ordre n'a

dans lequelimportance.
on évalue les
arguments d'un opérateur aucune
u Par contre, l'enchaînement des effets produits va
dépendre de l'ordre dans lequel les instructions sont
évaluées.
u Il existe donc un opérateur qui garantit l'ordre dans
lequel on évalue ses arguments : la
l a séquence.
l expression-séquence : (<expression>, <expression>…)
l instruction-séquence : {<instruction>; <instruction>…}
u La valeur d'une expression-séquence est celle de la
dernière expression évaluée.

Opérateurs standards
Conception d'un
d'un s ite WEB
209
u Un opérateur standard est tel que ses arguments

peuvent être évalués dans n'importe quel ordre sans
que son comportement en soit affecté.
Opérateurs "bit à bit" Opérateurs arithmétiques
& "et" bit à bit + Addition (concaténation)
| "ou" bit à bit - soustraction
^ "ou-exclusif" bit à bit * multiplication
<< décalage à gauche / division
>> décalage à droite % reste
>>> décalage à droite
Opérateurs de relation
== égaux != différents
< inférieur > supérieur
<= inférieur ou égal >= supérieur ou égal
Expressions standards
Conception d'un
d'un s ite WEB
210
u La syntaxede
et Javascript
la sémantique des expressions
standards est identique* à celles
utilisées par le langage C.
u Exemples :
3 x
3+4 3*4+5
(x < y) || (x < z) (n == 0)
(3 + x) * (5 + z) factorielle(6)
u La priorité des opérateurs est la même et les
parenthèses sont utilisées de la même façon.
* pour ce que j'ai pu con

constater
stater jusqu'à
jusqu'à prése
présent.
nt.

Expressions spéciales (1)

Conception d'un
d'un s ite WEB
211
u La syntaxe et la sémantique des expressions

spéciales de Javascript est pr
pres
es que identique à celles
utilisées par le langage C.
u Expressions conditionnelles :
<prédicat> ? <conséquence> : <alternative>
if (<prédicat>) {<conséquence>} else { <alternative>}
if (<prédicat>) {<conséquence>}
u Opérateurs d'itération :
while (<prédicat>) {...}
do {…} while (<prédicat>) {…}
for (<expr-i>; <expr-f>; <expression>) {…}
Expressions spéciales (2)

Conception d'un
d'un s ite WEB
212
u Définir une variable, c'est lier un nom à une valeur.

u Définition d'une variable :
<nom> = <expression>
u Lorsqu'un nom qui n'a été lié à aucune valeur apparaît
dans une expression, on dit que c'est une variable
libre. Sinon, la variable est dite liée.
u Une expression contenant des variables libres n'a pas
de valeur, on dit que sa valeur est undefined (la non-
valeur).
u Une expression ne contenant aucune variable libre
l ibre
est dite fermée.

Lieurs de variables
Conception d'un
d'un s ite WEB
213
u Le signe = est un lieur de variable :

l'expression (x = 2, x+5) vaut 7
u Lorsqu'une variable est liée, on peut la renommer
librement (presque).
u La définition d'une fonction est une autre manière de
lier des variables :
function <nom> (<nom>, <nom>…) {…}
Paramètres :
noms liés dans la séquence
u L'opérateur function construit en fait une fer

fermeture
meture.
Opérateurs "paresseux"
Conception d'un
d'un s ite WEB
214
u Certains opérateurs
considérés pourraient très bien être
comme standards.
u Pourtant, il est commode (plus efficace) de les
considérer comme spéciaux car tous leurs arguments
ne sont pas nécessaires à leur évaluation.
u On peut procéder ainsi pour toutes les fonctions
incomplètes.
Opérateurs booléens
&& conjonction
|| disjonction
! complémentation

Objet statiques ...

Conception d'un
d'un s ite WEB
215
u Pour représenter certaines situations réelles, la

variable définie s ta
tatiqu
tiquement
ement —
— lien nom-valeur
éternel — comme nous venons de le voir n'est pas
très commode.
u On acceptera (avec réticence) de perdre les
possibilités du raisonnement au
au profit des
possibilités de la description .
Ce qui revient à avoir l'attitude un peu illogique * suivante : décrivons
déjà, on verra bien après ce qu'on peut en faire.
* souvenez-vous de proverbe "Shaddock" : il n'est pas n nécessaire

écessaire de
regarder où on va, il sera bien temps de voir quand on y sera !
… ou objets vivants ?
Conception d'un
d'un s ite WEB
216
u On admettra alorssuivantes
les deux opérations
complémentaires :
attacher un nom à une valeur : définir une
une variable,
attacher une valeur à un nom : affecter une
une variable.
u Le lien nom-valeur n'est plus éternel et la variable
peut avoir une histoire.
x=3 définition de la variable x
x=4 affectation de la variable x qui, à présent, vaut 4
x=x+2 ré-affectation de la variable x
u Ce qui est à droite d'un signe = fait référence au
passs é tandis que ce qui est à gauche représente le
pas
futur .

Opérateurs d'affectation
Conception d'un
d'un s ite WEB
217
u Ces opérateurs sont, en fait, des sucres syntaxiques :

x += 3 au lieu de x = x + 3
x -= 5 au lieu de x = x - 5
u La syntaxe générale des expressions (instructions ?)
utilisant ces opérateurs est :
x <op>= <expression> au lieu de x = x <op> <expression>
u Une expression d'affectation a une valeur,
l'expression suivante a donc un sens :
x=y=z=3 l'opérateur = s'associe à droite.
Opérateurs
d'inc(dec)rémentation
Conception d'un
d'un s ite WEB
218
u Certains
implicite opérateurs
: décrivent une affectation
++ incrémentation
-- décrémentation
u L'incrémentation (décrémentation) peut être effectuée
avant ou après l'évaluation de l'expression contenant
l'opérateur.
u Préincrémentation (prédécrémentation) :
(x++ + 2)
(x++ 2) on év
éval
alue
ue x+
x+2
2 pui
puiss x es
estt inc
incré
réme
ment
ntée
ée
(++x
(++x + 2)
2) on in
incr
crém
émen
ente
te x pui
puis
s on
on éva
évalu
lue
e x+ 2

Les objets J
Jav
avas
ascr
cr i pt
Conception d'un
d'un s ite WEB
219
u Un objet javas c ri pt est
est décrit par sa fonction-
constructeur qui configure l'objet universel this en lui
définissant des attributs et des méthodes.
u Exemple — un nombre rationnel possède 2 attributs,
son numérateur et son dénominateur :
function Rationnel(n,d) {
this.numerateur = n;
this.denominateur = d;
}
Instanciation d'un objet

Conception d'un
d'un s ite WEB
220
u L'instanciation
standard new . d'un objet est effectuée par l'opérateur
u Instancier un objet, c'est en fabriquer un nouvel
exemplaire à partir de sa description.
u Exemple :
q12 = new Rationnel(1,2)
q34 = new Rationnel(3,4)
u Accès aux attributs :
q12.numerateur vaut 1
q12.denominateur vaut 2

Les méthodes d'un objet (1)

Conception d'un
d'un s ite WEB
221
u En définissant la fermeture ad'hoc, on peut associer

une méthode d'addition aux nombres rationnels.
function rat_somme(q) {
n1 = this.numerateur;
d1 = this.denominateur;
n2 = q.numerateur;
d2 = q.denominateur;
return new Rationnel(n1*d2+n2*d1,d1*d2);
}
u On remarque l'utilisation de l'objet this qui représente
l'objet qui a reçu le message.
Les méthodes d'un objet (2)

Conception d'un
d'un s ite WEB
222
u Il ne reste plus qu'à rajouter la méthode aux

propriétés de l'objet.
function Rationnel(n,d) {
this.somme = rat_somme;
this.numeraratteur = n;
this.d
this.deno
enomin
minate
ateur
ur = d;
}
u On peut alors créer des nombres rationnels et
effectuer des opérations à leur sujet :
q12 = new Rationnel(1,2);
q34 = new Rationnel(3,4);
qs = q12.somme(q34);
On "envoie le message
somme" à l'objet q12.

Un exemple plus conséquent

Conception d'un
d'un s ite WEB
223
u L'objet de cet exemple est d'introduire une calculette

dans une page Web.
u Une calculette un peu simplifiée, utilisant une
notation polonaise post-fixée, dont l'allure est la
suivante :
Description de son
Conception d'un
d'un s ite WEB
comportement
224
u C'est une machine à états:finis qui permet de le

décrire le plus facilement
init
Chiffre / opérande_initial
Clear / raz
acquisition Chiffre / opérande_courant
Chiffre / opérande_initial Opération / calcul_initial
Clear / raz calcul Opération / calcul_courant

L'automate
Conception d'un
d'un s ite WEB
225
u L'automate qui décrit la machine à états finis

comporte :
l 3 états : "init", "acquisition" et "calcul"
l 3 événements : "Clear", "Chiffre" et "Opération"
l 5 actions : "raz", "opérande_initial",
"opérande_courant",
"calcul_initial", "calcul_courant"
u L'interface utilisateur est construite autour d'un
formulaire nommé "calculette" qui comporte :
l des boutons pour engendrer les événements,
l une zone de texte nommée "n" pour réaliser les affichages de
l'opérande (en mode "acquisition") et du résultat (en mode
"calcul").
Le formulaire "calculette"
Conception d'un
d'un s ite WEB
226
<FORM
<FORM NAME="calculette">
NAME="calculette">
<TABLE BORDER="5">
<TABLE BORDER="5">
<<TTR
R>> <<TTDDCCOOLLSSP
PAAN N==""44"" R
ROOW
WS SPPA ANN==""11"">>
<INPUT
<INPUT TYPE="Text"
TYPE="Text" NAME="n"
NAME="n" VALUE="0"></TD></TR>
VALUE="0"></TD></TR>
<TR>
<T R>
<TR>
<T R> <TD>
<T D><I
<TD>
<T <INP
D><I NPUT
<INP UT
UT TYPE
NPUT TY PE="
TYPE
TY PE="="Bu
Butt
="Bu tton
Butt on"
ttonon""" …
…o onC
onCli
onC
nCli lick
lick ck="="tr
ck="
="trtranansi
tran
ansi sitition
siti on('
tion
on(' ('ch
chif
('chiffr
chiffre'
iffre','
fre','1'
e','1')"
,'1')"><
1')"></T
)"></TD>
></TD>
/TD>
D>
<TD><INPUT
<TD><INPUT TYPE="Button"
TYPE="Button" … … onClick="transition('chiffre','2')"></TD>
onClick="transition('chiffre','2')"></TD>
<TD><INPUT
<TD><INPUT
TYPE="Button" … …
onClick="transition('operation','add')"></TD>
onClick="transition('operation','add')"></TD>
</TR>
</TR>
<TR>...</TR>
<TR>...</TR>
<TR>...</TR>
<TR>...</TR>
<<TTR
R>> <<TTDD>
D><
><<IIN
NPPUT
UTT TTYP
YYP
YPPEE==""BBu
Bu
utttttoon
n"""……oononC
nC Clliliicckk="
=="
=""rraazz()
(()
())"">><<//TTD
D>>
<TD><INPUT
<TD><INPUT
TYPE="Button" … …
onClick="transition('operation','neg')"></TD>
onClick="transition('operation','neg')"></TD>
<TD><INPUT
TYPE="Button" … … onClick="transition('operation','div')"></TD>
onClick="transition('operation','div')"></TD>
</TR>
</TR>
</TABLE></FORM>
</TABLE></FORM>

L'état de la calculette
Conception d'un
d'un s ite WEB
227
u L'état de la calculette peut être représenté par 4

variables :
et at valant "init", "a
"acquisition" ou
ou "calcul",
operan
ope rande
de
valant
val ant la
la valeur
valeur num
numériq
érique
ue de l'op
l'opéran
érande
de en cour
courss
d'utilisation,
resul
resulta
tatt vala
va lant
nt le
le résu
résult
ltat
at de
de l'ac
l'accu
cumu
mula
lati
tion
on de
de tous
tous les
les cal
calcu
culs
ls
effectués depuis le dernier "Clear".
document.calculette.n.value
- chaîne des chiffres de l'opérande en mode
"acquisition",
- chaîne des chiffres du résultat en mode
"calcul".
La fonction de transition
Conception d'un
d'un s ite WEB
228
function
function transition
transition (e,v)
(e,v) {{
if (etat == "init") {
if (etat == "init")ifif{ (e
(e ==
== "chiffre")
"chiffre") {operande_initial(v);etat
{operande_initial(v);etat == "acquisition"}
"acquisition"}
return;
return;
}}
ifif (etat
(etat ==
== "acquisition")
"acquisition") {{
ifif (e
(e ==
== "chiffre")
"chiffre") {operande_courant(v)}
{operande_courant(v)}
ifif (e
(e ==
== "operation")
"operation") {{
operande
operande == parseInt(document.calculette.n.value);
parseInt(document.calculette.n.value);
calcul_initial(v);
calcul_initial(v);
etat
etat == "calcul";}
"calcul";}
return;
return;
}}
ifif (etat
(etat ==
== "calcul")
"calcul") {{
ifif (e
(e ==
== "chiffre")
"chiffre") {operande_initial(v);etat
{operande_initial(v);etat == "acquisition"}
"acquisition"}
ifif (e
(e == "operation")
== "operation {calcul_courant(v)}
return;
return;
}}
}}

L'action "raz"
Conception d'un
d'un s ite WEB
229
function
function raz raz ()
() {{
rreessu l t
ultata t == 00;;
ooppeerraannddee == 00;;
eettaatt == ""iin
niitt"";;
document.calculette.n.value == "0"; "0";
}}
Les actions "operande_…"

Conception d'un
d'un s ite WEB
230
function
function operande_initial
operande_initial (v)
(v) {{
document.calculette.n.value == v;
v;
}}
function
function operande_courant
operande_courant (v)
(v) {{
if
if (document.calculette.n.value
(document.calculette.n.value ==
== "0")
"0") {{
document.calculette.n.value == v;
v;
}} else
else {{
document.calculette.n.value +=
+= v;
v;
}}
}}
Pour ne pas avoir de "0" à gauche

Les actions "calcul_…"

Conception d'un
d'un s ite WEB
231
function
function calcul
calcul (v) {
if
if (v == "add
(v == "a dd")
"add
"a ")
dd")
") {res
{r
{re esul
resu ulta
sulttat
ltatt +=
at +== op
oper
eran
oper
op eraande
andde;}
nde; ;}}
e;}
if (v ==
if (v == "s"sub
"s ub")
"sub ")
ub")
") {res
{r
{re esul
resu ulta
sulttat
ltatt -=
at -= opop
oper
opeera
eraa nd
nde
rand
nde;e ;}
e;}}
if
if (v(v ==
== "mul
"m
"mul
"m ul")
")
ul")
") {re
{r
{re esult
ressu
sulltat
att **=
ulta
tat *== op
oper
eran
oper
op eraande
andde;}
nde; ;}}
e;}
iiff ((v
v =
==
=
(v ==
(v "d
" d
== "dii v
v"
"
"div") ) { r e sul
ultta
{resultat /= t /=
/= o
op
operande;}}
/= opp er a nd e ;
document.calculette.n.value = resultat; = resultat;
}}
function
function calcul_initial
calcul_initial (v)
(v) {
if
if (v(v ==
== "ne
"n eeg")
"neg
"n g")
g"")) {res
{r
{re esul
resu ulta
sulttat
ltatt == --o
at op
oper
-opeera
peraand
nde
rand
nde;ee;}
;}}
calcul(v);
calcul(v);
}}
function
function calcul_courant
calcul_courant (v) (v) {{
if
if (v(v ==
== "ne
"n eeg")
"neg
"n g")
g"")) {res
{r
{re esul
resu ulta
sulttat
ltatt == --r
at resu
result
-res
esul ltat
ultaat;}
tat;;}}
t;}
calcul(v);
calcul(v);
}}
Les objets Javascript d'usage

Conception d'un
d'un s ite WEB
courant
232
u Les objets Javascript une hiérarchie

documentée dans tousconstituent
les bons outils de
développement.
u La référence Javascript peut être consultée à
home.netscape.com/eng/mozilla/3.0/handbook/javascript
u Attention, Javascript est en pleine évolution, ce site
est à consulter fréquemment.

En guise de conclusion
Conception d'un
d'un s ite WEB
233
u Le but de ce cours était :

l de vous donnez quelques éléments de base pour apprendre à
monter un site Web,
l de vous donnez des pistes pour suivre les évolutions qui se
dessinent dans le monde internet.
u Ce cours est donc largement incomplet.
u Vous avez cependant constaté qu'il était déjà possible
de construire des applications intéressantes avec peu
de moyens.

Langue

PDF Conception Dx27un Site Web DD

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

PDF Conception Dx27un Site Web DD

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

J ean DE MAR TIN I © 14.02.00

u Projet "World Wide Web" présenté en 1989, au CERN

J ean DE MAR TIN I © 14.02.00

u Structure de document adaptée à la consultation

J ean DE MAR TIN I © 14.02.00

u Un des premiers : Mos aic

J ean DE MAR TIN I © 14.02.00

WYSIWYG ? sûrement pas !

u Brisons immédiatement un mythe actuel.

J ean DE MAR TIN I © 14.02.00

Un type de document, une

J ean DE MAR TIN I © 14.02.00

J ean DE MAR TIN I © 14.02.00

Un journal, un site Web

u Un journal est conçu autour de sa une qui :

J ean DE MAR TIN I © 14.02.00

u Un hyperdocument est articulé autour de sa page

J ean DE MAR TIN I © 14.02.00

Edition sur le Web

u Le réseau peut simplement servir de support de

J ean DE MAR TIN I © 14.02.00

Localisation d'un document

J ean DE MAR TIN I © 14.02.00

Architecture de fichiers Web

usr bin ...

J ean DE MAR TIN I © 14.02.00

Protection des documents

u Le système de protection est double :

J ean DE MAR TIN I © 14.02.00

World Wide Web

J ean DE MAR TIN I © 14.02.00

Quelques protocoles utiles

J ean DE MAR TIN I © 14.02.00

u Tout au long de ce cours nous supposerons que nous

J ean DE MAR TIN I © 14.02.00

u Il existe de nombreux éditeurs HTML :

J ean DE MAR TIN I © 14.02.00

u Les images utilisées sous de type bitmap.

J ean DE MAR TIN I © 14.02.00

u La présentation d'une page Web dépendant du

J ean DE MAR TIN I © 14.02.00

Outils de transfert de fichiers

u Le service est construit sous la forme d'une maquette

J ean DE MAR TIN I © 14.02.00

u Certains paramétrages et même certains

J ean DE MAR TIN I © 14.02.00

u Ces quelques URL http://... vous donneront accès à

J ean DE MAR TIN I © 14.02.00

Structure d'un document

u Un document HTML comprend toujours 2 éléments :

J ean DE MAR TIN I © 14.02.00

u Une en tête comprend deux parties :

J ean DE MAR TIN I © 14.02.00

Ma première page HTML

définition du caractère "è"

J ean DE MAR TIN I © 14.02.00

u Tout d'abord, il faut taper le texte précédent en

J ean DE MAR TIN I © 14.02.00

J ean DE MAR TIN I © 14.02.00

u Il est souvent utile d'inclure des commentaires dans

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">