Vous êtes sur la page 1sur 120

Javascript

N7 Cours

Michel Cabar
Dcembre 2000

T A B L E D E S M A T IE R E S
QUEST-CE JAVASCRIPT.................................................................................................... 6
Prsentation............................................................................................................... 6
Objectifs ..................................................................................................................... 7
Les plus et les moins : ............................................................................................ 7

APPEL DUN SCRIPT JAVASCRIPT .................................................................................... 8


Les diffrents appels ................................................................................................ 8
Dans le navigateur :................................................................................................. 8
Tag spcifique ........................................................................................................... 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


Dclaration :.............................................................................................................. 15
Mots rservs :.......................................................................................................... 15
Variable locale-globale : ........................................................................................ 16

LES TYPES DE VARIABLES................................................................................................... 17


Principe :..................................................................................................................... 17
Chane de caractre - string :................................................................................ 17
Les nombres - number :............................................................................................ 19
Les boolens - boolean :......................................................................................... 20

PROCEDURES ET FONCTIONS........................................................................................... 22
Dfinir et appeler des fonctions / procdures : ................................................. 22
Dclaration de procdure : ................................................................................... 22
Dclaration de fonction :........................................................................................ 23
Appel de procdure :.............................................................................................. 23
Appel de fonction : .................................................................................................. 23
Gestion des arguments :.......................................................................................... 24

LES OPERATEURS................................................................................................................. 25
Arithmtiques :........................................................................................................... 25
Concatnation : ....................................................................................................... 25
Comparaison :........................................................................................................... 26
Affectation :............................................................................................................... 27
JavaScript

Cabar MichelCours v.2

Page 2

Binaires :...................................................................................................................... 27
Logiques : ................................................................................................................... 29
Conditionnels :........................................................................................................... 29

JavaScript

Cabar MichelCours v.2

Page 3

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
Proprits - mthodes des tableaux : ................................................................... 46

NOTIONS D'EVENEMENTS................................................................................................. 47
Qu'est-ce un vnement:....................................................................................... 47
Gestionnaire d'vnement: ................................................................................... 48
vnement par dfaut et spcifiques: ................................................................ 49
Quelques vnements javascript:........................................................................ 50

NOTIONS DE P.O.O. ........................................................................................................... 56


Objets Mthodes - Proprits: ............................................................................ 56
Un exemple de modle objet : .............................................................................. 57
Modle objet window Netscape : ....................................................................... 59
Modle 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 MichelCours v.2

Page 4

Exemple location.replace :..................................................................................... 90

OUVRIR UNE NOUVELLE FENETRE .................................................................................... 91


La mthode open..................................................................................................... 91
Fermer une fentre .................................................................................................. 94
crire dans une fentre........................................................................................... 94

EVENEMENTS TEMPORISES................................................................................................ 95
mthode 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


Interts :...................................................................................................................... 113
Accder des champs de formulaire : ................................................................ 114
Calculs avec des chanes : .................................................................................... 115

ANNEXE : VERSIONS.......................................................................................................... 116


JSCRIPT-JAVASCRIPT-ECMASCRIPT .............................................................................. 116
Correspondances avec ECMASCRIPT : ............................................................... 116
Versions Jscript :........................................................................................................ 116
Versions Javascript : ................................................................................................ 118

ANNEXE : RESSOURCES INTERNET ................................................................................... 119


Normes et spcifications :....................................................................................... 119
Sites et Forum: ............................................................................................................ 119
JavaScript

Cabar MichelCours v.2

Page 5

Q U E S T -C E J A V A S C R IP T

P rsentation
L'emploi de javascript est devenu aujourd'hui indispensable pour qui veut crer un
site Web convivial et performant.
Auparavant, la majorit des traitements effectus dans les documents HTML taient
raliss par l'action du serveur et le poste client tait trs passif, puisque celui-ci se
bornait quasiment afficher les rsultats des requtes que lui soumettait le dit
serveur ! En effet, un programme ou un script CGI (Common Gateway Interface)
tait excut par le serveur qui transmettait le rsultat au poste client, celui-ci
interprtait l'envoi HTML et l'affichait par le navigateur. Cette situation surchargeait
normment les serveurs et le rseau...
Aujourd'hui, grce au Javascript (introduit par Netscape 2.0), et encore plus
rcemment avec le Dynamic HTML (introduit par Microsoft), cette situation a
compltement chang et le navigateur est maintenant capable "d'intelligence"
puisqu'il est mme de traiter des scripts embarqus cot client , de manire
indpendante au serveur (rseau non utilis), par un traitement local.
Il est vrai que le langage JAVA et aussi capable et mme plus que le Javascript,
mais celui-ci est rserv des spcialistes. Il permet beaucoup plus mais est
beaucoup plus lourd, car il ncessite une bonne connaissance de la programmation
(Objet), un compilateur (il est compil l'inverse du Javascript), un dbogueur etc.
Le couple HTML-Javascript est trs souple, accessible la plupart des Webmasters et
sa popularit ne cesse de grandir car il permet un relle autonomie au poste client,
mme sil ne peut accder au fichiers du poste client sur lequel il sexcute !

Il ne sagit pas ici vous donner une approche complte du langage Javascript (un
livre entier serait ncessaire) mais de vous aider en dcouvrir les notions de bases,
pour ensuite les appliquer de manire trs pratique

JavaScript

Cabar MichelCours v.2

Page 6

O b je c tifs
Javascript est un langage de script bien adapt la cration de petits programmes
simples, comme des convertisseurs d'unit, des calculettes simples, du contrle de
formulaire, de l'animation de page
Javascript n'est pas adapt pour mettre en place un affichage ou de la
manipulation de donne, mais permet d'interagir avec l'utilisateur de manire
beaucoup plus souple que les langages plus complet tels que JAVA

D clenchem ent par vnem ents


De par comment il est intgr aux navigateurs et au code HTML, Javascript peut
programmer des rponses des vnements utilisateurs tels qu'un clic souris ou la
saisie de donne dans un champs de formulaire, faire apparatre 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 intgre une forme limit de modle orient objet (voir plus loin) chapitre

L e s p lu s e t les m o in s :
Plus : interprt, la phase test-essais ne ncessite pas de compilation et
est dons trs rapide
Plus : indpendant de la plateforme utilise
Plus : taille rduite et vitesse d'excution leve
Moins : code source non dissimulable
Moins : faible possibilits de dbogage et fonctionnalits relativement
limites
Moins : ncessite une version relativement rcente des navigateur
Moins : interprt, les nuances d'interprtation d'un navigateur l'autre,
voire d'un version une autre peuvent tre considrables

JavaScript

Cabar MichelCours v.2

Page 7

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 iffre n ts appels
Pour qu'un document HTML puisse excuter 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 interprte
ceux-ci lors du chargement de la page HTML :
Nous allons le voir, plusieurs manires peuvent tre employes 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 spcifique :

incorporant

le

script

lui-mme

ou faisant appel au source du script


Par modification dun Tag :

utilisant du javascript standard prdfini


ou appelant une fonction dfinie
auparavant manuellement en javascript

D a n s le n a v ig a teur :
La premire manire, pour excuter 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 prcder du mot rserv javascript:

Appel dans
Nestcape

JavaScript

Cabar MichelCours v.2

Page 8

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 fentre 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 insre un script l'aide d'une balise spcifique <SCRIPT> qui
doit tre insre dans le document HTML mme.
TAG

<SCRIPT>

</SCRIPT>

LANGUAGE="JavaScript"
Paramtre

Prcise quel est le langage du script (JavaScript,


VBScript...) avec sa version ventuelle 1.2 par
exemple
SRC
prcise l'URL du script qui doit tre insr. Cet

Paramtre

attribut n'est employ que dans le cas o le


contenu

du

script

n'est

pas

insr

dans

le

document HTML lui-mme mais dans un fichier


d'extension ".js".
Par exemple :
SCRIPT LANGUAGE="JavaScript">
...contenu du script...
</SCRIPT>
Ceci peut tre complt, pour raison de compatibilit avec les navigateurs de
version infrieure, par l'adjonction des balises de commentaires HTML, qui
permettront ainsi aux navigateurs plus anciens d'ignorer le contenu du script.

JavaScript

Cabar MichelCours v.2

Page 9

Cet ajout n'est pas obligatoire pour l'excution du script cependant, il est
recommand de l'employer, lui-mme agrment ventuellement par les mots
(Dbut du script et Fin de script) si vous voulez rendre la lecture du code trs lisible.

S crip t d a n s u n e p a g e H T M L:

Voir

le

<BODY>
<script LANGUAGE="JavaScript">
<!-alert (' bonjours')
//-->
</script>
exemple de script minimaliste, mais existant !
</BODY>

fichier

COURSJS01.HTM

Selon que vous voulez utiliser une version ou une autre du JavaScript, vous devrez
mettre des balises diffrentes.
Version
JavaScript
1.0
JavaScript
1.1

Compatibilit

Balise

I.Explorer 3.0 - Netscape 2.0

<SCRIPT LANGUAGE="JavaScript1.0">

Netscape 3.0x , 4.0 et 4.x

<SCRIPT LANGUAGE="JavaScript1.1">

JavaScript I.Explorer 4.x


1.2

<SCRIPT LANGUAGE="JavaScript1.2">

Netscape 4.0x 4.05

JavaScript I.Explorer 5.x


1.3

<SCRIPT LANGUAGE="JavaScript1.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
fichier COURSJS02.JS

avec dans le fichier :


// dbut du script -->
...contenu du script...
// Fin du script -->

ATTENTION : mettre le script en SRC "dvalide" la vrification de version possible via


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

Tag pr existant
JavaScript

Cabar MichelCours v.2

Page 10

Une autre manire pour insrer un script se fait par l'ajout d'un code spcifique dans
la balise dun lment HTML, il s'agira soir d'un appel direct soit d'un appel de script
cris au pralable

A p p e l d irect
Il est possible d'employer une fonction intgre du Javascript par le seul ajout de ce
code dans la balise de l'lment mais cela restera trs limit.

Par exemple :

Voir

le

fichier

COURSJS03.HTM

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

Ce code provoque l'apparition d'une fentre (alerte) par le clic (l'vnement


"onClick") sur le bouton du formulaire... Cette fentre spciale, "alerte", est une
fentre de dialogue dans laquelle une chane de caractres (message) est affiche.
C'est une mthode de l'objet window. Pour cet exemple, il n'est donc pas ncessaire
d'insrer un script dans le document

A p p e l d e fonction
Mieux vaut l'ajout d'un appel de fonction spcifique dans la balise de l'lment qui
lancera le traitement. Ce code servira trs souvent lancer une fonction dfinie dans
JavaScript

Cabar MichelCours v.2

Page 11

un script "conventionnel" c'est--dire, insr par les balises conventionnelles (<SCRIPT>)


un peu plus haut.
Par exemple :

Voir

le

<script language="JavaScript">
<!-function hurle()
{
alert("ouille !, mais aprs tout aussi merci de m\'avoir donn
l\'occasion de m\'exprimer")
}
//-->
</script>
</HEAD>

fichier

COURSJS04.HTM

ce qui permet de dfinir au pralable 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 dfini plus haut par son nom hurle()

N.B: Vous avez remarqu un caractre "\" (barre oblique inverse), appel caractre
d'chappement, plac avant l'apostrophe plac devant le mot "image" ! En fait,
l'apostrophe est un caractre qui fait partie de la syntaxe du code Javascript
(comme les guillemets) et pour indiquer que cet apostrophe particulier ne doit pas
tre interprt comme tel, il faut placer ce caractre ("\") 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 approprie, il est possible de lui donner un message particulier. En
effet, tout texte insr avec la balise spcifique <NOSCRIPT> verra celui-ci affich
tandis que le navigateur de ceux pour qui l'option est active ignorera le texte...

Essayer de modifier le fichier avec l'ajout de


<NOSCRIPT>
Javascript
</NOSCRIPT>

ou

JavaScript

l'option

approprie

Cabar MichelCours v.2

non

active...

Page 12

Essayez de dsactiver dans un navigateur l'interprtation Javascript pour visualiser


ce tag(solution en COURSJS04B.HTM)

Dans Netscape on demandera le menu :


Edition / Prfrences / Avances

Dans Explorer cela dpends des zones de scurit que l'on a mis en place (mais ne
peut s'appliquer au fichier tlchargs localement)
OUTILS / OPTIONS INTERNET / SECURITE

dans laquelle il faut demander de personnaliser le niveau

JavaScript

Cabar MichelCours v.2

Page 13

UN PEU DE SYNTAXE

M in -m a j :
Html n'est pas regardant sur les problmes 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 diffrence entre
Toto, toto ou TOTO

C o m m e n ta ire s :
Les commentaire HTML dbutent 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 crer des "blocs"
{

expression 1;
expression 2;

}
JavaScript

Cabar MichelCours v.2

Page 14

L E S V A R IA B L E S

D claration :
Pour reprsenter, 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 dclaration des variables est trs simple car trs peu diffrencie. Il
n'est pas obligatoire, mais recommand, de dclarer des variables par le mot cl
"var".
L'identificateur de variable doit, pour tre correct :

tre une chane de caractres

commencer par une lettre de l'alphabet ou le caractre de


soulignement ("_") (Le reste de la chane 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
attribues directement des valeurs, et deux autres (_ex et y) sans valeur initiale.

M o ts rservs :
Voici la liste des mots rservs. 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 MichelCours v.2

Page 15

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 dclare dans une fonction
(locale). Cette variable nest 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 dclare en dehors dune


fonction. Cette variable est connue partir de lendroit o elle est dclare
Dans cet exemple, en
COURSJS05.HTM il est
pris

expressment

le

mme nom (adresse)


pour

les

variables

globale et locale

valeur
variable

de

On peut donner le mme nom une variable globale et locale mais ce


la

globale:

"Rue Dupont",

<script LANGUAGE="JavaScript">
var adresse = "Rue Dupont"
function message()
{var adresse = "Paris"; return adresse}
</SCRIPT>

valeur

de

variable

locale

la

"Paris".
Quelle confusion

nest pas recommand... !


<script LANGUAGE="JavaScript">
var adresse = "Rue Dupont"
function message()
{var adresse = "Paris"; return adresse }
document.write("Valeur de la var globale <BR>" +
adresse)
document.write("Valeur de la var locale <BR>" +
message() )

</script>

JavaScript

Cabar MichelCours v.2

Page 16

L E S T Y P E S D E V A R IA B L E S

P rin c ip e :
On ldjdit, il n'est pas obligatoire, mais seulement recommand, de dclarer des
variables.
A ce titre il faut savoir que Javascript ntant pas un langage compil mais
interprt, leur type sera ventuellement choisit selon le contexte voulut. Le typage
tant assez faible, une variable dclare dan un type peut tre utilise dans un autre
type sans que un message d'erreur n'apparaisse. Parfois un navigateur "plantera"
mais sans que l'on sache vritablement pourquoi...
Finalement, la dclaration de variable servira surtout au programmeur pour qu'il
puisse s'y retrouver !

Il existe cependant diffrents types de variables :

les Chanes de caractre ("Rue Dupont") ou STRING

les Nombres

les Boolens

le type valeur unique null

C h a n e d e c a r a c tre - strin g :
Le type de la variable va dpendre 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'interprteur JavaScript : range la
valeur "michel" dans le casier appel MonPrenom.

JavaScript

Cabar MichelCours v.2

Page 17

La valeur "michel" tant mise entre guillemets, indique l'interprteur JavaScript que
la valeur "michel" est de type "String" (chane de caractres).
Dornavant, la variable MonPrenom, tant qu'elle contiendra la valeur "michel" aura
le type "String" (chane de caractres). Et ceci jusqu'ce qu'on dcide de lui donner
une valeur diffrente
Comme la plupart des langages, JS dtermine par des apostrophes (
guillemets (

' ) ou des

" ) le dbut et la fin de la Chane de caractres

Mais on ne peut mlanger les deux symboles


2 critures correctes

I = bonjours
I = "bonjours"

criture incorrecte

I = bonjours"

Il existe des caractres spciaux, qui peuvent tre placs dans les constantes de
chane de caractres (caractres entours d'apostrophes ou de guillemets mais sans
mlange) et qui permettent d'insrer :
Un passage la ligne suivante

\n

Une tabulation horizontale

\t

Un retour en arrire

\b

Un retour chariot

\r

Un saut de page

\f

de mme que pour faire apparatre certains caractres il faut prciser l'interprteur
de ne pas les interprter
Dans cet exemple, en
COURSJS06.HTM
uniquement

notez

l'utilisation

le caractre guillemet

\"

Le caractre apostrophe

\'

du \n
Ainsi
des

que

l'imbrication

\\

L'anti-slash

' et des " notez que

si
'alert("Bonjour ")' et

Voici un exemple
<FORM>
<input type="button"
Value="Par exemple"
onClick="alert('Bonjour \n et bientt')">

"alert('Bonjour ')" sont


correct ni
"alert("Bonjour ")" ni

</FORM>

'alert('Bonjour ')' ne le
sont

N.B: la rgle gnrale tant quand mme que tout ce qui est renvoy
par Javascript (ici Onclick) doit tre entre " (guillemets)
JavaScript

Cabar MichelCours v.2

Page 18

on, crira

onClick="alert('Bonjour \n et bientt')"

plutt que

onClick='alert("Bonjour \n et bientt")'

L e s n o m bres - n u m b e r :
Si nous utilisons la variable appele MonPoids et que nous lui affections la valeur 70
par l'instruction :
MonPoids = 70
Sans guillemets, la valeur 70 sera considre comme un nombre. Nous dirons alors
que la variable MonPoids est de type Number (nombre, ou numrique). Et elle le
restera jusqu' ce que nous dcidions 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 chane de caractres, et la variable
aurait t de type String. Ce qui nous empcherait par la suite
d'effectuer des calculs sur le contenu de cette variable, puisque
nous verrons que l'on ne peut effectuer d'oprations mathmatiques
sur les chanes de caractres (variables de type String).

Il n'y a pas de diffrence en Javascript entre les nombres entiers et les rels, et en
gnral toutes les oprations sur les nombres se font sur des rels
Particularit :

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


035137

reprsentation

octale

du

nombre

dcimal

14943

= (((3*8 + 5)*8 + 1)*8 + 3)*8 + 7;

Les nombres de base 16 (hexadcimale) commencent par 0x


0x3A5F : reprsentation hexadcimale du nombre dcimal 14943
= ((3[3]*16+10[A])*16+5[5])*16+15[F]};

Les

autres

nombres

de

base

10

(dcimale)

14943

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

Correspondances entre
DCIMAL - HEXADCIMAL - BINAIRE
DCIMAL

HEXADCIMAL

BINAIRE

BASE - 10 -

BASE - 16 -

BASE - 2 -

10

JavaScript

Cabar MichelCours v.2

Page 19

11

100

101

110

111

1000

1001

10

1010

11

1011

12

1100

13

1101

14

1110

15

1111

L e s b o o lens - b o o le a n :
Voyons maintenant le cas d'un de type de variables moins vidents.
Imaginons une variable appele 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 (boolen, ou logique). Il n'existe
que deux valeurs Boolean, qui sont :

"true" (vrai)

"false" (faux)

Ces valeurs purement informatiques serviront effectuer des tests, vrifier si une
situation est vraie ou fausse.
Les mots true et false sont des mots rservs JavaScript. On ne pourra donc pas les
utiliser comme noms de variables.
Ne prennent que deux valeurs possibles, prises notamment quant au rsultat des
oprations de comparaison :

En cas de conversion force vers une valeur numrique, on aura alors

"true" (vrai)
JavaScript

donnant

1 (*)
Cabar MichelCours v.2

Page 20

"false" (faux)

donnant

(*) mais toute valeur diffrente de 0 dans une comparaison donnera true

JavaScript

Cabar MichelCours v.2

Page 21

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 / procdures :


Les scripts placs dans le tag SCRIPT sont valus la fin du chargement de la page.
Ces fonctions sont stockes, mais pas excutes. Les fonctions, pour tre excutes
doivent tre appeles par un lien dans la page.
Il est important de faire la diffrence entre dfinir une fonction et appeler une
fonction. Dfinir une fonction ne fait que la nommer, et dire quoi faire quand cette
fonction est appele. Appeler une fonction fait excuter une fonction avec ses
paramtres
La diffrence entre des fonctions ou des procdures se situe dans le fait qu'une
fonction est un sous-programme (procdure) particulier qui a pour caractristique
de renvoyer une valeur, tandis qu'une procdure normale ne le fait pas.
Les fonctions devant tre connues avant d'tre utilises, souvent on les dfinira dans
la section d'en-tte de la page HTML (<HEAD> </HEAD>)
Aucune vrification de cohrence n'est faite sur les ventuels paramtres passs, ni
sur leur nombre et encore moins sur leur type

D claration de procdure :
Toute procdure, pour tre dclare dans un script, doit possder un nom et ensuite,
un ou des paramtres: ces derniers sont optionnels
Ensuite, une accolade d'ouverture { et de fermeture } doivent englober l'ensemble
des instructions.

function nomproc (paramtres1,...,paramtresN)


{
code de la procdure
}

JavaScript

Cabar MichelCours v.2

Page 22

D claration de fonction :
Toute procdure, pour tre dclare dans un script, doit possder un nom

et

ensuite, un ou des paramtres: 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 (paramtres1,...,paramtresN)
{
code de la fonction
return (resultat)
}

N.B: de manire gnrale, il est dconseill de mettre plusieurs return diffrents


endroits dans une fonction, cela nuit normment la lisibilit. De plus certains
navigateurs (netscape avant version 4.x) gnrent une erreur devant par
exemple un return; suivit d'une instruction qui forcment ne s'excutera jamais

A p p e l de procdure :
Toute procdure, peut tre utilise ds quelle est connue
function proc1 (p1,p2)
{
code de la procdure
}

dclaration

appel

proc1(x,y)

A p p e l d e fo n c tio n :
Toute fonction, peut tre utilise ds quelle est connue
dclaration

appel
stockage

avec
du

function fonc1 (p1,p2)


{
code de la procdure
return(result)
}
a = fonc1(x,y)

rsultat renvoy

JavaScript

Cabar MichelCours v.2

Page 23

G estio n d e s a r g u m e n ts :
De manire gnrale, dans une fonction il existe une variable prdfinies arguments
permettant de connatre la liste de tous les arguments passs en paramtre.
En essayant de travailler proprement, on peut alors crire
Var

Argv = nom_fonction.arguments

la variable Argv un tableau contenant tous les paramtre

Var

Argc = Argv.length

la variable Argc contient le nombre d'arguments passs

En effet, si aucun argument n'est dclar derrire function, la fonction garde tout de
mme l'accs tous les arguments qui peuvent lui tre transmis
Deux cas peuvent se prsenter :

L'appel comporte moins de paramtres que la fonction ne le prvoit :


le rsultat sera forcment imprvisible quant la valeur de ces paramtres

L'appel comporte plus de paramtres que la fonction ne le prvoit :


les valeurs sont ignores, mais restent accessibles via arguments

Voilune dclaration de fonction acceptant un nombre variable de paramtres

COURSJS06B.HTM

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

et diffrents appels possibles

onClick = "affiche();">

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

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

JavaScript

Cabar MichelCours v.2

Page 24

LES OPERATEURS

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

l'addition (+)

la multiplication (*)

la soustraction(-)

la division (/)

le modulo (% ) : reste de la division entire d'un entier par un autre

C o n c a tn a tio n :
l'oprateur de concatnation (

+)

c'est exactement le mme que celui utilis pour l'addition simplement il porte sur des
variables de type string

i = "bonjours" + 1
amne dans i

la chaine

"bonjours1"

N.B: Javascript convertit automatiquement les entiers en chanes de


caractre, ce qui vous permet de concatner des entiers avec des
chanes, pour donner finalement une chane

y = 50 + "Fr"
assigne la variable y la chane "50 Fr"

JavaScript

Cabar MichelCours v.2

Page 25

C o m parais o n :
En fonction du rsultat du test de comparaison des oprandes, les oprateurs de
relation donnent la valeur true ou false :

==
!=

True

(vrai)

dans

le

cas

d'galit

des

oprandes, false dans le cas inverse


True (vrai) dans le cas d'ingalit des
oprandes, false dans le cas inverse
true si l'oprande de gauche est suprieur
l'oprande de droite, false dans le cas

>

inverse
true si l'oprande de gauche est suprieur

>=

ou gal l'oprande de droite, false dans le


cas inverse
true si l'oprande de droite est suprieur
l'oprande de gauche, false dans le cas

<

inverse
true si l'oprande de droite est suprieur ou

<=

gal l'oprande de gauche, false dans le


cas inverse

Attention: 10 < "3" ou "10"< 2 devant des types diffrents est


convertit en numrique (si possible).
Une comparaison de type dictionnaire ne se fera
qu'entre des expressions de type caractre des deux
cots "xxx" < "yyy"

COURSJS07.HTM

<script LANGUAGE="JavaScript">
<!
// 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 chane
"zoo" est plus loin
"antirouille")
JavaScript

false ("3" est >"10" comme


dans le dictionnaire que

Cabar MichelCours v.2

Page 26

A ffe c ta tio n :
certain "fanatiques" peuvent utiliser les conventions suivantes
Notation abrge
Opration

L'oprateur 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 oprateurs avant la variable (++a, --a) ralise une affectation
antrieure l'opration en cours. Le placement aprs ralise l'affectation aprs
l'opration en cours.

B in a ires :
Uniquement pour ceux que cela intresse
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 dcalage de n bits de b vers la gauche

a = b >> n

a est le dcalage de n bits de b vers la droite

a >< b
a = ~b

les valeurs de a et b sont interchanges


complment binaire 1, quivalent (a ^ (-1)),
inversion des bits
JavaScript

Cabar MichelCours v.2

Page 27

JavaScript

Cabar MichelCours v.2

Page 28

L o g iq u e s :
ET logique (AND)
&&

donne true si les deux oprandes sont true et false


dans le cas inverse
OU logique (OR)
donne true si l'un des deux oprandes est true et

||

false dans le cas inverse


la ngation (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 ralise, dans le cas inverse,
c'est l'expression2 qui est ralise.

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

JavaScript

Cabar MichelCours v.2

Page 29

N.B:

!0 [NOT 0] vaut n'importe quel nombre non nul, souvent -1 ou 1 selon les

interprteurs.
N.B:

false est quivalent 0, et true un nombre non nul.


N.B: Attention, le signe gal = d'affectation est diffrent du signe == de
comparaison.
N.B:

null n'est pas quivalent un nombre nul (zro) ou la chane vide "" mais est
gal "non-affect" ou vide
Noter l'exercice suivant en COURSJS08.HTM

"bonjour" s'affiche car :

false =0

true diffrent de 0

"Aurevoir" s'affiche car :

<script LANGUAGE="JavaScript">
<!
a = 122
if (a) alert("bonjour"); // TRUE est non nul
a=0
if (!a) alert("Aurevoir "); // !0 vaut souvent 1 (TRUE)

true diffrent de 0

"non gal " s'affiche car


compare 0 et 10

b=10
if (a==b) alert ("gal")// comparaison classique
else
alert("non gal")

"gal" s'affiche avec


Internet Explorer mais

if (a=b) alert ("gal")


else
alert("non gal")

"non gal" s'afficherait


avec Netscape < 4.05
car il "corrige" l'erreur ?

alert("a vaut "+a+"et b vaut "+b)

// == est diffrent de =, ici


//a=b vaudrait 10 donc True

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 initialise et vaut "+c)
//NULL n'est pas quivalent un zro, mais "non-affect",
//la chaine = ""; est une chane sans caractre mais initialise
//-->
</script>

JavaScript

Cabar MichelCours v.2

Page 30

S T R U C T U R E S D E C H O IX

if e lse :
Les mots cls pour un si sont

if
(test)
{...
...
}
else
{...
...
}

if

else

ou plus simplement

if
{...
...

avec l'indentation suivante

(test)

On utilise cette forme d'criture de

Dans cette forme d'criture des

test, seulement si nous dsirons que le

tests, les actions sont excutes

programme fasse quelque chose de

seulement si la condition est vraie,

bien prcis 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

recommencer

(fausse). Le programme reprend

tester

une

autre

condition

n'est

pas

l'excution

vraie

condition dans le cas o la premire

simplement

des

n'est pas vraie. C'est ce que l'on

instructions qui suivent l'accolade

appelle les "if imbriqus".

fermante } aprs la fin du test, s'il y


en a. C'est bien pratique, car cela
allge l'criture des tests.

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

JavaScript

Cabar MichelCours v.2

Page 31

Les oprateurs logiques Et (&&) et OU (||] restent disponibles pour crire des test plus
complexes.

JavaScript

Cabar MichelCours v.2

Page 32

S T R U C T U R E S D E R E P E T IT IO N

W h ile :
Cre une boucle qui rpte l'excution du code tant que la condition est vraie. Si la
condition est vraie ds le dbut, 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 cls pour un tant que sont

while (test)
{...
...
...
}

while

avec l'indentation suivante

Si le test est vrai , on excute le bloc


d'instruction lintrieur 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 gnral
dans les instructions rptes il y en a forcment une qui un moment donn fera
passer le test = Vrai (Sinon cela risque de ne jamais s'arrter.)

JavaScript

Cabar MichelCours v.2

Page 33

d o w h ile :
Cre une boucle qui rpte l'excution du code tant que la condition est vraie. la
diffrence 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 cls pour un tant que sont

do while

avec l'indentation suivante

do
{...
...
...
}
while (test)
...

On execute le bloc
Si le test est vrai , on excute le bloc
d'instruction lintrieur du tant que, puis on
remonte voir si le test est vrai ou faux
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 MichelCours v.2

Page 34

fo r :
Cre une boucle qui excute le code x fois. Attention aux boucles infinies :

S y n taxe :
for ([valeur initiale] ; [condition] ; [incrment]) {
code
}

Param tre :

valeur initiale : valeur initiale de la variable compteur.

condition : condition de sortie de la boucle.

incrment : pour incrmenter ou dcrmenter le compteur.

Fonctionnem ent :

For( var i=dbut ; i<= fin ; i=i+x)


{...
On excute le bloc dinstruction autant de
...
fois que ncessaire pour que i passe de la
...
valeur dbut 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 parenthses se lit de la manire suivante :


i = dbut; veut dire :
i <= fin; veut dire :

en partant avec la valeur dbut au compteur i


tant que le compteur aura une valeur infrieure

ou gale fin;
i=i+1 veut dire :

en incrmentant (en faisant grimper en franais


normal) le compteur i de x chaque fois.

JavaScript

Cabar MichelCours v.2

Page 35

JavaScript

Cabar MichelCours v.2

Page 36

sw itc h :
Permet au programme d'valuer une expression et de la comparer une valeur d'un
"case ".
N.B: la version minimale ncessaire 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'interprteur de savoir o se trouve la fin


du code d'un "case".

E x e m p le :
switch (langue) {
case "franais" :
alert("Bonjour");
break;
case "english" :
alert("Hello");
break;
default : alert("langue inconnue");
}.

JavaScript

Cabar MichelCours v.2

Page 37

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 apparatre des fentres et
communiquer avec l'utilisateur. La mthode open() par exemple permet de crer
une nouvelle fentre de navigateur, tandis que d'autres mthodes servent faire
afficher des fentres de dialogue.
Les fentres de dialogue sont utiles pour communiquer avec l'utilisateur. On peut
simplement faire afficher un message ou encore demander une rponse de la part
de l'usager.

Principaux types existants:

Mthode

Description

alert()

Affiche un message dans une fentre de dialogue


comportant un bouton OK.

confirm()

Affiche une question dans une fentre de dialogue


comportant les boutons OK et Annuler.

prompt()

Affiche un message dans une fentre de dialogue


o celle-ci ncessite une rponse de la part de
l'utilisateur.

Pour une comprhension plus complte des notions de mthode, d'objet se reporter
au chapitre " notion de P.O.O " (page Erreur ! Signet non dfini. )

JavaScript

Cabar MichelCours v.2

Page 38

a lert()
La mthode alert() est surtout utile pour donner de l'information l'utilisateur.
Affiche une bote de message davertissement et un bouton OK. Cette mthode est
utilise pour avertir lutilisateur seulement, il na aucune dcision prendre.
Mme si la mthode alert utilise lobjet window, on na pas besoin de spcifier une
fentre de rfrence lors de lappel.

S y n taxe
alert("unMessage")

unMessage est une chane de caractres ou une proprit dun 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 mthode confirm() est utile lorsque l'on dsire poser une question l'utilisateur
dont la rponse est positive ou ngative.
Affiche une bote de message de confirmation, un bouton OK et un bouton
ANNULER. Il faut utiliser cette mthode lorsque lutilisateur doit prendre une dcision.
La mthode confirm retourne TRUE si lutilisateur active le bouton OK et retourne
FALSE si lutilisateur active le bouton ANNULER.
Mme si la mthode confirm utilise lobjet window, vous navez pas besoin de
spcifier une fentre de rfrence lors de lappel.

S y n taxe
confirm("unMessage")

unMessage est une chane de caractres ou une proprit dun objet existant.

JavaScript

Cabar MichelCours v.2

Page 39

E x e m p le
En voici un exemple:

Dans

l'exemple

du

fichier
une

COURSJS09.HTM,
question

est

pose

l'utilisateur.

La mthode alert() est ensuite utilise pour faire afficher le rsultat. C'est donc une
variable qui dtient la valeur retourne par la fentre de dialogue, dans ce cas-ci la
variable reponse.

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

prom p t()
La mthode 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 bote de dialogue avec un message et un champ de saisie.
Mme si la mthode prompt utilise lobjet window, vous navez pas besoin de
spcifier une fentre de rfrence lors de lappel.

S y n taxe
prompt(Message, [valeurDfaut])

Message est une chane de caractres ou une proprit dun objet existant. La
chane de caractres reprsente le message.
valeurDfaut est une chane de caractres, un entier ou une proprit dun objet
existant qui reprsente la valeur de dfaut du champ dentre. Si vous ne donnez
pas de valeur initiale pour valeurDfaut, la bote de dialogue affichera la valeur:
<undefined>.

JavaScript

Cabar MichelCours v.2

Page 40

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
lectronique","nom@domaine");
alert(reponse);
// Fin script -->
</SCRIPT>

votre

adresse

de

courrier

Lorsque l'utilisateur n'entre aucune valeur, la fentre retourne la valeur par dfaut,
soit "e-mail" (le 2 paramtre).
Si l'utilisateur entre une valeur, c'est celle-ci qui sera stocke dans la variable
reponse.
Si l'usager clique sur le bouton Annuler, la valeur null sera renvoye.
Si aucune valeur n'est passe en deuxime paramtre, et que l'utilisateur valide sans
effectuer de saisie, la valeur undefined sera renvoye.

T.P: Dtecter une version

JavaScript

javascript

Cabar MichelCours v.2

Page 41

LES TABLEAUX

N a ture des ta b le a u x :
Les tableaux en javascript ne sont pas forcment un ensemble de variables de
mme types, comme dans les langages de programmation classiques, il sagit en
fait de tableaux associatifs, dans lesquels on stocke un ensemble dassociation
pouvant tre trs dissemblables, il s'agit d'un ensemble de valeurs dsign par un
seul nom de variable

T a b leaux num riq u e s


Les tableaux ncessitent une dclaration pralable leur utilisation. Par

Cette
dclaration n'est
possible
partir

qu'
de

la

version 1.2

exemple un tableau pourrait s'appeler Eleve et serait dclar par l'instruction


Eleve = ["durand","dupont","Ernest"]
Les lments d'un tableau sont dsigns par leur index, c'est dire le nombre
plac entre crochet, les tableaux commencent 0 et donc le ime lment
porte l'index [i-1]

mais il est possible de dclarer au pralable un tableau pour augmenter la

Cette
dclaration est
toujours

lisibilit du programme
Eleve = new Array(3)

possible
On

utilise

ici

l'oprateur
new

sur

un

objet prdfini
Array

et on pourrait initialiser classiquement ce tableau avec un code du genre


for ( var j=0; j<3; j++)
{
Eleve[j]=""
}

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

JavaScript

Cabar MichelCours v.2

Page 42

COURSJS11.HTML
On

utilise

ici

la

mthode
"classique"

Eleve = new Array(3)


Eleve[0]="durand";
Eleve[1]="dupont";
Eleve[2]="Ernest";
for ( var j=0; j<3; j++)
{
document.write("Valeur de tab[" + j + "] = " + Eleve[j] +"<BR>");
}
for ( var j=0; j<3; j++)
{
Eleve[j]="e"
}
for ( var j=0; j<3; j++)
{
document.write("Valeur de tab[" + j + "] = " + Eleve[j] +"<BR>");
}

Si on souhaitait utiliser la dclaration de tableau acclre 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 spcifier
<script LANGUAGE="JavaScript1.2">

La solution est propose en COURSJS11B.HTML

JavaScript

Cabar MichelCours v.2

Page 43

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 diffrents avec la mme appellation
La dclaration d'un tableau associatif ne peut se faire qu'avec l'appel de l'oprateur
new sur l'objet pr-dfini array...

Un tableau associatif se dclare donc de manire identique (en fait tous les tableaux
sont associatifs en javascript)
Tabass = new Array(3)

L'affectation d'un lment du tableau peut se faire avec


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

Pour faire afficher toutes les lments 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 numriques, donc associatif, ne peut
tre lu classiquement et doit tre parcouru uniquement de la manire dcrite cidessus
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 MichelCours v.2

Page 44

Regardons l'exemple

COURSJS12.HTML
Ici le tableau est
clairement

tab = new Array(3)


tab["elem1"] = "voil"
tab["elem2"] = "un tableau"
tab["elem3"] = "associatif"

associatif

et on ne peut plus
utiliser
mthode

une
de

parcours

for ( var j=0; j<3; j++) // cela ne marche plus


{
document.write("Valeur de tab[" + j + "] = " + tab[j] +"<BR>");
}

"classique"

soit on liste tous les


lments

soit on s'adapte !

// c'est lourd si
document.write("Valeur de tab[elem1]
document.write("Valeur de tab[elem2]
document.write("Valeur de tab[elem3]

les lmnts sont nombreux


= " + tab["elem1"] +"<BR>");
= " + tab["elem2"] +"<BR>");
= " + tab["elem3"] +"<BR>");

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 lves, sous forme de tableau associatif.
Un lve est caractris par un nom, un age et une note,
Crer un script dans lequel on dclare 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 caractrisant cet
lve...
La solution se trouve en COURSJS12B.HTML

JavaScript

Cabar MichelCours v.2

Page 45

P roprits -m th o d e s d e s ta b le a u x :
L'objet tableau Array en javascript dispose de plusieurs proprits et de mthodes,
notamment

length :

reverse() :

proprit permettant de connatre la taille d'un tableau

mthode permettant d'inverser un tableau

sort() :

mthode permettant de trier un tableau selon l'ordre


ascii

join() :

mthode permettant de crer partir de tous les


lments d'un tableau un chane caractre

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 MichelCours v.2

Page 46

N O T IO N S D 'E V E N E M E N T S

Q u 'est-ce un vnem e n t:
Un des principaux intrts de javascript est de pouvoir modifier le comportement du
navigateur grce aux actions de l'utilisateur.
On s'appuie pour cela sur la notion d'vnement, qui reprsentent 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
mme trs riche

Evnement

Abort

Dclench lorsque...
lors d'une interruption de chargement d'une image
Un lment n'est plus slectionn avec le clavier

Blur

ex: on clique hors d'un champs de formulaire


Un lment est dslectionn et a t modifi

Change

ex: on modifie un champs de formulaire


L'utilisateur clique sur un lment de la page

Click

ex: click sur un lien hypertexte

DblClick

L'utilisateur double-clique sur un lment

DragDrop

Lorsque on fait glisser un objet dans le navigateur

Error

Un lment n'a pas t charg ou une erreur se produit lors


de l'excution d'un script

Focus

Un lment est slectionn avec le clavier

KeyDown

L'utilisateur appuie sur une touche sur un lment

KeyPress

L'utilisateur a appuy sur une touchee, puis l'a relche

KeyUp

L'utilisateur relche une touche

JavaScript

Cabar MichelCours v.2

Page 47

Load

Le navigateur ouvre une page HTML ou charge une image

MouseDown

L'utilisateur appuie sur le bouton de la souris

MouseMove

L'utilisateur dplace la souris sur un lment

MouseOut

L'utilisateur fait ressortir la souris d'un lment

MouseOver

L'utilisateur place la souris sur un lment

MouseUp

L'utilisateur relache le bouton de la souris

Move

Une fentre est dplace

Reset

un formulaire est rinitialis

Resize

Une fentre est redimensionne

Select

du texte est slectionn dans un champs de formulaire

Submit

un formulaire est envoy

Unload

une page est dcharge (lors du chargement d'une nouvelle


page la place

G estio n n a ire d 'vnem e n t:


Pour utiliser les vnements disponibles en javascript, on recours des gestionnaires
d'vnement qui s'utilisent de la manire suivante:

<TAG_HTML

param_html

balise HTML standard avec ses


ventuels paramtres

gest_vnement = "script">
attribut de la balise

destin

gestion

javascript

xxx

s'excuter

la

d'vnement

commence par onxxx

programme
devant
lors

Toute les balises HTML acceptent tous leurs paramtres standard, le fait
que une gestion d'vnement soit prvue ne change rien la syntaxe
purement HTML de la balise
Bien sr 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

connatre

les

combinaisons

possibles

"objet-

vnement" qui pourront dclencher des scripts Javascript


le programme javascript peut tre :
une commande javascript unique
une srie d'instruction spare par des ; voire des blocs
une fonction dfinie dans l'en-tte du programme
JavaScript

Cabar MichelCours v.2

de

la

survenue de l'vnement

Page 48

{ }

fichier
COURJS14.HTML

<BODY>
<script LANGUAGE="JavaScript">
<!-function m1() {
alert("premier message")
}
fonctions m1(), m2(), m3()
function m2() {
et appm()
alert("deuxime message")
}
function m3() {
alert("troisime message")
}
function appm() {
m1()
m2()
m3()
}
//-->
commande javascript
</script>
voici un <A HREF="bidon.htm" onMouseover="alert('bonjour')">lien</A> un peut ... vivant
<BR>
srie d'instructions spars ;
voici un <A HREF="bidon.htm" onMouseover="alert('bonjour'); alert('au revoir')">lien</A> un
peut plus ... vivant
appel une fonction
<BR>
voici un <A HREF="bidon.htm" onMouseover="appm()">lien</A> carrment ... exhubrant
</BODY>

vnem e n t par dfa u t e t spcifiq u e s :


Pour la plupart de ces vnements, le navigateur possde dj un comportement
par dfaut.
Par exemple l'vnement onClick sur un lien hypertexte provoque le chargement de
la page associe au lien.
Lorsque l'on ajoute un gestionnaire d'vnement un objet, au moment o
l'vnement survient, le navigateur excute:
1.

d'abord votre gestionnaire

2.

puis celui prvu par dfaut !

Si on ne veut pas que le navigateur excute son gestionnaire d'vnement par


dfaut, il suffit de passer en paramtre l'expression javascript return(false)

JavaScript

Cabar MichelCours v.2

Page 49

N.B:

une

exception

existe

ce propos, concernant l'vnement

onMouseOver pour la proprit status de l'objet window (cf Tp


autre gestion d'vnement cit plus loin infra)

Q u e lques vnem 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


Evnement

Balises autorises

Evnement dclench lorsque...

Version

onBlur

LABEL,
SELECT,
BUTTON

onChange

INPUT, TEXTAREA

onClick

Presque
balises

toutes

les

onDbClick

Presque
balises

toutes

les L'utilisateur double-clique sur un


4.0
lment

onError

Presque
balises

toutes

les

onFocus

LABEL,
SELECT,
BUTTON

INPUT,
Un lment est slectionn avec le
TEXTAREA,
3.0
clavier

onKeyDown

Presque
balises

toutes

les L'utilisateur appuie sur une touche


4.0
sur un lment

onKeyPress

Presque
balises

toutes

les L'utilisateur appuie, puis relche une


4.0
touche

onKeyUp

Presque
balises

toutes

les L'utilisateur relche une touche sur


4.0
une vnement

onLoad

BODY, FRAMESET

onMouseDown

Presque
balises

toutes

les L'utilisateur appuie sur le bouton de


4.0
la souris

onMouseMove

Presque
balises

toutes

les L'utilisateur dplace la souris sur un


4.0
lment

onMouseOut

Presque
balises

toutes

les L'utilisateur fait ressortir la souris


4.0
d'un lment

onMouseOver

Presque
balises

toutes

les L'utilisateur place la souris sur un


4.0
lment

onMouseUp

Presque
balises

toutes

les L'utilisateur relache le bouton de la


4.0
souris

onReset

FORM
JavaScript

INPUT,
Un lment n'est plus slectionn
TEXTAREA,
3.0
avec le clavier
Un lment est dslectionn et a
4.0
t modifi
L'utilisateur clique sur un lment

Un lment n'a pas t charg

Le navigateur a ouvert la page

Un formulaire est rinitialis


Cabar MichelCours v.2

Page 50

4.0

3.0

3.0

3.0

onSelect

INPUT, TEXTAREA

L'utilisateur slectionne 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 vnement 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 vnement dans la commande suivante:

Image <IMG>

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

Sur sortie d u focus (onBlur)


Cet vnement se produit lorsque l'utilisateur sort d'une bote de dialogue en
appuyant sur la touche TAB du clavier ou en utilisant la souris. La fonction appele
peut servir valider les informations entres.
L'on peut retrouver cet vnement dans les commandes suivantes:

Bote liste <SELECT>

Bote liste droulante <SELECT>

Bote texte <INPUT TYPE="text">

Bote Mot de passe <INPUT TYPE="password">

Bote texte multiligne <TEXTAREA>

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

Sur changem ent (onC h a n g e )


Cet vnement se produit lorsque l'utilisateur modifie la valeur d'une d'une bote
texte.
L'on peut retrouver cet vnement dans les commandes suivantes:

Bote liste <SELECT>

Bote liste droulante <SELECT>

Bote texte <INPUT TYPE="text">

Bote Mot de passe <INPUT TYPE="password">

Bote texte multiligne <TEXTAREA>

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

Cabar MichelCours v.2

Page 51

Sur clic Souris (onC lick)


Cet vnement 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 vnement dans les commandes suivantes:

Le bouton formulaire <INPUT TYPE="button">

Le bouton recommencer <INPUT TYPE="reset">

Le bouton soumettre <INPUT TYPE="submit">

La bote de marquage <INPUT TYPE="checkbox">

La bote de slection <INPUT TYPE="radio">

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

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

Sur erreur (onError)


Cet vnement se produit o
l rsqu'il y a une erreur au cours du chargement d'une
image.
L'on peut retrouver cet vnement dans la commande suivante:

Image <IMG>

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

Sur focus (onFocus)


Cet vnement se produit lorsque l'utilisateur appuie sur une bote de dialogue avec
la souris ou la touche TAB du clavier.
L'on peut retrouver cet vnement dans les commandes suivantes:

Bote liste <SELECT>

Bote liste droulante <SELECT>

Bote texte <INPUT TYPE="text">

Bote Mot de passe <INPUT TYPE="password">

Bote texte multiligne <TEXTAREA>

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

JavaScript

Cabar MichelCours v.2

Page 52

Sur chargem ent (onLoad)


Cet vnement 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 vnement 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 vnement se produit chaque fois que l'utilisateur place la souris en dehors
dune zone hypertexte.
L'on peut retrouver cet vnement dans les commandes suivantes:

Limage en coordonnes <AREA>

Lien externe <A HREF="..">

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

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

Sur souris au-dessus (onM ouseO ver)


Cet vnement 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 vnement dans les commandes suivantes:

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

Limage en coordonnes <AREA>

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

JavaScript

Cabar MichelCours v.2

Page 53

Sur recom m encem ent (onR e s e t)


Cet vnement se produit lorsque l'utilisateur reset un formulaire.
L'on peut retrouver cet vnement dans la commande suivante:

La commande Formulaire <FORM>

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

Sur slection (onSelect)


Cet vnement se produit lorsque l'utilisateur slectionne la valeur d'une bote texte
ou d'une bote texte multiligne.
L'on peut retrouver cet vnement dans les commandes suivantes:

Bote texte <INPUT TYPE="text"> ou <INPUT TYPE="password">

Bote texte multiligne <TEXTAREA>

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

Sur envoi (o n S u b m it)


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

La commande Formulaire <FORM>

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

Sur dchargem ent (onU n lo a d )


Cet vnement se produit lorsque l'utilisateur sort d'une page HTML .
L'on peut retrouver cet vnement dans les commandes suivantes:

Le corps du document <BODY>

Les cadres <FRAMESET>

Exemple:
<BODY onUnload="nomFonction">

T.P: Gestion

d'vnement sur liens

T.P: Gestion

d'vnement sur champs

T.P: Confirmer

un lien hyper-texte
JavaScript

Cabar MichelCours v.2

Page 54

JavaScript

Cabar MichelCours v.2

Page 55

N O T IO N S D E P .O .O .

O b je ts M th o d e s - P roprits:
O b jet - C lasse:
Pour illustrer le concept d'objet, avec ses proprits et ses mthodes, 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 portire... On parle aussi de classe

M thode :
On peut dfinir les actions possibles avec cet objet, grce cette fois-ci, non pas des
adjectifs, mais des verbes. C'est ce que l'on appelle des mthodes. Ainsi avec une
voiture, on peut dmarrer, acclrer, freiner, tourner... L'ensemble des mthodes
d'un objet reprsente toutes les actions que l'on peut effectuer avec cet objet.
On ne peut faire qu'une seule chose avec une mthode, c'est l'appliquer sur l'objet
souhait. Cependant les mthodes possdent souvent des paramtres (arguments)
qui prcisent la faon dont on veut que la mthode s'applique. Ainsi la mthode
Freiner applicable l'objet voiture pourrait se paramtrer par doucement, sec, pile...

P roprit :
Pour dcrire un objet on utilise des adjectifs qui le caractrisent, ce sont les
proprits de cet objet : couleur, anne, marque, nombre de sige... L'ensemble des
proprits d'un objet reprsentent 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 proprits sont en lecture seule, c'est dire non modifiables,
par exemple l'anne de construction de notre voiture.

P rogram m ation vnem entielle :


Un vnement est une action qui peut tre dtecte sur un objet, comme un clic
souris, ou la frappe d'une touche. l'ide en gnral consiste vouloir crire un code

JavaScript

Cabar MichelCours v.2

Page 56

spcifique javascript en rponse cet vnement. On parle alors de programmation


vnementielle

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

Objet VOITURE
(conteneur de moteur, sige)
Proprits de l'objet VOITURE :

nom

type

Couleur

Lect/crit

Anne

Lecture seule

Marque

Lecture seule

Nb siges

Lect/crit

Vitesse

Lect/crit

nom

paramtres

Dmarrer

Vite, lent,norm

Acclrer

Vite, maxi

Freiner

Sec, Doux,pile

Tourner

gauche,Droite

Mthodes de l'objet VOITURE :

nom

renvoit type

(Particulires)

Siges

Siges (coll)

Mthodes de l'objet VOITURE :

Sige (obj)
Moteur

Moteur (obj)

nom

type

Puissance

Lecture seule

Nb cylind

Lecture seule

Vidange

Lect/crit

Objet MOTEUR
(conteneur de )
Proprits de l'objet MOTEUR :

Pour rcuprer la date de vidange, il faudrait crire :


Date = Voiture.Moteur.Vidange

JavaScript

Cabar MichelCours v.2

Page 57

Pour modifier la date de vidange , il faudrait crire :


Voiture.Moteur.Vidange = 01/04/96

JavaScript

Cabar MichelCours v.2

Page 58

M o d le objet w in d o w N e tscape :

JavaScript

Cabar MichelCours v.2

Page 59

M o d le objet w in d o w E x p lorer :

JavaScript

Cabar MichelCours v.2

Page 60

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 intgrs (ou classes) pour travailler avec les
lments d'une page HTML, qui s'enrichissent au fur et mesure que les versions
voluent., il existe des constructeurs qui permettent de crer 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 crer un lment

Trois versions principales rfrences 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 "rcentes" sont :

1.3 : n'apportant aucune amlioration de "base" utilisable


facilement

1.4 : actuellement implmente dans aucun navigateur

les classes intgres dans les 3 premires versions de base, fournissant donc des
mthodes et des proprits permettant de travailler avec ces objets sont les
suivantes
Version 1.0

Version 1.1

Version 1.2

Voyons les principaux objets


JavaScript

Cabar MichelCours v.2

Page 61

D a te
Cet objet permet de travailler avec des dates alors que le type date n'existe pas
pour les variables.
Ses proprits sont les suivantes
Version 1.0

Version 1.1 & 1.2

Les mthodes applicables l'objet Date sont les suivantes


Version 1.0 & 1.1 & 1.2

Aucun vnement n'est applicable l'objet Date

E x e m p le
Pour crer 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 mthodes qu'il
possde
imaginons vouloir afficher deux boutons permettant d'afficher respectivement
l'anne, 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 mthodes utiliser sont

getYear(), getDate() et getMonth()

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


JavaScript

Cabar MichelCours v.2

Page 62

voilde quoi aurait l'air l'criture des deux boutons avec leur gestion d'vnement
<form>
<input type=button value="vous voulez savoir l'anne ?" onclick="an()"> <br>
<input type=button value="vous voulez savoir le jour et le mois ?"
onclick="jourmois()">
</form>

Cette mthode retourne


lanne

pour

spcifie.

une
La

retourne

est

date
valeur

lanne

le script javascript, plac en dbut de page, doit contenir une cration


d'objet de type Date, puis une application des mthodes ncessaires

function an(){
var datage = new Date()
alert("anne 19"+ datage.getYear())

moins 1900 (mais 2000 sous


IE...)

Cette mthode retourne


le jour du mois pour une
date spcifie. La valeur
retourne

est

un

entier

entre 1 et 31

function jourmois(){
var datage = new Date()
alert("le "+ datage.getDate() + "du mois" +
(datage.getMonth()+1) )
}//-->

Cette mthode retourne


le

mois pour une date

spcifie.
retourne

La
est

un

valeur
entier

ainsi pour obtenir un "mois" plus lisible, il faut lui ajouter 1, (la valeur) ce

entre 0 et 11, o zro

qui s'obtient en additionnant +1

reprsente janvier et 11

(datage.getMonth()+1)

reprsente dcembre.
N.B: Si on oubliais les parenthses, on concatnerait avec 1 convertit
en chane car d'autres chanes apparaissent dans l'expression
alert("le "+ datage.getDate() + "du mois" + datage.getMonth()+1 )

T.P: Calcul

dure chargement de page

JavaScript

Cabar MichelCours v.2

Page 63

M a th
Cet objet permet de manipuler des constantes et des fonctions mathmatiques.
Ses proprits sont les suivantes
Version 1.0 & 1.1 & 1.2

Les mthodes applicables l'objet Math sont les suivantes


Version 1.0 & 1.1 & 1.2

Aucun vnement n'est applicables l'objet Math

E x e m p le
On n'a pas besoin de crer de variables pour manipuler un objet de type Math, on
dit que la classe est djinstancie
On peut utiliser les proprits (en lecture) de l'objet pour les constantes, ou utiliser les
mthodes qu'il possde pour effectuer des calculs
imaginons vouloir afficher deux boutons permettant d'afficher respectivement Pi, et
un nombre alatoire en cliquant dessus

on crira respectivement une fonction

pi() et alea() permettant d'effectuer ces

calculs partir d'un objet Math


la proprit utiliser est

Pi, la mthode est random()


JavaScript

Cabar MichelCours v.2

Page 64

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


voilde quoi aurait l'air l'criture des deux boutons avec leur gestion d'vnement
<BODY>
<form>
<input type=button value="valeur de Pi ?" onclick="pi()"> <br>
<input type=button value="valeur alatoire entre 0 et 1 ?" onclick="alea()">
</form>
</BODY>

le script javascript, plac en dbut de page, peut directement utiliser une proprit
ou une des mthodes ncessaires

Cette proprit reprsente


le

rapport

de

la

circonfrence d'un cercle

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

sur son diamtre, environ


3.14159. Utilise en lecture

function pi(){

seulement.

alert("Pi vaut "+ Math.PI)


}

Cette
mathmatique
un

nombre

mthode
retourne
choisi

hasard entre 0 et 1.

au

function alea(){
alert("au hasard "+ Math.random())
}//-->
</script>

JavaScript

Cabar MichelCours v.2

Page 65

strin g
Cet objet permet de travailler avec des chanes de texte et de les manipuler,

Sses proprits sont les suivantes


Version 1.0

Version 1.1 & 1.2

Les mthodes applicable l'objet string sont les suivantes


Version 1.0 & 1.1

Version 1.2

Aucun vnement n'est applicables l'objet String

E x e m p le
Pour crer un objet de type String il faut crire :
var nom_objet = new String('xxxxx')
Une criture du style suivant est tolre :
var nom_objet = 'xxxxx'

Une fois un objet string construit, on peut utiliser sa proprit ou ses nombreuses
mthodes qu'il possde. La manipulation des chanes, ncessite souvent de
connatre la notion de tableau, de rcuprer des valeurs saisies dans un boite de
dialogue et est assez particulire
JavaScript

Cabar MichelCours v.2

Page 66

n a v ig a to r
Cet objet permet de travailler avec les caractristiques du browser.
Ses proprits sont les suivantes
Version 1.0

Version 1.1

Version 1.2

Aucune mthode ne s'applique l'objet navigator

Aucun vnement n'est applicables l'objet navigator

E x e m p le
On n'a pas besoin de crer de variables pour manipuler un objet de type navigator,
on dit que la classe est djinstancie
On peut utiliser les proprits (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 proprits utiliser sont

appName et appVersion

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

JavaScript

Cabar MichelCours v.2

Page 67

voilde quoi aurait l'air l'criture des deux boutons avec leur gestion d'vnement
<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 dbut de page, peut directement utiliser les mthodes
ncessaires

Cette proprit spcifie le


nom

du

Utiliser

navigateur.
en

lecture

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

seulement.
function nom(){
alert("Navigateur "+ navigator.appName)
}

Cette proprit spcifie la


version

du

Utiliser
seulement.

en

navigateur.
lecture

function ver(){
alert("version "+ navigator.appVersion)
}//-->
</script>

T.P: Dtecter

le type de navigateur

JavaScript

Cabar MichelCours v.2

Page 68

W in d o w
Permet de travailler sur la fentre du navigateur, par fentre dans un navigateur, on
entends au sens large du terme, c'est dire pour toute fentre (frame) l'cran.
Il possde des proprits qui sont numres 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 dtaills plus loin dans le
chapitre "objet dans window" page 75

N.B: certaines proprits

Version 1.0 & 1.1

Version 1.2

particulires
permettent
d'atteindre

d'autres

objets faisant partie


de

la

classe

Windows,

et

notamment

les

objets:

document

frame

history

location

puis

locationbar,

menubar

Les mthodes applicable l'objet window sont les suivantes


Version 1.0

Version 1.1

JavaScript

Cabar MichelCours v.2

Version 1.2

Page 69

Les vnements applicables l'objet window sont les suivants


Version 1.0

Version 1.1

vnements "spciaux"
onBeforeUnload

Version 1.2

dclench lorsque:

standard

l'utilisateur est sur le point de quitter


un

document:

l'vnement

IE

est

dclench juste avant l'vnement


onUnload.
onDragDrop

une opration de glisser/dposer est

effectue sur la fentre.


onMove

la fentre est dplace.

onReadyStateChange

quivalent onLoad.

IE

onScroll

le document est dfil

IE

En rsum, Les vnements frquemment applicables l'objet window sont les


suivants

onLoad :

le chargement de la fentre est fini

onUnload :

l'utilisateur quitte une fentre

onFocus :

la fentre reoit le focus

onBlur :

la fentre perd le focus

Lorsqu'une fentre est active par un cliq souris ou par la touche


"tab", on dit alors qu'elle reoit le focus. l'inverse, une fentre
possdant le focus le perdra lorsqu'une autre fentre deviendra
active.
Ainsi, l'vnement onFocus est dclench lorsque qu'une fentre
est active pendant que l'vnement onBlur s'excute quand la
fentre active perd le focus au profit de l'autre. Il faut noter
qu'une fentre qui possde le focus par dfaut, sans intervention
de l'utilisation ne dclenche pas l'excution de l'vnement
onFocus.

onError:

Lorsque une erreur survient

L'vnement onError est dclench lorsqu'une erreur se produit


dans l'excution du code JavaScript de la page. On peut alors
remplacer la fentre de dialogue qui s'affiche par dfaut et
fournir ainsi des indications beaucoup plus prcises l'utilisateur.

JavaScript

Cabar MichelCours v.2

Page 70

O u d finir les vnem ents


Tous les vnements dcrits plus haut peuvent tout simplement tre dfinis dans le
marqueur BODYdu document HTML comme ceci:
<BODY vnement=fonction JavaScript>
Par exemple, voici comment dfinir l'vnement onLoad:
<BODY onLoad="chargementDocument()">

E x e m p le
On n'a pas besoin de crer de variables pour manipuler un objet de type Window,
car comme pour l'objet Math javascript instancie automatiquement un objet
Windows pour chaque fentre du navigateur ouverte, et dans le cas de frames, un
objet pour chaque frame
Chaque objet Windows ainsi cre "possde" 3 "sous-objets :
l'objet history : reprsentant l'ensemble des URL djvisites, au travers
de la proprit homonyme history
l'objet location : reprsentant les caractristiques de l'URL au travers de
la proprit homonyme location
l'objet document : reprsentant les caractristiques du document HTML
affich et contenant lui mme une multitude d'objets
Comme il s'agit ici de prsenter 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 manires de faire rfrence un objet Windows, mais la plus


classique reste
nomme

window.name="essai"

la

fentre "essai"

imaginons vouloir faire deux choses :


1.

afficher un bouton permettant d'afficher le nom de la fentre.

2.

faire apparatre, et ce ds le chargement de la page, dans la barre d'tat le


libell par dfaut "super, a marche"

JavaScript

Cabar MichelCours v.2

Page 71

on crira respectivement une fonction

nom() et gerestatus() permettant

respectivement de nommer la fentre (et de l'afficher via alert) et de donner un


status par dfaut ds l'ouverture de la page HTML

les proprits utiliser sont

name et status

name Proprit des objets Anchor, Button, Checkbox, FileUpload, Form,


Hidden, Image, Layer, Password, Plugin, Radio, Reset, Select, Submit, Text,
Textarea et window
Syntaxe: RfFentre.name et/ou RfFentre.frames.name est une faon valide de
faire rfrence une fentre, tel que dcrit dans l'objet window

status Proprit de l'objet window. Cette proprit spcifie un message dans la


barre dtat, tel que l'adresse URL, lorsque lutilisateur passe le pointeur de la
souris sur un hyperlien.
Syntaxe: rfFentre.status

l'vnement utiliser pour la fonction gerestatus() est

la fonction gerestatus()
est

dfinie

avant

l'appel

L'on peut retrouver cet


vnement

dans

les

onLoad

<HTML>
<TITLE></TITLE>
<script LANGUAGE="JavaScript">
<!-function nom(){
window.name="essai"
alert("cette fentre s'appelle "+ window.name)
}
function gerestatus(){
window.status="super, a marche"
}
//-->
</script>

commandes suivantes:
<BODY onLoad="gerestatus()">

Corps <BODY>
Cadres <FRAMESET>

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

la solution se trouve en COURSJS18.HTML


JavaScript

Cabar MichelCours v.2

Page 72

T.P: Gestion de Status


T.P: Afficher un rsultat dans le status

JavaScript

Cabar MichelCours v.2

Page 73

screen ( partir d e la versio n 1 .2 )


Cet objet donne des proprits permettant de travailler avec les caractristiques du
moniteur vido du lecteur
ses proprits sont les suivantes
Version 1.2

Aucune mthode ne s'applique l'objet screen

Aucun vnement n'est applicables l'objet screen

E x e m p le
On n'a pas besoin de crer de variables pour manipuler un objet de type screen, car
comme pour l'objet Math javascript instancie automatiquement un objet screen
lors du premier dmarrage du navigateur
Il s'agit d'un objet simple dont on lira les proprits pour en tirer un certain nombre
de renseignements sur le moniteur du "lecteur"

T.P: Dtecter

la rsolution d'cran

JavaScript

Cabar MichelCours v.2

Page 74

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 trs complexes, on appelle cela un conteneur
les objets contenus dans la classe window dpendent 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.01.1, soit les 4 objets principaux.

document,

frame

history

location

JavaScript

Cabar MichelCours v.2

Page 75

docum ent
Cet objet permet de travailler avec la page HTML (formulaires, ancres)
Il possde des proprits qui sont numres ci-dessous, mais contient galement
des objets. principalement on notera les 4 objets anchor, array, form, link, qui sont
dtaills plus loin dans le chapitre "objet dans document" (page 97)
Version 1.0

Version 1.1

Version 1.2

Les mthodes applicables l'objet document sont les suivantes


Version 1.0 & 1.1

Version 1.2

Les vnements applicables l'objet document sont les suivants


Version 1.0 & 1.1

JavaScript

Version 1.2

Cabar MichelCours v.2

Page 76

E x e m p le d o c u m e n t.b g C o lor :
La proprit bgColor permet de modifier la couleur de fond de l'objet document
elle est trs 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 crer facilement des boutons pour chaque couleur, qui appellerons
la fonction avec le bon argument sur l'vnement clic souris...

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

donnant

essayer de coder cet exercice, la rponse se trouvant dans le fichier COURJS23.HTML

JavaScript

Cabar MichelCours v.2

Page 77

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 manire
pouvoir les rcuprer lors de la prochaine visite et donc permettent de "faire le lien"
entre deux sessions par un mme client sur un site Web (connexion indpendantes et
anonyme du point de vue protocole http). Il faut bien se rappeler que les cookies
sont stocks sur l'ordinateur qui charg la page HTML et non pas sur le serveur sur
lequel ces pages sont hberges.
Les cookies sont de fichiers textes nomms automatiquement partir du nom donn
par l'utilisateur lors de son ouverture de session et des caractre supplmentaires.(
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
scurit en effet l'emplacement des cookies et dfini par dfaut, prcisment par
chaque navigateur (voir plus loin tableau rcapitulatif)
De plus il s'agit de fichiers texte, absolument inoffensif donc pour la scurit du client
qui les accueille, et visualisables par un simple diteur de texte
si le contenu en texte d'un cookie est libre, en gnral l'exception des caractres ,
(virgule) ; (point virgule) et espace, qui sont interdits. La virgule en ce qui nous
concerne jouera le rle de sparateur, il existe quand mme une "normalisation"
pour certains champs
name=value : permet de "nommer" notre cookie de manire le
N.B:

Un

Cookie

comportant
des

champs

name et path
identique
peut
archiv
un

ne
tre
qu'en
seul

exemplaire !

retrouver parmi le autres ventuellement de l'objet


cookie disponible en javascript
path=chemin : L'URL laquelle s'applique le cookie, par dfaut il s'agit du
dossier en cours, ce qui fait que pour toutes les pages
d'un mme dossier, tous les cookies ventuels sont mis
dans le mme fichier texte, les uns la suite des autres. Il
sera donc probablement ncessaire soit de "parcourir" un
cookie du dbut la fin la recherche de toutes les
informations, soit de rechercher notre information dans
le cookie (caractrise par notre "nom")
expires=date : si ce champs n'est pas prcis, le cookie est effac la
fermeture du navigateur et La date doit tre convertie
en utilisant l'heure de Greenwich grce la mthode
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
prsent sur le disque du client), son contenu sera automatiquement mis dans cet
objet. Ce qui fait que cet objet est donc une chane de caractre , pouvant tre
assez longue, contenant tous les cookies que l'utilisateur rcolt sur cette page
Pour utiliser les cookies, vous devez avoir 2 fonctions au minimum :
une fonction qui cre le cookie

JavaScript

Cabar MichelCours v.2

Page 78

une fonction qui lit le contenu de l'objet cookie

C ration 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()

fichier
COURJS25.HTML

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

ainsi que la fonction cre() qui l'appelle aprs avoir demand l'utilisateur de donner
un contenu au cookie (valeur), en nommant le cookie "nom" et en lui donnant une
dure 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 MichelCours v.2

Page 79

nom de session@url

une visualisation du cookie permet de vrifier l'exactitude de l'info en ce qui


concerne le nom et la valeur stocke

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


structures de la mme manire dans le fichier cookie( condition d'avoir chang
au pralable 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 vrifie si il y a un cookie
if (document.cookie.length > 0){
debut = document.cookie.indexOf(nom + "=");
//on vrifie si la valeur qu'on recherche est dans le cookie
if (debut != -1) //!= veut dire diffrent
{
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 trouve...
}

ainsi que la fonction lit() qui l'appelle aprs avoir demand l'utilisateur de donner
le nom du cookie que l'on souhaite lire(ici toujours "nom"....)

JavaScript

Cabar MichelCours v.2

Page 80

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 trler les C o o k ies


Pour un utilisateur du Web, il est possible de contrler les cookies mis depuis les sites
vers son navigateur (et donc son poste) de la manire suivante :
Microsoft Internet Explorer 3.x :
Affichage / options avances et cliquer sur la case "avertir avant
d'accepter les cookies"

Microsoft Internet Explorer 4.x :


Affichage / options internet cliquer sur le bouton "avances"
rechercher l'icne reprsentant un point d'exclamation jaune sous
le libll "securit" et slectionner l'une des options pour les cookies

Microsoft Internet Explorer 5.x :


Outils / options internet cliquer sur l'onglet "scurite" choisir ou
crer un nom de site et demander "personnaliser le niveau" et
slectionner

l'une

des

pour

options

les cookies

JavaScript

Cabar MichelCours v.2

Page 81

Netscape Communicator 3.x :


Option / Prfrence Rseau et dans l'onglet "protocole" cocher
ventuellement la case "avertir avant d'accepter un cookie"
Netscape Communicator 4.x :
Edition
Prfrences

/
et

cliquer

la

sur

case "avances"
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 grer les cookies, une fois que ceux-ci
sont sur sa machine. (essentiellement les supprimer)
leur localisation dpends videmment du navigateur , Internet explorer ou Netscape
et du systme 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 dfaut 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 dfaut X:\Winnt il existe un dossier
pour chaque utilisateur nomm \NomUtil. A
l'intrieur 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 installes 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

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 MichelCours v.2

Page 82

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:\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 manire pouvoir mmoriser partir
de cette page, un nom de famille, chaque prnom donn lors de la saisie du
cookie...
Concrtement au lieu de donner toujours le nom "nom" au cookie, on va crer un
cookie qui contiendra plusieurs zones, que l'on nommera du prnom du visiteur, et
pour lesquelles la valeur saisie sera le nom
exemple :

nom dans le cookie : "michel", valeur associe "cabar".


nom dans le cookie : "laurent", valeur associe "lallias".

fichier
COURJS25B.HTML

De manire ce que ensuite lorsque l'on demande de lire le cookie

on obtienne
T.P: mmorisation

d'un nom (cookie)

T.P: compteur de visites (cookie)


JavaScript

Cabar MichelCours v.2

Page 83

fram e
Cet objet donne des informations sur chaque cadre composant un affichage base
de frames.
Version 1.0 & 1.1 & 1.2

Les mthodes applicables l'objet frame sont les suivantes


Version 1.0 & 1.1

Version 1.2

Les vnements 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 mme que celui de l'attribut Name
spcifi dans la balise <FRAME> de la page HTML.
Dans le cas d'un cadre,

Window et Self font rfrence ce cadre courant (alors que d'habitude il


font rfrence la fentre courante) alors que le mot cl

Parent fait rfrence la fentre principale. Chaque objet Frame est une
objet enfant de l'objet Parent

Top fait rfrence la fentre parente de niveau le plus lev

lenght est une proprit donnant le nombre de frame dans l'objet

JavaScript

Cabar MichelCours v.2

Page 84

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 rfrence aux autres cadres


de plusieurs manires possibles :

par le mot rserv parent :


parent.hautdroite

concerne Coursjs28_2.html

parent.basgauche

concerne Coursjs28_3.html

parent.basdroite

concerne Coursjs28_4.html

par le mot rserv window ou self:


window
self

concerne Coursjs28_1.html (courant)

concerne Coursjs28_1.html (courant)

par le tableau frames[x]:


dans lequel 0 dsigne la premire 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 MichelCours v.2

Page 85

parent.frames[3]

concerne Coursjs28_4.html

Si dans chaque page on incorpore un bouton sur lequel lorsque l'on clique on
excute 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;

insr dans la page appel par un site, il permet de supprimer les frames de ce site

JavaScript

Cabar MichelCours v.2

Page 86

h istory
Cet objet donne des informations sur l'historique des URL qui ont ts parcourues par
le navigateur
Version 1.0 & 1.1 & 1.2

Les mthodes applicables l'objet history sont les suivantes


Version 1.0 & 1.1 & 1.2

Aucun vnement n'est applicables l'objet history

E x e m p le
On n'a pas besoin de crer de variables pour manipuler un objet de type History, car
comme pour l'objet Math javascript instancie automatiquement un objet History lors
du premier dmarrage du navigateur
Il s'agit d'un objet simple dont on utilisera les mthodes pour charger une des URL
djparcourue par le navigateur
rappel : pour
tester

une

petite ligne de
javascript

on

peut la taper
directement
depuis
navigateur,
la

charge l'URL prcdente de l'historique (fonction identique au bouton


prcdent d'un navigateur)

Alors que l'criture


history.forward();

de

mention

javascript:

history.back();

la

fentre URL du
prcde

Ainsi l'criture

charge l'URL suivante de l'historique (fonction identique au bouton suivant


d'un navigateur)

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

Cabar MichelCours v.2

Page 87

E x e m p le h istory.back / forw ard :


faites un fichiers dans lequel on fait apparatre deux boutons aux fonctionnalits
identiques celles des deux boutons prcdent-suivant d'un navigateur

la

solution

est

en
coursjs29.html

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

JavaScript

Cabar MichelCours v.2

Page 88

lo c a tio n
Cet objet donne des informations sur l'URL en cours
Version 1.0 & 1.1 & 1.2

Deux mthodes sont applicables l'objet location

reload() qui recharge le document en cours

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


Cette mthode remplace lURL du document courant dans
lhistorique du navigateur par lURL fournie en argument. Aprs
l'utilisation de la mthode replace, l'utilisateur ne peut revenir
l'URL prcdent via le bouton PRCDENT (BACK) du navigateur

Aucun vnement n'est applicables l'objet location

E x e m p le
On n'a pas besoin de crer de variables pour manipuler un objet de type Location,
car comme pour l'objet Math javascript instancie automatiquement un objet
location lors du premier dmarrage du navigateur
Il s'agit d'un objet simple dont on lira les proprits pour en tirer un certain nombre
de renseignements sur l'Url du document affich l'cran
rappel

pour

tester une petite


ligne

de

javascript

on

peut

la

taper

directement

alert(location.pathname);
renvoi le chemin du fichier actuellement affich
Par exemple rajoutez l'criture suivante
alert(" pathname =" + parent.frames[cpt].location.pathname);

depuis la fentre
URL

Ainsi l'criture

du

navigateur,

dans les fichiers Coursjs28_1.html, Coursjs28_2.html, Coursjs28_3.html,


Coursjs28_4...

prcde de la
mention
javascript:

alors que l'criture


alert(location.href);
renvoi l'URL du du fichier actuellement affich
JavaScript

Cabar MichelCours v.2

Page 89

E x e m p le lo c a tio n .replace :
on peut galement par le biais de la mthode Replace() changer l'URL courante, et
proposer ainsi un changement de page la vole

On souhaite automatiquement faire en sorte que le visiteur soit dirig vers une page
donne selon la rsolution de son navigateur

on ira sur la page courjs30a.html si la rsolution est <= 640x480


on ira sur la page courjs30b.html si la rsolution est >= 800x640

la solution en courjs30.html a peu prs 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 approprie
<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 explorerIl faut dvalider le gestionnaire par dfaut via
"return false"
T.P: saisie

d'une URL

T.P: Cration

d'une bannire de navigation


JavaScript

Cabar MichelCours v.2

Page 90

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 apparatre des fentres et


communiquer avec l'utilisateur. La mthode open() par exemple permet de crer
une nouvelle fentre de navigateur

L a m th o d e o p e n
La mthode open() permet d'ouvrir une nouvelle fentre de navigateur dans laquelle
peut tre charg ou gnr un document HTML. L'apparence de la nouvelle fentre
peut tre personnalise de faon faire afficher ou non certaines caractristiques,
telles que la barre d'outils, la barre de localisation, etc
On se sert de la mthode open pour crer une nouvelle fentre de navigateur
comportant ses propres caractristiques.
Tous les paramtres sont optionnels. Ainsi dans COURSJS19.HTM
open ();
fonctionne, mais celle-ci galement
open ("","fenetre","");
ou encore celle-ci
f = open ("","fenetre","");

Paramtres de la mthode open:


[objet window] = window.open ( [url] [,nom] [,caractristiques])

Paramtre

Description

URL

adresse du document qui doit tre charg dans la


nouvelle fentre

Nom

Il faut utiliser cette variable lorsque lon fait rfrence


aux proprits, mthodes et contenu dune fentre.
(exemple cible (TARGET) pour d'autres documents
HTML.)

Caractristiques

liste d'options de la fentre (barre outils, grandeur )


Si plusieurs options sont dfinies, elles doivent tre
spares par des virgules non suivies despace

JavaScript

Cabar MichelCours v.2

Page 91

caractristiques :
l'aide de la liste des proprits, on peut personnaliser l'apparence d'une fentre
cr:
Proprits
directories

Valeurs
possibles

valeur par
dfaut

Description

yes, no

no

barre des rpertoires fournissant des liens vers


divers sites Web

heigth

nombre en

Spcifie la hauteur de la fentre en pixels

pixels
left

nombre en

distance entre la bordure gauche de la

pixels
location

fentre et le dbut de l'cran

yes,no

no

ajoute un champ de saisie permettant


dindiquer lURL ou le chemin daccs local
dune page Web consulter. En fait, la barre
dadresses

menubar

yes,no

no

ajoute une barre des menus dans le haut de


la fentre

resizable

yes,no

no

cette

option

permet

lutilisateur

de

redimensionner la fentre.
scrollbars

yes,no

no

ajoute des barres de dfilement horizontale


et verticale lorsque le contenu dborde des
dimensions de la fentre.

status

yes,no

no

ajoute la barre dtat au bas de la fentre

toolbar

yes,no

no

ajoute la barre doutils standard la fentre


du navigateur

top

nombre en
pixels

width

distance entre la bordure suprieure de la


fentre et l'cran

nombre en

Spcifie la largeur de la fentre en pixels

pixels

Plus quelques ajouts rcents :


alwaysLowered Si la valeur spcifie est yes, cette option cre une nouvelle
fentre flottante qui sera affiche derrire toutes les autres fentres
du navigateur, quelles soient actives ou non. Il sagit ici dune
option spciale qui doit tre utilise dans un script sign.
(JavaScript 1.2)
alwaysRaised

Si la valeur spcifie est yes, cette option cre une nouvelle


fentre flottante qui sera affiche devant toutes les autres fentres
du navigateur, quelles soient actives ou non. Il sagit ici dune
option spciale qui doit tre utilise dans un script sign.
(JavaScript 1.2)
JavaScript

Cabar MichelCours v.2

Page 92

dependent

Si la valeur spcifie est yes, cette option cre une fentre enfant
de la fentre courante. Une fentre enfant ferme lorsque sa fentre
parent est ferme. (JavaScript 1.2)
Si la valeur spcifie est no (ou 0), cette option dsactive la

hotkeys

plupart des touches de raccourcis pour les fentres nayant pas de


barre de menus. Les touches de scurit et de fermeture de
lapplication demeurent toutefois disponibles. (JavaScript 1.2)
innerHeight

Spcifie la hauteur de la zone de contenu de la fentre en pixels.


Pour crer une fentre plus petite que 100 x 100 pixels, le script doit
tre sign. Remplace loption Height, cette dernire faisant
toujours partie de la norme pour compatibilit. (JavaScript 1.2)

innerWidth

Spcifie la largeur de la zone de contenu de la fentre en pixels.


Pour crer une fentre plus petite que 100 x 100 pixels, le script doit
tre sign. Remplace loption Width, cette dernire faisant toujours
partie de la norme des fins de compatibilit. (JavaScript 1.2)

outerHeight

Spcifie la dimension verticale extrieure de la fentre en pixels.


Pour crer une fentre plus petite que 100 x 100 pixels, le script doit
tre sign. (JavaScript 1.2)

personalbar

Si la valeur spcifie est yes, cette option ajoute la barre doutils


personnelle affichant les boutons du dossier de signets personnels
de lutilisateur. (JavaScript 1.2)

screenX

Spcifie la position de la fentre partir de la gauche de lcran.


Pour placer une fentre hors des limites de lcran, le script doit
tre sign. (JavaScript 1.2)

screenY

Spcifie la position de la fentre partir du haut de lcran. Pour


placer une fentre hors des limites de lcran, le script doit tre
sign. (JavaScript 1.2)

titlebar

Si la valeur spcifie est yes, cette option cre une fentre dote
dune barre de titre. Pour dfinir une fentre sans barre de titre
(no), le script doit tre sign. (JavaScript 1.2)

z-lock

(JavaScript 1.2) Si la valeur spcifie est yes, cette option cre une
nouvelle fentre ne pouvant passer devant les autres fentres du
navigateurs mme lorsquelle est active. Le script doit tre sign
pour utiliser cette option. (JavaScript 1.2)

Par exemple on provoquera l'affichage d'une nouvelle fentre avec les proprits
spcifies 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 paramtres sont activables true avec une valeur de 1 ou yes et false avec
une valeur de 0 ou no

JavaScript

Cabar MichelCours v.2

Page 93

Ferm e r u n e fentre
La mthode close est utilise pour fermer une fentre; dans l'exemple,
f = open ("","fenetre","");
la fentre est reprsent par l'objet f. et f pourra tre ferme par
f.close();
La mthode close peut aussi s'appliquer l'objet window, ce qui provoque la
fermeture de la fentre courante:
window.close();
dans le fichier COURSJS20.HTM on cre un fentre puis on demande l'utilisateur s'il
souhaite la fermer ou non.

On

ouvre

ici

<script LANGUAGE="JavaScript">
<!-f=window.open("coursjs20b.htm","contenu","status=no,location=yes,toolbar=ye
s,directories=no,resizable=yes,width=600,height=400,top=100,left=100");
rep = confirm("voulez vous supprimer cette fentre ?")
if (rep == true)
f.close()
//-->
</script>

le

fichier
COURSJS20b.HTM

crire d a n s u n e fentre
Il est possible de gnrer le contenu d'une fentre ou d'un cadre l'aide de la
mthode write ou writeln.
On peut composer une page HTML entire et mme y ajouter du code
La mthode open(),
applique

document, doit tre


utilise

avant

de

pouvoir crire dans la


fentre.
La mthode
close()

JavaScript. voir fichier COURSJS21.HTM

l'objet

doit

employe
l'opration

tre
lorsque

f=window.open("","contenu","status=no,location=yes,toolbar=yes,directo
ries=no,resizable=yes,width=600,height=400,top=100,left=100");
f.document.open();
f.document.write ("<H1>Nouvelle fentre</H1>");
f.document.close();
rep = confirm("voulez vous supprimer cette fentre ?")
if (rep == true)
f.close()

d'criture

est termine.

T.P: Ouverture / Cration de fentre


T.P: Agrandir

une mini-image dans une fentre

JavaScript

Cabar MichelCours v.2

Page 94

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 mthode de l'objet window value une expression aprs quun dlai en
millisecondes soit expir. Elle peut tre annule via l'appel la mthode
clearTimeout().
Syntaxe
TimeoutID=window.setTimeout(expression, msec)
Avec
TimeoutID est un identificateur utilis seulement pour annuler lvaluation avec la
mthode clearTimeout().
expression est une chane de caractres ou une proprit dun objet existant.
msec est une valeur numrique en units millisecondes.

E x e m p le :
On

crer

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 prsence,

la

page

apparat

automatiquement
JavaScript

Cabar MichelCours v.2

Page 95

fichier

en

coursjs22.htm

dans

la

variable

delai on le moyen
d'annuler

la

temporisation

dans

le

cas

<script LANGUAGE="JavaScript">
<!-function accueil()
{
f = window.open("coursjs22b.htm","acc");
return true;
}
//-->
</script>

le fichier coursjs22b.htm
est la page qui doit tre
affiche

</HEAD>
<BODY onLoad="delai = window.setTimeout('accueil()',5000);">
cliquez sur le bouton pour continuer
<FORM METHOD=POST>
<INPUT TYPE=button VALUE="continuer"
onClick="window.clearTimeout(delai);accueil();">
</FORM>

l'utilisateur cliqu
</BODY>

JavaScript

Cabar MichelCours v.2

Page 96

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 trs important du fait qu'il contient d'autres objets
intressants et qu'il reprsente la totalit de la page HTML
les objets contenus dans la classe document dpendent 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 intressant apparus avec les nouvelles versions,
soit les objets image et area (version 1.1) et l'objet layers (version 1.2)

JavaScript

Cabar MichelCours v.2

Page 97

anchor
Cet objet permet de travailler avec les ancres de la page HTML
Version 1.0 & 1.1 & 1.2

Aucune mthode n'est applicables l'objet anchor


Aucun vnement 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 mthodes applicable l'objet array sont les suivantes


Version 1.0

Version 1.1

Version 1.2

Aucun vnement 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 MichelCours v.2

Page 98

Aucune mthode n'est applicables l'objet link


Les vnements 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 possde des proprits qui sont numres 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 dtaills plus loin dans le chapitre "objet dans form" (page 107)

Version 1.0

Version 1.1 & 1.2

JavaScript

Cabar MichelCours v.2

Page 99

Les mthodes applicable l'objet form sont les suivantes


Version 1.0 & 1.1

Version 1.2

Les vnements 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 mthode n'est applicables l'objet area

Les vnements applicables l'objet area sont les suivants


Version 1.0 & 1.1

JavaScript

Version 1.2

Cabar MichelCours v.2

Page 100

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 mthode n'est applicables l'objet image

Les vnements 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 intgre une version javascript 1.1
minimum, ce qui place la barre Explorer 3.x et Netscape 3.x minimum

On va utiliser la proprit src de l'objet image pour changer "a la vole" l'image
affiche dans une page HTML avec une syntaxe du type
nomimage.src ="new image.gif"

On va galement utiliser l' vnements onMouseOut, se produisant chaque fois que


le curseur de souris sort des limites de la surface d'un lien hypertexte ou encore d'une
rgion d'une image en coordonnes. et l'vnement onMouseOver qui se produit

JavaScript

Cabar MichelCours v.2

Page 101

chaque fois que le curseur de souris se trouve sur des limites de la surface d'un lien
hypertexte ou encore d'une rgion d'une image en coordonnes

Dans le fichier COURSJS26.HTM


on affiche trs classiquement ce lien
prcd d'une puce anime jaune/bleue

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


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

nomme

l'image"puce1"

et

target="blank"

sert uniquement
annuler facilement

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


<IMG SRC="gif/puceb.gif" name="puce1">
merveilleux </A>

<A HREF = "r

" target = "blank">

</BODY>

un clik sur le lien


Cette image tant nomme "puce1", l'instruction suivante incorpore 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 dplace 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 vrifier 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 MichelCours v.2

Page 102

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 trs 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 manire dclarer au dbut des


variables pointant sur ces 2 images, de manire pouvoir les changer facilement :
Il va donc falloir

2 variables de type image instancies :


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 slection (et une fonction pour
donner l'image indiquant une non-slection ):
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 vole 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 indpendants des images :


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

JavaScript

Cabar MichelCours v.2

Page 103

<A HREF = "r


" target = "blank" onMouseOver="allume('Bouton2')"
onMouseOut="eteint('Bouton2')"> sublime </A>
etc...
Une solution se trouve en COURSJS26c.HTM

variables

de

type

image instancies

1 fonction pour donner


l'image

indiquant

la

slection

1 fonction pour donner


l'image

indiquant

la

non slection

criture des boutons


la vole...

<script LANGUAGE="JavaScript1.1">
<!-image_select = new Image(); image_select.src="gif/pucer.GIF";
image_nonselect = new Image(); image_nonselect.src="gif/puceb.GIF";
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;
}
}
function eteint(nom) {
switch (nom) {
case "Bouton1" :
document.Bouton1.src = image_nonselect.src;
break;
case "Bouton2" :
document.Bouton2.src = image_nonselect.src;
break;
case "Bouton3" :
document.Bouton3.src = image_nonselect.src;
break;
}
}
//-->
</SCRIPT>
Si vous voulez, vouz pouvez aller sur un de ces site <BR>
<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>
les appels sont simples
<script>
et indpendant des
document.write('<IMG SRC=');
document.write(image_nonselect.src);
document.write(' name="Bouton2">');
JavaScript

Cabar MichelCours v.2

fichiers image utiliss !

Page 104

</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')"> gnial </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
manire standardise (nom de dossier sans espace...)

en effet sous Explorer les espaces sont cods en %20


alert(image_nonselect.src);

alors que sous Netscape non...


alert(image_nonselect.src);

T.P: Changement
T.P: Menu

d'image sur passage souris

visuels avec images changeantes

JavaScript

Cabar MichelCours v.2

Page 105

layers ( partir de versio n 1 .2 )


Cet objet permet de travailler avec les couches (calques) de la page HTML
Version 1.2

Aucune mthode n'est applicables l'objet layer


Les vnements applicables l'objet layers sont les suivants
Version 1.2

JavaScript

Cabar MichelCours v.2

Page 106

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 MichelCours v.2

Page 107

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 mthodes applicables l'objet button sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements 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 mthodes applicables l'objet chekbox sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements applicables l'objet chekbox sont les suivants


Version 1.0 & 1.1

JavaScript

Version 1.2

Cabar MichelCours v.2

Page 108

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 cachs 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 mthodes applicables l'objet password sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements applicables l'objet password sont les suivants


Version 1.0 & 1.1

JavaScript

Version 1.2

Cabar MichelCours v.2

Page 109

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 mthodes applicable l'objet radio sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements 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 mthodes applicable l'objet reset sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements applicables l'objet reset sont les suivants


Version 1.0 & 1.1

JavaScript

Version 1.2

Cabar MichelCours v.2

Page 110

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 mthodes applicable l'objet select sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements 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 mthodes applicable l'objet submit sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements applicables l'objet submit sont les suivants


Version 1.0 & 1.1

JavaScript

Version 1.2

Cabar MichelCours v.2

Page 111

text
Cet objet permet de travailler avec les champs "text" d'un formulaire
Version 1.0

Version 1.1 & 1.2

Les mthodes applicable l'objet text sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements 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 mthodes applicable l'objet textarea sont les suivantes


Version 1.0 & 1.1 & 1.2

Les vnements applicables l'objet textarea sont les suivants


Version 1.0 & 1.1

JavaScript

Version 1.2

Cabar MichelCours v.2

Page 112

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 terts :
Plus on effectue de manipulation sur le client propos du formulaire, et plus on
dcharge le serveur, ce qui ne peut que globalement tre positif pour tout le monde
Plusieurs types de manipulations peuvent tre intressantes effectuer localement

Un premier objectif peut tre celui d'effectuer des contrles de


validit sur les saisies effectues dans les champs de formulaire, mais
avant envois de la requte sur le serveur (cela vite un rejet de toute
faon).

Un deuxime 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 troisime objectif pourrait tre constitu par des calculs simples


effectus 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 carrment un


traitement du formulaire en local, c'est dire via la messagerie et
sans passer par l'excution de script sur le serveur

JavaScript

Cabar MichelCours v.2

Page 113

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 dclencher une fonction lorsque la valeur a t saisie
dans le champs, ce qui peut tre le cas de l'vnement onBlur qui est dclench lors
de la perte de focus sur un champs. Voir le fichier COURSJS31.HTML

La fonction affiche()
rcupre

"form"

formulaire

un
en

paramtre. c'est nous

<script LANGUAGE="JavaScript">
<!-function affiche(form1){
alert("vous avez saisi " + form1.nb.value);
return ;
};
//-->
</script>

nb est le champs nomm "nb"

value

est

une

proprit

d'un

champs text de formulaire

qui le dcidons (et qui


le

traitons

ensuite

comme un objet de

sur onBlur on appelle affiche() avec

type formulaire par la

le

suite)

this reprsentant l'objet courant


<FORM>
merci de saisir quelque chose
<INPUT TYPE=TEXT NAME="nb"
SIZE=5 MAXLENGTH=5> <br>
</FORM>

Le champs du formulaire s'appelle "nb"

formulaire

en

onBlur="affiche(this.form)"

paramtre.

VALUE="0"

En appel affiche() on passe un objet de


type formulaire
C'est un paramtre rel, il doit exister

NB: lors de l'criture, on peut tout aussi bien crire


onBlur="affiche(this.form)"

form est 1 proprit de this, l'objet courant

que
Essayez ces variantes
solution

onBlur="affiche(document.forms[0])"

forms[0] 1 lments du tableau des


formulaires du document

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 MichelCours v.2

Page 114

C a lc u ls a v e c d e s c h a n e s :
Ds que l'on veut effectuer des oprations en javascript, le problme de conversion
se pose car les donnes ventuellement rcupres dans un champs de formulaire
sont en fait des chanes de caractre

Par consquent il est ncessaire de les convertir,

conversion en entier :
c'est la fonction parseInt() qui assure la conversion d'un chane en un entier
classique
parsInt("13");

donnera le nombre 13

et
parsInt("13,5");

donnera le nombre 13

conversion en flottant (dcim aux) :


c'est la fonction parseFloat() qui assure la conversion d'un chane en un flottant
classique (nombre virgule)
parsFloat("13");

donnera le nombre 13.00

et
parsFloat("13,5");

donnera le nombre 13.5

JavaScript

Cabar MichelCours v.2

Page 115

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 dicte par l'organisme de Normalisation ECMA, dont les dernire
spcifications sont disponibles l'adresse suivante :
http://www.ecma.ch

Il s'agit de vrifier de quelle manire les 2 principales variations proposes par


Netrscape et Microsoft se positionnent :

Versions Jscrip t :
Jscript est un langage pouss par Microsoft l'intrieur d'un concept beaucoup plus
global , dnomm WSH, savoir Windows Scripting Host
Les dernire informations tant disponibles sur le site MSDN l'adresse suivante :
http://msdn.microsoft.com/scripting
JavaScript

Cabar MichelCours v.2

Page 116

JavaScript

Cabar MichelCours v.2

Page 117

Versions Javascrip t :
Javascript est la version dveloppe par Netscape, est supporte par Micorsoft via
Jscript
Javacript est disponible cot client, et cot serveur, mais uniquement sur les produits
distribus par Nestcape

Ce petit tableau essaye de rassembler de quelle manire la norme JAVASCRIPT est


supporte nativement par les produits NETSCAPE, et via JSCRIPT par les produits
Microsoft

statmarket.com dclare le 9/05/1999

JavaScript

Cabar MichelCours v.2

Page 118

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 spcific a tio n s :
Si la norme est dicte par l'organisme de Normalisation ECMA, dont les dernire
spcifications sont disponibles l'adresse suivante :
Norme ECMA :

http://www.ecma.ch

Spcifications Microsoft :

http://msdn.microsoft.com/scripting

Spcifications Nestcape :

http://www.netscape

S ites et F o r u m :
http://www.experts-exchange.com

JavaScript

Cabar MichelCours v.2

Page 119

http://www.editeurjavascript.com

http://www.allhtml.com

JavaScript

Cabar MichelCours v.2

Page 120