Sie sind auf Seite 1von 7

BTS Informatique de gestion 1re anne

Frdrique Parisot

Programmation oriente Web


Cours

Directrice de publication : Valrie Brard-Trigo


Les cours du Cned sont strictement rservs lusage priv de leurs destinataires et ne sont pas destins une utilisation collective. Les personnes
qui sen serviraient pour dautres usages, qui en feraient une reproduction intgrale ou partielle, une traduction sans le consentement du Cned,
sexposeraient des poursuites judiciaires et aux sanctions pnales prvues par le Code de la proprit intellectuelle. Les reproductions par
reprographie de livres et de priodiques protgs contenues dans cet ouvrage sont effectues par le Cned avec lautorisation du Centre
franais dexploitation du droit de copie (20, rue des Grands Augustins, 75006 Paris).

Table des matires


Conseils gnraux...............................................................................................................................7
Squence 1

Prsentation gnrale de la POW

1.Les diffrents types de sites Web .......................................................................................... 12


1A.Les sites statiques ..................................................................................................................... 12
1B.Les sites dynamiques . .............................................................................................................. 13
1C.Les applications Web ............................................................................................................... 15
1C1.Prsentation . ...................................................................................................................... 15
1C2.Les diffrents modles darchitecture dapplications Web .................................................... 16
2.Les outils techniques ................................................................................................................. 17
2A.Les langages de description de pages Web et leurs acolytes ....................................... 17
2A1.HTML, le langage de base de description de pages Web . ................................................... 17
2A2.Le DHTML, pour mettre un peu de vie dans nos pages ....................................................... 18
2A3.XML, le pre de tous les langages de description de pages Web.......................................... 18
2A4.Donner du style nos pages avec CSS ................................................................................ 19
2B.Utilisation de programmes sexcutant sur le poste client ............................................ 19
2B1.Utilisation de scripts clients . ................................................................................................ 20
2B2.Utilisation dapplets ............................................................................................................. 20
2B3.La troisime solution : les plug-in ........................................................................................ 20
2B4.Utilisation de cookies............................................................................................................ 21
2B5.Recette des cookies ............................................................................................................. 24
2C.Utilisation de programmes sexcutant sur le serveur .................................................... 25
2C1.Utilisation de langages de script pour serveur .................................................................... 25
2C2.Utilisation de linterface CGI ............................................................................................... 26
2D.Utiliser des plate-formes de dveloppement .................................................................... 26
2E.Et la scurit dans tout a ? ................................................................................................... 27
Squence 2

Initiation HTML 29

1.Tout dabord, quels outils utiliser dans cette squence ? ................................................ 29


2.Prsentation du langage HTML .............................................................................................. 31
3.Les principes de base ................................................................................................................. 32
3A.Structure de base dun fichier HTML .................................................................................. 32
3B.lments de base dune page HTML ................................................................................... 33
3C.Le formatage de texte ............................................................................................................ 35
3C1.Organisation de laffichage du texte ................................................................................... 35
3C2.La mise en forme de texte .................................................................................................. 40
3C3.Structuration des informations : les listes ............................................................................ 44
3C4.Dplacement horizontal du contenu de la page .................................................................. 49
3C5.En petite conclusion... . ....................................................................................................... 49
3D.Les liens ...................................................................................................................................... 49
3D1.Prrequis la notion de lien : les URI, leur utilit.................................................................. 50
3D2.les liens externes................................................................................................................. 51
3D3.Les liens internes.................................................................................................................. 53

3D4.Les ancres (galement appeles identifiants de fragments)................................................... 54


3D5.Lattribut target de la balise href.......................................................................................... 54
3D6.Couleurs des liens................................................................................................................ 55

3E.Utilisation dimages dans les documents HTML................................................................. 56


3E1.Les diffrents types dimages................................................................................................ 56
3E2.Comment afficher une image dans un document HTML ?.................................................... 56
3E3.Positionnement dune image dans un texte.......................................................................... 57
3E4.Choix de la taille dune image.............................................................................................. 58
3E5.Remplacement dune image par du texte............................................................................. 58
3E6.Modification du fond dcran laide dune image............................................................... 59
3E7.Possibilits danimation......................................................................................................... 59
3E8.Les images ractives.............................................................................................................. 59
3E9.Mieux que les images ractives, les images mappes............................................................ 60
3F.Les tableaux................................................................................................................................. 63
3F1.La balise table....................................................................................................................... 63
3F2.Le titre du tableau................................................................................................................ 63
3F3.Les lignes du tableau............................................................................................................ 63
3F4.Les cellules du tableau et leurs caractristiques..................................................................... 63
3F5.Etendue variable des cellules................................................................................................. 64
3G.Les frames................................................................................................................................... 65
3G1.Division dune page en cadres.............................................................................................. 66
3G2.Contenu des cadres............................................................................................................. 67
3G3.La mise en forme des cadres................................................................................................ 70
3G4.Le problme pos par les navigateurs anciens...................................................................... 71
3G5.Gestion des liens dans les frames......................................................................................... 71
3H.Les formulaires HTML. ............................................................................................................. 73
3H1.La balise <form>.................................................................................................................. 73
3H2.Les composants disponibles.................................................................................................. 73
4.Bon, et si on faisait un site avec nos pages ........................................................................ 78
4A.Pour faire de notre site un site Web.................................................................................... 78
4B.Page par dfaut dun site........................................................................................................ 78
4C.Redirection dune page vers une autre. .............................................................................. 78
4D.Rfrencer notre site. .............................................................................................................. 79
5.Bon, ben, on a fini cette partie du cours . ............................................................................ 79
Squence 3

Initiation javascript

81

1.Campons le dcor........................................................................................................................ 81
1A.Utilit du javascript. ................................................................................................................. 82
1B.O crit-on les instructions javascript dans une page HTML ?. ..................................... 83
2.Code javascript entre <body> et </body>............................................................................ 83
2A.Structure gnrale ................................................................................................................... 83
2B.Le premier exemple.................................................................................................................. 84
2C.Que nous apprend ce premier exemple ?........................................................................... 84
2D.Allez, un second exemple....................................................................................................... 85

2E.Que nous apprend ce second exemple ?............................................................................. 85


2F.Allez, un dernier exemple pour la route.............................................................................. 86
2G.Cet exemple, que nous apprend-il ?. ................................................................................... 87
2G1.La fonction prompt.............................................................................................................. 87
2G2.La classe Window................................................................................................................ 87
2G3.Mise en forme du texte........................................................................................................ 87
3.Code javascript entre <head> et </head>............................................................................. 88
3A.Syntaxe gnrale....................................................................................................................... 88
3B.Un exemple................................................................................................................................. 89
4.Code javascript dans un fichier spar.................................................................................. 90
4A.Syntaxe gnrale....................................................................................................................... 90
4B.Un exemple................................................................................................................................. 90
4C.Cet exemple nous apprend beaucoup de choses, lesquelles ?....................................... 92
4C1.Les commentaires................................................................................................................ 92
4C2.La classe Date...................................................................................................................... 92
5.La gestion des vnements utilisateur.................................................................................. 94
5A.Un premier exemple................................................................................................................. 94
5B.Que nous apprend ce premier exemple ?........................................................................... 95
5C.De quels vnements dispose-t-on ?.................................................................................... 95
5C1.Lvnement onClick............................................................................................................ 95
5C2.Lvnement onChange........................................................................................................ 96
5C3.Lvnement onFocus........................................................................................................... 97
5C4.Lvnement onBlur.............................................................................................................. 98
5C5.Lvnement onMouseOver................................................................................................ 100
5C6.Lvnement onMouseOut................................................................................................. 100
5C7.Lvnement onSelect......................................................................................................... 100
5C8.Les vnements onLoad et onUnLoad................................................................................ 100
5C9.Les vnements onReset et onSubmit................................................................................ 101
5C10.Rcapitulatif des vnements tudis............................................................................... 102
5C11.Les autres vnements..................................................................................................... 102
5D.Liens hypertexte et JavaScript. ............................................................................................ 103
5D1.La premire faon.............................................................................................................. 103
5D2.La deuxime faon............................................................................................................. 103
5D3.La troisime faon.............................................................................................................. 104
6.Utilisation des valeurs contenues dans les contrles. ..................................................... 105
6A.Utilisation des valeurs contenues dans les zones de saisie et de texte..................... 105
6A1.Un premier exemple........................................................................................................... 106
6A2.Un second exemple............................................................................................................ 106
6A3.Allez, un petit troisime avec des calculs............................................................................ 107
6A4.Allez, encore un petit qui utilise deux fonctions diffrentes................................................ 109
6B.Manipulations des items dune liste droulante............................................................. 110
6B1.Utilisation........................................................................................................................... 110
6B2.Modification....................................................................................................................... 111
6B3.Ajout.................................................................................................................................. 111

6C.Manipulations des checkbox. ............................................................................................... 112


6C1.Utilisation........................................................................................................................... 112
6C2.Modification....................................................................................................................... 112
6C3.Test.................................................................................................................................... 112
6C4.Manipulation de la proprit checked................................................................................ 113
6D.Manipulation des contrles radio....................................................................................... 114
6D1.Manipulation des radio ne faisant pas partie dun groupe.................................................. 114
6D2.Manipulation de plusieurs radio......................................................................................... 114
6E.Manipulation des contrles bouton. .................................................................................. 117
6E1.Le libell du button............................................................................................................. 117
6E2.Activation/dsactivation du button...................................................................................... 117
7.Modification des lments dun document HTML............................................................ 118
8.Syntaxe du langage javascript............................................................................................... 123
8A.Les commentaires.................................................................................................................... 123
8B.Empcher lexcution des lignes de script......................................................................... 123
8C.Les variables.............................................................................................................................. 124
8D.Les oprations.......................................................................................................................... 127
8D1.Les oprations arithmtiques.............................................................................................. 127
8D2.Les oprations de comparaison.......................................................................................... 128
8D3.Les oprateurs logiques...................................................................................................... 128
8D4.Opration de concatnation............................................................................................... 128
8E.Les structures conditionnelles............................................................................................... 129
8E1.La structure Si... Alors... Sinon... FinSi................................................................................. 129
8E2.La structure SelonCas... Faire.............................................................................................. 130
8F.Les boucles................................................................................................................................. 133
8F1.Linstruction while............................................................................................................... 133
8F2.Linstruction for................................................................................................................... 137
8G.Les tableaux.............................................................................................................................. 139
8G1.Dclaration........................................................................................................................ 139
8G2.Affectation de valeurs aux lments dun tableau.............................................................. 140
8G3.les proprits et mthodes dun tableau............................................................................ 140
8G4.Les tableaux deux dimensions......................................................................................... 142
8H.Les fonctions et procdures.................................................................................................. 142
9.la gestion des cookies. ............................................................................................................ 146
9A.dfinition.................................................................................................................................. 146
9B.Cration, lecture dun cookie............................................................................................... 147
9C.Ce quil faut faire pour se faciliter notre vie de dveloppeur..................................... 147
9D.Fonctions de cration et de lecture dun cookie............................................................. 148
10.Et si on compltait notre site avec ce quon a appris ?................................................. 152
10A.Contrle de saisie dans le formulaire de la squence 2.............................................. 152
10B.Contrle de saisie dans le formulaire construit dynamiquement............................. 154
10C.Quest-ce quon pourrait faire dautre ? ........................................................................ 164
11.Une petite conclusion............................................................................................................. 164

Conseils gnraux
Bienvenue dans ce support de POW.
Le sigle POW nest ni la nouvelle faon la mode pour se dire bonjour, ni un signal de guerre
utilis par les indiens de Basse-Normandie.
Par POW, comprenez : Programmation Oriente Web (autrement dit : programmation pour faire
des sites Web).
Ce support a donc pour objectif de vous initier la programmation de sites Web.

Quand dmarrer le travail sur ce support ?


Je dirais que le mieux serait de le dmarrer une fois que vous avez dpass la squence 6 de
votre cours dalgo, car on utilise beaucoup la notion de sous-programme dans la squence 2 de
ce super-support.

Et combien de devoirs il va falloir rendre relativement ce support POW ?


Zro! En effet, il sagit dun support dont lobjectif est tourn vers la pratique : je vous prsente
le plus succinctement possible ce que vous avez besoin de savoir et zou! On fait un TP dapplication.

Comment je compte procder pour vous initier la POW ?


Cest une bonne question et je vous remercie de me lavoir pose.
Je souhaite vous faire dvelopper progressivement un site Web qui utilisera tous les concepts de
base de la programmation Web.
Jai choisi un thme assez classique : il sagira de dvelopper un site prsentant vos CD personnels
de musique, vos bandes dessines, vos DVD, vos livres de chevet...
Vous crerez dabord un site o vous vous contenterez de prsenter vos trsors (exemple : le dernier 45 tours vinyl de Gantal Choya, cette grande chanteuse sudoise qui a fait une si belle reprise
techno de la traditionnelle chanson franaise Herbert, cest mon frre...).
Puis, le nombre de visiteurs de votre site vous donnant des ides de grandeur, vos fonds tant en
baisse et votre conjoint prfr en ayant assez que vous conserviez ce quil appelle avec ddain
des vieilleries, vous dciderez de vendre vos trsors et transformerez alors votre site personnel de
prsentation en un performant site commercial proposant la vente disques, livres, DVD, etc.
Les visiteurs pourront y passer des commandes, faire des recherches de titres douvrages par
auteur, par thme, etc.

8 3950 TG PA 00

Limites de ce support
Ce support na pas la prtention dtre complet, loin sen faut. Pour quil soit complet, il faudrait
des milliers et des milliers de pages
Lobjectif est de vous mettre le pied ltrier .
Pour bien cerner ce quest la POW, nous commencerons, dans la squence 1, par un petit panorama des concepts et outils relatifs la POW.
Dans la suite du support, jai prvu une squence pour chaque technique que je souhaite vous
prsenter.

Sommaire
Squence 1 : Prsentation gnrale de la POW
Squence 2 : Initiation HTML
Squence 3 : Initiation javascript
Alors tout de suite pour les nouwelles awentures de la POW
Sign : qui wous sawez, wotre prof de POW.

8 3950 TG PA 00