Javascript

N7 Cours

Michel Cabaré
Décembre 2000
 T A B L E D E S M A T IE R E S

QU’EST-CE JAVASCRIPT.................................................................................................... 6
Présentation............................................................................................................... 6
Objectifs ..................................................................................................................... 7
Les plus et …les moins : ............................................................................................ 7
APPEL D’UN SCRIPT JAVASCRIPT .................................................................................... 8
Les différents appels ................................................................................................ 8
Dans le navigateur :................................................................................................. 8
Tag spécifique ........................................................................................................... 9
Tag pré existant ......................................................................................................... 10
Tag <NOSCRIPT> ........................................................................................................ 12
UN PEU DE SYNTAXE.......................................................................................................... 14
Min - maj :................................................................................................................... 14
Commentaires :......................................................................................................... 14
Expression :................................................................................................................. 14
Bloc : ........................................................................................................................... 14
LES VARIABLES .................................................................................................................... 15
Déclaration :.............................................................................................................. 15
Mots réservés :.......................................................................................................... 15
Variable locale-globale : ........................................................................................ 16
LES TYPES DE VARIABLES................................................................................................... 17
Principe :..................................................................................................................... 17
Chaîne de caractère - string :................................................................................ 17
Les nombres - number :............................................................................................ 19
Les booléens - boolean :......................................................................................... 20
PROCEDURES ET FONCTIONS........................................................................................... 22
Définir et appeler des fonctions / procédures : ................................................. 22
Déclaration de procédure : ................................................................................... 22
Déclaration de fonction :........................................................................................ 23
Appel de procédure :.............................................................................................. 23
Appel de fonction : .................................................................................................. 23
Gestion des arguments :.......................................................................................... 24
LES OPERATEURS................................................................................................................. 25
Arithmétiques :........................................................................................................... 25
Concaténation : ....................................................................................................... 25
Comparaison :........................................................................................................... 26
Affectation :............................................................................................................... 27
JavaScript Cabaré Michel-
Page 2
Cours v.2
Binaires :...................................................................................................................... 27
Logiques : ................................................................................................................... 29
Conditionnels :........................................................................................................... 29

JavaScript Cabaré Michel-

Page 3
Cours v.2
STRUCTURES DE CHOIX ..................................................................................................... 31
if else : ......................................................................................................................... 31
STRUCTURES DE REPETITION .............................................................................................. 33
While : ......................................................................................................................... 33
do while :.................................................................................................................... 34
for : .............................................................................................................................. 35
switch :........................................................................................................................ 37
LES FENETRES DE DIALOGUE............................................................................................. 38
Interface avec l'utilisateur :.................................................................................... 38
alert()........................................................................................................................... 39
confirm() ..................................................................................................................... 39
prompt()...................................................................................................................... 40
LES TABLEAUX ..................................................................................................................... 42
Nature des tableaux : .............................................................................................. 42
Propriétés - méthodes des tableaux : ................................................................... 46
NOTIONS D'EVENEMENTS................................................................................................. 47
Qu'est-ce un évènement:....................................................................................... 47
Gestionnaire d'évènement: ................................................................................... 48
évènement par défaut et spécifiques: ................................................................ 49
Quelques évènements javascript:........................................................................ 50
NOTIONS DE P.O.O. ........................................................................................................... 56
Objets – Méthodes - Propriétés: ............................................................................ 56
Un exemple de modèle objet : .............................................................................. 57
Modèle objet window Netscape : ....................................................................... 59
Modèle objet window Explorer :........................................................................... 60
PRINCIPAUX OBJETS JAVASCRIPT.................................................................................. 61
Objets et versions : ................................................................................................... 61
Date ............................................................................................................................ 62
Math............................................................................................................................ 64
string............................................................................................................................ 66
navigator ................................................................................................................... 67
Window ...................................................................................................................... 69
screen (àpartir de la version 1.2) ........................................................................... 74
LES PRINCIPAUX OBJETS DANS WINDOW ..................................................................... 75
Windows conteneur de : ........................................................................................ 75
document .................................................................................................................. 76
Exemple document.bgColor : ................................................................................ 77
Exemple document.cookie : .................................................................................. 78
frame........................................................................................................................... 84
Exemple frame[x].name :......................................................................................... 85
Exemple top.frames.lenght : ................................................................................... 86
history.......................................................................................................................... 87
Exemple history.back / forward :........................................................................... 88
location ...................................................................................................................... 89
JavaScript Cabaré Michel-
Page 4
Cours v.2
 Exemple location.replace :..................................................................................... 90
OUVRIR UNE NOUVELLE FENETRE .................................................................................... 91
La méthode open..................................................................................................... 91
Fermer une fenêtre .................................................................................................. 94
Écrire dans une fenêtre........................................................................................... 94
EVENEMENTS TEMPORISES................................................................................................ 95
méthode setTimeout() .............................................................................................. 95
Exemple : .................................................................................................................... 95
LES OBJETS DANS DOCUMENT ........................................................................................ 97
document conteneur de : ...................................................................................... 97
anchor ........................................................................................................................ 98
array............................................................................................................................ 98
link................................................................................................................................ 98
form............................................................................................................................. 99
area (àpartir de version 1.1) ................................................................................... 100
image (àpartir de version 1.1) ................................................................................ 101
Exemple image.src : ................................................................................................. 101
layers (àpartir de version 1.2) ................................................................................. 106
LES OBJETS DANS FORM ................................................................................................... 107
form conteneur de :................................................................................................. 107
button ......................................................................................................................... 108
checkbox................................................................................................................... 108
FileUpload (a partir de version 1.2) ....................................................................... 109
hidden......................................................................................................................... 109
password.................................................................................................................... 109
radio............................................................................................................................ 110
reset ............................................................................................................................ 110
select .......................................................................................................................... 111
submit.......................................................................................................................... 111
text............................................................................................................................... 112
textarea...................................................................................................................... 112
TRAVAILLER AVEC UN FORMULAIRE............................................................................... 113
Interêts :...................................................................................................................... 113
Accéder àdes champs de formulaire : ................................................................ 114
Calculs avec des chaînes : .................................................................................... 115
ANNEXE : VERSIONS.......................................................................................................... 116
JSCRIPT-JAVASCRIPT-ECMASCRIPT .............................................................................. 116
Correspondances avec ECMASCRIPT : ............................................................... 116
Versions Jscript :........................................................................................................ 116
Versions Javascript : ................................................................................................ 118
ANNEXE : RESSOURCES INTERNET ................................................................................... 119
Normes et spécifications :....................................................................................... 119
Sites et Forum: ............................................................................................................ 119

JavaScript Cabaré Michel-

Page 5
Cours v.2
 Q U ’E S T -C E J A V A S C R IP T

P résentation
L'emploi de javascript est devenu aujourd'hui indispensable pour qui veut créer un
site Web convivial et performant.

Auparavant, la majorité des traitements effectués dans les documents HTML étaient
réalisés par l'action du serveur et le poste client était très passif, puisque celui-ci se
bornait quasiment à afficher les résultats des requêtes que lui soumettait le dit
serveur ! En effet, un programme ou un script CGI (Common Gateway Interface)
était exécuté par le serveur qui transmettait le résultat au poste client, celui-ci
interprétait l'envoi HTML et l'affichait par le navigateur. Cette situation surchargeait
énormément les serveurs et le réseau...

Aujourd'hui, grâce au Javascript (introduit par Netscape 2.0), et encore plus

récemment avec le Dynamic HTML (introduit par Microsoft), cette situation a
complètement changé et le navigateur est maintenant capable "d'intelligence"
puisqu'il est à même de traiter des scripts embarqués coté « client », de manière
indépendante au serveur (réseau non utilisé), par un traitement local.

Il est vrai que le langage JAVA et aussi capable et même plus que le Javascript,
mais celui-ci est réservé à des spécialistes. Il permet beaucoup plus mais est
beaucoup plus lourd, car il nécessite une bonne connaissance de la programmation
(Objet), un compilateur (il est compilé àl'inverse du Javascript), un débogueur etc.

Le couple HTML-Javascript est très souple, accessible àla plupart des Webmasters et
sa popularité ne cesse de grandir car il permet un réelle autonomie au poste client,
même s’il ne peut accéder au fichiers du poste client sur lequel il s’exécute !

Il ne s’agit pas ici vous donner une approche complète du langage Javascript (un
livre entier serait nécessaire) mais de vous aider àen découvrir les notions de bases,
pour ensuite les appliquer de manière très pratique

JavaScript Cabaré Michel-

Page 6
Cours v.2
O b je c tifs
Javascript est un langage de script bien adapté àla création de petits programmes
simples, comme des convertisseurs d'unité, des calculettes simples, du contrôle de
formulaire, de l'animation de page…

Javascript n'est pas adapté pour mettre en place un affichage ou de la

manipulation de donnée, mais permet d'interagir avec l'utilisateur de manière
beaucoup plus souple que les langages plus complet tels que JAVA

D éclenchem ent par évènem ents

De par comment il est intégré aux navigateurs et au code HTML, Javascript peut
programmer des réponses à des évènements utilisateurs tels qu'un clic souris ou la
saisie de donnée dans un champs de formulaire, faire apparaître de l'aide dans la
barre d'état lorsque le pointeur de la souris passe sur une partie de la page,

O rienté O b jet
Javascript intègre une forme limité de modèle orienté objet (voir plus loin) chapitre

L e s p lu s e t …les m o in s :
Plus : interprété, la phase test-essais ne nécessite pas de compilation et
est dons très rapide

Plus : indépendant de la plateforme utilisée

Plus : taille réduite et vitesse d'exécution élevée

Moins : code source non dissimulable

Moins : faible possibilités de débogage et fonctionnalités relativement

limitées

Moins : nécessite une version relativement récente des navigateur

Moins : interprété, les nuances d'interprétation d'un navigateur àl'autre,

voire d'un version àune autre peuvent être considérables

JavaScript Cabaré Michel-

Page 7
Cours v.2
 A P P E L D ’U N S C R IP T J A V A S C R IP T

L e s d iffére n ts appels
Pour qu'un document HTML puisse exécuter des traitements par le biais de scripts
Javascript, il faut en premier lieu que celui-ci comprenne les scripts écrits dans ce
langage. En effet, le Javascript est un langage de scripts et le navigateur interprète
ceux-ci lors du chargement de la page HTML :

Nous allons le voir, plusieurs manières peuvent être employées pour l'insertion d'un
script Javascript dans un document HTML :

• Dans le Navigateur : le script ou l'appel du script se faisant

directement dans l'URL du navigateur

• Par un Tag spécifique : incorporant le script lui-même

ou faisant appel au source du script

• Par modification d’un Tag : utilisant du javascript standard prédéfini

ou appelant une fonction définie
auparavant manuellement en javascript

D a n s le n a v ig a teur :
La première manière, pour exécuter un script peut être de taper directement l'appel
dans la zone de saisie de l'URL dans le navigateur utilisé, (voire de taper directement
l'instruction javascript) : il suffit de le faire précéder du mot réservé javascript:

Appel dans

Nestcape

JavaScript Cabaré Michel-

Page 8
Cours v.2
 Appel dans

Explorer

On voit tout de suite que le comportement du navigateur face à une instruction

Javascript peut varier (ici au niveau de la barre de titre de la fenêtre qui s'affiche)

DONC DE MANIERE CONSTANTE, UN SCRIPT DEVRA ETRE TESTE SOUS LES

PRINCIPAUX TYPE DE NAVIGATEUR QUE LE CONCEPTEUR ESTIME DEVOIR
"ACCEPTER"

T a g s p é c ifiq u e
plus classiquement, on insère un script à l'aide d'une balise spécifique <SCRIPT> qui
doit être insérée dans le document HTML même.

TAG <SCRIPT> </SCRIPT>

LANGUAGE="JavaScript"

Paramètre Précise quel est le langage du script (JavaScript,

VBScript...) avec sa version éventuelle 1.2 par
exemple

SRC

précise l'URL du script qui doit être inséré. Cet

Paramètre attribut n'est employé que dans le cas où le

contenu du script n'est pas inséré dans le
document HTML lui-même mais dans un fichier
d'extension ".js".

Par exemple :
SCRIPT LANGUAGE="JavaScript">
...contenu du script...
</SCRIPT>

Ceci peut être complété, pour raison de compatibilité avec les navigateurs de
version inférieure, par l'adjonction des balises de commentaires HTML, qui
permettront ainsi aux navigateurs plus anciens d'ignorer le contenu du script.

JavaScript Cabaré Michel-

Page 9
Cours v.2
 Cet ajout n'est pas obligatoire pour l'exécution du script cependant, il est
recommandé de l'employer, lui-même agrémenté éventuellement par les mots
(Début du script et Fin de script) si vous voulez rendre la lecture du code très lisible.

S crip t d a n s u n e p a g e H T M L:
<BODY>
<script LANGUAGE="JavaScript">
<!--
Voir le fichier alert (' bonjours')
COURSJS01.HTM //-->
</script>
exemple de script minimaliste, mais existant !
</BODY>

Selon que vous voulez utiliser une version ou une autre du JavaScript, vous devrez
mettre des balises différentes.

Version Compatibilité Balise

JavaScript
I.Explorer 3.0 - Netscape 2.0 <SCRIPT LANGUAGE="JavaScript1.0">
1.0

JavaScript
Netscape 3.0x , 4.0 et 4.x <SCRIPT LANGUAGE="JavaScript1.1">
1.1

JavaScript I.Explorer 4.x

<SCRIPT LANGUAGE="JavaScript1.2">
1.2 Netscape 4.0x à4.05

JavaScript I.Explorer 5.x

<SCRIPT LANGUAGE="JavaScript1.3">
1.3 Netscape 4.06 à4.74

Scrip t dans un fichier .js:

par exemple
<script Language="JavaScript1.2" SRC="coursjs02.js"></SCRIPT>

Voir le fichier
COURSJS02.HTM et le avec dans le fichier :
fichier COURSJS02.JS // début du script -->
...contenu du script...
// Fin du script -->

ATTENTION : mettre le script en SRC "dévalide" la vérification de version possible via

l'instruction Language, (au moins sur netscape 3.x)

Tag pré existant

JavaScript Cabaré Michel-

Page 10
Cours v.2
 Une autre manière pour insérer un script se fait par l'ajout d'un code spécifique dans
la balise d’un élément HTML, il s'agira soir d'un appel direct soit d'un appel de script
écris au préalable

A p p e l d irect
Il est possible d'employer une fonction intégrée du Javascript par le seul ajout de ce
code dans la balise de l'élément mais cela restera très limité.

Par exemple :
<BODY>
exemple de script minimaliste, <BR>
Voir le fichier mais existant au click sur ce bouton
COURSJS03.HTM <form>
<input type="button" value="cliquez sur moi !" onClick="alert('ouille !')" >
</form>
</BODY>

Ce code provoque l'apparition d'une fenêtre (alerte) par le clic (l'événement

"onClick") sur le bouton du formulaire... Cette fenêtre spéciale, "alerte", est une
fenêtre de dialogue dans laquelle une chaîne de caractères (message) est affichée.
C'est une méthode de l'objet window. Pour cet exemple, il n'est donc pas nécessaire
d'insérer un script dans le document

A p p e l d e fonction
Mieux vaut l'ajout d'un appel de fonction spécifique dans la balise de l'élément qui
lancera le traitement. Ce code servira très souvent àlancer une fonction définie dans

JavaScript Cabaré Michel-

Page 11
Cours v.2
 un script "conventionnel" c'est-à-dire, inséré par les balises conventionnelles (<SCRIPT>)
un peu plus haut.

Par exemple :
<script language="JavaScript">
<!--
function hurle()
{
alert("ouille !, mais après tout aussi merci de m\'avoir donné
Voir le fichier l\'occasion de m\'exprimer")
COURSJS04.HTM }
//-->
</script>
</HEAD>

ce qui permet de définir au préalable un script parfois important sous le nom hurle()

suivit plus loin de

<BODY>
exemple de script dans une fonction, <BR>
mais existant au click sur ce bouton
<form>
<input type="button" value="cliquez sur moi !" onClick="hurle()" >
</form>
</BODY>
</HTML>

ce qui permet d'appeler le script défini plus haut par son nom hurle()

N.B: Vous avez remarqué un caractère "\" (barre oblique inverse), appelé caractère
d'échappement, placé avant l'apostrophe placé devant le mot "image" ! En fait,
l'apostrophe est un caractère qui fait partie de la syntaxe du code Javascript
(comme les guillemets) et pour indiquer que cet apostrophe particulier ne doit pas
être interprété comme tel, il faut placer ce caractère ("\") avant l'apostrophe (ou les
guillemets)

T a g < N O S C R IP T >
Si l'utilisateur qui visionne vos documents HTML, comprenant des scripts n'a pas
activé l'option appropriée, il est possible de lui donner un message particulier. En
effet, tout texte inséré avec la balise spécifique <NOSCRIPT> verra celui-ci affiché
tandis que le navigateur de ceux pour qui l'option est activée ignorera le texte...

Essayer de modifier le fichier avec l'ajout de

<NOSCRIPT>
Javascript ou l'option appropriée non activée...
</NOSCRIPT>

JavaScript Cabaré Michel-

Page 12
Cours v.2
Essayez de désactiver dans un navigateur l'interprétation Javascript pour visualiser
ce tag…(solution en COURSJS04B.HTM)

Dans Netscape on demandera le menu :

Edition / Préférences / Avancées

Dans Explorer cela dépends des zones de sécurité que l'on a mis en place (mais ne
peut s'appliquer au fichier téléchargés localement…)

OUTILS / OPTIONS INTERNET / SECURITE

dans laquelle il faut demander de personnaliser le niveau

JavaScript Cabaré Michel-

Page 13
Cours v.2
 UN PEU DE SYNTAXE

M in -m a j :
Html n'est pas regardant sur les problèmes de minuscule ou de majuscule, il lui suffit
de retrouver la bonne "syntaxe", quelle que soit la casse

Javascript est sensible àla casse et fera donc clairement la différence entre

Toto, toto ou TOTO

C o m m e n ta ire s :
Les commentaire HTML débutent par
<!-- et se terminent par -->
Les commentaires Javascript existent de deux sortes

• // invalide la fin de ligne restante

• /* ouvre un commentaire qui ira jusqu'àce que soit rencontré */

Expressio n :
Toute expression se termine par un ;
Certain navigateurs acceptent un retour àla ligne

B lo c :
On peut regrouper plusieurs expressions entre elles pour créer des "blocs"

{ expression 1;

expression 2;

JavaScript Cabaré Michel-

Page 14
Cours v.2
 L E S V A R IA B L E S

D éclaration :
Pour représenter, manipuler, stocker ou modifier des valeurs, fournies dans un code
Javascript, comme dans tout langage de programmation, il faut utiliser des
variables.

En javascript, la déclaration des variables est très simple car très peu différenciée. Il
n'est pas obligatoire, mais recommandé, de déclarer des variables par le mot clé
"var".

L'identificateur de variable doit, pour être correct :

• être une chaîne de caractères

• commencer par une lettre de l'alphabet ou le caractère de

soulignement ("_") (Le reste de la chaîne peut comporter des chiffres)

var adresse = "Rue Dupont"

var numero = 12
var _ex
var y

Dans ces exemples, il y a deux variables (adresse et numero) auxquelles ont été
attribuées directement des valeurs, et deux autres (_ex et y) sans valeur initiale.

M o ts réservés :
Voici la liste des mots réservés. Ce sont des mots que vous ne pouvez pas utiliser
comme nom de variable, de fonctions ou autre identificateur.

abstract boolean break byte

case catch char class

const continue default do

double else extends false

final finally float for

function goto if implements

JavaScript Cabaré Michel-

Page 15
Cours v.2
 import in instanceof int

interface long native new

null package private protected

public return short static

super switch synchronized this

throw throws transient true

try var void while

with

Varia b le lo c a le -g lo b a le :
On parle de variable locale lorsque la variable a été déclarée dans une fonction
(locale). Cette variable n’est connue que dans la fonction
<script LANGUAGE="JavaScript">
function message()
{var adresse = "Paris"
return adresse }
</SCRIPT>

On parle de variable globale lorsque la variable a été déclarée en dehors d’une

fonction. Cette variable est connue àpartir de l’endroit où elle est déclarée
<script LANGUAGE="JavaScript">
Dans cet exemple, en var adresse = "Rue Dupont"
COURSJS05.HTM il est function message()
pris expressément le {var adresse = "Paris"; return adresse}
même nom (adresse) </SCRIPT>
pour les variables
globale et locale
On peut donner le même nom àune variable globale et locale mais ce
• valeur de la n’est pas recommandé... !
variable globale: <script LANGUAGE="JavaScript">
"Rue Dupont", - var adresse = "Rue Dupont"
function message()
• valeur de la
{var adresse = "Paris"; return adresse }
variable locale :
document.write("Valeur de la var globale <BR>" +
"Paris".
adresse)
Quelle confusion… document.write("Valeur de la var locale <BR>" +
message() )
</script>

JavaScript Cabaré Michel-

Page 16
Cours v.2
 L E S T Y P E S D E V A R IA B L E S

P rin c ip e :
On l’àdéjàdit, il n'est pas obligatoire, mais seulement recommandé, de déclarer des
variables.

A ce titre il faut savoir que Javascript n’étant pas un langage compilé mais
interprété, leur type sera éventuellement choisit selon le contexte voulut. Le typage
étant assez faible, une variable déclarée dan un type peut être utilisée dans un autre
type sans que un message d'erreur n'apparaisse. Parfois un navigateur "plantera"
mais sans que l'on sache véritablement pourquoi...

Finalement, la déclaration de variable servira surtout… au programmeur pour qu'il

puisse s'y retrouver !

Il existe cependant différents types de variables :

• les Chaînes de caractère ("Rue Dupont") ou STRING

• les Nombres

• les Booléens

• le type àvaleur unique null

C h a î n e d e c a r a c tère - strin g :
Le type de la variable va dépendre de ce que nous allons y mettre (on dit aussi
"stocker") Le plus souvent, pour mettre quelque chose dans une variable, on utilise
l'instruction suivante :

MonPrenom = "michel"

En faisant cela, nous rangeons la valeur "michel" dans la variable MonPrenom.

On dit que l'on "affecte" la "valeur" michel àla variable MonPremon.

Le signe "=" est l'instruction qui permet de dire à l'interpréteur JavaScript : range la
valeur "michel" dans le casier appelé MonPrenom.

JavaScript Cabaré Michel-

Page 17
Cours v.2
 La valeur "michel" étant mise entre guillemets, indique àl'interpréteur JavaScript que
la valeur "michel" est de type "String" (chaîne de caractères).

Dorénavant, la variable MonPrenom, tant qu'elle contiendra la valeur "michel" aura

le type "String" (chaîne de caractères). Et ceci jusqu'àce qu'on décide de lui donner
une valeur différente

Comme la plupart des langages, JS détermine par des apostrophes ( ' ) ou des
guillemets ( " ) le début et la fin de la Chaîne de caractères
Mais on ne peut mélanger les deux symboles
I = ‘bonjours’
2 écritures correctes
I = "bonjours"

écriture incorrecte I = ‘bonjours"

Il existe des caractères spéciaux, qui peuvent être placés dans les constantes de
chaîne de caractères (caractères entourés d'apostrophes ou de guillemets mais sans
mélange) et qui permettent d'insérer :

Un passage àla ligne suivante \n

Une tabulation horizontale \t
Un retour en arrière \b
Un retour chariot \r
Un saut de page \f

de même que pour faire apparaître certains caractères il faut préciser àl'interpréteur
de ne pas … les interpréter

Dans cet exemple, en le caractère guillemet \"

COURSJS06.HTM notez
uniquement l'utilisation Le caractère apostrophe \'
du \n

Ainsi que l'imbrication

L'anti-slash \\
des ' et des " notez que
si
Voici un exemple
'alert("Bonjour ")' et <FORM>
<input type="button"
"alert('Bonjour ')" sont
Value="Par exemple"
correct ni onClick="alert('Bonjour \n et à bientôt')">
</FORM>
"alert("Bonjour ")" ni

'alert('Bonjour ')' ne le
N.B: la règle générale étant quand même que tout ce qui est renvoyé
sont
par Javascript (ici Onclick) doit être entre " (guillemets)

JavaScript Cabaré Michel-

Page 18
Cours v.2
 on, écrira onClick="alert('Bonjour \n et à bientôt')"

plutôt que onClick='alert("Bonjour \n et à bientôt")'

L e s n o m bres - n u m b e r :
Si nous utilisons la variable appelée MonPoids et que nous lui affections la valeur 70
par l'instruction :

MonPoids = 70

Sans guillemets, la valeur 70 sera considérée comme un nombre. Nous dirons alors
que la variable MonPoids est de type Number (nombre, ou numérique). Et elle le
restera jusqu'à ce que nous décidions de lui affecter une autre valeur à notre
convenance.

N.B: si l'on avait écrit : MonPoids = "70", le chiffre "70" entre guillemets,
aurait signifié que "70" est une chaîne de caractères, et la variable
aurait été de type String. Ce qui nous empêcherait par la suite
d'effectuer des calculs sur le contenu de cette variable, puisque
nous verrons que l'on ne peut effectuer d'opérations mathématiques
sur les chaînes de caractères (variables de type String).

Il n'y a pas de différence en Javascript entre les nombres entiers et les réels, et en
général toutes les opérations sur les nombres se font sur des réels

Particularité :

• Les nombres de base 8 (octale) doivent commencer par un 0

035137 : représentation octale du nombre décimal 14943
= (((3*8 + 5)*8 + 1)*8 + 3)*8 + 7;

• Les nombres de base 16 (hexadécimale) commencent par 0x

0x3A5F : représentation hexadécimale du nombre décimal 14943
= ((3[3]*16+10[A])*16+5[5])*16+15[F]};

• Les autres nombres de base 10 (décimale) : 14943 :

(((1*10 + 4)*10 + 9)*10 + 4)*10 + 3

Correspondances entre
DÉCIMAL - HEXADÉCIMAL - BINAIRE

DÉCIMAL HEXADÉCIMAL BINAIRE

BASE - 10 - BASE - 16 - BASE - 2 -

0 0 0

1 1 1

2 2 10

JavaScript Cabaré Michel-

Page 19
Cours v.2
 3 3 11

4 4 100

5 5 101

6 6 110

7 7 111

8 8 1000

9 9 1001

10 A 1010

11 B 1011

12 C 1100

13 D 1101

14 E 1110

15 F 1111

L e s b o o léens - b o o le a n :
Voyons maintenant le cas d'un de type de variables moins évidents.

Imaginons une variable appelée JeMents. et affectons lui la valeur true (vrai) par
l'instruction :

JeMents = true

La variable ne contient plus ni chiffre ni lettre, mais une valeur logique.

On dira alors que la variable est de type Boolean (booléen, ou logique). Il n'existe
que deux valeurs Boolean, qui sont :

• "true" (vrai)

• "false" (faux)

Ces valeurs purement informatiques serviront à effectuer des tests, à vérifier si une
situation est vraie ou fausse.

Les mots true et false sont des mots réservés JavaScript. On ne pourra donc pas les
utiliser comme noms de variables.

Ne prennent que deux valeurs possibles, prises notamment quant au résultat des
opérations de comparaison :

En cas de conversion forcée vers une valeur numérique, on aura alors

• "true" (vrai) donnant 1 (*)

JavaScript Cabaré Michel-

Page 20
Cours v.2
• "false" (faux) donnant 0

(*) mais toute valeur différente de 0 dans une comparaison donnera true

JavaScript Cabaré Michel-

Page 21
Cours v.2
 P R O C E D U R E S E T F O N C T IO N S

D éfin ir e t a p p e ler des fo n c tio n s / procédures :

Les scripts placés dans le tag SCRIPT sont évalués àla fin du chargement de la page.
Ces fonctions sont stockées, mais pas exécutées. Les fonctions, pour être exécutées
doivent être appelées par un lien dans la page.

Il est important de faire la différence entre définir une fonction et appeler une
fonction. Définir une fonction ne fait que la nommer, et dire quoi faire quand cette
fonction est appelée. Appeler une fonction fait exécuter une fonction avec ses
paramètres

La différence entre des fonctions ou des procédures se situe dans le fait qu'une
fonction est un sous-programme (procédure) particulier qui a pour caractéristique
de renvoyer une valeur, tandis qu'une procédure normale ne le fait pas.

Les fonctions devant être connues avant d'être utilisées, souvent on les définira dans
la section d'en-tête de la page HTML (<HEAD> </HEAD>)

Aucune vérification de cohérence n'est faite sur les éventuels paramètres passés, ni
sur leur nombre et encore moins sur leur type

D éclaration de procédure :
Toute procédure, pour être déclarée dans un script, doit posséder un nom et ensuite,
un ou des paramètres: ces derniers sont optionnels

Ensuite, une accolade d'ouverture { et de fermeture } doivent englober l'ensemble

des instructions.

function nomproc (paramètres1,...,paramètresN)

{
code de la procédure
}

JavaScript Cabaré Michel-

Page 22
Cours v.2
 D éclaration de fonction :
Toute procédure, pour être déclarée dans un script, doit posséder un nom et
ensuite, un ou des paramètres: ces derniers sont optionnels

Ensuite, une accolade d'ouverture { et de fermeture } doivent englober l'ensemble

des instructions.

Le renvoi se fait par le mot-clé : return.

function nomdfonct (paramètres1,...,paramètresN)
{
code de la fonction
return (resultat)
}

N.B: de manière générale, il est déconseillé de mettre plusieurs return à différents

endroits dans une fonction, cela nuit énormément àla lisibilité. De plus certains
navigateurs (netscape avant version 4.x) génèrent une erreur devant par
exemple un return; suivit d'une instruction qui forcément ne s'exécutera jamais…

A p p e l de procédure :
Toute procédure, peut être utilisée dès qu’elle est connue
function proc1 (p1,p2)
{
déclaration
code de la procédure
}

appel proc1(x,y)

A p p e l d e fo n c tio n :
Toute fonction, peut être utilisée dès qu’elle est connue
function fonc1 (p1,p2)
déclaration {
code de la procédure
return(result)
}
appel avec
stockage du a = fonc1(x,y)
résultat renvoyé

JavaScript Cabaré Michel-

Page 23
Cours v.2
 G estio n d e s a r g u m e n ts :
De manière générale, dans une fonction il existe une variable prédéfinies arguments
permettant de connaître la liste de tous les arguments passés en paramètre.

En essayant de travailler proprement, on peut alors écrire

Var Argv = nom_fonction.arguments

la variable Argv un tableau contenant tous les paramètre

Var Argc = Argv.length

la variable Argc contient le nombre d'arguments passés

En effet, si aucun argument n'est déclaré derrière function, la fonction garde tout de
même l'accès àtous les arguments qui peuvent lui être transmis…

Deux cas peuvent se présenter :

• L'appel comporte moins de paramètres que la fonction ne le prévoit :

le résultat sera forcément imprévisible quant àla valeur de ces paramètres

• L'appel comporte plus de paramètres que la fonction ne le prévoit :

les valeurs sont ignorées, mais restent accessibles via arguments…

Voilàune déclaration de fonction acceptant un nombre variable de paramètres

function affiche()
{
var argv=affiche.arguments;
var argc=argv.length;
COURSJS06B.HTM var cpt
alert("vous avez passé " + argc + "arguments");
for (cpt=1; cpt<=argc; cpt++)
{
alert("voila le " + cpt + "argument" + argv[(cpt-1)]);
}
}

et différents appels possibles

onClick = "affiche();">

onClick = "affiche(1,2);">

onClick = "affiche(1,'deux',3,'quatre',5);">

JavaScript Cabaré Michel-

Page 24
Cours v.2
 LES OPERATEURS

A rith m étiq u e s :
n'ont de sens que s'ils sont utilisées sur des variables de type Number

• l'addition (+)

• la multiplication (*)

• la soustraction(-)

• la division (/)

• le modulo (% ) : reste de la division entière d'un entier par un autre

C o n c a tén a tio n :
l'opérateur de concaténation ( +)
c'est exactement le même que celui utilisé pour l'addition simplement il porte sur des
variables de type string

i = "bonjours" + 1

amène dans i la chaine "bonjours1"

N.B: Javascript convertit automatiquement les entiers en chaînes de

caractère, ce qui vous permet de concaténer des entiers avec des
chaînes, pour donner finalement une chaîne…

y = 50 + "Fr"

assigne àla variable y la chaîne "50 Fr"…

JavaScript Cabaré Michel-

Page 25
Cours v.2
 C o m parais o n :
En fonction du résultat du test de comparaison des opérandes, les opérateurs de
relation donnent la valeur true ou false :

True (vrai) dans le cas d'égalité des

== opérandes, false dans le cas inverse
True (vrai) dans le cas d'inégalité des
!= opérandes, false dans le cas inverse
true si l'opérande de gauche est supérieur à
> l'opérande de droite, false dans le cas
inverse
true si l'opérande de gauche est supérieur
>= ou égal àl'opérande de droite, false dans le
cas inverse
true si l'opérande de droite est supérieur à
< l'opérande de gauche, false dans le cas
inverse

true si l'opérande de droite est supérieur ou

<= égal à l'opérande de gauche, false dans le
cas inverse

Attention: 10 < "3" ou "10"< 2 devant des types différents est

convertit en numérique (si possible).
Une comparaison de type dictionnaire ne se fera
qu'entre des expressions de type caractère des deux
cotés "xxx" < "yyy"

<script LANGUAGE="JavaScript">
<!—
COURSJS07.HTM // essayer "3"<10 puis 3<"10" et enfin "3"<"10" //
if (3<10)
alert("valeur true")
else
alert("valeur false")
//-->
</script>

3<10 true

"3"<10 converti en 3<10 true

3<"10" converti en 3<10 true

"3"<"10" comparaison de chaîne false ("3" est >"10" comme

"zoo" est plus loin dans le dictionnaire que
"antirouille"…)

JavaScript Cabaré Michel-

Page 26
Cours v.2
A ffe c ta tio n :
certain "fanatiques" peuvent utiliser les conventions suivantes

Notation abrégée
Opération L'opérateur est mis devant le signe
=

x=x+y x += y

x=x-y x -= y

x=x*y x *= y

x=x/y x /= y

x=x&1 x &=b

x=x|b x |= b

x=x^b x ^= b

x = x << b x <<= b

x = x >> b x >>= b

x = x +1 ++x ; x++

x=x-1 --x ; x--

Le placement des opérateurs avant la variable (++a, --a) réalise une affectation
antérieure à l'opération en cours. Le placement après réalise l'affectation après
l'opération en cours.

B in a ires :
Uniquement pour ceux que cela intéresse…

a=b&c ET binaire entre les bits de b et de c (AND)

a=b|c OU binaire entre les bits de b et de c (OR)

a=b^c OU exclusif binaire entre les bits de b et de c (XOR)

a =!b a = 0 si b est non nul, et a est non nul si b = 0 (NOT)

a = b << n a est le décalage de n bits de b vers la gauche

a = b >> n a est le décalage de n bits de b vers la droite

a >< b les valeurs de a et b sont interchangées

complément binaire à 1, équivalent à (a ^ (-1)),

a = ~b
inversion des bits

JavaScript Cabaré Michel-

Page 27
Cours v.2
JavaScript Cabaré Michel-
Page 28
Cours v.2
L o g iq u e s :

ET logique (AND)

&& donne true si les deux opérandes sont true et false

dans le cas inverse

OU logique (OR)

|| donne true si l'un des deux opérandes est true et

false dans le cas inverse

la négation (NOT)
!
donne l'inverse logique

C o n d itio n n e ls :
Dans l'écriture

(condition) ? expression1 : expression2

Si la condition est vraie, dans ce cas, l'expression1 est réalisée, dans le cas inverse,
c'est l'expression2 qui est réalisée.

Bien sûr il s'agit ici d'une forme simple des instructions conditionnelles classiques qui
existent d'ailleurs en Javascript

JavaScript Cabaré Michel-

Page 29
Cours v.2
 N.B: !0 [NOT 0] vaut n'importe quel nombre non nul, souvent -1 ou 1 selon les
interpréteurs.
N.B:false est équivalent à0, et true àun nombre non nul.
N.B: Attention, le signe égal = d'affectation est différent du signe == de
comparaison.
N.B: null n'est pas équivalent àun nombre nul (zéro) ou àla chaîne vide "" mais est
égal à"non-affecté" ou vide

Noter l'exercice suivant en COURSJS08.HTM

<script LANGUAGE="JavaScript">
"bonjour" s'affiche car : <!—
• false =0 a = 122
if (a) alert("bonjour"); // TRUE est non nul
• true différent de 0

a=0
"Aurevoir" s'affiche car : if (!a) alert("Aurevoir "); // !0 vaut souvent 1 (TRUE)

• true différent de 0

b=10
if (a==b) alert ("égal")// comparaison classique
"non égal " s'affiche car else
compare 0 et 10 alert("non égal")

if (a=b) alert ("égal") // == est différent de =, ici

"égal" s'affiche avec else //a=b vaudrait 10 donc True
Internet Explorer mais alert("non égal")
"non égal" s'afficherait
avec Netscape < 4.05
car il "corrige" l'erreur ? alert("a vaut "+a+"et b vaut "+b)

var c
c="" // essayer de passer cette affectation en commentaire
if (c == null) alert ("la variable est vide et vaut "+c)
else
alert ("la variable est initialisée et vaut "+c)
//NULL n'est pas équivalent à un zéro, mais à "non-affecté",
//la chaine = ""; est une chaîne sans caractère mais initialisée
//-->
</script>

JavaScript Cabaré Michel-

Page 30
Cours v.2
 S T R U C T U R E S D E C H O IX

if e lse :
Les mots clés pour un si sont if else avec l'indentation suivante

if (test) ou plus simplement if (test)

{... {...
... ...
} }
else
{...
...
}

On utilise cette forme d'écriture de Dans cette forme d'écriture des

test, seulement si nous désirons que le tests, les actions sont exécutées
programme fasse quelque chose de seulement si la condition est vraie,
bien précis dans les deux cas. Aussi et il ne se passe strictement rien
bien lorsque la condition est vraie dans le cas contraire, c'est-à-dire si
que si elle est fausse. Nous pouvons la condition n'est pas vraie
recommencer à tester une autre (fausse). Le programme reprend
condition dans le cas où la première simplement l'exécution des
n'est pas vraie. C'est ce que l'on instructions qui suivent l'accolade
appelle les "if imbriqués". fermante } après la fin du test, s'il y
en a. C'est bien pratique, car cela
allège l'écriture des tests.

Les imbrications sont possibles, et le else est apparié au dernier if n'ayant pas de
else.

JavaScript Cabaré Michel-

Page 31
Cours v.2
Les opérateurs logiques Et (&&) et OU (||] restent disponibles pour écrire des test plus
complexes.

JavaScript Cabaré Michel-

Page 32
Cours v.2
 S T R U C T U R E S D E R E P E T IT IO N

W h ile :
Crée une boucle qui répète l'exécution du code tant que la condition est vraie. Si la
condition est vraie dès le début, le programme n'entre pas dans la boucle.

S y n taxe :
while (condition) {
code
}

Param ètre :
condition la condition de sortie de la boucle.

Fonctionnem ent :
Les mots clés pour un tant que sont while avec l'indentation suivante

while (test)
{... Si le test est vrai , on exécute le bloc
... d'instruction à l’intérieur du tant que, puis on
... remonte voir si le test est vrai ou faux
} Si le test est faux, on passe à la suite

...

N.B.: s'utilise quand àpriori on ne sait pas combien de fois on va "boucler". En général
dans les instructions répétées il y en a forcément une qui àun moment donné fera
passer le test = Vrai (Sinon cela risque de ne jamais s'arrêter.)

JavaScript Cabaré Michel-

Page 33
Cours v.2
d o w h ile :
Crée une boucle qui répète l'exécution du code tant que la condition est vraie. àla
différence du while, le programme entre toujours au moins une fois dans la boucle.

S y n taxe :
do{

code

}while (condition);

Param ètre :
condition la condition de sortie de la boucle.

Fonctionnem ent :
Les mots clés pour un tant que sont do while avec l'indentation suivante

do
{... On execute le bloc
... Si le test est vrai , on exécute le bloc
... d'instruction à l’intérieur du tant que, puis on
} remonte voir si le test est vrai ou faux
while (test)
...
Si le test est faux, on passe à la suite

E x e m p le :
i=0;
do{
i++;
document.write(i);
} while (i<10);

JavaScript Cabaré Michel-

Page 34
Cours v.2
fo r :
Crée une boucle qui exécute le code x fois. Attention aux boucles infinies :

S y n taxe :
for ([valeur initiale] ; [condition] ; [incrément]) {

code
}

Param ètre :
• valeur initiale : valeur initiale de la variable compteur.

• condition : condition de sortie de la boucle.

• incrément : pour incrémenter ou décrémenter le compteur.

Fonctionnem ent :

…
For( var i=début ; i<= fin ; i=i+x)
{... On exécute le bloc d’instruction autant de
... fois que nécessaire pour que i passe de la
... valeur début à la valeur fin
}
(en augmentant de x à chaque fois)

N.B: s'utilise quand àpriori on sait combien de fois on va "boucler".

Ce qui se trouve entre les parenthèses se lit de la manière suivante :

i = début; veut dire : en partant avec la valeur début au compteur i

i <= fin; veut dire : tant que le compteur aura une valeur inférieure
ou égale àfin;

i=i+1 veut dire : en incrémentant (en faisant grimper en français

normal) le compteur i de x àchaque fois.

JavaScript Cabaré Michel-

Page 35
Cours v.2
JavaScript Cabaré Michel-
Page 36
Cours v.2
sw itc h :
Permet au programme d'évaluer une expression et de la comparer àune valeur d'un
"case ".

N.B: la version minimale nécessaire est Javascript 1.2 (c.a.d. Netscape 4.0x) ou
Jscript 3.0 (c.a.d. Explorer 4.x)

S y n taxe :
switch (expression) {

case label :

code;

break;

case label :

code;

break;

...

default : code;

Le break est obligatoire afin de permettre àl'interpréteur de savoir où se trouve la fin

du code d'un "case".

E x e m p le :

switch (langue) {
case "français" :
alert("Bonjour");
break;
case "english" :
alert("Hello");
break;
default : alert("langue inconnue");
}.

JavaScript Cabaré Michel-

Page 37
Cours v.2
 L E S F E N E T R E S D E D IA L O G U E

In terface avec l'u tilisateur :

Il existe plusieurs fonctions JavaScript pour faire apparaître des fenêtres et
communiquer avec l'utilisateur. La méthode open() par exemple permet de créer
une nouvelle fenêtre de navigateur, tandis que d'autres méthodes servent à faire
afficher des fenêtres de dialogue.

Les fenêtres de dialogue sont utiles pour communiquer avec l'utilisateur. On peut
simplement faire afficher un message ou encore demander une réponse de la part
de l'usager.

Principaux types existants:

Méthode Description

alert() Affiche un message dans une fenêtre de dialogue

comportant un bouton OK.

confirm() Affiche une question dans une fenêtre de dialogue

comportant les boutons OK et Annuler.

prompt() Affiche un message dans une fenêtre de dialogue

où celle-ci nécessite une réponse de la part de
l'utilisateur.

Pour une compréhension plus complète des notions de méthode, d'objet se reporter
au chapitre " notion de P.O.O " (page Erreur ! Signet non défini. )

JavaScript Cabaré Michel-

Page 38
Cours v.2
a lert()
La méthode alert() est surtout utile pour donner de l'information àl'utilisateur.

Affiche une boîte de message d’avertissement et un bouton OK. Cette méthode est
utilisée pour avertir l’utilisateur seulement, il n’a aucune décision àprendre.

Même si la méthode alert utilise l’objet window, on n’a pas besoin de spécifier une
fenêtre de référence lors de l’appel.

S y n taxe
alert("unMessage")

unMessage est une chaîne de caractères ou une propriété d’un objet existant.

E x e m p le
En voici un exemple:
<SCRIPT LANGUAGE="JavaScript">
<!-- Debut script
alert("Bienvenue en formation");
// Fin script -->
</SCRIPT>

c o n firm ()
La méthode confirm() est utile lorsque l'on désire poser une question à l'utilisateur
dont la réponse est positive ou négative.

Affiche une boîte de message de confirmation, un bouton OK et un bouton

ANNULER. Il faut utiliser cette méthode lorsque l’utilisateur doit prendre une décision.

La méthode confirm retourne TRUE si l’utilisateur active le bouton OK et retourne

FALSE si l’utilisateur active le bouton ANNULER.

Même si la méthode confirm utilise l’objet window, vous n’avez pas besoin de
spécifier une fenêtre de référence lors de l’appel.

S y n taxe
confirm("unMessage")

unMessage est une chaîne de caractères ou une propriété d’un objet existant.

JavaScript Cabaré Michel-

Page 39
Cours v.2
 E x e m p le
En voici un exemple:

Dans l'exemple du fichier

COURSJS09.HTM, une
question est posée à
l'utilisateur.

La méthode alert() est ensuite utilisée pour faire afficher le résultat. C'est donc une
variable qui détient la valeur retournée par la fenêtre de dialogue, dans ce cas-ci la
variable reponse.

<SCRIPT LANGUAGE="JavaScript">
<!-- Debut script
reponse =confirm("Répondez par ok ou annuller");
alert("vous avez répondu la valeur " + reponse );// Fin script -->
</SCRIPT>

prom p t()
La méthode prompt sert à recueillir de l'information de la part de l'usager. En effet,
une case de texte invite l'utilisateur àentrer l'information.

Affiche une boîte de dialogue avec un message et un champ de saisie.

Même si la méthode prompt utilise l’objet window, vous n’avez pas besoin de
spécifier une fenêtre de référence lors de l’appel.

S y n taxe
prompt(Message, [valeurDéfaut])

Message est une chaîne de caractères ou une propriété d’un objet existant. La
chaîne de caractères représente le message.

valeurDéfaut est une chaîne de caractères, un entier ou une propriété d’un objet
existant qui représente la valeur de défaut du champ d’entrée. Si vous ne donnez
pas de valeur initiale pour valeurDéfaut, la boîte de dialogue affichera la valeur:
<undefined>.

JavaScript Cabaré Michel-

Page 40
Cours v.2
E x e m p le

L'exemple suivant montre une utilisation possible:

Dans l'exemple du fichier COURSJS10.HTM

<SCRIPT LANGUAGE="JavaScript">
<!-- Debut script
reponse=prompt("Veuillez entrer votre adresse de courrier
électronique","nom@domaine");
alert(reponse);
// Fin script -->
</SCRIPT>

Lorsque l'utilisateur n'entre aucune valeur, la fenêtre retourne la valeur par défaut,
soit "e-mail" (le 2è paramètre).

Si l'utilisateur entre une valeur, c'est celle-ci qui sera stockée dans la variable
reponse.

Si l'usager clique sur le bouton Annuler, la valeur null sera renvoyée.

Si aucune valeur n'est passée en deuxième paramètre, et que l'utilisateur valide sans
effectuer de saisie, la valeur undefined sera renvoyée.

T.P: Détecter une version javascript

JavaScript Cabaré Michel-

Page 41
Cours v.2
 LES TABLEAUX

N a ture des ta b le a u x :
Les tableaux en javascript ne sont pas forcément un ensemble de variables de
même types, comme dans les langages de programmation classiques, il s’agit en
fait de tableaux associatifs, dans lesquels on stocke un ensemble d’association
pouvant être très dissemblables, il s'agit d'un ensemble de valeurs désigné par un
seul nom de variable

T a b leaux num ériq u e s

Les tableaux nécessitent une déclaration préalable à leur utilisation. Par
Cette exemple un tableau pourrait s'appeler Eleve et serait déclaré par l'instruction
déclaration n'est Eleve = ["durand","dupont","Ernest"]
possible qu'à
Les éléments d'un tableau sont désignés par leur index, c'est àdire le nombre
partir de la
placé entre crochet, les tableaux commencent à 0 et donc le ième élément
version 1.2
porte l'index [i-1]

mais il est possible de déclarer au préalable un tableau pour augmenter la

Cette
lisibilité du programme
déclaration est
Eleve = new Array(3)
toujours
possible

On utilise ici
l'opérateur et on pourrait initialiser classiquement ce tableau avec un code du genre
new sur un for ( var j=0; j<3; j++)
objet prédéfini {
Array Eleve[j]=""
}

N.B: un tableau constitué avec des indices numériques reste donc lisible
"classiquement" comme dans tout langage de programmation

JavaScript Cabaré Michel-

Page 42
Cours v.2
 Eleve = new Array(3)
Eleve[0]="durand";
Eleve[1]="dupont";
Eleve[2]="Ernest";
for ( var j=0; j<3; j++)
COURSJS11.HTML {
document.write("Valeur de tab[" + j + "] = " + Eleve[j] +"<BR>");
On utilise ici la
}
méthode
for ( var j=0; j<3; j++)
"classique"
{
Eleve[j]="e"
}
for ( var j=0; j<3; j++)
{
document.write("Valeur de tab[" + j + "] = " + Eleve[j] +"<BR>");
}

Si on souhaitait utiliser la déclaration de tableau accélérée du genre

Eleve=["durand","dupont","Ernest"]

que faudrait-il faire ?

et bien simplement remplacer

Eleve = new Array(3)
Eleve[0]="durand";
Eleve[1]="dupont";
Eleve[2]="Ernest";

par
Eleve=["durand","dupont","Ernest"]

mais aussi en toute logique spécifier

<script LANGUAGE="JavaScript1.2">

La solution est proposée en COURSJS11B.HTML

JavaScript Cabaré Michel-

Page 43
Cours v.2
T a b leaux associatifs
On l'a dit, en javascript les tableaux sont en fait sont des tableaux associatifs,
permettant de manipuler des objets de types différents avec la même appellation

La déclaration d'un tableau associatif ne peut se faire qu'avec l'appel de l'opérateur

new sur l'objet pré-défini array...

Un tableau associatif se déclare donc de manière identique (en fait tous les tableaux
sont associatifs en javascript)
Tabass = new Array(3)

L'affectation d'un élément du tableau peut se faire avec

Tabass["nom1"] = valeur
Tabass["nom2"] = valeur
Tabass["nom3"] = valeur

Pour faire afficher toutes les éléments d'un objet on utilise l'instruction for in

dont la syntaxe est

for (variable in objet) {

instructions

et on peut parcourir ce tableau avec un code du genre

for ( var in Tabass)
{
alert(Tabass[var]);
}

N.B: un tableau constitué avec des indices non numériques, donc associatif, ne peut
être lu classiquement et doit être parcouru uniquement de la manière décrite ci-
dessus

N.B: l'ordre de parcours n'est pas garanti !

javascript utilise des tableaux associatifs sur les objets, les images les formulaires
d'une page HTML

JavaScript Cabaré Michel-

Page 44
Cours v.2
 Regardons l'exemple

tab = new Array(3)

COURSJS12.HTML
tab["elem1"] = "voilà"
Ici le tableau est tab["elem2"] = "un tableau"
clairement tab["elem3"] = "associatif"
associatif

et on ne peut plus for ( var j=0; j<3; j++) // cela ne marche plus
utiliser une {
méthode de document.write("Valeur de tab[" + j + "] = " + tab[j] +"<BR>");
parcours }
"classique"

soit on liste tous les // c'est lourd si les éléménts sont nombreux
éléments document.write("Valeur de tab[elem1] = " + tab["elem1"] +"<BR>");
document.write("Valeur de tab[elem2] = " + tab["elem2"] +"<BR>");
document.write("Valeur de tab[elem3] = " + tab["elem3"] +"<BR>");

soit on s'adapte ! for (ind in tab) // mais ici l'ordre de parcours n'est pas garanti !
{
document.write("Valeur d'un element x de tab " + tab[ind] +"<BR>");
}

Dans un script, on souhaite manipuler des élèves, sous forme de tableau associatif.

Un élève est caractérisé par un nom, un age et une note,

Créer un script dans lequel on déclare un eleve nommé eleve, dont le nom est
"durand", l'âge est 45 et la note est 12.5

montrez comment on peut afficher à l'écran toutes les valeurs caractérisant cet
élève...

La solution se trouve en COURSJS12B.HTML

JavaScript Cabaré Michel-

Page 45
Cours v.2
P ropriétés -m éth o d e s d e s ta b le a u x :
L'objet tableau Array en javascript dispose de plusieurs propriétés et de méthodes,
notamment

length : propriété permettant de connaître la taille d'un tableau

reverse() : méthode permettant d'inverser un tableau

sort() : méthode permettant de trier un tableau selon l'ordre

ascii

join() : méthode permettant de créer à partir de tous les

éléments d'un tableau un chaîne caractère

regarder les exemples suivant fournis en COURSJS13.HTM

tab = new Array(5)
tab[0] = "durand"
tab[1] = 45
tab[2] = 12.5
tab[3] = 65
tab[4] = 4

tab.reverse ();
for (ind in tab)
{
document.write("Valeur d'un element x de tab " + tab[ind]+"<BR>");
}
tab.sort();
for (ind in tab)
{
document.write("Valeur d'un element x de tab " + tab[ind] +"<BR>");
}
document.write("liste des valeurs" + tab.join() +"<BR>");
taille = tab.length;
document.write("taille de tab " + taille +"<BR>");

JavaScript Cabaré Michel-

Page 46
Cours v.2
 N O T IO N S D 'E V E N E M E N T S

Q u 'est-ce un évènem e n t:
Un des principaux intérêts de javascript est de pouvoir modifier le comportement du
navigateur grâce aux actions de l'utilisateur.

On s'appuie pour cela sur la notion d'événement, qui représentent les principales
actions de l'utilisateur: le passage de la souris, un clic de la souris, chargement d'une
image

Comme on peut le voir dans le tableau ci-dessous, le liste est longue et parfois
même très riche…

Evènement Déclenché lorsque...

Abort lors d'une interruption de chargement d'une image

Un élément n'est plus sélectionné avec le clavier

Blur
ex: on clique hors d'un champs de formulaire

Un élément est désélectionné et a été modifié

Change
ex: on modifie un champs de formulaire

L'utilisateur clique sur un élément de la page

Click
ex: click sur un lien hypertexte

DblClick L'utilisateur double-clique sur un élément

DragDrop Lorsque on fait glisser un objet dans le navigateur

Un élément n'a pas été chargé ou une erreur se produit lors

Error
de l'exécution d'un script

Focus Un élément est sélectionné avec le clavier

KeyDown L'utilisateur appuie sur une touche sur un élément

KeyPress L'utilisateur a appuyé sur une touchee, puis l'a relâchée

KeyUp L'utilisateur relâche une touche

JavaScript Cabaré Michel-

Page 47
Cours v.2
 Load Le navigateur ouvre une page HTML ou charge une image

MouseDown L'utilisateur appuie sur le bouton de la souris

MouseMove L'utilisateur déplace la souris sur un élément

MouseOut L'utilisateur fait ressortir la souris d'un élément

MouseOver L'utilisateur place la souris sur un élément

MouseUp L'utilisateur relache le bouton de la souris

Move Une fenêtre est déplacée

Reset un formulaire est réinitialisé

Resize Une fenêtre est redimensionnée

Select du texte est sélectionné dans un champs de formulaire

Submit un formulaire est envoyé

une page est déchargée (lors du chargement d'une nouvelle

Unload
page à la place

G estio n n a ire d 'évènem e n t:

Pour utiliser les évènements disponibles en javascript, on àrecours àdes gestionnaires
d'événement qui s'utilisent de la manière suivante:

<TAG_HTML param_html gest_événement = "script">

•attribut de la balise Ž programme

Πbalise HTML standard avec ses
destiné à la gestion javascript devant
éventuels paramètres
d'évènement xxx : s'exécuter lors de la
commence par onxxx survenue de l'évènement

Œ Toute les balises HTML acceptent tous leurs paramètres standard, le fait
que une gestion d'événement soit prévue ne change rien àla syntaxe
purement HTML de la balise

• Bien sûr toutes les actions ne sont pas possibles sur toutes les parties de
la page HTML ou du navigateur, et on à ainsi des "couples" qui
permettent de connaître les combinaisons possibles "objet-
événement" qui pourront déclencher des scripts Javascript

Ž le programme javascript peut être :

une commande javascript unique
une série d'instruction séparée par des ; voire des blocs { }
une fonction définie dans l'en-tête du programme

JavaScript Cabaré Michel-

Page 48
Cours v.2
 <BODY>
<script LANGUAGE="JavaScript">
<!--
function m1() {
alert("premier message")
}
function m2() { fonctions m1(), m2(), m3()
alert("deuxième message") et appm()
fichier }
COURJS14.HTML function m3() {
alert("troisième message")
}
function appm() {
m1()
m2()
m3()
}
//-->
commande javascript
</script>
voici un <A HREF="bidon.htm" onMouseover="alert('bonjour')">lien</A> un peut ... vivant
<BR>
série d'instructions séparés ;

voici un <A HREF="bidon.htm" onMouseover="alert('bonjour'); alert('au revoir')">lien</A> un

peut plus ... vivant
<BR> appel àune fonction …

voici un <A HREF="bidon.htm" onMouseover="appm()">lien</A> carrément ... exhubérant

</BODY>

évènem e n t par défa u t e t spécifiq u e s :

Pour la plupart de ces évènements, le navigateur possède déjà un comportement
par défaut.

Par exemple l'événement onClick sur un lien hypertexte provoque le chargement de

la page associée au lien.

Lorsque l'on ajoute un gestionnaire d'événement à un objet, au moment où

l'événement survient, le navigateur exécute:

1. d'abord votre gestionnaire

2. puis celui prévu par défaut !

Si on ne veut pas que le navigateur exécute son gestionnaire d'événement par

défaut, il suffit de passer en paramètre l'expression javascript return(false)

JavaScript Cabaré Michel-

Page 49
Cours v.2
 N.B: une exception existe à ce propos, concernant l'événement
onMouseOver pour la propriété status de l'objet window (cf Tp
autre gestion d'événement cité plus loin… infra)

Q u e lques évènem e n ts javascript:

N.B: La colonne "version" indique la version minimum du navigateur, qu'il s'agisse de
Netscape ou d'Explorer. Ces informations sont indicatives…

Evènement Balises autorisées Evénement déclenché lorsque... Version

LABEL, INPUT,
Un élément n'est plus sélectionné
onBlur SELECT, TEXTAREA, 3.0
avec le clavier
BUTTON

Un élément est désélectionné et a

onChange INPUT, TEXTAREA 4.0
été modifié

Presque toutes les

onClick L'utilisateur clique sur un élément 4.0
balises

Presque toutes les L'utilisateur double-clique sur un

onDbClick 4.0
balises élément

Presque toutes les

onError Un élément n'a pas été chargé 3.0
balises

LABEL, INPUT,
Un élément est sélectionné avec le
onFocus SELECT, TEXTAREA, 3.0
clavier
BUTTON

Presque toutes les L'utilisateur appuie sur une touche

onKeyDown 4.0
balises sur un élément

Presque toutes les L'utilisateur appuie, puis relâche une

onKeyPress 4.0
balises touche

Presque toutes les L'utilisateur relâche une touche sur

onKeyUp 4.0
balises une événement

onLoad BODY, FRAMESET Le navigateur a ouvert la page 3.0

Presque toutes les L'utilisateur appuie sur le bouton de

onMouseDown 4.0
balises la souris

Presque toutes les L'utilisateur déplace la souris sur un

onMouseMove 4.0
balises élément

Presque toutes les L'utilisateur fait ressortir la souris

onMouseOut 4.0
balises d'un élément

Presque toutes les L'utilisateur place la souris sur un

onMouseOver 4.0
balises élément

Presque toutes les L'utilisateur relache le bouton de la

onMouseUp 4.0
balises souris

onReset FORM Un formulaire est réinitialisé 3.0

JavaScript Cabaré Michel-

Page 50
Cours v.2
 onSelect INPUT, TEXTAREA L'utilisateur sélectionne du texte 4.0

onSubmit FORM Un formulaire est envoyé 3.0

onUnLoad BODY, FRAMESET Le navigateur ferme la page HTML 3.0

Sur annulation (onA b o rt)

Cet événement se produit lorsque l'usager annule le chargement d'une image. Ceci
peut se produire lorsque l'usager appuie sur un lien ou sur le bouton "Stop" du
navigateur au cours du chargement de l'image.

L'on peut retrouver cet événement dans la commande suivante:

• Image <IMG>

Exemple:
<IMG SRC="unURL" onAbort="nomFonction">

Sur sortie d u focus (onBlur)

Cet événement se produit lorsque l'utilisateur sort d'une boîte de dialogue en
appuyant sur la touche TAB du clavier ou en utilisant la souris. La fonction appelée
peut servir àvalider les informations entrées.

L'on peut retrouver cet événement dans les commandes suivantes:

• Boîte liste <SELECT>

• Boîte àliste déroulante <SELECT>

• Boîte texte <INPUT TYPE="text">

• Boîte Mot de passe <INPUT TYPE="password">

• Boîte texte multiligne <TEXTAREA>

Exemple:
<INPUT TYPE="text" VALUE="uneValeur" NAME="unNom" onBlur="nomFonction">

Sur changem ent (onC h a n g e )

Cet événement se produit lorsque l'utilisateur modifie la valeur d'une d'une boîte
texte.

L'on peut retrouver cet événement dans les commandes suivantes:

• Boîte liste <SELECT>

• Boîte àliste déroulante <SELECT>

• Boîte texte <INPUT TYPE="text">

• Boîte Mot de passe <INPUT TYPE="password">

• Boîte texte multiligne <TEXTAREA>

Exemple:
<INPUT TYPE="text" VALUE="uneValeur" NAME="unNom" onChange="nomFonction">

JavaScript Cabaré Michel-

Page 51
Cours v.2
Sur clic Souris (onC lick)
Cet événement se produit lorsque l'utilisateur appuie sur un bouton ou sur une
option dans un formulaire ou sur un lien hypertexte.

L'on peut retrouver cet événement dans les commandes suivantes:

• Le bouton formulaire <INPUT TYPE="button">

• Le bouton recommencer <INPUT TYPE="reset">

• Le bouton soumettre <INPUT TYPE="submit">

• La boîte de marquage <INPUT TYPE="checkbox">

• La boîte de sélection <INPUT TYPE="radio">

• Le lien externe ou interne <A HREF="..."> </A>

Exemple:
<INPUT TYPE="button" VALUE="uneValeur" onClick="nomFonction">

Sur erreur (onError)

Cet événement se produit o
l rsqu'il y a une erreur au cours du chargement d'une
image.

L'on peut retrouver cet événement dans la commande suivante:

• Image <IMG>

Exemple:
<IMG SRC="unURL" onError="nomFonction">

Sur focus (onFocus)

Cet événement se produit lorsque l'utilisateur appuie sur une boîte de dialogue avec
la souris ou la touche TAB du clavier.

L'on peut retrouver cet événement dans les commandes suivantes:

• Boîte liste <SELECT>

• Boîte àliste déroulante <SELECT>

• Boîte texte <INPUT TYPE="text">

• Boîte Mot de passe <INPUT TYPE="password">

• Boîte texte multiligne <TEXTAREA>

Exemple:
<INPUT TYPE="text" VALUE="uneValeur" NAME="unNom" onFocus="nomFonction">

JavaScript Cabaré Michel-

Page 52
Cours v.2
Sur chargem ent (onLoad)
Cet événement se produit lorsque le navigateur a terminé le chargement d'une
page HTML ou de tous les cadres (FRAMES) de la commande <FRAMESET> ou d'une
image.

L'on peut retrouver cet événement dans les commandes suivantes:

• Le corps du document <BODY>

• Les cadres <FRAMESET>

• L'image <IMG>

Exemple:
<BODY onLoad="nomFonction">

Sur souris hors zone (onM ouseO u t)

Cet événement se produit à chaque fois que l'utilisateur place la souris en dehors
d’une zone hypertexte.

L'on peut retrouver cet événement dans les commandes suivantes:

• L’image en coordonnées <AREA>

• Lien externe <A HREF="..">

• Lien interne <A HREF="#..">

Exemple:
<AREA SHAPE=".." COORDS=".." HREF=".." onMouseOut="nomFonction()">

Sur souris au-dessus (onM ouseO ver)

Cet événement se produit à chaque fois que l'utilisateur place la souris au-dessus
d'un lien hypertexte ou une zone hypertexte.

L'on peut retrouver cet événement dans les commandes suivantes:

• Le lien externe ou interne <A HREF="..."> </A>

• L’image en coordonnées <AREA>

Exemple:
A HREF="unURL" onMouseOver="nomFonction()"> </A>
AREA SHAPE=".." COORDS=".." HREF=".." onMouseOver="nomFonction()">

JavaScript Cabaré Michel-

Page 53
Cours v.2
Sur recom m encem ent (onR e s e t)
Cet événement se produit lorsque l'utilisateur reset un formulaire.

L'on peut retrouver cet événement dans la commande suivante:

• La commande Formulaire <FORM>

Exemple:
<FORM ACTION="URL" METHOD=POSTouGET onReset="nomFonction()">

Sur sélection (onSelect)

Cet événement se produit lorsque l'utilisateur sélectionne la valeur d'une boîte texte
ou d'une boîte texte multiligne.

L'on peut retrouver cet événement dans les commandes suivantes:

• Boîte texte <INPUT TYPE="text"> ou <INPUT TYPE="password">

• Boîte texte multiligne <TEXTAREA>

Exemple:
<INPUT TYPE="text" VALUE="uneValeur" NAME="unNom" onSelect="nomFonction">

Sur envoi (o n S u b m it)

Cet événement se produit lorsque l'utilisateur envoie un formulaire. L'on peut
retrouver cet événement dans la commande suivante:

• La commande Formulaire <FORM>

Exemple:
<FORM ACTION="URL" METHOD=POSTouGET onSubmit="nomFonction()">

Sur déchargem ent (onU n lo a d )

Cet événement se produit lorsque l'utilisateur sort d'une page HTML .

L'on peut retrouver cet événement dans les commandes suivantes:

• Le corps du document <BODY>

• Les cadres <FRAMESET>

Exemple:
<BODY onUnload="nomFonction">

T.P: Gestion d'évènement sur liens

T.P: Gestion d'évènement sur champs

T.P: Confirmer un lien hyper-texte

JavaScript Cabaré Michel-
Page 54
Cours v.2
JavaScript Cabaré Michel-
Page 55
Cours v.2
 N O T IO N S D E P .O .O .

O b je ts – M éth o d e s - P ropriétés:

O b jet - C lasse:
Pour illustrer le concept d'objet, avec ses propriétés et ses méthodes, prenons un
exemple de la vie courante . Un objet est une chose, au sens courant du terme, par
exemple une voiture. Et un objet peut contenir d'autres objets, par exemple un
moteur, une portière... On parle aussi de classe

M éthode :
On peut définir les actions possibles avec cet objet, grâce cette fois-ci, non pas àdes
adjectifs, mais àdes verbes. C'est ce que l'on appelle des méthodes. Ainsi avec une
voiture, on peut démarrer, accélérer, freiner, tourner... L'ensemble des méthodes
d'un objet représente toutes les actions que l'on peut effectuer avec cet objet.

On ne peut faire qu'une seule chose avec une méthode, c'est l'appliquer sur l'objet
souhaité. Cependant les méthodes possèdent souvent des paramètres (arguments)
qui précisent la façon dont on veut que la méthode s'applique. Ainsi la méthode
Freiner applicable àl'objet voiture pourrait se paramétrer par doucement, sec, pile...

P ropriété :
Pour décrire un objet on utilise des adjectifs qui le caractérisent, ce sont les
propriétés de cet objet : couleur, année, marque, nombre de siège... L'ensemble des
propriétés d'un objet représentent tous les aspects de cet objet. On peut s'en servir
soit pour avoir une information sur l'objet (lecture) soit pour modifier l'objet (écriture).
Cependant certaines propriétés sont en lecture seule, c'est à dire non modifiables,
par exemple l'année de construction de notre voiture.

P rogram m ation évènem entielle :

Un événement est une action qui peut être détectée sur un objet, comme un clic
souris, ou la frappe d'une touche. l'idée en général consiste àvouloir écrire un code

JavaScript Cabaré Michel-

Page 56
Cours v.2
 spécifique javascript en réponse àcet événement. On parle alors de programmation
évènementielle…

U n e x e m p le d e m o d è le o b je t :

Objet VOITURE

(conteneur de moteur, siège…)

Propriétés de l'objet VOITURE : nom type

Couleur Lect/écrit

Année Lecture seule

Marque Lecture seule

Nb sièges Lect/écrit

Vitesse Lect/écrit

Méthodes de l'objet VOITURE : nom paramètres

Démarrer Vite, lent,norm

Accélérer Vite, maxi

Freiner Sec, Doux,pile

Tourner gauche,Droite

Méthodes de l'objet VOITURE : nom renvoit type

(Particulières) Sièges Sièges (coll)

Siège (obj)

Moteur Moteur (obj)

Objet MOTEUR

(conteneur de …)

Propriétés de l'objet MOTEUR : nom type

Puissance Lecture seule

Nb cylind Lecture seule

Vidange Lect/écrit

Pour récupérer la date de vidange, il faudrait écrire :

Date = Voiture.Moteur.Vidange

JavaScript Cabaré Michel-

Page 57
Cours v.2
Pour modifier la date de vidange , il faudrait écrire :
Voiture.Moteur.Vidange = 01/04/96

JavaScript Cabaré Michel-

Page 58
Cours v.2
M o d èle objet w in d o w N e tscape :

JavaScript Cabaré Michel-

Page 59
Cours v.2
M o d èle objet w in d o w E x p lorer :

JavaScript Cabaré Michel-

Page 60
Cours v.2
 P R IN C IP A U X O B J E T S J A V A S C R IP T

O b je ts et versions :
Javascript est composé d'objets intégrés (ou classes) pour travailler avec les
éléments d'une page HTML, qui s'enrichissent au fur et à mesure que les versions
évoluent., il existe des constructeurs qui permettent de créer simplement un objet de
la classe en question. En effet en syntaxe normale on écris un "constructeur" par

var nom_objet = new Objet()

avec Objet() le constructeur de la classe dont on veut créer un élément

Trois versions principales référencées existent aujourd'hui:

• 1.0 : comportant 5 objets de base : Date, math, string navigator,

window,

• 1.1 : ajoutant 1 objets : function

• 1.2 : ajoutant 2 objets : arguments, screen

Les deux versions "récentes" sont :

• 1.3 : n'apportant aucune amélioration de "base" utilisable

facilement

• 1.4 : actuellement implémentée dans aucun navigateur

les classes intégrées dans les 3 premières versions de base, fournissant donc des
méthodes et des propriétés permettant de travailler avec ces objets sont les
suivantes

Version 1.0 Version 1.1 Version 1.2

Voyons les principaux objets

JavaScript Cabaré Michel-

Page 61
Cours v.2
D a te
Cet objet permet de travailler avec des dates alors que le type date n'existe pas
pour les variables.

Ses propriétés sont les suivantes

Version 1.0 Version 1.1 & 1.2

Les méthodes applicables àl'objet Date sont les suivantes

Version 1.0 & 1.1 & 1.2

Aucun événement n'est applicable àl'objet Date

E x e m p le
Pour créer un objet de type Date il faut écrire :
var nom_objet = new Date()

Une fois un objet Date construit, on peut l'utiliser par les nombreuses méthodes qu'il
possède

imaginons vouloir afficher deux boutons permettant d'afficher respectivement

l'année, et le jour et le mois en cliquant dessus

on écrira respectivement une fonction an() et joursmoi() permettant d'effectuer

ces calculs àpartir d'un objet Date

les méthodes àutiliser sont getYear(), getDate() et getMonth()

la solution se trouve en COURSJS15.HTML (mais cherchez tout seul…)

JavaScript Cabaré Michel-

Page 62
Cours v.2
 voilàde quoi aurait l'air l'écriture des deux boutons avec leur gestion d'événement
<form>
<input type=button value="vous voulez savoir l'année ?" onclick="an()"> <br>
<input type=button value="vous voulez savoir le jour et le mois ?"
onclick="jourmois()">
</form>

le script javascript, placé en début de page, doit contenir une création

Cette méthode retourne d'objet de type Date, puis une application des méthodes nécessaires…
l’année pour une date
spécifiée. La valeur
function an(){
retournée est l’année
var datage = new Date()
moins 1900 (mais 2000 sous
alert("année 19"+ datage.getYear())
IE...)
}

Cette méthode retourne

le jour du mois pour une
date spécifiée. La valeur
function jourmois(){
retournée est un entier
var datage = new Date()
entre 1 et 31
alert("le "+ datage.getDate() + "du mois" +
(datage.getMonth()+1) )
}//-->

Cette méthode retourne

le mois pour une date
spécifiée. La valeur
retournée est un entier ainsi pour obtenir un "mois" plus lisible, il faut lui ajouter 1, (la valeur) ce
entre 0 et 11, où zéro qui s'obtient en additionnant +1
représente janvier et 11 (datage.getMonth()+1)
représente décembre.

N.B: Si on oubliais les parenthèses, on concatènerait avec 1 convertit

en chaîne car d'autres chaînes apparaissent dans l'expression…

alert("le "+ datage.getDate() + "du mois" + datage.getMonth()+1 )

T.P: Calcul durée chargement de page

JavaScript Cabaré Michel-

Page 63
Cours v.2
M a th
Cet objet permet de manipuler des constantes et des fonctions mathématiques.

Ses propriétés sont les suivantes

Version 1.0 & 1.1 & 1.2

Les méthodes applicables àl'objet Math sont les suivantes

Version 1.0 & 1.1 & 1.2

Aucun événement n'est applicables àl'objet Math

E x e m p le
On n'a pas besoin de créer de variables pour manipuler un objet de type Math, on
dit que la classe est déjàinstanciée

On peut utiliser les propriétés (en lecture) de l'objet pour les constantes, ou utiliser les
méthodes qu'il possède pour effectuer des calculs

imaginons vouloir afficher deux boutons permettant d'afficher respectivement Pi, et

un nombre aléatoire en cliquant dessus

on écrira respectivement une fonction pi() et alea() permettant d'effectuer ces

calculs àpartir d'un objet Math

la propriété àutiliser est Pi, la méthode est random()

JavaScript Cabaré Michel-

Page 64
Cours v.2
 la solution se trouve en COURSJS16.HTML (mais cherchez tout seul…)

voilàde quoi aurait l'air l'écriture des deux boutons avec leur gestion d'événement
<BODY>
<form>
<input type=button value="valeur de Pi ?" onclick="pi()"> <br>
<input type=button value="valeur aléatoire entre 0 et 1 ?" onclick="alea()">
</form>

</BODY>

le script javascript, placé en début de page, peut directement utiliser une propriété
ou une des méthodes nécessaires…

Cette propriété représente

le rapport de la <script LANGUAGE="JavaScript">
circonférence d'un cercle <!--
sur son diamètre, environ
3.14159. Utilisée en lecture function pi(){
seulement. alert("Pi vaut "+ Math.PI)
}

Cette méthode
function alea(){
mathématique retourne alert("au hasard "+ Math.random())
un nombre choisi au }//-->
hasard entre 0 et 1. </script>

JavaScript Cabaré Michel-

Page 65
Cours v.2
strin g
Cet objet permet de travailler avec des chaînes de texte et de les manipuler,

Sses propriétés sont les suivantes

Version 1.0 Version 1.1 & 1.2

Les méthodes applicable àl'objet string sont les suivantes

Version 1.0 & 1.1 Version 1.2

Aucun événement n'est applicables àl'objet String

E x e m p le
Pour créer un objet de type String il faut écrire :
var nom_objet = new String('xxxxx')

Une écriture du style suivant est tolérée :

var nom_objet = 'xxxxx'

Une fois un objet string construit, on peut utiliser sa propriété ou ses nombreuses
méthodes qu'il possède. La manipulation des chaînes, nécessite souvent de
connaître la notion de tableau, de récupérer des valeurs saisies dans un boite de
dialogue et est assez particulière

JavaScript Cabaré Michel-

Page 66
Cours v.2
n a v ig a to r
Cet objet permet de travailler avec les caractéristiques du browser.

Ses propriétés sont les suivantes

Version 1.0 Version 1.1 Version 1.2

Aucune méthode ne s'applique àl'objet navigator

Aucun événement n'est applicables àl'objet navigator

E x e m p le
On n'a pas besoin de créer de variables pour manipuler un objet de type navigator,
on dit que la classe est déjàinstanciée

On peut utiliser les propriétés (en lecture) de l'objet pour avoir des informations sur le
type de navigateur

imaginons vouloir afficher deux boutons permettant d'afficher respectivement le

nom du navigateur, et sa version en cliquant dessus

on écrira respectivement une fonction nom() et ver() permettant d'afficher ces

informations àpartir d'un objet Math

les propriétés àutiliser sont appName et appVersion

la solution se trouve en COURSJS17.HTML (mais cherchez tout seul…)

JavaScript Cabaré Michel-

Page 67
Cours v.2
 voilàde quoi aurait l'air l'écriture des deux boutons avec leur gestion d'événement
<BODY>
<form>
<input type=button value="nom du navigateur ?" onclick="nom()"> <br>
<input type=button value="version du navigateur ?" onclick="ver()">
</form>

</BODY>

le script javascript, placé en début de page, peut directement utiliser les méthodes
nécessaires…

Cette propriété spécifie le

nom du navigateur. <script LANGUAGE="JavaScript">
Utiliser en lecture <!--
seulement.
function nom(){
alert("Navigateur "+ navigator.appName)
}

Cette propriété spécifie la

function ver(){
version du navigateur. alert("version "+ navigator.appVersion)
Utiliser en lecture }//-->
seulement. </script>

T.P: Détecter le type de navigateur

JavaScript Cabaré Michel-

Page 68
Cours v.2
 W in d o w
Permet de travailler sur la fenêtre du navigateur, par fenêtre dans un navigateur, on
entends au sens large du terme, c'est àdire pour toute fenêtre (frame) àl'écran.

Il possède des propriétés qui sont énumérées ci-dessous, mais contient également
des objets, au nombre variable selon les versions. principalement on notera les 4
objets: document, frame, history, location, qui sont détaillés plus loin dans le
chapitre "objet dans window" page 75

N.B: certaines propriétés Version 1.0 & 1.1 Version 1.2

particulières
permettent
d'atteindre d'autres
objets faisant partie
de la classe
Windows, et
notamment les
objets:
• document
• frame
• history
• location

, puis locationbar,
menubar…

Les méthodes applicable àl'objet window sont les suivantes

Version 1.0 Version 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 69
Cours v.2
Les évènements applicables àl'objet window sont les suivants

Version 1.0 Version 1.1 Version 1.2

Événements "spéciaux" déclenché lorsque: standard

onBeforeUnload l'utilisateur est sur le point de quitter IE

un document: l'événement est
déclenché juste avant l'événement
onUnload.

onDragDrop une opération de glisser/déposer est N

effectuée sur la fenêtre.

onMove la fenêtre est déplacée. N

onReadyStateChange équivalent àonLoad. IE

onScroll le document est défilé IE

En résumé, Les évènements fréquemment applicables à l'objet window sont les

suivants

• onLoad : le chargement de la fenêtre est fini

• onUnload : l'utilisateur quitte une fenêtre

• onFocus : la fenêtre reçoit le focus

• onBlur : la fenêtre perd le focus

Lorsqu'une fenêtre est activée par un cliq souris ou par la touche
"tab", on dit alors qu'elle reçoit le focus. À l'inverse, une fenêtre
possédant le focus le perdra lorsqu'une autre fenêtre deviendra
active.

Ainsi, l'événement onFocus est déclenché lorsque qu'une fenêtre

est activée pendant que l'événement onBlur s'exécute quand la
fenêtre active perd le focus au profit de l'autre. Il faut noter
qu'une fenêtre qui possède le focus par défaut, sans intervention
de l'utilisation ne déclenche pas l'exécution de l'événement
onFocus.

• onError: Lorsque une erreur survient

L'événement onError est déclenché lorsqu'une erreur se produit
dans l'exécution du code JavaScript de la page. On peut alors
remplacer la fenêtre de dialogue qui s'affiche par défaut et
fournir ainsi des indications beaucoup plus précises àl'utilisateur.

JavaScript Cabaré Michel-

Page 70
Cours v.2
 O u d é finir les événem ents

Tous les événements décrits plus haut peuvent tout simplement être définis dans le
marqueur BODYdu document HTML comme ceci:
<BODY événement=fonction JavaScript>

Par exemple, voici comment définir l'événement onLoad:

<BODY onLoad="chargementDocument()">

E x e m p le
On n'a pas besoin de créer de variables pour manipuler un objet de type Window,
car comme pour l'objet Math javascript instancie automatiquement un objet
Windows pour chaque fenêtre du navigateur ouverte, et dans le cas de frames, un
objet pour chaque frame

Chaque objet Windows ainsi crée "possède" 3 "sous-objets :

• l'objet history : représentant l'ensemble des URL déjàvisitées, au travers

de la propriété homonyme history

• l'objet location : représentant les caractéristiques de l'URL au travers de

la propriété homonyme location

• l'objet document : représentant les caractéristiques du document HTML

affiché et contenant lui même une multitude d'objets

Comme il s'agit ici de présenter simplement l'objet Windows dans sa globalité, on

verra plus loin l'utilisation des objets qui sont inclus dans la classe windows

Il existe plusieurs manières de faire référence à un objet Windows, mais la plus

classique reste
window.name="essai"
nomme la
fenêtre "essai"

imaginons vouloir faire deux choses :

1. afficher un bouton permettant d'afficher le nom de la fenêtre.

2. faire apparaître, et ce dès le chargement de la page, dans la barre d'état le

libellé par défaut "super, ça marche"

JavaScript Cabaré Michel-

Page 71
Cours v.2
 on écrira respectivement une fonction nom() et gerestatus() permettant
respectivement de nommer la fenêtre (et de l'afficher via alert) et de donner un
status par défaut dès l'ouverture de la page HTML

les propriétés àutiliser sont name et status

• name – Propriété des objets Anchor, Button, Checkbox, FileUpload, Form,
Hidden, Image, Layer, Password, Plugin, Radio, Reset, Select, Submit, Text,
Textarea et window

Syntaxe: RéfFenêtre.name et/ou RéfFenêtre.frames.name est une façon valide de

faire référence àune fenêtre, tel que décrit dans l'objet window

• status – Propriété de l'objet window. Cette propriété spécifie un message dans la

barre d’état, tel que l'adresse URL, lorsque l’utilisateur passe le pointeur de la
souris sur un hyperlien.

Syntaxe: réfFenêtre.status

l'événement àutiliser pour la fonction gerestatus() est onLoad

<HTML>
<TITLE></TITLE>
la fonction gerestatus()
<script LANGUAGE="JavaScript">
est définie avant <!--
l'appel function nom(){
window.name="essai"
alert("cette fenêtre s'appelle "+ window.name)
}
function gerestatus(){
window.status="super, ça marche"
}
//-->
L'on peut retrouver cet
</script>
événement dans les
commandes suivantes:

Corps <BODY> <BODY onLoad="gerestatus()">

Cadres <FRAMESET> <FORM>

<INPUT type="button" VALUE="nom de la fenêtre ?" onclick="nom()">
<br>
<A HREF="bidon.htm">lien</A>
</FORM>
</BODY>
</HTML>

la solution se trouve en COURSJS18.HTML

JavaScript Cabaré Michel-

Page 72
Cours v.2
T.P: Gestion de Status

T.P: Afficher un résultat dans le status

JavaScript Cabaré Michel-

Page 73
Cours v.2
screen (à partir d e la versio n 1 .2 )
Cet objet donne des propriétés permettant de travailler avec les caractéristiques du
moniteur vidéo du lecteur

ses propriétés sont les suivantes

Version 1.2

Aucune méthode ne s'applique àl'objet screen

Aucun événement n'est applicables àl'objet screen

E x e m p le
On n'a pas besoin de créer de variables pour manipuler un objet de type screen, car
comme pour l'objet Math javascript instancie automatiquement un objet screen
lors du premier démarrage du navigateur

Il s'agit d'un objet simple dont on lira les propriétés pour en tirer un certain nombre
de renseignements sur le moniteur du "lecteur"

T.P: Détecter la résolution d'écran

JavaScript Cabaré Michel-

Page 74
Cours v.2
 L E S P R IN C IP A U X O B J E T S D A N S W IN D O W

W in d o w s c o n te n e u r d e :
L'objet window est lui aussi un objet des plus important du fait qu'il contient d'autres
objets très complexes, on appelle cela un conteneur

les objets contenus dans la classe window dépendent des versions:

javascript Version 1.0 & 1.1 javascript Version 1.2

• document • document
• frame • Frame
• history • history
• location • location
• locationbar / menubar / personalbar
/ scrollbars / statusbar / toolbar/
tags

Pour des raisons de place et de compatibilité, nous nous limiterons àla version 1.0-
1.1, soit les 4 objets principaux.

• document,

• frame

• history

• location

JavaScript Cabaré Michel-

Page 75
Cours v.2
docum ent
Cet objet permet de travailler avec la page HTML (formulaires, ancres…)

Il possède des propriétés qui sont énumérées ci-dessous, mais contient également
des objets. principalement on notera les 4 objets anchor, array, form, link, qui sont
détaillés plus loin dans le chapitre "objet dans document" (page 97)

Version 1.0 Version 1.1 Version 1.2

Les méthodes applicables àl'objet document sont les suivantes

Version 1.0 & 1.1 Version 1.2

Les évènements applicables àl'objet document sont les suivants

Version 1.0 & 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 76
Cours v.2
E x e m p le d o c u m e n t.b g C o lor :
La propriété bgColor permet de modifier la couleur de fond de l'objet document

elle est très simple àutiliser

soit une fonction du type colore()

function colore(couleur){
if(couleur=="rouge")
window.document.bgColor="FF0000";
if(couleur=="vert")
window.document.bgColor="00FF00";
if(couleur=="bleu")
window.document.bgColor="0000FF";
}

on pourra alors créer facilement des boutons pour chaque couleur, qui appellerons
la fonction avec le bon argument sur l'évènement clic souris...

appel respectivement de colore('rouge'), colore('vert') ou colore('bleu')

donnant

essayer de coder cet exercice, la réponse se trouvant dans le fichier COURJS23.HTML

JavaScript Cabaré Michel-

Page 77
Cours v.2
 E x e m p le d o c u m e n t.c o o k ie :
Les cookies permettent au navigateur de stocker des informations de manière à
pouvoir les récupérer lors de la prochaine visite et donc permettent de "faire le lien"
entre deux sessions par un même client sur un site Web (connexion indépendantes et
anonyme du point de vue protocole http). Il faut bien se rappeler que les cookies
sont stockés sur l'ordinateur qui àchargé la page HTML et non pas sur le serveur sur
lequel ces pages sont hébergées.

Les cookies sont de fichiers textes nommés automatiquement àpartir du nom donné
par l'utilisateur lors de son ouverture de session et des caractère supplémentaires.(
tels que l'URL du fichier d'où ils proviennent…)

Un cookie n'est jamais stocké au hasard par le navigateur, pour des raisons de
sécurité en effet l'emplacement des cookies et défini par défaut, précisément par
chaque navigateur (voir plus loin tableau récapitulatif)

De plus il s'agit de fichiers texte, absolument inoffensif donc pour la sécurité du client
qui les accueille, et visualisables par un simple éditeur de texte

si le contenu en texte d'un cookie est libre, en général àl'exception des caractères ,
(virgule) ; (point virgule) et espace, qui sont interdits. La virgule en ce qui nous
concerne jouera le rôle de séparateur, il existe quand même une "normalisation"
pour certains champs…

name=value : permet de "nommer" notre cookie de manière à le

N.B: Un Cookie retrouver parmi le autres éventuellement de l'objet
comportant cookie disponible en javascript
des champs path=chemin : L'URL àlaquelle s'applique le cookie, par défaut il s'agit du
name et path dossier en cours, ce qui fait que pour toutes les pages
identique ne d'un même dossier, tous les cookies éventuels sont mis
peut être dans le même fichier texte, les uns àla suite des autres. Il
archivé qu'en sera donc probablement nécessaire soit de "parcourir" un
un seul cookie du début à la fin à la recherche de toutes les
exemplaire ! informations, soit de rechercher notre information dans
le cookie (caractérisée par notre "nom")

expires=date : si ce champs n'est pas précisé, le cookie est effacé à la

fermeture du navigateur et La date doit être convertie
en utilisant l'heure de Greenwich grâce à la méthode
toGMTString

L'objet qui permet de lire les cookies est accessible via "document.cookie". Si un
cookie correspondant au chemin (path) du document que l'on visualise existe, (est
présent sur le disque du client…), son contenu sera automatiquement mis dans cet
objet. Ce qui fait que cet objet est donc une chaîne de caractère , pouvant être
assez longue, contenant tous les cookies que l'utilisateur àrécolté sur cette page…

Pour utiliser les cookies, vous devez avoir 2 fonctions au minimum :

une fonction qui crée le cookie

JavaScript Cabaré Michel-

Page 78
Cours v.2
 une fonction qui lit le contenu de l'objet cookie

C réation de C o o k ies
Si on prends le cas de Internet explorer sous Windows, les fichiers textes contenant les
cookies sont dans un dossier Win\Cookies

la fonction suivante setCookie()

<script LANGUAGE="JavaScript">
function setCookie(nom, valeur, jours){
//nom est le nom du cookie
fichier
//valeur est la valeur a stocker dans le cookie
COURJS25.HTML
//jours est le nombre de jours son l'expiration
var expireDate = new Date();
expireDate.setTime(expireDate.getTime() + (jours * 24 * 3600 * 1000));
//création du cookie
document.cookie = nom + "=" + valeur + ";
expires=" + expireDate.toGMTString();
}

ainsi que la fonction cre() qui l'appelle après avoir demandé àl'utilisateur de donner
un contenu au cookie (valeur), en nommant le cookie "nom" et en lui donnant une
durée de 12 jours…

function cre()
{
valeur = prompt("donner la valeur à stocker","valeur du cookie");
setCookie("nom", valeur, 12);
}
</script>

l'appel de cette fonction cre() se faisant au chargement de la page…

<BODY onLoad="cre()">

JavaScript Cabaré Michel-

Page 79
Cours v.2
 nom de session@url

une visualisation du cookie permet de vérifier l'exactitude de l'info en ce qui

concerne le nom et la valeur stockée…

si on ferme le navigateur, et que l'on re-ouvre la page, on aura 2 chaines texte

structurées de la même manière dans le fichier cookie…( àcondition d'avoir changé
au préalable le nom du cookie, sinon il y a risque certain d'écrasement…)

Lecture de Cookies
On trouveras en CoursJs25.html la fonction suivante getCookie()

function getCookie(nom){
//on vérifie si il y a un cookie
if (document.cookie.length > 0){
debut = document.cookie.indexOf(nom + "=");
//on vérifie si la valeur qu'on recherche est dans le cookie
if (debut != -1) //!= veut dire différent
{
debut += nom.length + 1;
fin = document.cookie.indexOf(";", debut);
if (fin == -1) fin = document.cookie.length;
return unescape(document.cookie.substring(debut, fin));
}
}
return null;
//la valeur n'a pas été trouvée...
}

ainsi que la fonction lit() qui l'appelle après avoir demandé àl'utilisateur de donner
le nom du cookie que l'on souhaite lire…(ici toujours "nom"....)

JavaScript Cabaré Michel-

Page 80
Cours v.2
 function lit()
{
noml = prompt("donner le nom du cookie à lire");
lu = getCookie(noml);
alert (lu);
}

l'appel de cette fonction lit() se faisant sur un lien fictif

C o n trôler les C o o k ies

Pour un utilisateur du Web, il est possible de contrôler les cookies émis depuis les sites
vers son navigateur (et donc son poste) de la manière suivante :

Microsoft Internet Explorer 3.x :

Affichage / options avancées et cliquer sur la case "avertir avant

d'accepter les cookies"

Microsoft Internet Explorer 4.x :

Affichage / options internet cliquer sur le bouton "avancées"

rechercher l'icône représentant un point d'exclamation jaune sous
le libéllé "securité" et sélectionner l'une des options pour les cookies

Microsoft Internet Explorer 5.x :

Outils / options internet cliquer sur l'onglet "sécuritée" choisir ou

créer un nom de site et demander "personnaliser le niveau" et
sélectionner l'une
des options pour
les cookies

JavaScript Cabaré Michel-

Page 81
Cours v.2
Netscape Communicator 3.x :

Option / Préférence Réseau et dans l'onglet "protocole" cocher

éventuellement la case "avertir avant d'accepter un cookie"

Netscape Communicator 4.x :

Edition /
Préférences et
cliquer sur la
case "avancées"
et faire ses choix
dans la zone des
cookies

O ù sont le s C o o k ies ?
Pour un utilisateur du Web, il est possible de gérer les cookies, une fois que ceux-ci
sont sur sa machine. (essentiellement les supprimer…)

leur localisation dépends évidemment du navigateur , Internet explorer ou Netscape

et du système d'exploitation sur lequel on se trouve:

Pour Internet Explorer (toutes versions):

Sous Windows 95/98 : dans le dossier où windows est installé, et qui
s'appelle par défaut X:\Windows il existe un
dossier Cookies. Ce qui donne pour un disque C
le chemin C:\Windows\Cookies

Sous Windows NT : dans le dossier où windows est installé, et qui

s'appelle par défaut X:\Winnt il existe un dossier
pour chaque utilisateur nommé \NomUtil. A
l'intérieur se trouve un dossier Cookies. Ce qui
donne pour un disque C, pour un utilisateur
nommé paul le chemin C:\Winnt\Paul\Cookies

P o u r N e tscape navig a tor 3.x:

Netscape enregistre les cookies dans un seul fichier au format texte
nommé "cookie.txt". Ce fichier contient l'ensemble des cookies

Lors d'une installation standard, les applications sont installées dans un

dossier \Program Files,

Netscape s'installe dans \Netscape\Navigator pour les versions 3.x

Sous Windows 95/98 : Dans ce dossier il existe un fichier Cookies.txt. Ce

qui donne pour un disque C le chemin
C:\Program Files\Netscape\Navigator\Cookies.tx

Sous Windows NT : il existe un dossier pour chaque utilisateur nommé

\Users\NomUtil Dans ce dossier il existe un fichier
Cookies.txt. Ce qui donne pour un disque C pour un

JavaScript Cabaré Michel-

Page 82
Cours v.2
 utilisateur nommé paul le chemin C:\Program
Files\Netscape\Navigator\Users\Paul\Cookies.txt

P o u r N e tscape com m unicator 4.x:

Netscape s'installe dans \Netscape\Communicator à partir de la
version 4.x

Sous Windows 95/98 : Dans ce dossier il existe un fichier Cookies.txt. Ce

qui donne pour un disque C C:\Program
Files\Netscape\Communicator\Cookies.tx

Sous Windows NT : il existe un dossier pour chaque utilisateur nommé

\Users\NomUtil Dans ce dossier il existe un fichier
Cookies.txt. Ce qui donne pour un disque C pour un
utilisateur nommé paul le chemin C:\Program
Files\Netscape\ Communicator \Users\Paul\Cookies.tx

P lusieurs contenus dans un Cookie

essayer de modifier le fichier CoursJs25.html de manière àpouvoir mémoriser àpartir
de cette page, un nom de famille, à chaque prénom donné lors de la saisie du
cookie...

Concrètement au lieu de donner toujours le nom "nom" au cookie, on va créer un

cookie qui contiendra plusieurs zones, que l'on nommera du prénom du visiteur, et
pour lesquelles la valeur saisie sera le nom

exemple : nom dans le cookie : "michel", valeur associée "cabaré".

nom dans le cookie : "laurent", valeur associée "lallias".

fichier
COURJS25B.HTML De manière àce que ensuite lorsque l'on demande de lire le cookie

on obtienne

T.P: mémorisation d'un nom (cookie)

T.P: compteur de visites (cookie)

JavaScript Cabaré Michel-

Page 83
Cours v.2
fram e
Cet objet donne des informations sur chaque cadre composant un affichage àbase
de frames.

Version 1.0 & 1.1 & 1.2

Les méthodes applicables àl'objet frame sont les suivantes

Version 1.0 & 1.1 Version 1.2

Les évènements applicables àl'objet frame sont les suivants

Version 1.0 Version 1.1 Version 1.2

En javascript, le nom de l'objet Frame est le même que celui de l'attribut Name
spécifié dans la balise <FRAME> de la page HTML.

Dans le cas d'un cadre,

• Window et Self font référence à ce cadre courant (alors que d'habitude il

font référence àla fenêtre courante) alors que le mot clé

• Parent fait référence à la fenêtre principale. Chaque objet Frame est une
objet enfant de l'objet Parent

• Top fait référence àla fenêtre parente de niveau le plus élevé

• lenght est une propriété donnant le nombre de frame dans l'objet

JavaScript Cabaré Michel-

Page 84
Cours v.2
E x e m p le fram e [x].n a m e :
Dans le code suivant situé en Coursjs28.html
<Frameset rows="*,*" Cols="*,*">
<Frame name="hautgauche" Src="coursjs28_1.html">
<Frame name="hautdroite" Src="coursjs28_2.html">
<Frame name="basgauche" Src="coursjs28_3.html">
<Frame name="basdroite" Src="coursjs28_4.html">
</Frameset>

Un programme javascript situé en coursjs28_1.html fera référence aux autres cadres

de plusieurs manières possibles :

• par le mot réservé parent :

parent.hautdroite concerne Coursjs28_2.html

parent.basgauche concerne Coursjs28_3.html

parent.basdroite concerne Coursjs28_4.html

• par le mot réservé window ou self:

window concerne Coursjs28_1.html (courant)

self concerne Coursjs28_1.html (courant)

• par le tableau frames[x]:

dans lequel 0 désigne la première balise <Frame> du document

parent.frames[0] concerne Coursjs28_1.html

parent.frames[1] concerne Coursjs28_2.html

parent.frames[2] concerne Coursjs28_3.html

JavaScript Cabaré Michel-

Page 85
Cours v.2
 parent.frames[3] concerne Coursjs28_4.html

Si dans chaque page on incorpore un bouton sur lequel lorsque l'on clique on
exécute la fonction donne() suivante :
function donne()
{
alert(" windows.name = " + window.name);
alert(" self.name = " + self.name);
for (cpt=0;cpt<4;cpt++)
{
alert(" parent.frames[" + cpt + "] = " + parent.frames[cpt].name);
}
}

E x e m p le to p .fra m es.le n g h t :

que fait le programme suivant ?

if (top.frames.lenght!=0) top.location=self.document.location;

inséré dans la page appelé par un site, il permet de supprimer les frames de ce site

JavaScript Cabaré Michel-

Page 86
Cours v.2
 h istory
Cet objet donne des informations sur l'historique des URL qui ont étés parcourues par
le navigateur

Version 1.0 & 1.1 & 1.2

Les méthodes applicables àl'objet history sont les suivantes

Version 1.0 & 1.1 & 1.2

Aucun événement n'est applicables àl'objet history

E x e m p le
On n'a pas besoin de créer de variables pour manipuler un objet de type History, car
comme pour l'objet Math javascript instancie automatiquement un objet History lors
du premier démarrage du navigateur

Il s'agit d'un objet simple dont on utilisera les méthodes pour charger une des URL
déjàparcourue par le navigateur

rappel : pour
tester une Ainsi l'écriture
petite ligne de history.back();
javascript on charge l'URL précédente de l'historique (fonction identique au bouton
peut la taper précédent d'un navigateur)
directement
depuis la
fenêtre URL du Alors que l'écriture
navigateur, history.forward();
précédée de
charge l'URL suivante de l'historique (fonction identique au bouton suivant
la mention
d'un navigateur)
javascript:

N.B: l'appel àune instruction javascript du type history.back(); est le seul moyen
lorsque dans un site web on àplusieurs manières d'arriver sur une page de
proposer àl'utilisateur de revenir d'ou il vient !

JavaScript Cabaré Michel-

Page 87
Cours v.2
 E x e m p le h istory.back / forw ard :

faites un fichiers dans lequel on fait apparaître deux boutons aux fonctionnalités
identiques àcelles des deux boutons précédent-suivant d'un navigateur…

<script LANGUAGE="JavaScript">
<!--
function retour(){
history.back()
}
function suivant(){
history.forward()
}
la solution est
//-->
en
</script>
coursjs29.html
<form>
<input type=button value="retour" onClick="retour()">
<input type=button value="suivant" onClick="suivant()"> <br>
</form>

JavaScript Cabaré Michel-

Page 88
Cours v.2
 lo c a tio n
Cet objet donne des informations sur l'URL en cours

Version 1.0 & 1.1 & 1.2

Deux méthodes sont applicables àl'objet location

• reload() qui recharge le document en cours

• replace() qui remplace l'adresse actuelle par une nouvelle URL

Cette méthode remplace l’URL du document courant dans

l’historique du navigateur par l’URL fournie en argument. Après
l'utilisation de la méthode replace, l'utilisateur ne peut revenir à
l'URL précédent via le bouton PRÉCÉDENT (BACK) du navigateur

Aucun événement n'est applicables àl'objet location

E x e m p le
On n'a pas besoin de créer de variables pour manipuler un objet de type Location,
car comme pour l'objet Math javascript instancie automatiquement un objet
location lors du premier démarrage du navigateur

Il s'agit d'un objet simple dont on lira les propriétés pour en tirer un certain nombre
de renseignements sur l'Url du document affiché àl'écran
rappel : pour Ainsi l'écriture
tester une petite alert(location.pathname);
ligne de
renvoi le chemin du fichier actuellement affiché
javascript on
peut la taper Par exemple rajoutez l'écriture suivante
directement alert(" pathname =" + parent.frames[cpt].location.pathname);
depuis la fenêtre dans les fichiers Coursjs28_1.html, Coursjs28_2.html, Coursjs28_3.html,
URL du Coursjs28_4...
navigateur,
précédée de la
mention alors que l'écriture
javascript: alert(location.href);

renvoi l'URL du du fichier actuellement affiché

JavaScript Cabaré Michel-

Page 89
Cours v.2
E x e m p le lo c a tio n .replace :
on peut également par le biais de la méthode Replace() changer l'URL courante, et
proposer ainsi un changement de page àla volée

On souhaite automatiquement faire en sorte que le visiteur soit dirigé vers une page
donnée selon la résolution de son navigateur

on ira sur la page courjs30a.html si la résolution est <= à640x480

on ira sur la page courjs30b.html si la résolution est >= à800x640

la solution en courjs30.html a àpeu près l'aspect suivant :

<script LANGUAGE="JavaScript">
<!--
function redirige()
{
if (screen.width <=640)
location.replace("file:///C:/coursjs30a.html");
else
location.replace("file:///C:/coursjs30b.html");
}

//-->
</script>

Si vous voulez, vous pouvez aller sur la partie graphique de notre site <BR>
nous detecterons automatiquement la page appropriée
<form>
<input type = "submit" value="allez y" onClick="redirige()">
</form>
</BODY>

N.B: bien que correct du point de vue javascript, ce script ne fonctionne pas avec toutes
les versions de Internet explorer…Il faut dévalider le gestionnaire par défaut via
"return false"

T.P: saisie d'une URL

T.P: Création d'une bannière de navigation

JavaScript Cabaré Michel-

Page 90
Cours v.2
 O U V R IR U N E N O U V E L L E F E N E T R E

Il existe plusieurs fonctions JavaScript pour faire apparaître des fenêtres et

communiquer avec l'utilisateur. La méthode open() par exemple permet de créer
une nouvelle fenêtre de navigateur

L a m éth o d e o p e n
La méthode open() permet d'ouvrir une nouvelle fenêtre de navigateur dans laquelle
peut être chargé ou généré un document HTML. L'apparence de la nouvelle fenêtre
peut être personnalisée de façon à faire afficher ou non certaines caractéristiques,
telles que la barre d'outils, la barre de localisation, etc

On se sert de la méthode open pour créer une nouvelle fenêtre de navigateur

comportant ses propres caractéristiques.

Tous les paramètres sont optionnels. Ainsi dans COURSJS19.HTM

open ();

fonctionne, mais celle-ci également

open ("","fenetre","");

ou encore celle-ci
f = open ("","fenetre","");

Paramètres de la méthode open:

[objet window] = window.open ( [url] [,nom] [,caractéristiques])

Paramètre Description

URL adresse du document qui doit être chargé dans la

nouvelle fenêtre

Nom Il faut utiliser cette variable lorsque l’on fait référence

aux propriétés, méthodes et contenu d’une fenêtre.
(exemple cible (TARGET) pour d'autres documents
HTML.)

Caractéristiques liste d'options de la fenêtre (barre outils, grandeur …)

Si plusieurs options sont définies, elles doivent être
séparées par des virgules non suivies d’espace

JavaScript Cabaré Michel-

Page 91
Cours v.2
caractéristiques :
À l'aide de la liste des propriétés, on peut personnaliser l'apparence d'une fenêtre
créé:

Propriétés Valeurs valeur par Description

possibles défaut

directories yes, no no barre des répertoires fournissant des liens vers

divers sites Web

heigth nombre en Spécifie la hauteur de la fenêtre en pixels

pixels

left nombre en distance entre la bordure gauche de la

pixels fenêtre et le début de l'écran

location yes,no no ajoute un champ de saisie permettant

d’indiquer l’URL ou le chemin d’accès local
d’une page Web àconsulter. En fait, la barre
d’adresses

menubar yes,no no ajoute une barre des menus dans le haut de

la fenêtre

resizable yes,no no cette option permet à l’utilisateur de

redimensionner la fenêtre.

scrollbars yes,no no ajoute des barres de défilement horizontale

et verticale lorsque le contenu déborde des
dimensions de la fenêtre.

status yes,no no ajoute la barre d’état au bas de la fenêtre

toolbar yes,no no ajoute la barre d’outils standard àla fenêtre

du navigateur

top nombre en distance entre la bordure supérieure de la

pixels fenêtre et l'écran

width nombre en Spécifie la largeur de la fenêtre en pixels

pixels

Plus quelques ajouts récents :

alwaysLowered Si la valeur spécifiée est yes, cette option créée une nouvelle
fenêtre flottante qui sera affichée derrière toutes les autres fenêtres
du navigateur, qu’elles soient actives ou non. Il s’agit ici d’une
option spéciale qui doit être utilisée dans un script signé.
(JavaScript 1.2)

alwaysRaised Si la valeur spécifiée est yes, cette option créée une nouvelle
fenêtre flottante qui sera affichée devant toutes les autres fenêtres
du navigateur, qu’elles soient actives ou non. Il s’agit ici d’une
option spéciale qui doit être utilisée dans un script signé.
(JavaScript 1.2)

JavaScript Cabaré Michel-

Page 92
Cours v.2
dependent Si la valeur spécifiée est yes, cette option créée une fenêtre enfant
de la fenêtre courante. Une fenêtre enfant ferme lorsque sa fenêtre
parent est fermée. (JavaScript 1.2)

hotkeys Si la valeur spécifiée est no (ou 0), cette option désactive la

plupart des touches de raccourcis pour les fenêtres n’ayant pas de
barre de menus. Les touches de sécurité et de fermeture de
l’application demeurent toutefois disponibles. (JavaScript 1.2)

innerHeight Spécifie la hauteur de la zone de contenu de la fenêtre en pixels.

Pour créer une fenêtre plus petite que 100 x 100 pixels, le script doit
être signé. Remplace l’option Height, cette dernière faisant
toujours partie de la norme pour compatibilité. (JavaScript 1.2)

innerWidth Spécifie la largeur de la zone de contenu de la fenêtre en pixels.

Pour créer une fenêtre plus petite que 100 x 100 pixels, le script doit
être signé. Remplace l’option Width, cette dernière faisant toujours
partie de la norme àdes fins de compatibilité. (JavaScript 1.2)

outerHeight Spécifie la dimension verticale extérieure de la fenêtre en pixels.

Pour créer une fenêtre plus petite que 100 x 100 pixels, le script doit
être signé. (JavaScript 1.2)

personalbar Si la valeur spécifiée est yes, cette option ajoute la barre d’outils
personnelle affichant les boutons du dossier de signets personnels
de l’utilisateur. (JavaScript 1.2)

screenX Spécifie la position de la fenêtre àpartir de la gauche de l’écran.

Pour placer une fenêtre hors des limites de l’écran, le script doit
être signé. (JavaScript 1.2)

screenY Spécifie la position de la fenêtre à partir du haut de l’écran. Pour

placer une fenêtre hors des limites de l’écran, le script doit être
signé. (JavaScript 1.2)

titlebar Si la valeur spécifiée est yes, cette option créée une fenêtre dotée
d’une barre de titre. Pour définir une fenêtre sans barre de titre
(no), le script doit être signé. (JavaScript 1.2)

z-lock (JavaScript 1.2) Si la valeur spécifiée est yes, cette option créée une
nouvelle fenêtre ne pouvant passer devant les autres fenêtres du
navigateurs même lorsqu’elle est activée. Le script doit être signé
pour utiliser cette option. (JavaScript 1.2)

Par exemple on provoquera l'affichage d'une nouvelle fenêtre avec les propriétés
spécifiées dans la liste:
fenetreA=window.open("test.html","contenu",
"status=no,location=yes,
toolbar=yes,directories=no,resizable=yes,
width=600,height=400,top=100,left=100");

tous les paramètres sont activables àtrue avec une valeur de 1 ou yes et àfalse avec
une valeur de 0 ou no

JavaScript Cabaré Michel-

Page 93
Cours v.2
 Ferm e r u n e fenêtre
La méthode close est utilisée pour fermer une fenêtre; dans l'exemple,
f = open ("","fenetre","");

la fenêtre est représenté par l'objet f. et f pourra être fermée par

f.close();

La méthode close peut aussi s'appliquer à l'objet window, ce qui provoque la

fermeture de la fenêtre courante:
window.close();

dans le fichier COURSJS20.HTM on crée un fenêtre puis on demande àl'utilisateur s'il

souhaite la fermer ou non.
<script LANGUAGE="JavaScript">
<!--
f=window.open("coursjs20b.htm","contenu","status=no,location=yes,toolbar=ye
On ouvre ici le
s,directories=no,resizable=yes,width=600,height=400,top=100,left=100");
fichier
rep = confirm("voulez vous supprimer cette fenêtre ?")
COURSJS20b.HTM if (rep == true)
… f.close()
//-->
</script>

Écrire d a n s u n e fenêtre
Il est possible de générer le contenu d'une fenêtre ou d'un cadre à l'aide de la
méthode write ou writeln.

On peut composer une page HTML entière et même y ajouter du code

La méthode open(), JavaScript. voir fichier COURSJS21.HTM
appliquée à l'objet
document, doit être
f=window.open("","contenu","status=no,location=yes,toolbar=yes,directo
utilisée avant de ries=no,resizable=yes,width=600,height=400,top=100,left=100");
pouvoir écrire dans la f.document.open();
fenêtre. f.document.write ("<H1>Nouvelle fenêtre</H1>");
f.document.close();
La méthode rep = confirm("voulez vous supprimer cette fenêtre ?")
close() doit être if (rep == true)
employée lorsque f.close()
l'opération d'écriture
est terminée.

T.P: Ouverture / Création de fenêtre

T.P: Agrandir une mini-image dans une fenêtre

JavaScript Cabaré Michel-

Page 94
Cours v.2
 E V E N E M E N T S T E M P O R IS E S

m éth o d e s e tT im e o u t()
Cette méthode de l'objet window évalue une expression après qu’un délai en
millisecondes soit expiré. Elle peut être annulée via l'appel à la méthode
clearTimeout().

Syntaxe

TimeoutID=window.setTimeout(expression, msec)

Avec

TimeoutID est un identificateur utilisé seulement pour annuler l’évaluation avec la

méthode clearTimeout().

expression est une chaîne de caractères ou une propriété d’un objet existant.

msec est une valeur numérique en unités millisecondes.

E x e m p le :
On créer une page
demandant àl'utilisateur de
cliquer sur un bouton pour
continuer, on tombe sur
une page affichant la
bienvenue

Mais si au bout de 10
secondes, celui-ci n'a pas
manifesté sa présence,

la page apparaît
automatiquement

JavaScript Cabaré Michel-

Page 95
Cours v.2
 <script LANGUAGE="JavaScript">
<!--
fichier en function accueil() le fichier coursjs22b.htm
coursjs22.htm { est la page qui doit être
f = window.open("coursjs22b.htm","acc"); affichée
return true;
}
//-->
</script>

dans la variable </HEAD>

delai on à le moyen <BODY onLoad="delai = window.setTimeout('accueil()',5000);">
d'annuler la cliquez sur le bouton pour continuer
temporisation… <FORM METHOD=POST>
<INPUT TYPE=button VALUE="continuer"
onClick="window.clearTimeout(delai);accueil();">
…dans le cas où </FORM>
l'utilisateur àcliqué
</BODY>

JavaScript Cabaré Michel-

Page 96
Cours v.2
 LES OBJETS DANS DOCU M E N T

d o c u m e n t c o n te n e u r d e :
L'objet document est un objet très important du fait qu'il contient d'autres objets
intéressants et qu'il représente la totalité de la page HTML

les objets contenus dans la classe document dépendent des versions:

Version 1.0 Version 1.1 Version 1.2

• anchor • anchor • anchor

• array • applet • applet

• form • area • area

• link • array • array

• form • classes

• image • form

• link • image

• layers

• link

Pour des raisons de place et de compatibilité, nous nous limiterons àla version 1.0
soit les 4 objets principaux.

On dira quelques mots des objets intéressant apparus avec les nouvelles versions,
soit les objets image et area (version 1.1) et l'objet layers (version 1.2)

JavaScript Cabaré Michel-

Page 97
Cours v.2
anchor
Cet objet permet de travailler avec les ancres de la page HTML

Version 1.0 & 1.1 & 1.2

Aucune méthode n'est applicables àl'objet anchor

Aucun événement n'est applicables àl'objet anchor

array
Cet objet permet de travailler avec les tableaux de la page HTML

Version 1.0 & 1.1 & 1.2

Les méthodes applicable àl'objet array sont les suivantes

Version 1.0 Version 1.1 Version 1.2

Aucun événement n'est applicables àl'objet array

lin k
Cet objet permet de travailler avec les liens de la page HTML

Version 1.0 & 1.1 & 1.2

JavaScript Cabaré Michel-

Page 98
Cours v.2
 Aucune méthode n'est applicables àl'objet link

Les évènements applicables àl'objet link sont les suivants

Version 1.0 Version 1.1 Version 1.2

form
Cet objet permet de travailler avec les formulaires de la page HTML

Il possède des propriétés qui sont énumérées ci-dessous, mais contient également
des objets, au nombre variable selon les versions. principalement on notera les 4
objets button, checkbox, hidden, password, radio, reset, select, submit, text,
textarea, qui sont détaillés plus loin dans le chapitre "objet dans form" (page 107)

Version 1.0 Version 1.1 & 1.2

JavaScript Cabaré Michel-

Page 99
Cours v.2
 Les méthodes applicable àl'objet form sont les suivantes

Version 1.0 & 1.1 Version 1.2

Les évènements applicables àl'objet form sont les suivants

Version 1.01 Version 1.1 & 1.2

area (à partir de versio n 1 .1 )

Cet objet permet de travailler avec les zones graphiques de la page HTML

Version 1.1 & 1.2

Aucune méthode n'est applicables àl'objet area

Les évènements applicables àl'objet area sont les suivants

Version 1.0 & 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 100
Cours v.2
im a g e (à partir de versio n 1 .1 )
Cet objet permet de travailler avec les images de la page HTML

Version 1.1 Version 1.2

Aucune méthode n'est applicables àl'objet image

Les évènements applicables àl'objet image sont les suivants

Version 1.1 Version 1.2

E x e m p le im a g e .src :
L'exemple que l'on va manipuler est celui permettant de faire un "survol de
bouton"...

Cette fonctionnalité suppose que le navigateur intègre une version javascript 1.1
minimum, ce qui place la barre àExplorer 3.x et Netscape 3.x minimum

On va utiliser la propriété src de l'objet image pour changer "a la volée" l'image
affichée dans une page HTML avec une syntaxe du type
nomimage.src ="new image.gif"

On va également utiliser l' évènements onMouseOut, se produisant àchaque fois que

le curseur de souris sort des limites de la surface d'un lien hypertexte ou encore d'une
région d'une image en coordonnées. et l'événement onMouseOver qui se produit à

JavaScript Cabaré Michel-

Page 101
Cours v.2
 chaque fois que le curseur de souris se trouve sur des limites de la surface d'un lien
hypertexte ou encore d'une région d'une image en coordonnées

Dans le fichier COURSJS26.HTM

on affiche très classiquement ce lien

précédé d'une puce animée jaune/bleue

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" >

<script LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>

on nomme
Si vous voulez, vouz pouvez aller sur ce site <BR>
l'image…"puce1"
<IMG SRC="gif/puceb.gif" name="puce1"> <A HREF = "r " target = "blank">
merveilleux </A>
et target="blank"
sert uniquement à </BODY>
annuler facilement
un clik sur le lien…

Cette image étant nommée "puce1", l'instruction suivante incorporée dans la balise
du lien <HREF…> permet donc chaque fois que la souris passe sur ce lien de changer
le fichier source de l'image àafficher (et donner un effet de puce changeante...)
onMouseOver="puce1.src='gif/Pucer.gif'"

pucer.gif est une puce rouge

idem sur cette instruction lorsque le pointeur de la souris se déplace hors du lien…(la
puce reprends sa couleur primitive )
onMouseOut="puce1.src='gif/Puceb.gif'"

puceb.gif est une puce bleue

construisez donc le fichier qui va permettre de vérifier que l'on pointe bien le lien
"merveilleux" en changeant la couleur de la puce….

la solution est en COURSJS26b.HTM

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" >
<script LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>

Si vous voulez, vouz pouvez aller sur ce site <BR>

<IMG SRC="gif/Puceb.gif" name="puce1"> <A HREF = "r " target = "blank"

JavaScript Cabaré Michel-

Page 102
Cours v.2
 onMouseOver="puce1.src='gif/Pucer.gif'"
onMouseOut="puce1.src='gif/Puceb.gif'"> merveilleux </A>
</BODY>

M ise en param ètre des fichiers im a g e :

C'est très compliqué et peu "maintenable" de truffer le source d'appels directs a des
fichiers images...

dans notre cas en effet, si un jour on souhaite changer les fichiers pucer.gif et
puceb.gif cela revient àdevoir intervenir àplusieurs endroits dans le source !

Reprenons alors le fichier COURSJS26b.HTM de manière à déclarer au début des

variables pointant sur ces 2 images, de manière àpouvoir les changer facilement :

Il va donc falloir

• 2 variables de type image instanciées :

image_select = new Image(); image_select.src="gif/pucer.GIF";
image_nonselect = new Image(); image_nonselect.src="gif/puceb.GIF";

• 1 fonction pour donner l'image indiquant la sélection (et une fonction pour
donner l'image indiquant une non-sélection ):
function allume(nom) {
switch (nom) {
case "Bouton1" :
document.Bouton1.src = image_select.src;
break;
case "Bouton2" :
document.Bouton2.src = image_select.src;
break;
case "Bouton3" :
document.Bouton3.src = image_select.src;
break;
}
}

• 1 fonction pour construire la page HTML àla volée avec l'image voulue :
<script LANGUAGE="JavaScript1.1">
document.write('<IMG SRC=');
document.write(image_nonselect.src);
document.write(' name="Bouton1">');
</script>

• et enfin faire des appels simples et indépendants des images :

<A HREF = "r " target = "blank" onMouseOver="allume('Bouton1')"
onMouseOut="eteint('Bouton1')"> merveilleux </A>

puis

JavaScript Cabaré Michel-

Page 103
Cours v.2
 <A HREF = "r " target = "blank" onMouseOver="allume('Bouton2')"
onMouseOut="eteint('Bouton2')"> sublime </A>

etc...

Une solution se trouve en COURSJS26c.HTM

<script LANGUAGE="JavaScript1.1">
<!--
2 variables de type image_select = new Image(); image_select.src="gif/pucer.GIF";
image instanciées image_nonselect = new Image(); image_nonselect.src="gif/puceb.GIF";

function allume(nom) {
switch (nom) {
case "Bouton1" :
1 fonction pour donner document.Bouton1.src = image_select.src;
l'image indiquant la break;
case "Bouton2" :
sélection
document.Bouton2.src = image_select.src;
break;
case "Bouton3" :
document.Bouton3.src = image_select.src;
break;
}
}
function eteint(nom) {
switch (nom) {
case "Bouton1" :
document.Bouton1.src = image_nonselect.src;
1 fonction pour donner break;
l'image indiquant la case "Bouton2" :
non sélection document.Bouton2.src = image_nonselect.src;
break;
case "Bouton3" :
document.Bouton3.src = image_nonselect.src;
break;
}
}
//-->
</SCRIPT>
écriture des boutons à Si vous voulez, vouz pouvez aller sur un de ces site <BR>
la volée... <script LANGUAGE="JavaScript1.1">
document.write('<IMG SRC=');
document.write(image_nonselect.src);
document.write(' name="Bouton1">');
</script>
<A HREF = "r " target = "blank" onMouseOver="allume('Bouton1')"
onMouseOut="eteint('Bouton1')"> merveilleux </A>
<P>
<script> les appels sont simples
document.write('<IMG SRC='); et indépendant des
document.write(image_nonselect.src); fichiers image utilisés !
document.write(' name="Bouton2">');

JavaScript Cabaré Michel-

Page 104
Cours v.2
 </script>
<A HREF = "r " target = "blank" onMouseOver="allume('Bouton2')"
onMouseOut="eteint('Bouton2')"> sublime </A>
<P>
<script>
document.write('<IMG SRC=');
document.write(image_nonselect.src);
document.write(' name="Bouton3">');
</script>
<A HREF = "r " target = "blank" onMouseOver="allume('Bouton3')"
onMouseOut="eteint('Bouton3')"> génial </A>
<P>

Attention : pour des raisons de chemin sur des fichiers locaux, ce fichier ne marche
pas avec Netscape, il faudrait replacer les sources dans un dossier nommé de
manière standardisée (nom de dossier sans espace...)

en effet sous Explorer les espaces sont codés en %20

alert(image_nonselect.src);

alors que sous Netscape non...

alert(image_nonselect.src);

T.P: Changement d'image sur passage souris

T.P: Menu visuels avec images changeantes

JavaScript Cabaré Michel-

Page 105
Cours v.2
layers (à partir de versio n 1 .2 )
Cet objet permet de travailler avec les couches (calques) de la page HTML

Version 1.2

Aucune méthode n'est applicables àl'objet layer

Les évènements applicables àl'objet layers sont les suivants

Version 1.2

JavaScript Cabaré Michel-

Page 106
Cours v.2
 LES OBJETS DANS FORM

form c o n te n e u r d e :
L'objet form est un objet important car il contient la totalité des objets utilisables
dans un formulaire HTML

Version 1.0 Version 1.1 & 1.2

button button

checkbox checkbox

elements elements

hidden FileUpload

password hidden

radio password

reset radio

select reset

submit select

text submit

textarea text

textarea

JavaScript Cabaré Michel-

Page 107
Cours v.2
b u tto n
Cet objet permet de travailler avec les "boutons" d'un formulaire de la page HTML

Version 1.0 Version 1.1 & 1.2

Les méthodes applicables àl'objet button sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet button sont les suivants

Version 1.0 Version 1.1 & 1.2

checkbox
Cet objet permet de travailler avec les "cases àcocher" d'un formulaire de la page
HTML

Version 1.0 Version 1.1 & 1.2

Les méthodes applicables àl'objet chekbox sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet chekbox sont les suivants

Version 1.0 & 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 108
Cours v.2
F ile U p lo a d (a partir de versio n 1 .2 )
Cet objet permet de travailler avec les ancres de la page HTML

Version 1.2

h id d e n
Cet objet permet de travailler avec les champs cachés d'un formulaire de la page
HTML

Version 1.0 Version 1.1 & 1.2

passw o rd
Cet objet permet de travailler avec les champs texte "password" d'un formulaire de
la page HTML

Version 1.0 Version 1.1 & 1.2

Les méthodes applicables àl'objet password sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet password sont les suivants

Version 1.0 & 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 109
Cours v.2
radio
Cet objet permet de travailler avec les "boutons radio" d'un formulaire de la page
HTML

Version 1.0 Version 1.1 & 1.2

Les méthodes applicable àl'objet radio sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet radio sont les suivants

Version 1.0 & 1.1 Version 1.2

reset
Cet objet permet de travailler avec le champs Reset d'un formulaire de la page
HTML

Version 1.0 Version 1.1 & 1.2

Les méthodes applicable àl'objet reset sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet reset sont les suivants

Version 1.0 & 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 110
Cours v.2
sele c t
Cet objet permet de travailler avec un champs de type SELECT d'un formulaire de la
page HTML

Version 1.0 Version 1.1 & 1.2

Les méthodes applicable àl'objet select sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet select sont les suivants

Version 1.0 & 1.1 & 1.2

s u b m it
Cet objet permet de travailler avec le champs submit d'un formulaire de la page
HTML

Version 1.0 Version 1.1 & 1.2

Les méthodes applicable àl'objet submit sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet submit sont les suivants

Version 1.0 & 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 111
Cours v.2
text
Cet objet permet de travailler avec les champs "text" d'un formulaire

Version 1.0 Version 1.1 & 1.2

Les méthodes applicable àl'objet text sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet text sont les suivants

Version 1.0 & 1.1 Version 1.2

textarea
Cet objet permet de travailler avec les champs "textarea" d'un formulaire

Version 1.0 Version 1.1 & 1.2

Les méthodes applicable àl'objet textarea sont les suivantes

Version 1.0 & 1.1 & 1.2

Les évènements applicables àl'objet textarea sont les suivants

Version 1.0 & 1.1 Version 1.2

JavaScript Cabaré Michel-

Page 112
Cours v.2
 T R A V A IL L E R A V E C U N F O R M U L A IR E

In terêts :
Plus on effectue de manipulation sur le client à propos du formulaire, et plus on
décharge le serveur, ce qui ne peut que globalement être positif pour tout le monde

Plusieurs types de manipulations peuvent être intéressantes àeffectuer localement

• Un premier objectif peut être celui d'effectuer des contrôles de

validité sur les saisies effectuées dans les champs de formulaire, mais
avant envois de la requête sur le serveur (cela évite un rejet de toute
façon).

• Un deuxième objectif peut être celui de demander confirmation lors

de la demande d'envois (submit) d'un formulaire, ou d'interdire
l'envois de ce formulaire lorsque certains champs critiques ne seraient
pas remplis par l'utilisateur

• Un troisième objectif pourrait être constitué par des calculs simples

effectués automatiquement lors de la saisie du formulaire, c'est àdire
que lors d'un saisie de quantité et de prix unitaires, le total en cours se
calcule automatiquement

• En fin pourquoi ne pas proposer pour les cas simples carrément un

traitement du formulaire en local, c'est à dire via la messagerie et
sans passer par l'exécution de script sur le serveur

JavaScript Cabaré Michel-

Page 113
Cours v.2
 A c c é d e r à d e s c h a m p s d e form u la ire :
Il va falloir être capable de déclencher une fonction lorsque la valeur a été saisie
dans le champs, ce qui peut être le cas de l'événement onBlur qui est déclenché lors
de la perte de focus sur un champs. Voir le fichier COURSJS31.HTML

<script LANGUAGE="JavaScript">
nb est le champs nommé "nb"
<!--
function affiche(form1){
alert("vous avez saisi " + form1.nb.value);
La fonction affiche() return ;
};
récupère "form" un value est une propriété d'un
//-->
formulaire en champs text de formulaire
</script>
paramètre. c'est nous
qui le décidons (et qui
le traitons ensuite
comme un objet de sur onBlur on appelle affiche() avec
type formulaire par la le formulaire en paramètre.
suite) this représentant l'objet courant…
<FORM>
merci de saisir quelque chose
<INPUT TYPE=TEXT NAME="nb" onBlur="affiche(this.form)" VALUE="0"
SIZE=5 MAXLENGTH=5> <br>
</FORM>

Le champs du formulaire s'appelle "nb" En appel àaffiche() on passe un objet de

type formulaire

C'est un paramètre réel, il doit exister

NB: lors de l'écriture, on peut tout aussi bien écrire

onBlur="affiche(this.form)" form est 1 propriété de this, l'objet courant
que
onBlur="affiche(document.forms[0])"
Essayez ces variantes forms[0] 1° éléments du tableau des
formulaires du document
solution en
COURSJS31B.HTML ou bien si on a nommé le formulaire par
<FORM name="test">
onBlur="affiche(document.test) test est 1 objet nommé du document

ATTENTION : Noter que l'écriture this.test n'est pas admise !

JavaScript Cabaré Michel-

Page 114
Cours v.2
C a lc u ls a v e c d e s c h a î n e s :
Dès que l'on veut effectuer des opérations en javascript, le problème de conversion
se pose car les données éventuellement récupérées dans un champs de formulaire
sont en fait des chaînes de caractère

Par conséquent il est nécessaire de les convertir,

conversion en entier :
c'est la fonction parseInt() qui assure la conversion d'un chaîne en un entier
classique
parsInt("13");
donnera le nombre 13
et
parsInt("13,5");
donnera le nombre 13

conversion en flottant (décim aux) :

c'est la fonction parseFloat() qui assure la conversion d'un chaîne en un flottant
classique (nombre àvirgule)
parsFloat("13");
donnera le nombre 13.00
et
parsFloat("13,5");
donnera le nombre 13.5

JavaScript Cabaré Michel-

Page 115
Cours v.2
 A N N E X E : V E R S IO N S

JS C R IP T -J A V A S C R IP T -E C M A S C R IP T

C o r r e s p o n d a n c e s a v e c E C M A S C R IP T :
Si la norme est édictée par l'organisme de Normalisation ECMA, dont les dernière
spécifications sont disponibles àl'adresse suivante :

http://www.ecma.ch

Il s'agit de vérifier de quelle manière les 2 principales variations proposées par

Netrscape et Microsoft se positionnent :

Versions Jscrip t :
Jscript est un langage poussé par Microsoft àl'intérieur d'un concept beaucoup plus
global , dénommé WSH, àsavoir Windows Scripting Host

Les dernière informations étant disponibles sur le site MSDN àl'adresse suivante :

http://msdn.microsoft.com/scripting

JavaScript Cabaré Michel-

Page 116
Cours v.2
JavaScript Cabaré Michel-
Page 117
Cours v.2
Versions Javascrip t :
Javascript est la version développée par Netscape, est supportée par Micorsoft via
Jscript

Javacript est disponible coté client, et coté serveur, mais uniquement sur les produits
distribués par Nestcape…

Ce petit tableau essaye de rassembler de quelle manière la norme JAVASCRIPT est

supportée nativement par les produits NETSCAPE, et via JSCRIPT par les produits
Microsoft…

statmarket.com déclare le 9/05/1999

JavaScript Cabaré Michel-

Page 118
Cours v.2
 A N N E X E : R E S S O U R C E S IN T E R N E T

N o rm es et spécific a tio n s :
Si la norme est édictée par l'organisme de Normalisation ECMA, dont les dernière
spécifications sont disponibles àl'adresse suivante :

Norme ECMA : http://www.ecma.ch

Spécifications Microsoft : http://msdn.microsoft.com/scripting

Spécifications Nestcape : http://www.netscape

S ites et F o r u m :
http://www.experts-exchange.com

JavaScript Cabaré Michel-

Page 119
Cours v.2
http://www.editeurjavascript.com

http://www.allhtml.com

JavaScript Cabaré Michel-

Page 120
Cours v.2