Professional Documents
Culture Documents
Chapitre 2 : Javascript
2.1 Introduction
2.2 Javascript le langage
2.2.1 Variables
2.2.2 Données
2.2.3 Opérateurs
2.2.4 Déclaration et appel des fonctions
2.2.5 L’expression de conditions if…else
2.2.6 L’expression For
2.2.7 L’expression While
2.3 Javascript et les objets
2.3.1 Définition d’objet
2.3.2 Objets dans Javascript
2.3.3 Objet document (objet de base)
2.4 Javascript et le HTML
2.4.1 Insertion d’une fonction dans un document HTML
2.4.2 Insertion du code de Javascript dans un fichier externe
2.4.3 Insertion d’un événement dans une balise HTML
© 28
La programmation WEB 2005/2006
© 29
La programmation WEB 2005/2006
Chapitre 1 : Le HTML
1.1. Introduction
Le fonctionnement du Web consiste en un échange d’informations entre un ordinateur
demandant des informations, appelé client, et un autre ordinateur qui les lui fournit, appelé
serveur. Le logiciel client ou navigateur, demande des pages HTML à un serveur situé sur un
intranet ou sur Internet.
Les documents disponibles sur le Web sont écrits en langage HTML (Hyper-text Markup
Language). Un document est dit hypertexte lorsqu’il permet d’accéder à d’autres documents
au moyen d’un simple clic de souris sur une partie de son texte.
Le navigateur ou browser est un logiciel qui permet d’afficher les pages écrites en langage
HTML. Si vous êtes connectés à Internet, il vous permettra de naviguer sur le Web. Les
logiciels navigateurs les plus utilisés sont : Microsoft Internet Explorer et Netscape
Navigator.
Une page HTML est un fichier Ascii (du texte) qui est composé par:
Le contenu de la page à visualiser par le navigateur.
Un certain nombre de commandes appelées balises ou tags interprétés par le
navigateur. Ces balises se distinguent du contenu de la page par les signes < et >, par
exemple <html>.
Quand on écrit les balises d'une page HTML, Il faudra toujours garder à l'esprit qu'une balise
marque une action pour le navigateur: ce qu'il doit faire.
© 30
La programmation WEB 2005/2006
Les fichiers HTML doivent être enregistrés avec l'extension .html ou .htm.
Pour écrire, visualiser et mettre à jour une page HTML, on procédera comme suit:
Utiliser un éditeur de texte pour créer le fichier HTML
Sauvegarder ce fichier avec l'extension .html ou .htm (ne pas fermer l'éditeur)
Ouvrir le navigateur.
Afficher le document via le menu Fichier/Ouvrir… (ou File/Open file...)
Pour d’éventuelles modifications, il n'est pas nécessaire d’ouvrir à chaque fois le navigateur:
Retourner dans l'éditeur de texte (sans fermer le navigateur).
Modifier les codes Html.
Enregistrer le fichier.
Utiliser la commande Actualiser (Recharger ou Reload) du navigateur.
<HTML>
<HEAD>
<TITLE> Titre du document </TITLE> L'en-tête du document
</HEAD>
<BODY>
Le corps du document
</BODY>
</HTML>
Le langage HTML est un langage utilisant des balises (délimiteurs) : Pour apporter une
modification à une portion de texte, vous devez encadrer ce texte entre deux balises. Par
exemple, pour souligner le texte la faculté des sciences, il faut délimiter ce texte par : <U> la
faculté des sciences </U>. HTML utilise deux types de balises :
© 31
La programmation WEB 2005/2006
Autonome: il s'agit des balises monolithiques entre < et > comme <br> (retour à la
ligne).
Conteneur: ce sont les balises possédant un début entre < et >, et une fin entre </ et >
comme <U>….</U>.
Les identifiants de balises ne sont pas sensibles à la casse. Certaines balises sont associées à
un ou plusieurs attributs. Ces derniers précisent une autre action à exécuter par le navigateur.
Chaque attribut à un identifiant et une valeur (entre "" et après =), par exemple :
<IMG SRC= "photo.gif">.
Vous pouvez insérer des commentaires dans vos pages HTML (ceux-ci seront invisibles lors
de l’affichage de la page), en utilisant la balise < ! Commentaires>.
Remarque : Si vous voulez insérer deux balises dans une page HTML, il ne faut jamais
écrire : <BALISE1> texte1 <BALISE2> texte2 </BALISE1> texte3 </BALISE2>.
© 32
La programmation WEB 2005/2006
© 33
La programmation WEB 2005/2006
© 34
La programmation WEB 2005/2006
- ALIGN: spécifie l'alignement de la ligne. Il prend les valeurs LEFT, RIGHT ou CENTER
qui est la valeur par défaut. Il n'a d'effet que lorsque la longueur de la ligne est inférieure à la
largeur de la page.
- NOSHADE: Supprime l'ombrage 3D et n'affiche qu'une ligne simple.
- SIZE: Spécifie l'épaisseur (en pixels) de la ligne.
- WIDTH: spécifie la largeur de la ligne. Il peut prendre une valeur en pixels ou en
pourcentage de la largeur de la page. Il est recommandé d'utiliser une valeur en pourcentage
car on ne peut jamais connaître d'avance la taille d'écran du visiteur.
© 35
La programmation WEB 2005/2006
© 36
La programmation WEB 2005/2006
© 37
La programmation WEB 2005/2006
• 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 (en adressage relatif).
Exemples: 1- <A HREF= "file:///c:/cours/cours1.html" > Cours n°1</A>
2- <A HREF= "../astuces/astuces.html" > Des Astuces Intéressants </A>
© 38
La programmation WEB 2005/2006
© 39
La programmation WEB 2005/2006
La balise <IMG>
Cette balise permet de placer une image sur une page Web. C'est une balise qui peut recevoir
les attributs suivants:
Attribut Fonction
SRC Spécifie l'URL (chemin) du fichier qui contient l'image.
WIDTH Spécifie la largeur de l'image en pixels.
HEIGHT Spécifie la hauteur de l'image en pixels.
BORDER Définit l'épaisseur du cadre de l'image
ALT 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.
ALIGN Gère l'alignement du texte adjacent à l'image.
HSPACE Définit l'espace qui sera réservé à droite et à gauche de l'image.
VSPACE Définit l'espace qui sera réservé en haut et en bas de l'image.
Syntaxe de <IMG>:
© 40
La programmation WEB 2005/2006
Attributs indispensables:
Techniquement, SRC est le seul attribut obligatoire dans une balise <IMG>, 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 <IMG> devrait ressembler à cela:
<IMG SRC= "URL du fichier graphique" ALT= "texte de remplacement"
WIDTH= largeur en pixels HEIGHT= hauteur en pixels >
Exemple : <IMG 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: <IMG 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 Fonction
TOP Aligne le haut du texte adjacent sur le sommet de l'image.
MIDDLE Aligne la ligne de base du texte adjacent sur le milieu de l'image.
BOTTOM Aligne la ligne de base du texte adjacent sur la base de l'image.(valeur par
défaut)
LEFT Aligne l'image sur la marge gauche et permet son habillage par le texte
sur sa droite.
RIGHT 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 <CENTER> ou la balise <DIV>:
Exemple: Comment centrer une image
<DIV ALIGN="CENTER"> <IMG SRC="terre.gif" WIDTH= 50 HEIGHT= 60> </DIV>
© 42
La programmation WEB 2005/2006
© 43
La programmation WEB 2005/2006
<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= RIGHT WIDTH= 50 HEIGHT= 60>
"Et pourtant elle tourne …" avait <BR> dit le sage Galilée.
4- Utilisation de LEFT et RIGHT conjointement pour entourer le texte par deux images.
<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= LEFT WIDTH= 50 HEIGHT= 60>
<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= RIGHT WIDTH= 50 HEIGHT= 60>
"Et pourtant elle tourne …" avait <BR> dit le sage Galilée.
© 44
La programmation WEB 2005/2006
Règle à respecter:
Toutes les balises de tableaux (<TR>…</TR>, <TH>…</TH> et <TD>…</TD>) doivent
apparaître entre les balises <TABLE> et </TABLE>. Toute balise de tableau placée à
l'extérieur de ces balises sera ignorée.
Exemple de tableau
<TABLE>
<TR>
<TH> Matière </TH>
© 45
La programmation WEB 2005/2006
© 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 <TD></TD>.
• Chacune des balises de tableau dispose d'un ensemble d'attributs qu'on examinera ci-
dessous
• 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
<CAPTION> et </CAPTION>. 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
<CAPTION> et </CAPTION> doivent être placées entre <TABLE> et </TABLE> :
<TABLE>
<CAPTION> texte de légende </CAPTION>
…
</TABLE>
Exemple : Insertion et formatage (<FONT>) de la légende.
<TABLE WIDTH= 100% BORDER= 2>
<CAPTION>
<FONT SIZE=4 COLOR="BLUE"> Nouvelles Matières Introduites </FONT>
</CAPTION>
<TR ALIGN= LEFT>
<TH> Matière </TH>
<TH> Trimestre </TH>
<TH> Volume Horaire </TH>
</TR>
<TR>
<TD> HTML </TD>
<TD> 1 </TD>
<TD> 20 </TD>
</TR>
<TR>
<TD> JavaScript </TD>
<TD> 2 </TD>
<TD> 30 </TD>
</TR>
<TR>
<TD> ASP </TD>
<TD> 2 </TD>
<TD> 40 </TD>
© 47
La programmation WEB 2005/2006
</TR>
</TABLE>
Exemple :
<TABLE WIDTH= 100% BORDER= 2 CELLPADDING=10 CELLSPACING=5>
<TR>
<TD ALIGN= CENTER COLSPAN= 2 >
<IMG SRC= "images/telephone1.gif">
</TD>
<TD>
<IMG SRC= "images/telephone2.gif">
</TD>
</TR>
<TR>
<TD> Première série <BR> En octobre 2000 </TD>
<TD> Deuxième série <BR> En septembre 2001 </TD>
<TD> Sortie en 1999</TD>
</TR>
</TABLE>
© 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 :
<TABLE WIDTH= 100% BORDER= 2 CELLPADDING=10 CELLSPACING=5>
<TR>
<TD ALIGN= CENTER ROWSPAN= 2 >
<IMG SRC= "images/telephone1.gif">
</TD>
<TD> Première série <BR> En octobre 2000 </TD>
</TR>
<TR>
<TD> Deuxième série <BR> En septembre 2001 </TD>
</TR>
<TR>
<TD ALIGN= CENTER>
<IMG SRC= "images/telephone2.gif">
</TD>
<TD> Sortie en 1999</TD>
</TR>
</TABLE>
© 49
La programmation WEB 2005/2006
© 50
La programmation WEB 2005/2006
La balise <FRAMESET>
Il faut donc commencer par diviser la page en zones indépendantes; c'est le rôle des balises
<FRAMESET> et </FRAMESET>. Les attributs que reçoivent ces balises sont essentiels à
la définition des cadres.
La balise <FRAMESET> requiert l'un des deux attributs suivants :
Attribut 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
ROWS cadres.
L'astérisque indiquant que la carde occupe tout l'espace
restant.
COLS 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 :
<HTML>
<HEAD>
<TITLE>
titre de la page
</TITLE>
</HEAD>
<FRAMESET ROWS="tailles de zones horizontales" OU COLS="tailles de zones verticales">
Définition du contenu de chaque cadre
</FRAMESET>
</HTML>
Remarques: 1) On note que dans la structure de base d'un document contenant des cadres,
les balises <FRAMESET> et </FRAMESET> ne sont pas mises entre les deux balises
<BODY> et </BODY>
2) On ne doit utiliser que l'un des attributs ROWS ou COLS dans la balise
<FRAMESET>. Si les deux sont présents dans la même balise <FRAMESET>, le navigateur
n'interprétera que le premier attribut rencontré.
© 51
La programmation WEB 2005/2006
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
<HTML> <HEAD> <TITLE> Sommaire </TITLE> </HEAD>
<BODY>
<H3 ALIGN=CENTER>Tables des Matières </H3>
<BR>
…..
</BODY>
</HTML>
accueil.html
<HTML> <HEAD> <TITLE> Accueil </TITLE> </HEAD>
<BODY>
<H3 ALIGN=CENTER>Bienvenue sur notre site</H3>
<BR>
…..
</BODY>
</HTML>
index.html : Utilisé pour la décomposition de la fenêtre du navigateur pour afficher les deux
documents précédents.
<HTML> <HEAD> <TITLE> Index </TITLE> </HEAD>
<FRAMESET COLS="30% , *">
<FRAME SRC="tabmat.html">
<FRAME SRC="accueil.html" NAME= "contenu">
</FRAMESET>
</HTML>
© 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
<FRAMESET> dans index.html.
index.html
<HTML> <HEAD> <TITLE> Index </TITLE> </HEAD>
<FRAMESET ROWS="30% , *">
<FRAME SRC="tabmat.html">
<FRAME SRC="accueil.html" NAME= "contenu">
</FRAMESET>
</HTML>
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 cadre dans lequel on doit faire l'affichage du document, c'est le rôle de l'attribut
TARGET de la balise <A>.
L'attribut TARGET prend comme valeur le nom du cadre vers lequel on veut rediriger le
document indiqué dans l'attribut HREF:
<A HREF=" URL du document HTML" TARGET= "Nom de cadre" >
Exemple
© 54
La programmation WEB 2005/2006
© 55
La programmation WEB 2005/2006
© 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
<HTML> <HEAD> <TITLE>Algorithmique & Programmation </TITLE> </HEAD>
<BODY>
<H3 ALIGN=CENTER>Maîtriser Algorithmique et Programmation en QBasic</H3>
<HR>
<A HREF="mailto:webmaster@EIG.UV.fr">
<IMG SRC="images/mail8.gif" BORDER=0 ALT="Pour nous écrire">
</A>
</BODY>
</HTML>
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 <FRAME> pour
empêcher le redimensionnement du cadre contenant le fichier entete.html.
<HTML> <HEAD> <TITLE> Index </TITLE> </HEAD>
<FRAMESET COLS="20%, *">
<FRAME SRC="tabmat.html">
<FRAMESET ROWS="30%, *">
<FRAME SRC="entete.html" NORESIZE>
<FRAME SRC="accueil.html" NAME="contenu">
</FRAMESET>
</FRAMESET></HTML>
© 57
La programmation WEB 2005/2006
Fonction
Attribut
Spécifie l'URL du script qui doit traiter les données du formulaire.
ACTION
© 58
La programmation WEB 2005/2006
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.
NAME: indique le nom du formulaire. Cette propriété est utilisée, surtout, dans les scripts
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
Exemple:
<FORM ACTION = "trait_logo.cgi" METHOD = POST ENCTYPE = "image/gif">
Indiquez le nom de votre fichier GIF contenant votre logo:
<INPUT TYPE="FILE" NAME="logo">
© 59
La programmation WEB 2005/2006
Exemple Général:
© 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 <INPUT>, <TEXTAREA> et <SELECT> entre les
deux conteneurs <FORM> et </FORM>.
Type de Champ Balise HTML
Champ de saisie <INPUT TYPE = "TEXT">
Champ de mot de passe <INPUT TYPE = "PASSWORD">
Zone de texte multilignes <TEXTAREA> ….</TEXTAREA>
Fichier <INPUT TYPE = "FILE">
Champ masqué <INPUT TYPE = "HIDDEN">
Case à cocher <INPUT TYPE = "CHECKBOX">
Bouton d'option <INPUT TYPE = "RADIO">
Zone de liste <SELECT>…<OPTION>…</SELECT>
Bouton de commande de validation <INPUT TYPE = "SUBMIT">
Bouton de commande d'initialisation <INPUT TYPE = "RESET">
Bouton de commande "scripté" <INPUT TYPE = "BUTTON">
Comme le montre le tableau ci-dessus, la balise <INPUT> gère la plupart des types de
champs; cela grâce aux multiples valeurs que prend son attribut TYPE. Selon le type de
champ, <INPUT> 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.
© 61
La programmation WEB 2005/2006
<INPUT TYPE = "TEXT" NAME = "nom" [VALUE = "texte par défaut"] [SIZE =
longueur] [MAXLENGTH = longueur maximale]>
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: <INPUT TYPE = TEXT NAME = "nom_login" SIZE = 20
MAXLENGTH= 15>
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:
<INPUT TYPE ="PASSWORD" NAME= "nom" [VALUE= "texte par défaut"] [SIZE =
longueur] [MAXLENGTH = longueur maximale]>
Exemple:
<INPUT TYPE = "PASSWORD" NAME = "mot_passe" SIZE = 10 MAXLENGTH= 6>
© 62
La programmation WEB 2005/2006
</TEXTAREA>
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 <FORM>, ainsi qu'une instruction <INPUT TYPE =
"FILE">:
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 <FORM> et </FORM>.
Les attributs VALUE et CHECKED jouent le même rôle que pour les cases à cocher.
© 64
La programmation WEB 2005/2006
</SELECT>
© 65
La programmation WEB 2005/2006
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:
<INPUT TYPE = "SUBMIT" VALUE = "Envoyer">
© 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:
© 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.
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.
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
© 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.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
division
= A la valeur Affectation x=5 5
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
Opérateurs logiques
Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier 2 ou plusieurs conditions :
Signe Nom Exemple Signification
&& Et Condition 1 && Condition 1 et
Condition 2 Condition 2
|| Ou Condition 1 ou Condition 1 ou
Condition2 Condition2
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.
<HTML>
<HEAD>
© 74
La programmation WEB 2005/2006
<SCRIPT language="javascript">
< !--
function message() {
document.write("Bienvenue dans notre site ") ;
}
-->
</SCRIPT>
</HEAD
<BODY onload="message()">
</BODY>
</HTML>
© 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.
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 2005/2006
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 »
© 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.
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 ;
© 79
La programmation WEB 2005/2006
Exemple :
© 80
La programmation WEB 2005/2006
Exemple :
© 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.
© 82
La programmation WEB 2005/2006
Exemple :
Autres événements :
Evénement Se produit lorsque L’on retrouve dans
Onchange 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 2005/2006
© 84
La programmation WEB 2005/2006
Exemple :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afficher(form2) {
var testin=document.form2.input.value ;
document.form2.output.value=testin ;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE="">
Zone de texte d’entrée <BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher"
Onclick="afficher(form2)"> <BR>
<INPUT TYPE="text" NAME="output" VALUE="">
Zone de texte de sortie <BR>
</FORM>
</BODY>
</HTML>
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.
© 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.
Exemple :
<HTML>
<HEAD>
<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) ;} ;
}
</SCRIPT>
</HEAD>
<BODY>
Entrer votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE=1>
Choix numéro 1 <BR>
<INPUT TYPE="radio" NAME="choix" VALUE=2>
Choix numéro 2 <BR>
<INPUT TYPE="radio" NAME="choix" VALUE=3>
Choix numéro 3 <BR>
<INPUT TYPE="button" NAME="but" VALUE="Quel est votre
© 86
La programmation WEB 2005/2006
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.
Exemple :
<HTML>
<HEAD>
<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 !") ;}
}
</SCRIPT>
</HEAD>
<BODY>
Entrer votre choix :
<FORM NAME="form4">
<INPUT TYPE="checkbox" NAME="check1" VALUE=1>
Choix numéro 1 <BR>
<INPUT TYPE=" checkbox " NAME="check2" VALUE=2>
© 87
La programmation WEB 2005/2006
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.
Exemple :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function liste(form5) {
alert("L\’élément "+(form5.list.selectedIndex+1)) ;
}
</SCRIPT>
</HEAD>
<BODY>
Entrer votre choix :
<FORM>
© 88
La programmation WEB 2005/2006
<SELECT NAME="list">
<OPTION VALUE="1"> Elément 1
<OPTION VALUE="2"> Elément 2
<OPTION VALUE="3"> Elément 3
</SELECT>
<INPUT TYPE="button" NAME="b" VALUE="Quel est l’élément
retenue ? " Onclick="liste(form5)">
</FORM>
</BODY>
</HTML>
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.
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 <FORM>. Une seule
méthode est associée au contrôle Submit, c’est la méthode Onclick().
© 89