Programmation Web JScript

SOMMAIRE
1. Introduction ............................................................................................................. 2
2. Notions de HTML ................................................................................................... 2
2.1. Notions de base ................................................................................................. 2
2.1.1. Structure d’une page HTML ...................................................................... 2
2.1.2. Les balises de mise en forme ...................................................................... 3
2.1.3. Images et liens ............................................................................................ 4
2.2. Listes et tables ................................................................................................... 5
2.2.1. La création de listes .................................................................................... 5
2.2.2. La création de tables ................................................................................... 6
2.2.3. Création de formulaires .............................................................................. 8
3. Notions de JScript.................................................................................................... 9
3.1. Lecture et affichage de données ........................................................................ 9
3.2. Variables et assignement ................................................................................... 9
3.2.1. Variables ................................................................................................... 10
3.2.2. Opérations ................................................................................................. 10
3.3. Les instructions................................................................................................ 11
3.4. Les sous-programmes ...................................................................................... 11
3.4.1. Définition .................................................................................................. 11
3.4.2. Quelques fonctions prédéfinies ................................................................ 12
4. Les objets en JScript .............................................................................................. 12
4.1. Objets spéciaux................................................................................................ 13
4.1.1. Les chaînes de caractères.......................................................................... 13
4.1.2. Les tableaux .............................................................................................. 14
4.1.3. La classe Date() ........................................................................................ 15
4.1.4. La classe Image() ...................................................................................... 16
4.1.5. La classe Math .......................................................................................... 16
4.2. Hiérarchie des objets ....................................................................................... 17
4.2.1. L’objet navigator ...................................................................................... 18
4.2.2. L’objet window......................................................................................... 18
4.2.3. Les événements......................................................................................... 20
4.3. Création de classes .......................................................................................... 22
5. TD de HTML et JScript ......................................................................................... 23

Professeur : ASSALE Adjé Louis 1/24 INP-HB

Programmation Web JScript

JScript

1. Introduction

JScript est un langage de programmation qui peut être inclus dans des pages
HTML destinées aux navigateurs WWW les plus courants. Grâce à ce langage,
il est possible d’écrire des pages interactives. Contrairement à l’utilisation du
CGI, les réponses aux événements déclenchés par le lecteur de la page se font au
niveau du navigateur, sans nécessité d’une transmission vers le serveur d’où
provient la page.
JScript ne doit pas être confondu avec Java, qui est un langage beaucoup plus
complexe permettant de créer des applications autonomes.

2. Notions de HTML

Comme le code écrit en langage VBScript ou JScript s’insère toujours dans une
page HTML, il est nécessaire de connaître le langage HTML.

2.1. Notions de base

2.1.1. Structure d’une page HTML

Chaque page HTML doit commencer par la balise <HTML> et se terminer par
la balise </HTML>.
La page HTML contient un en-tête et un corps :
L’en-tête de page est délimité par les balise <head> et </head>, et peut
comprendre les suivantes :
 Le titre de la page, délimité par les balises <title> et </title>.
 Des indications pour les moteurs de recherche, par exemple des
mots-clé et des descriptifs de la page que l’on inclut dans les balises
<Meta>.
 Des feuilles de style pour la mise en forme du texte, délimités par
<Style> et </Style>.
 Des scripts côté client, délimités par <Script> et </Script>. C’est à
l’intérieur de cette balise que l’on insère du code JScript.

Le corps de la page est repéré par les balises <Body> et </Body>. La balise
<Body> accepte un certain nombre d’attributs dont les plus utiles sont :

Professeur : ASSALE Adjé Louis 2/24 INP-HB

Programmation Web JScript

 Background : spécifie une image d’arrière-plan qui doit être répétée

sur le fond de la page Web. Exemple ; <Body background =
assale.gif>
 Bgcolor: spécifie la couleur de l’arrière-plan de la page.
 Text : spécifie la couleur de l’arrière-plan
 Link : spécifie la couleur d’affichage par défaut des liens sur la
page.
 Alink : pour changer la couleur du lien en cours d’utilisation,
spécifier la dans l’attribut ALINK ; sachez qu’après avoir été cliqué
et traité, le lien prend la couleur spécifiée dans l’attribut Vlink.
 Vlink : pour afficher autrement les liens que l’utilisateur a déjà
visités.

La spécification des couleurs en HTML, s’effectue soit par un code de 6

caractères dont la valeur est exprimé en hexadécimal, par exemple pour
exprimer la couleur jaune brillant, on utilisera le code #FFFF00. En fait, une
couleur est constitué de trois composantes : rouge, vert et bleu. Le premier
groupe de 2 caractères, FF, représente 255 en décimal et correspond à la valeur
rouge la plus brillante, le second groupe de 2 caractères correspond à la valeur
vert et vaut aussi 255, le troisième groupe de 2 caractères représente le bleu et à
la valeur zéro.
On peut spécifier les couleurs par leur nom, il existe une liste de couleurs de
nom disponible dans n’importe quel ouvrage d’HTML. Par exemple, <body
gbcolor=Marron>.

2.1.2. Les balises de mise en forme

 La balise <p> (p pour paragraphe) sépare le texte en paragraphes. La

balise accepte un paramètre ALIGN pour spécifier le mode d’alignement
du texte. La balise insère par défaut un interligne entre les paragraphes. La
balise</p> marque la fin.
 La balise <br> (abréviation de break, rupture) fait passer à la ligne
suivante, sans ajouter d’interligne.
 Les balises <Hx>, x nombre compris entre 1 et 6, permettent de mettre en
forme des données en leur attribuant des tailles de polices. H1 est la plus
grande taille et H6 la plus petite. La balise </Hx> marque la fin.
 La balise PRE (abréviation de pré formaté) est utilisée pour afficher du
texte en police non proportionnelle. Tout texte contenu entre la paire de
balises <Pre> et </Pre> est affiché exactement comme il est dans le
fichier. La balise insère automatiquement un interligne entre les lignes du
texte.

Professeur : ASSALE Adjé Louis 3/24 INP-HB

Programmation Web JScript

 La balise <Code> est identique à la balise <Pre>, mais elle n’insère aucun
interligne dans le texte.
 La balise <Font> est la balise idéale de mise en forme. Elle accepte des
paramètres permettant de modifier l’aspect du texte. Color – spécifie la
couleur d’affichage du texte ; Face – spécifie le nom de la police choisie
et Size – spécifie la taille relative du texte. Le paramètre Face s’utilise
avec une liste de polices qui sont recherché dans l’ordre sur la machine.
Par exemple, <Font face=Tahoma, Arial, Helvetica> si la police
Tahoma n’est pas disponible, le navigateur recherchera la police Arial,
puis Helvetica. On peut préciser une modification de taille de police en
utilisant les valeurs –4, -3, -2, -1, +1, +2 et +3. par exemple, <Font Face=
Arial Size = 3>. La fin est marqué par la balise </font>.
 Les balises <B>, <I>, <S> et <U> mettent respectivement en gras, en
italique, barre et souligne un texte. Elles ont également une balise de fin.

2.1.3. Images et liens

 La balise <img> permet d’afficher une image. Les formats graphiques

reconnus par presque tous les navigateur sont le format GIF (Graphics
Interchange Format de CompuServe) et le format JPEG (Join
Photographic Experts Group). Un nouveau format PNG (Portable
Network Graphic) est une alternative au format GIF propriétaire. Pour
spécifier une image, on écrira par exemple ; <img
src=/monweb/yvann.gif>. Le paramètre src spécifie le nom du fichier ;
suivant le serveur Web utilisé, la source sera un lien relatif ou un lien
absolu. Un lien relatif commence par une barre oblique et ne comprend
pas de nom d’hôte tandis qu’un nom absolu comprend le nom d’hôte du
répertoire contenant le fichier. La balise peut utiliser les attributs Width et
Height pour imposer la taille de l’image.
 La balise d’ancrage anchor <A> repère un lien vers un autre document ou
objet. Elle peut être utilisée comme lien relatif à l’intérieur d’un
document. par exemple, <a Href=http://www.assale.com> site Web
d’Assalé</a>. le texte contenu dans le paramètre HREF précise le lien
réel ; tout texte précédent la balise </a> sera affiché en tant que lien, c’est-
à-dire en couleur et souligné. Pour utiliser un lien (souvent appelé signet)
dans un document, repérez le lieu cible par la balise suivante :
<a Name=destination> où destination est le nom du lieu désiré. Pour
fournir un lien vers la cible dans le document, tapez : <a
Href=#destination> le symbole # indique que le navigateur doit aller
dans un endroit relatif dans la page.

Professeur : ASSALE Adjé Louis 4/24 INP-HB

Programmation Web JScript

2.2. Listes et tables

Elles sont nécessaires pour organiser les données provenant des bases de
données.

2.2.1. La création de listes

Il existe deux types de listes : les listes à puces et les listes numérotés.

Listes à puces : la balise <UL> (Unordered List) permet de créer des listes non
numérotés. Chaque objet de liste commence par la balise LI, (abréviation de List
Item, objet de liste). Par exemple
<html>
<head>
<title> Exemple de liste à puces</title>
</head>
<body>
<ul>
<li>Objet N°1</li>
<li>Objet N°2</li>
<li>Objet N°3</li>
</ul>
<body>
</html>

L’affichage donne:

L’on peut choisir entre 3 modèles de puces à l’aide du paramètre Type: square –
carré ; disk – cercle plein et circle – cercle vide.
Par exemple, <ul type=square>

Professeur : ASSALE Adjé Louis 5/24 INP-HB

Programmation Web JScript

Listes numérotés : la balise est <OL> (abréviation de Ordered List). Son format
est identique à celui de <UL>. Son paramètre type peut prendre cinq valeurs :
A - lettres majuscules (A, B, C, …) ; a - lettres minuscules (a, b, c, …) ; I -
chiffres romains majuscules (I, II, III, …) ; i - chiffres romains minuscules (i,
ii, iii, …) ; 1 - chiffres arabes (1, 2, 3, …).

2.2.2. La création de tables

La balise <Table> repère le début d’une table ; elle accepte des paramètres
facultatifs dont les plus courants sont mentionnés dans le tableau suivant :

Paramètre Description
ALIGN Spécifie l’alignement à gauche ou à droite de la table
BACKGROUND Spécifie l’image qui doit constituer l’arrière-plan de la table
BGCOLOR Spécifie la couleur d’arrière-plan de la table
BORDER Spécifie l’épaisseur de la bordure autour des cellules de la
table; si vous attribuer la valeur 0, aucune bordure ne sera
affichée.
CELLPADDING Spécifie le nombre de pixels entre le bord de chaque cellule
et le contenu de la cellule
CELLSPACING Spécifie le nombre de pixels entre les cellules dans la table
COLS Spécifie le nombre de colonnes; ce paramètre est inutile car
la table contiendra le nombre de colonnes que vous créez
HEIGHT Hauteur de table en pixels ou en pourcentage
WIDTH Largeur de la table en pixels ou en pourcentage

La balise <TR> repère le début d’une ligne de la table ; elle accepte plusieurs
paramètres dont les suivants :
Paramètre Description
ALIGN Spécifie l’alignement à gauche, centré ou à droite de la page
du contenu des cellules de la ligne.
BACKGROUND Spécifie l’image qui doit constituer l’arrière-plan des
cellules de la ligne
BGCOLOR Spécifie la couleur d’arrière-plan des cellules de la ligne

La balise <TH> repère un titre de table pouvant être utilisé en haut de chaque
colonne ; elle accepte les paramètres suivants :

Paramètre Description
ALIGN Spécifie l’alignement à gauche, centré ou à droite de la page
du contenu des cellules de la ligne.

Professeur : ASSALE Adjé Louis 6/24 INP-HB

Programmation Web JScript

BACKGROUND Spécifie l’image qui doit constituer l’arrière-plan des

cellules de la ligne
BGCOLOR Spécifie la couleur d’arrière-plan des cellules de la ligne
COLSPAN Le nombre de colonnes de la table sur laquelle le titre peut
s’étendre
ROWSPAN Le nombre de lignes de la table sur laquelle le titre peut
s’étendre
VALIGN L’alignement vertical du contenu en haut, au milieu, en bas
ou la ligne de base du texte de la cellule.
WIDTH Largeur de la cellule ; la valeur de la plus grande cellule
dans une colonne sera attribuée aux autres.

Notez que tout texte contenu dans le titre d’une table est affiché par défaut en
gras, mais l’on peut ajouter les balises italique et souligné.

La balise <TD> (table definition) repère le contenu d’une cellule et elle accepte
différents paramètres (identiques à ceux de la balise <TH>).

Exemple :
<html>
<head>
<title>Exemple de table</title>
</head>
<body>
<h2>Liste de produits</h2>

<table cellpadding=3 border=2>

<tr>
<th colspan=2>Objet</th>
<th>Quantité</th>
<th>Prix Unitaire</th>
<th>Montant</th>
</tr>
<tr>
<td>8890</td>
<td>Bananes</td>
<td align=center>3</td>
<td align=right>2 000 F</td>
<td align=right>6 000 F</td>
</tr>
<tr>
<td>1290</td>

Professeur : ASSALE Adjé Louis 7/24 INP-HB

Programmation Web JScript

<td>Mangues</td>
<td align=center>5</td>
<td align=right>2 500 F</td>
<td align=right>12 500 F</td>
</tr>
<Tr>
<td colspan=4 align=right><b>TOTAL :</b></td>
<td align=right>18 500</td>
</tr>
</table>
</body>
</html>
L’affichage donne:

2.2.3. Création de formulaires

Pour créer un formulaire, on définit des champs entre les balises <Form> et
</Form>. A cet effet, les formulaires utilisent des objets tels que, les zones de
texte, les boutons de commande, les cases à cocher ou les boutons d’option.

La balise <input> permet de créer des zones de texte simple (de petite taille), des
boutons de commande, des cases à cocher et des boutons d’option. Elle accepte
les paramètres Type, Name, size et Value.
Syntaxe pour une zone de texte :
<input type=Text name=Nom size=longueur value=contenu>
Syntaxe pour un bouton de commande :
<input type=Submit name=Nom value=etiquette>
Syntaxe pour une case à cocher :

Professeur : ASSALE Adjé Louis 8/24 INP-HB

Programmation Web JScript

<input type=Checkbox name=Nom value=valeur si case cochée>

Syntaxe pour un bouton d’option :
<input type=Radio name=Nom value=valeur si choisi [Checked]>
Tous les boutons d’option d’un même groupe doivent avoir la même valeur pour
le paramètre Name ; le bouton choisi par défaut lors du premier affichage du
formulaire doit avoir la mention Checked à la fin de sa balise input.

Remarquez que la balise <input> n’a pas de marque de fin.

La balise <Textarea> s’utilise pour créer une zone de texte de grande quantité de
données. Contrairement à la zone de texte simple, les données à afficher doivent
être placées entre les balises <Textarea> et </Textarea>.
Elle accepte un certain nombre de paramètres dont :
 Wrap, définit ce qui se passe lorsque l’on appuie sur la touche Entrée. La
valeur de Wrap la plus utilisée est Virtual qui permet d’ajouter une ligne.
 Name, même signification que pour le texte simple (nom interne de
l’objet).
 Rows et Cols spécifient respectivement le nombre de lignes et de
colonnes.
Syntaxe et Exemple :
<Textarea Wrap=Virtual name=Zone_saisie rows=5 cols=60>
entrez votre texte
</Textarea>

3. Notions de JScript

3.1. Lecture et affichage de données

La fonction alert sert à afficher une valeur dans une boîte de message. Par
exemple : alert ("Bonjour toto").
La fonction prompt sert à lire une valeur à travers une boîte de saisie. Par
exemple : prompt("Entrer une valeur").

Exercice :
Ecrire un script qui demande le nom d’une personne et qui affiche ensuite
un message de salutation contenant le nom de la personne.

3.2. Variables et assignement

Professeur : ASSALE Adjé Louis 9/24 INP-HB

Programmation Web JScript

3.2.1. Variables

En JScript, il n'y a pas besoin de déclarer le type de variables que l'on utilise,
mais la déclaration est fortement conseillée et s’effectue à l’aide de l’instruction
var. la casse est respectée en JScript.
En fait, il n’existe que 4 types de données :
• des nombres : entiers ou à virgules

Les nombres entier peuvent être représentés en base 10 (décimale), en base 8

(octale) et en base 16 (hexadécimale).
Les entiers octaux commencent par "0" et peuvent contenir des chiffres de 0 à 7.
Les entiers hexadécimaux commencent par "0x"

• des chaînes de caractères (string) : une suite de caractères

Elles sont délimitées par des guillemets simples ou doubles. Une chaîne
constitue également un objet spécial.
Les caractères spéciaux suivants peuvent être insérés dans les chaînes de
caractères :
\b insérer un retour en arrière
\f insérer un saut de page
\n insérer un saut de ligne
\r insérer retour chariot
\t insérer un caractère de tabulation
\' - \" - \\
• des booléens : des variables à deux états permettant de vérifier une
condition : false ou true
• des variables de type null : un mot caractéristique pour indiquer qu'il n'y
a pas de données.

Par exemple :
var i=0 ;
var reponse=false ;
var lachaine = null; //la variable lachaine ne reçoit pas de valeur
var k ; // k existe mais sa valeur est indéfinie (undefined)

3.2.2. Opérations

 Opérateurs arithmétiques : +, -, *, /, %
 Opérateurs de comparaison : ==, !=, >, >=, <, <=
 Opérateurs logiques : &&, ||, !

Professeur : ASSALE Adjé Louis 10/24 INP-HB

Programmation Web JScript

3.3. Les instructions

Ce sont les suivantes :

Conditionnel Affectation Boucles

if (condition) = while (expression)
{commandes ;} {commandes;
else }
{commandes ;}
switch (expression) op= où op est dans do {
{ {+, -, *, /, %, commandes;
case val1 : commandes ; <<, >>, &, ^, |} } while (expression)
break ;
case val2: commandes; break;
case valn: comandes; break;
default: commandes;
}
++, -- for (expression1;
expression2;expressio
n3) { commandes;}
for(variable in objet)
{ commandes;}

break : permet de sortir d’une boucle

continue : pour passer à l’itération suivante.

Les commentaires en JScript sont spécifiés de 2 manières :

Les symboles // pour définir un commentaire sur une ligne
Les symboles /* commentaires */ pour définir un commentaire sur plusieurs
lignes.

3.4. Les sous-programmes

3.4.1. Définition

JScript admet la possibilité de créer des procédures et fonctions. L’instruction

function permet de créer un sous-programme.
Les procédures : elles ne retournent pas de valeur donc ne contiennent pas
l’instruction return(expression) ;
function nom_procedure(para1, para2, …){

Professeur : ASSALE Adjé Louis 11/24 INP-HB

Programmation Web JScript

Instructions
}
Les fonctions : contiennent l’instruction return(expression)
Function nom_fonction(para1, para2, …){
Instructions + au moins une instruction de la forme
return (expression)
}

3.4.2. Quelques fonctions prédéfinies

Les fonctions prédéfinies ne sont des méthodes d’aucune classe.

La fonction escape(chaine) prend en argument un caractère spécial et retourne

son code d’échappement. Chaque code d’échappement comporte le symbole du
pourcentage (%) suivi de deux nombres.

La fonction unescape(chaine) exécute l’opération inverse.

La fonction eval(chaine) permet d’évaluer des expressions mathématiques

correctes présentées sous forme de chaînes.

La fonction parseFloat(chaine) analyse une chaîne en vue de la convertir en

valeur numérique réelle.

La fonction parseInt(chaine, base) analyse une chaîne en vue de la convertir en

valeur numérique entière. base peut prendre les valeurs 2, 8, 10 ou 16.

La fonction isNaN(expression) retourne false ou true. Si une expression ne peut

être évaluée, elle prend la valeur NaN (pour Not a Number). C’est le cas par
exemple, lors d’une division par 0 ou lorsqu’on essaie de transformer en nombre
une chaîne de caractères qui n’a rien de numérique.

La fonction void() est utilisé en association avec le pseudo-protocole JScript

lequel permet de remplacer une URL par du code JScript. Par exemple :
<A HREF="JScript :void(instruction)">
L’opérateur void fait en sorte que la commande Jscript exécutée ne retourne
aucune valeur. instruction peut être une fonction ou autre.

4. Les objets en JScript

Professeur : ASSALE Adjé Louis 12/24 INP-HB

Programmation Web JScript

Javascript traite les éléments qui s'affichent dans votre navigateur comme des
objets, c'est-à-dire des éléments classés selon :
• une hiérarchie pour pouvoir les désigner précisément
• auxquels on associe des propriétés
Par exemple, pour atteindre un bouton à l'intérieur d'un formulaire, la hiérarchie
est :
Window  Document  Form  Checkbox

En JScript, on a également des classes prédéfinies (spéciales) d’objet : les

tableaux – les chaînes de caractères – les dates – Math –Image et autres.

4.1. Objets spéciaux

4.1.1. Les chaînes de caractères

Lors de la manipulation de chaînes de caractères un objet String est

implicitement créé. On peut créer une chaîne en utilisant explicitement le
constructeur String. Par exemple : var machaine = new String('toto') au lieu de
var machaine = 'toto'
Un objet String dispose de propriétés et de méthodes :
 La propriété length retourne le nombre de caractères de la chaîne
x= nom_chaine.length
 Les méthodes sont résumées dans le tableau suivant

Méthodes Description
chaine.charAt(position) Retourne le caractère situé à la position donnée
indexOf(sous-chaîne, Retourne la position d'une sous-chaîne
position) en effectuant la recherche de gauche à droite, à
partir de la position spécifiée en paramètre.
lastIndexOf(sous-chaîne, La méthode est similaire à indexOf(), à la
position) différence que la recherche se fait de
droite à gauche:
substring(position1, La méthode retourne la sous-chaîne comprise
position2) entre les positions 1 et 2 données en paramètre.
toLowerCase() Convertit tous les caractères d'une chaîne en
minuscule
toUpperCase() Convertit tous les caractères d'une chaîne en
majuscule
toUpperCase() Convertit tous les caractères d'une chaîne en
majuscule

Professeur : ASSALE Adjé Louis 13/24 INP-HB

Programmation Web JScript

Il existe d’autres méthodes :

- anchor(nom_a_donner) transforme le texte en ancrage HTML

- big() augmente la taille de la police
- bold() met le texte en gras
- blink() transforme la chaîne en texte clignotant
- fixed transforme le texte en police fixe
- fontcolor(couleur) modifie la couleur du texte, l’argument est
en hexadécimale ou valeur littérale
- fontsize(taille) modifie la taille de la police
- italics() met le texte en italique
- link(url) transforme le texte en hypertexte
- small() diminue la taille de la police
- strike() transforme le texte en texte barré
- sub() transforme le texte en indice
- sup() transforme le texte en exposant

4.1.2. Les tableaux

La déclaration d’un tableau s’effectue à l’aide de la fonction Array() :

var montableau = new Array() ; // tableau dont la taille n’est pas définie
var montableau = new Array(10) ; //tableau de 10 éléments

L’on peut initialiser un tableau lors de sa déclaration

var letableau = new Array(Val1, …, ValN) ;
Les indices varient de 0 à N-1 et les Vali peuvent être de types différents

La taille d’un tableau est dynamique. La propriété length retourne la taille du

tableau.

En général, l’index d’un tableau est un entier, mais il peut être aussi une chaîne
de caractères. Dans ce cas le tableau est dit associatif (chaque valeur est
nommée). Par exemple :

//tableau associatif
var Tab = new Array() ;
//le premier index est la chaîne num
Tab['num'] = 1 ;
//le second index est la chaîne nom
Tab['nom'] = "Assalé" ;
//le troisième index est la chaîne prenom
Tab['prenom'] = "Louis"

Professeur : ASSALE Adjé Louis 14/24 INP-HB

Programmation Web JScript

Un tableau est un objet prédéfini qui possède des propriétés et des méthodes. Un
tableau associatif est considéré comme un objet avec des propriétés. Ainsi,
Tab['nom'] est équivalent à Tab.nom
De même un objet est considéré comme un tableau associatif. Par exemple pour
parcourir les propriétés d’un objet window, l’on peut utiliser la boucle suivante :
for (lapropriete in window) { //lapropriete est une chaine
document.write( window[lapropriete]);
}

Les méthodes disponibles pour l’objet tableau sont les suivantes:

- concat(tableau1) concatène le tableau au tableau1
- sort(fonction_comparaison) classe les éléments du tableau en fonction
de la fonction de comparaison fonction_comparaison. Par défaut la
comparaison est faite selon l’ordre alphabétique
- join(separateur) retourne une chaîne de caractères composée de tous
les éléments du tableau, séparés par la chaine separateur. Par défaut
«,»
- reverse() inverse l’ordre des éléments du tableau
- slice(debut, fin) retourne un tableau commençant par l’index debut et
finissant par l’index fin. Si fin est négatif, arrêt avant le dernier
élément

4.1.3. La classe Date()

Son constructeur sans paramètre permet de créer un objet référençant la date

actuelle : var aujourdhui = new Date()

On peut créer des variables en spécifiant des dates :

var ladate = new Date(année, mois, jour)
var ladate = new Date(année, mois, jour, heure, minute, seconde)
Le mois doit être un entier compris 0 et 11.

Les méthodes relatives à la classe Date() sont :

Méthode Description
getDate() Retourne le jour du mois compris entre 1 et 31
getDay() Retourne le jour de la semaine entre 0 et 6
getHours() Retourne l’heure entre 0 et 23
getMinutes Retourne les minutes entre 0 et 59
getMonth() Retourne le mois entre 0 et 11
getSeconds() Retourne les secondes entre de 0 et 59

Professeur : ASSALE Adjé Louis 15/24 INP-HB

Programmation Web JScript

setDate() Affecte le jour du mois entre 1 et 31

setHours() Affecte l’heure entre 0 et 23
setMinutes(minute) Affecte les minutes entre 0 et 23
setMonth(mois) Affecte le mois entre 0 et 11
setSeconds(seconde) Affecte les secondes entre 0 et 59

4.1.4. La classe Image()

On crée une variable image par : var nom_image = new Image().

La classe Image() dispose de 4 propriétés :
 src chaîne de caractères contenant l’URL du fichier image
 height hauteur de l’image en pixels
 width largeur de l’image en pixels
 complete retourne true quand l’image est chargée

Par exemple :

<Script Language="JScript">
Maphoto = new Image()
Maphoto.src ='louis.jpeg'
</Script>
<IMG SRC="mari.jpeg" NAME="laphoto">
<A HREF="Jscript:void(window.document.laphoto.src = Maphoto.src"> On
change</A>

Les objets Image possèdent 3 gestionnaires d’événement:

 onabort action exécutée lors de l’arrêt du chargement par l’utilisateur
 onerror action exécutée lors d’erreur de chargement
 onload action exécutée lors du début du chargement

La syntaxe d’utilisation est la suivante :

objet_image.onevenement = nom_fonction

4.1.5. La classe Math

C’est une classe qui ne possède pas de constructeur. Elle est déjà instanciée et ne
possède qu’un seul objet. Elle dispose de propriétés qui sont des constantes et
des méthodes qui sont les principales fonctions mathématiques.
Les propriétés sont :

Professeur : ASSALE Adjé Louis 16/24 INP-HB

Programmation Web JScript

 E constante d’Euler (e)

 LN10 logarithme népérien de 10
 LN2 logarithme népérien de 2
 PI
 SQRT1_2 racine carrée de ½
 SQRT2 racine carrée de 2
L’utilisation est Math.nom_constante.

Les méthodes sont : abs(nombre) – acos(nombre) – asin(nombre) – atan2(x, y)

– ceil(nombre) – cos(nombre) – pow(base,exposant), …

4.2. Hiérarchie des objets

Quand l’on ouvre une page Web, le navigateur crée des objets prédéfinis ; les
objets de base du navigateur sont :
 navigator : qui contient des informations sur le navigateur de celui qui
visite la page. Une seule instance existe l’objet navigator.
 window : objet où s’affiche la page, contient des propriétés concernant la
fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-
ci. Une instance par fenêtre et frame du document HTML.
 location : contient des informations relatives à l’adresse de la page à
l’écran
 history : liste des liens qui ont été visités précédemment
 document : il contient les propriétés sur le contenu du document (couleur
d’arrière plan, titre, …)

Les objets du navigateur sont classés hiérarchiquement :

Niveau1 Niveau2 Niveau3 Commentaire

navigator Information sur le browser
utilisé
window Gestion de la fenêtre
d’affichage
parent, frames, Désignation de la sous-
self, top fenêtre
location Informations sur
l’emplacement de la page
history Accès à l’historique (sites

Professeur : ASSALE Adjé Louis 17/24 INP-HB

Programmation Web JScript

précédemment visités)
document Informations sur le contenu
de la fenêtre (éléments qui
composent la page)

images Référence des images

présentes dans la page
forms Référence des formulaires
présents dans la page
links Référence des liens présents
dans la page
anchors Référence des ancrages
présents dans la page

L’accès aux objets se fait par une notation par points. Comme il peut avoir
plusieurs formulaires et plusieurs boutons dans chaque formulaire, certains
objets sont automatiquement numérotés. Par exemple :
window.document.forms[0].checkbox[0] permettra d’accéder au premier
bouton du premier document. Si l’on connait le nom du formulaire ou du bouton,
on peut les utiliser dans la formule : window.document.maforme.monbouton

4.2.1. L’objet navigator

Les propriétés de l’objet navigator sont :

 appName nom du browser
 appVersion version du browser
 language langue sur 2 caractères
 platform type de machine
 appCodeName nom de code
 userAgent information générales envoyées au serveur http à
chaque requête du navigateur
 plugins tableau des plugins installés sur le navigateur
 mimeTypes tableau des types mimes reconnus

4.2.2. L’objet window

Un objet window existe pour chaque fenêtre ou cadre (zone) ouverte par le
navigateur. Ses propriétés de base sont : history – location et document.

Professeur : ASSALE Adjé Louis 18/24 INP-HB

Programmation Web JScript

Les autres propriétés sont :

 frames[] permet d’avoir accès aux cadres ; on peut utiliser
directement le nom du cadre
 parent, self, top permettent d’accéder aux autres cadres
 defaultStatus précise la valeur par défaut du texte à afficher dans la
barre d’état
 status précise la valeur du texte à afficher dans la barre d’état à un
instant donné
 closed permet de savoir si la zone a été fermée

Quelques méthodes :
 open() – close() – alert() – prompt()
 focus() rend la zone active
 blur() rend la zone non active
 confirm() ouvre fenêtre avec message, boutons Ok et Annuler
 back() renvoie sur la page précédente
 forward() renvoie sur la page suivante
 home() renvoie sur la page d’accueil
 stop() stoppe le chargement de la zone
 find(chaine, casse, sens) recherche la chaîne dans la zone
 print() imprime le document courant

Quelques événements :
 onFocus quand la fenêtre devient active
 onBlur idem mais quand la fenêtre devient non active
 onerror exécuter une fonction quand survient une erreur
 et aussi onload, onunload, onmove et onresize

window.history dispose des méthodes : back() – forward() et go(int)

window.location dispose des méthodes: reload() recharge le document courant;

replace(URL) remplace le document courant.
Quelques propriétés de window.location :
 href contient la totalité de l’URL ; charge une URL dans une autre
fenêtre
 hash partie de l’URL située après #
 host nom du serveur et port
 hostname nom du serveur
 port numéro de port sur le serveur
 pathname entre le nom d’un script CGI et le ?

Professeur : ASSALE Adjé Louis 19/24 INP-HB

Programmation Web JScript

 protocol nom du protocole

 search partie de l’URL située après le ?; permet de récupérer
les données d’un formulaire en méthode GET.

Les principales propriétés de window.document :

 title titre du document
 fgColor couleur du texte
 bgColor couleur du fond
 linkColor couleur des liens
 vlinkColor couleur des liens visités
 alinkColor couleur de liens activés
 URL adresse du document
 referrer URL du document précédent
 lastModified date de dernière modification

Les principales méthodes de window.document :

 write(arg1, …, argN) affiche les chaînes ou les arguments
traduits en chaînes
 writeln(arg1, …, argN) idem que write avec retour chariot
 open() crée un nouveau document (vide l’ancien) dans lequel
on peut écrire avec write(), ne pas confondre avec la création d’une
fenêtre
 close() ferme le document et provoque l’affichage de ce qui a
été écrit avec write(), ne pas confondre avec la fermeture d’une
fenêtre
 getSelection() retourne une chaîne de caractère contenant le texte
sélectionné dans le document

4.2.3. Les événements

Les événements sont les actions de l’utilisateur qui vont donner lieu à une
interactivité. Il existe deux façons d’associer une action à un couple (objet,
événement) :
 Utilisation des attributs de balise spécifiques associés aux
événements. Par exemple :
<a href="index.html" onMouseOver="alert('bonjour') ;">cliquez
ici </a>
 Indication pour un élément et un événement donnés la fonction qui
devra être exécutée. Par exemple :
<body><a id="Lien1" href="index.html">cliquez
ici</a></body>

Professeur : ASSALE Adjé Louis 20/24 INP-HB

Programmation Web JScript

<script language="JScript">
function bonjour() {alert('bonjour');};
document.links[0].onMouseOver=bonjour;
</script>

La liste des événements:

Événement Objets affectés Description

onAbort images S’exécute en cas d’arrêt de chargement,
par appui sur le bouton stop ou par un
clic prématuré sur le lien
onBlur Fenêtre et tous les S’exécute quand on quitte la fenêtre ou
éléments de un objet de formulaire
formulaire
onChange Champ texte, Elément du formulaire est modifié
zones de texte,
liste de sélection
onClick Boutons, boutons
radio, bouton
submit et reset,
liens
onDragDrop Fenêtres Quand on pose un élément à l’intérieur
de la fenêtre
onError Images, fenêtres Quand chargement provoque erreur
onFocus Fenêtres et tous Quand on sélectionne la fenêtre ou
les éléments du l’objet formulaire
formulaire
onKeyDown Documents, Quand une touche du clavier est pressée
images, liens,
zones de texte
onKeyPress Documents, Quand on appuie et maintient une
images, liens, touche du clavier
zones de texte
onKeyUp Documents, Quand on relâche une touche du clavier
images, liens,
zones de texte
onLoad Documents Au chargement
onMouseDown Documents, Quand on clique avec le bouton de la
boutons, lien souris
onMouseMouve Rien par défaut Quand on bouge la souris
onMouseOut Cartes, liens Quand pointeur de souris sort d’une
zone de sélection graphique ou un lien

Professeur : ASSALE Adjé Louis 21/24 INP-HB

Programmation Web JScript

onMouseOver liens Quand pointeur de souris passé sur un

lien
onMouseUp Documents, S’exécute quand on relâche le bouton de
boutons, liens la souris
onMove Fenêtres Quand utilisateur ou script bouge une
fenêtre
onReset Formulaires Quand on “resete” un formulaire
onResize Fenêtres Quand taille d’une fenêtre change
onSelect Champs ou zones Quand on sélectionne une zone ou un
de texte champ texte (clavier ou souris)
onSubmit Formulaire S’exécute au moment de l’envoi du
formulaire
onUnLoad Documents Quand on quitte le document

4.3. Création de classes

Pour créer une classe d’objet, on définit un constructeur de cette classe par la
déclaration d’une fonction qui porte le nom de la classe. On ajoute ensuite une
méthode en définissant une fonction que l’on intègre au constructeur. Par
exemple soit à définir une classe Rectangle :
function Rectangle(long, larg)
{ this.long = long ;
this.larg = larg ;
}

function perimetre()
{ return (2*(this.long+this.larg)) ;
}

function Rectangle(long, larg)

{ //definition des propriétés
this.long = long ;
this.larg = larg ;
//definition des methods
this.perimetre = perimerer;
}

Professeur : ASSALE Adjé Louis 22/24 INP-HB

Programmation Web JScript

5. TD de HTML et JScript
Exercice 1 :

Réaliser en HTML le tableau suivant :

Objet
Quantité Prix Unitaire Montant
Référence Désignation
001 Ecran 15 150 000 2 250 000
002 Unité centrale 20 250 000 5 000 000
003 Clé USB 100 8 000 800 000
TOTAL : 8 050 000

Exercice 2 :

Afficher à l’écran tous les diviseurs d’un entier N lu au clavier.

Exercice 3 :

Déterminer le nième (n lu au clavier) terme de la suite définie par :

U0=4 Un=2Un-1 + 3

Exercice 4 :

Ecrire une fonction pour calculer le pgcd de 2 entiers a et b lus au clavier par la
méthode d’Euclide :
Si a>b a = bQ + R
Si R = 0 pgcd(a,b) = b sinon pgcd(a,b) = pgcd(b,R).

Exercice 5 :
Ecrire une fonction qui détermine le 1er terme de la suite de Fibonacci > à
N entier lu au clavier. La suite de Fibonacci est définie par : U0=U1=1
Un+1=Un+Un-1

Exercice 6 :

Déterminer les nombres amis dont l’un est inférieur à un nombre Nmax lu au
clavier. Deux nombres N et M sont amis si et seulement si :
Σdiviseur de N = M et Σdiviseur de M = N

Professeur : ASSALE Adjé Louis 23/24 INP-HB

Programmation Web JScript

Exercice 7 :

Réaliser une calculatrice.

Exercice 8 :

Réaliser l’application suivante dans une page Web

Exercice 9 :

Réaliser un formulaire Web avec des contrôles de zones de saisie numérique et

texte. Lors de la soumission du formulaire, contrôler que tous les champs sont
renseignés avec le type approprié.

Professeur : ASSALE Adjé Louis 24/24 INP-HB