Développement Web Avancé

Support de cours Développement Web Avancé
I. HTML
1. Introduction et normalisation
Le HTML (HyperText Markup Language, langage de balisage) est le langage universel utilisé pour
communiquer sur le Web. Le balisage HTML est incorporé dans le texte du document et est
interprété par un navigateur Web. Votre information sera ainsi transportée sur cette gigantesque toile
de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un
programme appelé navigateur ou browser.
Vous avez donc deux interlocuteurs :
1. Le browser de votre lecteur,
2. et Votre lecteur lui-même.
Fig.1 Relation Client- Serveur Web

Ce logiciel, que l'on appelle un browser, vous permet de surfer sur le Net et d'afficher sur votre écran
les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de browsers différents.
En fait, chaque browser a sa propre façon de fonctionner. Une page HTML est en général destinée à
être publiée sur le World Wide Web, où tous les gens utilisent toutes sortes de navigateurs qui
fonctionnent sous différentes plateformes (Mac OS, ipad, Linux, Androïd, MS Windows, etc. pour
citer les plus courants). Pour que cela fonctionne, il a été nécessaire de définir un standard pour le
langage HTML.
 Html est un langage universel qui s'adapte à toutes les plateformes que ce soit Windows,
Macintoch, Unix, OS/2...
La formulation du langage HTML est fort simple, en effet des balises permettent d'appliquer
différents formatages. Elles sont délimitées par les deux symboles "supérieur à " et "inférieur à".
Dans le cas des balises en paires, chaque balise ouverte doit être fermée.
Dr. Seifeddine MECHTI 1 Année universitaire 2018-2019

Finalement, ce langage a abouti à une nouvelle version : le HTML5. Cette version possède des ajouts
pour les médias (audio, vidéo, application interactives avec CSS3/JavaScript).
Un document HTML5 est avant tout un document texte, qui contient une certaine syntaxe afin de
mettre en forme ou de décrire ce document. Son nom de fichier a généralement le suffixe .html ou
encore le suffixe .htm
2. Structure d’un document html minimum
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
<HEAD> Ceci est le début de la zone d'en-tête (prologue au document proprement

dit contenant des informations destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.
- A chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de
fin d'une action </...>.
- Les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire
<HTML>, <html>, <Html>, etc.
3. Le texte
Gras [Bold] <B>...</B> Début et fin de zone en

gras
<STRONG>...</STRONG>
Italique [Italic] <I>...</I> Début et fin de zone en

italique
<EM>...</EM>
Taille de [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone avec

caractère cette taille

Couleur de [Font color] <FONT COLOR="#$$$$$$"> Début et fin de zone en

caractère couleur
</FONT>
A la ligne [Line break] <BR> Aller à la ligne
Commentaires [Comments]  Ne pas afficher
Centrage [Center] <CENTER></CENTER> Centrer
Exemple :
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>

</BODY>
</HTML>
4. Codes de quelques couleurs basiques
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000

5. Alignement …
Pour aligner du texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe une balise
permettant d'aligner différents éléments. C'est le tag :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
6. Les titres et les listes
En-têtes [Heading] <Hn></Hn> Afficher une en-tête de niveau n
avec n=1 à 6 et sauter une ligne
Liste non-ordonnée [Bullet list] <UL></UL> Afficher le texte sous forme

d'une liste non-ordonnée.
Liste ordonnée [Numbered list] <OL></OL> Afficher le texte sous forme

d'une liste ordonnée.
Elément de liste [List items] <LI> Voici un élément de la liste
Paragraphe [Paragraph] <P></P> Saut de ligne, insérer une ligne

vierge et commencer un
paragraphe
Exemple :
<H1>Les mois du printemps</H1>
<UL><LI>avril
<LI>mai
<LI>juin</UL>
<P>
<H3>Les mois d'automne</H3>
<OL><LI>octobre
<LI>novembre </OL>
7. Les liens
<A HREF="2.HTM">Aller vers le document 2</A>
Point d'ancrage <A NAME="***">...</A> Ceci est une cible

Lien vers une ancre dans la <A HREF="#***">...</A> Lien vers la cible ***
même page dans la même page
Lien vers une ancre dans une <A HREF="URL#***">...</A> Lien vers la cible ***
autre page dans une autre page
8. Les images
<IMG SRC="Adresse de l'image">
Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image" activée
Dimensions width=? height=? Hauteur et largeur (en pixels)
border=? (en pixels) Bordure
align=top Alignement
align=middle
align=botton
align=left
align=right
L'attribut Align
<IMG SRC="HELP.gif" align=TOP>Fichier d'aide
<IMG SRC="HELP.gif" align=CENTER>Fichier

d'aide
<IMG SRC="HELP.gif" align=BOTTOM>Fichier
d'aide
9. Les Arrière-Plans
<BODY BGCOLOR="#$$$$$$">
<BODY BGCOLOR="#000088">
<H1>Bonjour</H1>

</BODY>
Exemple :
BODY BACKGROUND="PAPER.gif">
<H1>Bonjour</H1>
</BODY>
Couleur de texte<BODY TEXT="#$$$$$$">
Couleur de lien<BODY LINK="#$$$$$$">
Lien visité<BODY VLINK="#$$$$$$">
Lien actif<BODY ALINK="#$$$$$$">
10. Les Tableaux
Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau
Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne
Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule
Exemple :
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
Bordure de cadre [Border] <TABLE border=?></TABLE>
Exemple :
<TABLE border=2>
</TABLE>

L'espace entre les cellules ou <TABLE cellspacing=?>

l'épaisseur des lignes du quadrillage
L'enrobage des cellules ou <TABLE cellpadding=?>

l'espace entre le bord et le contenu
La largeur de la table <TABLE width=?>

<TABLE width=%>
11. Les Cellules des tableaux
<TD width=?> en pixels

Largeur d'une cellule
<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes <TD colspan=?>
Exemple :
<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>
Exemple1 : les tableaux
Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc
déborder sur 3 cellules horizontales.
<TR>
<TD colspan=3>cellule 1</TD>
</TR>

<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>

<TD width=34%>3</TD> </TR>
</TABLE></CENTER>
Exemple2 :
La première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder
sur 2 cellules verticales.
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>
12. Les Frames
On utilise les frames pour diviser l'écran en plusieurs fenêtres
Zone avec des fenêtres
 <FRAMESET>Début de zone avec des fenêtres
 </FRAMESET>Fin de zone avec des fenêtres
Agencement des fenêtres
 <FRAMESET ROWS="...">Fenêtres horizontales
 <FRAMESET COLS="...">Fenêtres verticales
Exemple :
<HTML>
<HEAD></HEAD>

<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Attention !!!
 <FRAMESET></FRAMESET> remplace <BODY></BODY>
 L'attribut ROWS="hauteur, hauteur2, ..., hauteur N" définit la hauteur des différentes fenêtres
en cas de division horizontale.
 La hauteur s'exprime en pixels ou en %. Dans ce cas, le total doit être égal à100%;
Frames … agencement vertical
Exemple :
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
 L'attribut COLS="largeur1, largeur2, ..., largeur N" définit la largeur des différentes fenêtres
en cas de division verticale.
 La largeur s'exprime en pixels ou en %.
 Le total doit être égal à100%;
Frames … Horizontales et Verticales
Exemple :
<FRAME>

<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
Frames … les ascenseurs
Par l'attribut de la balise :
<FRAME SCROLLING="yes/no/auto >
 Vous pouvez indiquer si la fenêtre doit ou non posséder une barre de défilement.
Frames … Border
 Par défaut, les cadres sont séparés par des bordures.
 Il est possible de supprimer ces bordures mais les attributs à utiliser diffèrent selon Netscape
ou Internet Explorer.
 Netscape utilise l'attribut "border=0"
 Explorer, les attributs "frameborder=no" et "framespacing=0" (pour enlever l'espace entre les
cadres).
 Le tout cohabite sans problème.
 La balise devient alors par exemple :
<FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0>
Exemple :
<HTML>
<HEAD>
<TITLE>Tree Menu</TITLE>
<BASE TARGET="display">
</HEAD>
<FRAMESET Cols="210,430" frameborder="no" framespacing="0">
<FRAME Name="tree" SRC="tree1.html" NORESIZE FRAMEBORDER="YES">
<FRAME Name="mypage" SRC="initpage.html" NORESIZE FRAMEBORDER="YES">
</FRAMESET>
</HTML>
Frames … Nom
Un autre attribut de cette balise <FRAME> est
NAME="NOM".

Name indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible
d'un lien hypertexte.
Le fichier de frames devient :
<FRAME SRC="A.htm">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm" NAME="fenetreC">
</FRAMESET>
</FRAMESET>
 Et on met un lien vers A.htm dans le fichier B.htm en désignant comme cible la frame C.
<HTML><BODY>
<A HREF="A.htm" TARGET="fenetreC"><H1>B</H1></A>
</BODY></HTML>
 L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies :
 _blank qui indique au browser qu'il doit créer une nouvelle fenêtre afin d'y afficher le
fichier. Dans ce cas, vous ouvrer en fait un nouveau browser.
 _self qui indique que le fichier sera chargé dans la même fenêtre que celle dans
laquelle se trouve le lien.
 _top qui implique l'affichage du fichier sur toute la surface de la fenêtre du browser.
 la balise <NOFRAMES>...</NOFRAMES> est utilisée pour indiquer le texte que
doivent afficher les browsers incapables de gérer les frames.
 Il est même indiqué de prévoir une page sans fenêtres pour que ces visiteurs puissent
profiter du site.
Frames et Tableaux
 Possibilité de simulation des frames par l’utilisation des Tableaux
Avantages Inconvénients
Frame
Simplicité du code. Référencement délicat sur certains
moteurs de recherche (Hotbot).
Menu toujours présent à l'écran Barre de défilement pas très esthétique.

Riches possibilités en Javascript. Manipulations plus difficiles pour les

débutants.
Code moins visible pour les Non compatible avec certains (rares)
débutants. navigateurs texte.
Tableau
Non compatible avec certains (rares) Non compatible avec certains (rares)
navigateurs texte. navigateurs texte.
Compatible avec tous navigateurs. Lourdeur du code à télécharger avec
certains navigateurs.
Encore quelques différences entre
Netscape et Internet Explorer.
13. Les Images Mappées …
 La balise MAP qui est gérée côté client. Elle simplifie la tâche des développeurs de page
HTML.
 La balise <MAP> permet de définir la géométrie de l’image ; elle contient également le
nom de l'image dont on définit la géométrie.
 A l'intérieur du bloc <MAP> </MAP> on trouve des définitions de type <AREA>
définissant chacune des zones sensibles.
 Ainsi la structure de la balise sera la suivante :
<MAP NAME=Nom>
<AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF=URL>
</MAP>
<IMG SRC=Nom de l'image USEMAP="#Nom">
 Les paramètres prennent les valeurs suivantes :

 SHAPE= rect|circle|poly|default la zone de définition est un rectangle, un cercle, un

polygone ou le reste de la figure qui n'a pas été décrite. Ainsi :
 rect : est défini par les coins opposés (par exemple "130,10,170,90")
 circle : est défini par son centre et par le rayon (par exemple "50,50,10")
 poly : est défini par un ensemble de points (par exemple "250,10 210,90 290,90")
 default : est défini par les points non définis précédemment.
 COORDS= des valeurs entre côtes et séparées par des virgules comme décrit précédemment.
 HREF= l'URL qui sera atteinte après le clic.
<BODY>
<MAP NAME="ww">
<AREA SHAPE=CIRCLE COORDS="255,165,81" HREF="a.html">
<AREA SHAPE=RECT COORDS="15,45,135,120" HREF="qqq">
<AREA SHAPE=POLY COORDS="180,15,240,60,270,30,210,15,195,15,180,15"
HREF="qq.html">
</MAP>
</BODY>
<IMG SRC="cubes.gif" USEMAP="#ww"
Exemple :
<HTML>
<BODY>
<CENTER>
<IMG SRC="cubes.gif" USEMAP="#cartons" HEIGHT=121 WIDTH=136>
</CENTER>
<MAP NAME="cartons">
<AREA SHAPE=RECT COORDS="37,9,72,40" HREF="a.htm">
<AREA SHAPE=RECT COORDS="18,46,46,79" HREF="b.htm">
<AREA SHAPE=RECT COORDS="61,43,93,78" HREF="c.htm">
<AREA SHAPE=RECT COORDS="9,84,36,119" HREF="d.htm">
<AREA SHAPE=RECT COORDS="48,85,77,116" HREF="e.htm">
<AREA SHAPE=RECT COORDS="89,81,123,115" HREF="f.htm">

</MAP>
</BODY>
</HTML>
II. Les formulaires
Les formulaires peuvent prendre la forme :

- d'une ligne de texte
- de boutons radio
- de cases à cocher
- d'un menu déroulant
1. Définition d'un formulaire

Avant de pouvoir utiliser les différentes sortes de formulaires (ligne de texte, liste déroulante, cases
à cocher...), il faut déclarer au browser qu'il devra gérer des formulaires et ce qu'il devra en faire.
<FORM method="post" action="URL d'expédition" enctype="text/plain">
... les formulaires proprement dit ...
</FORM>
 L'attribut "method" : la façon dont les données seront transmises au serveur et exploitées par
celui-ci
 L'attribut "action" spécifie l'adresse d'expédition des données.
 L'attribut "enctype" (optionnel) spécifie l'encodage utilisé pour le contenu du formulaire
 Dans le cas de l'utilisation en interne des formulaires par du Javascript, les attributs method,
action et enctype sont inutiles car on ne fait pas appel au serveur.
2. Ligne de texte
INPUT type="text" indique un champ de saisie d'une seule ligne
Exemple :
<FORM>
<INPUT type="text" name="nom"
size="50">
</FORM>
3. Zone de saisie
La balise <TEXTAREA></TEXTAREA> introduit une zone de texte multilignes et non plus une
simple ligne de texte. La syntaxe est :
Exemple :
<FORM>
<TEXTAREA name="nom" rows=4 cols=40 >Valeur par défaut</TEXTAREA>

</FORM>
 L'attribut name permet de donner un nom au formulaire.

 L'attribut rows=x détermine le nombre de lignes de la zone de texte.
 L'attribut cols=y détermine le nombre de caractères visibles sur chaque ligne ou si vous
préférez le nombre de colonnes.
 L'attribut wrap (optionnel) détermine la façon dont les sauts de ligne seront traités lors d'un
changement de ligne.
4. Liste déroulante
La balise <SELECT></SELECT> indique au browser l'usage d'une liste déroulante. Les éléments
de la liste sont introduits par la balise <OPTION> ... (</OPTION> facultatif).
Exemple :
<FORM>
<SELECT name="nom" size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
 L'attribut name="nom" définit le nom du formulaire.

 L'attribut size="x" détermine le nombre d'éléments de liste affiché dans la boite d'entrée. En
fait, size="1" est optionnel car "1" est la valeur par défaut. Le même exemple avec size="3"
donne :
On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la
liste sera retenu)
Exemple :
<FORM>

<SELECT name="nom" size="1">

<OPTION>lundi
<OPTION>mardi
<OPTION selected>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
5. Bouton d'option
Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la
fois peut être activée (le "ou" exclusif).
La syntaxe de base est :
<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
</FORM>
Exemple :
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> tarif de jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end
</FORM>
L'attribut "checked" (optionnel) permet de présélectionner un bouton radio

6. Case à cocher
Plusieurs choix simultanés peuvent être réalisés.
La syntaxe de base est :
<FORM>
<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">
</FORM>
Exemple :
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> glace vanille
<INPUT type="checkbox" name="choix2" value="2"> chantilly

<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud

<INPUT type="checkbox" name="choix4" value="4"> biscuit
</FORM>
7. Bouton de commande
Avec l'introduction des langages de scripts (Javascript et VBscript) l'usage du bouton de commande
présente un intérêt certain
<FORM>
<INPUT type="button" name="nom" value="texte du bouton" onclick="fonction Javascript">
</FORM>
Exemple :
<FORM>
<INPUT type="button" name="nom" value= "Bouton de test" onclick="alert('Test réussi !')">
</FORM>
8. Submit et Reset
Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le
formulaire à l'URL désignée dans les attributs ACTION et METHOD du tag <FORM>.
La syntaxe Html est :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Exemple :
FORM>
<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">
</FORM>
Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de
restaurer les valeurs par défaut.
La syntaxe Html est :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>

Exemple :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">
</FORM>
Exemple :
<FORM method="post" action="mailto:votre_adresse_E-mail">
Votre nom :<BR>
<INPUT type="text" name="nom"><BR>
Votre adresse :<BR>
<TEXTAREA name="adresse" ROWS=2 COLS=35>
</TEXTAREA><BR>
<INPUT type="submit" value="Envoyer">
<INPUT type="reset" value="Annuler">
</FORM>
III. JavaScript
1. Introduction
D’après les connaissances acquises dans la partie précédente, on constate que le langage HTML présente
plusieurs insuffisances :
 Pas de structures de contrôle algorithmiques (conditionnelles et itératives).

 Pas de variables, ni d’opérateurs, ni de procédures.
 Pas d’événement (sauf le clic)
 Pas d’accès aux bases de données.
 LE LANGAGE JAVASCRIPT : C’est un langage de script incorporé (introduit, inséré) aux balises
HTML permettant d’améliorer la présentation et l’interactivité des pages web.

2. Structure générale ou (squelette) d’un fichier JavaScript
Dans partie en-tête Dans le corps du fichier HTML

<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT LANGUAGE="javascript"> </HEAD>
<BODY>
</SCRIPT> <SCRIPT LANGUAGE="javascript">
</HEAD>
<BODY> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
3. Les objets JavaScript
Les objets JavaScript peuvent être classés en deux catégories :
o Les objets prédéfinis (Array, Date, String, Math : Librairie de fonction mathématique.)
o Les objets d’interface (Button, Radio, Text,… )
3.1 Les objets d’interface et leurs hiérarchies
JavaScript divise une page Web en objets pour pouvoir les manipuler.
La hiérarchie des objets de notre exemple est la suivante :

3.2 Accès aux objets
Pour accéder aux objets, il faudra donner le chemin complet, on utilise la syntaxe suivant :
(window).document.Nom formulaire.Nom_de_l’objet
Exemple : Pour la zone de texte "nom" dans un formulaire "f "  window.document.f.nom
3.3 Les propriétés des objets
Pour accéder aux propriétés des objets, on utilise la syntaxe suivant :
(window).document. Nom formulaire.Nom_de_l’objet.Nom_de_la_propriété
Exemple : pour récupérer le contenu (value) de la zone de texte (nom) dans un formulaire (f) 
window.document.f.nom.value
3.4 Les méthodes des objets
Pour chaque objet JavaScript a prévu un ensemble de méthodes (fonctions) qui lui sont propres.
Exemple : la méthode Alert() de l’objet window pour afficher un message dans une boite de dialogue,
write(“texte”) pour écrire dans le document, La méthode abs() qui renvoie la valeur absolue d’un
nombre pour l’objet Math…
Boite de dialogue affichée par Alert()

Constatation : X est dite une variable.

4. Les variables
a. Déclaration
Les variables peuvent être déclarés de deux façons :
 Avec Var : variable locale a une fonction (exple : var Prenom= "Ali" ;)
 Sans Var : variable globale, décrire directement par son nom (exple : Prenom= "Ali" ;)
JavaScript utilise 4 types de variables (il ne faut pas les déclarer comme au Turbo Pascal!!):
o Des nombres (entier et réel)
o Des chaînes de caractères
o Des booléens : (True pour vrai et False pour faux)
o Le mot null : Mot spécial qui indique l’absence d’une valeur.
b. Conversion de types
Fonction de vérification Rôle

IsNaN() : Is Not a Number fonction booléenne permettant de vérifier si le contenu d’une
variable donnée est numérique ou non ;
Fonction de conversion Rôle Exemple
String et Number Conversion de numérique var a = String (21.34) ; a = "21.34"

en chaîne et inversement var a = Number ("10.5") ; a = 10.5
Eval évalue une chaîne de ch="5+10" ; x=Eval (ch) ; x=15

caractères sous forme de
valeur numérique
5. Les opérateurs utilisables en JavaScript
1. LES OPERATEURS DE CALCUL 2. LES OPERATEURS DE

COMPARAISON
+ Addition == Égal
- Soustraction < Inférieur
* Multiplication <= Inférieur ou égale
/ Division > Supérieur
% Modulo (reste de la division) >= Supérieur ou égal
= Affectation != Différent

++ Ajoute 1 (x++  x=x+1)

-- Retire 1 (y--  y=y-1)
3. LES OPERATEURS ASSOCIATIFS 4. LES OPERATEURS LOGIQUES
&& ET
+= Plus égal (x +=y  x =
x+y) || OU
-= Moins égal (x -=y  x = x-y) ! NO
N
*= Multiplié égal (x *=y  x = x*y)
/= Divisé égal (x /=y  x = x/y)
6. VI/ Les Entrées/Sorties en JavaScript
Entrée (Lecture)
Fonction Syntaxe Exemple
s = prompt("Saisissez votre texte :", "Texte par défaut")
nom_variable=prompt("texte
prompt de la boite d’invite","valeur
par défaut") ;
Sortie (Affichage)
Fonction Syntaxe Exemple
Alert ("Hello world") ;
Alert Alert("message"+nom_variable) ;
document.write ("Hello world")
document.write("message"+nom_variable) ;
write

7. Les structures de contrôle

7.1 les structures conditionnelles
Structure Syntaxe Remarques/exemples

 La forme réduite
if (condition) Une autre syntaxe pour exprimer un traitement conditionnel
{Traitement ;} :
(Condition)?Traitement1:Traitement2 ;
IF  La forme complète
if (condition) Exemple :
{ Traitement 1 ; } (a%2==0)? alert("Nombre pair"):
alert("Nombre impair");
else
{ Traitement 2 ; }
switch (expression) Switch(mois)

{ { case12 :case1 :case2 : alert(" hiver"); break;
case V1: bloc 1; break; Case3 :case4 :case5 : alert(" printemps"); break;
case V2: bloc 2; break ; Case6 :case7 :case8 : alert(" été"); break;
Switch … Case9 :case10 :case11 : alert(" automne"); break;
Default: alert("numéro de mois erroné") ; break ;
case Vn: bloc n; break ;
}
default: bloc n+1; break ;
}
7.2 les structures itératives
Syntaxe Exemple
for (initialisation ; condition de For (i=0 ; i<10 ; i++)
bouclage ; progression) { document.write(i+ "<BR>")}
{ Instructions ; }
do do
{ Instructions ; } {N= Number(window.prompt("saisir un entier positif : ")) ;}
while (conditions) ; While (N<=0) ;
Compt=0;
while (conditions) While(compt<5)
{ Instructions ; } { document.write("ligne :" +compt + "<BR>") ;
Compt++ ; }
8. Les Fonctions
Une fonction va vous permettre de faire un script qui ne s'exécutera que si on le désire, elle est activée
grâce au gestionnaire d'événement ou par un appel direct de la fonction.
 La définition de la fonction est faite dans la partie entête (HEAD), et son appel se fait dans la partie
corps (BODY) !!!!!

Syntaxe de déclaration Syntaxe d’appel

function nom_de_la_fonction (arguments)  Appel d’une fonction en utilisant la clause return :
{ Variable = Nom_fonction(arguments) ;
Instructions ;
[return nom_variable]  Appel d’une fonction sans utiliser la clause return (procédure):
} Nom_fonction(arguments) ;
 La mention des arguments est facultative mais
les parenthèses doivent rester ;
9. La gestion des événements
Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. Grâce
au javaScript il est possible d'associer des fonctions, des méthodes à des événements.
La syntaxe d'un gestionnaire d'événement est la suivante :
OnEvenement = "Action JavaScript ou fonction ( )"
Liste des évènements les plus utilisés

Onclick Se déclenche lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément.
Onselect Cet événement se produit lorsque l'utilisateur a sélectionné tout ou partie d'une zone de
texte ou textarea.
Onblur Se déclenche lorsque un élément de formulaire perd le focus c-à-d que l'utilisateur clique
hors du champ et que la zone d'entrée n'est plus active.
Cet événement sera souvent utilisé pour vérifier la saisie d'un formulaire.
Onchange Cet événement s'apparente à l'événement onBlur mais avec une petite différence. Non
seulement la case du formulaire doit avoir perdu le focus mais aussi son contenu doit
avoir été modifié par l'utilisateur.
Onfocus Se déclenche lorsque l'élément est sélectionné, C'est souvent la conséquence d'un clic de
souris ou de l'usage de la touche "Tab"
Onsubmit S’exécute lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire
Onreset Permet de réinitialiser les champs d'un formulaire
Onload Onunload L'événement Load survient lorsque la page a fini de se charger. A l'inverse, Unload
survient lorsque l'utilisateur quitte la page.
Onmouseover Ces évènements se déclenchent lorsque le pointeur de la souris passe au dessus (sans
Onmouseout cliquer) d'un lien ou d'une image (infobulle) (onmouseover) ou bien quitte l'élément
(onmouseout)

Gestionnaires d'événement disponibles en JavaScript
Objets Gestionnaires d'événement disponibles
Fenêtre OnLoad, OnUnload
Lien hypertexte OnClick, OnmouseOver, OnmouseOut
Elément de zone de texte OnBlur, OnChange, OnFocus, OnSelect
Elément bouton, Case à cocher, Bouton Radio, OnClick

Bouton Submit/ Reset
Liste de sélection OnBlur, OnChange, OnFocus
10. Les formulaires
Ici commence l'interaction avec l'utilisateur grâce aux nombreuses propriétés et méthodes dont sont dotés les
éléments HTML utilisés dans les formulaires.
Les formulaires sont simples à utiliser, cependant il faut d'abord mémoriser quelques propriétés de base.
Liste des propriétés :

Liste des méthodes :
name Nom du formulaire
submit Envoyer les données du formulaire
action Adresse du script de serveur à exécuter
reset Réinitialise le formulaire
method Méthode d'appel du script (get ou post)
target Destination du retour du formulaire
Voyons maintenant en détail quelques éléments de formulaire :

Elément Opération Syntaxe

Récupérer le contenu d'une zone de saisie
Les zones de texte (zone de texte/zone de texte multiple et NomVariable=document.NomFormulaire.NomZone.value
même un champ password)
Modifier le contenu d’une zone de saisie document.NomFormulaire.NomZone.value = expression
Les boutons radio (groupe de Vérifier si une case d’option est cocher ou NomVariable=document.NomF.NomGroupe[indice].checked
non
cases d’options) Récupérer la valeur d'un bouton radio NomVariable=document.NomF. NomGroupe [indice].value
 Un seul choix Connaître le nombre d'options NomVariable=document.NomF. NomGroupe.length

 Indice des boutons commence par 0
vérifier si une case est cochée ou non NomVariable=document.NomF.NomCase. checked
Les cases à cocher
Récupérer la valeur d'une case à cocher NomVariable=document.NomF.NomCase. value
 Un ou plusieurs choix
Les listes de sélection NomVariable=new Option (texte, valeur)

Ajouter une nouvelle option à la liste document.NomF.NomListe.options[position]=NomVariable
 texte : le texte de l’élément à ajouter

 Valeur : la valeur de l’élément à ajouter
 Gérées à travers un tableau nommé
Options contenant les éléments de la liste)
 Length donne le nbre d’éléments d’une Supprimer une option de la liste document.NomF.NomListe.options[i]=null
liste
 SelectedIndex donne l’indice de  i : la position de l’élément à supprimer de la liste
l’élément sélectionné (liste à sélection
unique) commencant par 0

Programmation Web Avancée Dr. Seifeddine MECHTI
Bibliographie
[1] Programmation Web HTML/CSS, Rémy Malgouyres LIMOS UMR 6158, IUT,
département info Université Clermont 1.
[2] Construction de Sites Web, Florian Schaffer, édition Micro Application
Webographie
1. http://malgouyres.org/programmation-javascript
2. http://malgouyres.org/programmation-html-css
3. www.ccim.be/ccim328/html/index.htm

Examen Développement Web Avancé
1) Créer un dossier nommé « nom-prénom » et l’enregistrer dans le lecteur C :
Cet examen vous permettra de concevoir un site web personnel dédié au cursus de
recherche. Ce site permettra une meilleure visibilité du profil ainsi que les travaux de
recherche (articles, séminaires, collaborations) et d’enseignement (Matières enseignés, TP,
TD, cours, etc).
2) Créer une page nommé index.htm.

3) Insérer votre nom et prénom en utilisant :
- la police times new roman
- gras, italique.
- La taille du texte : 6.
- couleur : Violet.
4) Insérer une image de profil en haut à gauche.
5) Insérer la liste ordonnée suivante :
- Présentation
- Publications
- Cours enseignés

6) Créer une nouvelle page nommé présentation et la thématique de recherche
Insérer le texte suivant :
La thèse est encadrée par Mr. Chercheur 1 de l’université de Sfax : Institut supérieur de sport
et d’éducation physique et co-endré par Mr Chercheur 2.
Insérer le logo de l’isseps en haut centré.
Insérer le texte suivant taille 4, centré :
Thématique de recherche : La fatigue mentale est un état psychobiologique vécu par l’ensemble
des individus après avoir réalisé une tâche cognitive intense et/ou prolongée, qui se caractérise
par une sensation d’épuisement et de manque d’énergie. Si la fatigue mentale altère les
fonctions cognitives comme l’attention ou la planification de l’action, elle peut également avoir
des effets délétères sur les performances physiques.
7) Créer une nouvelle page nommé cours enseignés :
Dans cette page insérer le tableau suivant :
Matière Charge horaire Type Année scolaire

Cours TD TP
8) Créer une nouvelle page nommé publications : cette page est divisée en 3 frames de
votre choix ou vous mettez :
Dans Frame 1 : Conférences
Dans Frame 2 : Article de journal
Dans Frame 3 : dynamique scientifique
9) Faire des liens entre : la page d’accueil et toutes les autres pages et vice versa.

Développement Web Avancé

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Développement Web Avancé

Transféré par

Droits d'auteur :

Formats disponibles

Support de cours Développement Web Avancé

Fig.1 Relation Client- Serveur Web

Dr. Seifeddine MECHTI 1 Année universitaire 2018-2019

2. Structure d’un document html minimum

<HTML> Ceci est le début d'un document de type HTML.

</HTML> Ceci est la fin d'un document de type HTML.

<HEAD> Ceci est le début de la zone d'en-tête (prologue au document proprement

</HEAD> Ceci est la fin de la zone d'en-tête.

<TITLE> Ceci est le début du titre de la page.

</TITLE> Ceci est la fin du titre de la page.

<BODY> Ceci est le début du document proprement dit.

</ BODY> Ceci est la fin du document proprement dit.

Gras [Bold] <B>...</B> Début et fin de zone en

Italique [Italic] <I>...</I> Début et fin de zone en

Taille de [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone avec

Dr. Seifeddine MECHTI 2 Année universitaire 2018-2019

Couleur de [Font color] <FONT COLOR="#$$$$$$"> Début et fin de zone en

A la ligne [Line break] <BR> Aller à la ligne

Commentaires [Comments]  Ne pas afficher

Centrage [Center] <CENTER></CENTER> Centrer

Bleu #0000FF Vert #00FF00

Blanc #FFFFFF Violet #8000FF

Rouge #FF0000 Jaune #FFFF00

Gris clair #C0C0C0 Noir #000000

Dr. Seifeddine MECHTI 3 Année universitaire 2018-2019

Liste non-ordonnée [Bullet list] <UL></UL> Afficher le texte sous forme

Liste ordonnée [Numbered list] <OL></OL> Afficher le texte sous forme

Elément de liste [List items] <LI> Voici un élément de la liste

Paragraphe [Paragraph] <P></P> Saut de ligne, insérer une ligne

Point d'ancrage <A NAME="***">...</A> Ceci est une cible

Dr. Seifeddine MECHTI 4 Année universitaire 2018-2019

Dimensions width=? height=? Hauteur et largeur (en pixels)

border=? (en pixels) Bordure

<IMG SRC="HELP.gif" align=CENTER>Fichier

Dr. Seifeddine MECHTI 5 Année universitaire 2018-2019

Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau

Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne

Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule

Bordure de cadre [Border] <TABLE border=?></TABLE>

Dr. Seifeddine MECHTI 6 Année universitaire 2018-2019

L'espace entre les cellules ou <TABLE cellspacing=?>

L'enrobage des cellules ou <TABLE cellpadding=?>

La largeur de la table <TABLE width=?>

11. Les Cellules des tableaux

<TD width=?> en pixels

Fusion de lignes <TD rowspan=?>

Fusion de colonnes <TD colspan=?>

Dr. Seifeddine MECHTI 7 Année universitaire 2018-2019

<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>

Dr. Seifeddine MECHTI 8 Année universitaire 2018-2019

Dr. Seifeddine MECHTI 9 Année universitaire 2018-2019

Dr. Seifeddine MECHTI 10 Année universitaire 2018-2019

Dr. Seifeddine MECHTI 11 Année universitaire 2018-2019

Riches possibilités en Javascript. Manipulations plus difficiles pour les

Dr. Seifeddine MECHTI 12 Année universitaire 2018-2019

 SHAPE= rect|circle|poly|default la zone de définition est un rectangle, un cercle, un

Dr. Seifeddine MECHTI 13 Année universitaire 2018-2019

II. Les formulaires

Les formulaires peuvent prendre la forme :

Dr. Seifeddine MECHTI 14 Année universitaire 2018-2019

Dr. Seifeddine MECHTI 15 Année universitaire 2018-2019

 L'attribut name permet de donner un nom au formulaire.

 L'attribut name="nom" définit le nom du formulaire.

Dr. Seifeddine MECHTI 16 Année universitaire 2018-2019