4 SI Technologie

Rpublique Tunisinne
Ministre de lEducation et de la Formation
Technologies de lInformation et de la
Communication
me anne de lenseignement secondaire
Sciences de lInformatique
Les auteurs
Habib SME
Lotfi EL AYEB
Matre Technologue
(Enseignant Universitaire)
Inspecteur des coles

prparatoires et des lyces
Nabil JAAFAR
Ali Essghaier DELHOUMI
Technologue
Professeur Principal
Les valuateurs
Mohamed Salem SOUDANE
Kamel BEN RHOUMA
Inspecteur des coles

prparatoires et des lyces
Matre Assistant
Centre National Pdagogique
Tous droits rservs au Centre National Pdagogique
Prface
Le prsent manuel est destin aux lves de la quatrime anne de l'enseignement secondaire
de la section Sciences de l'Informatique . Il s'intitule Technologies de l'Information et de la
Communication (TIC).
L'objectif est de prsenter un support d'apprentissage didactique et facile utiliser afin d'aider
les lves aborder sans difficults le programme officiel de la matire TIC.
Pour atteindre cet objectif, nous avons procd un apprentissage progressif et constructif qui
se base sur la ralisation d'activits permettant une comprhension par l'exemple des concepts
proposs.
Le manuel est tay de nombreux exemples, et exercices construits de manire ce que
l'lve acquire le raisonnement ncessaire pour la construction de sites Web et l'utilisation des
techniques modernes de collaboration et de communication.
Structur en trois chapitres, le manuel mne l'lve, futur informaticien, progressivement dans
l'univers de conception et de dveloppement Web.
Le premier chapitre outils de collaboration , prsente des techniques et des outils multimdia
permettant d'changer des informations et de partager des connaissances. Ceci est ralis travers
des applications en rseau local ou travers l'utilisation des outils de collaborations, forum et
visio-confrence sur Internet.
Le deuxime chapitre Production lectronique avance est compos de trois parties. La
premire partie a pour objectif d'initier les lves aux techniques d'animations rendant les
pages Web animes et attrayantes. La deuxime partie traite l'apprentissage des langages de
cration des pages Web statiques savoir les langages HTML et JavaScript. Dans cette partie, nous
avons expos les concepts fondamentaux qui doivent tre prsents l'esprit de tout dveloppeur
Web. Dans la troisime partie nous avons abord la cration de pages Web dynamiques
travers le trio Php, Mysql et Apache.
Le troisime chapitre production lectronique , prsente les tapes d'hbergement et de
rfrencement des sites Web. Nous avons abord quelques techniques permettant de scuriser
des pages Web ou tout un site, et ce en limitant l'accs des pages Web et des rpertoires
du site.
A la fin de ce manuel, figurent des annexes qui apportent un complment d'informations
ncessaires pour mieux apprhender les concepts abords dans les diffrents chapitres.
Nous restons la disposition de tous les utilisateurs voulant nous faire parvenir des remarques
et suggestions.
Les auteurs
Habib SMEI
Lotfi ELAYEB
Nabil JAAFAR
Ali Essghaier DELHOUMI
Habib@habibsmei.com
lotfi.elayeb@gmail.com
contact@nabiljaafar.com
delhoumi@gmail.com
Chapitre I
outils de
collaboration
146
Chapitre III
Publication
lectronique
Multimdia
Site Web Statistique
Sommaire
Chapitre II
Production lectronique
avance
19
Partie A
- Animations
20
Partie B
- Pages Web Statiques
50
Partie C
- Pages Web dynamiques
117
157
Annexes
Chapitre I
TIC
Outils de collaboration
Objectif :
Exploiter des outils de collaboration
Plan du chapitre :
I.
Prsentation
II. Applications dans un rseau local
III. Forums
IV. Visio - Confrence
Exercices
Lecture
I.
Prsentation :
En troisime anne de lenseignement secondaire, vous avez surtout utilis le service Web
et exploit plusieurs techniques de recherche de linformation. Bien que ce service offre un
moyen pour amliorer les connaissances et disposer de ressources considrables dinformations, vous avez besoin dchanger et de partager ce que vous connaissez et ce que vous intresse en utilisant diffrents outils multimdia performants pour satisfaire vos besoins. Il
nest pas plus agrable et plus motivant que de pouvoir communiquer et de collaborer avec
dautres lves, de son tablissement, dun autre tablissement ou mme dun tablissement
dun autre pays en changeant des images, des sons ou des squences vido, cela devient
plus impressionnant lorsquon peut se voir directement grce des moyens audio-visuels
simples disponibles dans vos laboratoires dinformatique.
Dans ce chapitre, nous allons aborder une autre dimension de lutilisation des TIC
travers des applications dans un rseau local ou travers lutilisation des outils de
collaborations, forums et visio-confrences par le biais dInternet.
II.
Applications dans un rseau local :
Pour amliorer leurs pratiques pdagogiques, les enseignants font appel plusieurs logiciels de
gestion de travail en rseau, permettant dassurer un cours interactif. En plus de la fonctionnalit dapprentissage, ces logiciels permettent de :
- superviser la classe et suivre les travaux des lves,
- contrler laccs certains sites ou certaines applications et donnes,
- distribuer et rcuprer des documents,
- crer et raliser des valuations.
Ces fonctionnalits sont permises celui qui utilise le poste configur en mode administrateur,
qui est gnralement lenseignant.
Dans la suite, nous allons nous intresser lutilisation de tels logiciels pour consolider le
travail collaboratif en classe, en exploitant les logiciels disponibles dans le laboratoire
dinformatique.
Activit 1 :
On se propose de crer des petites prsentations sur un thme donn, en classe ou
la maison et les prsenter aux autres lves.
6
TIC
Droulement :
Le groupe sera rparti en sous-groupes de trois 5 lves.
Chaque groupe dlves sera charg de prparer une prsentation de quelques pages
sur un thme propos par eux-mmes ou par leur enseignant.
En suite, un membre de chaque groupe prsentera, partir de son poste, le travail de
son groupe au reste des lves.
Activit 2 :
Cette activit consiste faire des recherches sur Internet pour un thme donn, puis un
lve prsentera aux autres la dmarche utilise pour trouver les informations
demandes par lenseignant.
Droulement :
Les lves font la recherche dune faon individuelle.
Le premier lve qui trouve linformation, fait signe son enseignant qui bloquera les
postes des autres lves.
En suite, cet lve prsentera, partir de son poste, la dmarche qui lui a permis de
retrouver linformation recherche.
N. B :
Cette activit peut tre rpter autant de fois que cela est possible selon la vitesse de
recherche et lefficacit des dmarches utilises par les lves et suivant la nature
dinformations demandes (textes, images et vido).
III.
Les forums :
Activit 3 :
1 - Quels sont les services de communications offerts par Internet ?
2 - Quels services assurent une communication en mode asynchrone (en diffr) ?
1- Quest ce quun forum ?
Les forums ou groupes de discussions (Newsgroups en anglais) dsignent des lieux
lectroniques dchange de messages et de discussions, organiss gnralement par thmes.
Ils se distinguent des autres systmes de discussion par le fait que les discussions sont
asynchrones, les messages lectroniques sont archivs sur des sites Internet.
Figure . I-1 : exemple de thmes proposs par un forum

2- Principes dun forum :
L'administrateur d'un forum, appel modrateur, propose un thme de discussion
et d'enrichissement de connaissances.
Les internautes intresss par le thme en cours de discussion, peuvent envoyer
des informations, poser des questions ou rpondre aux ceux proposes.
Pour certains forums, un internaute ne peut participer qu'aprs avoir fait une
inscription (figure I-2) et aprs tre accept par le modrateur du forum.
Figure I-2 : exemple d'enregistrement un forum

Faute d'irresponsabilit et de manque de srieux, un message peut tre supprim par
le modrateur ou ne pas tre dit et le participant peut tre exclu du forum.
8
TIC
Figure I-3 : exemple de rgles respecter
Infos
Remarque :
Le service associ aux forums est le USENET, le protocole utilis en
plus du TCP/IP est le NNTP.

Les forums peuvent permettre une organisation de diffuser assez
largement dinformations dans un domaine o elle a autorit.
Application 1
1 - Crez un forum en utilisant un site permettant de crer des forums gratuitement.
2 - Donnez des permissions de participation quelques amis de votre classe.
Figure I-4 : exemple de sites permettant la cration gratuite d'un forum

9
Application 2
Recherchez des forums vocation ducative sur Internet et y participez.
Figure I-5 : exemple de forums
IV. La visio-confrence :
Activit 4 :
Quels sont les outils permettant de faire des conversations synchrones (en temps rel) ?
Droulement :
Il existe divers outils de communication synchrone, on peut citer par exemple la tlphonie
sur Internet, le chat, la visioconfrence.
1) Qu'est ce que la visioconfrence ?
La visioconfrence est une technologie s'articulant sur l'audiovisuel et la tlcommunication.
Elle permet des personnes loignes de communiquer, dchanger des images et du son, de se
voir entre elles et de s'inter-ragir, en temps rel.
2) Avantages de la visioconfrence
La visioconfrence offre plusieurs avantages (pour les membres d'une socit ou d'une
association), parmi les quels on peut citer :
10
TIC
- L'conomie de temps
- L'conomie d'argent
- L'largissement du nombre de participants
- L'accroissement des frquences de runions
- Le travail sur des documents de manire commune.
Infos
Dans la littrature, on trouve parfois le terme vidoconfrence au
lieu du terme visioconfrence. Il s'agit en fait de la traduction

franaise de l'anglais "videoconferencing", mais il s'agit en fait de la
mme notion.
Si les dispositifs sont relis des systmes informatiques, on peut
aussi accompagner la confrence de squences de travail
coopratif (messagerie lectronique synchrone, partage
d'applications informatiques, transfert de fichiers synchrones, etc.)
3) Modes d'utilisation de la visioconfrence

Il y a trois principaux modes d'utilisation de la visioconfrence :
La visioconfrence en point point qui met en relation seulement deux sites. Sur
chaque site ont peut trouver une seule personne ou un groupe de personnes.
La visioconfrence en multipoints qui permet d'interconnecter au moins 3 sites. Sur
chaque site on peut trouver une ou plusieurs personnes. Ce mode ncessite l'utilisation
d'un pont qui gre le multipoints.
La visioconfrence en mode broadcast (mode diffus), qui fait rfrence une
communication point multipoint o un site, source de l'information, diffuse un
message vers les autres sites, qui peuvent ventuellement interagir et poser des
questions.
Info
Les visioconfrences en mode broadcast sont utilises dans
plusieurs domaines tels que : le tlenseignement, la tlmdecine,

pour les stages d'entreprise ou lorsqu'un responsable dsire s'adresser
au personnel d'une succursale de son entreprise.
4) Types de la visioconfrence
a) La visioconfrence par Rseaux Numriques Intgration de services (RNIS) :
Ce type est utilis depuis l'apparition de la visioconfrence dans les annes 80, les
donnes sont numrises et compresses sur chaque site, transmises puis dcodes et
restitues.
b) La visioconfrence par Internet
Au milieu des annes 1990, le dveloppement de la micro-informatique a permis de
"populariser"' les visioconfrences entre deux micro-ordinateurs ou plus (connects)
par Internet.
11
Ce type de visioconfrence est trs conomique mais de moindre qualit. Beaucoup

d'applications sont bases sur la visioconfrence par Internet, par exemple : la
tl- Ingnierie, l'apprentissage distance, la diffusion de sminaires et confrences, la
confrence personnelle, les runions de travail, etc.
c) Les visioconfrences hybrides
Un micro-ordinateur muni d'une carte approprie peut assurer l'interaction entre un ou
plusieurs sites de visioconfrence utilisant les rseaux numriques (RNIS par exemple) et
d'autres micro-ordinateurs quips de microphones et de camras (ou Webcam) connects au
premier ordinateur par rseau IP (Intranet ou Internet).
d) La visioconfrence par ATM
L'ATM (Asynchronous Transfer Mode) est une technologie de transfert de donnes trs
large bande intgrant textes, images, son et vido.
e) La visioconfrence par satellite
La visioconfrence par satellite est une visioconfrence radiodiffuse par satellite. C'est en
fait la tlvision interactive entre personnes distantes ou groupes de personnes. Vu son
important dbit, elle est d'excellente qualit, mais trs coteuse.
Figure I-6 : Architecture gnrale d'une visioconfrence hybride

5) Outils matriels et logiciels
Outils matriels :
a) Cas d'une connexion utilisant les rseaux RNIS :
Dans ce cas on utilise des outils et des lieux spciaux, telque les "meubles mobiles de
visioconfrence" (figure I-8) ou les "studios de visio confrence" (figure I-9).
12
TIC
A chaque extrmit de la liaison on peut trouver :
Un appareil de visioconfrence.
Un tlviseur ou un vido projecteur.
Un ou plusieurs micro-ordinateurs quips de cartes rseau.
Un visualiseur (camra pour documents).
Une ou plusieurs camras fixes ou montes sur tourelles tlcommandes ou non.
Un ou plusieurs microphones.
Un CODEC (codeur/dcodeur).
Un ou plusieurs moniteurs vido pour reproduire les images et les sons reus.
Infos
Figure I-7 : exemple d'appareil de visioconfrence
Un CODEC est un dispositif assurant :

Les fonctions de conversion des signaux analogiques dlivrs par les
priphriques (micro et camra) utiliss par les rseaux et
vice-versa.
La compression et la dcompression des informations pour tre
transportes sur une ligne bas dbit.
Figure I-8 : exemples de meubles de visioconfrence

13
Figure I-9 : exemples de salle ou studio de visioconfrence

b) Cas d'une connexion par Internet:
Dans ce cas, chaque extrmit, on trouve :
une connexion Internet ;
une camra numrique ou une WebCam mettre sur l'cran de chaque participant actif ;
un microphone.
Figure I-10 : exemple de visioconfrence utilisant Internet et une WebCam
Outils logiciels :
Outre le matriel ncessaire, il faut disposer d'un logiciel grant la visioconfrence. Le
tableau ci-dessous prsente quelques logiciels et les plates-formes sur lesquelles sont
utiliss :
Produit
Plate - forme
Licence
Windows /MacOs
Gratuite
Linux
Gratuite
FreeVue
Windows
Gratuite
Network Vido
Windows
Gratuite
PictureWindow
Windows
Payante
ShowMe
Windows
Payante
CU-SeeMe
IVS
14
TIC
VidoVu
Windows
Payante
NetMeeting
Windows
Payante
MacOS/ Linux
Gratuite
Windows/MacOS/ Linux
* Rat ne fonctionne sous Linux
qu'avec une VRAIE
SoundBlaster
Gratuite
Gnomemeeting
Vic/Rat/Sdr
Application 2
En utilisant deux Webcams et le rseau Internet, faites la simulation d'une
visioconfrence entre deux groupes d'lves dans le mme laboratoire, ou entre deux
laboratoires de l'tablissement si c'est possible.
Retenons :
Le forum est un endroit virtuel d'change de messages et de discussion en
asynchrone.
Les forums sont organiss par thmes
L'administrateur d'un forum est appel modrateur
La visioconfrence, est une technologie s'articulant sur l'audiovisuel et la
tlcommunication
La visioconfrence permet l'interaction en temps rel entre les participants
Il y a trois principaux modes d'utilisation de la visioconfrence :
La visioconfrence en point point
La visioconfrence en multipoints
La visioconfrence en mode broadcast (mode diffus)
Il y a cinq types de visioconfrence :

la visioconfrence par Rseaux Numriques Intgration de services (RNIS)
la visioconfrence par Internet
la visioconfrence par ATM
la visioconfrence par satellite
la visioconfrences hybrides
Selon le type de la visioconfrence, de outils matriels et logiciels spcialiss sont

ncessaires.
15
Exercices
Exercice 1
Lors de l'utilisation d'un logiciel de gestion de rseau, un lve travaillant sur un poste
configur comme client, peut-il :
- bloquer les claviers des autres lves ?
- exposer son travail aux autres lves ?
Exercice 2
Un internaute participant un forum peut-il :
- envoyer un document multimdia ? Justifiez votre rponse.
- demandez des informations sur n'importe quel thme qui le proccupe ?
Justifiez votre rponse.
Exercice 3
Un internaute peut-il participer n'importe quel forum ? Justifiez votre rponse.
Exercice 4
Comparez les deux services d'Internet, le Chatting et le forum.
Exercice 5
Rpondez par (V) si la proposition est correcte et par (F) dans le cas contraire.
Le protocole utilis dans le service forum est :
FTP
HTTP
NNTP
Exercice 6
Quel est le nombre minimum de sites participants, pour pouvoir parler d'une
visioconfrence en mode multipoints ? Justifiez votre rponse.
Exercice 7
Les participants une visioconfrence, ont-ils la possibilit de s'changer des messages ?
Justifiez votre rponse.
Exercice 8
Dans une visioconfrence en mode broadcast, les participants qui suivent la diffusion,
peuvent-ils intervenir ou poser des questions ? Justifiez votre rponse.
Exercice 9
Dans le cas de l'utilisation du rseau Internet et des Webcams, quel est le composant qui
remplace le CODEC ? Justifiez votre rponse.
16
TIC
Lecture
H.323 menac ?
Les volutions actuelles
Egalement utilis pour la voix sur IP, H.323 est aujourd'hui considr comme nuisible
l'interoprabilit et l'interactivit des applications tlphoniques. Son architecture
protocolaire pnalise le dlai de connexion par un enchevtrement complexe de
fonctions de signalisation et de contrle pour les applications en temps rel faible latence (cart de temps entre les paquets). Les extensions propritaires dvelopps par les
constructeurs pour dmarquer leur matriel ne font qu'exacerber les lourdeurs originales de
cet ensemble de recommandations. L'IETF propose une alternative H.323 : le protocole
Session initiation protocol SIP (RFC 2543, mars 2000), dj largement adopt par les
constructeurs prsents au salon ComNet (fin janvier 2000, Washington). Bien sr, cette
remise en cause ne concerne pour l'instant que les trafics voix sur IP ; mais l'engouement
actuel du march pour les rapprochements entretlvision et informatique risque de
prcipiter les recherches, d'autant plus que la compatibilit des matriels est loin d'tre
finalise.
Les divergences des constructeurs
Les protocoles voluent rapidement et donnent lieu plusieurs versions. H.323, qui impose un noyau de procdures obligatoires entour de protocoles optionnels, gnre, en outre,
des interprtations multiples. La compatibilit entre des matriels issus de
constructeurs diffrents et bass sur des versions ou des interprtations diffrentes n'est
absolument pas garantie. De plus, la qualit de service exige que chaque routeur soit
compatible RSVP, ce qui implique d'une part que les oprateurs adaptent leur matriel et
d'autre part qu'ils passent des accords entre eux pour garantir un dbit un paquet qui traverse leur rseau. Il s'agit donc d'oprations coteuses et d'autant plus complexes que les
intrts conomiques des oprateurs psent davantage qu'un certain idal de la
communication des rseaux.
La version 6 de IP
IPv6 permet de traiter de faon adapte les flux temps rel (indices de flux et de priorit)
et pour slectionner automatiquement un fournisseur de services (adresse anycast). Il
apporte des solutions pour la scurit et la mobilit des terminaux et des htes, et
facilite la configuration automatique. Il facilite en effet la dfinition d'adresses multipoints
dj possible avec la version 4. Ces adresses regrouperaient plusieurs machines,
chacune pouvant par ailleurs appartenir plusieurs groupes multipoints. Un autre type
d'adresse doit voir le jour : baptises "anycast", elles sont attribues plusieurs noeuds et
partages par plusieurs interfaces. Leur intrt est d'obliger chaque noeud choisir le
noeud suivant parmi une liste rduite. Une seule adresse anycast sera attribue tous les
routeurs d'un mme fournisseur de services. Cette politique du choix de la route devrait
alors autoriser le choix de son fournisseur d'accs en fonction de critres tels que la bande
passante garantie, la qualit de service, le prix, etc.
17
IPv6 introduit galement dans son en-tte 2 champs directement destins au traitement des
applications multimdias temps rel : l'identificateur de flux (pour reprer les paquets d'un
mme flux d'informations) et le niveau de priorit (15 niveaux cods sur 4 bits, avec 8
niveaux rservs aux paquets de contrle de flux pour renseigner sur l'tat de
congestion du rseau+7 niveaux affects aux flux multimdias qui doivent respecter des
contraintes de dbit constant).
Le dploiement de l'IPv6 devrait donc permettre la gnralisation de l'adressage et du
routage multipoints. Mais les adaptations qu'il exige en matire de rseaux et de
matriels n'ont pas t considres comme rentables jusqu' aujourd'hui. Les
constructeurs commencent juste s'y intresser.
Pour des informations complmentaires, les sites suivants peuvent tre consults :
http://www.urec.cnrs.fr/ipv6/, http://peirce.logique.jussieu.fr/G6/
18
Chapitre II
TIC
Production lectronique avance
Objectifs :
- Raliser des animations
- Crer des sites Web statiques et dynamiques
- changer des donnes distance travers une page Web
Plan du chapitre :
Partie A : Animations
Partie B : Pages Web Statiques
Partie C : Pages Web dynamiques
Annexes
Partie A
Animations
Objectifs :
- Crer des animations
- Insrer des objets dans une animation
- Exporter des animations
Plan :
I - Introduction
II - Prsentation de l'interface du logiciel Flash
III - Les lments d'affichage
IV - Les lments d'une animation Flash
V - Les formes
VI - Les groupes
VII - Les textes
VIII - L'importation des mdias
IX - Les symboles graphiques
X- Les animations
XI - Les boutons
XII - Le langage Action Script
XIII - La publication
Exercices
Lecture
TIC
Animations
I.
Introduction :
On trouve souvent dans les pages web des lments anims qui ont subi un
mouvement et/ou une dformation. Ces lments sont gnralement d'origines
graphiques vectorielles.
Un logiciel crateur d'animations pour le Web est une application qui permet de crer
une animation pour qu'elle soit intgre dans une page Web. Les animations cres par ces
logiciels sont base d'images vectorielles. Un logiciel d'animations permet aussi de crer
une animation interactive en utilisant des boutons qui peuvent tre associs des actions et
des vnements.
Il existe plusieurs logiciels crateurs d'animations orients Web comme Macromedia Flash,
SWiSHmax, Flax, etc. Dans ce cours on s'intressera au Macromedia Flash version 8.
II. Prsentation de l'interface de Flash :

Activit 1 :
Lancez le logiciel Flash puis dcrivez la fentre de son interface.
Figure II-1 : Prsentation de l'interface de Macromedia Flash

21
LEGENDE
1
La barre des menus
La boite outils
La barre d'outils principale
La zone du travail
Les panneaux affichs
Le calque actif
Le scnario
10
La tte de lecture
Le document
11
La barre d'dition
L'inspecteur des proprits
12
La ligne du temps
Infos
1 - La scne
La scne est la zone rectangulaire dans laquelle vous placez les objets animer
(images vectorielles, zones de textes, boutons, graphiques bitmap imports, clips vido, etc.)
lors de la cration de documents Flash.
2 - Le scnario
Le scnario organise et contrle le contenu d'un document au fil du temps par des
calques. Tout comme les films, les documents Flash divisent les priodes de temps en
images.
Pour masquer le scnario, il suffit de cliquer dessus.

En plus des calques, le scnario affiche la ligne de temps, la cadence,
l'indice de l'image courante, etc.

Il est possible de dvelopper ou de rduire les panneaux affichs avec
les flches noirs gauche du titre de chaque panneau.
III. Les lments d'affichage :

Le document relatif une squence peut comporter des objets "Textes, Formes,
Symboles, etc.". Pour faciliter la mise en place d'un objet, il est utile dafficher : La rgle, les
guides, la grille, de mme, il est possible de grer ces objets en exportant les panneaux.
22
TIC

1 - La rgle
Pour afficher ou masquer les rgles :
Activez le menu Affichage
Choisissez la commande rgles
2 - La grille
Pour paramtrer la grille :
Activez le menu Affichage
Choisissez le groupe de commandes Grille
Choisissez la commande Modifier la grille
Choisissez les paramtres ncessaires et confirmez.
Figure II-2 :La dfinition des proprits de la grille

3 - Les panneaux
Flash propose plusieurs possibilits pour personnaliser l'espace de travail en
fonction des besoins. Les panneaux et l'inspecteur des proprits permettent d'afficher,
d'organiser et de modifier les mdias et d'autres lments actifs ainsi que leurs
attributs.
L'inspecteur des proprits se modifie en fonction de l'outil ou de l'lment actif avec
lequel on travaille et il permet d'accder rapidement aux fonctions frquemment
utilises.
Pour ouvrir un panneau :
Activez le menu fentre
Choisissez le nom du panneau souhait
Pour fermer un panneau :
Affichez le menu contextuel de la barre de titre du panneau.
Choisissez la commande Fermer le groupe de panneau.
Dans le tableau ci-dessous vous trouvez les rles des panneaux frquemment
utiliss.
23
Panneau
Rle
Afficher et modifier les dimensions et les coordonnes de l'lment
slectionn
Transformer
Modifier les dimensions, pivoter et incliner l'lment slectionn
Mlangeur
Afficher et modifier les couleurs, le type de dgrad, et le paramtre Alpha de

l'lment slectionn.
Nuancier
Afficher la palette des couleurs afin d'en choisir une couleur pour
l'appliquer l'lment slectionn.
Aligner
Afficher et changer l'alignement de l'lment actif.
Proprits
Afficher et modifier les proprits de l'lment slectionn ou actif.
Bibliothque
Afficher et accder aux lments dj mis dans la bibliothque (Symbole, Son,

Image bmp)
Actions
Associer une action un lment de l'animation
Squences
Grer les squences de votre animation.
Historique
Afficher les tches dj effectues.
Infos
Info
Il est possible de grouper plusieurs panneaux ensemble.

Les deux panneaux historique et squence sont accessibles par la
commande autres panneaux du menu Fentre. Le panneau Bibliothque

commune comporte des objets prts l'usage "Boutons, clips, etc."
IV. Les lments d'une animation flash:

Activit 2 :
A partir de l'imprime cran suivant, dterminez les lments qui forment l'animation active :
24
TIC
Figure II-3 : Les lments d'une animation
Solution

L'animation courante est "activit 2"

La squence affiche est "Squence Roue"
Cette squence comporte les calques "Roue" "Ombre" et "Arrire Plan"
D'aprs le scnario, chacun des trois calques comporte 30 images et l'image
courante est celle n15 du calque "Arrire Plan"
25
Constatation :
Une animation flash doit comporter au moins une squence, de mme, une squence doit
comporter au moins un calque, qui lui doit comporter au moins une image et une image
doit comporter un contenu (forme, texte, symbole, son, image bmp).
1- Les proprits du document

Activit 3 :
1- Crez une nouvelle animation.
2 - Changez sa taille (550x400), son arrire plan (gris) et lui appliqu une vitesse de
12 ips (images par seconde).
Solution
Pour changer les paramtres du document :
Activez le menu Modification
Choisissez la commande Document
Saisissez les paramtres convenables
Comme le montre la figure suivante :
Figure II-4 : Les proprits d'un document
Constatations :
A l'aide de cette boite de dialogue il est possible de :
Changer l'unit de la rgle.
Modifier la vitesse ou la cadence qui s'exprime en images/seconde (ips).
Choisir une couleur d'arrire plan.
Choisir des dimensions personnalises.
Attribuer un titre au document.
etc.
26
TIC
2- Les squences
Activit 4 :
1- Crez un nouveau document flash.
2- Ajoutez deux squences votre animation courante.
3- Renommez les squences respectivement par "Un", "Deux" et "Trois"
4- Modifiez leur ordre "Trois", "Deux" et "Un".
5- Supprimez la squence "deux"
Solution
Pour ajouter une squence :
Activez le menu Insertion
Choisissez la commande Squence
Pour renommer, dplacer ou supprimer une squence :
Droulez le menu Fentre
Choisissez le groupe Autres panneaux
Slectionnez la commande Squence
Effectuez les oprations ncessaires
Figure II-5 : Le panneau Squence
Constatations :
Pour renommer une squence il suffit de cliquer 2 fois sur son nom dans le panneau
squence puis saisir le nouveau nom.
Pour dplacer une squence il suffit de maintenir la souris enfonce sur son icne tout
en la dplaant vers la bonne position.
Les trois boutons de la barre d'tat du panneau squence permettent respectivement de
dupliquer, ajouter et supprimer une squence.
Pour se dplacer d'une squence une autre, on peut utiliser le bouton "Modifie la
squence" qui existe dans la barre d'dition.
Figure II-6 : La liste des squences

27
3- Les calques
Activit 5 :
1- Dans la squence "Trois" cr dans l'activit 4, insrez deux calques.
2- Renommez les trois calques respectivement "Cun", "Cdeux" et "Ctrois"
3- Supprimez "Cun"
4- Verrouillez "Cdeux"
5- Masquez "Ctrois"
Solution
Figure II-7 : Les calques du scnario "Trois"
Constatations :
Infos
Pour insrer un calque :

Slectionnez le groupe Scnario
Choisissez la sous commande Calque
Pour changer les proprits d'un calque :
Choisissez la commande Proprits du Calque
Apportez les modifications ncessaires
Pour supprimer un calque :
Activez le calque supprimer
Cliquez sur l'icne corbeille qui existe dans le scnario.
On peut dplacer un calque l'aide d'un glissement par la souris.
Il est impossible de modifier le contenu d'un calque masqu ou
verrouill.
28
TIC
4- Les images
Activit 6 :
A partir du scnario suivant, dduisez les diffrents types d'images utilises.
Figure II-8 : Les diffrents types d'images
Solution
On distingue 5 types d'images
Les images cls : Une image-cl est indique par un point noir; exemple les
images n1, 2, 15, 29 et 30 du calque Roue.
Les images cls vides : Une image cl vide est indique par un point creux;
exemple l'image n1 du Calque 4
Les images vides : Une image vide est caractrise par une couleur blanche sans
aucun contenu ; Exemple les images du n2 au n30 du Calque 4.
Les images copies : toute image en gris est une copie de l'image prcdente;
exemple : les images du n2 au n 30 du calque Arrire Plan.
Les images calcules : Lors d'une interpolation, il est ncessaire de dfinir
uniquement les images cls qui reprsentent le dbut et la fin de l'interpolation ; les
autres images qui se trouvent au milieu sont calcules suite des commandes de
calculs mathmatiques ; exemple : les images du n2 au n14 du calque Ombre.
Infos
Les images de couleur (violet) du calque "Roue" ont subi une
interpolation de mouvement.
Les images de couleur (vert) du calque "Ombre "ont subi une
interpolation de forme.
5- Utilisation d'images dans le scnario

Une image-cl est une image dans laquelle se dfinit des changements de
proprits d'un objet, ou dans laquelle, vous incluez du code ActionScript afin de
contrler un aspect du document. Une image cl vide est une image vide qui est prte
recevoir un contenu.
29
Infos
Pour insrer une image :

Choisissez l'emplacement de l'insertion sur le scnario
Slectionner le groupe Scnario
Choisissez la commande Image, image cl ou image Cl vide
Pour supprimer une image (Cl vide)
Choisissez dans le scnario l'image supprimer
Activez le menu Edition
Choisissez la commande Supprimer les images
Pour supprimer une image cl
Choisissez dans le scnario l'image supprimer
Choisissez la commande Supprimer l'image cl
La commande Effacer une image permet de remplacer l'image
courante par une image vide alors que la commande supprimer une
image permet de l'enlever compltement de la ligne de temps.
V. Les Formes :
Activit 7 :
1- Dessinez un cercle de remplissage bleu et de contour noir.
2- Modifiez sa couleur de remplissage en rouge, et sa couleur de contour en bleu.
3- Modifiez sa taille L=100 et H=100 et ses coordonnes X= 50 et Y= 50.
4- Slectionnez son contour et le dplacez aux coordonnes X=250 et Y=50 puis le
remplir par une couleur verte.
5- Pour le disque vert, appliquez une transformation de 150% aux dimensions et une
inclinaison de 60par rapport la verticale.
Solution
Figure II-9 : La manipulation des formes

30
TIC
Constatations :
Il est possible de changer les couleurs de la forme (contour et/ou remplissage) soit
l'aide de la boite outils, soit avec le panneau des proprits, soit avec le
panneau Couleur.
Il est possible de modifier les coordonnes et les dimensions d'une forme soit avec le
panneau des proprits, soit avec le panneau Info.
Toute forme est caractrise par un contour et un remplissage qui peuvent tre
spars l'un de l'autre.
La transformation d'une forme est possible soit avec le panneau Transformer, soit avec
la boite outils ou avec la commande Transformer du menu modification.
Pour slectionner un remplissage, utilisez l'outil slection puis cliquer sur le
remplissage; de mme pour le contour; mais pour slectionner les deux
effectuez un double clic sur le remplissage.
Lorsque deux formes se superposent; la forme suprieure mange la partie commune
avec la forme infrieure.
VI. Les groupes :

Activit 8 :
1- Crez trois formes, un rectangle, une ellipse et un triangle
2 - Transformez chaque forme (Contour et remplissage) en un groupe.
3 - Superposez les trois groupes en mettant le rectangle au premier plan, le triangle au
deuxime plan puis l'ellipse au dernier plan.
Solution
Pour grouper des formes :
Slectionnez les formes grouper
Choisissez la commande Grouper
Figure II-10 : La cration des groupes
Constatations :
Pour viter le problme de superposition des formes, il est possible de grouper le
contour et le remplissage des formes.
31
Vous pouvez associer un groupe avec d'autres groupes ou d'autres formes.

Pour changer l'ordre des groupes superposs vous pouvez utiliser la commande
Rorganisation du menu Modification
Vous pouvez verrouiller un groupe contre les modifications en utilisant la
commande Verrouiller du menu Modification
Vous pouvez dissocier un groupe en sous groupes ou en formes, en utilisant la
commande Dissocier du menu modification
VII. Les textes :

Activit 9 :
1 - En utilisant l'outil texte, saisissez le mot "Flash"
2 - Appliquez les proprits suivantes :
Police
Couleur
Style
Taille
Espacement
Monotype Corsiva
Bleu
Gras
96
10
3 - Sparez ce texte.
4 - Dispersez les lettres de ce texte.
5 - Convertissez ces lettres en des formes.
Solution
Etant donn qu'un texte est considr comme un groupe, pour sparer les lettres d'un texte :
Slectionnez le texte sparer
Choisissez la commande Sparer
N.B : Pour convertir les lettres en formes, il suffit de leurs appliquer une deuxime
sparation comme lindique la figure suivante:
Figure : II-11 La manipulation des textes

32
TIC
VIII. Limportation des mdias :

Avec Flash vous pouvez insrer des mdias externes une animation, ces mdias
peuvent tre des fichiers sonores, des images bitmap, des squences vido, etc.
Activit 10 :
Crez une animation comportant une squence de deux calques forms chacun de dix
images.
- Le 1er calque comporte une image bitmap qui couvrira le document de la scne.
- Le 2me calque comporte un fichier sonore.
Solution
Pour importer une image, un fichier sonore ou un autre mdia :
Choisissez l'emplacement de l'insertion du media (Calque et image)
Activez le menu Fichier
Choisissez le groupe de commandes Importer
Choisissez la commande Importer dans la bibliothque
Slectionnez le media importer
A partir de la bibliothque, glissez le mdia vers la scne.
Figure II-12 : L'importation d'une image bitmap et d'un fichier sonore
Constatations :
Avec l'inspecteur des proprits vous pouvez dfinir les paramtres de lecture du
fichier audio insr dans l'animation.
L'importation d'un mdia consiste l'envoyer la bibliothque, pour en exploiter des
copies ultrieurement en tant qu'occurrences sur la scne.
33
Figure II-13 : La bibliothque de l'animation, comportant les deux mdias imports
IX. Les symboles graphiques :

Les objets que vous pouvez insrer dans une animation Flash peuvent tre des
formes, des groupes, des textes, des mdias; mais il arrive souvent qu'une animation
utilise le mme objet plusieurs fois, dans ce cas, vous pouvez l'envoyer la bibliothque
de l'animation comme tant un symbole (graphique, un bouton ou un clip) et lutiliser
ultrieurement une ou plusieurs copies de ce dernier en tant qu (occurrences).
Activit 11 :
Crez un symbole graphique nomm "case" reprsentant un carr noir sans remplissage.
Solution
Figure II-14 : La cration d'un symbole graphique

Pour crer un symbole graphique il faut :
Slectionnez la commande Nouveau symbole
Dans la boite de dialogue "Crer un symbole" choisissez le nom et le
comportement (graphique)
Dessinez le graphique
Constatations :
Une fois le symbole graphique dessin, il sera stock dans la bibliothque.
34
TIC
X. Les animations :
Avec Flash il est possible de crer deux types d'animations :
les animations image par image
les animations interpoles.
1- L'animation image par image

C'est le dfilement d'un ensemble d'images o chacune prsentant des lgres modifications
celles qui les prcdent.
Activit 12 :
On se propose de crer une animation qui illustre le remplissage d'un tableau T par N entiers
comme le montre la figure suivante :
Figure II-15 : Un aperu de l'animation solution
Constatations :
La rsolution de cette activit ncessite l'utilisation de quatre calques :
Le calque Arrire Plan comporte les informations inchangeables tout au long de
l'animation.
Le calque Tableau comporte les huit cases du tableau.
Le calque Compteur comporte les diffrentes valeurs du compteur.
Le calque Valeur comporte les diffrentes valeurs que doit contenir le tableau T.
Figure II-16 : Le Scnario de l'animation solution

35
Infos
Dans les trois calques Compteur, Valeur et Tableau on observe que dans chaque image
de la ligne de temps il y a une image cl (repre par une case comportant un point
noir), ce qui signifie que leur contenu est dfini image par image.
Les trois calques Compteur, Valeur et Tableau commencent chacun par une image
vide, dans le but d'afficher l'arrire plan avant de commencer la lecture du tableau.
Pour construire un tableau, il est ncessaire d'utiliser un symbole graphique
illustrant un carr et d'en exploiter 8 occurrences.
Pour maintenir l'affichage de l'image cl N1, du calque Arrire plan on doit
insrer une image la fin de l'animation (image 10, du mme calque).
Pour ralentir l'animation, vous pouvez diminuer la cadence (une image par seconde
(1 ips))
L'insertion d'une image cl est ncessaire lorsqu'on a besoin de garder
et/ou d'exploiter le contenu de l'image prcdente dans l'image

courante; dans le cas contraire l'insertion d'une image cl vide est
ncessaire.
2- L'animation interpole
Dans certains cas, l'animation image par image est trs lourde, et trs lente raliser, pour ces
raisons, on fait appel aux animations interpoles.
a- L'interpolation de forme
Activit 13 :
On se propose de crer une animation nomme interpolation de forme dans laquelle il y aura
la transformation d'un pentagone vers une toile de cinq cots et en respectant les tapes
suivantes :
1- Utilisez deux calques nomms "Morphing" et "Titre".
2- Dans le calque nomm "Titre", saisissez le texte "Interpolation de forme" qui doit
s'afficher jusqu' l'image 40.
3- Dans l'image n1 du calque nomm "Morphing", dessinez un pentagone Bleu sans
contour, de largeur = 100 et de hauteur = 100, de coordonnes X=0 et Y=0.
4- Dans l'image n40 du calque nomm "Morphing", dessinez une toile Rouge sans contour,
de 5 cots, de largeur = 200 et de hauteur = 200, de coordonnes X=300 et Y=150 et avec
une inclinaison de 60.
5- Dans l'image n1 du calque nomm "Morphing", activez l'inspecteur de
proprits et appliquez une interpolation de forme.
N.B : Pour dessiner un polygone ou une toile, on utilise l'inspecteur de proprits de
l'outil rectangle.
Solution
Pour raliser un Morphing, dessinez deux formes dans deux images de la ligne du temps puis
dans la premire image appliquez une interpolation de forme.
36
TIC
Figure II-17 : Le scnario d'une animation comportant une interpolation de forme
Constatations :
Infos
Les images d'interpolation de forme (Morphing) sont toujours colores en vert.

Lors d'une interpolation de forme les images intermdiaires seront calcules par le
logiciel et non dessines avec la boite outils
Pour tre interpole, une image doit tre insre comme image cl.
L'interpolation de forme ne s'applique pas aux groupes et aux
graphiques
b- L'interpolation de mouvement
Activit 14 :
On se propose de crer une animation nomme interpolation de Mouvement dans laquelle il y aura le dplacement d'un symbole d'une position une autre tout en
suivant les tapes suivantes :
1- Crez un graphique nomm "Etoile" qui comporte une toile de trois cots.
2- Dans un calque nomm "Titre", saisissez le titre "Interpolation de Mouvement" qui
doit s'afficher jusqu' l'image 40.
3- Dans l'image n1 du calque nomm "Mouvement", insrez, partir de la
bibliothque, une occurrence du graphique "Etoile" en lui attribuant une largeur de 50
et une hauteur de 50, et les coordonnes X=0 et Y=0.
4- Dans l'image n40 du calque nomm "Mouvement", insrez une occurrence du
symbole "Etoile" en lui attribuant la mme largeur et la mme longueur et les
coordonnes X=450 et Y=300 et un angle de rotation de 90.
5- Dans l'image n1 du calque nomm "Mouvement", activez l'inspecteur de
proprits et appliquez une interpolation de mouvement.
Solution
Pour raliser une interpolation de mouvement
Insrez un graphique dans l'image de dbut de l'interpolation
Insrez le mme graphique dans l'image de fin de l'interpolation.
Slectionnez l'image de dpart
Dans l'inspecteur des proprits choisissez l'interpolation de mouvement.
37
Figure II-18 : le scnario d'une animation qui comporte une interpolation de mouvement
Constatations :
Infos
Les images d'interpolation de mouvement sont toujours colores en violet.

Lors d'une interpolation de mouvement les images intermdiaires seront
calcules par le logiciel et non dessines avec la boite outils.
Avec une interpolation de mouvement, vous pouvez exploiter l'inspecteur des
proprits pour personnaliser cette animation (acclration, rotation,
dimensionnement, orientation vers la trajectoire, etc.)
Contrairement au morphing, l'interpolation de mouvement

s'applique aux symboles, aux groupes et non aux formes.
c- L'interpolation de mouvement avec guide

Dans certaines interpolations de mouvement on a intrt ce que l'objet en animation doit
suivre une trajectoire bien dtermine, pour ceci, on dfinit un calque comme tant un
guide de mouvement.
Activit 15 :
Dans cette activit on se propose de raliser une interpolation de mouvement dans laquelle un
ballon descend un escalier, en suivant les tapes suivantes :
1 - Crez un symbole graphique "Ballon" (disque rouge).
2 - Sur un calque nomm "Escalier+titre", dessinez avec l'outil ligne, un escalier de cinq
marches ( partir du point de coordonnes X=50, Y=50)
3 - Dans cette image ajouter le texte "Mouvement avec guide".
4 - Insrez une nouvelle image cl la position 40 du mme calque.
5 - Dans le deuxime calque nomm "Ballon", crez une interpolation de mouvement pour
le ballon qui descend l'escalier et cliquez sur le bouton "Ajouter un guide de
mouvement".
6 - Dans le calque "Guide de mouvement", dfinissez la trajectoire (qui est une copie de
l'escalier dans ce cas et la dplacez vers la droite et vers le haut par une distance gale au
rayon du ballon)
7 - Dans le calque "Ballon", ajustez le dbut et la fin de l'interpolation avec le dbut et la fin
de la trajectoire.
38
TIC
Figure II-19 : un aperu de l'animation avec guide
Figure II-20 : Le scnario de l'animation comportant un guide de mouvement.
Constatations :
Infos
Une fois l'interpolation de mouvement est ralise, il est ncessaire d'ajouter un

calque guide.
Le calque guide de mouvement doit tre une trajectoire reprsentant le chemin ou
le guide que doit suivre le symbole dans son mouvement.
Il est ncessaire d'ajuster les deux occurrences du symbole animer avec le dbut
et la fin de la trajectoire.
Un guide de mouvement est une trajectoire ouverte.
Les guides de mouvement s'appliquent uniquement aux interpolations de mouvement
XI. Les boutons :

a- Linsertion dun bouton
Il est possible de crer une interaction avec l'animation courante l'aide des symboles ayant
comme comportement "bouton".
Pour insrer un ou plusieurs boutons partir de la bibliothque commune :
Crez une nouvelle animation
Insrez un calque nomm Bouton
Activez le menu fentre
Slectionnez le groupe de commandes bibliothques communes
Choisissez la commande Bouton
Glissez le Bouton convenable dans la scne.
39
Figure II-21 : Slection d'un bouton partir de la bibliothque commune.

b -L'action un bouton
Pour attribuer une action un bouton :
Dans votre animation, insrez un calque pour contenir les boutons.
Insrez les boutons ncessaires au calque dj ajout.
Affichez le menu contextuel du bouton en question.
Choisissez la commande Action.
Cliquez sur le bouton Assistant de script.
A l'aide du bouton Ajouter un nouvel lment au script ( ) choisissez l'action
ncessaire et ses paramtres.
Lors d'attribution d'un script un bouton il faut dfinir l'vnement ainsi que l'action associe
cet vnement, comme les montrent les deux figures ( figure II-22 et figure II-23) :
Figure II-22 : Le choix d'un vnement lors d'attribution d'un script un bouton
40
TIC
Figure II-23 : Le choix d'une action l'vnement "on(release)"
XII. Le langage Actions Script :

Le langage ActionScript fait partie de Macromedia Flash et offre aux
concepteurs et dveloppeurs de nombreux avantages; tels que le contrle de la
lecture des animations en raction des vnements, l'interaction d'une animation,
l'utilisation des objets intgrs (voir figure II-24).
Les instructions du langage ActionScript peuvent tre associes un bouton ou une image
dans un calque rserv ces instructions.
Figure II-24 : Exemple de choix d'une action pour l'associer une image
Activit 16 :
1- Crez une animation comportant deux squences :
- La premire squence comporte un calque qui prsente une interpolation de forme
qui transforme un cercle (image, n1) en un pentagone (image, n20)
- La deuxime squence comporte un calque qui prsente une interpolation de
mouvement (de l'image n1 vers l'image n20) qui dplace le texte Flash.
2- Testez l'animation, que constatez-vous ?
41
Constatation :
Pendant le test de l'animation, il y aura la lecture de la squence 1 puis la squence 2.
Activit 17 :
Modifiez l'animation prcdente de manire qu' la fin de la squence 1, il se passera une
relecture de la mme squence et non un passage vers la squence suivante, de mme pour
la squence 2.
Solution
Dans la squence 1, ajoutez un calque nomm Action, dans l'image 20 de ce calque,
ajoutez un Script permettant de retourner l'image 1 de la squence courante.
Pour ralisez cette tche il faut :
Insrer une image cl vide dans limage 20 du calque Action de la squence 1.
Activez le panneau Action.
Cliquez sur le bouton Assistant de Script.
Activez le bouton Ajouter un nouvel lment au script pour ajouter un Script
Dveloppez "Fonctions globales"
Dveloppez "Contrle du scnario"
Choisissez la commande GOTO puis ses paramtres (Action : atteindre et lire ;
Squence : Squence courante ; Type : numro d'image ; Image : 1)
NB: Mme travail pour la squence2.
Activit 18 :
Afin de rendre possible le passage d'une squence une autre, moyennant des boutons :
1- Dans la squence 1 Ajoutez un calque nomm "bouton".
2- Dans l'image n1 du calque"bouton", insrez un bouton et maintenir son affichage
jusqua limage 40.
3- Associez ce bouton un Script de passage vers l'image n1 de la squence 2
NB : Mme travail pour la squence 2, en changeant l'action qui doit tre un retour vers
l'image n1 de la squence 1
Solution
L'action du bouton de la squence 1 est :
on (release) {
gotoAndPlay("Squence 2", 1);
}
L'action du bouton de la squence 2 est :
on (release) {
gotoAndPlay("Squence 1", 1);
}
42
TIC
Infos
Lorsqu'une action est associe un bouton, il est ncessaire de

prciser l'vnement ncessaire. (on(release), on(press),
on(keypress), etc.)
A chaque vnement on peut associer une ou plusieurs
instructions.
Le tableau suivant prsente quelques instructions :

Instructions
Rle
Exemples
Place la tte de lecture sur l'image

spcifie dans une squence et
Gotoandplay
commence la lecture partir de
cette image.
Place la tte de lecture sur l'image
Gotoandstop spcifie sur une squence et l'arrte
ce niveau.
Fait avancer la tte de lecture au
Play
sein du scnario.
Arrte le fichier SWF en cours de
Stop
lecture.
gotoAndPlay("Sq TP", 17);
gotoAndStop("sceneTwo", 1);
play();
stop();
Loadmovie
Charge une animation flash (swf) ou loadmovie("c:\windows\web\wallpaper\

une image (JPEG, GIF ou PNG)
bliss.jpg","0");
GetURL
Charge un document en provenance

d'une URL spcifique dans une Geturl("http://www.edunet.tn", "_blank");
fentre.
XIII. La publication:
Flash, sauvegarde ses animations sous forme de fichiers ayant l'extension FLA
(la version source modifiable). Lors de la publication d'une animation, flash convertit le
fichier FLA en fichier exploitable en dehors du logiciel flash. Par dfaut, la commande
Publier cre un fichier Flash SWF et un document HTML qui insre votre animation
Flash dans une fentre d'un navigateur. Il est possible de publier le fichier FLA dans
d'autres formats, tels que le format projection excutable (EXE), le format QuickTime
(MOV), le format AVI Windows (AVI), etc.
Avant de publier votre fichier SWF, il est important de tester son fonctionnement avec les
commandes Tester l'animation ou Tester la squence du menu Contrle.
1- Les paramtres de la publication

Pour changer les paramtres de la publication d'une animation:
Choisissez la commande Paramtres de publication
Choisissez les paramtres et confirmez
43
Figure II-25 : La fentre paramtres de publication
2- L'aperu avant Publication

Pour faire un aperu du travail avant le publier:
Choisissez la commande Aperu avant publication
Slectionnez le format convenable.
3- La publication
Pour publier le travail ralis:
Choisissez la commande publier.
44
TIC
Retenons :
Le logiciel Macromedia Flash est un outil de cration d'animations qui peuvent tre
intgres dans des pages Web.
Les objets pouvant exister dans une animation Flash sont cres base d'images
vectorielles telles que les formes, les groupes, les symboles graphiques, les boutons etc.
Les graphiques crs ainsi que les mdias imports sont stocks dans la
bibliothque de lanimation pour un usage multiple.
Il est possible d'insrer un bouton partir de la bibliothque commune du Flash.
Une animation Flash est forme par des squences (scnes); une squence peut
comporter plusieurs calques et un calque peut renfermer plusieurs images.
Dans une animation on peut avoir 5 types d'images: Les images cls, les images vides,
les images cls vides, les images recopies et les images calcules.
Avec le logiciel Macromedia Flash, il est possible de crer deux types d'animations :
les animations image par image et les animations interpoles.
Dans une animation image par image il est ncessaire de dfinir toutes les
images dcrivant l'animation.
Dans une animation interpole, il suffit de dfinir les deux images extrmes de
l'animation (image dbut et image fin) et dappliquer dans l'image dbut
la proprit d'interpolation.
Il est possible d'avoir deux types d'interpolations : une interpolation de forme qui
s'applique uniquement aux formes et une interpolation de mouvement qui peut
s'appliquer aux graphiques et aux groupes.
Le logiciel Macromedia Flash permet aussi de crer une animation interactive en
utilisant des boutons qui peuvent tre associs des actions et des vnements.
Les scripts du langage ActionScripts peuvent tre associs aux boutons ou images
d'un calque rserv aux actions.
Pour attribuer un script un bouton ou une image, il faut exploiter le panneau action
puis l'assistant de script.
Avant de publier l'animation il est ncessaire de dfinir et de choisir le format de
publication (SWF, HTML, MOV, AVI, EXE,...)
45
Exercices Animation
Exercice 1
1- En utilisant la boite outils, dessinez le drapeau de la Tunisie.
2- Ajoutez en dessous le texte "TUNISIE" comme le prsente la figure suivante :
Exercice 2
1- Crez une animation qui transforme un triangle vers rectangle en pentagone et la fin en
disque.
2- Insrez un deuxime calque travers lequel on associe chaque forme son nom et on y
applique un effet de morphing.
3- Dans un troisime calque, ajoutez 4 boutons de commandes programmer en
ActionScript (Lecture, Arrt, pause, image suivante et image prcdente).
Exercice 3
Crez une animation qui illustre le calcul du maximum d'un vecteur T de N entiers.
Exercice 4
Crez une animation qui illustre le dplacement d'un disque bleu de rayon 10 pixels selon
une trajectoire sinusodale.
Exercice 5
Crez une animation qui illustre la rotation de la terre par rapport au soleil.
Exercice 6
1- Crez une nouvelle animation.
2- Dans les 40 premires positions du premier calque, importez un fichier audio.
3- Dans les 40 premires positions du deuxime calque, importez un fichier image.
4- Crez un morphing dans le troisime calque, qui transforme une toile en un triangle.
5- Dans le quatrime calque, insrez un bouton permettant d'accder au site
(http://www.adobe.com).
6- Changez les proprits du deuxime et troisime calque comme suit : (Calque 2 : masqu
et calque 3 masque)
46
TIC
Exercice 7
Crez une nouvelle animation qui illustre le passage d'un ballon travers un cerceau.
Exercice 8
Crez une animation qui comporte le drapeau de la Tunisie anim et en lui ajoutant
l'hymne nationale.
Exercice 9
Crez une animation qui permet d'insrer un lment X dans un tableau T de N entiers
ordonns.
47
Lecture
Flash et HTML
Flash offre la possibilit de mettre sur les pages Web des effets multimdia, mais
aussi des applications telles que des jeux, des simulations ou des Aides la navigation pour
les pages Web.
Flash est pourtant la plus rcente des publicits sensation et le plus jeune
reprsentant de l'espce "je veux la mort de HTML" - tout au moins c'est le portrait qu'en font
ceux qui n'ont jamais pu s'accommoder de HTML et des standards ouverts. tant donn que
derrire Flash se cache un produit logiciel commercial qui n'est aucunement comparable avec
les standards ouverts d'Internet, on compare l des pommes avec des poires. Exactement de
la mme faon on pourrait dire "je n'ai pas besoin de HTML pour les tableaux, j'ai Excel de
MS". et rien n'empche d'incorporer un fichier Excel comme objet en HTML, ou simplement
de le placer sur le Web et d'y diriger les visiteurs- Avec Excel install ou un visualiseur Excel,
le navigateur ouvrira gentiment l'application pour y afficher le fichier. Il n'en va pas
autrement avec Flash. Il s'agit d'un format binaire que vous pouvez au choix incorporer
comme objet Multimdia en HTML, ou bien proposer des fichiers Flash directement - les
navigateurs les plus rcents disposent d'un plugiciel pour Flash et peuvent afficher Flash
directement. Cela n'a pourtant rien voir avec les standards Internet, et si Macromdia, le
fabricant du logiciel Flash, dcide demain de rformer Flash ou de le modifier de fond en
comble, alors c'est comme a et personne n'y pourra rien changer.
Flash a le vent en poupe partout o l'on pense qu'une page Web, ce doit tre comme
la tlvision. Sans arrt quelque chose qui bouge, des fondus enchans
sophistiqus, des effets de lumire, des bruits, de la musique etc. Certains crateurs en herbe
en sont convaincus mais davantage encore les services de mercatique de socits qui laissent
structurer leur venue sur le Web par des agences et qui veulent pour cette raison voir
quelque chose sur l'cran, dont ils pensent que c'est particulirement difficile et passionnant.
L nuisent les recherches d'effets - ils sont d'ailleurs ressentis comme
particulirement nervant par la majorit des visiteurs de pages - Flash est utilis la
plupart du temps dans ce seul but. Ces effets nuisent cette technologie plus qu'ils ne la servent. Car vrai dire Flash peut tre utilis bon escient.Flash se base sur le
graphique vectoriel anim. Lors de la cration d'une animation Flash, vous travaillez avec le
logiciel Flash original avec lequel vous positionnez des reprsentations graphiques, du texte,
des lments incorpors comme des graphiques en pixels ou du son sur une chelle de temps.
Vous dterminez ainsi le droulement dans le temps. Flash peut
calculer les passages entre deux tats sur l'chelle de temps.
48
TIC
Supposons que vous ayez la seconde 0 un point bleu et qu' la seconde 1, au mme
endroit, vous ayez un point rouge, alors il vous est possible de dfinir un passage
progressif de la couleur bleue la couleur rouge qui s'tale sur une seconde. Toute "animation" n'a pas un dbut et une fin.De la mme
faon des effets de boucles sont possibles par lesquels on peut avec Flash raliser des
applications orientes sur le dialogue comme des jeux ou des Aides la navigation. Flash
offre galement des interfaces spcifiques au Web.
Ainsi on peut sans problme incorporer dans Flash des liens d'autres pages pouvant tre
cliqus. Dans le domaine pdagogique, Flash peut tre par exemple bien utilis parce qu'il
se prte bien la visualisation de processus et de tenants et aboutissants. L'utilisation
judicieuse pour de tels cas reste isole - pourtant sur le Web dominent
malheureusement essentiellement ces bandeaux de textes volant btement et ces effets
d'clairs.
Pour des applications plus ambitieuses, l'interface visuelle du logiciel Flash original
ne se suffit pas elle seule. Flash dispose pour cette raison en plus d'un langage de
programmation qui permet aux dveloppeurs de rsoudre des problmes plus
complexes.
Pour rsumer Flash est donc un outil puissant pour visualiser des contenus.
N'oublions cependant pas de mentionner qu'il y a des standards Internet disponibles
librement, documents en clair et en fin de compte encore plus performants pour faire ce
que fait Flash. Pourtant malheureusement, les navigateurs modernes sont livrs avec le
plugiciel Flash et ne sont pas encore en mesure de traiter SVG ou SMIL. Et aussi
longtemps qu'il n'y aura pas d'outil d'auteur qui interpelle galement ces crateurs Web qui
ne supportent pas de voir du code source l'cran, ces standards auront du mal lutter
contre des apparitions comme Flash.
Dans les pages Web de Macromdia vous pouvez rechercher des informations sur
Flash. Dans tous les moteurs de recherche importants sur le Web, vous trouverez
d'innombrables offres Web qui traitent de Flash. Le logiciel original pour la cration
d'animations Flash est payant et exige une licence. Le logiciel de reproduction Flash est galement livr comme plugiciel sur de nombreux navigateurs et il peut tre utilis
librement.
Un texte pris du site "http://www.selfhtml.org"
49
Partie B
Pages Web Statiques

Objectifs :
- Crer des pages Web statiques en utilisant le langage HTML
- Programmer et intgrer des scripts dans une page Web
Plan :
Le langage HTML
I - Introduction au langage HTML
II - Structure dun document HTML
III - Les balises du langage HTML
Le langage JavaScript
I - Introduction au langage JavaScript
II - Le formalisme de base du JavaScript
III- Les objets JavaScript
IV - Les variables
V- Les oprateurs prdfinis
VI- Les entres /sorties en JavaScript
VII- Les structures de contrle
VIII- Les fonctions en JavaScript
IX- La gestion des vnements en JavaScript
X - Les formulaires en JavaScript
Exercices
Lectures
Le langage HTML
I. Introduction au langage HTML :
Les pages Web visualises dans un navigateur Internet sont crites avec un langage
nomm HTML (HyperText Markup Language). Cest un langage de description de contenu et de structure.
Les pages HTML ont la particularit dtre indpendantes de toute plate-forme, et donc
bien adaptes des changes dinformations dans un environnement htrogne comme
le Web.
Le langage HTML est compos dun ensemble de balises (tags). Une balise est un
lment spcial qui indique une action concernant la mise en page, la mise en forme ou la
structure logique dun document.
Activit 1 :
1. Crez un nouveau rpertoire sous la racine de votre disque dur avec le nom tphtml.
2. Dans le rpertoire tphtml, crez un nouveau document texte (cliquez avec le
bouton droit dans une zone vide et choisissez nouveau document texte).
3. Renommez le fichier afin de le doter de lextension html (tp1.html).
Constatations :
Infos
Le fichier texte sest transform en page Web ce qui signifie qu'une page Web
nest rien dautre quun fichier texte enregistr avec lextension html (ou htm).
En double cliquant sur ce fichier, le navigateur se lance avec comme contenu le
fichier tp1.html, ce qui signifie que le langage HTML utilis pour la cration des
pages Web, est un langage interprt, dont linterprteur est le navigateur install sur
la machine de test, tel que : Firefox, Internet Explorer, Netscape,
Bien que de nombreux logiciels soient destins crer des pages

HTML, dans ce manuel nous allons utiliser un diteur de texte pour
la cration et ldition des pages Web, et ce dune part pour vous
inviter connatre de plus prs la syntaxe du langage HTML et
dautre part pour ne pas tre dpendant des fonctionnalits dun logiciel particulier.
Une prsentation plus approfondie de la panoplie des logiciels
susceptibles de dvelopper des pages Web est donne en annexe A.
51
Activit 2 :
1- Dans le rpertoire de travail, crez un nouveau fichier tp2.html.
2- Recherchez une image d'extension jpg sur votre disque dur, pour la copier dans votre
rpertoire de travail avec le nom image1.jpg.
3- Double cliquez sur le fichier tp2.html.
4- A l'aide de votre navigateur, accdez la fentre d'dition du code source de la page
(menu affichage puis la commande source).
5- Saisissez le code HTML donn ci-dessous, enregistrez et testez (bouton rafrachir).
<HTML>
<HEAD>
<TITLE> MA PREMIRE PAGE
</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT SIZE="5" COLOR="blue">
PAGE WEB N1
</FONT><BR><HR><BR>
<IMG SRC="image1.jpg" WIDTH="80"
HEIGHT="78" >
</CENTER>
</BODY>
</HTML>
Figure II-26 : Une page Web contenant du texte et une image
52
TIC
Constatations :
Le document HTML peut contenir un ensemble de balises tels que <HEAD>,
<BODY>, <TITLE>, <HTML>, <P>, <HR>, <IMG>, etc.
Les balises du langage HTML sont inclues entre les signes infrieur (<) et
suprieur (>).
Les balises du langage HTML ne sont pas sensibles la casse. Pour plus de clart,
nous utiliserons les majuscules.
Syntaxiquement, les balises rencontres peuvent tre reparties en quatre
catgories:
Des balises composes d'une partie ouvrante et d'une partie fermente, tel
que <BODY>.</BODY>,
Des balises composes d'une seule partie ouvrante tel que : <BR>
Des balises composes d'une partie ouvrante et d'une partie fermante avec
des proprits, tel que :
<FONT SIZE="5"COLOR="blue">...</FONT>,
Des balises composes d'une partie ouvrante avec des proprits, tel que
<IMG SRC="image1.jpg" WIDTH="80" HEIGHT="78" >
II. Structure dun document HTML :
Figure II-27 : Structure gnrale d'un document HTML

53
Infos
Un fichier HTML commence par la balise <HTML> et finit par la balise </HTML>
La partie entte dlimite par <HEAD> et </HEAD> sert dfinir le titre de la page
Web qui sera affich dans la barre du titre du navigateur (entre <TITLE> et
</TITLE>) et indiquer un certain nombre d'informations facultatives tel que les
mots cls, la date de cration,A lexception du titre, le contenu de cette section
nest pas directement visible pour le visiteur.
La partie corps du document dlimite par <BODY> et </BODY> est utilise pour
dfinir le contenu de la page Web.
Le titre dune page ne peut pas contenir de mise en forme ou dimages.

Le choix du titre doit se faire avec beaucoup de soin, en effet cest
cette information qui est utilise dans les listes historiques et
favoris de votre navigateur.
III. Les balises du langage HTML :

1- Les textes et les paragraphes
Activit 3 :
1- Dans votre rpertoire de travail, crez un nouveau fichier tp3.html.
2- Double cliquez sur ce fichier.
3- A l'aide de votre navigateur, accdez la fentre d'dition du code source de la page.
4- Saisissez le code HTML donn ci-dessous, enregistrez et testez.
<HTML>
<HEAD>
<TITLE> Textes et Paragraphes</TITLE>
</HEAD>
<BODY><P align= center>
<FONT color="blue" size=7 face="arial"> <B> Dveloppement Web </B> </FONT>
</P>
<HR color="#884412" width="400" size="5">
<CENTER>
<FONT size="6">les langages pour le Web</FONT>
</CENTER>
<HR color="#000000" width="500">
<BR><B>Langage Html</B>
<BR><I> Langage javascript</I>
<BR><U> Langage PHP </U> <BR>
<P><FONT size="5">Autre</FONT></P>
MERCI
</BODY>
</HTML>
54
TIC
Figure II-28 : La gestion du texte dans le langage HTML
Constatations :
Le texte dfini entre <BODY> et </BODY> sans balises (Merci), sera repris par le
navigateur avec les proprits de mise en forme par dfaut, de ce dernier.
La balise <BR> permet un retour la ligne, alors que <P> provoque un passage la
ligne et dcale la ligne suivante d'environ une ligne (espacement interparagraphe).
On remarque que la balise <FONT> permet de changer la police, la couleur et la taille
du texte.
Les styles d'criture : gras, italique et soulign s'appliquent respectivement avec les
balises <B> (BOLD), <I> (ITALIC) et <U> (UNDERLINE).
La balise <CENTER> permet d'appliquer un alignement centr.
La balise <HR> permet d'insrer une ligne horizontale.
Dans de la balise <HR>, la proprit width permet de dfinir la largeur de la ligne
horizontale qui est mesure soit en pixels, soit en pourcentage par rapport son conteneur.
Le tableau suivant comporte les balises de mise en forme des caractres et des
paragraphes.
55
Fonctions
Balise
Exemple de code
Rsultat
Gras
<B>...</B>
<B>Tunisie</B>
Tunisie
Italique
<I>...</I>
<I>Tunisie</I>
Tunisie
Soulign
<U>....</U>
<U>Tunisie</U>
Tunisie
Mise en forme
de caractre
<FONT
SIZE="**"
COLOR= "#****"
FACE="****"></FONT>
<FONT size="2"
color="blue"
face="arial">
Tunisie
</FONT>
Exposant
<SUP></SUP>
X<SUP>2</SUP> X2
Indice
<SUB></SUB>
H<sub>2</sub>O H2O
A la ligne
<BR>
HTML<BR>WEB
Tunisie
HTML
WEB
HTML
<HR SIZE="**"
<HR color="blue"> HTML
Ligne de sparation COLOR="#******" WIDTH="***"
WEB
WEB
ALIGN="CENTER/LEFT/RIGHT" >
<CENTER>
Tunisie
</CENTER>
Centrage
<CENTER></CENTER>
Alignement d'un
lment
<DIV
<DIV
ALIGN="CENTER/LEFT/RIGHT"> align="right">
...</DIV>
Tunisie</DIV>
- Nouveau paragraphe
- paragraphe centr
- paragraphe align
gauche
- paragraphe align
droite
- <P>...</P>
- <P ALIGN="CENTER">...</P>
- <P ALIGN="LEFT">...</P>
- <P ALIGN="RIGHT">...</P>
Commentaire

<P align="right">
Tunisie </P>
<!-ceci est un
commentaire-->
56
Tunisie
Tunisie
Tunisie
TIC
Infos
Il est possible d'utiliser plusieurs balises pour un mme lment de

texte. Il faut veiller bien les imbriquer. Ainsi <B><I>...</I></B> est
correct mais <B><I>...</B></I> est incorrect et risque de poser des
problmes.
La taille dans <FONT SIZE= "taille"> est un nombre de 1 7
La couleur dans <FONT color="couleur"> peut tre indique de
deux faons : avec le nom d'une couleur exprim en anglais (black,
white,...) ou avec un code hexadcimal de la couleur souhaite.
Exemples: #ffffff, #0022AF. (voir annexe C).
Afin de garantir l'affichage correct des pages Web, des caractres
accentus et des symboles spciaux sur toutes les plates-formes, le
HTML a prvu pour chacun d'entre eux un code commenant par
& ( ET commercial)
Exemple : é pour .
Certains de ces codes ont leurs quivalents sous forme d'un nom.
Par exemple, ce mme s'crit aussi é(vous trouverez la liste
des symboles spciaux avec leurs codes respectifs dans l'annexe B)
2- Les titres
Le langage HTML fournit la possibilit de crer des titres avec plusieurs niveaux
hirarchiques afin de subdiviser un document Web en plusieurs parties spares.
Activit 4 :
<HTML><HEAD>
<TITLE>Les titres</title>
</HEAD><BODY>
<P align="center"><FONT size=7>Les Titres</FONT></P><BR><HR>
<P><H1>on distingue six niveaux pour les titres</H1></P>
<H1> titre niveau 1</H1>
</BODY>
</HTML>
57
Figure II-29 : Les titres au niveau du HTML
Constatations :
La balise qui permet de dfinir un titre est <Hn></Hn>; avec n varie de 1 6.
Pour chaque titre, il y a une taille qui dcroit du niveau 1 au niveau 6.
Les balises <Hn> incluent des retours automatiques la ligne. Cela signifie qu'il n'est
pas ncessaire d'ajouter <P> pour commencer un nouveau paragraphe la suite d'une
balise de ce type.
3- Les images
Activit 5 :
2- Crez un sous rpertoire dans votre rpertoire de travail, avec le nom images.
3- Copiez deux images d'extension JPG de votre disque dur, dans le rpertoire
images, et renommez-les en image1.jpg et image2.jpg.
<HTML>
<HEAD>
<TITLE>Les Images</TITLE>
</HEAD>
<BODY>
58
TIC

<P ALIGN= center>
<FONT SIZE="6" >L'INSERTION D'IMAGES </FONT>
<BR></P>
<HR COLOR="#123456" WIDTH="400" SIZE="2">
<IMG SRC="image1.jpg" WIDTH="200" HEIGHT="150">
<HR COLOR="#123456" WIDTH="400" SIZE="2">
<IMG SRC="image2.jpg" WIDTH="200" HEIGHT="150" ALIGN="right"
BORDER="2"
ALT="image insre">
</BODY></HTML>
Figure II-30 : Insertion d'images
Constatations :
Dans les pages Web, l'insertion d'une image se fait avec la balise suivante :
<IMG SRC ="ADRESSE" WIDTH="LARGEUR" HEIGHT="HAUTEUR"
BORDER="TAILLE" ALT="TEXTE" ALIGN="ALIGNEMENT">
SRC="adresse" : dfinit l'adresse absolue ou relative de l'image afficher.
WIDTH="largeur" et HEIGHT="hauteur" : dfinissent la largeur et la hauteur de
l'image en pixels.
ALT="texte" : permet de dfinir le texte de l'info bulle de l'image
BORDER="taille" : dfinit la largeur de la bordure autour de l'image.
ALIGN="alignement" permet de dfinir l'alignement de l'image ("left", "center",
"right").
59
Infos
Les navigateurs Web reconnaissent les images aux formats GIF,

JPG et PNG. En effet, d'une part ces formats offrent les tailles les
plus lgres pour les images et d'autre part ils sont
reconnus par la majorit des systmes d'exploitation.
Bien qu'il soit possible d'utiliser des adresses absolues pour
rfrencer une image, il est fortement conseill d'utiliser des
adresses relatives pour se prmunir des ventuels problmes
d'adressage lors des dplacements des rpertoires contenant vos
sites. (Par exemple lors de l'hbergement).
Activit 6 :
4- Saisissez le code HTML donn ci-dessous, enregistrez et testez de nouveau.
<HTML>
<HEAD>
<TITLE> Insertion d'une image comme
arrire-plan </TITLE>
</HEAD>
<BODY BACKGROUND= "i1.jpg">
<H1>Bonjour</H1>
</BODY>
</HTML>
Figure II-31 : Insertion d'une image comme arrire-plan
Constatations :
Pour mettre une image comme arrire plan d'une page, on utilise la proprit
BACKGROUND de la balise body: <BODY BACKGROUND="Adresse">
L'image d'arrire plan d'une page est utilise avec l'effet de mosaque (l'image est
duplique autant de fois que ncessaire afin de couvrir la totalit de la fentre de
navigation).
60
TIC
Infos
Au niveau de la balise <BODY> on peut aussi retrouver les proprits

suivantes :
BGCOLOR : une couleur unie pour le fond d'une page Web.
TEXT : la couleur par dfaut du texte au niveau d'une page Web.
LINK : la couleur d'un lien qui n'a pas encore t visit (bleu par
dfaut).
VLINK : la couleur d'un lien qui a dj t visit (violet par dfaut)
ALINK : la couleur qui apparat au moment du clic sur un lien
(rouge par dfaut).
4- Les listes
Les spcifications du langage HTML offrent la possibilit de crer des listes d'lments.
Activit 7 :
1. Dans votre rpertoire de travail, crez un nouveau fichier tp7.html.
2. Ouvrez ce fichier.
3. A laide de votre navigateur, accdez la fentre ddition du code source de la page.
4. Saisissez le code HTML donn ci-dessous, enregistrez et testez de nouveau.
61
<HTML>
<HEAD>
<TITLE> Les listes </TITLE>
</HEAD>
<BODY>
<H4> Les types scalaires</H4>
<UL>
<LI>Entier</LI>
<LI>Caractre</LI>
<LI>Boolen</LI>
<LI>le type numr</LI>
</UL>
<H4> les fonctions pour un type numr </H4>
<OL>
<LI>Ord</LI>
<LI>Succ</LI>
<LI>Pred</LI>
</OL>
<H4>Lexique</H4>
<DL>
<DT>A</DT>
<DD>Array Abs Access </DD>
<DT>B</DT>
<DD> Bit Byte Boolean</DD>
<DT>C</DT>
<DD>Com cos chr char</DD>
</DL>
</BODY>
</HTML>
Figure II-32 : Les listes HTML
62
TIC
Constatations :
Infos
On distingue 3 types de listes :

Les listes numratives ( puces) qui se dfinissent avec la balise <UL></UL>
Les listes numrotes qui se dfinissent avec la balise <OL></OL>
Les listes de dfinitions qui se dfinissent avec la balise <DL></DL>
Les listes numratives et numrotes sont formes par des lignes d'o
l'utilisation des balises <LI></LI> tandis que les listes des dfinitions sont
formes par des termes <DT></DT> et leurs dfinitions <DD></DD>.
La proprit type de la balise <OL> peut avoir les valeurs suivantes :
A : Lettres majuscules.
a : Lettres minuscules.
I : Chiffres romains majuscules.
i : Chiffres romains minuscules.
1 : Chiffres arabes (valeur par dfaut)
La proprit type de la balise <UL> peut avoir les valeurs suivantes :
square : puces carres.
circle : puces circulaires.
disc : puces circulaires pleines (valeur par dfaut)
Il est possible d'imbriquer des listes mme si elles ne sont pas de

mme nature.
La balise <LI> admet une proprit type, qui est prioritaire sur
l'attribut type de <OL> ou <UL>.
5- Les tableaux
Dans le langage HTML, les tableaux sont d'une importance capitale, en effet leur
utilisation ne se limite pas aux donnes tabulaires, mais sont aussi utiliss pour la mise en
forme des pages Web.
Activit 8 :
2- Ouvrez ce fichier.
4- Saisissez le code HTML donn ci-dessous, enregistrez et testez de nouveau
63
<HTML>
<HEAD>
<TITLE>La gestion des tableaux</TITLE>
</HEAD><BODY>
<TABLE width="100%" border="1">
<TR bgcolor="yellow" align="center">
<TD>Tableau</TD> <TD>Dfinir une bordure</TD><TD>Dfinir l'espacement</TD>
</TR>
<TR align="center">
<TD>
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
</TD> <TD>
<TABLE border=2>
</TABLE>
</TD>
<TD>
<TABLE border=2 cellspacing=10 cellpadding=10>
</TABLE>
</TD></TR>
<TR bgcolor="yellow" align="center">
<TD>Dfinir la couleur de fond</TD>
<TD>Dfinir la largeur et la hauteur </TD>
<TD>Les oprations de fusion</TD>
</TR>
<TR align="center">
<TD><TABLE border=2 cellpadding=10 bgcolor="blue">
<TR bgcolor="yellow"><TD bgcolor="red">1</TD><TD>2</TD> </TR>
</TABLE></TD>
<TD>
<TABLE width=60% border=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
</TD>
<TD>
64
TIC

<TR><TD COLSPAN=3> 1</TD></TR>
<TR><TD width=33%> 2</TD><TD width=33%>
width=34%>4</TD></TR>
</TABLE>
<BR>
<TR>
<TD width=33% rowspan=2 align=center valign=middle>1</TD>
<TD width=33%> 2</TD>
</TR>
<TR>
</TR>
</TABLE></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure II-33 : La cration des tableaux avec HTML

65
3</TD><TD
Constatations :
En HTML un tableau est conu sous forme d'un ensemble de lignes, o chaque
ligne est forme d'un ensemble de cellules. Au niveau des cellules on dfinit le
contenu afficher.
Syntaxiquement, le HTML a prvu pour les tableaux trois balises :
La dfinition d'un tableau : <TABLE></TABLE>
La dfinition d'une ligne : <TR></TR>
La dfinition d'une cellule <TD></TD>
Entre <TABLE> et </TABLE>, on doit retrouver que des blocs < TR > et </TR>,
et entre <TR> et </TR> on ne doit retrouver que des blocs <TD> et </TD>, alors
que entre <TD> et </TD> on peut retrouver n'importe quel contenu, y compris
<TABLE> et </ TABLE> (des tableaux imbriqus)
Les proprits de la balise <TABLE> concernent tout le tableau alors que les
proprits de la balise <TR> concernent les diffrentes cellules d'une mme ligne,
tandis que celles de la balise <TD> concernent uniquement une cellule.
Dans ce qui suit, nous donnons la liste de ces proprits rparties par balises de
rattachement.
Les proprits de la balise <TABLE>
Attributs
Description
CELLSPACING
Dfinit l'espace entre les cellules (en pixel).
CELLPADING
Reprsente l'espace entre le contenu de la cellule et le bord extrieur de la

cellule (en pixel).
BORDER
Dfinit lpaisseur de bordure (en pixel).
WIDTH
La largeur du tableau en pixel ou en pourcentage par rapport la largeur

de la fentre.
HEIGHT
La hauteur du tableau en pixel ou en pourcentage par rapport la hauteur

de la fentre.
ALIGN
Lalignement du tableau par rapport au conteneur.
BGCOLOR
La couleur darrire plan du tableau.
Les proprits de la balise <TR>

Attributs
Description
ALIGN
Lalignement horizontal des diffrents contenus des cellules dune mme

ligne (les valeurs possibles : left, right et center).
66
TIC

VALIGN
Lalignement vertical des diffrents contenus des cellules dune mme ligne
(les valeurs possibles : bottom, top et middle).
BGCOLOR
La couleur darrire plan des diffrentes cellules dune ligne.
HEIGHT
La hauteur dune ligne en pixel ou en pourcentage par rapport la hauteur du

tableau.
Les proprits de la balise <TD>

Attributs
Description
ALIGN
Lalignement horizontal du contenu dune cellule (les valeurs possibles : left,

right et center).
VALIGN
Lalignement vertical du contenu dune cellule (les valeurs possibles : bottom,

top et middle).
WIDTH
HEIGHT
La largeur dune cellule en pixel ou en pourcentage par rapport la largeur du

tableau.
La hauteur dune cellule en pixel ou en pourcentage par rapport la hauteur
dune ligne.
La couleur darrire plan dune cellule.
ROWSPAN
Fusionner des cellules horizontalement.
COLSPAN
Fusionner des cellules verticalement.
Infos
BGCOLOR
La proprit BORDER de la balise <TABLE> par dfaut est gale 0.

On obtient une grille invisible dont l'intrt principal est de
permettre l'alignement d'un ensemble d'lments dans une page.
En absence de WIDTH et HEIGHT, le navigateur calcule
automatiquement les dimensions des lignes et des colonnes en
fonction du contenu et de la taille de la fentre d'affichage, c'est ce
qu'on appelle un tableau ajust par rapport son contenu.
Il est noter que l'attribut WIDTH de <TR> n'a aucun effet puisque
toutes les lignes d'un tableau ont la mme largeur : celle du tableau.
6- Les liens hypertextes

Le langage HTML permet de transformer les objets textes et les images en liens
cliquables pour nous amener vers d'autres emplacements que ce soit dans la mme page ou
vers une autre page : c'est la notion de lien hypertexte.
67
Conceptuellement, les liens peuvent tre rpartis en deux catgories :

- Lien externe : c'est tout lien permettant d'appeler une page HTML partir d'une
autre page HTML.
- Lien interne : c'est tout lien permettant de pointer un endroit prcis dans la page,
partir d'un autre endroit de la mme page HTML.
Activit 9 :
<HTML>
<HEAD>
<TITLE>Lien hypertexte</TITLE> </HEAD>
<BODY>
<h3>Activer le lien convenable</h3>
<TABLE WIDTH="480" BORDER="2" >
<tr>
<td>Rechercher avec Google</td>
<td><a href="http://www.google.fr">WWW.Google.fr</a></td>
</tr>
<tr>
<td>Accder l'annuaire Yahoo</td>
<td><a href="http://www.yahoo.fr">WWW.Yahoo.fr</a></td>
</tr>
<tr>
<td>Envoyer un Email</td>
<td><a href="mailto:contact@Edunet.tn">Nous contactez</a></td>
</tr>
<tr>
<td>Ouvrir un fichier Html</td>
<td><a href="file://C:/tp html/Tp4.Html"> une page Web dans le disque dur</a></td>
</tr>
<tr>
<td>tlcharger un fichier</td>
<td><a href="ftp://ftp.commentcamarche.net/docs/Html.zip">un fichier Html
compress</a></td></tr>
</TABLE>
</BODY>
</HTML>
68
TIC
Constatations :
Les zones sensibles aux clics sont des liens hypertextes cres avec la balise
<A href= " adresse cible ">texte </A>
Pour chaque adresse cible correspond un protocole, comme le montre le tableau
suivant :
Syntaxe
Description
Protocole par dfaut : http
<A HREF="#position">
Lien interne, protocole http
<A HREF="http://adresse Web">
Protocole http
<A HREF="ftp://adresse ftp">
Protocole FTP pour le transfert de fichiers
<A HREF="mailto:adresse email">
Protocole SMTP pour le courrier lectronique
<A HREF="file://adresse fichier">
Adressage locale sur un poste non distant
Infos
<A HREF="adresse">
Par dfaut la couleur du texte d'un lien non activ est bleu, d'un lien
activ est violet et d'un lien en cours d'activation est rouge.
On peut appliquer un lien un texte ou une image.
Activit 10 :
<HTML>
<HEAD>
<TITLE>Lien hypertexte bis</TITLE>
</HEAD>
<BODY>
<H1><A NAME="Haut">Voila une page trs longue</A></H1>
<A HREF="#Bas">bas de la page</A>
<HR> <IMG SRC = image1.jpg width = 400 height = 800 ><HR>
<H2><A NAME="Bas">Bas de la page</A></H2>
<A HREF="#Haut">Remonter</A>
</BODY>
</HTML>
69
Constatations :
Infos
On visualise une page Web trs longue. La navigation dans cette mme page est facile avec
l'existence de deux liens internes (Bas) et (Haut) permettant respectivement de
descendre vers le bas de la page et de remonter vers le haut de la page.
La cration d'un lien interne se fait en deux tapes :
La cration d'un signet (ou ancre) : l'endroit o le lien interne doit pointer,
travers la balise : <a name= " nom du signet "> texte </a>
La cration du lien interne : <A HREF= " # nom du signet ">texte </a>
Avec la balise <A> on peut utiliser la proprit TARGET, qui permet

de spcifier la fentre d'affichage du lien. Cette proprit peut avoir
les valeurs suivantes :
* "_blank" : une nouvelle fentre
* "_self" : la mme fentre
* "_parent" ou non du cadre : voir la partie du cours sur les cadres.
On peut avoir un lien mixte qui pointe vers un signet dans une autre
page HTML en utilisant la balise suivante :
<A HREF= " adresse document#signet> texte </A>
7- La cration de formulaires HTML

Jusqu' prsent, toutes les pages dveloppes fonctionnent en mode consultation o la
seule interactivit entre le visiteur et le site est le systme de liens hypertextes.
Les pages Web formulaires offrent une interactivit beaucoup plus riche, en proposant aux
visiteurs divers objets graphiques de saisie, de slection et de choix.
Activit 11 :
2- Ouvrez ce fichier et y saisissez le code HTML donn ci-dessous, enregistrez et testez
de nouveau.
<HTML>
<HEAD>
<TITLE>Les Formulaires</tITLE>
</HEAD>
<BODY>
<CENTER><H1>Inscription</H1></CENTER>
<FORM ACTION="sauvegarder.html" NAME = "F1" METHOD ="GET">
70
TIC

<H2>
<P>Votre Nom: <INPUT NAME="nom" TYPE="TEXT" SIZE="20" MAXLENGTH="30"> </P>
<P>Votre Prnom:<input name="Prenom" type="text" size="20" maxlength="20">
<P>Votre Adresse:<BR> </P>
<TEXTAREA name="Adresse" cols="25" rows="3"></TEXTAREA>
<P>Votre Bac:<BR> </P>
<SELECT name="bac" size="6"><OPTION Selected>Sc - Info</OPTION>
<OPTION>Math</OPTION><OPTION>Sc - Exp</OPTION>
<OPTION>Sc - Tech</OPTION><OPTION>Lettres</OPTION>
<OPTION>Sc - Eco</OPTION></SELECT> </P>
<P>Donnez votre 2me langue:</P><P>
<INPUT type="radio" name="langue" value="Franais"> Franais<BR>
<INPUT type="radio" name="langue" value="Anglais"> Anglais<BR>
<INPUT type="radio" name="langue" value="Allemand"> Allemand<BR> </P>
<P>Vos options:</P><P>
<INPUT type="checkbox" name="option1" value="Musique"> Musique<BR>
<INPUT type="checkbox" name="option2" value="Thatre"> Thatre<BR>
<INPUT type="checkbox" name="option3" value="Dessin"> Dessin</BR> </P>
<P> Votre Photo jpg, png, bmp...:<BR>
<INPUT name="fichier" type="file" size="35"> </P>
<INPUT type="submit" value=" Envoyer ">
<INPUT type="reset" value=" Annuler">
</H2></FORM>
</BODY>
</HTML>
3 - Crez un fichier HTML nomm "sauvegarder.html" contenant le message suivant
"Merci pour votre utilisation".
Constatations :
Info
La page Web cre comporte un formulaire remplir pour s'inscrire dans une
institution universitaire. Ce formulaire comporte plusieurs contrles savoir: zones
de saisie, liste droulante, boutons, cases cocher, boutons radio, etc.
Les diffrents objets graphiques se trouvent entre <FORM> et </FORM>. Cette
balise possde les attributs suivants :
ACTION : Permet d'indiquer l'action entreprendre lorsque le bouton de
validation est activ.
NAME : Le nom attribu au formulaire.
METHOD : Permet de spcifier la mthode d'envoi des donnes au serveur
(deux mthodes sont possibles : POST ou GET).
TARGET : Permet d'indiquer la fentre d'affichage du fichier

dfini comme valeur de la proprit ACTION
71
Les balises dfinissant les composants du formulaire sont :

a - La zone de saisie
La dfinition du contrle zone de saisie se fait l'aide de la balise suivante :
<INPUT TYPE="TEXT" NAME= " nom" SIZE=" taille" MAXLENGTH="taille maximale">
Info
Proprit
NAME
SIZE
MAXLENGTH
Description
Indique le nom du contrle
La taille de l'objet texte (en caractres)
La taille maximale de l'objet texte (en caractres)
Pour les zones de saisies cryptes (type mot de passe), on utilise

INPUT TYPE="password"
b - La zone de saisie plusieurs lignes

La dfinition d'une zone de texte plusieurs lignes se fait l'aide de la syntaxe
suivante :
<TEXTAREA NAME="nom" ROWS="NL" COLS="NC">texte par dfaut </TEXTAREA>
O NL reprsente le nombre de lignes et NC reprsente le nombre de caractres par ligne.

c - Les cases d'options
La dfinition du contrle cases d'options (bouton radio) se fait l'aide de la balise
suivante : <INPUT TYPE="RADIO" NAME="nom" VALUE="valeur1" > valeur2
Les boutons radio sont utiliss pour faire un et un seul choix, parmi un ensemble de
propositions.
Proprit
NAME
VALUE
Description
Indique le nom du contrle. Tous les boutons, composant
un mme groupe, portent le mme nom.
L'information retourner si la case est coche.
La valeur ( valeur2 ) est l'information qui va tre affiche comme intitul d'une case
d'option (qui n'est pas forcment gale la valeur de la proprit value(valeur1))
d - Les cases cocher
La dfinition du contrle cases cocher (checkbox) se fait l'aide de la balise suivante :
<INPUT TYPE="CHECKBOX " NAME="nom" VALUE="valeur1" > valeur2
Les boutons cases cocher sont utiliss pour faire un ou plusieurs choix parmi un ensemble
de propositions.
Proprit
Description
NAME
Indique le nom du contrle. Toutes les cases cocher

portent obligatoirement des noms diffrents.
VALUE
Indique la valeur de l'lment case cocher.

72
TIC

La valeur ( valeur2 ) est l'information qui va tre affiche comme intitul d'une case
d'option (qui n'est pas forcment gale la valeur de la proprit value(valeur1))
e - La liste de slection
La dfinition du contrle liste de slection se fait l'aide de la balise suivante:
Syntaxe :
<SELECT NAME="nom" size=x>
<OPTION [SELECTED] >valeur 1 </OPTION>
<OPTION >valeur 2 </OPTION>
........
........
........
<OPTION >valeur n </OPTION>
</SELECT>
Proprit
NAME
SIZE
SELECTED
Description
Indique le nom du contrle
Indique la taille d'affichage de la liste.
Indique la valeur slectionne par dfaut.
Info
Le contrle liste de slection permet de proposer diverses options sous la forme d'une liste
droulante dans laquelle l'utilisateur peut cliquer pour faire son choix ; ce choix reste alors
affich.
La boite de la liste est cre par la balise <SELECT> et les lments de la liste par un ou
plusieurs tags <OPTION>.
f - Le contrle Annuler
Le contrle RESET permet d'annuler les modifications apportes aux contrles d'un
formulaire et de restaurer les valeurs par dfaut.
La syntaxe en HTML est :
<INPUT TYPE="RESET" NAME="nom" VALUE= "texte"> O VALUE dfinit le
texte afficher au dessus du bouton .
g - Le contrle button
Lors d'un clic, un bouton peut excuter une action ou un programme (crit l'aide d'un
langage autre que le langage HTML, tel que le javascript, le PHP ou autre), accder un
site Web, accder une boite email, etc.
La syntaxe HTML est : <INPUT TYPE="BUTTON" NAME="lien" VALUE="texte">
Dans le cas o la proprit SIZE est >1, on peut ajouter la balise

SELECT lattribut MULTIPLE, qui permet dautoriser la slection
multiple de plusieurs lments dans une zone de liste.
73
h - Le contrle File
C'est un contrle qui permet de transmettre un fichier, il s'applique avec la syntaxe
suivante : <INPUT NAME="FICHIER" TYPE="FILE" SIZE="nombre de caractres" >
8- Les cadres
Le systme de cadres est une fonctionnalit du HTML qui permet de dcouper la
fentre de navigation en plusieurs parties indpendantes. Chacune de ces parties peut alors
contenir une page HTML qui peut changer au fil de la navigation.
Un exemple classique est un dcoupage en deux parties gauche et droite, dans lequel la
partie gauche joue le rle d'un index (sommaire) et la partie droite sert d'espace
d'affichage.
Dans une telle disposition, le visiteur a en permanence accs la liste des liens gauche et
chaque lien charge la page affiche dans la partie de droite.
Pour crer une page dcoupe en plusieurs cadres, il faut crer :
Une page dfinissant la structure du dcoupage : lignes, colonnes, dimensions, C'est cette
page qui devra tre affiche dans le navigateur pour retrouver le systme de cadres.
Autant de pages Web que de cadres : chaque cadre contient initialement une page, qui peut
changer par la suite au cours de la navigation.
Activit 12 :
1- Dans votre rpertoire de travail, crez trois nouveaux fichiers cadreg.html,
cadred.html et tp12.html.
2- Saisissez les codes HTML donn ci-dessous, dans les diffrents fichiers et ce
conformment au tableau suivant :
Le fichier tp12.html
<HTML>
<HEAD>
<TITLE>Les cadres</TITLE>
</HEAD>
<FRAMESET COLS="250,*">
<FRAME SRC="cadreg.html" NAME="G">
<FRAME SRC="cadred.html" NAME="D">
</FRAMESET>
</HTML>
74
TIC
Le fichier cadred.html
<HTML>
<HEAD>
<TITLE>Accueil</TITLE>
</HEAD>2
<BODY BGCOLOR="#FFF0C0" TEXT="#000000" LINK="#A00000"
VLINK="#600000" ALINK="#A00000">
<H1>Bienvenue</H1>
<P>Choisissez un lien gauche!</P>
</BODY></HTML>
Le fichier cadreg.html
<HTML>
<HEAD>
<TITLE>sommaire de liens</TITLE>
</HEAD>
<BODY BGCOLOR="#E0C0FF" TEXT="#000000" LINK="#804080"
VLINK="#603060" ALINK="#804080">
<H1>Navigation</H1>
<P>
<A HREF="tp4.html" TARGET="D"><B>Les
</BODY>
</HTML>
images</B></A><BR>
tableaux</B></A><BR>
listes</B></A><BR>
titres</B></A><BR>
Figure II-34 : Utilisation des cadres en HTML

75
Constatations :
Info
On observe une page Web divise en deux zones : une premire zone gauche qui
comporte un sommaire de liens hypertextes et une zone droite comportant soit une
page d'accueil, soit la destination de chacun des liens.
La cration d'un systme de cadres compos de n cadres (avec n>=2) ncessite n+1
fichiers HTML spars : les n premiers fichiers HTML pour dfinir le contenu des n
cadres alors que le (n+1) me fichier sert dfinir la structure des cadres et
appeler les autres fichiers.
La balise <FRAMESET COLS="250,*"> permet de dfinir deux cadres verticaux
(rows : horizontaux) de largeur respectivement 250 pixels pour la premire colonne
et le reste de la fentre pour la deuxime colonne (*).
La balise <FRAME SRC="cadreg.html" name ="G"> permet de dfinir un cadre
en spcifiant le fichier contenir : "cadreg.html" et son nom : "G".
Le nom d'un cadre est trs utile lorsqu'il y a des liens hypertextes entre les cadres.
La balise <FRAMESET> .. </FRAMESET> remplace la balise
<BODY></BODY>
Un jeu de cadre peut comporter plusieurs cadres (2 ou plus)
Retenons :
Les pages Web sont crites avec un langage de marquage nomm HTML
(HyperText Markup Language); ce langage permet aussi la description des
contenus et des structures.
Le langage HTML comporte un ensemble de balises (tags). Une balise est un
lment spcial qui indique une action concernant la mise en page, la mise en forme
ou la structure logique d'un document, etc.
Un fichier HTML comporte deux parties; un entte et un corps; l'entte peut
comporter le titre du fichier crer alors que le corps comporte le contenu qui doit
exister dans la page Web crer.
Vous pouvez crer des fichiers HTML avec n'importe quel diteur de texte qui peut
sauvegarder les donnes comme des purs fichiers texte; Exemple le bloc-notes
(Notepad)
Avec HTML, il est possible d'insrer et de paramtrer des images, des tableaux, des
listes, des titres, des liens hypertextes, des formulaires, des cadres, etc.
76
TIC
Le langage JavaScript
I.
Introduction au langage JavaScript :
Activit 1 :
1- Crez un rpertoire appel TpJavaScript. Ce rpertoire sera utilis pour
sauvegarder tous vos fichiers d'activits.
2- Crez un programme HTML qui permet d'afficher le maximum de 3 entiers a, b et c.
3- Sauvegardez ce fichier dans le rpertoire TpJavaScript, sous le nom tpjs1.html
Constatations :
Pour rsoudre ce problme nous avons besoin de dclarer les variables a, b et c (les
variables sur lesquelles porte la comparaison) et une variable max qui recevra la
valeur maximale. Ceci n'est pas permis par le HTML.
De mme on aura besoin d'une structure conditionnelle, qui n'est pas aussi gre par
le langage HTML.
1- Les limites du langage HTML

Le langage HTML prsente les limites suivantes :
Absence des structures de contrle algorithmiques (conditionnelles et itratives).
Un langage sans aucune logique de programmation procdurale (notion de sous
programmes, variables, oprateurs prdfinies ).
Absence de prise en charge dvnements, lexception de lvnement clic.
Aucune communication avec la plate forme d'excution (date systme, type du
navigateur utilis, etc.)
Absence de possibilit d'interfaage avec les bases de donnes.
Absence de mcanisme permettant de rendre le code source inaccessible pour
l'utilisateur final (en HTML, pour pouvoir visualiser le code, il suffit d'utiliser l'option
affichage code source du navigateur).
77
2- Les solutions proposes
Infos
Pour pallier ses limites, deux solutions sont utilises :

L'utilisation des langages ct client (JavaScript ou VbScript) : ce sont des langages qui
permettent d'ajouter des fonctionnalits omises par le langage HTML, (les fonctionnalits
qui concernent la connexion aux bases de donnes et laccessibilit au code ne sont pas
supportes par ces langages). L'avantage majeur de cette solution est le fait de pouvoir
excuter le code crit avec ces langages (JavaScript ou VbScript) sans avoir besoin d'une
installation particulire ; il suffit d'avoir un navigateur web. Le JavaScript est le plus
utilis vu sa compatibilit avec les diffrents navigateurs.
L'utilisation des langages ct serveur tels que ASP, PHP, Cold Fusion. Ces langages
permettent d'avoir les mmes fonctionnalits que les langages ct client plus la
possibilit de se connecter des bases de donnes et le verrouillage du code source.
Pour pouvoir tester un code crit avec un langage ct serveur, il faut utiliser un serveur
d'hbergement compatible avec la technologie choisie, tel que Apache, IIS (Internet
Information Server), Netscape Server, Domino, etc.
Les avantages de lutilisation dun langage de programmation ct

client par rapport un langage de programmation ct serveur :
Excution plus rapide (surtout pour les pages sollicites
frquemment).
Cot dhbrgement moins cher, en effet lexcution dun script
ct serveur fait appel aux ressources matrielles du serveur
d'hbergement.
Certaines fonctionnalits ncessitent un traitement ct client, do
lobligation de faire recours un langage de programmation ct
client, exemple : la date systme du client, la gestion de la fentre
de navigation, etc.
2- Historique du langage JavaScript

JavaScript a t initialement dvelopp par Netscape et s'appelait alors LiveScript. Adopt
la fin de l'anne 1995, par la firme Sun (qui a aussi dvelopp Java), il prit alors son nom de
JavaScript. JavaScript n'est pas propre au navigateur de Netscape. Microsoft l'a d'ailleurs
aussi adopt partir de la version 3 du navigateur Internet Explorer.
JavaScript est un langage de scripts qui, incorpor aux balises HTML, permet d'amliorer la
prsentation et l'interactivit des pages Web.
Ces scripts sont grs et excuts par le navigateur lui-mme sans faire appel aux ressources
du serveur. Ces instructions seront donc traites en direct et surtout sans retard par le
navigateur.
78
TIC
II.
le formalisme de base du JavaScript :
Activit 2 :
1- Crez un fichier et y tapez le code ci-dessous.
2-Enregistrez le fichier sous le nom tpjs2.html.
<HTML>
<HEAD>
<TITLE>Mon premier code JavaScript</TITLE>
</HEAD>
<BODY>
texte en HTML
Dbut du script
<SCRIPT LANGUAGE="JavaScript">
alert("Bienvenue");
//alert permet d'afficher une fentre message.
</SCRIPT>
Fin du script
un autre texte en HTML

</BODY>
</HTML>
Balises HTML
Script
Balises HTML
Constatations :
1- Les dlimiteurs du JavaScript

Dans la logique du langage HTML, il faut signaler au navigateur par une balise, que
ce qui suit est un script et que c'est du JavaScript. C'est la balise
<SCRIPT LANGUAGE="JavaScript">.
De mme, il faudra informer le navigateur de la fin du script. C'est la balise </SCRIPT>.
2- Les commentaires
Tout ce qui est crit entre le // et la fin de la ligne, reprsente un commentaire et il sera
ignor pendant lexcution.
// commentaire
Il est aussi possible d'inclure des commentaires sur plusieurs lignes avec le code
/* commentaire sur
plusieurs lignes */
79
III.
les objets JavaScript :
1- Les objets JavaScript et leurs hirarchies

Les diffrentes fonctionnalits offertes par JavaScript sont accessibles travers un
ensemble d'objets intrinsques prdfinis. Les objets JavaScript peuvent tre rpartis en deux
catgories :
- Les objets d'interface : Ils permettent de grer les aspects visuels des diffrents
contrles graphiques pouvant se trouver au niveau d'une interface. On peut citer comme
exemple : l'objet window, document, button, radio, checkboxetc.
- Les objets des proprits et des fonctions prdfinies : Ils permettent de fournir les
diffrentes ressources requises pour la programmation. Ces objets sont : L'objet string,
math, date, navigator, array, et object.
a- La hirarchie des objets d'interface
JavaScript divise une page web en objets. Il permet d'accder ces objets, d'en retirer des
informations et de les manipuler.
Chaque page Web s'affiche dans une fentre, c'est l'objet fentre (window). Dans chaque
fentre, il y a un document HTML, c'est l'objet document. Autrement dit l'objet window
contient l'objet document, qui lui mme peut contenir d'autres objets. Schmatiquement, on
peut reprsenter une partie de la hirarchie des objets d'interface JavaScript comme suit :
Figure II-35 : Une partie de la hirarchie des objets dinterface en JavaScript

80
TIC
Figure II-36 : Exemple de lhirarchie dobjets dinterface en JavaScript
D'aprs cette image l'objet principal est Fentre qui englobe l'objet document qui
comporte son tour l'objet formulaire qui renferme les 3 lments graphiques
(Bouton radio, Zone de saisie et Bouton). Comme le montre l'hirarchie suivante :
Objet Bouton
Objet Fentre Objet Document Objet Formulaire Objet Bouton Radio
Objet Zone de Saisie
b- Les proprits des objets

Les objets JavaScript ont des proprits qui permettent de dcrire des caractristiques
rattaches ces objets.
Pour accder une proprit, il faudra donner le chemin complet de l'objet en allant du
contenant le plus extrieur de l'objet l'objet rfrenc.
En JavaScript, pour accder aux proprits, on utilise la syntaxe :
nom_de_l'objet.nom_de_la_proprit
Exemple :
Dans le cas des boutons radio, une des proprits est la slection (checked=TRUE) ou la
non-slection (checked=FALSE).
Pour tester la proprit de slection, on peut crire :
if(window.document.form.radio[0].checked)
81
Infos
L'objet window occupe la premire place dans la hirarchie, il est

repris par dfaut par JavaScript et devient donc facultatif.
Pour la syntaxe radio[0], 0 dsigne qu'il s'agit de la premire case
d'option retrouve dans la page Web.
c- Les mthodes des objets
A chaque objet JavaScript, le langage a prvu un ensemble de mthodes (ou fonctions

ddies cet objet) qui lui sont propres.
Par exemple, l'objet document, JavaScript a ddi la mthode "crire dans le
document", c'est la mthode write().
Activit 3 :
1- Crez un fichier HTML, o vous tapez, entre <BODY> et </BODY>, le code suivant :
document.write("votre texte");
x=2 ;
document.write(x);
document.write("le contenu de la variable x est : " + x);
document.write("<br><b> le contenu de la variable x est : </b> ");
document.write("<font color='red'>" + x + "</font>");
2- Sauvegardez le fichier sous le nom tpjs3.html.
Constatations :
L'oprateur "+" : joue le rle de concatnation lorsqu'il est utilis avec la mthode
write.
Il est possible de gnrer du code HTML lors de l'utilisation de la mthode write,
dans ce cas le code sera excut et non pas affich.
Dans le cas o le code HTML contient des guillemets ("), et pour ne pas risquer de
les confondre avec les guillemets (") de write, il sera judicieux de transformer les "
du HTML par apostrophes (').
2- Les diffrents emplacements du code JavaScript

Activit 4 :
L'objectif est de crer une page Web, dont le contenu est dcrit par l'imprime cran
suivant :
82
TIC
Figure II-37 : Les diffrents emplacements du code JavaScript

1- Crez un fichier et y tapez le code suivant :
<HTML>
<HEAD>
<TITLE>Les diffrents emplacements du code JavaScript</TITLE>
function fermer()
{
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
function msg()
{
document.write('ou en passant la souris au-dessus de');
}
</SCRIPT>
vous pouvez fermer cette fentre en cliquant
<A HREF="" onClick="fermer()"> ici </A>
<BR>
msg();
</SCRIPT>
<A HREF="" onMouseOver="fermer()"> cela </A>
</BODY>
</HTML>
83
2- Enregistrez le fichier sous le nom tpjs4.html puis le testez

3- Crez avec le bloc-notes, dans le mme rpertoire, un fichier nomm lib.js
4- Enlevez les deux fonctions fermer() et msg() du fichier tpjs4.html, pour les mettre dans
le fichier lib.js
5- Dans le fichier tpjs4.html, ajoutez la partie entte :
<SCRIPT LANGUAGE="JavaScript" SRC="lib.js"> </SCRIPT>
6- Enregistrez les deux fichiers et testez de nouveau le fichier tpjs4.html.
Constatations :
Il est possible de mettre plusieurs scripts JavaScript dans une mme page Web, que
ce soit dans la partie <BODY> et </BODY> ou <HEAD> et </HEAD>.
Ce dernier emplacement est utilis pour la dclaration des fonctions.
Les diffrentes solutions permettant l'insertion du code JavaScript dans une page
Web sont :
La premire consiste insrer des instructions JavaScript entre
<SCRIPT>....</SCRIPT> dans la partie <BODY> et </BODY> ;
La seconde consiste dclarer des fonctions puis les appeler entre <BODY> et
</BODY> ;
La troisime consiste utiliser un des gestionnaires d'vnements, rattachs
aux balises HTML, pour appeler des fonctions pralablement dfinies.
La dclaration de fonctions JavaScript peut se faire :
Entre <HEAD> et </HEAD>
Entre <BODY> et </BODY>
Dans un fichier texte externe, avec l'extension .js, inclure par la suite dans les
fichiers HTML.
IV.
les Variables :
Activit 5 :
1- Crez un fichier et y tapez le code donn ci-dessous.
2- Enregistrez le fichier sous le nom tpjs5.html, puis le tester.
<HTML>
<HEAD>
<TITLE> Les variables en JavaScript</TITLE>
var x=2;
y=3;
function test()
{ x=22 ;
var y=33;
}
</SCRIPT>
</HEAD>
84
TIC

<BODY>
document.write("La valeur de x est de : " + x +" Alors que la valeur de y est de : " + y);
test();
document.write("<br>La valeur de x est de : " + x +" Alors que la valeur de y est de : "
+ y);
</SCRIPT>
</BODY>
</HTML>
Constatations :
Les variables peuvent se dclarer de deux faons :
soit de faon explicite. On indique JavaScript que ceci est une variable.
La commande qui permet de dclarer une variable est le mot var. Par exemple :
var Numero = 1
var Prenom = "Yassemine"
soit de faon implicite. On crit directement le nom de la variable suivi de la valeur
que l'on lui attribue et JavaScript s'en accommode. Par exemple :
Numero = 1
Prenom = "Yassemine"
La visibilit des variables
Les variables dclares tout au dbut d'un script, en dehors et avant toute fonction,
seront toujours globales, qu'elles soient dclares de faon implicite ou explicite. On
pourra donc les exploiter partout dans le script.
Dans une fonction, une variable dclare par le mot cl var aura une porte limite cette
seule fonction. On ne pourra donc pas l'exploiter ailleurs dans le script. D'ou son nom de
locale. Par contre, toujours dans une fonction, si la variable est dclare contextuellement
(sans utiliser le mot var), sa porte sera globale.
JavaScript utilise 4 types de donnes :

Types
Des nombres
Infos
La dclaration de variables
Description
Tout nombre entier ou avec virgule exemple: 22 ou 3.1416
Toute suite de caractres comprise entre guillemets
Des chaines de caractres
exemple: "suite de caractres"
Des boolens
Les mots true (pour vrai) et false (pour faux)
Le mot null
Mot spcial qui indique l'absence d'une valeur
Notons que contrairement au langage Pascal, Il ne faut pas dclarer le type

de donnes d'une variable.
85
Activit 6 :
1- Crez un fichier et y tapez le code donn ci-dessous.
<HTML>
<BODY>
b = prompt("saisissez une valeur");
if(isNaN(b))
{ alert("conversion impossible");}
else
{
b = Number(b);
b=b+1;
document.write("<BR>la valeur de b est :" + b);
}
</SCRIPT>
</BODY>
</HTML>
2- Enregistrez le fichier sous le nom tpjs5.html puis le tester.
Constatations :
Conversion de types:
La fonction isNaN (is Not a Number) est une fonction boolenne permettant de
vrifier si le contenu d'une variable donne en paramtre est numrique ou non ; elle
retourne la valeur FALSE si la conversion est possible ou la valeur TRUE dans le cas
contraire.
Alert et Prompt sont deux mthodes de l'objet window permettant respectivement
l'affichage et la saisie dans des boites de dialogue.
Infos
Il existe des fonctions de conversion de type : String et Number, qui

permettent de spcifier explicitement la conversion effectuer.
var a = String(21.34); a = "21.34"
var b = Number ("12.56") b = 12.56
la fonction eval : x=eval(variable) value une chane de caractre
sous forme de valeur numrique. On peut stocker dans la chane des
oprations numriques, des oprations de comparaison, des
instructions et mme des fonctions.
Exemple: ch='5 + 10' ; x=eval(ch); x=15;
Il est prfrable, de prcder toute conversion avec la fonction
number, par un test de validit avec la fonction IsNaN.
86
TIC
V.
les oprateurs prdfinis :
Dans les exemples suivants, la valeur initiale de x est toujours gale 11
1- Les oprateurs de calcul

Signe
Nom
Signification
Exemple
Rsultat
Plus
Addition
x+3
14
Moins
Soustraction
x-3
Multipli par
Multiplication
x*2
22
Divis
par division
x/2
5,5
Modulo
reste par la division de
x%5
A la valeur
Affectation
x=5
2- Les oprateurs de comparaison

Signe
Nom
Exemple
Rsultat
==
Egal
x ==11
True
<
Infrieur
x<3
False
<=
Infrieur ou Egal
x<=11
True
>
Suprieur
x >11
False
>=
Suprieur ou Egal
x>=11
True
!=
Diffrent
x!= 11
False
3- Les oprateurs associatifs

Ce sont les oprateurs qui ralisent un calcul dans lequel une variable intervient des deux
cts du signe = (ce sont donc en quelque sorte galement des oprateurs d'attribution).
Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.
Signe
Nom
Signification
Exemple
Rsultat
+=
Plus gal
x=x+y
x+=y
16
-=
Moins gal
x=x-y
x- = y
Multipli gal
x=x*y
x*=y
55
Divis gal
x=x/y
x /= y
2.2
4- Les oprateurs logiques

Aussi appels oprateurs boolens, ces oprateurs servent vrifier deux ou plusieurs
conditions.
87
Signe
Nom
Exemple
&&
ET
(Condition 1) && (Condition 2)
OU
(Condition 1) (Condition 2)
NON
! Condition
5- Les oprateurs d'incrmentation

Ces oprateurs vont augmenter ou diminuer la valeur de la variable d'une unit. Ce qui sera fort
utile, par exemple, pour mettre en place des boucles. Dans les exemples x vaut initialement 3.
Signe
Signification
Exemple
Rsultat
x++ , ++ x
Incrmentation
(x++ est le mme que x=x+1)
y = x++;
z = ++x;
y=3 et x=4
z=5 et x=5
x-- , -- x
Dcrmentation
(x-- est le mme que x=x-1)
y = x--;
z = --x;
y=3 et x=2
z=1 et x=1
VI.
Les Entres/Sorties en JavaScript :
Activit 7 :
Crez un fichier HTML nomm tpjs7.html permettant dchanger deux entiers donns
a et b.
Solution
<HTML>
<HEAD><TITLE>entre sortie</TITLE></HEAD>
<BODY>
<script language="javascript">
var a= Number(window.prompt("a = ",""));
var b= Number(window.prompt("b = ",""));
a=a+b; b=a-b; a=a-b;
alert("aprs la permutation a = "+a);
alert("aprs la permutation b = "+b);
</script>
</BODY>
</HTML>
Constatations :
Dans le langage JavaScript, les oprations d'Entres/Sorties sont effectues comme suit :
L'entre (lecture) : elle est faisable soit avec la mthode prompt de l'objet window,
soit l'aide d'objets graphiques du formulaire HTML.
La sortie : elle est possible en utilisant la mthode write de l'objet document, la
mthode alert de l'objet window ou l'aide d'objets graphiques du formulaire
HTML.
88
TIC

Syntaxes :
L'entre : nom_variable = prompt("texte de la boite d'invite","valeur par dfaut") ;
La sortie : document.write("message" + nom_variable) ;
Alert("message" + nom_variable) ;
Exemples
A=prompt("Donner votre age ","") ;
document.write("Votre moyenne en TIC est = "+M) ;
alert("Votre moyenne en TIC est = "+M) ;
N.B : Les Entres/Sorties l'aide des objets graphiques des formulaires seront traites
ultrieurement.
VII. Les Structures de contrle :

1- Les structures conditionnelles
a- La structure IF
Activit 8 :
1- Ouvrez le fichier tpjs8.html, se trouvant dans votre rpertoire de travail et dont le
contenu est donn ci-dessous :
<HTML>
<HEAD>
<TITLE>la structure IF</TITLE>
</HEAD>
<BODY>
var a= window.prompt("Entrez un premier entier :","");
var b= window.prompt("Entrez un deuxime entier :","");
var c= window.prompt("Entrez un troisime entier :","");
if (Number(a)>Number(b)) m=a; else m=b;
if (Number(c)>Number(m)) m=c;
alert("le maximum de "+a +" , "+b +" et "+c +" est = "+m);
</script>
</BODY>
</HTML>
2- Dduisez le rle du script
89
Constatations :
Dans ce script, on trouve deux structures conditionnelles simples ; l'une est rduite et
l'autre est complte qui sappliquent avec les syntaxes suivantes :
La forme rduite :
if (condition vraie)
{une ou plusieurs instructions;}
Infos
La forme complte :
if (condition vraie)
{instructions1;}
else
{instructions2;}
Dans le cas ou il n'y a qu'une instruction, les accolades sont

facultatives.
Il est possible d'imbriquer des structures conditionnelles (la forme
gnralise)
Une autre syntaxe pour exprimer une condition :
(expression) ? instruction1 : instruction2
Si l'expression entre parenthse est vraie, l'instruction1 est excute.
Si l'expression entre parenthses est fausse, c'est l'instruction2 qui est
excute.
Application
Rcrivez ce mme script en utilisant la structure conditionnelle gnralise.
Solution
<HTML>
<HEAD>
<TITLE>Structure gnralise</TITLE></HEAD>
<BODY>
<script language="JavaScript">
var a= window.prompt("Entrez un entier :","");
var b= window.prompt("Entrez un autre entier :","");
var c= window.prompt("Entrez un dernier entier :","");
if ((Number(a)>Number(b)) && (Number(a)>Number(c))) m=a;else
if ((Number(b)>Number(a)) && (Number(b)>Number(c))) m=b;else m=c;
alert("le maximum de "+a +" , "+b +" et "+c +" est = "+m);
</script>
</BODY>
</HTML>
90
TIC

b- La structure switch
Activit 9 :
Dans votre rpertoire de travail, crez un fichier HTML nomm tpjs9.html, qui comporte
un script permettant de lire le numro d'un mois et la valeur d'une anne puis de
dterminer le nombre de jours de ce mois ; (sans utiliser la structure conditionnelle gnralise).
Solution
<HTML>
<HEAD>
<TITLE>Switch</TITLE>
</HEAD>
<BODY>
var m= window.prompt("Entrez le numro du mois :","");
var a= window.prompt("Entrez la valeur d'anne ","20")
switch(m) {
case "1":case "3": case "5": case "7": case "8": case "10": case "12": j=31;break;
case "4": case "6": case "9": case "11": j=30; break;
case "2": if (a%4==0) j=29; else j=28;
}
alert("le nombre des jours du mois n " + m +" est = " +j);
</script>
</BODY>
</HTML>
Constatation :
Dans le script on utilise une structure permettant d'excuter un bloc d'instructions
selon l'appartenance du rsultat d'une expression un domaine : c'est la structure
switch qui s'applique avec la syntaxe suivante :
switch(expression)
{
case v1:
Bloc1;
break ;
case v2 :
Bloc2;
break;.....
default :
Bloc_n;
break;}
91
Infos
L'instruction break permet de quitter la structure switch aprs

l'excution du bloc convenable.
Lorsque le rsultat de l'expression est diffrent de toutes les valeurs
envisages; C'est le Bloc_n (relatif default) qui sera excut.
La clause default (Bloc_n) est facultative.
2- Les structures itratives

c- La structure For
Activit 10 :
Dans votre rpertoire de travail, crez un fichier HTML nomm tpjs10.html comportant un
script permettant d'afficher tous les nombres parfaits compris entre 2 et 1000 ; sachant qu'un
nombre N est dit parfait s'il est gal la somme de ses diviseurs sauf lui-mme.
Exemple : Pour N=6
La somme des diviseurs de 6 (sauf 6) est 1+2+3= 6, donc 6 est un nombre parfait.
Solution
<HTML>
<HEAD>
<TITLE>La structure FOR</TITLE>
</HEAD>
<BODY>
<script Language="javascript">
for(n=2; n<=1000; n++)
{
s=1;
for(i=2 ;i<=n/2; i++)
if(n%i==0) s+=i;
if (s==n) document.write (n+"<br>");
}
</script>
</BODY>
</HTML>
Constatations :
Dans le fichier tpjs10.html, on a besoin d'utiliser une structure qui permet de rpter
l'excution d'un bloc d'instructions un certain nombre de fois connu d'avance ; c'est la
structure for qui s'applique avec la syntaxe suivante :
92
TIC

for (initialisation ; condition ; progression)
{
instructions;
}
- initialisation : les instructions d'initialisations ncessaires.
- condition : la condition de continuit (bouclage)
- progression : dfinit le pas du compteur (pas forcment +/-1)
d- La structure do ...While
Activit 11 :
Dans votre rpertoire de travail, crez un fichier HTML nomm tpjs11.html, comportant
un script permettant dafficher tous les nombres premiers compris entre deux entiers a et
b (a>1 et a < b et b< 1001). Sachant qu'un nombre N est dit premier, s'il n'est divisible que
par 1 et par lui mme.
Solution
<HTML>
<HEAD><TITLE>La structure DO</TITLE></HEAD>
<BODY>
var a , b;
do{
a=prompt("donner un entier","");
b=prompt("donner un autre entier","");
x=Number(a);
y=Number(b);
} while(x<2 ||x>=y ||y>=1000);
for(n=x;n<=y;n++)
{i=1;
do{
i=i+1;
} while(n%i!=0 && i<=n/2);
if (i>n/2) document.writeln(n);}
</script>
</BODY>
</HTML>
Constatations :
Dans cette activit, on a besoin d'une structure itrative permettant de rpter lexcution
des instructions tant que la condition est vrifie ; c'est la structure do... while qui
s'applique avec la syntaxe suivante :
93
Info
do
{
instructions
} while (condition(s))
L'quivalent en langage Pascal de la structure do...while est repeat ... until

( la seule diffrence que la condition utilise aprs until est
une condition d'arrt alors que la condition utilise aprs while est
une condition de continuit).
e. La structure While
Activit 12 :
Dans votre rpertoire de travail, crez un fichier HTML nomm tpjs12.html qui
comporte un script permettant de calculer le PGCD de deux entiers donns a et b, tels que
(a>1 et b>1), en utilisant la mthode des diffrences.
Solution
<HTML>
<HEAD>
<TITLE> La structure while </TITLE>
</HEAD>
<BODY>
var a , b;
do
{
a=prompt("donner un entier","");
b=prompt("donner un autre entier","");
x=Number(a);
y=Number(b);
} while(x<1||y<1);
while (x!=y)
if (x>y)
x-=y;
else
y-=x;
alert("le pgcd de "+a+" et "+b+" est = " + x);
</script>
</BODY>
</HTML>
94
TIC
Constatation :
Dans le script on a utilis une structure itrative caractrise par un nombre de
rptitions inconnu d'avance et peut tre au moins gal 0 (lorsque A=B) ; c'est la
structure while, qui s'applique avec la syntaxe suivante :
while (condition(s))
{
instructions
}
VIII.
Les fonctions en JavaScript :
Activit 13 :
1- Ouvrez le fichier tpjs13.html, se trouvant dans votre rpertoire de travail et dont le
contenu est donn ci-dessous
2- Dduisez le rle de ce script.
<HTML>
<HEAD>
<TITLE>Les fonction en JavaScript </TITLE>
</HEAD>
<BODY>
function pgcd(a,b)
{
while (a!=b)
{
if (a>b) a-=b;else b-=a;
}
return a;
}
var n , m;
do
{
n=prompt("donnez un entier","");
m=prompt("donnez un autre entier","");
} while(n<1||m<1);
var k=pgcd(n,m);
document.write("le PGCD de "+n+" et "+m+" = "+k);
</script>
</BODY>
</HTML>
95
Constatations :
La dfinition de la fonction est faite dans la partie entte, son appel est fait dans la
partie corps
En JavaScript, il existe deux types de fonctions :
Les fonctions prdfinies en JavaScript; on les appelle "mthodes". Elles sont
associes un objet bien particulier comme c'tait le cas de la mthode Alert()
avec l'objet window.
Les fonctions dclares par le programmeur selon les besoins de l'application.
Pour dclarer ou dfinir une fonction, on utilise la syntaxe suivante :
function nom_de_la_fonction(arguments)
{... code des instructions ...
[ return nomvaraible]
}
Infos
La mention des arguments est facultative mais dans ce cas les

parenthses doivent rester. C'est d'ailleurs grce ces parenthses
que l'interprteur JavaScript distingue les variables des fonctions.
Une variable dclare dans une fonction par le mot cl var aura une
porte limite cette fonction contrairement une variable dclare
contextuellement (sans utiliser le mot var), qui aura une porte
globale.
Il est possible de dfinir des fonctions sans l'utilisation de la clause
return (sans retour) : on retrouve ainsi l'quivalent d'une
procdure.
Il est possible de dclarer une fonction dans la partie entte de la
page Web ; C'est--dire entre <HEAD> et </ HEAD>.
IX.
La gestion des vnements en JavaScript :
Le JavaScript offre la possibilit d'utiliser plusieurs vnements, contrairement au HTML

qui se contente de l'unique vnement clic.
La programmation des vnements se fait par l'association chaque vnement une action
travers la syntaxe suivante :
< nombalise OnEvnement ="fonction()">
O OnEvnement reprsente un attribut, associ une balise HTML (nombalise), destin
la gestion des vnements.
96
TIC
Activit 14 :
1- Crez un fichier tpjs14.html, permettant de calculer le cube dun entier saisi dans une
zone de texte en cliquant sur un bouton ou un lien hypertexte, conformment
limprime cran ci-dessous :
Figure II -36 Utilisation de lvnement OnClick
<HTML>
<HEAD>
<TITLE>On click</TITLE>
function cube()
{
var r=document.formulaire.saisie.value*
document.formulaire.saisie.value*document.formulaire.saisie.value;
alert("Le cube de " + document.formulaire.saisie.value + " = " + r);
}
</script>
</HEAD>
<BODY>
<FORM name="formulaire" >
<INPUT type="text" name="saisie" size="3" >
<INPUT type="button" value="Calculez le cube" onClick="cube()">
<A href="#" onclick="cube()">Calculez le cube</A>
</FORM>
</BODY>
</HTML>
97
Constatations :
1- onclick
Info
Lorsqu'on clique sur le bouton calculer le cube il s'affichera le cube du nombre

existant dans la zone de saisie; donc on peut excuter la fonction cube l'aide d'un clic
(l'vnement Onclick)
L'vnement Onclick peut tre utlis avec les boutons (<INPUT type="button">),
et les liens hypertextes (<A href>).
Il est possible de programmer lvnement OnClick avec les objets de

types : case cocher (<INPUT type = "checkbox">), case doptions
(<INPUT type = "radio">) et zone de liste (<SELECT>).
Activit 15 :
1- Crez un fichier tpjs15.html, compos de deux zones de saisie, et offrant les
fonctionnalits suivantes:
- Lorsque le curseur se trouve dans la pemire zone le message : Saisissez votre nom et
prnom est affich dans la barre dtat.
- Lorsque le curseur quitte la premire zone : le contenu de la barre dtat se transforme
en *** et le texte saisi est mis en majuscule.
- Au fur et mesure que le texte est saisi dans la premire zone, la deuxime zone
indique le nombre de caractres taps
Figure II -37 Utilisation des vnements OnFocus, OnChange, OnKeyUp et OnBlur
98
TIC

<HTML>
<HEAD><TITLE> onfocus***onchange***onblur***onkeyup</TITLE>
function majuscule()
{
np=document.f1.znp.value;
npmaj =np.toUpperCase();
document.f1.znp.value=npmaj;
}
function affbarre(msg)
{ window.status=msg; }
function longueur()
{
document.f1.nc.value=np.length+1;
}
</script>
</HEAD>
<BODY>
<FORM name="f1">
NOM ET PRENOM : <INPUT type="text" name="znp" OnFocus="affbarre('Saisissez
votre nom et prnom')" onchange="majuscule()" onblur="affbarre('***')"
onkeyup="longueur()">
Nombre de caractres taps :<INPUT type="text" name="nc" size="3" value="0">
</FORM>
</BODY>
</HTML>
Constatations :
2. OnFocus
L'vnement onFocus survient lorsqu'un champ de saisie est prt recevoir ce que
l'utilisateur l'intention de taper au clavier (c'est dire quand la zone a le focus).
3. OnBlur
Info
L'vnement onBlur a lieu lorsqu'un champ de formulaire perd le focus. Cela se

produit quand l'utilisateur ayant termin la saisie qu'il effectuait dans une case, et
clique en dehors du champ ou utilise la touche "Tab" pour passer un autre champ.
Les vnements OnFocus et OnBlur sutilisent aussi avec les

balises : <INPUT type ="checkbox">, <INPUT type = "RADIO">,
<INPUT type ="button">, <TEXTAREA> et <SELECT>
99
4. OnChange
Info
L'vnement OnChange ressemble l'vnement OnBlur mais avec une petite

diffrence. Non seulement la zone de texte doit avoir perdu le focus mais aussi son contenu doit avoir t modifi par l'utilisateur.
L vnement OnChange sutilise aussi avec les balises <TEXTAREA>

et <SELECT>.
5. OnKeyUP
Info
L'vnement OnKeyUp est dclench au cours de la saisi dune zone de de texte lorsque
lutilisateur relche une touche.
Lvnement OnKeyUp sutilise aussi avec la balise <TEXTAREA>.
Activit 16 :
1- Crez un fichier tpjs16.html,compos dune image (e1.gif) et un objet texte(MANUEL
TIC) avec les fonctionnalits suivantes :
- Au chargement de la page un mesage de bienvenue est affich, de mme un message
dau revoir est affich lorsquon la quitte.
- Deux messages sont affichs lorsquon survole et on quitte le lien hypertexte
(MANUEL TIC)
- Lorsque limage e1.gif est survole, elle est remplace par une autre image e2.gif.
Figure II -38 Utilisation des vnements OnLoad, OnUnLoad, OnMouseOver

et OnMouseOut
100
TIC

<HTML>
<HEAD>
<SCRIPT LANGUAGE='Javascript'>
function bienvenue()
{alert("Bienvenue cette page");}
function au_revoir()
{alert("Au revoir");}
function activer()
{document.images["img1"].src="E2.gif";}
function desactiver()
{document.images["img1"].src=" E1.gif";}
</SCRIPT>
<BODY OnLoad="bienvenue();" OnUnload="au_revoir();">
<A href ="#" OnMouseOver="activer();" OnMouseOut ="desactiver();">
<IMG src ="E1.gif" name="img1" width=100 height=50 border=0>
</A>
<P><A href ="#" OnMouseOver="alert('BONNE CHANCE')"
OnMouseOut="alert('BON TRAVAIL')">MANUEL TIC</A>
</P>
</BODY>
</HTML>
6. OnLoad et onUnLoad
L'vnement OnLoad survient lorsque la page a fini de se charger. A l'inverse,
OnUnLoad survient lorsque l'utilisateur quitte la page.
Les vnements onLoad et onUnload sont utiliss sous forme d'attributs de la balise
<BODY> ou <FRAMESET>.
7. OnMouseOver et OnMouseOut
L'vnement OnMouseOver se produit lorsque le pointeur de la souris passe au
dessus d'un lien ou d'une image sans cliquer. L'vnement OnMouseOut,
gnralement associ un OnMouseOver, se produit lorsque le pointeur quitte la zone
sensible (lien ou image).
X. Les formulaires en JavaScript :

1- Le contrle zone de texte :
Activit 17 :
On veut crer un fichier HTML nomm tpjs17.html comportant un script qui
permet de lire un entier dans une zone de saisie puis d'afficher son carr dans une autre
zone.
101
Solution
<HTML>
<HEAD>
<TITLE> zone de saisie</TITLE>
<SCRIPT language ="JavaScript">
function afficher()
{
var N =document. f2.input.value;
document.f2.output.value =N*N;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name ="f2">
L'entier donn :
<INPUT type ="text" name ="input" value ="" >
<BR> <BR>
<INPUT type ="button" name ="bouton" value ="Calculer le carr"
onClick="afficher()">
<BR>
<BR>
L'entier rsultat : <INPUT type ="text" name ="output" value ="" >
</FORM>
</BODY>
</HTML>
Constatations :
Info
On peut affecter le contenu d'une zone de saisie une variable l'aide de la syntaxe
suivante : Nomvariable= document.nomformulaire.nomzonedesaisie.value ;
Comme on peut modifier la valeur d'une zone de saisie avec la syntaxe suivante :
document.nomformulaire.nomzonedesaisie.value=expression ;
Avec :
nomformulaire : le nom du formulaire (lattribut name de <FORM>)
nomzonedesaisie : le nom d une zone de texte ( lattribut name de <INPUT type = "text">
Les objets zones de texte cryptes (<INPUT type = "PASSWORD" >) et

zones de texte multilignes (<TEXTEREA >) sont traites en JavaScript
de la mme faon que les zones de saisie (<INPUT type = "text" >)
102
TIC
2- Les boutons radio

Activit 18 :
Ralisez un fichier HTML nomm tpjs18.html qui comporte un script JavaScript
permettant de donner en entre le signe du descriminant d'une quation de second degr
pour afficher le nombre de solutions possibles.
Solution
<HTML>
<HEAD>
<TITLE>Bouton radio</TITLE>
<SCRIPT language="JavaScript">
function choisir()
{
if (document.f3.choix[0].checked)
{alert("Il y a : " + document.f3.choix[0].value+" solutions") };
{alert("Il y a :" + document.f3.choix[1].value+" solution") };
{alert("Il y a : " + document.f3.choix[2].value+" solution") };
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Le signe du descriminant d'une quation de second degr</H3>
<FORM NAME="f3">
<INPUT TYPE="radio" NAME="choix" VALUE="2">Strictement positif<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="1">Nul<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="0">Strictement Ngatif<BR>
<INPUT TYPE="button"NAME="but" VALUE="Le nombre des solutions relles?"
onClick="choisir()">
</FORM>
</BODY>
</HTML>
Constatations :
Pour vrifier ltat dune case doption (coche ou non), on utilise la proprit
checked qu'on peut affecter une variable boolenne, laide de la syntaxe
suivante :
nomvariable = document.nomf.nomcase[indice].checked
103
Infos
On peut rcuprer la valeur dun bouton radio laide de la proprit value, en

utilisant la syntaxe suivante :
nomvariable = document.nomf.nomcase[indice].value
On peut rcuprer le nombre doption dans un groupe de cases doptions laide de
la proprit length, en utilisant la syntaxe suivante :
nomvariable = document.nomf.nomcase.length
avec :
nomf : le nom du formulaire
nomcase : le nom du groupe cases d'options
indice : l'indice de la case au niveau du groupe.
Les boutons radio sont utiliss pour slectionner un seul choix, parmi
un ensemble de propositions.
Lindice des boutons radio commence partir de la valeur 0.
3- Les boutons case cocher (checkbox)

Activit 19 :
Ralisez un fichier HTML nomm tpjs19.html qui comporte un script JavaScript permettant
un utilisateur de slectionner les nombres premiers parmi la liste des nombres suivants :
209, 223, 517, 647, 751.
<HTML>
<HEAD>
<TITLE>Checkbox</TITLE>
function reponse()
{
if ((document.f4.check1.checked) == false &&
(document.f4.check2.checked) == true &&
(document.f4.check3.checked) == false &&
(document.f4.check4.checked) == true &&
document.f4.check5.checked)==true)
{ alert("C'est la bonne rponse! ")
}
else
{alert("Dsol, continuez chercher.")}
}
104
TIC

</SCRIPT>
</HEAD>
<BODY>
<h3>Quels sont les nombres premiers parmi ces cinq entiers:</h3>
<FORM name="f4">
<INPUT type ="checkbox" name ="check1" value ="1">209 : <BR>
<INPUT type ="checkbox" name="check2" value ="2">223 : <BR>
<INPUT type ="button" name ="but" value ="Rponse" onClick="reponse()">
</FORM>
</BODY>
</HTML>
Constatation :
contrairement aux boutons radio, les cases cocher sont utilises pour slectionner
un ou plusieurs choix
Pour vrifier si une case est coche ou non, on utilise syntaxe :
nomvariable = document.nomf.nomcase.checked
Pour rcuprer la valeur dune case cocher, on utilise syntaxe :
nomvariable = document.nomf.nomcase.Value
avec :
nomf : le nom du formulaire.
nomcase : le nom de la case cocher d'options.
4 - Liste de slection
Activit 20 :
Ralisez un fichier HTML nomm tpjs20.html qui comporte un script JavaScript
permettant de crer un carnet dadresses Email au format Web. Pour se faire, on
utilisera 3 boutons, permettant respectivement lajout, la suppression et la recherche
dun contact, conformment limprime cran suivant :
105
Figure II-38 : Un carnet d'adresse E-mail en JavaScript

<HTML>
<HEAD>
<TITLE>CARNET D'ADRESSES</TITLE>
<script language = "javascript">
function ajout()
{
adr=document.f1.znp.value;
var taille = document.f1.carnet.options.length;
var nouveau = true;
if (taille != 0){
for (i = 0; i < taille; i++){
elt = document.f1.carnet.options[i].text;
if (elt == np) {
nouveau = false;
alert("contact dj existant");
break;
}
106
TIC

}
}
if (nouveau)
{
nelt= new Option(np, adr);
document.f1.carnet.options[taille] = nelt;
}
}
//*****************************************
function sup()
{
sel=document.f1.carnet.options.selectedIndex;
if (sel == -1)
alert("veuillez slectionner un lment SVP");
else { document.f1.carnet.options[sel] = null; }
}
//*****************************************
function adr()
{
sel=document.f1.carnet.options.selectedIndex;
if (sel == -1)
alert("veuillez slectionner un lment SVP ");
else {
np=document.f1.carnet.options[sel].text;
adr=document.f1.carnet.options[sel].value;
alert("L'adresse mail de " + np + " est :"+adr);
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV align="center">
<FONT face="Arial" color="#3333FF" size="4">CARNET D'ADRESSES </FONT>
</DIV>
<FORM name ="f1" >
Nom et Prnom :<input name="znp" type="text" >
<BR>Adresse E-mail :<input name="zadr" type="text" >
<TABLE> <TR>
<TD> <INPUT type="button" onClick="ajout()" value="Ajouter"></TD>
<TD> <INPUT type="button" onClick="sup()" value="Supprimer"></TD>
<TD> <INPUT type="button" onClick="adr()" value="Retrouver Adresse mail"></TD>
</TR></TABLE>
<SELECT name="carnet" size="5">
</SELECT>
</FORM>
</BODY></HTML>
107
Constatations :
En JavaScript, la gestion des listes droulantes se fait travers un objet options
(un tableau contenant les diffrents lments de la liste).On y accde travers la syntaxe :
document.nomf.nomliste.options
avec :
nomf : le nom du formulaire ( lattribut name de <FORM>)
nomliste : le nom de la liste droulante ( lattribut name de <SELECT>)
Les proprits JavaScript de l'objet options sont :
length : retourne le nombre d'lments d'une liste droulante.
selectedIndex : permet de retourner l'indice de l'lment slectionn dans une liste
droulante slection unique.
NB1 : L'indice d'une liste droulante commence partir de 0.
NB2 : Pour une liste droulante slection multiple, selectedIndex retourne l'indice,
uniquement, du premier lment slectionn. Dans de tel cas, il serai plus
judicieux d'utiliser les proprits des lments de l'objet options.
Les proprits JavaScript des lments d'un objet options sont :
selected : renvoie true si l'option est slectionne, false sinon.
text : renvoie le texte de l'lment slectionn.
value : renvoie la valeur de l'lment slectionn.
L'ajout d'une nouvelle option, se fait travers la syntaxe :
nomvariable= new Option(texte, valeur);
document.nomf.nomliste.options[taille] = nomvariable;
avec :
nomliste : le nom de la liste droulante.
texte : le texte de l'lment ajouter.
valeur : la valeur de l'lment ajouter.
taille : la position de l'lment ajouter dans la liste.
La suppression d'une option, se fait travers la syntaxe :
document. nomf.nomliste.options[i] = null;
avec :
nomliste : le nom de la liste droulante.
i : la position de l'lment supprimer de la liste.
108
TIC

Application :
Crez un fichier HTML qui permet de remplir un formulaire par le nom, le prnom, l'adresse
Email, l' ge et les deux boutons de confirmation et d'annulation, le contrle de la saisie est
obligatoire :
Le nom, le prnom : doivent tre non vide.
L'adresse Email doit tre non vide et comportant le caractre @
L'age doit tre un nombre >0
La validation doit appeler le fichier "sauvegarder.HTML" (existant dans le mme rprtoire
que le formulaire), qui affichera le message " Merci pour votre visite".
<HTML>
<HEAD>
<TITLE>Contrle saisie de formulaire</TITLE>
<script language ="JavaScript">
function verif_f()
{ if(document.f.nom.value == "") {
alert("Veuillez entrer votre nom!");
return false;}
if(document.f.prnom.value == "") {
alert("Veuillez entrer votre prnom!");
return false; }
if(document.f.courriel.value == "") {
alert("Veuillez entrer votre adresse lectronique!");
return false; }
if(document.f.courriel.value.indexOf('@') == -1) {
alert("Ce n'est pas une adresse lectronique!");
return false; }
var chkZ = 1;
for(i=0;i<document.f.age.value.length;++i)
if(document.f.age.value.charAt(i) < "0"
|| document.f.age.value.charAt(i) > "9")
chkZ = -1;
if(chkZ == -1) { alert("Cette information n'est pas un nombre!");
return false; }}
</SCRIPT></HEAD>
<BODY >
<H2>formulaire avec contrle</H2>
<FORM name="f" action="sauvegarder.HTML" method="post" onSubmit="return
verif_f()">
Nom : <INPUT type="text" size="40" name="nom">
Prnom : <INPUT type="text" size="40" name="prnom">
Courriel : <INPUT type="text" size="40" name="courriel">
ge : <INPUT type="text" size="40" name="age">
<INPUT type="submit" value="Envoyer"><input type="reset" value="Interrompre">
</FORM></BODY></HTML>
109
Retenons :
JavaScript est un langage de programmation ct client permettant damliorer linteractivit
des pages Web, en faisant recours des structures de contrle et des vnements.
Les programmes en JavaScript sont nots directement dans le fichier HTML ou dans des
fichiers spars. Ils sont interprts en temps rel par le navigateur Web.
Un script peut exister soit dans l'entte du fichier HTML et/ou entre les balises <BODY>
et </BODY>.
Le script d'une fonction est souvent dfini dans l'entte entre les balises
<HEAD> et </HEAD>.
Le langage Javascript divise une page Web en objets, et pour chaque objet il y a des
proprits et des mthodes.
Contrairement au langage HTML ; JavaScript offre la possibilit d'utiliser plusieurs

vnements.
La programmation des vnements se fait travers lutilisation dattributs, dsignant des

vnements, au niveau des balises HTML.
JavaScript est dot de toutes les ressources ncessaires pour grer les diffrents objets
graphiques des formulaires HTML.
110
TIC
Lecture
Ecrit par Olivier Hondermarck pour Tout JavaScript.com La confusion est grande dans les esprits entre JavaScript et Java. La plupart d'entre nous
ne connait pas vraiment les diffrences fondamentales entre ces 2 langages. On peut dire
que le seul lment qui les rapprochent se trouve dans le nom.
Je vais donc essayer de lister les principales diffrences.
1 - A quoi servent-ils ?
JavaScript est un langage de scripts dvelopp l'origine par Netscape et destin
uniquement s'intgrer dans les pages HTML.
Java est un langage dvelopp par Sun. Il peut tre intgr sous forme d'applet des
pages web, mais il permet galement de dvelopper des applications ou des logiciels
compltement indpendants du net.
2 - Comment fonctionnent-ils ?
JavaScript est un langage interprt. C'est--dire que le code source du script est celui
qui va servir son xecution. Le navigateur lit le code source intgr aux pages, dans le
langage HTML, et interprte ce code pour en donner une excution. Chaque navigateur
a sa propre interprtation du script.
Java est un langage compil. C'est d'ailleurs le cas pour la plupart des langages de
programmation. Le dveloppeur conoit un programme et le code. Le code source est
ensuite compil en langage illisible pour nous, mais qui sera excut par la machine
virtuelle Java. La machine virtuelle est intgre votre navigateur. Dans le code HTML
des pages, est cod un appel une applet Java. L'applet Java, compile par le dveloppeur, est tlcharge puis excute.
3 - Interprt et compil, les implications
Le code source JavaScript est interprt. En distribuant un javascript, il est impossible
de cacher le code source puisque le code source est directement utilis pour l'excution.
Avec JavaScript, il est ABSOLUMENT IMPOSSIBLE de cacher vos visiteurs les
secrets de vos si belles pages.
Le code compil de Java, souvent assez lourd tlcharger est illisible. Le code source
est protg. (Mme si on me signale l'existence de logiciels destins dcompiler)
En Java, on parle d'applets, pour dsigner de petites applications. En JavaScript, on parle
plutt de scripts, qui impliquent plus l'ide de code source lisible.
111
Exercices HTML
Exercices JavaScript
Exercice 1
Ecrire le code d'un fichier HTML, nomm calculatrice.html, permettant de crer une
calculatrice avec les 4 oprateurs de base et d'afficher le rsultat dans une boite
d'information.
Prvoir les diffrentes routines de contrle ncessaires au bon droulement du programme.
Exercice 2
1- Ecrire un script permettant de gnrer un tableau compos de 7 cellules avec les caractristiques suivantes :
- Chaque cellule possde une couleur de fond, soit rouge ou bleu d'une faon alternative, en commenant par le rouge.
- Le contenu de chaque cellule est la chane de caractres TIC crite dans
chaque cellule avec une dimension de police diffrente allant de 1 7.
2- Transformer ce script en une fonction appeler entre <BOY> et </BOY>.
Exercice 3
Vous disposez de 4 images avec les noms respectifs I1.jpg, I2.jpg, I3.jpg et I4.jpg
enregistres dans le mme rpertoire.
On vous demande de donner le code d'un document HTML permettant d'afficher les 4
images sous forme d'une matrice compose de 2 lignes et 2 colonnes (de gauche droite,
1re ligne : I1 I2, 2me ligne: I3,I4) puis de programmer les fonctionnalits suivantes :
- Si l'utilisateur passe le curseur au-dessus de l'image I1, vous remplacez l'image I2
par l'image I4. De mme, si l'image I2 est survole par le curseur de la souris vous
substituez l'image I1 par l'image I3.
- Si l'utilisateur clic sur l'image I3, une rotation droite des diffrentes images est
effectue (remplacer l'image I1 par I3, I2 par I1, I2 par I1, I4 par I2 et I3 par I4).
Exercice 4
On se propose de dvelopper un formulaire HTML compos d'une zone de texte, de trois
objets liste droulante et d'un bouton de type submit conformment l'imprime cran
suivant :
112
TIC
1- La zone de texte sera cre avec du code HTML, alors que les trois listes seront
gnres avec du code JavaScript, en utilisant trois variables visibilit globale, qu'il
faut dclarer au pralable, et qui contiennent respectivement les numros des jours d'un
mois (de 1 31), les mois de l'anne (de Janvier Dcembre) et les annes (de 1975
jusqu' cette anne).
Donnez le code HTML et JavaScript permettant de trouver cette interface.
NB1 : on vous demande d'avoir une programmation modulaire.
NB2 : un clic sur le bouton envoyer devra faire appel un fichier, se trouvant dans le
mme rpertoire que le formulaire et ayant comme nom sauvegarder.html.
Exercice 5
Donnez le code d'un fichier HTML compos d'une zone de texte et de deux boutons
intituls respectivement Dbut et Arrt qui permettent de lancer ou d'arrter un
chronomtre au niveau de la zone de texte, conformment l'image cran ci-dessous.
Exercice 6
1- Ecrivez un programme JavaScript permettant d'ouvrir une fentre du navigateur
lorsqu'un bouton est activ. La fentre ouvrir contient un bouton permettant de la
fermer lorsqu'on clique dessus.
113
1- Rcrivez le programme de la 1re question, afin d'implmenter la fonctionnalit suivante :

sans intervention de l'utilisateur, la nouvelle fentre se ferme de faon automatique aprs 4
secondes. En cliquant sur le bouton, l'utilisateur interrompt prmaturment le compteur et
ferme la fentre. Avec ce systme, on est certain que la nouvelle fentre sera ferme.
Exercice 7
Reprenez le formulaire livre d'or de l'exercice numro 4 de la partie HTML, afin d' y
ajouter une fonction JavaScript contrle(), appeler suite au clic sur le bouton valider et
permettant de vrifier la validit des donnes saisies en appliquant les rgles suivantes :
- Le champ nom et prnom est un champ saisie obligatoire.
- Le champ nom et prnom ne doit pas commencer par un chiffre.
- Les proprits genre, navigateur(s) utilis(s) et remarques ou suggestions doivent tre
dfinies.
- Pour la proprit pays, la 1re valeur n'est pas valide.
La fonction contrle() doit permettre de bloquer l'appel du fichier valider.html en cas o une
des rgles de validit n'est pas vrifie .
1- Donnez une 1re version de la fonction contrle()qui devra afficher un message dcrivant
la 1re erreur rencontre.
2- Donnez une 2me version de la fonction contrle() qui doit afficher un message rcapitulatif
de toutes les erreurs rencontres.
Exercice 8
1- Ecrivez le code d'un fichier HTML, nomm album.html, permettant de crer un album
compos de huit photos timbres. Chaque clic sur une image vignette ouvre une nouvelle
fentre contenant la mme image agrandie. Cette dernire fentre se ferme automatiquement
aprs 15 secondes.
114
TIC

NB1 : On suppose que toutes les images sont enregistres dans un rpertoire nomm
album photos, se trouvant dans le mme rpertoire que le fichier album.html.
2- Ecrivez le code d'un fichier HTML, nomm dfilement.html, permettant de sauvegarder
la liste des images du rpertoire album photos dans un tableau JavaScript.
Les boutons suivant et prcdent permettent respectivement de passer l'image suivante
et prcdente dans la liste.
Exercice 9
a) Ecrivez le code d'un fichier HTML permettant l'affichage de la date systme.

b) Afficher la date ainsi gnre avec la police comic sans ms, taille 14 et la couleur bleu.
2-
a) Ecrivez le code d'un fichier HTML permettant l'affichage de lheure systme.

b) Rafrachir l'heure ainsi gnre toutes les secondes.
115
Exercice 10
Ecrivez le code d'un fichier HTML, nomm prix.html, permettant de prsenter un formulaire
de recherche du prix de vente d'un certain nombre d'articles, dont la description est donne
ci-dessous :
Pour un tableau de 3 lignes et 3 colonnes :
Tarif
T.Small
T.Mdium
T.Large
Chemises
1200
1250
1300
Polos
800
850
900
T-shirts
500
550
600
Pour exploiter ces donnes et dvelopper la fonctionnalit de la recherche du prix, on vous

demande d'utiliser un tableau 2 dimensions en JavaScript.
116
Partie c
Pages Web dynamiques

Objectif :
- Crer des pages Web dynamiques en utilisant le langage Php
Plan :
I - Introduction
1. Qu'est ce qu'un Site Web dynamique ?
2. Principe de fonctionnement
II - Le langage Php
1. Prsentation
2. Environnement de dveloppement
3. Syntaxe de base du langage Php
4. Les structures de donnes
5. Les entres sorties
6. Les structures de contrle
7. Les types de donnes structurs en Php
8. Les fonctions en Php
9. Utiliser MySQL avec Php
Exercices
Lecture
Pages Web dynamiques

I.
Introduction
1- Qu'est ce qu'un site Web dynamique ?

Un site Web dynamique est un site dont les pages peuvent tre gnres " la vole"
(dynamiquement) en fonction d'une demande d'un utilisateur.
Le contenu et la prsentation des pages peuvent tre grs indpendamment. Ainsi, on
dfint un modle de prsentation dans lequel peut s'afficher "dynamiquement" un contenu,
extrait le plus souvent d'une base de donnes.
Les sites d' actualit en direct, les sites de commerce lectronique, les forums ou les outils
de gestion de contenu sont des exemples de sites Web dynamiques.
La construction de sites dynamiques repose sur des technologies de scripts ct serveur
telles que Php, ASP ou ColdFusion. Dans le monde des logiciels libres, il s'agit souvent de
Php pour le langage de script et MySQL pour la base de donnes.
2- Principe de fonctionnement
Le schma suivant prsente ce qui se passe lorsque vous consultez une page html dite statique :
Figure II-38 : Consultation d'une page Web statique

- Votre navigateur envoie l'adresse URL (Uniform Ressource Locator) que vous avez tape.
- Le serveur Web est un "ordinateur" prsent sur l'Internet et qui hberge la page que vous
demandez. Sur ce serveur on trouve un logiciel serveur Web comme Apache, logiciel apte
traiter les requtes HTTP que vous envoyez lorsque vous demandez une page Web.
118
TIC

Ce serveur va donc chercher le fichier demand dans son arborescence et renvoie votre
navigateur la page HTML
- Votre navigateur interprte les diffrents langages se trouvant dans ce fichier
(HTML, JavaScript, CSS, etc.) et affiche la page.
Maintenant, voyons ce qui se passe lorsque votre page HTML contient du code Php :
Figure II-39 : Consultation d'une page Web dynamique
- Php continue parser la page, puis retourne le fichier dpourvu du code Php au
serveur Web.
- Le serveur Web renvoie un fichier ne contenant plus de Php, donc seulement du HTML
au navigateur qui l'interprte et l'affiche.
Vous remarquez donc que Php s'excute ct serveur. Il n'y a plus aucune trace du code
Php lorsque vous regardez le code source de la page dans votre navigateur.
119
II.
Le langage Php
1- Prsentation
Il a t cr en 1994 par Rasmus Lerdorf pour les besoins des pages web personnelles (livre
d'or, compteurs, etc.). A l'poque, Php signifiait Personnal Home Page.
Afin de permettre aux internautes de bnficier et de participer au dveloppement de cette
solution, Rasmus a dcid de mettre en ligne la version 1.0 de Php. A la surprise de son
auteur, Php est devenu rapidement trs populaire. Consquence : En 1997, Php devient un
projet collectif et son interprteur est rcrit par Zeev Suraski et Andi Gutmans pour
donner la version 3 qui s'appelle dsormais Php: Hypertext Preprocessor(acronyme
rcursif).
La version actuelle de PHP est la version 5.1
Les principaux atouts du langage Php sont :
- La gratuit et la disponibilit du code source ;
- Multi plate-formes : on retrouve des versions de PHP compatibles avec la majorit des
plates-formes, en occurrence Windows et Linux;
- La simplicit d'interfaage avec des bases de donnes (de nombreux SGBD sont
supports, mais le plus utilis avec ce langage est MySQL, un SGBD gratuit disponible
sur les plateformes Linux, et Windows) ;
- La disponibilit de plusieurs applications Web prtes l'emploi, dveloppes base de
Php, tel que : PHPNuke, SPIP, PHPSlash, permettant de monter facilement et gratuitement
des portails Web ;
- L'intgration au sein de nombreux serveurs Web (Apache, Microsoft IIS, etc.).
2- Environnement de dveloppement
Infos
Pour le dveloppement d'un site Web dynamique, il faut installer en local un serveur Web,
qui servira pour tester les scripts dvelopps et un SGBD pour tester la connexion la base
de donnes utilise et tester les requtes de manipulation des donnes de la base.
Vous pourrez programmer en Php sans avoir besoin d'tre connect Internet, sinon vous
serez amen envoyer les fichiers vers le serveur de l'hbergeur.
Il existe un utilitaire trs pratique (EasyPhP) qui installera Apache, Php, MySQL et aussi
phpMyAdmin (une interface conviviale gratuite pour la gestion des bases de donnes
MySQL).
Il est possible d'installer sparment les logiciels Php, Apache,

MySQL et PhpMyadmin, qui peuvent tre tlchargs partir des
adresses suivantes :
120
TIC
Infos
Php : http://www.Php.net
Apache : http://www.apache.org
MySQL : http://www.mysql.org
PhpMyadmin : http://www.phpMyadmin.net
Vous pouvez utiliser d'autres utilitaires regroupant Php, MySQL et
Apache, nous citons :
AppServ : http://academic.cmri.ac.th/appserv/
Foxserv : http://www.foxserv.net/portal.php
WAMP : http://www.wampserver.com
BigApache server : http://www.bigapache.org
La plupart des distributions Linux installent par dfaut Apache, Php
et MySQL.
Activit 1 :
1- Tlchargez et installez easyphp (www.easyphp.org).
2- Crez un rpertoire de travail tpphp sous le rpertoire racine du serveur Web apache
(par dfaut, sous Windows, c:\program files\easyphp\www)
3- Dmarrez EasyPhp
4- A l'aide du menu contextuel de l'icne easyphp, testez les diffrentes fonctionnalits
offertes.
5- Testez le bon fonctionnement du serveur Web en accdant l'adresse : http://localhost
ou http://127.0.0.1 ou encore http://nom machine o nom machine est le nom de votre
machine.
Constatations :
Figure II-40 : Accs aux fonctionnalits du logiciel EasyPhp

L'option configuration permet de configurer les diverses composantes d'Easyphp
L'option Web local permet daccder la racine du serveur Web (contenu de
C:\Program Files\EasyPHP\www)
Les options arrter et redmarrer permettent respectivement darrter et de relancer
les serveurs.
Loption fichierLog permet douvrir les diffrents fichiers de configuration de PHP,
MySql, Apache et EasyPhp
Loption quitter permet darrter les diffrents serveurs puis quitter EasyPhp .
121
3- Syntaxe de base du langage Php

Activit 2 :
1- Lancez EasyPhp
2- Crez un fichier texte avec l'extension php (tpphp1.php) sous le rpertoire de travail
cre dans l'activit1.
3- Editez ce fichier et insrez le code suivant :
<HTML>
<HEAD>
<TITLE>Ma premire page en Php</TITLE >
</HEAD>
<BODY>
<B> Bienvenue au langage HTML </B><BR>
<SCRIPT LANGUAGE="javascript">
document.write("<B> Bienvenue au langage Javascript </B><BR>");
</script>
<?
echo ("<B> Bienvenue au langage Php </B><BR>");
// echo permet d'afficher un message
?>
</BODY>
</HTML>
4- Ouvrez le navigateur avec l'adresse :
c:\program files\easyphp\www\tpphp\tpphp1.php
5- Ouvrez le navigateur avec l'adresse : http://localhost/tpphp/tpphp1.php
Constatations :
Pour que le script soit interprt par le serveur quatre conditions sont ncessaires :
1- Le fichier contenant le code Php doit avoir l'extension php.

2- Le script php contenu dans le code HTML doit tre dlimit par les balises <? et ?>
3- Le fichier php doit tre enregistr dans le rpertoire d'hbergement du serveur
apache (Avec easyphp, le rpertoire par dfaut est :
c:\program files\easyphp\www)
4- Le fichier Php ne sera excut qu' travers son adresse Web (http://localhost/... ou
http://nommachine/.... ou http://127.0.0.1/.........).
Pour commenter une seule ligne on utilise une double barre oblique (//). Pour
commenter plusieurs lignes on utilise (/*) au dbut du bloc du commentaire et (*/)
la fin.
122
TIC
4- Les structures de donnes

a- Les constantes
Activit 3 :
1- Lancez easyphp
2- Crez un fichier texte avec l'extension php (tpphp3.php) sous le rpertoire tpphp
<HTML>
<HEAD>
<TITLE> Les constantes en PhP</TITLE>
</HEAD>
<BODY>
<?
define("SOCIETE","Socit internationale d'Import Export");
echo("Je travaille la Socit: " .SOCIETE);
?>
</BODY>
</HTML>
4- Ouvrez le navigateur avec l'adresse : http://localhost/tphp/tpphp3.php
Constatations :
Pour dfinir une constante, on fait appel la fonction define().
L'operateur . permet la concatnation des contenus des objets.
Activit 4 :
1- Lancez easyphp
3- Editez ce fichier et insrez le code suivant:
<HTML>
<HEAD><TITLE> Les variables en PhP</TITLE></HEAD>
<BODY>
<?
// utilisation des variables
$libp = "disque dur";$pu = 158.5;$descp="";
echo (gettype($libp). "<br>". gettype($pu)."<br>") ;
// conversion de types
settype($pu, "integer");
echo ("la variable pu est de type: ". gettype($pu) ."et contenant la valeur :" .$pu."<br>" );
$pu = (string)$pu;
echo ("la variable pu est de type:".gettype($pu) ."et contenant la valeur :" .$pu."<br>");
123
// Test d'existence de variables

echo ("lib variable non dfinie $lib<br>");
//lib variable non dfinie
echo ("test1 : " .isset($pu)."<br>");
// retourne 1, pu est une variable dfinie
echo ("test2 : " .isset($lib)."<br>");
// retourne 0, lib est une variable non dfinie
echo ("test3 : " .isset($descp)."<br>");
//retourne 1, descp est une variable dfinie
?></BODY> </HTML>
4- Ouvrez le navigateur avec l'adresse : http://localhost/tphp/tpphp4.php
Constatations :
Dclaration de variables :
En Php, les variables sont reprsentes par un signe dollar $ suivi du nom de la
variable.
Une variable est automatiquement dclare ds que vous lui affectez une valeur.
Conversion de types :
La conversion de types se fait :
Avec la fonction settype, en utilisant la syntaxe :
int settype (string var, string type)
Dfinit de faon explicite le type (type) de la variable var.
Le type peut tre : integer, double, string, array ou object.
La fonction settype renvoie TRUE en cas de succs, FALSE sinon.
En prcdant les variables convertir par des clauses (type).
Exemples :
$var = 15.6; //$var est un double
$var = (int) $var; //c'est maintenant un entier (valeur 15)
$var = (double) $var; //c'est de nouveau un double (valeur 15,0)
$var_chaine = (string)$var; // $var_chaine est une chane (valeur "15")
Fonctions de manipulation de variables :
string gettype ( var ) : Retourne le type de la variable Php var. Ce type peut tre :
"integer", "double", "string", "array", "object", "class", "unknown type" (type inconnu)
Exemple :
if(gettype($saisie_utilisateur) == "integer")
{
$age=$saisie_utilisateur;
}
124
TIC
Info
Une autre alternative pour connatre le type d'une variable est

l'utilisation de l'une des fonctions boolenes suivantes :
is_long(), is_double(), is_string(), is_array() et is_object().
int isset(var) : Cette fonction retourne le rsultat TRUE si la variable var possde une
valeur, FALSE sinon.
Exemple :
$Prenom="Ali";
echo(isset($Prenom)); //TRUE
b- Les oprateurs
Les oprateurs de calcul
Oprateur
Dnomination
Exemple
Rsultat ( pour x=7)
oprateur d'addition
$x=$x+3
10
oprateur de soustraction
$x=$x-3
oprateur de multiplication
$x=$x*3
21
oprateur de division
$x=$x/3
2,333333
oprateur d'affectation
$x=3
Met la valeur 3 dans la

variable $x
oprateur modulo
$x=$x%3
Les oprateurs de comparaison

Oprateur
Dnomination
Exemple
==
oprateur d'galit
$x==3
<
oprateur dinfriorit
stricte
$x<3
<=
oprateur dinfriorit
$x<=3
>
oprateur de
supriorit stricte
$x>3
>=
oprateur
de supriorit
$x>=3
Retourne 1 si $x est
suprieur ou gal 3, sinon 0
!=
oprateur de diffrence
$x!=3
Retourne 1 si $x est diffrent de

3, sinon 0
125
Rsultat
Retourne 1 si $x est gal 3,

sinon 0
Retourne 1 si $x est infrieur
3, sinon 0
Retourne 1 si $x est infrieur ou
gale 3, sinon 0
Retourne 1 si $x est suprieur
3, sinon 0
Les oprateurs logiques (Boolens)

Oprateur
Dnomination
II ou OR OU logique
Description
Exemple
Vrifie qu'une des condi((condition1)||(condition2))

tions est ralise
&& ou
AND
ET logique
Vrifie que les deux

conditions sont ralises
XOR
OU exclusif
Vrifie qu'une et une seule

((condition1)XOR(condition2))
des conditions est ralise
NON logique
Inverse l'tat d'une variable

boolenne (retourne la
(!condition)
valeur 1 si la variable vaut
0, 0 si elle vaut 1)
((condition1)&&(condition2))
5- Les entres/sorties
Activit 5 :
1- Lancez easyphp
<HTML>
<HEAD>
<TITLE> Les entres/sorties en PhP</TITLE>
</HEAD>
<BODY>
<?
if( isset($_GET['NP']) OR isset($_POST['NP']) )
{
if(isset($_GET['NP']))
$NP=$_GET['NP'];
if(isset($_POST['NP']))
$NP=$_POST['NP'];
echo("Bienvenue $NP") ;
}
else
{
?>
126
TIC

<FORMaction="tpphp5.php" method="post">
Saisir votre Nom et Prnom :
<INPUT type = "text" name="NP">
<INPUT type = "submit" value="valider">
</FORM>
<A href="tpphp5.php?NP=visiteur">Accdez en tant que visiteur</A>
<?
}
?>
</BODY></HTML>
5- Ouvrez le navigateur avec l'adresse : http://localhost/tphp/tpphp5.PhP
Constatations :
Les entres en Php : Pour rcuprer des donnes partir d'une page Php, deux
solutions sont possibles :
Rcuprer des informations saisies (ou dfinies) travers les objets graphiques des
formulaires : on utilise l'une des deux syntaxes suivantes $_GET['nomobjet'] ou
$_POST['nomobjet'], dpendamment de la valeur de la proprit METHOD de la
balise FORM (respectivement GET ou POST).
NB : nomobjet dsigne la valeur de la proprit NAME de l'objet duquel on veut
rcuprer des donnes.
Rcuprer des informations envoyes en paramtre un fichier Php.
L'envoi des donnes se fait travers la syntaxe :
http://adresse-url/nomfichier.php?variable1=valeur1&variable2=valeur&...&variableN=valeurN
La rcupration (au niveau du fichier nomfichier.php) se fait grce la syntaxe :

$variable1=$_GET['variable1']. $variableN=$_GET['variableN'] ou
$variable1=$_POST['variable1'].... $variableN=$_POST['variableN']
Les sorties en Php : l'affichage se fait grce l'instruction echo qui permet d'afficher :
Des chaines de caractres
Exemple :
echo ("ceci est test");
Des chaines de caractres avec le contenu de variable
Exemple :
$x=2 ;
echo ("la valeur de x est : $x ");
Des chaines de caractres, des variables et des balises HTML
Exemple :
$x=2 ;
echo ("<B>la valeur de x est :</B> $x ");
NB : il est possible d'afficher des informations travers les objets graphiques d'un
formulaire.
Exemple : <INPUT TYPE="TEXT" NAME="NP" VALUE=<? echo ("$NP"); ?> >
127
Application
Dveloppez un programme PHP permettant dafficher en premier lieu, un formulaire HTML
dinscription des lves de votre lyce, contenant les diffrents objets graphiques.
Suite un clic sur le bouton de validation, le mme fichier affiche un message rcapitulatif
contenant les diffrentes informations saisies par lutilisateur.
6- Les structures de contrle

a- Les structures conditionnelles:
L'Instruction if :
if (condition){
expression vrai
} else {
expression faux
}
Les structures de branchement :
switch (expression)
{
case resultat1 :
//instructions excuter si l'expression vaut resultat1...
break ;
case resultat2 :
//instructions excuter si l'expression vaut resultat2...
break ;
...
default :
//instructions excuter en dernier recours...
}
L'instruction break permet de sortir de la structure de contrle utlise
Exemple:
Switch ($type)
{
case "Femme" : echo "Bonjour Madame" ;
break ;
case "Homme" : echo "Bonjour Monsieur" ;
break ;
default : echo "Erreur !" ;
}
b- Les structures itratives :
Une boucle While : Teste une condition avant ou aprs chaque itration et ne parcourt
de nouveau la boucle que si la condition est vrifie.
Une boucle for : Le nombre d'itrations est connu davance.
128
TIC

La boucle While :
while (condition)
{
//instructions
}
Pour stopper l'excution de faon prcoce, on peut utiliser l'instruction break.
La boucle do.. While :
Les instructions do..while sont similaires aux instructions while, si ce n'est que la condition
qui est vrifie la fin de chaque itration, et non au dbut. Cela signifie que la boucle
s'excute toujours au moins une fois (l'expression n'est teste qu' la fin de l'itration), ce qui
n'est pas le cas lorsque vous utilisez une boucle while (l'expression est vrifie au dbut de
chaque itration).
La boucle For :
for (expr1; expr2; expr3)
{
instructions
}
L'instruction accepte trois expressions :
- La premire expression (expr1) est value (excute) quoi qu'il arrive au dbut de la
boucle.
- Au dbut de chaque itration, l'expression expr2 est value. Si l'valuation vaut TRUE,
la boucle continue et l'instruction est excute. Si l'valuation vaut FALSE, l'excution de
la boucle s'arrte.
- A la fin de chaque itration, l'expression expr3 est excute.
L'expression expr2 compare en gnral la variable de contrle de la boucle une valeur
prdfinie, mais cela n'a rien d'obligatoire.
Exemple:
for ($i=0 ; $i<10 ; $i++)
{
echo "$i";
}
Application
Ecrivez un script Php permettant d'afficher tous les nombres premiers compris entre 2 et 100.
7- Les types de donnes structures en Php

a- Les tableaux :
Un tableau est compos d'un certain nombre d'lments possdant chacun une valeur propre
ainsi qu'une cl ou indice, permettant de faire rfrence cet lment.
Activit 6 :
1- Lancez easyphp
3- Editez ce fichier et insrez le code ci-dessous :
4- Testez le travail, en utilisant l'adresse: http://localhost/tpphp/tpphp6.php
129
<?
// Initialisation des tableaux
$tab[0] = "P";$tab[1] = 2; // Equivalent $tab=array("P",2);
$vente_hebdo=array("lundi"=>7,"mardi"=>5,"mercredi"=>7,"jeudi"=>9,"vendredi"=>2) ;
// Accs aux lments d'un tableau
echo ("l'lment d'indice 1 est =". $tab[1]."< BR>");
list($c1, $c2)=each($vente_hebdo);
echo("l'lment courant $c1; est = $c2;<BR>");
$c=key($vente_hebdo);
$v=current($vente_hebdo);
echo("l'lment courant $c est = $v<BR>");
// Parcours des lments d'un tableau
$vente_totale = 0;
reset($vente_hebdo);
while (list($key, $value) = each($vente_hebdo))
{
echo "<BR> Les ventes du $key : $value units<BR>";
$vente_totale += $value;
}
echo "<BR>Les ventes de la semaine : $vente_totale units<br>";
// tri de tableaux
//1. tri par valeur : (sort, rsort)
sort($vente_hebdo);
while(list($key,$value) = each($vente_hebdo))
{ echo "<BR> Les ventes du $key : $value units<BR>"; }
//2. tri par cl : (ksort, krsort)
ksort($vente_hebdo);
for(reset($vente_hebdo);$key= key($vente_hebdo); next($vente_hebdo))
{ echo "<BR> Les ventes du $key : $value units<BR>"; }
?>
Constatations :
En Php, deux types de tableaux sont utiliss :
Les tableaux indices de type entier (Par dfaut, l'indice du premier lment d'un
tableau est zro)
Les tableaux associatifs, qui utilisent des indices de type chanes de caractres.
Contrairement des langages tel que le langage PASCAL, il est possible de stocker des
lments de types diffrents dans un mme tableau.
L'initialisation d'un tableau

Il existe plusieurs faons d'insrer des lments dans un tableau :
On peut tout simplement leurs affecter des valeurs, de la mme faon que pour les autres
variables.
130
TIC

Exemple :
$tab[0] = "P" ou mme $tab[] = "P"
On peut initialiser les lments d'un tableau en utilisant la fonction array().
Exemples :
$tab=array("P",2);
$vente_hebdo=array("lundi"=>7,"mardi"=>5,"mercredi"=>7,"jeudi"=>9,"vendredi"=>2) ;
Le parcours d'un tableau
Tout tableau possde un pointeur interne qui conserve l'indice et la valeur de l'lment
actif. Il est possible de dterminer la valeur de l'lment actif l'aide de la fonction
current() et l'indice de l'lment actif l'aide de la fonction key() .
$c=key($vente_hebdo );
$v=current($vente_hebdo);
echo("l'lment courant $c est = $v<br>");
Les deux fonctions each() et list() peuvent tre utilises conjointement afin de parcourir
un tableau.
while(list($key,$value) = each($vente_hebdo))
{
echo "<BR> Les ventes du $key : $value units<BR>";
}
Il existe une srie de fonctions permettant de se dplacer dans

un tableau :
Infos
Fonction
reset()
pos()
key()
next()
prev()
end()
sizeof()
Description
Remet le pointeur interne de tableau au dbut.

Retourne la valeur de l'lment courant d'un tableau
Retourne l'indice de l'lment courant d'un tableau.
Avance le pointeur interne d'un tableau.
Recule le pointeur courant de tableau.
Positionne le pointeur de tableau en fin de tableau.
Retourne le nombre d'lments dans un tableau
Le tri d'un tableau

Php dispose de plusieurs fonctions permettant de trier un tableau. La plupart de ces
fonctions ne retournent pas de valeur mais modifient simplement le tableau pass en
paramtre. Les fonctions sort() et rsort() permettent de trier un tableau par valeur
croissante ou dcroissante.
On peut galement trier un tableau par indice, l'aide des fonctions ksort() et krsort(),
qui s'utilisent de la mme manire que les fonctions prcdentes.
131
b. Les Chanes de caractres :
Activit 7 :
1- Lancez easyphp
4- Testez le travail, en utilisant l'adresse : http://localhost/tpphp/tpphp7.php
<HTML>
<HEAD>
<TITLE> Les Chanes de caractres en Php</ TITLE >
</HEAD>
<BODY>
<?
// traitement de chane de caractres
echo(substr("tunisie",-2));
echo("<br>");
echo(substr("tunisie",-5,3));
echo("<br>");
echo(trim(" chane exemple ")) ;
echo("<br>");
$chaine="Nom|Prenom|Adresse";
$champs=explode("|",$chaine);
$boucle=0;
while($boucle<sizeof($champs))
{
echo $champs[$boucle];
$boucle++;
}
echo("<BR>");
$chaine="tout est rouge";
$chaine=str_replace("rouge", "bleu", $chaine);
echo $chaine;
?>
</BODY></HTML>
Constatations :
Une chane de caractres est un ensemble de caractres entre guillemets simples ou
doubles. $Variable = "Bonjour tout le monde" ;
Les fonctions de chanes de caractres :
substr() : string substr(string source, int dbut, int [taille])

Retourne une portion de string, spcifie avec le dbut dbut et la longueur taille.
132
TIC

Lorsqu'une taille ngative est spcifie, la chane renvoye se terminera cette
distance de la fin de la chane source.
trim() : string trim (string str) : Cette fonction retire les espaces blancs de dbut et
de fin de chane, et retourne la chane nettoye.
strlen(): int strlen (string str) : Retourne la longueur de la chane string.
implode() : string implode (string separator, array tableau)
Retourne une chane constitue de tous les lments du tableau, pris dans l'ordre,
transforms en chane, et spars par sparateur.
explode() : array explode (string separator, string string)
Retourne un tableau qui contient les lments de la chane string, spars par
separator.
str_replace() : string str_replace(modle, remplacement, chane)
Remplace toutes les occurrences de modle dans chane par remplacement
8- Les fonctions en Php

Activit 8 :
1- Lancez easyphp
4- Testez le travail, en utilisant l'adresse: http://localhost/tpphp/tpphp8.php
<HTML>
<HEAD><TITLE> Les fonctions en PhP</ TITLE >
</HEAD>
<BODY>
<?
function carre($nombre)
{
return $nombre * $nombre ;
}
echo carre(3) ; //affiche la valeur 9
?>
</BODY>
</HTML>
Constatations :
Une fonction peut accepter un ou plusieurs arguments, accomplit un ensemble d'oprations
prdfinis selon ces arguments puis renvoie une valeur en rsultat.
Une fonction peut tre dfinie en utilisant la syntaxe suivante :
function ma_fonction ($arg_1, $arg_2, ..., $arg_n)
{
Corps de ma fonction...
[return $valeur_de_retour ;]
}
133
En Php toute fonction doit tre pralablement dfinie avant d'tre utilise. Les valeurs sont
renvoyes en utilisant une instruction de retour optionnelle. Tous les types de variables
peuvent tre renvoys.
8 - Utiliser MySQL avec Php

a- Cration d'une base de donnes avec PhpMyadmin :
Activit 9 :
1- Dmarrez easyphp. Dmarrez ensuite PhpMyadmin (bouton droit de la souris sur
l'icne easyphp sur la barre des tches, puis administration) ou entrez directement
l'adresse suivante : http://127.0.0.1/mysql/
Figure II-41 : Premier cran de PhpMyadmin

2- Crez une nouvelle base de donnes avec le nom laureat
Figure II-42 : Cration d'une base de donnes avec PhpMyadmin

3- Crez une table lves ayant la structure suivante :
- num_ordre (entier, cl primaire)
- nom_prenom (chane de caractres)
- classe (chane de caractres)
- moy_ann(reel)
Figure II-43 : Cration d'une table avec PhpMyadmin

134
TIC

4- Insrez les enregistrements suivants dans la table ainsi cre :
num_ordre
Nom_prnom
Classe
moy_ann
Y110
DELHOUMI Jizel
4SI
17,15
Y300
KILANI Amine
4SI
12,35
Y215
KHLIEF Fehmi
4SI
14,05
Y255
ESSID Adem
4SI
15,35
Figure II-44 : Saisie des donnes dans une table avec PhpMyadmin
b- Les fonctions pour la gestion d'une base de donnes MySQL :
Activit 10 :
1- Lancez easyphp
4- Testez le travail, en utilisant l'adresse : http://localhost/tpphp/tpphp10.php
135
<HTML>
<HEAD><TITLE> la gestion d'une base de donnes MySQL en Php</TITLE>
</HEAD>
<BODY>
<?
$ idc=mysql_connect("localhost","root","");
$ c=mysql_select_db("formation");
$requete="select * from eleve";
$resultat=mysql_query($requete);
echo mysql_num_rows($resultat);
?>
<TABLE border=1>
<TR>
<TD> num_ordre </TD>
<TD> nom_prenom </TD>
<TD> classe </TD>
<TD> moy_ann </TD>
</TR>
<? while($enreg=mysql_fetch_array($resultat))
{
?>
<TR>
<TD><? echo $enreg["num_ordre"];?></TD>
<TD><?echo $enreg["nom_prenom"];?></TD>
<TD><? echo $enreg["classe"];?></TD>
<TD><? echo $enreg["moy_ann"];?></TD>
</TR>
<? } ?>
</TABLE>
<?
mysql_close ($idc) ;
?>
</BODY>
</HTML>
Constatations :
L'utilisation de MySQL avec Php s'effectue en quatre tapes :
- Connexion au serveur de donnes ;
- Slection de la base de donnes ;
- Excution de la requte ;
- Exploitation des rsultats de la requte ;
- Fermeture de la connexion.
1er tape : Connexion au serveur de donnes
int mysql_connect (string hostname, string username, string password)
Pour se connecter, il faut dfinir l'adresse du serveur de donnes ainsi que le nom
d'utilisateur et le mot de passe. La valeur par dfaut de hostname est "localhost", de
username est "root" et de password est "".
La fonction mysql_connect() retourne un entier permettant de vrifier l'tablissement de la
connexion.
136
TIC

2me tape : Slection de la base
int mysql_select_db (string database_name, [int link_identifier] )
Le paramtre database_name est obligatoire, le paramtre link_identifier est facultatif. La
fonction retourne TRUE ou FALSE selon que l'opration russie ou non.
Si on ne donne pas le paramtre link_identifier, la fonction utilise la dernire connexion
ouverte.
3me tape : Excution d'une requte SQL
int mysql_query (string query)
Envoie au serveur mysql une instruction SQL excuter.
4me tape : Exploitation d'une requte SQL
Requte de slection :
A la suite d'une requte de slection, les donnes sont mises en mmoire.
Pour pouvoir les exploiter, Php gre un pointeur de rsultat, c'est dire qu'il repre un
enregistrement parmi les autres et lorsqu'on veut en lire un, c'est celui qui est point qui
sera retourn et le pointeur est dplac vers l'enregistrement suivant.
La fonction de lecture du rsultat est :
array mysql_fetch_array (int result, int result_type )
Extrait la ligne sous forme d'un tableau associatif.
Le paramtre result_type est facultatif. Il peut prendre les valeurs suivantes :
- MYSQL_NUM : Le tableau ne contient que des indices numriques.
- MYSQL_ASSOC : Le tableau ne contient que des indices associatifs.
- MYSQL_BOTH : Le tableau contient la fois des indices numriques et des indices
associatifs.
Infos
Remarques :
- Si l'argument result_type n'a pas t spcifi, MYSQL_BOTH est considre comme
valeur par dfaut de cet argument.
- int mysql_num_rows (int result) : retourne le nombre d'enregistrements qui ont t
retourns par la slection.
L insertion, la modification et la suppression des donnes dans les

tables se font travers des requtes SQL utilises en paramtres de
la fonction mysql_query, savoir respectivement des requtes de
type INSERT, UPDATE et DELETE.
Suite toute opration de mise jour (insertion, suppression,
modification), il est possible de connatre le nombre
d'enregistrements affects par la requte. Ceci est faisable grce la
fonction suivante : int mysql_affected_rows ().
Exemple :
Suite une commande "UPDATE", on voudrait savoir combien de lignes ont t
modifies : <?echo mysql_affected_rows() ." enregistrement(s) modifies";?>
137
Infos
Suite une requte d'insertion, on peut rcuprer la valeur d'un champ

auto incrment. Ceci est faisable grce la fonction suivante :
int mysql_insert_id (int link_identifier )
mysql_insert_id() : retourne le dernier identifiant gnr par un
champ de type AUTO_INCREMENTED.
Cette fonction ne prend aucun argument. Elle retourne le dernier
identifiant gnr par la dernire fonction INSERT effectue.
Exemple :
Suite une requte d'insertion, on veut afficher le numro auto incrment :
<? echo("Votre numro d'identifiant est : "mysql_insert_id()); ?>
138
TIC
Exercices
Exercice 1
Dveloppez un formulaire qui permet de vrifier l'identit d'un utilisateur en demandant son
nom, son prnom et son mot de passe (ce dernier ne devra pas apparatre l'cran pendant
la frappe). Tant que l'utilisateur n'est pas reconnu, le formulaire s'affiche. Si l'utilisateur est
reconnu, un message d'accueil s'affiche. La casse des valeurs ne devra pas tre prise en
compte (c'est--dire le fait que ce soit tap en minuscules ou majuscules ne devra pas
changer le comportement des pages). Les espaces taps en dbut et fin de passe dans chacun
des champs du formulaire devront tre limins.
Exercice 2
Ecrivez un formulaire qui permet un utilisateur de rentrer un texte quelconque. Le but est
d'crire un script qui dtermine la frquence de chaque lettre de l'alphabet dans ce texte.
Indications :
le script consistera en une boucle for qui parcourt toute la longueur du texte (il faut
donc dterminer la longueur du texte l'aide de la fonction strlen.
chaque tour de la boucle, on extrait une lettre du texte l'aide de la fonction substr.
on utilise un tableau indic $frequence, qui contient pour chaque lettre le nombre de
fois o elle a t rencontre dans le texte. A chaque tour de la boucle, la frquence de
la lettre rencontre est augmente de 1.
Exercice 3
1- Ecrivez une fonction qui permet l'affichage du contenu d'un tableau pass en paramtre :
tabaff($tab).
2- Rcrivez la fonction tabaff de sorte afficher les donnes sous forme dun tableau
HTML, avec des couleurs de lignes alternatives (bleu, rouge)
Exercice 4
1- Recensez les caractristiques principales d'un site web dynamique.
2- Prcisez les arguments de choix de la technologie PHP, MySQL dans le dveloppement
d'un site Web dynamique.
Exercice 5
1- Crez le squelette d'une page Web classique (entte, corps, etc.) que vous sauvegardez
sous le nom Affichage.php.
2- Affichez dans cette page la chane de caractres Bienvenue ma premire page en Php .
3- Affichez dans cette page la chane de caractres Vive le PHP ! .
4- Affectez une valeur entire 77 la variable chiffre et affichez cette variable.
139
5- Affichez la chane de caractres Mon chiffre prfr est le suivie de la valeur de la

variable chiffre de la question 4.
6- Affichez la chane de caractres 4me SI en gras dans un paragraphe centr.
Exercice 6
1- Dans un nouveau fichier, nomm Triangle.php, affichez un triangle rectangle constitu
de caractres *. Utilisez une variable de nom taille pour paramtrer la taille du triangle
(i.e., le nombre de lignes), affectez cette variable 5.
Rsultat attendu :
Triangle de taille 5
*
**
***
****
*****
2- Avant d'afficher le triangle, ajoutez des tests sur la valeur du paramtre taille :
- Si elle est suprieure 30, affichez un message Triangle trop grand et n'affichez
pas le triangle.
- Si elle est gale 0, lui attribuez une valeur de 20.
- Sinon, affichez le triangle de la taille passe en paramtre.
Testez votre code Php en modifiant la valeur de la taille (rechargez la page chaque
modification).
3- Au lieu d'affecter une valeur la variable taille du triangle dans le code PHP, passez le
paramtre taille directement dans l'URL (http:// ... /Triangle?taille=valeur).
Testez pour diffrentes valeurs.
4- Que se passe-t-il si vous ne dfinissez pas le paramtre dans l'URL ?
5- Recopiez Triangle.php en TriangleFonction.php.
6- Placez le code permettant d'afficher un triangle dans une fonction de nom triangle, tout
en haut de votre code PHP et insrez un appel cette fonction.
7- Crez dans un nouveau fichier, nomm Taleaux.php, un tableau de chanes de caractres,
nomm PotesDePromo dans lequel vous mettrez les prnoms de quelques uns de vos
camarades.
140
TIC
Exercice 7
L'objectif est de dvelopper une application Web de gestion d'une base de donnes
bibliographiques. Cette application possde les fonctionnalits suivantes :
- Une interface de saisie des notices bibliographiques ;
- Une interface de mise jour des notices bibliographiques ;
- Une interface de recherche.
On suppose que vous disposez d'une base de donnes MySQL bibliotheque , compose
d'une table ayant la structure suivante :
La table notice :
- Id notice (NumeroAuto, cl primaire)
- Titre (chane de caractres)
- Resume (chane de caractres)
- Type (chane de caractres)
- Auteur (chane de caractres)
NB : Une notice peut tre : Un article, un livre ou une thse.
Travail faire :
1- A l'aide de PhPMyAdmin, crez la base de donnes bibliotheque et la table notice.
2- Ajoutez les notices suivantes dans la table notice
Id notice
Titre
Resume
Type
Auteur
Commerce lectronique
Rsum 1
Livre
AYARI
Rayan
Language JAVA
Rsum 2
Article
HOSNI
Yassin
Programmation OO
Resum 3
Livre
ESSID
YOUSSEF
3- Crez un formulaire de saisie des notices bibliographiques permettant d'insrer les

notices dans la base bibliothque.
Suite la saisie des informations, affichez le message suivant : Votre notice dont le titre est
titre et l'auteur auteur a t saisie.
4- Crez une page Recherche de notice bibliographique , permettant l'utilisateur de
faire une recherche bibliographique partir des champs : titre et/ou auteur et
d'afficher le rsultat de la recherche.
141
Exercice 8
Un cabinet de formation offre travers son site, la possibilit aux diffrents internautes
de s'inscrire au niveau des diffrents modules proposs par la socit et ce conformment
l'imprime cran donn ci-dessous.
Travail faire :
1.
1.1. Dveloppez une fonction JavaScript contrle() qui permet de vrifier la validit des
informations avant de faire appel au fichier sauvegarder.php (suite au clic sur le bouton
valider), en vrifiant les proprits suivantes :
- Les champs nom prnom et l'adresse E-Mail sont des champs saisie obligatoire.
- Au moins un module doit tre choisi.
1.2. A quel niveau la fonction controle() devra tre appele ? Donnez la syntaxe adquate.
2.
Ajoutez le contrle JavaScript permettant de vrifier, la vole, la validit des modules
choisis par les internautes, et ceci en appliquant les rgles suivantes :
l'inscription au niveau des modules JavaScript ou PHP niveau1, ncessite l'inscription au
module HTML.
l'inscription au module PHP niveau2, ncessite l'inscription au module PHP niveau1.
Utiliser pour l'implmentation de ses rgles des fonctions JavaScript, dfinir au niveau de
la partie entte et appeler dans la partie corps.
2.1. Donnez les dfinitions de ses diffrentes fonctions.
2.2. Rcrivez, pour chaque fonction, la balise HTML illustrant l'appel de la fonction en question.
3.
Le bouton valider devra faire appel un fichier PHP (sauvegarder.php) se trouvant dans le
mme rpertoire que le fichier HTML.
3.1. Donnez le code du fichier sauvegarder.php permettant, en 1er lieu, de rcuprer les
donnes saisies dans le formulaire pour les ajouter une base de donnes MySQL bdcabinet,
pralablement cre et compose d'une table ayant la structure suivante : La table inscription :
- IdInscription (NumeroAuto, cl primaire)
- nomPrenom (chane de caractres)
- email (chane de caractres)
- modules (chane de caractres)
142
TIC

Remarques :
Pour l'enregistrement des modules choisis par un internaute, on a opt pour l'ide qui
consiste les avoir sous forme d'une chane de caractres compose de la
concatnation des diffrents noms des modules choisis, avec comme sparateur *.
Exemple : HTML*PHP1*PHP2
Il faut veiller, ne pas accepter deux inscriptions avec la mme adresse email.
3.2. Une fois les donnes enregistres, le mme fichier sera utilis pour afficher un
rcapitulatif des diffrentes inscriptions, conformment l'imprime cran donn ci-dessous
Donnez le code PHP permettant de dessiner le tableau rcapitulatif des diffrentes
inscriptions.
143
Lecture
Ecrit par Damien Seguy jeudi 03 mai 2007
Outre sa syntaxe familire de nombreux dveloppeurs, et donc son rapide apprentissage,
PHP a vu sa popularit considrablement grandir grce plusieurs caractristiques clefs, que
ne partagent pas tous ses concurrents, comme ASP/ASP.Net ou JSP.
Taux d'utilisation des langages Web dans le monde en fvrier 2007
ASP
21,15%
21,37%
- 0,22 %
PHP
33,87%
33,83%
+ 0,04 %
Autres
44,64%
44,54%
+ 0,10 %
Voici une prsentation plus prcise de ces avantages :

Gratuit
PHP se tlcharge sous forme d'une extension aux serveurs les plus populaires,
notamment Apache. Il dispose galement d'excellente interface pour les principales bases de
donnes, dont MySQL. Soutenus par un systme Linux lui aussi Open Source, la plate-forme
LAMP ainsi dcrite permet aux hbergeurs de proposer une offre complte et puissante sans
quasiment aucun coup logiciel. De fait, PHP s'est retrouv install par dfaut sur toutes les
offres d'hbergement, y compris les gratuites. Cela signifie que vous ne dpendez pas d'un
fabricant pour fixer les choses qui ne travaillent pas, vous n'tes forcs non plus de payer pour
des mises niveau chaque anne pour obtenir une version travaillante.
Fonctionnement
Les rcritures successives du Zend Engine n'ont pas eu pour but que de revoir la
syntaxe Objet ou d'ajouter des fonctionnalits, mais avant tout d'optimiser au mieux son
fonctionnement, et donc de proposer des performances leves d'entre de jeu. Un seul
serveur PHP peut ainsi soutenir plusieurs millions de requtes par jour. Non seulement la
vitesse d'excution, qui est importante, mais aussi qu'il pas ralentit le reste de la machine.
Donc il ne doit pas exiger beaucoup de ressources de systme.
Le grand nombre de fonctions
Peut tre un problme, mais c'est surtout un avantage : le langage reconnat par dfaut
nombre de systmes et outils tiers, et s'interface trs facilement avec eux : bases de
donnes, systme de paiement en ligne, protocoles du Web, standards XML du Web et des
services Web, support des objets et classes COM, Java, .Net, Python...
144
TIC

Multi plate-forme
Face son concurrent direct lors de ses premiers succs, l'ASP de Microsoft, PHP offrait
l'avantage d'tre multi plate-forme : l o ASP ncessitait un serveur Windows IIS, assez peu
rpandu, PHP pouvait fonctionner sur plusieurs serveurs (dont IIS, avec un peu de travail), et
sur plusieurs systmes. Il fallait au moins a pour sduire les dveloppeurs du Web, monde
ouvert par excellence - et par ncessit.
Votre code bien crit pourra gnralement tre utilis sans modification sur un autre systme
utilisant PHP.
PHP sur Internet

Ce graphique indique la part de march de PHP sur l'ensemble des sites Web. PHP est prsent
sur 33,93 % des sites Web. La proportion de PHP est stable sur Internet.
PHP4 vit son moteur interne une fois de plus revu en profondeur, PHP3 tait dj trs
utilise, mais la popularit du langage explosa avec PHP4.
Rpartition par version majeure de PHP
145
Chapitre III.
Multimdia
Publication lectronique
Objectif :
Publier des sites Web dynamiques
Plan du chapitre :
I.
Rappel
II. Hbergement
III. Rfrencement
IV. Scurisation
Exercices
Lecture
TIC
I.
Rappel :
Pour crer un site Web, un ensemble d'tapes doivent tre suivies. La premire tape est le
dveloppement qui est constitu d'un ensemble de sous tapes savoir l'tude de
faisabilit, la rdaction du cahier des charges, la conception de la navigation et la
ralisation technique. La deuxime tape est l'hbergement ou la publication et qui
permet de mettre le site en ligne, ensuite l'tape de rfrencement qui a pour objectif de
faire connatre le site aux diffrents moteurs et outils de recherche. Une tape de mise
jour est ncessaire pour revoir et mettre jour le contenu du site, ainsi qu'une tape
d'valuation qui permet de savoir le degr de performance du site.
II.
Hbergement :
Pour qu'un site Web soit toujours accessible, il est ncessaire qu'il soit hberg sur un
serveur reli en permanence Internet. Pour cela, il faut faire recours un
hbergeur, c'est--dire une socit proposant l'hbergement (en anglais hosting) de sites
web sur des serveurs spcialiss connects en permanence Internet. On
distingue deux principales catgories d'hbergeurs :
- les hbergeurs gratuits : Ils proposent gratuitement un espace disque sur un
serveur pour sauvegarder les pages d'un site Web. Les hbergeurs gratuits gagnent de
l'argent soit avec un espace publicitaire sur le site hberg, soit grce au trafic sur leurs
propres sites.
- les hbergeurs professionnels : Ce type d'hbergeurs garantit un service de
qualit (bande passante) et de scurit (scurit des donnes et assurance d'un
nombre de pannes rduit). L'hbergement professionnel s'avre indispensable pour les
sites trafic important et ncessite l'achat d'un nom de domaine.
Application :
1- Faites des recherches sur Internet pour trouver une liste d'hbergeurs gratuits.
2- Choisissez un hbergeur (demandez conseil votre enseignant), et effectuez une
inscription afin de se doter d'un espace d'hbergement.
3- Activez votre inscription et testez la procdure d'hbergement en envoyant des pages
Web (ou un site entier) vers cet espace.
147
Techniquement, il est possible d'hberger son site Internet
Info
soi-mme condition de possder un dbit en sens montant

suffisamment important. En effet sur un site Internet, les
visiteurs font essentiellement du tlchargement en sens
descendant (download), ce qui signifie que le serveur fait
surtout de l'envoi de pages Web (upload).
III.
Rfrencement :
Activit 1 :
1- Utilisez le moteur de recherche google (www.google.fr) avec les mots cls suivants :
dveloppement multimdia et technologie Web
2- A votre avis, pourquoi dans la liste du rsultat, il y des sites qui sont affichs avant
d'autres ?
Constatations :
Le rfrencement (en anglais web positionning) est l'ensemble des techniques
permettant d'amliorer la visibilit d'un site Web par les internautes et travers
l'utilisation des moteurs de recherches. Dans le rfrencement, on trouve :
L'indexation (en anglais submission) qui consiste faire connatre le site auprs des
outils de recherche grce aux formulaires que ceux-ci proposent ;
Le positionnement et le classement (en anglais positionning and ranking) qui consiste
positionner le site ou certaines pages du site en premire page de rsultat pour
certains mots-cls et pour certaines expressions plus labores ;
Il existe essentiellement deux mthodes de rfrencement : l'utilisation des services
d'un "multirfrenceur" spcialis ou le rfrencement dit manuel :
La premire est facile car elle ne demande que peu de temps. Elle consiste le plus
souvent remplir un seul formulaire dont le contenu sera expdi aux moteurs et
annuaires qui l'exploiteront. Nanmoins, cette mthode prsente deux inconvnients majeurs : le premier est la publicit qui envahit invitablement la bote lectronique de celui qui effectue l'inscription. Le deuxime est le rfrencement tronqu.
En effet, les formulaires des annuaires sont presque tous diffrents et on les
oblige ainsi un travail supplmentaire.
La deuxime mthode, dite rfrencement manuel permet d'assurer un
r frencement optimal car vous en aurez le contrle pour chacun des moteurs et
annuaires dans lesquels vous voulez que le site Web figure. Pour effectuer un
rfrencement auprs d'un outil de recherche, il suffira de cliquer sur le lien de la
page de rfrencement de celui-ci.
148
TIC
Pour tre index correctement par les moteurs de recherche, il faut d'abord optimiser les
pages Web du site en y intgrant des donnes qui seront lues par les moteurs. Il faut donc
intgrer dans les codes html des diffrentes pages les donnes telles que le titre du site,
sa description, une liste de mots cls le dcrivant. Ces informations sont insres dans
des instructions ou balises spciaux appeles " balises mtas".
Figure III.1 : formulaire de rfrencement d'un rfrenceur gratuit

La liste suivante prsente des adresses de sites de rfrenceurs gratuits.
http://www.ref-ici.com
http://www.indexurls.com/referencement-gratuit.php
http://www.refindex.com/referencement_gratuit.php
http://www.refgratuit.fr/
http://www.referencement-team.com/formule/inscription_referencement.html
http://www.myannuaire.com/liens-durs.html
http://www.referencement-gratuit.net/referencement-gratuit.php
149
http://www.refrapide.com/referencement<<<-gratuit.php
http://trafficmonster.free.fr/ajout_site_referencement.php
http://www.lbb.org/fr/referencement/
http://www.refinto.com/referencement-gratuit.php
http://www.refinto.com/referencement-gratuit.php
http://www.refmarketing.com/
http://www.banniere.fr/html/pro_web/referencement/present_ref.php
IV.
Scurisation :
Activit 2 :
1- Testez le programme php (page1.php) ci-dessous.
2- Dterminez son rle.
page1.php :
<?
if (isset($_POST['mot_passe']))
{
$mot_passe=$_POST['mot_passe'];
}
else{
$mot_passe="";
}
if($mot_passe=="******") //ici on crit le mot de passe voulu, la place des toiles
{
?>
<CENTER><B><FONT color=red size=7>les informations scurises</FONT>
</B></CENTER>
<?
}
else
{
?>
<FORM method="post" action="page1.php>
<INPUT type="password" name="mot_passe">
<INPUT type="submit" value="envoyer">
</FORM>
</CENTER>
<?
}?>
150
TIC
Activit 3 :
1- Crez un rpertoire nomm acces_interdit dans la racine de votre site web.
2- Dans ce nouveau rpertoire, crez un fichier nomm index.html contenant le code
suivant :
<HTML>
<HEAD>
<TITLE>Document sans nom</TITLE>
</HEAD>
<META http-equiv="refresh" content="0";URL="http://localhost/site/index.html"/>
<BODY>
</BODY>
</HTML>
N.B : Aprs le "URL=", indiquez l'adresse du fichier index de votre page d'accueil
(exemple: http://localhost/monsite/index.html).
3- Ouvrez le navigateur Internet et mettez l'adresse du nouveau rpertoire
(exemple : http://localhost/monsite/acces_interdit)
4- Que remarquez-vous? Commentez le rsultat.
Constatations :
Lors de l'hbergement d'un site Web, et dans certains cas d'utilisations, nous aurons
besoin de limiter ou de restreindre l'accs des pages Web d'un site donn ou encore
des rpertoires entiers. Pour se faire, plusieurs techniques et mthodes peuvent tre
utilises. Certaines sont ralises par programmation, d'autres l'aide de fichiers de
configuration des diffrents serveurs (WEB, FTP, SGBD, etc.).
La limitation d'accs peut se faire au niveau de la machine cliente, en utilisant des
techniques telles que les cookies ou aussi au niveau du serveur (c'est souvent le cas).
La scurisation des donnes cot serveur touchent gnralement les tables de la base
de donnes utilise, des rpertoires particuliers tels que ceux o sont stocks les mots
de passe et les donnes personnalises des utilisateurs, les rpertoires de
configuration des serveurs web et des serveurs des bases de donnes.
Dans l'exemple de l'activit 2, nous avons limit l'accs une page par l'intermdiaire
d'un formulaire demandant un mot de passe. Cette technique est utilise dans plusieurs
cas de figure. La limite de cette technique est qu'elle ne peut scuriser l'accs qu' une
seule page. Pour pouvoir scuriser plusieurs pages avec la mme authentification, on
fait appel gnralement aux variables de sessions (l'quivalent des variables globales).
Dans l'exemple de l'activit 3, nous avons interdit l'accs un rpertoire en utilisant la
technique de redirection.
Dans le cas du serveur Web Apache, les fichiers htaccess sont des fichiers de
configuration permettant de dfinir des rgles dans un rpertoire et dans tous ses sous
rpertoires. On peut les utiliser pour protger un rpertoire ou une partie du site par
une combinaison du nom d'utilisateur : mot de passe, stocke dans un fichier
.htpasswd, pour changer le nom ou l'extension des pages ou encore pour interdire
l'accs au rpertoire.
151
Retenons :
Il existe deux types d'hbergement d'un site Web :
L'hbergement gratuit
L'hbergement professionnel
Le rfrencement est une tape permettant de faire connatre le site auprs des outils
de recherches (moteurs, annuaires, etc.)
Plusieurs techniques sont offertes pour scuriser les donnes d'un site Web.
La scurisation peut toucher une page, un ensemble de pages ou aussi un ou plusieurs
rpertoires d'un site.
152
TIC
Exercices
Exercice 1
1- Crez un site Web (site Web personnel, par exemple) compos de quelques pages.
2- Hbergez ce site en utilisant un hbergeur gratuit.
3- Cherchez des rfrenceurs gratuits. Testez-les pour rfrencer le site que vous avez
hberg.
Exercice 2
Crez une page HTML page1.html qui contient un formulaire demandant un compte et un
mot de passe pour accder une deuxime page page2.html permettant de souhaiter la
bienvenue l'utilisateur. Dans le cas o le compte ou le mot de passe sont incorrects, le
formulaire sera de nouveau affich.
Exercice 3
Faites des recherches pour dterminer les techniques offertes par le serveur Web apache
pour scuriser l'accs un rpertoire dun site Web?
Exercice 4
Crez un formulaire html qui permet une liste d'utilisateurs (dont les comptes et les mots
de passe sont stocks dans une base de donnes) d'accder une autre page contenant des
informations personnelles ces utilisateurs.
153
Lecture
Combiner Apache et la commande chroot pour piger les hackers
Par Extern ZDNet, Builder.com
Grce la commande Unix chroot et aux directives du httpd.conf d'Apache, vous
pouvez isoler les tentatives d'intrusion des pirates en quelques minutes. Un dispositif
simple, mais efficace.
Existe-t-il au monde un serveur totalement scuris? Peut-tre pas, mais vous pouvez
prendre plusieurs mesures pour vous assurer que votre serveur Apache est aussi rsistant
aux intrusions qu'il est aujourd'hui possible. Bon nombre de ces efforts ncessitent un
investissement considrable en temps et en nergie. Nanmoins, il en est un qui est tout ce
qu'il y a de plus enfantin mettre en oeuvre et qui s'avre particulirement efficace.
Dans un film rcent de Woody Allen, une scne comique montre Woody et quelques
acolytes en plein effort, en train de creuser un tunnel dans une banque : la sortie, ils se
retrouvent chez un fleuriste! Non seulement cet effort tait inefficace, mais il tait en outre
humiliant. Vous pouvez infliger cette mme humiliation un intrus potentiel. Voici la
marche suivre.
Limiter l'accs d'Apache au systme de fichiers
Comme Apache lui-mme peut tre compromis par un pirate rus et dtermin, l'astuce
consiste limiter Apache une portion dfinie du systme de fichiers. Ainsi, un intrus qui
parvient pntrer dans Apache n'en retire rien, si ce n'est d'avoir creus un tunnel
conduisant une cellule de prison! L'attaque est confine cette zone limite et l'attaquant
n'a accs aucun autre fichier.
L'appel systme chroot() d'UNIX change le rpertoire root (racine) de tout processus l'appelant. Il ne peut tre utilis que par root et s'excute comme suit:
chroot /tmp/root/directory/bin/bash
o /tmp/root/directory est le rpertoire root que vous voulez utiliser. Cette commande chroot
change le rpertoire root du processus appelant en /tmp/ et y excute /bin/bash. Toute la
subtilit de ce tour de passe-passe tient au fait que la commande /bin/bash ne sait pas qu'elle a t confine! Elle voit son rpertoire root mais ne voit pas le sous-rpertoire principal,
si bien qu'elle ne peut s'chapper!
Si un programme soumis chroot a t drout de la sorte et se retrouve confin un
sous-rpertoire, tout dommage qu'il pourrait provoquer lors de son excution se limite ce
rpertoire. Bien entendu, vous pouvez configurer votre rpertoire "pige" de sorte qu'un
programme intrus, lorsqu'il s'y retrouve pig, ne puisse commettre des mfaits.
Par exemple, vous pouvez vous assurer qu'aucun programme de manipulation de fichiers,
compilateur ou autre logiciel agissant sur des fichiers ne puisse tre excut depuis ce
rpertoire.
154
TIC
Verrouiller Apache
Pour commencer, vous ne voulez certainement pas enfermer Apache dans le rpertoire
/tmp/; nous l'avons simplement utilis prcdemment titre d'exemple. Il ne serait pas
pertinent d'y placer Apache, dans la mesure o tous les utilisateurs ont les droits d'criture
sur /tmp/. Par contre, vous pouvez crer un rpertoire trap (pige) sous /root, et y placer les
fichiers de bibliothques dynamiques appropris: # mkdir /trap
Crez maintenant les sous-rpertoires ncessaires sous /trap:
USR
USR/localusr/lib
USR/bin
lib
dev
tmp
etc
Dfinissez les droits sur le sous-rpertoire /trap/tmp 777 (avec la commande chmod; tout
le monde possde ainsi l'accs en lecture et criture) et t (ce qui limite tout fichier cr
aux utilisateurs disposant de privilges). Copiez les fichiers de configuration des utilisateurs
et des groupes (qui incluent passwd, shadow et group) dans le sous-rpertoire /etc.
Vous devez maintenant gnrer des fichiers passwd, shadow et group factices, avec la
commande # cat. Utilisez le nom "prisonnier" si cela vous chante. Vous configurez votre
ventuel prisonnier de sorte qu'il s'excute en tant que non-utilisateur sans shell valide
(il n'y aura aucun shell dans le rpertoire, ni aucun programme de connexion).
Copiez les fichiers de configuration de /lib vers /trap/lib. Veillez utiliser l'option -P dans
la commande cp pour prserver les droits. Les fichiers ncessaires sont les suivants:
/lib/libnss_files.so.1
/lib/libnss_files.so.2
/lib/libnss_dns.so.1
/lib/libnss_dns.so.2
Vous devrez galement copier les fichiers suivants du rpertoire /etc vers /trap/etc:
/etc/nsswitch.conf
/etc/hosts
/etc/resolv.conf
Crez un fichier nsswitch.conf, en dirigeant passwd, shadow, group et hosts pour dtecter
des fichiers dans /etc. Crez votre rpertoire /etc/hosts avec la commande echo, en
sauvegardant localhost.localdomain dans /trap/etc/hosts. Enfin, copiez le fichier resolv.
conf dans /trap/etc.
Vous y tes presque! Il vous reste copier les fichiers de bibliothques dynamiques,
de /lib vers /trap/lib. Utilisez l'option -p pour prserver les droits. Les fichiers ncessaires
sont les suivants:
155
libgdbm.so.2 (celui-ci est en fait dans /usr/lib, et non dans /lib)

/i686/libm.so.6
/i686/libpthread.so.0
/i686/libc.so.6
libcrypt.so.1
libnsl.so.1
libdl.so.2
ld-linux.so.2
HTTPD='chroot /trap /usr/local/apache2/bin/httpd'
Diriger Apache dans le pige
Apache est prt s'excuter dans le pige. Toutefois, l'excution d'une commande chroot
ce stade chouerait, car le script d'Apache ne peut pas s'excuter partir du rpertoire
/trap ; il a en effet besoin d'un fichier /bin qu'il ne peut trouver. Pour rsoudre ce problm
e
,
utilisez la commande chroot dans le script sur le fichier httpd suivant:
Dmarrer Apache depuis le pige
N'oubliez pas que la seule chose que doit faire Apache dans le pige consiste dmarrer le
serveur. Toute autre action irait l'encontre de la cration d'un environnement minimaliste,
dans lequel un intrus pig ne peut pas nuire.
xcutez le fichier de configuration et dmarrez Apache:
/trap/usr/local/apache2/bin/apachect1 start.
Votre pige est dsormais install. D'autres aspects du pige chroot entrent en jeu si vous
choisissez de l'utiliser comme srieuse mesure anti-piratage. Vous devez grer vos journaux
et dfinir le dmarrage d'Apache l'amorge. Vous devez estimer si PHP ou Perl est requis
et le faire fonctionner galement dans l'environnement /trap. En outre, d'autres mesures de
scurit plus strictes peuvent tre prises, notamment la cration de votre pige l'aide d'une
156
Annexes
Annexe A
Annexe B
Annexe C
Annexe A
LES OUTILS DE DEVELOPPEMENT DE PAGES WEB
La cration de pages Web se fait grce l'utilisation du langage HTML (HyperText Markup
Language) : Langage hypertexte balises. L'utilisation de ce langage peut se faire travers
plusieurs solutions logicielles :
1. Les diteurs de texte
2. Les logiciels de traitement d'images
3. Les convertisseurs des documents bureautiques
4. Les diteurs HTML
5. Les diteurs d'animation (flash, shockwave)
1. Editeurs de texte
A l'aide d'un simple diteur de texte et la connaissance du langage HTML on peut commencer
crire directement des pages Web.
Cette solution ne ncessite pas d'investissement particulier et permet de faire toutes les
oprations que ferait un logiciel spcialis. Elle offre un autre avantage, qui est le fait de
pouvoir crer des pages sans tre dpendant d'un environnement particulier.
Exemple : le bloc note, Edit, VI
2. Les logiciels de traitement d'images

Les versions rcentes de la majorit des logiciels de traitement d'images, offrent des options
permettant la conversion d'une interface graphique en page Web, ce qui constitue une
solution part entire pour la cration des pages Web composes uniquement d'images.
L'avantage de cette solution est de simplifier le dveloppement de page Web graphiques, en
proposant des assistants de dcoupage et de cration d'animations graphiques.
Exemple : A partir de la version 6.5 d'Adobe PhotoShop.
3. Les convertisseurs de formats bureautiques vers HTML

La majorit des logiciels bureautiques (traitement de texte, tableur, logiciel de prsentation)
propose une fonctionnalit de conversion du document bureautique en une page HTML.
Avec cette option, votre logiciel bureautique peut tre considr comme un gnrateur de
code HTML orient interface.
Exemple : la suite bureautique Microsoft Office (word, excel, powerpoint), OpenOffice,
etc.
158
TIC
Annexe A
Avantages :
Pas d'investissement supplmentaire pour l'achat d'un diteur HTML spcialis.
Pas besoin de connatre le langage HTML, ni les fonctionnalits d'un logiciel
diteur HTML, vos connaissances en bureautiques suffisent pour dvelopper un site
web.
Inconvnients :
Les logiciels de bureautique ne proposent pas toutes les fonctionnalits offertes par
le langage de la cration de site Web, leurs utilisations se limites a crer des pages
assez simples dpourvu d'options spcifiques aux pages web (systme de cadres,
liens internes..)
Le code gnrer peut s'avrer dans des cas non conforme au langage HTML
standard.
4. Les diteurs HTML

Les diteurs HTML sont des logiciels spcifiquement conus pour assister les
programmeurs dans le dveloppement de pages web.
Avec ces logiciels on vous offre deux modes de crations de pages web :
1- Le mode graphique : qui se repose sur le principe de Wysiwyg signifie, What You
See is What You Get, autrement dit ce que vous voyez est ce que vous obtenez. Avec
ce mode sans rien connatre aux balises du langage HTML, vous pouvez dsormais
dvelopper des pages Web. En effet la cration des pages se fait d'une faon visuelle
et c'est au logiciel de gnrer en arrire plan toutes les balises ncessaires.
2- Le mode texte (ou code) : au niveau de ce mode, l'diteur HTML est utilise comme
tant un simple diteur de texte enrichi avec quelques assistants de gnration de code
HTML, dont l'utilisation est facultative. La gnration du code va se faire donc ligne
par ligne et sans faire appel une interface.
On peut donner comme exemple dans cette catgorie de logiciels : Macromedia
DreamWeaver, Netscape Navigator Gold, Microsoft Frontpage, Adobe PageMill, Corel,
Symposia...).
5. Les diteurs d'animation

Pour faire face au manque d'animation dans le langage HTML, la socit Macormedia a
propos l'utilisation de deux nouvelles technologies Shockwave et Flash qui peuvent
s'interfacer avec le langage HTML pour crer des sites web avec des fonctionnalits
d'animation assez spectaculaires.
Les fichiers dcr et swf gnrs respectivement par les deux technologies Shockwave et
Flash ne peuvent tre restitus qu' travers l'utilisation de modules lecteurs (des plug'in) qui
doivent s'ajouter aux navigateurs. Ces modules peuvent tre tlchargs gratuitement
d'Internet au site www.macromedia.com.
Les versions rcentes de Netscape et Internet Explorer reconnaissent par dfaut les
extensions dcr et swf.
159
Annexe B
LES SYMBOLES SPECIAUX
L'enregistrement des fichiers Web se fait sous forme de fichiers textes au format ASCII
7 bits, ce qui ne permet pas de coder les caractres accentus et les symboles. Pour
surmonter cette contrainte les spcifications du langage HTML ont associ ces
caractres des symboles (appels entits) commenant par un "&" et finissant par ";".
Dans ce qui suit, une liste non exhaustive, des symboles spciaux et leurs codes
respectifs.
Caractres
Symboles
à ou à
é ou é
é ou è
«
»
#
&
& ou &
<
< ou <
>
> ou >
$
@
%
®
Espace inscable
ou
160
Annexe C
Les objets prdfinis en JavaScript
I.
L'objet String :
1. Gnralits
Une chane (string) est une succession finie de caractres. L'objet String est
caractris par une seule proprit (length) et un ensemble de mthodes permettant sa
manipulation.
2. La proprit length de l'objet String

la proprit length permet de retourner la longueur d'une chane de caractres ou 0 si elle est
vide. Elle s'applique avec la syntaxe suivante:
x=variable.length;
Exemple
Rsultat
Ch = "tunisie";
n = Ch.length ;
n=7
x=("tunisie").length;
x=7
3. Les mthodes de l'objet String

Il faut d'abord bien noter que les caractres sont compts de gauche droite et que la
position du premier caractre est 0. La position du dernier caractre est donc la
longueur (length) de la chane de caractre moins 1; Si la position que vous indiquez
est infrieure zro ou plus grande que la longueur moins 1, Javascript retourne une
chane vide.
La mthode CharAt()
Cette mthode permet de retourner le caractre dune chane dont le rang est donn
en paramtre.
Syntaxe : caractre = chane.charAt(x); x est un entier compris entre 0 et length -1.
Exemple
X="LANGAGE";
R=X.charAt(3);
C=X.charAt(10)
Rsultat
R="G"
C ="" (Le vide)
161
La mthode indexOf()

La syntaxe :
P=Ch.indexOf(Sch,pos);
Elle permet de rechercher (de gauche droite) la premire position d'une sous-chane Sch
dans une chane de caractres donne Ch si elle existe ou -1 dans le cas contraire.
La position pos indique en argument permet de dterminer la position du caractre partir
duquel la recherche est effectue. L'argument pos doit tre compris entre 0 et n-1.
Si cet argument est omis, la recherche dbutera la position 0.
Exemples
Rsultats
Ch="Javascript" ;
Sch="script" ;
P=Ch.indexOf(Sch,0);
P=4
Ch="Javascript" ;
Sch="@" ;
P=Ch.indexOf(Sch);
P=-1
La mthode lastindexOf()

La syntaxe :
P=Ch.lastIndexOf(Sch,pos);
Cette mthode recherche dans une chane de caractres Ch la dernire occurrence d'une sous
chane Sch et retourne sa position si elle existe ou -1 dans le cas contraire.
Il est possible mais facultatif de transmettre comme deuxime paramtre la position pos
partir de laquelle, dans la chane de caractres, la recherche doit commencer.
Exemples
Rsultats
Ch="Javascript" ;
Sch="a" ;
P=Ch.LastIndexOf(Sch,0);
P=3
Ch="Javascript" ;
Sch="@" ;
P=Ch.LastIndexOf(Sch);
P=-1
La mthode substr

La syntaxe :
Sch=Ch.substr(P,Nbr);
Cette mthode permet d'extraire d'une chane donne Ch, une sous chane de caractres Sch
partir d'une position dtermine P et d'une longueur dtermine Nbr.
Le paramtre Nbr peut tre omis de faon inclure tous les caractres jusqu la fin de la chane.
162
TIC
Annexe C
Exemples
Rsultats
Ch="Javascript" ;
Sch1 = Ch.substr(3,3);
Sch2 = Ch.substr(1);
Sch1 ="vas"
Sch2 = "avascript"
La mthode toLowerCase()

La syntaxe :
R=Ch.toLowerCase();
Cette mthode transforme une chane de caractres Ch en minuscule.
Exemple
Rsultat
Ch="JAVASscript" ;
Ch=Ch.toLowerCase();
Ch="javascript"
La mthode toUpperCase()

La syntaxe :
R=Ch.toUpperCase();
Cette mthode transforme une chane de caractres Ch en majuscule.
Exemple
Rsultat
Ch="JAVASscript" ;
Ch=Ch.toUpperCase();
Ch="javascript"
La mthode concat()

La syntaxe :
Ch=Ch1.concat(Ch2);
Cette mthode permet de concatner une chane de caractres Ch1 avec une autre Ch2.
Exemples
Rsultats
Ch1="Java"
Ch2="Script"
Ch3=Ch1.concat(Ch2);
Ch4=Ch2.concat(Ch1);
Ch3="JavaScript"
Ch4="ScriptJava"
163
II.
L'objet Array :
1. Gnralits
L'objet Array est conu comme "conteneur" pour des variables de mme nature.
2. Dclaration
Pour dclarer une variable du type tableau on doit respecter l'un des trois schmas suivants :
Schma
Syntaxe
Exemple
NomObjet= new Array();
T=new Array();
NomObjet= new Array(nombre);
T=new Array(10);
NomObjet= new Array(val1, val2);
T=new Array("A","B","C");
- On utilise le schma 1 si on ne sait pas encore au moment de la dfinition combien

d'lments doivent tre stocks dans le tableau.
- On utilise le schma 2 si on sait dj au moment de la dfinition combien d'lments
doivent tre stocks dans le tableau.
- On Utilise le schma 3, pour remplir tout de suite le tableau avec des valeurs de dpart.
- Pour les schmas 1 et 2, les diffrentes cases du tableau restent vides jusqu' ce qu'une
valeur leur soit attribue au cours du programme.
- La proprit length : elle permet de calculer le nombre d'lments dans un tableau.
Elle s'applique avec la syntaxe suivante : Taille=NomObjet.length;
Exemples
<HTML>
<HEAD>
<TITLE>Tableau</TITLE>
var T= new Array();
alert("T[0]=1");
for(i=1;i<10;i++)
{T[i]=T[i-1]*2;
alert("T["+i+"]="+T[i]);}
alert(T.length + " nombres sont dfinis");
</script>
</HEAD>
<BODY>
</BODY>
</ HTML>
164
TIC
Annexe C
3. Les mthodes de l'objet Array

La mthode concat()
Elle permet de former un tableau en provenance de la concatnation de deux autres. Elle
s'applique avec la syntaxe suivante : ObjetTab=ObjetTab1.concat(ObjetTab2);
Exemple
Rsultat
Var A = new Array(1,2,3);

var B = new Array(10,20,30);
C= A.concat(B);
C =(1, 2, 3, 10, 20, 30)
La mthode join ()
Cette mthode transforme un tableau T en chane de caractres Ch et exploite un paramtre
de sparation S par lequel les lments du tableau doivent tre spars dans la chane de
caractres. Cette mthode s'applique avec la syntaxe suivante : Ch=T.join("S");
Exemple
Rsultat
Var T = new Array(1,2,4,8,16,32);

var ch = T.join(":");
Ch = "1:2:4:8:16:32"
La mthode pop ()

Cette mthode permet d'effacer le dernier lment d'un tableau T et modifie ainsi son
nombre d'lments. Cette mthode s'applique avec la syntaxe suivante : T.pop();
Exemple
Rsultat
Var T = new Array(1,2,4,8,16,32,64,128,256);

T.pop(); T.pop();
T=(1,2,4,8,16,32,64)
La mthode push ()

Cette mthode ajoute un ou plusieurs lments la fin d'un tableau T et utilise comme
paramtre un ou plusieurs lments ajouter et retourne la nouvelle taille du tableau.
Elle s'applique avec la syntaxe suivante :
Taille=T.push("lment1","lment2",.,"lmentn");
Exemple
Rsultat
T=new Array("UN");
N=T.Push("10","397","654","Info");
N=5
165
La mthode reserve ()
Cette mthode permet d'inverser l'ordre des lments d'un tableau T. Le premier lment
devient le dernier, le dernier devient le premier et ainsi de suite Elle s'applique avec la
syntaxe suivante : T.reverse()
Exemple
Rsultat
T=new Array("S","C","R","I","P","T");
T.reverse()
T=("T","P","I","R","C","S")
La mthode Shifft ()
Cette mthode permet de retirer le premier lment d'un tableau T. Les lments qui suivent
sont dcals vers l'avant. Elle s'applique avec la syntaxe suivante : elementretire = T.shift();
Exemple
Rsultat
A=T.shift();
T=("C","R","I","P","T")
A="S"
La mthode Silice ()
Cette mthode permet d'extraire une partie d'un tableau T. Attend comme paramtre le numro
d'index du premier et du dernier lment extraire. La mthode renvoie les lments
extraits sous forme dun nouveau tableau. Elle s'applique avec la syntaxe suivante :
R = T.slice(indexdbut,indexfin);
Exemple
Rsultat
R=T.slice(2,5);
T=("C","R","I","P")
La mthode sort ()
Cette mthode permet de trier les lments d'un tableau. Si vous ne transmettez aucun
paramtre, le tri se fait alphabtiquement, les valeurs numriques sont transformes
automatiquement en chanes de caractres et tries en tant que telles. Dans le cas o vous
voulez trier des valeurs numriques, vous pouvez dfinir une fonction de comparaison et
transmettre son nom comme paramtre. Cette mthode s'applique avec la syntaxe suivante :
Exemple
T.sort();
T=new Array(14,7,66,19,33);
function compare(a,b);
{ return a-b; }
T.sort(compare);
Rsultat
T=("C","I","P","R","S","T")
T=(7,14,19,33,66)
166
TIC
Annexe C
4. Tableau deux dimensions

On peut crer des tableaux deux dimensions (et plus encore) par un petit artifice de
programmation.
On dclare d'abord un tableau 1 dimension de faon classique :
nom_du_tableau = new Array (x);
Ensuite, on dclare chaque lment du tableau comme un tableau 1
dimension : nom_du_tableau[i] = new Array(y);
Exemple : On peut crer une page Web permettant d'utiliser un formulaire pour afficher
une matrice carre d'ordre 3 et contenant les donnes suivantes, en tapant le code
suivant :
TRIM1 TRIM2 TRIM3
PROG
10
11
13
TIC
13
9
12
SGDB
14
12
16
<HTML>
<HEAD><TITLE>Test</TITLE>
function affi() {
M = new Array(3);
M[0] = new Array(3);
M[0][0]="10"; M[0][1]="11"; M[0][2]="13";
M[1][0]="13"; M[1][1]="9"; M[1][2]="12";
M[2][0]="14"; M[2][1]="12"; M[2][2]="16"
j = document.form.TRIM.selectedIndex;
i= document.form.MAT.selectedIndex
document.form.txt.value=M[i][j];
}
</script>
</HEAD>
<BODY>
<FORM name="form" >
<SELECT NAME="TRIM">
<OPTION>Trim1<OPTION>Trim2<OPTION>Trim3</SELECT>
<SELECT NAME="MAT">
<OPTION>PROG <OPTION>TIC<OPTION>SGBD</SELECT>
<INPUT TYPE="button" VALUE="Donner la moyenne" onClick="affi(this.form)">
<INPUT TYPE="TEXT" NAME="txt">
</FORM>
</BODY>
</HTML>
167
III.
L'objet Math :
1. Les mthodes de l'objet Math

La mthode abs ()
La mthode abs() renvoie la valeur absolue (valeur positive) de l'argument.
Exemple
Rsultat
X=-12;
Y=Math.abs(X);
Y=12
La mthode ceil ()

La mthode ceil() renvoie l'entier suprieur ou gal l'argument.
Exemple
Rsultat
X=-12,56;
Y=Math.ceil(X);
Y=13
La mthode floor ()

La mthode floor() renvoie l'entier infrieur ou gal l'argument.
Exemple
Rsultat
X=Math.pi;
Y=Math.floor(X);
Y=3
La mthode round ()

La mthode round() arrondit l'argument lentier le plus proche.
Exemple
Rsultat
X=20,335;
Y=Math.round(X);
Y=20
La mthode pow ()

La mthode pow() calcul la puissance dordre y dun nombre x.
Exemple
Rsultat
Z=Math.pow(2,5);
Y=32
La mthode random ()

cette mthode retourne un nombre alatoire entre 0 et 1.
Exemple
Rsultat
X=Math.random();
x= 0,4587643
168
TIC
Annexe C
La mthode sqrt ()

cette mthode sqrt() renvoie la racine carre dun nombre>= 0.
Exemple
Rsultat
X=16;
Y=Math.sqrt(X);
Y= 4
La mthode parseFloat ()

Cette Mthode convertit une chane contenant un nombre en une valeur numrique relle
dans la mesure du possible.
Lanalyse se fait de gauche droite. Si lun des caractres ne peut pas tre considr
comme valeur numrique, lanalyse sarrte et la valeur retourne correspond aux
premiers caractres analyss. Si le premier caractre pose problme la fonction retourne
la valeur NaN (Not a Number).
Exemple
Rsultat
A="1.399";
B="a15";
X=Math.parseFloat(A);
Y=Math.parseFloat(B);
X=1.399
Y= NaN
La mthode parseInt ()

Cette Mthode convertit une chane contenant un nombre en une valeur numrique entire
dans la mesure du possible.
Lanalyse se fait de gauche droite. Si lun des caractres ne peut pas tre considr
comme valeur numrique, lanalyse sarrte et la valeur retourne correspond aux
premiers caractres analyss. Si le premier caractre pose problme la fonction retourne
la valeur NaN (Not a Number).
Exemple
Rsultat
A="12.45";
Y=Math.parseInt(A);
Y= 12
La mthode eval ()

Cette mthode value une chane de caractres sous forme de valeur numrique. On peut
stocker dans la chane des oprations numriques, des oprations de comparaison, des
instructions et mme des fonctions.
Exemple
Rsultat
X="34+25*2";
Y=Math.eval(X);
Y= 84
169
2- Les fonctions trigonomtriques

Mthode
Rle
Math.PI;
La constante
Math.sin(y);
La fonction sinus
Math.asin(y);
La fonction arcsinus
Math.cos(y);
La fonction cosinus
Math.acos(y);
La fonction arccosinus
Math.Tan(y);
La fonction tangente
Math.atan(y);
La fonction arctangente
3- Les fonctions logarithmques

Mthode
Rle
Math.exp(y);
La fonction Exponentiel
Math.log(y);
La fonction Logarithme
Math.E;
La constante _
170
TIC
Annexe C
IV.
L'objet Date :
1. Les mthodes de l'objet Date

La mthode new Date ()
Cette mthode renvoie la date et l'heure systme.
variable = new Date();
Ces informations sont enregistres par Javascript sous le format :
"Mon Dec 10 09:23:30 2007"
La mthode getYear()
variable_date = new Date();
an = variable_date.getYear();
Retourne les deux derniers chiffres de l'anne dans variable_date. Soit ici 07.
La mthode getMonth()
mois = variable_date.getMonth();
Retourne le mois dans variable_date sous forme d'un entier compris entre 0 et 11
(0 pour janvier, 1 pour fvrier, 2 pour mars, etc.).
La mthode getDate()
jourm = variable_date.getDate();
Retourne le jour du mois dans variable_date sous forme d'un entier compris entre 1 et 31.
La mthode getDay()
jours = variable_date.getDay();
Retourne le jour de la semaine dans variable_date sous forme d'un entier compris entre 0 et
6 (0 pour dimanche, 1 pour lundi, 2 pour mardi, etc.).
La mthode getHours()
HRS = variable_date.getHours();
Retourne l'heure dans variable_date sous forme d'un entier compris entre 0 et 23.
La mthode getMinutes()
variable_date=new Date();
min=variable_date.getMinutes();
Retourne les minutes dans variable_date sous forme d'un entier compris entre 0 et 59.
La mthode getSeconds()
variable_date=new Date();
sec=variable_date.getSeconds();
Retourne les secondes dans variable_date sous forme d'un entier compris entre 0 et 59.
171
V.
L'objet Window :
1. La gestion des boites de dialogue ou de message

Javascript met votre disposition 3 boites de message : alert(), prompt() et confirm()
La mthode alert()
La mthode alert() affiche une boite de dialogue dans laquelle est reproduite la valeur
(variable et/ou chane de caractres) de l'argument qui lui a t fourni. Cette boite bloque le
programme en cours tant que l'utilisateur n'aura pas cliqu sur "OK".
Sa syntaxe est :
alert(variable); ou alert("chane"); ou alert(variable + "chane de caractres");
Si vous souhaitez crire sur plusieurs lignes, il faudra utiliser le signe \n.
La mthode prompt()
La mthode affiche une boite d'invite, compose d'un champ comportant une entre
complter par l'utilisateur. Cette entre possde aussi une valeur par dfaut.
La syntaxe est : prompt("texte de la boite d'invite","valeur par dfaut");
En cliquant sur OK, la mthode renvoie la valeur tape par l'utilisateur ou la rponse
propose par dfaut. Si l'utilisateur clique sur Annuler ou Cancel, la valeur nulle est alors
renvoye.
La mthode confirm()
Cette mthode affiche 2 boutons "OK" et "Annuler". En cliquant sur OK, confirm() renvoie
la valeur true et bien entendu false si on a cliqu sur Annuler. Ce qui peut permettre, par
exemple, de choisir une option dans un programme.
La syntaxe de l'exemple est : confirm("Voulez-vous continuer ?")
2. La gestion des minuteries

Javascript met votre disposition une minuterie (ou plus prcisment un compteur rebours)
qui permettra de dclencher une fonction aprs un laps de temps dtermin.
La syntaxe de mise en route du temporisateur est :
nom_du_compteur = setTimeout("fonction_appele()", temps en milliseconde)
Ainsi, setTimeout("demarrer()",5000) va lancer la fonction demarrer() aprs 5 secondes.
Pour arrter le temporisateur avant l'expiration du dlai fix, il y a :
clearTimeout(nom_du_compteur)
172
TIC
Annexe C
3. La gestion des frames

En Javascript, nous nous intresserons la capacit des cadres interagir. C'est dire la
capacit d'changer des informations entre les frames.
Les proprits
Proprits
Description
length
Retourne le nombre de frames subordonns dans un cadre

"crateur".
parent
Synonyme pour le frame "crateur".
Exemple d'change d'informations entre frames :

Par l'exemple suivant, nous allons transfrer une donne introduite par l'utilisateur dans une
frame, dans une autre frame.
La page "cratrice" contient deux frames subordonns "enfant1" et "enfant2".
La page "cratrice" des frames
Le fichier enfant2.htm
<HTML>
<HEAD>
</HEAD>
<FRAMESET rows ="30%,70%">
<FRAME src ="enfant1.htm" name="enfant1">
<FRAME src ="enfant2.htm" name="enfant2">
</FRAMESET>
</HTML>
<HTML>
<BODY>
<FORM name="form2">
<INPUT type ="text" name ="z2" >
</FORM>
</BODY>
</HTML>
Le fichier enfant1.htm
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function affi()
{parent.enfant2.document.form2.z2.value=document.form1.z1.value; }
</SCRIPT>
</HEAD>
<BODY>
Entrez une valeur et cliquez sur "Envoyer".
<FORM name ="form1" >
<INPUT type ="text" name ="z1">
<INPUT type ="button" value ="Envoyer" onClick="affi()">
</FORM>
</BODY>
</HTML>
173
4. La gestion des fentres des navigateurs

Utilisation de la barre d'tat
Avec Javascript, la barre d'tat (petite bande situe au bas de la fentre du browser et qui vous
informe sur l'tat des transferts et des connections) peut tre utilise pour afficher des
messages de votre cru.
Les proprits mises en oeuvre sont :
Proprits
Status
DefaultStatus
Description
valeur du texte affich dans la barre d'tat de la fentre.

valeur par dfaut qui s'affiche dans la barre d'tat.
Gnralement, cet vnement est mis en oeuvre par un onmouseOver() sur un lien hypertexte.
En voici un exemple :
<HTML>
<BODY>
<A href="#" onmouseover="window.status='Votre texte'; return true;"> A voir ici </A>
</BODY>
</HTML>
Ouverture et fermeture de fentres
Les mthodes mises en oeuvre sont :
Mthodes
Description
open()
ouvre une nouvelle fentre.
close()
ferme la fentre en cours.
La syntaxe est :
[window.]open("URL","nom_de_la_fentre","caractristiques_de_la fentre")
o URL est l'URL de la page que l'on dsire afficher dans la nouvelle fentre. Si on ne dsire
pas afficher un fichier htm existant, on mettra simplement ''".
o caractristiques_de_la_fentre est une liste de certaines ou de toutes les caractristiques
de fentre suivantes que l'on note la suite, spares par des virgules et sans espaces ni
passage la ligne.
174
TIC
Annexe C
Rle
Mthode
toolbar=yes ou no
Affichage de la barre d'outils
Location=yes ou non
La fonction sinus
Directories=yes ou no);
Affichage des boutons d'accs rapide
status=yes ou no
Affichage de la barre d'tat
Menubar=yes ou no
Affichage de la barre menu
Resizable=yes ou no
Dimensions de la fentre modifiables
Width=x en pixels
Largeur de la fentre en pixels
height=y en pixels
Hauteur de la fentre en pixels
On peut aussi utiliser 1 ou 0 au lieu de yes ou no.
175
Bibliographie et Webographie

Programmation HTML et JavaScript - Philippe Chaleat, Daniel Charnay - Eyrolles - 2000.

Pro Javascript Techniques - De John Resig - Apress - Dcembre 2006
Learning JavaScript - De Shelley Powers - O'Reilly - Novembre 2006
JavaScript - Le guide complet - De Olivier Hondermarck - Micro Application - Octobre 2006
PHP/MySQL et Javascript - De Philippe Chalat, Daniel Charnay et Jean-Ren Rouet Eyrolles - Juin 2005
PHP 5 avanc - De Eric Daspet et Cyril Pierre de Geyer - Eyrolles - Septembre 2006
Site web marchand en PHP/MySQL - De Jean-Marc Herellier - Micro Application - Aot 2006
PHP 5 - De Stphane Brissaud - Micro Application - Dcembre 2006
PHP 5 - MySQL 5 - De Alexandre Tranchant, Damien Desrousseaux et Nicolas Bertelle Micro Application - Dcembre 2006
Javascript pour les nuls (format poche) - De Emily A. Vander Veer - First Interactive - Fvrier 2005
HTML & Javascript - De Stphane Maccari et Sbastien Martin - Micro Application - Juin 2004
JavaScript : bien dbuter - De Marin Maier - Comptence Micro - Juin 2000
http://www.imaginet.fr/ime/nethtm2.htm
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html
www.commentcamarche.net
http://www.ext.upmc.fr/urfist/html/html.htm
http://www.htmlsimple.com
http://www.htmlcodetutorial.com
http://www.aliasdmc.fr
http://animation.flash.free.fr
http://captinfo.free.fr
http://www.bugalood.be
http://www.cgi-ressources.com
http://www.ccim.be/ccim328/js/index.htm
http://javascript.internet.com
http://zazou.chez-alice.fr
http://www.hotscripts.com
http://fr.php.net
http://www.microsoft.com/france/education/ressources_pedagogiques.asp
http://applications-reseaux.aforumfree.com/profile.forum
http://www.enterweb.org/discus-f.htm
http://www.enseignement.be/prof/dossiers/tice/colloque/
http://www.cafepedagogique.net/index3.php
http://www.agers.cfwb.be/prof/index.asp
http://www.gratissimo.com/gratuit/
http://www.renater.fr/
http://pedagogie.ac-toulouse.fr/nte/visio/visioconf_nte.html
http://www.cerclerh.com/editorial/visioconferencelong10903.as
http://www.cbi-technologies.com/visioconference_video_conference.
www.spieao.uhp-nancy.fr/emois/appel.htm
www.lfss.net
http://www.forumactif.com/fr/Sciences-et-Savoirs/Education-Enseignement-57.htm
http://encyclopedie.linternaute.com/definition/243/11/newsgroup.shtml
176

4 SI Technologie

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

4 SI Technologie

Hochgeladen von

Copyright:

Verfügbare Formate

Rpublique Tunisinne

Ministre de lEducation et de la Formation

me anne de lenseignement secondaire

Inspecteur des coles

Ali Essghaier DELHOUMI

Kamel BEN RHOUMA

Inspecteur des coles

Centre National Pdagogique

Tous droits rservs au Centre National Pdagogique

Ali Essghaier DELHOUMI

Site Web Statistique

- Pages Web Statiques

- Pages Web dynamiques

II. Applications dans un rseau local

IV. Visio - Confrence

Applications dans un rseau local :

Figure . I-1 : exemple de thmes proposs par un forum

Figure I-2 : exemple d'enregistrement un forum

Figure I-3 : exemple de rgles respecter

plus du TCP/IP est le NNTP.

Figure I-4 : exemple de sites permettant la cration gratuite d'un forum

Figure I-5 : exemple de forums

Dans la littrature, on trouve parfois le terme vidoconfrence au

lieu du terme visioconfrence. Il s'agit en fait de la traduction

3) Modes d'utilisation de la visioconfrence

Les visioconfrences en mode broadcast sont utilises dans

plusieurs domaines tels que : le tlenseignement, la tlmdecine,

Ce type de visioconfrence est trs conomique mais de moindre qualit. Beaucoup

Figure I-6 : Architecture gnrale d'une visioconfrence hybride

Figure I-7 : exemple d'appareil de visioconfrence

Un CODEC est un dispositif assurant :

Figure I-8 : exemples de meubles de visioconfrence

Figure I-9 : exemples de salle ou studio de visioconfrence

Figure I-10 : exemple de visioconfrence utilisant Internet et une WebCam

Il y a cinq types de visioconfrence :

Selon le type de la visioconfrence, de outils matriels et logiciels spcialiss sont

Les volutions actuelles

Production lectronique avance

Partie B : Pages Web Statiques

Partie C : Pages Web dynamiques

Production lectronique avance

II. Prsentation de l'interface de Flash :

Figure II-1 : Prsentation de l'interface de Macromedia Flash

La barre des menus

La barre d'outils principale

Les panneaux affichs

L'inspecteur des proprits

Pour masquer le scnario, il suffit de cliquer dessus.

l'indice de l'image courante, etc.

III. Les lments d'affichage :

Production lectronique avance

Figure II-2 :La dfinition des proprits de la grille

Modifier les dimensions, pivoter et incliner l'lment slectionn

Afficher et modifier les couleurs, le type de dgrad, et le paramtre Alpha de

Afficher et changer l'alignement de l'lment actif.

Afficher et modifier les proprits de l'lment slectionn ou actif.

Afficher et accder aux lments dj mis dans la bibliothque (Symbole, Son,

Associer une action un lment de l'animation

Grer les squences de votre animation.

Afficher les tches dj effectues.

Il est possible de grouper plusieurs panneaux ensemble.

commande autres panneaux du menu Fentre. Le panneau Bibliothque

IV. Les lments d'une animation flash: