BIENVENUE

…

 et 

 texte 

 Matricule



Nom



Salaire



1004



Sohail Khalid



5000



1005



Samih Omar



6500



2006



Ayyach Said



7000

texte

1. texte
2. texte
3. texte
…..

1. HTML
2. JAVASCRIPT
3. Active Server Pages (ASP)

…

• texte
• texte
• texte
….

. Exemple: Navigateurs:
• Netscape Communicator


©

37

La programmation WEB

2005/2006


• Microsoft Internet Explorer
• Mozilla


1.6.

Balises d’hyperliens

1.6.1. Les liens HTML (HyperText Markup Language) est un langage hypertexte (et hypergraphique) qui permet en cliquant sur un mot, généralement souligné (ou une image) de passer:
vers un autre endroit du document.
vers un autre fichier HTML situé sur votre ordinateur.
vers un autre fichier HTML situé sur le Web. Pour spécifier un lien on utilise la balise dont la syntaxe simplifiée est : texte et/ou image Selon la valeur de l'attribut HREF on peut dégager trois types de lien: •

Lien externe: Permet d'accéder à un autre ordinateur situé sur le réseau Internet en utilisant son adresse ou URL (Universal Ressource Locator). Ce sont les adresses du type : http://serveur/chemin.../fichier

Pour accéder à des pages Web

ftp://serveur/chemin.../fichier

Pour faire un transfert de fichiers

mailto:utilisateur@hôte

Pour envoyer un mail

Exemples:

Microsoft Ecrire à Amine

•

Lien local: Permet de charger un fichier HTML situé dans le même répertoire que le fichier contenant le lien (fichier appelant). L'adresse du lien sera alors tout simplement: fichier.html

Exemple: •

Pour des Informations cliquer ici

Lien mixte: C'est un lien vers un fichier situé à un autre endroit de votre ordinateur, et donc non situé dans le répertoire de votre site (contenant le fichier appelant). L'adresse prendra la forme file:///lecteur:/répertoire/fichier.htm (en adressage absolu). ../../../fichier.htm

Exemples:

(en adressage relatif).

1- Cours n°1 2- Des Astuces Intéressants

©

38

La programmation WEB

2005/2006

3- exercice N°1 Dans le deuxième exemple, si le fichier contenant le lien se trouve dans le répertoire c:\formation\supports, alors, pour que le lien marche, le fichier astuces.html doit se trouver dans le répertoire c:\formation\astuce Il faut noter donc que "../ " vous ramène "d'un répertoire en arrière" (vers le répertoire parent du répertoire courant). Dans le troisième exemple, si le fichier contenant le lien se trouve dans le répertoire c:\formation\supports, alors il faut que: - Le répertoire exercices soit un sous répertoire du répertoire supports c’est à dire on doit avoir le répertoire c:\formation\supports\exercices - Le fichier exercices.html se trouve dans c:\formation\supports\exercices

1.6.2. Les ancres Des liens peuvent aussi pointer vers un endroit précis du même ou d'un autre document. C'est ce qu'on appelle les ancres [Anchor], ancrages ou pointeurs Pour définir l'endroit vers lequel on veut pointer (ou point d'ancrage), on utilise la balise avec l'attribut NAME: Exemple:

cible

Programme de formation: Ce programme vise à former des experts en génie logiciel et …..

L'ancre "activ" peut donc être utilisé par un lien pour accéder directement à l'endroit déterminé. Deux situations se posent: 1) Si le lien se trouve dans le même document que l'ancre alors la syntaxe de ce lien est: texte et/ou images Exemple:



SOMMAIRE

* Introduction * Ressources humaines * Programme de Formation

2) Si le lien se trouve dans un autre document que l'ancre, la syntaxe du lien est: texte et/ou images Exemple:
Soit etude.html un fichier contenant un ancre "info" défini par: Information Pratique …
Pour accéder à cette ancre à partir d'un autre document on utilise, par exemple, le lien:

©

39

La programmation WEB

2005/2006

des informations qui vous intéressent

1.7.

Les images

Sans images, le Web n'aurait pas sans doute connu son succès actuel. Le visiteur est souvent attiré par le contenu graphique. Le placement d'une image sur une page Web est très simple, il suffit pour cela d'utiliser une seule balise HTML. Les nombreux attributs que cette balise peut contenir donnent un contrôle très précis de l'image insérée. Mais avant d'insérer une image sur une page Web, il faut:
Cerner l'idée à exprimer.
Trouver l'image qui l'exprime le mieux.
Déterminer le format le plus appropriée (GIF, JPEG) Généralement, il y a quatre types d'utilisations des images sur des pages WEB:
Les photos de personnes, de produits, de lieux, …
Les bandeaux, et les logotypes.
Les boutons ou icônes.
Les textures d'arrière-plan ou papiers peints qui forment le fond des pages.

La balise Cette balise permet de placer une image sur une page Web. C'est une balise qui peut recevoir les attributs suivants: Attribut SRC WIDTH HEIGHT BORDER ALT

ALIGN HSPACE VSPACE

Fonction Spécifie l'URL (chemin) du fichier qui contient l'image. Spécifie la largeur de l'image en pixels. Spécifie la hauteur de l'image en pixels. Définit l'épaisseur du cadre de l'image Spécifie le texte de remplacement de l'image destiné pour les navigateurs Non graphiques ou dans lesquels l'utilisateur a désactivé le chargement des images. Gère l'alignement du texte adjacent à l'image. Définit l'espace qui sera réservé à droite et à gauche de l'image. Définit l'espace qui sera réservé en haut et en bas de l'image.

Syntaxe de : ©

40

La programmation WEB

2005/2006

Attributs indispensables: Techniquement, SRC est le seul attribut obligatoire dans une balise , mais on peut considérer comme indispensables les attributs suivants: •

HEIGHT et WIDTH: En spécifiant ces attributs de l'image, on accélère l'affichage de la page. En effet, le navigateur se sert des valeurs de ces attributs pour réserver l'emplacement de l'image, qu'il viendra occuper au terme de son chargement. En l'absence de ces informations, le navigateur charge en mémoire l'image entière, calcule ses dimensions, la place sur la page et alors continue ensuite d'afficher le reste du document. Ainsi l'absence de ces attributs peut rend lent l'affichage de la page.

•

ALT: Cet attribut spécifie un texte de remplacement destiné au navigateurs non graphiques. Ce texte sera affiché à la place de l'image. Il est également utilisé par les moteurs d'indexation qui n'interprètent pas les images et doivent par conséquent se référer au contenu de ALT.

Une balise devrait ressembler à cela: Exemple : Les autres attributs: •

BORDER: Définit l'épaisseur du cadre autour de l'image. Par défaut BORDER=0 ce qui provoque un affichage de l'image sans cadre.

Exemple:
SRC="terre.gif" ALT="la terre tourne" WIDTH= 50 HEIGHT= 60

BORDER=5> •

HSPACE et VSPACE: Définissent l'espace qui sera laissé autour de l'image ce qui permet de la placer mieux et disposer sur la page. HSPACE prend pour valeur le nombre de pixels qui seront réservés à droite et à gauche de l'image. VSPACE prend pour valeur le nombre de pixels qui seront réservés en haut et en bas.

Exemple:
SRC="terre.gif" ALT="la terre tourne" WIDTH= 50 HEIGHT= 60 HSPACE= 10 VSPACE= 10>

•

ALIGN: Gère l'habillage de l'image par le texte et prend les valeurs indiquées dans le tableau ci-dessous. Les valeurs TOP, MIDDLE et BOTTOM fixent l'alignement du texte

©

41

La programmation WEB

2005/2006

adjacent par rapport à l'image. LEFT et RIGHT aligne l'image sur la marge de gauche ou la marge de droite Valeur TOP MIDDLE BOTTOM LEFT RIGHT

Fonction Aligne le haut du texte adjacent sur le sommet de l'image. Aligne la ligne de base du texte adjacent sur le milieu de l'image. Aligne la ligne de base du texte adjacent sur la base de l'image.(valeur par défaut) Aligne l'image sur la marge gauche et permet son habillage par le texte sur sa droite. Aligne l'image sur la marge droite et permet son habillage par le texte sur sa gauche.

Les valeurs LEFT et RIGHT permettent l'habillage de l'image par le texte, ce qui donne des mises en pages créatives. Pour centrer une image, il faut utiliser la balise ou la balise
: Exemple: Comment centrer une image

Exemples: Utilisation de ALIGN 1- Différence entre TOP, MIDDLE et BOTTOM: "Et pourtant elle tourne …" avait
dit le sage Galilée.
"Et pourtant elle tourne …" avait
dit le sage Galilée.
"Et pourtant elle tourne …" avait
dit le sage Galilée.

©

42

La programmation WEB

ALIGN= TOP

2005/2006

ALIGN= BOTTOM

ALIGN= MIDDLE

2- Utilisation de LEFT pour l'habillage de l'image par du texte: "Et pourtant elle tourne …" avait
dit le sage Galilée.

3- Utilisation de RIGHT pour l'habillage de l'image par du texte: ©

43

La programmation WEB

2005/2006

"Et pourtant elle tourne …" avait
dit le sage Galilée.

4- Utilisation de LEFT et RIGHT conjointement pour entourer le texte par deux images. "Et pourtant elle tourne …" avait
dit le sage Galilée.

1.8.

Les tableaux

Les tableaux ont été initialement destinés à la présentation des données en colonnes. Aujourd'hui, ils sont principalement utilisés pour l'élaboration de mises en page complexes. Un tableau est composé d’un ensemble de lignes, et chaque ligne est composée par des cellules. En résumé, on a:
Les cellules sont les éléments constituant un tableau. Elles contiennent soit des données, soit des entêtes de colonnes.

©

44

La programmation WEB

2005/2006


Les cellules sont ordonnées en lignes.
Les lignes composent le tableau.

1.8.1. balises de tableaux Pour créer un tableau en HTML, on utilise quatre balises: , , …, et ) doivent apparaître entre les balises
et	. La syntaxe de base d'un tableau est: En-tête 1 En-tête 2 … Ligne 1 pour les en-têtes En-tête n Cellule 1 Cellule 2 Ligne 2 … Cellule n Cellule 1 Cellule 2 … Ligne m … Cellule n En-tête 1 En-tête 2 En-tête n Elément de colonne 1 Elément de colonne 2 Elément de colonne n Elément de colonne 1 Elément de colonne 2 Elément de colonne n Règle à respecter: Toutes les balises de tableaux (
…	…
et . Toute balise de tableau placée à l'extérieur de ces balises sera ignorée.

Exemple de tableau ©

45

La programmation WEB

2005/2006


Matière	Trimestre	Volume Horaire
HTML	1	20
JavaScript	2	30
ASP	2	40


Ce tableau sera affiché sur le Web comme suit :

Commentaires sur la syntaxe générale des balises de tableaux: •

Les balises et spécifient le début et la fin du tableau. Le tableau est justifié à gauche par défaut.

•

Les balises et indiquent le début et la fin d'une ligne du tableau.

•

Les balises et sont utilisées pour présenter les cellules de la première ligne qui sera utilisée comme en-tête du tableau. Le contenu des cellules de l'en-tête est automatiquement centré et affiché en caractères gras.

•

On peut utiliser un tableau sans en-tête. Dans ce cas on n'utilise pas le pair de balises .

•

Les balises et définissent les cellules de données. Le contenu de ces cellules est justifié à gauche par défaut.

©

46

La programmation WEB

•

2005/2006

Tout formatage supplémentaire (gras, italique, couleur,…) des données devra être spécifié par les balises appropriées à l'intérieur de chaque pair .

•

Chacune des balises de tableau dispose d'un ensemble d'attributs qu'on examinera cidessous

•

Le contenu des cellules peut être:  du texte des images  d'hyperliens (ou liens)  des arrière-plans  et même des tableaux

1.8.2. Légende Pour ajouter une légende au tableau, on insère le texte correspondant entre les balises et . La légende sera centrée au-dessus du tableau. Le texte de la légende peut être mis en forme en utilisant les différentes balises de formatage. Les balises et doivent être placées entre et : …
texte de légende


Exemple : Insertion et formatage () de la légende.

©

47

La programmation WEB

2005/2006


Nouvelles Matières Introduites
Matière	Trimestre	Volume Horaire
HTML	1	20
JavaScript	2	30
ASP	2	40


1.8.3. Fusion des cellules Par défaut, une cellule n'a que la hauteur d'une ligne et la largeur d'une colonne. Ce qui est suffisant pour la plupart des tableaux standards. Lorsque l'on se sert des tableaux à des fins de mise en page, il arrive qu'une cellule doive s'étendre sur plusieurs lignes et/ou plusieurs colonnes. Dans ce cas, on doit faire une fusion de cellules à la manière des tableurs. Fusion Horizontale : L'attribut COLSPAN des balises et permet d'étendre la cellule définie sur plusieurs colonnes. COLSPAN prend pour valeur le nombre de colonnes que doit occuper la cellule. Exemple :
Première série En octobre 2000	Deuxième série En septembre 2001	Sortie en 1999


©

48

La programmation WEB

2005/2006

Fusion verticale : L'attribut ROWSPAN fonctionne de la même manière que COLSPAN, mais s'applique aux lignes du tableau. Elle permet d'étendre une cellule sur plusieurs lignes. Exemple :
	Première série En octobre 2000
	Deuxième série En septembre 2001
	Sortie en 1999


©

49

La programmation WEB

1.9.

2005/2006

Les cadres : Frames

Les premières versions d’HTML ne comprenaient pas les frames. Il a été introduit par la suite pour surmonter cette limitation d’HTML. Le concept est le suivant : la fenêtre du navigateur est divisée en plusieurs parcelles appelées frames ou cadres dont chacune peut contenir un document différent. Si un document est long, le frame qui le contient affiche ses propres barres de défilement.

1.9.1. Quelques utilisations des frames: Les frames ne doivent pas être employés uniquement parce qu'ils offrent un joli design au site WEB. Ils doivent répondre aux besoins et aux caractéristiques du visiteur du site, et améliorer de façon significative la présentation du contenu. L'application la plus courante consiste à fournir un contenu statique (une table de matières par exemple) dans un frame et un contenu variable dans un autre. A cet effet, deux frames seulement sont nécessaires: L'un situé à gauche de la fenêtre, l'autre occupant l'espace restant et chargé d'afficher les documents. Dans les frames statiques, on trouve souvent des:
Liens de navigation vers d'autres pages.
Tables de matières
Bannières et logos
Outils de recherche Le visiteur interagit dans le frame statique (clique un lien, saisie d'un critère de recherche, etc.), et les résultats s'affichent dans le frame variable.

©

50

La programmation WEB

2005/2006

1.9.2. Création des frames Avant de commencer le codage HTML, il est conseillé de faire un croquis de la page finale. Cela permet de décider de la construction la plus efficace du document contenant des cadres.

La balise Il faut donc commencer par diviser la page en zones indépendantes; c'est le rôle des balises et . Les attributs que reçoivent ces balises sont essentiels à la définition des cadres. La balise requiert l'un des deux attributs suivants : Attribut

ROWS COLS

Fonction

Valeurs Possibles

Divise l'écran en zones Des nombres, des pourcentages ou des astérisques (*) horizontales (en lignes) séparés par des virgules (,) qui indiquent les tailles des cadres. L'astérisque indiquant que la carde occupe tout l'espace restant. Divise l'écran en zones (Identiques à ROWS) verticales (en colonnes)

Remarque : Généralement, on utilise des pourcentages et des astérisques (*) pour indiquer la taille de chaque cadre. La structure de base du document HTML, où on définit des cadres, est la suivante : <TITLE> titre de la page Définition du contenu de chaque cadre

Remarques: 1) On note que dans la structure de base d'un document contenant des cadres, les balises et ne sont pas mises entre les deux balises et 2) On ne doit utiliser que l'un des attributs ROWS ou COLS dans la balise . Si les deux sont présents dans la même balise , le navigateur n'interprétera que le premier attribut rencontré.

©

51

La programmation WEB

2005/2006

Bordure des cadres: On peut modifier l'épaisseur des bords des cadres ou de supprimer les bords. Les documents se présentent comme une page Web ordinaire, sans les bords des cadres. On utilise pour cela les deux attributs: Attribut

BORDER

Fonction Valeurs Possibles Affiche ou masque la bordure du 1 pour afficher la bordure. cadre. 0 pour masquer la bordure. Spécifie l'épaisseur de la bordure Un entier

Remarque:

Si FRAMEBORDER=0 et BORDER=0, le contenu des cadres paraît continu

FRAMEBORDER

sans séparateurs.

Définition des contenus des cadres: La balise ne fait que définir les différents cadres (ou frames). Il reste à placer dans chaque frame le contenu qui lui convient. C'est le rôle de la balise et de ses nombreux attributs. L'attribut important et obligatoire de la balise est SRC qui indique au navigateur l'URL du document à charger dans le frame. Cette balise peut recevoir les attributs suivants: Attribut

SRC NAME="nom"

Fonction Indique l'URL du document à charger dans le frame (attribut obligatoire) Attribue au frame un nom unique, qui servira de référence à l'attribut TARGET Interdit le redimensionnement du frame par l'utilisateur.

NORESIZE SCROLLING=YES/NO/AUTO Gère l'apparition des barres de défilement, la valeur par défaut

MARGINHEIGHT=n

MARGINWIDTH=n

est AUTO: - YES : Affiche les barres de défilement. - NO : Masque les barres de défilement. - AUTO : Affiche les barres de défilement si nécessaire. Spécifie n pixels comme marge intérieure à réserver en haut et en bas du frame Spécifie n pixels comme marge intérieure à réserver à droite et à gauche du frame

Exemples 1) Division de la fenêtre du navigateur en deux cadres verticaux pour afficher respectivement les deux documents HTML tabmat.html et accueil.html. Le premier cadre occupera 30% de la fenêtre, et le deuxième occupera le reste. On suppose que les trois fichiers HTML de l'exemple sont stockés dans le même dossier. ©

52

La programmation WEB

2005/2006

tabmat.html <TITLE> Sommaire
Tables des Matières

…..

accueil.html <TITLE> Accueil
Bienvenue sur notre site

…..

index.html : Utilisé pour la décomposition de la fenêtre du navigateur pour afficher les deux documents précédents. <TITLE> Index

©

53

La programmation WEB

2005/2006

2) On reprend l'exemple 1, mais cette fois on divise la fenêtre du navigateur en deux cadres horizontaux. Pour cela on utilise l'attribut ROWS au lieu de COLS dans la balise dans index.html. index.html <TITLE> Index



L'attribut TARGET L'une des applications courantes des frames est l'utilisation d'un cadre dont le contenu est statique et un ou plusieurs autres cadres dont le contenu change. Ce changement peut être fait suite à un clic sur un lien par exemple. Pour cela, il faut spécifier dans le lien:
Le document HTML à charger (valeur de l'attribut HREF de la balise )
Le cadre dans lequel on doit faire l'affichage du document, c'est le rôle de l'attribut TARGET de la balise . L'attribut TARGET prend comme valeur le nom du cadre vers lequel on veut rediriger le document indiqué dans l'attribut HREF: Exemple

©

54

La programmation WEB

2005/2006

On reprend l'exemple précédent et on ajoute dans tabmat.html un lien vers le document chapitre1.html qui sera chargé dans la frame "contenu". tabmat.html <TITLE> Sommaire
Tables des Matières

………..
CHAPITRE I

accueil.html <TITLE> Accueil
Bienvenue sur notre site

………….

index.html : Utilisé pour la décomposition de la fenêtre du navigateur pour afficher les deux documents précédents. <TITLE> Index

©

55

La programmation WEB

2005/2006

Balises imbriquées On peut élaborer des mises en page complexes en imbriquant des balises et . Supposons, par exemple, qu'on veuille diviser la page en huit régions égales. On commence par définir quatre frames horizontaux, comme cela: ….

Il faut ensuite diviser en deux colonnes chacune de rangées. Le code pour chaque frame vertical serait: ….

Reste donc à imbriquer ces balises dans le premier code, comme suit: …. …. …. ….

Exemple On va diviser la fenêtre du navigateur en deux rangées verticales. La première, dont le contenu sera statique, sert à charger le fichier tabmat.html (voir l'exemple précédent). La deuxième rangée sera divisée en deux rangées horizontales. La première, dont le contenu sera statique, sert à charger le fichier entete.html, et la deuxième sert à charger en premier lieu le

©

56

La programmation WEB

2005/2006

fichier accueil.html (voir l'exemple précédent); mais son contenu peut changer selon le lien sollicité dans la première rangée verticale (tabmat.html). entete.html <TITLE>Algorithmique & Programmation
Maîtriser Algorithmique et Programmation en QBasic
---


index2.html : Sert à diviser la fenêtre du navigateur en trois rangées et charger dans chacune un fichier HTML. On utilise l'attribut NORESIZE de la balise pour empêcher le redimensionnement du cadre contenant le fichier entete.html. <TITLE> Index

©

57

La programmation WEB

2005/2006

1.10. Les formulaires L'interactivité a connu une grande évolution sur le WEB grâce à l'introduction des composants de l'interface permettant de collecter les données utilisateur. Ces composants constituent les éléments des formulaires qui représentent la partie visible de l'interactivité WEB. L'utilisateur entre des informations par le biais des champs et contrôles, puis clique sur un bouton pour valider les données. Le navigateur rassemble alors ces données, ouvre une connexion HTTP et les transmet au serveur. Le serveur traitera, ensuite, les données reçues et envoie la réponse à l'utilisateur sous forme d'une page HTML. Les données transmises par un formulaire sont traitées par un programme CGI, un script ASP ou PHP.

1.10.1. Création de formulaire Les balises permettant de spécifier les composants du formulaire doivent être placées entre les conteneurs
et
. Ces composants peuvent être: des champs de saisie, des listes de sélection, des cases à cocher, des boutons de commandes ou d'options, …etc. La balise
La balise ouvrante définit également l'en-tête du formulaire à l'aide des attributs cités ci-dessous. Seul la propriété ACTION est obligatoire. Fonction

Attribut

Spécifie l'URL du script qui doit traiter les données du formulaire. ACTION Indique la méthode HTTP employée pour transmettre les données METHOD

au serveur. Les valeurs possibles sont: GET (valeur par défaut) ou POST. Indique le cadre vers lequel la réponse du script doit être chargée.

TARGET NAME

Spécifie le nom du formulaire.

ENCTYPE

Spécifie le type du fichier envoyé.

ACCEPT

Spécifie la liste des contenus acceptables par le serveur de traitement.

©

58

La programmation WEB

2005/2006

ACCEPT-CHARSET

Spécifie la liste des jeux de caractères acceptables par le script de traitement.


ACTION indique l'URL du script de traitement, de sorte que le navigateur sache où envoyer les données après validation. L'URL peut être donnée:  Sous forme absolue: ACTION="protocole://serveur/chemin/fichier de script" Exemple: ACTION="HTTP://www.ensias.ac.ma/traitement/biblio/consulter.asp"  Sous forme relative: Cette forme est utilisée dans le cas où le script de traitement se trouverait sur le même serveur que le formulaire. Exemple: ACTION= "consulter.asp"
METHOD: spécifie la méthode HTTP employée pour passer les données au script. Les valeurs possibles sont:  GET: le navigateur concatène les données du formulaire à l'URL du script de traitement. L'emploi de cette méthode limite la taille des données envoyées à environ 1 Ko. Cette limitation pose problème lorsqu'on désire envoyer une grande quantité de données. Les données concaténées à l'URL, la chaîne résultante peut être trop longue. Dans ce cas, on privilégie la méthode POST.  POST: les données sont transmises au serveur via une transaction HTTP distincte.
TARGET: permet d'envoyer la réponse du script vers un cadre donné.
NAME: indique le nom du formulaire. Cette propriété est utilisée, surtout, dans les scripts côté client (en JavaScript, VBScript…).
ENCTYPE: employé dans le cas où les données transmises seraient constituées par un ou plusieurs fichiers que le serveur doit traiter. Il prend pour valeur le type MIME du fichier de données transmis par le formulaire. Cet attribut renseigne le navigateur sur le type de fichier qu'il envoie. Pour permettre l'envoi d'un fichier au serveur, on doit utiliser la balise avec l'attribut TYPE= "File" (Voir la balise ). Exemple: Indiquez le nom de votre fichier GIF contenant votre logo: ©

59

La programmation WEB

2005/2006


L'en-tête de ce petit formulaire indique au serveur que les données seront traitées par le script trait_logo.cgi, que la méthode POST est employée, et que le type du fichier transmis est image/gif.
ACCEPT: indique les types MIME reconnus par le serveur. Ainsi, lorsque plusieurs fichiers sont transmis via le formulaire, on peut assurer qu'ils relèvent tous de types acceptables. Exemple: ACCEPT = "image/gif,image/jpeg".
ACCEPT-CHARSET: indiquent les tables de caractères reconnues par le serveur. Exemple: ACCEPT-CHARSET = "EUC-JP" La valeur EUC-JP spécifie que les données transmises au serveur sont en caractères Japonais.

Exemple Général:

METHOD = POST TARGET = "frame1"

ENCTYPE = "image/gif"

ACCEPT

=

"image/gif,image/jpeg" ACCEPT-CHARSET = "EUC-JP" > Indiquez le nom de votre fichier GIF contenant votre logo:


1.10.2. Composants des formulaires Ces composants peuvent être des:
Zones de texte.
Cases à cocher.
Boutons d'options.
Zones de liste.
Boutons de commandes.

©

60

La programmation WEB

2005/2006

Chaque composant doit avoir un nom unique. Ces noms serviront de variables au script de traitement pour identifier le contenu de chaque composant. Pour spécifier les composants d'un formulaire, on utilise les balises , et <SELECT> entre les deux conteneurs <FORM> et </FORM>. Type de Champ<br /> <br /> Balise HTML<br /> <br /> Champ de saisie<br /> <br /> <INPUT TYPE = "TEXT"><br /> <br /> Champ de mot de passe<br /> <br /> <INPUT TYPE = "PASSWORD"><br /> <br /> Zone de texte multilignes<br /> <br /> <TEXTAREA> ….

Fichier



Champ masqué



Case à cocher



Bouton d'option



Zone de liste

<SELECT>……

Bouton de commande de validation



Bouton de commande d'initialisation



Bouton de commande "scripté"



Comme le montre le tableau ci-dessus, la balise gère la plupart des types de champs; cela grâce aux multiples valeurs que prend son attribut TYPE. Selon le type de champ, devra également recevoir d'autres attributs qu'on indiquera dans les sections suivantes. Les balises citées dans le tableau précédent ne font que produire les champs eux-mêmes. C'est au concepteur de la page HTML de précéder chaque champ d'un libellé qui indique à l'utilisateur quelle information entrer. Généralement, on utilise un tableau (souvent sans bordure) pour justifier ces libellés et les composants du formulaire.

1.10.2.1 Zones de texte 1) Zone de texte monoligne: Ce type de composant permet de saisir un texte sur une seule ligne. Pour produire un champ de saisie, on se sert d'un code comme celui-ci (les attributs entre crochets sont facultatifs):

©

61

La programmation WEB

2005/2006


L'attribut NAME est obligatoire en ce qu'il identifie les données reçues par le champ.
L'attribut facultatif VALUE prend pour valeur la chaîne de caractères qui apparaîtra par défaut dans le champ. Ainsi, on épargne à l'utilisateur de saisir le texte lui-même lorsque les données sont prévisibles. Le texte par défaut sert aussi à indiquer le type d'information attendu.
L'attribut SIZE indique la longueur (en caractères) qu'occupera le champ c à d le nombre de caractères visibles du champ. La valeur par défaut est de vingt caractères.
L'attribut MAXLENGTH spécifie le nombre maximal de caractères que pourra recevoir le champ. Exemple: Nom d'utilisateur:
TYPE = TEXT NAME = "nom_login"

SIZE = 20

MAXLENGTH= 15>

2) Champ de mot de passe: Ce champ ne diffère de la zone de texte que sur un seul point: le texte entré dans un champ de mot de passe est remplacé, à l'écran, par des astérisques (*). On utilise le code suivant pour produire un champ de mot de passe: Exemple:

3) Zone de texte multilignes: Les champs de saisie et de mot de passe ne peuvent contenir qu'une seule ligne de texte. Pour créer des zones de texte multilignes, on utilise les balises et . En voici la syntaxe: … Texte par défaut … ©<br /> <br /> 62<br /> <br /> La programmation WEB<br /> <br /> 2005/2006<br /> <br />
L'attribut NAME assigne à la zone de texte un identifiant unique.
Les attributs facultatifs ROWS et COLS spécifient les dimensions de la zone de texte (la taille par défaut varie selon les navigateurs).
Le texte inclus entre et <TEXTAREA> apparaîtra comme contenu par défaut.
Les zones de texte multilignes se prêtent parfaitement aux longues entrées de texte, tels que commentaires ou messages électroniques Exemple: Commentaire: <TEXTAREA NAME = "notes" ROWS = 5 COLS = 20> 4) Fichier: On peut envoyer au serveur un fichier via un formulaire. Pour cela, il est impératif de stipuler l'attribut ENCTYPE dans la balise
, ainsi qu'une instruction : Fichier à Envoyer: …


Le fichier transmis peut être un fichier Word, une image, etc. Les champs de transfert de fichiers sont accompagnés d'un bouton Parcourir, qui permet à l'utilisateur d'aller chercher le fichier sur son disque. Ce bouton Parcourir est automatiquement inséré par le navigateur. 5) Champ masqué: Les champs masqués ne sont pas utilisés pour recevoir des données, mais seulement pour fournir au serveur des informations qui n'apparaissent pas sur le formulaire. Les champs masqués sont définis par des balises du type:
Les champs masqués permettent notamment d'exploiter un seul script général pour le traitement de différents formulaires. Le script doit savoir de quel formulaire particulier lui parvient les données; un champ masqué peut livrer cette information cette information ©

63

La programmation WEB

2005/2006

sans intervention de l'utilisateur. Ainsi, on peut créer un champ masqué, dans chaque formulaire, qui indiquera l'identité de ce dernier.
La position du champ masqué dans le code n'est pas importante, du moment qu'il apparaîtra entre les balises
et
.

1.10.2.2. Cases à cocher Les cases à cocher permettent à l'utilisateur d'effectuer une sélection multiple entre plusieurs options. Pour générer une case à cocher on utilise le code suivant:
Chaque case à cocher est définie par sa propre balise .
L'attribut NAME spécifie le nom de la case. Ce nom doit être unique. En effet, si toutes les cases à cocher d'un groupe portent le même nom, le script de traitement n'aura aucun moyen d'interpréter la sélection de l'utilisateur.
L'attribut VALUE indique quelles données devront être envoyer au serveur si l'utilisateur coche la case; cette information est transparente pour l'utilisateur.
L'attribut facultatif CHECKED, lorsqu'il est stipulé, indique que la case est cochée par défaut.
Seules les données relatives aux cases à cocher sélectionnées sont transmises au serveur. Il n'est pas fait mention des autres. Exemple: Bases de Données
Réseaux
Maintenance


1.10.2.3. Boutons d’options Contrairement aux cases à cocher, les boutons d'option sont utilisés pour effectuer une seule sélection entre plusieurs options possibles. Pour produire un bouton d'option, on utilise le code suivant:


Les attributs VALUE et CHECKED jouent le même rôle que pour les cases à cocher. ©

64

La programmation WEB

2005/2006


Généralement, on crée un groupe de boutons d'option en utilisant plusieurs balises avec le même nom (NAME).
L'ensemble des boutons d'un groupe ne peut envoyer qu'une seule valeur au serveur. Exemple: Etudiant
Enseignant
Technicien


1.10.2.4. Zones de liste Les balises <SELECT> et permettent de générer des zones de liste déroulantes ou de type "ComboBox". La syntaxe générale de ces composants est: <SELECT NAME = "nom" [SIZE = nombre d'éléments affichées] [MULTIPLE] > texte d'option 1 texte d'option 2 … texte d'option N


L'attribut NAME de la balise <SELECT> attribue un nom unique à la liste.
L'attribut facultatif SIZE spécifie le nombre d'options affichées simultanément. Les options non affichées seront accessibles grâce aux barres de défilement. La valeur par défaut de SIZE est 1.
L'attribut facultatif MULTIPLE autorise les sélections multiples (par Ctrl-clic).
Si on stipule SIZE = 1 sans spécifier l'attribut MULTIPLE, la liste sera représentée comme une liste déroulante. Autrement, la liste prendra la forme d'une zone de liste avec barres de défilement (ou liste "Combo").
La balise définit un élément de la liste.
L'attribut VALUE de la balise spécifie la valeur qui doit être passé au serveur si l'option est sélectionnée. En l'absence de l'attribut VALUE, le texte de l'option sera transmis au serveur.

©

65

La programmation WEB

2005/2006


L'attribut SELECTED de la balise permet de sélectionner l'option par défaut. Exemple: <SELECT NAME = "pays" SIZE = 1 > Maroc Pays Arabe Autre

1.10.2.5. Boutons de commande La balise permet également de générer des boutons de commande. Ces boutons sont réparties en trois types:
SUBMIT (valider): Lorsque l'utilisateur clique sur ce bouton, les données du formulaire sont rassemblées et envoyées au serveur.
RESET (réinitialiser): En cliquant sur ce bouton, l'ensemble des données est effacé et les champs reprennent leur valeur par défaut.
BUTTON: C'est un bouton "scripté" utilisé, généralement, pour déclencher un traitement en utilisant un script côté client (en JavaScript, VBScript…). 1) Bouton de validation: Tout formulaire doit contenir un bouton de validation, afin que les données puissent être transmises au serveur. Si le formulaire ne contient qu'un seul champ, la présence d'un bouton de validation est optionnelle. Dans ce cas, la frappe de la touche Entrée provoque automatiquement la validation des données. Pour créer un bouton de validation, on utilise le code:
L'attribut NAME attribue un nom unique au bouton. Ce nom est utilisé dans des script côté client (En JavaScript, VBScript,…).
L'attribut VALUE spécifie le texte qui apparaîtra sur le bouton. Exemple:

©

66

La programmation WEB

2005/2006

2) Bouton de réinitialisation: Le bouton de réinitialisation permet de remettre les champs à leurs valeurs par défaut. On utilise l'instruction suivante pour générer un bouton RESET:


Les attributs NAME et VALUE ont la même fonction que pour le bouton de validation.

3) Bouton "scripté": Les boutons "scriptés" réagissent au clic en exécutant un script côté client. Un tel bouton ne peut rien faire par lui-même. Pour qu'il réagisse aux clics, on doit utiliser l'événement OnClick pour spécifier le script à exécuter. La définition d'un bouton "scripté" ressemble à cela:


Les attributs NAME et VALUE jouent le même rôle que pour les autres boutons.
L'événement OnClick spécifie le script (une fonction en JavaScript ou VBScript,…) à exécuter suite à un clic sur le bouton.

Exemple:
TYPE =BUTTON

NAME ="verifier"

VALUE ="Vérifier les données"

OnCilck="verif()">

1.11. Microsoft FrontPage Lors de l’élaboration de ce cours consacré à la création de pages Web, notre souci était de présenter les bases du langage HTML bien qu’il existe des éditeurs de pages Web qui ne nécessitent nullement la connaissance du langage HTML. Un exemple de tels éditeurs est le Microsoft FrontPage. Nous avons préféré qu’il soit la partie concluante de ce chapitre. Nous donnons ici une présentation à titre informatif et le plus brièvement possible.

©

67

La programmation WEB

2005/2006

Microsoft FrontPage fait partie de la suite de logiciels Office et a une interface commune avec ceux-ci. Il ressemble en quelque sorte à Word avec des différences majeures : Le but de FrontPage est d’éditer et de publier des pages web. Ces pages sont seulement accessibles avec l’utilisation d’un navigateur. FrontPage enregistre ses documents dans le format HTML.

.

Barre d’affichage

3 différentes vues d’une page

Temps de chargement de la page

La barre des affichages permet de voir votre site Web de différentes perspectives. Elle contient des icônes permettant de gérer des informations importantes sur votre site. L’affichage Page montre la page en cours. L’affichage Dossiers permet de visualiser les dossiers de votre site. L’affichage Rapport génère un rapport avec des informations utiles voire des statistiques sur votre site. Le mode Navigation aide à structurer et à organiser les pages du site. L’affichage Liens Hypertexte permet de voir tous les liens d’une page vers d’autres destinations. La vue tâches permet d’enregistrer les tâches à accomplir pour vous ou d’autres personnes.

©

68

La programmation WEB

2005/2006

Sur la barre d’état se trouve un sablier rouge avec un nombre de secondes à droite. Cette période de temps représente le temps approximatif que la page prendra pour se charger dans un navigateur. Un site Web est un ensemble de pages HTML reliées entre elles par des liens Hypertextes. Un site comprend les pages ainsi que les images référencées dans chaque page de ce site. Lorsque vous commencez une nouvelle page, il est recommandé de commencer par la saisie du texte. Une fois terminée, vous pouvez appliquer la mise en forme.

Mise en forme et enregistrement Pour faire de la mise en forme, utilisez les boutons de la barre d’outils Mise en forme ainsi que les commandes disponibles dans le menu Format. La boîte de dialogue d’enregistrement comporte deux options supplémentaires : Titre de la page et Modifier. Ces deux derniers permettent d’attribuer un titre de page pour la page Web en cours d’enregistrement. Lors de l’enregistrement d’une page Web, FrontPage affiche parfois une boîte de dialogue signifiant que le mode page a un objet en mémoire et qu’il ne sait pas où l’enregistrer.

Les listes FrontPage vous permet de créer plusieurs sortes de listes comme dans Word. Il y’a des listes à puce et numérotées. Pour créer une liste, cliquez sur la commande Puces et numéros du menu Format.

©

69

La programmation WEB

2005/2006

Les liens Hypertextes Les liens Hypertextes sont le fondement de la navigation sur internet. FrontPage rend la tâche de création de toutes sortes de liens hypertextes très facile.
Pour créer un lien vers une autre page dans votre site : sélectionnez le texte, puis cliquer sur la commande lien hypertexte du menu Insertion, la boîte de dialogue suivante s’ouvre :

La barre lien hypertexte permet de créer quatre types de liens :
Un lien vers un fichier sur votre disque dur ou votre site.
Un lien externe vers une autre page Web sur Internet ou dans votre site.
Un lien vers une page vierge qui sera créée quand vous confirmerez la création du lien.
Un lien de courrier électronique. La procédure de création de liens hypertextes est la même si vous utilisez du texte ou une image.

Insertion de tableaux, images et cadres. Pour insérer un tableau, déplacez le point d’insertion à l’endroit où vous voulez créer le tableau, puis sélectionnez Tableau/Insérer/Tableau. Pour insérer une image, cliquer sur le bouton Insertion/Image/A partir du fichier. Atteindre le dossier contenant l’image et cliquez sur OK.

©

70

La programmation WEB

2005/2006

Pour créer une page Web avec plusieurs cadres. Choisissez Nouvelle page… du menu Nouveau, puis cliquez sur l’onglet cadres dans la boîte de dialogue modèle de pages et choisissez le modèle qui vous convient. Pour d’éventuelles modifications, utilisez le menu Cadres.

©

71

La programmation WEB

2005/2006

Chapitre 2 : Javascript 2.1.

Introduction

Javascript est un langage de script, orienté objet, permettant d’améliorer la présentation et l’interactivité des pages Web. Javascript est donc une extension du code HTML des pages Web. Les scripts java qui s’ajoutent aux balises HTML peuvent en quelque sorte être comparés aux macros d’un traitement de texte. Ces scripts vont être interpréter et exécuter par les navigateurs Netscape et Microsoft Internet Explorer. Javascript permet de faire dans une page Web :  Valider certaines informations entrées dans un formulaire (N° téléphone, Adresse électronique,…)  Réagir aux états de la souris (clic sur un bouton, passage de la souris au dessus d’un lien,…)  Réaliser des effets dynamique (défilement du texte,…)  Sites de jeux,…

2.2.

Javascript le langage

Javascript est un langage de programmation basé sur la syntaxe du langage C. Comme tout langage de programmation, un programme javascript est composé de variables, données des variables, instructions de contrôle, boucles, fonctions,…etc. Un code javascript sera interprété par un navigateur à l’intérieur d’une page WEB.

2.2.1 Variables Les variables en javascript peuvent se déclarer de deux façons :  Soit de façon explicite en utilisant le mot clé var. Exemple : var numéro = 1 ; var prénom = "Ahmed" ;  Soit de façon implicite. On écrit directement le nom de la variable suivi de la valeur que l’on lui attribue. Exemple : numéro = 1 ; prénom = "Ahmed" ;

©

72

La programmation WEB

2005/2006

2.2.2 Données Type

Description

Nombre

Tout nombre entier ou avec virgule tel que : 122 ou 3.1456

Chaîne de caractères

Toute suite de caractères comprise entre guillemets telle que "langage Javascript"

Booléen

Les mots true pour vrai et false pour faux

Mot null

Mot spécial qui représente pas de valeur

Notons aussi que contrairement au langage C, il ne faut pas déclarer le type de données d’une variable. Donc on n’est pas besoin de int, float, char, ou autre.

2.2.3 Opérateurs Dans les exemples, la valeur initiale de x sera toujours égale à 11 :

Opérateurs de calculs Signe

Nom

Signification

Exemple

Résultat

+

Plus

Addition

x+3

14

-

Moins

Soustraction

x-3

8

*

Multiplié par

Multiplication

x*2

22

/

Divisé

Division

x/2

5.5

%

Modulo

Reste de la

x%5

1

x=5

5

division =

A la valeur

Affectation

Opérateurs de comparaison Signe

Nom

Exemple

Résultat

==

Egal

x==11

True

<

Inférieur

x<11

False

<=

Inférieur ou égal

x<=11

True

>

Supérieur

x>11

False

>=

Supérieur ou égal

x>=11

True

!=

Différent

x!=11

false

Opérateurs associatifs ©

73

La programmation WEB

2005/2006

Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5 : Signe

Description

Exemple

Signification

Résultat

+=

Plus égal

x+=y

x=x+y

16

-=

Moins égal

x-=y

x=x-y

6

*=

Multiplié égal

x*=y

x=x*y

55

/=

Divisé égal

x/=y

x=x/y

2.2

Opérateurs logiques Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier 2 ou plusieurs conditions : Signe &&

Nom Et

||

Ou

Exemple

Signification

Condition 1 &&

Condition 1

Condition 2

Condition 2

Condition 1 ou

Condition 1

Condition2

Condition2

et

ou

2.2.4 Déclaration et appel des fonctions En javascript, il existe deux types de fonctions :  Les fonctions propres à javascript, on les appelle des méthodes. Elles sont associées à un objet bien particulier comme la méthode write() qui permet d’écrire dans un document WEB, ou la méthode Alert() qui permet d’afficher une boîte de dialogue dans une fenêtre navigateur.  Fonctions écrites par vous même pour les besoins de votre script. La syntaxe d’une déclaration de fonction est la suivante : Function nom_de_la_fonction (arguments) { …variables et instructions }

Exemple : Dans cet exemple, on définit dans le HEAD, une fonction appelée message() qui affiche le texte « Bienvenue dans notre site ». cette fonction sera appelée au chargement de la page. ©

74

La programmation WEB

2005/2006

<SCRIPT language="javascript"> < !-function message() { document.write("Bienvenue dans notre site ") ; } -->
onload="message()">



Passer des valeurs à une fonction Pour passer une ou plusieurs valeurs (paramètres) à une fonction, on fait passer comme arguments à cette fonction des noms de variables qui vont recevoir ces valeurs au moment de l’appel à cette fonction. Exemple : Function Exemple(texte) { Alert(texte) ; }

Appel à la fonction Exemple : Exemple("Salut à tous") ;

Retourner une valeur : Pour renvoyer un résultat, il suffit d’écrire le mot clé return suivi de l’expression à renvoyer. Exemple : Function Carre(Nombre) { var carre = Nombre * Nombre ; return carre ; }

2.2.5 L’expression de conditions if…else La formulation générale de l’expression if…else se présente comme suit :

©

75

La programmation WEB

2005/2006

if (condition vrai) { Instructions1 ; } else { Instructions2 ; } Si la condition est vérifiée (true), le bloc d’instructions1 s’exécute, si elle ne l’est pas (false), le bloc d’instructions2 s’exécute. Grâce aux opérateurs logiques « && : et » et « || : ou » l’expression de test pourra tester une association de conditions. Dans sa formulation la plus simple, if peut se présenter sans le else.

2.2.6 L’expression for L’expression for permet d’exécuter un bloc d’instructions un certain nombre de fois en fonction de la réalisation d’un certain critère. Sa syntaxe est : for (valeur_initiale ; condition ; progression) { Instructions ; } Exemple : for (i=0 ; i<10 ; i++) { document.write("Ligne : "+i+"
") ; }

2.2.7 L’expression while L’instruction while permet d’exécuter des instructions un certain nombre de fois. Sa syntaxe est : while (condition vraie) { Instructions ; }

aussi longtemps que la condition est vérifiée, Javascript continue à exécuter les instructions entre les accolades. Une fois que la condition n’est plus vérifiée, la boucle est interrompue, et en continue le script.

©

76

La programmation WEB

2.3.

2005/2006

Javascript et les objets

2.3.1 Définition d’objet Un objet est une structure qui comporte des attributs et des méthodes : Attributs : Ce sont des propriétés qui caractérise un objet appelés aussi champs de l’objet. Prenons par exemple le tableau, c’est un objet ayant les attributs suivants : Couleur : une couleur dans une liste des couleurs [noir, rouge, marron,…], Largeur et hauteur : entier, Contenu : chaîne de caractères. Méthodes: Ce sont les actions qu’on peut effectuer sur l’objet (attributs). Par exemple, pour l’objet tableau : Modifier_couleur : couleur = ? [noir, rouge, marron, …], Modifier_dimension : largeur = ? et hauteur = ?, Effacer_tableau : contenu = "", Ecrire_tableau : contenu = ?

Exemple : Soit Tab une instance de l’objet tableau. Pour effacer Tab, on procède ainsi : Tab.Effacer_tableau() ; « appel à la méthode Effacer_tableau appliquer à Tab » Effacer_tableau() {this.contenu = "" ;} « définition du corps de la méthode »

2.3.2 Objets dans Javascript Javascript divise la page du navigateur en objets, afin de vous permettre d'accéder à n'importe lequel d'entre eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés. On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu! L'objet le plus grand est l'objet fenêtre (les objets en javascript ont leur dénomination en anglais, donc dans le cas présent window) Dans la fenêtre s'affiche une page, c'est l'objet document. Cette page peut contenir plusieurs objets, comme des formulaires, des images, ... Pour accéder à un objet il faut donc partir de l'objet le plus grand (l'objet window pour descendre à l'objet que l'on veut atteindre. Prenons par exemple un bouton radio dans un formulaire d’un document Web, pour accéder à cet objet, il faudra donner le chemin complet

©

77

La programmation WEB

2005/2006

de l’objet en allant du contenant le plus extérieur jusqu’à l’objet référencé. Dans notre cas le chemin est : (window).document.form[].radio[]. L’objet window est entre parenthèses, car comme il occupe de la première place dans la hiérarchie, il est repris par défaut par Javascript et devient donc facultatif. On dira finalement que Javascript est un langage basé sur les objets. Pour construire un nouveau objet Javascript, il faut utiliser le constructeur d’objet new : Var Tab = new tableau (couleur, largeur, hauteur, contenu) ; Il faut aussi programmer la fonction tableau() : Function tableau (couleur, largeur, hauteur, contenu) { this.couleur = "noir" ; this.largeur = 300 ; this.hauteur = 50 ; this.contenu = "" ;}

Pour déclarer une méthode par exemple la méthode Ecrire_tableau, il suffit de l’affecter à l’objet Tab par : Tab.Ecrire_tableau(texte) ; Il faut aussi programmer la fonction Ecrire_tableau() : Function Ecrire_tableau (texte) {Tab.contenu = texte;}

Javascript manipule plusieurs objets : document (page HTML), images, formulaires, cadres, … etc.

2.3.3 Objet document (objet de base) Toutes les parties importantes d’une page HTML sont enregistrés sous forme de propriétés de l’objet document.

Propriétés de structures  Document.bgColor : propriété contenant la couleur d’arrière plan. Elle est modifiable par simple affectation : document.bgColor = "blue",  Document.fgColor : couleur d’avant plan (texte),  Document.linkColor : couleur d’un lien hypertexte,  Document.vlinkColor : couleur d’un lien hypertexte déjà visité. Autres propriétés

©

78

La programmation WEB

2005/2006

 Links : la propriété links contient une liste de tous les liens de la page HTML, sous forme d’une table. Le premier lien se trouve à l’adresse : document.links[0],  Anchors : tous les signets d’un document HTML sont enregistrés dans le tableau anchors. Dans document.anchors[0] se trouve le premier ancre de la page HTML,  Images : les adresses des images insérées dans la page sont également stockées dans la table images. Document.images[0] : l’adresse de la première image,  Forms : si, dans votre page HTML, vous disposez d’un ou plusieurs formulaires à remplir par les visiteurs, alors tous ses formulaires sont stockés dans le tableau forms. Les éléments d’un formulaire sont répertoriés dans document.forms[].element[]. La valeur du premier élément du premier formulaire de la page Web se trouve dans : Document.forms[0].element[0].value ;

Les méthodes de l’objet document  Open() : ouvre une liaison avec le document,  Close() : ferme un document ouvert avec document.open(),  Write() : permet d’écrire dans le document,  Writeln() : permet d’écrire dans le document avec retour à la ligne.

2.4.

Javascript et le HTML

Il existe trois façons pour inclure du Javascript dans une page HTML :

2.4.1 Insertion d’une fonction dans un document HTML La balise et attributs nécessaires pour insérer une fonction Javascript dans un document HTML : <script Language = "javascript"> var vglogale_1, vglobale_2, …, vglobale_n ; function nom_fonction(paramètres) { var vlocal_1, vlocal_2, …, vlocal_n ; Instruction_1 ; …Instructions_n ; Return valeur_de_retour ; }

©

79

La programmation WEB

Habituellement, on place le script à l’intérieur de la balise

2005/2006

script Javascript

et le code script à l’intérieur des balises de commentaires : < !-- code Javascript -->, afin d’en prévenir l’affichage par les navigateurs qui ne supportent pas les scripts.

Exemple :

2.4.2 Insertion du code Javascript dans un fichier externe Il est possible de mettre les codes de Javascript en annexe dans un fichier externe d’extension ".js". Ainsi, le code à insérer dans le document HTML est le suivant : <script language = " javascript" src="url/fichier.js"> Où url/fichier.js correspond au chemin d’accès au fichier contenant le code en Javascript.

©

80

La programmation WEB

2005/2006

Exemple :

2.4.3 Insertion d’un événement dans une balise HTML Les événements Javascript sont les résultats d’une action de l’utilisateurs, comme par exemple un clic sur l’un des boutons de la souris. Un événement est insérer à l’intérieur d’une balise HTML, comme un attribut. L’événement fera appel à une fonction Javascript lorsque la commande HTML est activée. La syntaxe habituelle est la suivante :

©

81

La programmation WEB

2005/2006

Exemple :

Evénements Javascript Les événements sont des actions qui se produisent au cours de la navigation lorsqu’une occurrence survient. Il y a un événement spécifique pour chaque action. Ainsi, vous pouvez définir une fonction Javascript lorsqu’un événement se produit.

Onclick : Cet événement se produit lorsqu’il y a un clic de la souris, et on se retrouve dans :

©

82

La programmation WEB

2005/2006

Un formulaire : Liens interne ou externe :

Exemple :

Autres événements : Evénement Onchange

Se produit lorsque

L’on retrouve dans

Modifie la valeur d’une boîte Boîte liste liste, d’une boîte texte d’une Boîte texte ligne ou multiligne.

Boîte mot de passe Boîte texte multiligne

©

83

La programmation WEB

Onmouseover

2005/2006

Place la souris au-dessus d’un Lien externe ou interne : lien hypertexte ou d’une zone ImageMAP : hypertexte.

Onmouseout

Place a souris en dehors d’une Lien externe ou interne : zone hypertexte.

Onselect

ImageMAP :

Sélectionne la valeur d’une Boîte texte boîte texte ou d’une boîte Boîte mot de passe

Onsubmit

texte multiligne.

Boîte texte multiligne

Envoie un formulaire

Commande formulaire :


Onreset

Appuie

sur

le

bouton Commande formulaire :

initialisation. Onload



Termine le chargement d’une Corps du document : page HTML ou les cadres ou Cadre :

Onunload

les images.

Image :

Sort d’une page WEB

Corps du document : Cadre :

2.5.

Javascript et les formulaires

Avec Javascript, les formulaires HTML prennent une tout autre dimension. On peut accéder à chaque élément d’un formulaire pour y aller lire ou écrire une valeur, noter un choix auquel on pourra associer un gestionnaire d’événement… Un formulaire est l’élément HTML déclaré par les balises et
. Un formulaire contient un ou plusieurs élément que nous appellerons des contrôles. Ces contrôles sont notés par exemple par la balise . Les attributs ACTION et METHOD de la balise
sont facultatifs pour autant que vous ne faites pas appel au serveur.

2.5.1 Le contrôle ligne de texte La zone de texte est l’élément d’entrée / sortie par excellence de javascript. La syntaxe HTML est :
NAME="nom"

SIZE=x> pour un champ de saisie du nom :

nom d’une seule ligne, de longueur x.

©

84

La programmation WEB

2005/2006

Exemple : <SCRIPT

LANGUAGE="javascript">

function afficher(form2) { var testin=document.form2.input.value ; document.form2.output.value=testin ; } Zone de texte d’entrée

Zone de texte de sortie



Lorsqu’on clique sur le bouton Afficher, javascript appelle la fonction afficher() à laquelle on passe le formulaire dont le nom est cette fois form2 comme argument. Cette fonction affiche la valeur de la zone de texte input dans la zone de texte output.

2.5.2 Le contrôle textarea L’objet textarea est une zone de texte de plusieurs lignes. La syntaxe HTML est :
<br /> ROWS=x<br /> <br /> CLOS=y><br /> <br /> Texte par Défault


©

85

La programmation WEB

2005/2006

Exemple : Même exemple précédent, en remplaçant tout simplement la zone de texte d’une seule ligne par un textarea.

2.5.3 Les boutons radio Les boutons radio sont utilisés pour noter un seul choix parmi un ensemble de propositions. Les boutons radio possèdent un ensemble de propriétés :

Exemple : <SCRIPT

LANGUAGE="javascript">

function choixprop (form3) { if (form3.choix[0].checked) { alert("Vous avez choisi la proposition "+ form3.choix[0].value) ;} ; if (form3.choix[1].checked) { alert("Vous avez choisi la proposition "+ form3.choix[1].value) ;} ; if (form3.choix[2].checked) { alert("Vous avez choisi la proposition "+ form3.choix[2].value) ;} ; } Entrer votre choix :
Choix numéro 1
Choix numéro 2
Choix numéro 3



La fonction choixprop() teste quel bouton radio est coché en utilisant la propriété checked. Dans l’affirmative une boîte de dialogue s’affiche contenant le numéro de la proposition choisie.

2.5.4 Les boutons case à cocher Les boutons cases à cocher sont utilisés pour noter un ou plusieurs choix parmi un ensemble de propositions. A part cela, sa syntaxe et son usage est tout à fait semblable aux boutons radio sauf en ce qui concerne l’attribut NAME (chaque case à cocher à un nom différent), et pas d’attribut d’index.

Exemple : <SCRIPT

LANGUAGE="javascript">

function reponse(form4) { if ((form4.check1.checked)==true && (form4.check2.checked)==true && (form4.check3.checked)==false && (form4.check4.checked)==true) { alert("C’est la bonne réponse !") ;} else { alert("Désolé continuer à chercher !") ;} } Entrer votre choix :
Choix numéro 1


©

87

La programmation WEB

2005/2006

Choix numéro 2
Choix numéro 3
Choix numéro 4



La fonction reponse() affiche une boîte de dialogue contenant le message « C’est la bonne réponse » si les propositions 1, 2 et 4 sont cochées, et le message « Désolé, continuer à chercher » dans le cas contraire.

2.5.5 Liste de sélection Le contrôle liste de sélection vous permet de proposer diverses options sous la forme d’une liste déroulante dans laquelle l’utilisateur peut cliquer pour faire son choix. Ce choix reste alors affiché. La boîte de liste est crée par la balise <SELECT> et les éléments de la liste par un ou plusieurs tags . La balise termine la liste.

Exemple : <SCRIPT LANGUAGE="javascript"> function liste(form5) { alert("L\’élément "+(form5.list.selectedIndex+1)) ; } Entrer votre choix :


©

88

La programmation WEB

2005/2006

<SELECT NAME="list"> Elément 1 Elément 2 Elément 3


La fonction liste() affiche dans une boîte de dialogue le numéro de l’élément sélectionné dans une liste de sélection.

2.5.6 Les contrôles Reset et Submit Le contrôle Reset permet d’annuler les modifications apportées aux contrôles d’un formulaire et de restaurer les valeurs par défaut. Une seule méthode est associée au contrôle Reset, c’est la méthode Onclick(). Ce qui peut servir, par exemple, pour faire afficher une autre valeur autre que celle par défaut.

Le contrôle Submit a la tâche spécifique de transmettre toutes les informations contenus dans le formulaire à l’URL désignée dans l’attribut ACTION de la balise
. Une seule méthode est associée au contrôle Submit, c’est la méthode Onclick().

©

89