Vous êtes sur la page 1sur 7

BTS Informatique de gestion 1 re année

Frédérique Parisot

de gestion 1 r e année Frédérique Parisot Programmation orientée Web Cours Directrice de publication

Programmation orientée Web

Cours

Directrice de publication : Valérie Brard-Trigo

Les cours du Cned sont strictement réservés à l’usage privé de leurs destinataires et ne sont pas destinés à une utilisation collective. Les personnes qui s’en serviraient pour d’autres usages, qui en feraient une reproduction intégrale ou partielle, une traduction sans le consentement du Cned, s’exposeraient à des poursuites judiciaires et aux sanctions pénales prévues par le Code de la propriété intellectuelle. Les reproductions par reprographie de livres et de périodiques protégés contenues dans cet ouvrage sont effectuées par le Cned avec l’autorisation du Centre français d’exploitation du droit de copie (20, rue des Grands Augustins, 75006 Paris).

Table des matières

Conseils généraux

 

7

Séquence 1

 

Présentation générale de la POW

9

1.

Les différents types de sites Web

 

12

1A. Les sites statiques 1B. Les sites dynamiques 1C. Les applications Web

12

13

15

 

1C1

Présentation

15

1C2

Les.différents.modèles.d’architecture.d’applications.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.père.de.tous.les.langages.de.description.de.pages.Web

18

2A4

Donner.du.style.à.nos.pages.avec.CSS

19

2B. Utilisation de programmes s’exécutant sur le poste client

19

 

2B1

Utilisation.de.scripts.clients

. 20 . . 20 . . 20 . . 21 . . 24 .

2B2

Utilisation.d’applets

2B3

La.troisième.solution.:.les.plug-in

2B4

Utilisation.de.cookies

2B5

Recette.des.cookies

2C. Utilisation de programmes s’exécutant sur le serveur

 

25

 

2C1

Utilisation.de.langages.de.script.pour.serveur

25

2C2

Utilisation.de.l’interface.CGI

. 26 .

2D. Utiliser des plate-formes de développement 2E. Et la sécurité dans tout ça ?

26

27

Séquence 2

 

Initiation à HTML

29

1. Tout d’abord, quels outils utiliser dans cette séquence ?

 

29

2. Présentation du langage HTML

31

3. Les principes de base

32

3A. Structure de base d’un fichier HTML

32

3B. éléments de base d’une page HTML 3C. Le formatage de texte

33

35

 

3C1

Organisation.de.l’affichage.du.texte

35

3C2

La.mise.en.forme.de.texte

40

3C3

Structuration.des.informations.:.les.listes

44

3C4

Déplacement.horizontal.du.contenu.de.la.page

49

3C5

En.petite.conclusion

49

3D. Les liens

 

49

 

3D1

Prérequis.à.la.notion.de.lien.:.les.URI,.leur.utilité

 

50

3D2

Les.liens.externes

51

3D3

Les.liens.internes

53

 

3D4

Les.ancres.(également.appelées.identifiants.de.fragments)

 

54

3D5

L’attribut.target.de.la.balise.href

54

3D6

Couleurs.des.liens

55

3E. Utilisation d’images dans les documents HTML

56

 

3E1

Les.différents.types.d’images

56

3E2

Comment.afficher.une.image.dans.un.document.HTML.?

56

3E3

Positionnement.d’une.image.dans.un.texte

57

3E4

Choix.de.la.taille.d’une.image

58

3E5

Remplacement.d’une.image.par.du.texte

58

3E6

Modification.du.fond.d’écran.à.l’aide.d’une.image

59

3E7

Possibilités.d’animation

59

3E8

Les.images.réactives

59

3E9

Mieux.que.les.images.réactives,.les.images.mappées

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

63

3F5

Etendue.variable.des.cellules

64

3G. Les frames

 

65

 

3G1

Division.d’une.page.en.cadres

 

66

3G2

Contenu.des.cadres

67

3G3

La.mise.en.forme.des.cadres

70

3G4

Le.problème.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 4B. Page par défaut d’un site 4C. Redirection d’une page vers une autre 4D. Référencer notre site

78

78

78

79

5.

Bon, ben, on a fini cette partie du cours

79

Séquence 3

 

Initiation à javascript

81

1.

Campons le décor

 

81

1A. Utilité du javascript 1B. Où écrit-on les instructions javascript dans une page HTML ?

82

83

2.

Code javascript entre <body> et </body>

 

83

2A. Structure générale 2B. Le premier exemple 2C. Que nous apprend ce premier exemple ? 2D. Allez, un second exemple

83

84

84

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 générale

88

3B. Un exemple

89

4.

Code javascript dans un fichier séparé

90

4A. Syntaxe générale

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 événements utilisateur

94

5A. Un premier exemple

94

5B. Que nous apprend ce premier exemple ?

95

5C. De quels événements dispose-t-on ?

95

 

5C1

L’événement.onClick

95

5C2

L’événement.onChange

96

5C3

L’événement.onFocus

97

5C4

L’événement.onBlur

98

5C5

L’événement.onMouseOver

100

5C6

L’événement.onMouseOut

100

5C7

L’événement.onSelect

100

5C8

Les.événements.onLoad.et.onUnLoad

100

5C9

Les.événements.onReset.et.onSubmit

101

5C10

Récapitulatif.des.événements.étudiés

102

5C11

Les.autres.événements

102

5D. Liens hypertexte et JavaScript

103

 

5D1

La.première.façon

103

5D2

La.deuxième.façon

103

5D3

La.troisième.façon

104

6.

Utilisation des valeurs contenues dans les contrôles

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.troisième.avec.des.calculs

107

6A4

Allez,.encore.un.petit.qui.utilise.deux.fonctions.différentes

109

6B. Manipulations des items d’une liste déroulante

110

 

6B1

Utilisation

110

6B2

Modification

111

6C. Manipulations des checkbox

 

112

 

6C1

Utilisation

112

6C2

Modification

112

6C3

Test

112

6C4

Manipulation.de.la.propriété.checked

113

6D. Manipulation des contrôles radio

 

114

 

6D1

Manipulation.des.radio.ne.faisant.pas.partie.d’un.groupe

114

6D2

Manipulation.de.plusieurs.radio

 

114

6E. Manipulation des contrôles bouton

117

 

6E1

Le.libellé.du.button

 

117

6E2

Activation/désactivation.du.button

 

117

7. Modification des éléments d’un document HTML

118

8. Syntaxe du langage javascript

 

123

8A. Les commentaires

123

8B. Empêcher l’exécution des lignes de script

123

8C. Les variables

124

8D. Les opérations

127

 

8D1

Les.opérations.arithmétiques

 

127

8D2

Les.opérations.de.comparaison

128

8D3

Les.opérateurs.logiques

 

128

8D4

Opération.de.concaténation

 

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

L’instruction.while

 

133

8F2

L’instruction.for

137

8G. Les tableaux

 

139

 

8G1

Déclaration

139

8G2

Affectation.de.valeurs.aux.éléments.d’un.tableau

140

8G3

Les.propriétés.et.méthodes.d’un.tableau

140

8G4

Les.tableaux.à.deux.dimensions

 

142

8H. Les fonctions et procédures

142

9.

La gestion des cookies

 

146

9A. Définition

146

9B. Création, lecture d’un cookie

147

9C. Ce qu’il faut faire pour se faciliter notre vie de développeur

147

9D. Fonctions de création et de lecture d’un cookie

148

10. Et si on complétait notre site avec ce qu’on a appris ?

152

10A. Contrôle de saisie dans le formulaire de la séquence 2

152

10B. Contrôle de saisie dans le formulaire construit dynamiquement

154

10C. Qu’est-ce qu’on pourrait faire d’autre ?

164

11. Une petite conclusion

 

164

Conseils généraux

Bienvenue dans ce support de POW.

Le sigle POW n’est ni la nouvelle façon à la mode pour se dire bonjour, ni un signal de guerre utilisé par les indiens de Basse-Normandie.

Par POW, comprenez : Programmation Orientée Web (autrement dit : programmation pour faire des sites Web).

Ce support a donc pour objectif de vous initier à la programmation de sites Web.

Quand démarrer le travail sur ce support ?

Je dirais que le mieux serait de le démarrer une fois que vous avez dépassé la séquence 6 de votre cours d’algo, car on utilise beaucoup la notion de sous-programme dans la séquence 2 de ce super-support.

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

Zéro ! En effet, il s’agit d’un support dont l’objectif est tourné vers la pratique : je vous présente le plus succinctement possible ce que vous avez besoin de savoir et zou! On fait un TP d’applica- tion.

Comment je compte procéder pour vous initier à la POW ?

C’est une bonne question et je vous remercie de me l’avoir posée.

Je souhaite vous faire développer progressivement un site Web qui utilisera tous les concepts de base de la programmation Web.

J’ai choisi un thème assez classique : il s’agira de développer un site présentant vos CD personnels de musique, vos bandes dessinées, vos DVD, vos livres de chevet

Vous créerez d’abord un site où vous vous contenterez de présenter vos trésors (exemple : le der-

nier 45 tours vinyl de Gantal Choya, cette grande chanteuse suédoise qui a fait une si belle reprise

techno de la traditionnelle chanson française « Herbert, c’est mon frère »

).

Puis, le nombre de visiteurs de votre site vous donnant des idées de grandeur, vos fonds étant en baisse et votre conjoint préféré en ayant assez que vous conserviez ce qu’il appelle avec dédain des vieilleries, vous déciderez de vendre vos trésors et transformerez alors votre site personnel de présentation en un performant site commercial proposant à la vente disques, livres, DVD, etc.

Les visiteurs pourront y passer des commandes, faire des recherches de titres d’ouvrages par auteur, par thème, etc.

7
7

8 3950 TG PA 00

Limites de ce support

Ce support n’a pas la prétention d’être complet, loin s’en faut. Pour qu’il soit complet, il faudrait des milliers et des milliers de pages…

L’objectif est de vous mettre « le pied à l’étrier ».

Pour bien cerner ce qu’est la POW, nous commencerons, dans la séquence 1, par un petit pano- rama des concepts et outils relatifs à la POW.

Dans la suite du support, j’ai prévu une séquence pour chaque technique que je souhaite vous présenter.

Sommaire

Séquence 1 : Présentation générale de la POW

Séquence 2 : Initiation à HTML

Séquence 3 : Initiation à javascript

Alors à tout de suite pour les nouwelles awentures de la POW…

Signé : qui wous sawez, wotre prof de POW.

8
8

8 3950 TG PA 00