20917021-Javascript[1]

8/8/2019 20917021-Javascript[1]

1/47

Cours Programmation Langage JavaScript javascript.doc

SOMMAIRE

1. Gnralits ----------------------------------------------------------------------------------------- 31.1 A quoi ressemble un script? ---------------------------------------------------------------------------- 31.2 Masquage du script pour les anciens navigateurs ------------------------------------------------ 31.3 Ajouter des commentaires dans votre code -------------------------------------------------------- 41.4 Un exemple de Javascript ------------------------------------------------------------------------------- 4

1.5 A quel emplacement insrer le Javascript dans votre page HTML ? ------------------------- 51.5.1 Dans la balise script ------------------------------------------------------------------------------------ 51.5.2 Dans un fichier externe -------------------------------------------------------------------------------- 51.5.3 Grce aux gestionnaires dvnements ----------------------------------------------------------- 5

2. Les objets ------------------------------------------------------------------------------------------ 62.1 Manipuler les objets du navigateur ------------------------------------------------------------------- 72.2 Lorganisation hirarchique des objets dune page Web ---------------------------------------- 8

3. Le concept de variable ------------------------------------------------------------------------ 103.1 La dclaration de variables ------------------------------------------------------------------------------ 103.2 Porte (visibilit) des variables ------------------------------------------------------------------------- 113.3 Les types de donnes dans les variables ----------------------------------------------------------- 113.3.1 Nombre entier -------------------------------------------------------------------------------------------- 113.3.2 Nombre virgule flottante (rel) --------------------------------------------------------------------- 113.3.3 Chane de caractres ---------------------------------------------------------------------------------- 123.3.4 Boolen ---------------------------------------------------------------------------------------------------- 123.4 Les particularits de l'objet String --------------------------------------------------------------------- 123.5 Les proprits de l'objet String ------------------------------------------------------------------------- 123.6 Les mthodes de l'objet String ------------------------------------------------------------------------- 133.7 Exemples d'utilisation des mthodes de l'objet String -------------------------------------------- 143.7.1 Mthode charAt() ---------------------------------------------------------------------------------------- 143.7.2 Mthode indexOf() -------------------------------------------------------------------------------------- 14

3.7.3 Mthode lastIndexOf() --------------------------------------------------------------------------------- 153.7.4 Mthode substring() ------------------------------------------------------------------------------------ 153.7.5 Mthodes toLowerCase() et toUpperCase() ----------------------------------------------------- 16

4. Les vnements ---------------------------------------------------------------------------------- 174.1 Liste des vnements ------------------------------------------------------------------------------------ 174.2 Objets auxquels on peut associer des vnements ---------------------------------------------- 184.3 Quelques exemples d'vnements ------------------------------------------------------------------- 184.3.1 Ouverture d'une bote de dialogue lors d'un click ----------------------------------------------- 184.3.2 Modification d'une image lors du survol d'un lien par le pointeur de la souris ----------- 19

5. Les oprateurs ------------------------------------------------------------------------------------ 20

5.1 Les oprateurs de calcul --------------------------------------------------------------------------------- 205.2 Les oprateurs d'assignation ---------------------------------------------------------------------------- 205.3 Les oprateurs d'incrmentation ----------------------------------------------------------------------- 215.4 Les oprateurs de comparaison ------------------------------------------------------------------------ 215.5 Les oprateurs logiques (boolens) ------------------------------------------------------------------- 215.6 Les oprateurs bit--bit (bitwise) ----------------------------------------------------------------------- 225.7 Les oprateurs de rotation de bit ----------------------------------------------------------------------- 225.8 Les priorits -------------------------------------------------------------------------------------------------- 23

6. Les structures de contrle --------------------------------------------------------------------- 246.1 Les structures alternatives (ou conditionnelles) ---------------------------------------------------- 246.1.1 L'instruction if --------------------------------------------------------------------------------------------- 24

ESAT/DMSI/PROA/WGR Page 1 sur 47 jj/10/aa

8/8/2019 20917021-Javascript[1]

2/47


6.1.2 L'instruction if ... else ----------------------------------------------------------------------------------- 246.1.3 loprateur ternaire (une faon plus courte de faire un test ) --------------------------------- 246.2 Les structures itratives (ou rptitives : les boucles) -------------------------------------------- 256.2.1 Linstruction for ------------------------------------------------------------------------------------------- 256.2.2 L'instruction while ---------------------------------------------------------------------------------------- 256.3 Linstruction continue (saut inconditionnel) ---------------------------------------------------------- 266.4 Linstruction break (arrt inconditionnel) ------------------------------------------------------------- 26

7. Les fonctions -------------------------------------------------------------------------------------- 277.1 La dclaration d'une fonction ---------------------------------------------------------------------------- 277.2 Appel de fonction ------------------------------------------------------------------------------------------- 287.3 Les paramtres dune fonction -------------------------------------------------------------------------- 297.4 Travailler sur des variables dans les fonctions ------------------------------------------------------ 307.5 Le mot cl this ----------------------------------------------------------------------------------------------- 30

8. Les objets ------------------------------------------------------------------------------------------- 318.1 Les mthodes ----------------------------------------------------------------------------------------------- 328.1.1 La mthode write() -------------------------------------------------------------------------------------- 328.1.2 La mthode writeln() ------------------------------------------------------------------------------------ 32

8.2 Dfinir une mthode pour un objet --------------------------------------------------------------------- 338.3 Prsentation des objets du navigateur ---------------------------------------------------------------- 348.4 Classification des objets du navigateur --------------------------------------------------------------- 348.5 Comment accder un objet? -------------------------------------------------------------------------- 348.6 L'objet window ---------------------------------------------------------------------------------------------- 358.6.1 Les proprits de l'objet window --------------------------------------------------------------------- 358.6.2 Les mthodes de l'objet window --------------------------------------------------------------------- 368.7 Les botes de dialogue ------------------------------------------------------------------------------------ 378.7.1 La mthode alert() --------------------------------------------------------------------------------------- 378.7.2 La mthode confirm() ----------------------------------------------------------------------------------- 378.7.3 La mthode prompt() ----------------------------------------------------------------------------------- 38

8.8 L'objet navigator -------------------------------------------------------------------------------------------- 398.8.1 Les proprits de l'objet navigator ------------------------------------------------------------------- 398.8.2 Utiliser efficacement ces proprits ----------------------------------------------------------------- 408.8.3 Exemple de script ---------------------------------------------------------------------------------------- 408.9 L'objet history ------------------------------------------------------------------------------------------------ 418.10 L'objet date ------------------------------------------------------------------------------------------------- 428.10.1 Les mthodes de l'objet date ------------------------------------------------------------------------ 428.10.2 Comment connatre la date ? ------------------------------------------------------------------------ 438.10.3 Modifier le format de la date ------------------------------------------------------------------------- 438.10.4 Modifier la date ------------------------------------------------------------------------------------------ 448.11 l'objet Math -------------------------------------------------------------------------------------------------- 458.11.1 Les mthodes et proprits standards de l'objet Math ---------------------------------------- 45

8.11.2 Logarithmes et exponentielle ------------------------------------------------------------------------- 468.11.3 Trigonomtrie -------------------------------------------------------------------------------------------- 46

9 Bibliographie ---------------------------------------------------------------------------------------- 47


8/8/2019 20917021-Javascript[1]

3/47


1. Gnralits

Le Javascript est une extension du langage HTML qui est incluse dans le code. Ce langage est un langage de

programmation qui permet d'apporter des amliorations au langage HTML en permettant d'excuter des commandes.

Les navigateurs et le Javascript:

Navigateur Version de Javascript supporte

Netscape 2 JavaScript 1.0Netscape 3 JavaScript 1.1

Netscape 4 Javascript 1.2

MSIE 3.0 Javascript 1.0

MSIE 4.0 Javascript 1.2

Il ne faut pas confondre le JavaScript et le Java. En effet contrairement au langage Java, le code est directement crit

dans la page HTML, c'est un langage peu volu qui ne permet aucune confidentialit au niveau des codes (ceux-ci

sont effectivement visibles).

D'autre part l'applet Java (le programme) doit tre compil chaque chargement de la page, d'o un important

ralentissement pour les applets Java contrairement au JavaScript.

Javascript JavaLangage interprt Langage compil

Code intgr au HTMLCode (applet) part du document HTML, appel partir de la

page

Langage peu typ Langage fortement typ (dclaration du type de variable)

Liaisons dynamiques: les rfrences des objets sont

vrifies au chargement

Liaisons statiques: Les objets doivent exister au chargement

(compilation)

Accessibilit du code Confidentialit du code

Sr: ne peut pas crire sur le disque dur Sr: ne peut pas crire sur le disque dur

Le Javascript est case sensitive (en franaissensible la casse), c'est--dire qu'il fait une diffrence entre un nom de

variable contenant ou non des majuscules. Ainsi la fonction bonjour(); n'est pas la mme fonction queBonjour();.Enfin, comme en langage C, chaque instruction se termine par un point-virgule (;).

1.1 A quoi ressemble un script?

Un script est une portion de code qui vient s'insrer dans une page HTML. Le code du script n'est toutefois pas visible

dans la fentre du navigateur car il est compris entre des balises (ou tags) spcifiques qui signalent au navigateur qu'il

s'agit d'un script crit en langage JavaScript.

Les balises annonant un code Javascript sont les suivantes:

Placez ici le code de votre script

1.2 Masquage du script pour les anciens navigateurs

Ce code est ainsi invisible du point de vue du navigateur c'est--dire que ce dernier n'affiche pas dans sa fentre le

code Javascript. Toutefois, d'anciens navigateurs, crs avant l'arrive du Javascript, ne connaissent pas ces balises et

donc les ignorent...

Le code de votre Javascript risque donc de s'afficher sur votre belle page web et venir gcher votre travail. L'astuce

consiste donc ajouter des balises de commentaires l'intrieur mme des balises de script. Ainsi les anciens

navigateurs ignoreront tout simplement l'intgralit du script, tandis que les navigateurs rcents l'interprteront comme

du Javascript!


8/8/2019 20917021-Javascript[1]

4/47


Voici ce que donne le script une fois "masqu" pour les anciens navigateurs:

1.3 Ajouter des commentaires dans votre code

Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans un de ses scripts

d'une part pour s'y retrouver lorsque, plusieurs mois aprs, l'on voudra revoir son script

d'autre part par esprit d'change pour permettre vos visiteurs curieux de comprendre votre script (cela n'est

pas toujours dsir...)

Il ne faut pas confondre les balises de commentaires du langage HTML (destines masquer le script pour certains

navigateurs) et les caractres de commentaires Javascript (permettant de documenter son script)!

Pour crire des commentaires, Javascript utilise les conventions utilises en lange C/C++

Pour mettre en commentaires une ligne on utilise le double slash:// Tous les caractres derrire le // sont ignors

Pour mettre en commentaire une partie du texte (ventuellement sur plusieurs lignes) on utilise le /* et le */:/* Toutes les lignes comprises entre ces repres

Sont ignores par l'interprteur

de code */

Il faut veiller ne pas imbriquer des commentaires, au risque de provoquer une erreur lors de l'excution du code!

1.4 Un exemple de Javascript

Comme gnralement dans les tutoriels de Javascript on va faire afficher une bote de dialogue suite au chargement

d'une page HTML. Dans ce cas le script est totalement inutile voire ennuyeux pour vos visiteurs...

Cet exemple montre ce que l'abus de Javascript peut donner... Il faudra apprendre se servir du Javascript avec

modration!

Voici la page HTML correspondante:

Voici une page contenant du Javascript


8/8/2019 20917021-Javascript[1]

5/47


1.5 A quel emplacement insrer le Javascript dans votre page HTML ?

Il y a plusieurs faons d'inclure du JavaScript dans une page HTML:

Grce la balise

En mettant le code dans un fichier

Grce aux vnements

1.5.1 Dans la balise script

Le code Javascript peut tre insr o vous le dsirez dans votre page Web, vous devez toutefois veiller ce que le

navigateur ait entirement charg votre script avant d'excuter une instruction.

En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent

impatients) peuvent trs bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant

la fonction dans votre page il est probable que cela gnrera une erreur si cette fonction n'a pas t charge.

Ainsi, on place gnralement le maximum d'lments du script dans la balise d'en-tte (ce sont les lments situs

entre les balises et ).

Les vnements Javascript seront quant eux placs dans le corps de la page (entre les balises et )

comme attributs d'une commande HTML...

L'argument de la balise dcrit le langage utilis. Il peut tre "JavaScript" "JavaScript1.1" "JavaScript1.2".

On peut ainsi (en passant un argument diffrent de "JavaScript") utiliser d'autres langages de programmation que

celui-ci (par exemple le VbScript).

Pour utiliser diffrentes versions de JavaScript tout en conservant une certaine compatibilit, il suffit de dclarer

plusieurs balises SCRIPT ayant chacune comme paramtre la version du JavaScript correspondante.

1.5.2 Dans un fichier externe

Il est possible de mettre les codes de JavaScript en annexe dans un fichier ( partir de Netscape 3.0 uniquement). Le

code insrer est le suivant:

O url/fichier.js correspond au chemin d'accs au fichier contenant le code en JavaScript, sachant que si celui-ci

n'existe pas, le navigateur excutera le code insr entre les 2 balises.

1.5.3 Grce aux gestionnaires dvnementsOn appelle gestionnaire dvnement une action de l'utilisateur, comme le clic d'un des boutons de la souris. Le code

dans le cas du rsultat d'un vnement s'crit:

eventHandler reprsente le nom de l'vnement.

Exemple :


8/8/2019 20917021-Javascript[1]

6/47


2 Les objets

Le but de cette section n'a pas pour ambition de vous faire connatre la programmation oriente objet (POO) mais de

vous donner une ide de ce qu'est un objet, concept ncessaire la cration de scripts Javascript.

Le Javascript traite les lments qui s'affichent dans votre navigateur comme des objets, c'est--dire des lments

classs selon une hirarchie pour pouvoir les dsigner prcisment

auxquels on associe des proprits

Cette notion semble floue pour l'instant mais voyons cela sur un exemple concret:

Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. On suppose que la hirarchie

d'objets est dfinie comme ceci:

jardin

arbre

branche

feuille

nid

largeur: 20

couleur: jaune

hauteur: 4

tronc

racine

salade

balanoire

trapze

corde

nid

largeur: 15

couleur: marron

hauteur: 6

Le nid sur l'arbre est donc dsign comme suit:

jardin.arbre.branche.nid

Contrairement au nid situ sur la balanoire:

jardin.balanoire.nid

Imaginez maintenant que l'on veuille changer la couleur du nid (dans l'arbre) pour le peindre en vert, il suffirait de

taper une commande du genre:

jardin.arbre.branche.nid.couleur = vert;

C'est donc ainsi que l'on reprsente les objets en Javascript, la seule diffrence que ce n'est pas un jardin qui est

reprsent sous forme d'objets mais la fentre de votre navigateur...


8/8/2019 20917021-Javascript[1]

7/47


2.1 Manipuler les objets du navigateur

Javascript divise la page du navigateur en objets, afin de vous permettre d'accder n'importe lequel d'entre eux et de

pouvoir les manipuler par l'intermdiaire de leurs proprits.

On commence gnralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la

hirarchie jusqu' l'objet voulu!

L'objet le plus grand est l'objet fentre (les objets en javascript ont leur dnomination en anglais, donc dans le

cas prsent window)

Dans la fentre s'affiche une page, c'est l'objet document

Cette page peut contenir plusieurs objets, comme des formulaires, des images, ...

Pour accder un objet il faut donc partir de l'objet le plus grand (l'objet windowpour descendre l'objet que l'on veut

atteindre.

Prenez par exemple la case cocher (appele checkbox) et le champ de texte (appel champ_text) suivants:

La case cocher checkbox (auquel on a donn le nom checkbox) est repr par le code suivant:

window.document.forms[0].checkbox Le champ de texte (auquel on a donn le nom champ_text) est repr par le code suivant:

window.document.forms[0].champ_text

La case cochercheckbox a entre autre une proprit checked, qui retourne la valeur 1 si la case est coche, 0 dans lecas contraire.

Le champ de texte a par exemple comme proprits:

Name : le nom du champ de texte

Value : le texte contenu dans le champ

Size : la taille du champ de texte

Par exemple, Il est possible de rcuprer le contenu du champ de texte de la faon suivante :

window.document.forms[0].champ_text.value ; (c'est--dire le texte associ au champ de texte que l'on a nomm

champ_text)


8/8/2019 20917021-Javascript[1]

8/47


2.2 Lorganisation hirarchique des objets dune page Web

les lments des formulaires comportant un astrisque (*) se placent dans lattribut type la balise input.Exemple :


La fentre:Self, window,

parent, top

navigatorObjets

navigateur

Proprits : AppCodeName, appName, appMinorVersion, cpuClass, platform, plugins,

OpsProfile, userProfile, systemLanguage, userLanguage, appVersion, userAgent, onLine,cookieEnabled, mimeTypes

Frames[]Tableau

dobjets fentre

locationObjet

emplacement

Proprits :Hostname, href, host, hash, port, pathname, search, protocolMthodes : reload(), replace(url)

historyObjet

historique

Proprits : Length

Mthodes : back(), forward(), go(x)

x = nombre (positif ou ngatif) des URL en avant ou en arrire

Proprits : closed, name, onerror, status, ClientInformation, ffscreenBuffering,

copyhistory, directories, height, location, menubar, resizable, scrollbars, toolbar, width,

alwayslowered, alwaysraised, dependent, hotkeys, innerheight, innerwidht, opener,outerheight, outerwidth, screenX, screenY, titlebar, z-lock

Mthodes : open(page, fentre), close(), scroll(x,y), scrollBy(x,y), resizeTo(x,y),

resizeBy(x,y), moveTo(x,y), blur(), moveBy(x,y)Gestionnaires (dans la balise ) : OnBlur, OnError, OnFocus, OnLoad, OnResize,

OnUnload

documentObjet

document

Links []Tableau dobjets

JavaOb ect

Anchors[]Tableau dobjets

ancre

images[]Tableau dobjets

ima e

Applets[]Tableau dobjets

JavaOb ect

Proprits : bgColor, cookie, lastModified, referrer, title, activeElement,all, charset,

children, classes, defaultCharset, domain, expando, fgColor, linkColor, parentWindow,

readyState, URL, vlinkColorMthodes : write(), writeln(), close(), element FromPoint(x,y), open()

Proprit: location

Proprit: name

Mthodes : start(), stop()

Forms[]Tableau dobjets

formulaire

elements[]

Tableau dobjetsElment de formulaire

Proprits : action = "nom_du_script", length, method = "GET/POST",Name = "nom_du_formulaire_recherch", target = "nom_de_la_fentre_cible"

Mthodes : reset(), submit()Gestionnaires : OnSubmit = "instruction/fonction" (si la

fonction retourne FALSE, le formulaire nest pas soumis),

Proprits : voir le tableau au dos de la feuille

Gestionnaires : voir le tableau au dos de la feuille

Proprits : border, complete, hspace, height, lowsrc, name = "nom_de_limage",src= "nom_du_fichier", vspace, width

Proprits : hash, host, hostname, href, pathname, port, protocol, searchGestionnaires : OnClick, OnMouseOut, OnMouseOver

8/8/2019 20917021-Javascript[1]

9/47


Elment Description Propritset mthodes()

Description Gestion-naires

Description

Button

(*)

Bouton NameValue

Nom du bouton.

Texte figurant sur le

bouton.

OnClick Actionn quand un visiteurclique sur le bouton.

Checkbox

(*)

Case cocher Checked

Name

Value

Vrai quand la case est

coche, prslection de

la case cocher.

Nom de la case cocher.

Valeur de la case

cocher.

OnClick Actionn quand un visiteur

coche la case.

Hidden

(*)

Elment invisible.

contient des

informations masques lutilisateur.

Name

Value

Nom de llment

cach.

Valeur de llment

cach.

Option

texte associ

loption

Option dun lment

select : menu droulant

ou liste droulante.

Toutes les options sont

stockes dans le tableau

options[] associ llment.

Selected

Value

Vrai ou faux selon que

loption a t

slectionne ou non.

Valeur associe

loption.

Radio

(*)

Bouton radio.

Les boutons radioportant le mme nom

forment un groupe etsont placs dans un

tableau de mme nom.

Checked

Name

Value

Vrai quand le bouton

radio est slectionn.

Prslection du bouton

radio.

Nom du bouton radio.

Valeur du bouton radio.


slectionne le bouton radio.

Reset

(*)

Bouton qui rinitialise

les zones de saisie dun

formulaire.

Name

ValueNom du bouton.

Texte qui saffiche sur

le bouton.

OnClick Actionn quand un visiteurclique sur le bouton reset.

Select

Options

Syntaxe : Menu droulant ou liste

droulante.Son contenu appel

options, est stock dansle tableau options[].

Length

Name

SelectedIndex

Size

Nombre doptions de

llment.

Nom de llmentselect.

Position de lobjet

slectionn dans le

tableau.

Nb de lignes visibles

OnChange Dclench quand un visiteurslectionne ou dslectionne

une option.

Submit

(*)

Bouton de soumission.

Envoie un vnement

onSubmit au formulaire

dans lequel il figure.

NameValue

Nom du bouton.

Texte qui saffiche sur

le bouton.


clique sur le bouton de

soumissionLe script de ce gestionnaire

sexcute avant le codejavascript figurant

lintrieur dun gestionnaire

onSubmit dans le formulaire.

Text

(*)

Elment de texte.Permet un visiteur de

taper une ligne de texte

dans un formulaire.

Name

Value

Sizeblur()

focus()

select()

Nom de llment de

texte.

Texte qui initialise le

champ de texte.

Taille du champ texte.

Supprime le curseur de

llment text.

Dplace le curseur vers

llment text.

Slectionne le texte

lintrieur du champ text

OnBlur

OnChange

OnFocus

Appel lorsque lutilisateur

retire le curseur de llment

text.

Dclench quand un visiteur

modifie le contenu du champ,

puis clique hors de celui-ci ou

appuie sur Entre.

Appel lorsque lutilisateur

place le curseur dans le

champ texte.

Textarea

Zone de texte.Permet un visiteur detaper plusieurs lignes

de texte dans unformulaire.

Identiques llment textmoins size et +

RowsCols

Nombre de lignes

Nb de caractres / ligne

Identiques llmenttext


8/8/2019 20917021-Javascript[1]

10/47


3 Le concept de variable

Une variable est un objet repr par son nom, pouvant contenir des donnes, qui pourront tre modifies lors de

l'excution du programme.

En Javascript, les noms de variables peuvent tre aussi long que l'on dsire, mais doivent rpondre certains critres:

un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un "_"

un nom de variables peut comporter des lettres, des chiffres et les caractres _ et & (les espaces ne sont pas

autoriss!) Les noms de variables ne peuvent pas tre les noms suivants (qui sont des noms rservs):

abstract

boolean, break, byte

case, catch, char, class

default, do, double

else, extends

false, final, finally, float

goto

if, implements, 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

Nom de variable correct Nom de variable incorrect Raison

Variable Nom de Variable comporte des espaces

Nom_De_Variable 123Nom_De_Variable commence par un chiffre

nom_de_variable [email protected] caractre spcial @nom_de_variable_123 Nom-de-variable signe - interdit

_707 transient nom rserv

Les noms de variables sont sensibles la casse (le Javascript fait la diffrence entre un nom en majuscule et un nom

en minuscule), il faut donc veiller utiliser des noms comportant la mme casse!

3.1 La dclaration de variables

Le Javascript tant trs souple au niveau de l'criture ( double tranchant car il laisse passer des erreurs...), la

dclaration des variables peut se faire de deux faons:

soit de faon explicite, en faisant prcder la variable du mot cl varqui permet d'indiquer de faon rigoureuse

qu'il s'agit d'une variable:

var chaine= "bonjour" soit de faon implicite, en crivant directement le nom de la variable suivie du caractre = et de la valeur

affecter:

chaine= "bonjour"

Le navigateur dtermine seul qu'il s'agit d'une dclaration de variable.

Mme si une dclaration implicite est tout fait reconnue par le navigateur, il est tout de mme plus rigoureux de

dclarer les variables de faon explicite avec le mot var...


8/8/2019 20917021-Javascript[1]

11/47


3.2 Porte (visibilit) des variables

Selon l'endroit o on dclare une variable, celle-ci pourra tre accessible (visible) de partout dans le script ou bien que

dans une portion confine du code, on parle de "porte" d'une variable.

Lorsqu'une variable est dclare sans le mot cl var, c'est--dire de faon implicite, elle est accessible de partout dansle script (n'importe quelle fonction du script peut faire appel cette variable). On parle alors de variable globale

Lorsque l'on dclare de faon explicite une variable en javascript (en prcdant sa dclaration avec le mot var), saporte dpend de l'endroit o elle est dclare.

Une variable dclare au dbut du script, c'est--dire avant toute fonction sera globale, on pourra alors

lutiliser partir de n'importe quel endroit dans le script

Une variable dclare par le mot cl vardans une fonction aura une porte limite cette seule fonction, c'est--dire qu'elle est inutilisable ailleurs, on parle alors de variable locale

3.3 Les types de donnes dans les variables

En Javascript il n'y a pas besoin de dclarer le type des variables que l'on utilise, contrairement des langages volustels que le langage C ou le Java pour lesquels il faut prciser s'il s'agit d'entiers ( int), de nombres virgule flottante

(float), de caractres (char), ...

En fait le Javascript n'autorise la manipulation que de 4 types de donnes:

des nombres: entiers ou virgules

des chanes de caractres(string): une suite de caractres

des boolens (boolean) : des variables deux tats permettant de vrifier une condition

true: si le rsultat est vrai

false: lors d'un rsultat faux

des variables de type null: un mot caractristique pour indiquer qu'il n'y a pas de donnes

3.3.1 Nombre entier

Un nombre entier est un nombre sans virgule qui peut tre exprim dans diffrentes bases:

Base dcimale: L'entier est reprsent par une suite de chiffre unitaires (de 0 9) ne devant pas commencer

par le chiffre 0

Base hexadcimale: L'entier est reprsent par une suite d'units (de 0 9 ou de A F (ou a f)) devant

commencer par0x ou 0X

Base octale: L'entier est reprsent par une suite d'units (incluant uniquement des chiffres de 0 7) devant

commencer par0

3.3.2 Nombre virgule flottante (rel)Un nombre virgule flottante est un nombre virgule, il peut toutefois tre reprsent de diffrentes faons:

un entier dcimal: 895

un nombre comportant un point (et non une virgule): 845.32

une fraction: 27/11

un nombre exponentiel, c'est--dire un nombre (ventuellement virgule) suivi de la lettre e (ouE), puis d'unentier correspondant la puissance de 10 (sign ou non, c'est--dire prcd d'un + ou d'un -)

2.75e-2

35.8E+10.25e-2


8/8/2019 20917021-Javascript[1]

12/47


3.3.3 Chane de caractres

Une chane de caractres est, comme son nom l'indique, une suite de caractres. On la reprsente par la suite de

caractres encadre par des guillemets simples (') ou doubles ("), sachant que les deux types de guillemets ne peuvent

tre mlangs pour une mme chane de caractres, ce qui signifie que les guillemets dans une chane de caractres

existent par paire.

Il existe des caractres spciaux utiliser dans les chanes pour simuler d'une part des caractres non visuels ou pour

viter au navigateur de confondre les caractres d'une chane avec ceux du script, ces caractres sont prcds d'unantislash (\):

\b : touche de suppression

\f : formulaire plein

\n : retour la ligne

\r : appui sur la toucheENTREE

\t : tabulation

\" : guillemets doubles

\' : guillemets simples

\\ : caractre antislash

Ainsi, si on veut stocker la chane suivante dans la variable Titre:Qu'y a-t'il dans "c:\windows\"

Il faudra crire dans le code Javascript:

Titre = "Qu\'y a-t\'il dans \"c:\\windows\\\"";

ou

Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"';

3.3.4 Boolen

Un boolen est une variable spciale servant valuer une condition, il peut donc avoir deux valeurs: vrai: reprsent par 1

faux: reprsent par 0

3.4 Les particularits de l'objet String

string est un mot anglais qui signifie "chane", il s'agit en fait de chane de caractres. C'est donc une suite decaractres, on la reprsente gnralement par un ensemble de caractres encadr par des guillemets. La longueur

maximale d'une telle chane est priori comprise entre 50 et 80 caractres.

L'objet Stringest un objet qui contient un certain nombre de proprits et de mthodes permettant la manipulation de

chanes de caractres.

3.5 Les proprits de l'objet String

L'objetstringa une seule proprit : la proprit length qui permet de retourner la longueur d'une chane de caractres.Cette proprit est trs utile car lorsque l'on traite une chane de caractres on aime gnralement savoir quel

moment s'arrter.

La syntaxe de la proprit length est la suivante:

x = nom_de_la_chaine.length;

x = ('chaine de caracteres').length;

On peut donc directement passer la chane de caractres comme objet, en dlimitant la chane par des apostrophes et

en plaant le tout entre parenthses.

La mthode traditionnelle consistant appliquer une proprit une variable de type string fonctionne bienvidemment aussi.


8/8/2019 20917021-Javascript[1]

13/47


3.6 Les mthodes de l'objet String

Les mthodes de l'objetstringpermettent de rcuprer une portion d'une chane de caractres, ou bien de la modifier.Pour comprendre les mthodes suivantes, il est tout d'abord ncessaire de comprendre comment est stocke une chane

de caractres:

Il s'agit en fait d'une sorte de tableau constitu de n caractres (n est donc le nombre de caractres), on note 0 laposition du premier caractre (celui l'extrme gauche), puis on les compte de gauche droite en incrmentant ce

nombre:

Chane C o m m e n t a m a r c h e ?

Position des caractres 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Comme on peut le voir, une chane ayant n caractres aura son dernier caractre en position n-1 (ici, pour une chanede 18 caractres le dernier lment est la position 17...).

Le tableau suivant dcrit les mthodes de l'objetstring.

Mthode description

charAt(chane, position)

ou

chane.charAt(position)Retourne le caractre situ la position donne en paramtre

indexOf(sous-chane, position)

Retourne la position d'une sous-chane (lettre ou groupe de lettres) dans une chane

de caractres, en effectuant la recherche de gauche droite, partir de la position

spcifie en paramtre.

lastIndexOf(sous-chane,

position)

La mthode est similaire indexOf(), la diffrence que la recherche se fait de droite gauche:

Retourne la position d'une sous-chane (lettre ou groupe de lettres) dans une chane

de caractres, en effectuant la recherche de droite gauche, partir de la position

spcifie en paramtre.

substring(position1, position2)La mthode retourne la sous-chane (lettre ou groupe de lettres) comprise entre les

positions 1 et 2 donnes en paramtre.

toLowerCase() Convertit tous les caractres d'une chane en minuscule

toUpperCase() Convertit tous les caractres d'une chane en majuscule

D'autres mthodes :

Mthode description

anchor(nom_a_donner) Transforme le texte en ancrage HTML

big() Augmente la taille de la police

blink() Transforme la chane en texte clignotant

bold() Met le texte en gras (balise )

fixed Transforme le texte en police fixe (balise )

fontcolor(couleur)Modifie la couleur du texte (admet comme argument la couleur en hexadcimal ou en

valeur littrale)

fontsize(Size) Modifie la taille de la police, en affectant la valeur passe en paramtre

italics() Transforme le texte en italique (balise )

link(URL) Transforme le texte en hypertexte (balise )

small() Diminue la taille de la police

strike() Transforme le texte en texte barr (balise )

sub() Transforme le texte en indice (balise )

sup() Transforme le texte en exposant (balise )


8/8/2019 20917021-Javascript[1]

14/47


3.7 Exemples d'utilisation des mthodes de l'objet String

3.7.1 Mthode charAt()

Il existe deux syntaxes pour la mthode charAt()

chaine = "chaine de caractres";

Resultat = chaine.charAt(position);

Resultat = charAt("chaine de caractres", position);

Le paramtreposition est un entier qui reprsente la position du caractre rcuprer, il doit tre compris entre O et n-1 (o n reprsente la longueur de la chane). Dans le cas contraire (le paramtre position ngatif ou suprieur ou gal

la longueur) charAt() renvoie une chane de longueur nulle.Voici quelques exemples:

Chaine = 'Comment a marche?' var Resultat = charAt(Chaine,0)

donne 'C'

var Resultat = charAt("Comment a marche?", 1)

donne 'o'

var Resultat = Chaine.charAt(17)donne '?'

var Resultat = ("Comment a marche?").charAt(18)

donne ""

var Resultat = charAt(Chaine, -1)

donne ""

3.7.2 Mthode indexOf()

La mthode indexOf() permet de rechercher (de gauche droite) la position d'une sous-chane dans une chane de

caractres.

Chaine = "chaine de caractres";Sous-Chaine = "sous-chane de caractres";

Resultat = x.indexOf(position);

La position indique en argument permet de dterminer la position du caractre partir duquel la recherche est

effectue. L'argument position doit tre compris entre 0 et n-1. Si cet argument est omis la recherche dbutera laposition 0.

Lorsque la recherche est infructueuse, la mthode indexOf() renvoie la valeur -1.Voici quelques exemples:

Chaine = 'Comment a marche?'Sous_Chaine = 'mar'

var Resultat = Chaine.indexOf(Sous_Chaine, 6)donne '11'

var Resultat = Chaine.indexOf(Sous_Chaine)donne '11'

var Resultat = Chaine.indexOf(Sous_Chaine, 11)donne '11'

var Resultat = Chaine.indexOf(Sous_Chaine, 12)donne '-1'

var Resultat = Chaine.indexOf(Sous_Chaine, -1)donne "-1"

var Resultat = Chaine.indexOf(Sous_Chaine, 15)donne "-1"

var Resultat = Chaine.indexOf(Sous_Chaine, 19)donne "-1"


8/8/2019 20917021-Javascript[1]

15/47


3.7.3 Mthode lastIndexOf()

La mthode lastIndexOf() permet de rechercher (de droite gauche) la position d'une sous-chane dans une chane decaractres.

Chaine = "chane de caractres";

Sous_Chaine = "sous-chane de caractres";

Resultat = Chaine.lastIndexOf(Sous_Chaine,position);

La position indique en argument permet de dterminer la position du caractre partir duquel la recherche est

effectue (vers la gauche pour cette mthode). L'argumentposition doit tre compris entre 0 et n-1. Si cet argument estomis la recherche dbutera partir de la fin de la chane.

Lorsque la recherche est infructueuse, la mthode lastIndexOf() renvoie la valeur -1.Voici quelques exemples:

Chaine = 'Comment a marche?'Sous_Chaine = 'mar'

var Resultat = Chaine.lastIndexOf(Sous_Chaine, 6)donne '-1'

var Resultat = Chaine.lastIndexOf(Sous_Chaine)

donne '11'

var Resultat = Chaine.lastIndexOf(Sous_Chaine, 11)donne '11'

var Resultat = Chaine.lastIndexOf(Sous_Chaine, 12)donne '11'

var Resultat = Chaine.lastIndexOf(Sous_Chaine, -1)donne "-1"

var Resultat = Chaine.lastIndexOf(Sous_Chaine, 19)donne "-1"

3.7.4 Mthode substring()

La mthodesubstring() permet de rcuprer une sous-chane dans une chane de caractres en prcisant en paramtresles positions des caractres entre lesquels la sous-chane doit tre rcupre.

Chaine = "chaine de caractres";

Resultat = Chaine.substring(position1, position2);

Les positions indiques en argument permettent de dterminer les positions des caractres entre lesquels la sous-chane

doit tre rcupre. Les argumentsposition1 etposition2 doivent tre compris entre 0 et n-1.

Si l'argumentposition1 est plus petit que l'argument position2, la mthodesubstring() retourne la sous-chanecommenant la position 1 et s'arrtant au caractre situ avant position 2

Si l'argumentposition1 est plus grand que l'argumentposition2, la mthodesubstring() retourne la sous-chane

commenant la position 2 et s'arrtant au caractre situ avant position 1

Si l'argumentposition1 est gal l'argumentposition2, la mthodesubstring() retourne une chane vide

Voici quelques exemples:

Chaine = 'Comment a marche?' var Resultat = Chaine.substring(1,5)

donne 'omme'

var Resultat = Chaine.substring(6,6)donne ''

var Resultat = Chaine.substring(8,2)donne 'mment '


8/8/2019 20917021-Javascript[1]

16/47


3.7.5 MthodestoLowerCase() et toUpperCase()

La mthode toLowerCase() permet de convertir toutes les lettres d'une chane en minuscules, les autres caractres sontlaisss tels quels.

Exemple :

Chaine = 'Comment a Marche?'var Resultat = Chaine.toLowerCase

donne 'comment a marche?'

La mthode toUpperCase() permet de convertir toutes les lettres d'une chane en majuscules, les autres caractres sontlaisss tels quels.

Exemple :

Chaine = 'Comment a Marche?'var Resultat = Chaine.toUpperCasedonne 'COMMENT A MARCHE?'


8/8/2019 20917021-Javascript[1]

17/47


4 Les vnements

Les vnements sont des actions de l'utilisateur, qui vont pouvoir donner lieu une interactivit.

L'vnement par excellence est le clic de souris, car c'est le seul que le HTML gre. Grce au Javascript il est possible

d'associer des fonctions, des mthodes des vnements tels que le passage de la souris au-dessus d'une zone, le

changement d'une valeur, ...

Ce sont les gestionnaires d'vnements qui permettent d'associer une action un vnement.

La syntaxe d'un gestionnaire d'vnement est la suivante:onEvenemen t= "Action_Javascript_ou_Fonction();"Les gestionnaires d'vnements sont associs des objets, et leur code s'insre dans la balise de ceux-ci...

4.1 Liste des vnements

Evnement

(gestionnaire

d'vnement)

Description

Click

(onClick) Se produit lorsque l'utilisateur clique sur l'lment associ l'vnementLoad(onLoad)

Se produit lorsque le navigateur de l'utilisateur charge la page en cours

Unload(onUnload)

Se produit lorsque le navigateur de l'utilisateur quitte la page en cours

MouseOver(onMouseOver)

Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un lment

MouseOut(onMouseOut)

Se produit lorsque le curseur de la souris quitte un lment

Cet vnement fait partie du Javascript 1.1

Focus(onFocus)

Se produit lorsque l'utilisateur donne la focalisation un lment, c'est--dire que cet

lment est slectionn comme tant l'lment actif

Blur(onBlur)

Se produit lorsque l'lment perd la focalisation, c'est--dire que l'utilisateur clique hors decet lment, celui-ci n'est alors plus slectionn comme tant l'lment actif

Change(onChange)

Se produit lorsque l'utilisateur modifie le contenu d'un champ de donnes

Select(onSelect)

Se produit lorsque l'utilisateur slectionne un texte (ou une partie d'un texte) dans un champ

de type "text" ou "textarea"

Submit(onSubmit)

Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton

qui permet d'envoyer le formulaire)


8/8/2019 20917021-Javascript[1]

18/47


4.2 Objets auxquels on peut associer des vnements

Chaque vnement ne peut pas tre associ n'importe quel objet. Il est vident qu'un vnement OnChange ne peutpas s'appliquer un lien hypertexte...

Objet Evnements associablesLien hypertexte onClick, onMouseOver, onMouseOut

Page du navigateur onLoad, onUnload

Bouton, Case cocher, Bouton radio, Bouton Reset onClick

Liste de slection d'un formulaire onBlur, onChange, onFocus

Bouton Submit onSubmit

Champ de texte et zone de texte onBlur, onChange, onFocus, onSelect

4.3 Quelques exemples d'vnements

4.3.1 Ouverture d'une bote de dialogue lors d'un click

Le code correspondant une bote de dialogue est trs simple:

window.alert("Votre Texte");

Il s'agit donc de le mettre dans la balise d'un lien hypertexte:

Exemple :

Ouverture d'une boite de dialogue lors d'un click

Cliquez ici!

Analyse du script :

le gestionnaire d'vnement onClicka t insr dans la balise de lien hypertexte

8/8/2019 20917021-Javascript[1]

19/47


4.3.2 Modification d'une image lors du survol d'un lien par le pointeur de la souris

Il peut tre agrable de jouer avec le gestionnaire OnMouseOverpour crer un menu interactif qui se modifie aupassage de la souris. On peut mme ajouter le gestionnaire OnMouseOutpour rtablir l'image originale lorsque lecurseur quitte l'image (Rappel: Son utilisation est limite aux navigateurs supportant javascript 1.1 et suprieur!).

Exemple :

Modification d'une image lors du passage de la souris

Analyse du script :

Pour pouvoir associer un vnement une image il faut que celle-ci soit considre comme un lien, ainsi on

place la balise entre les balises et

document.Img_1 est le nom du champ image du formulaire, et src est lattribut correspondant au fichier

charger.

Au chargement de la page, le fichier mentionn dans lattribut scr de la balise est charg(image1.gif).

Lorsque la souris passe sur limage (onMouseOver) cest le fichierimage2.gifqui est charg. Lorsque la souris quitte limage (onMouseOut) cest le fichierimage1.gifqui est charg

Lexemple suivant est similaire au prcdent, seulement cette fois ci, le fait de cliquer sur limage entrane le

chargement de la page fichier_cible.htm:


8/8/2019 20917021-Javascript[1]

20/47


5 Les oprateurs

Les oprateurs sont des symboles qui permettent de manipuler des variables, c'est--dire effectuer des oprations, les

valuer,

On distingue plusieurs types d'oprateurs:

les oprateurs de calcul

les oprateurs d'assignation les oprateurs d'incrmentation

les oprateurs de comparaison

les oprateurs logiques

les oprateurs bit--bit (bitwise)

les oprateurs de rotation de bit

5.1 Les oprateurs de calcul

Les oprateurs de calcul permettent de modifier mathmatiquement la valeur d'une variable

Oprateur Dnomination Effet Exemple Rsultat (avec x valant 7)

+ oprateur d'addition Ajoute deux valeurs x+3 10

-oprateur de

soustractionSoustrait deux valeurs x-3 4

*oprateur de

multiplicationMultiplie deux valeurs x*3 21

/plus: oprateur de

divisionDivise deux valeurs x/3 2.3333333

= oprateur d'affectation Affecte une valeur une variable x=3 Met la valeur 3 dans la variable x

5.2 Les oprateurs d'assignation

Ces oprateurs permettent de simplifier des oprations telles que ajouter une valeur dans une variable et stocker le

rsultat dans la variable. Une telle opration s'crirait habituellement de la faon suivante par exemple:x=x+2Avec les oprateurs d'assignation il est possible d'crire cette opration sous la forme suivante:x+=2Ainsi, si la valeur de x tait 7 avant opration, elle sera de 9 aprs...

Les autres oprateurs du mme type sont les suivants:

Oprateur Effet

+= additionne deux valeurs et stocke le rsultat dans la variable ( gauche)

-= soustrait deux valeurs et stocke le rsultat dans la variable*= multiplie deux valeurs et stocke le rsultat dans la variable

/= divise deux valeurs et stocke le rsultat dans la variable


8/8/2019 20917021-Javascript[1]

21/47


5.3 Les oprateurs d'incrmentation

Ce type d'oprateur permet de facilement augmenter ou diminuer d'une unit une variable. Ces oprateurs sont trs

utiles pour des structures telles que des boucles, qui ont besoin d'un compteur (variable qui augmente de un en un).

Un oprateur de typex++ permet de remplacer des notations lourdes telles quex=x+1 ou bienx+=1

Oprateur Dnomination Effet Syntaxe Rsultat (avec x valant 7)

++ Incrmentation Augmente d'une unit la variable x++ 8

-- Dcrmentation Diminue d'une unit la variable x-- 6

x++ est une post-incrmentation. Cela signifie que lors de lvaluation dune expression arithmtique, lincrmentation

de x sera ralise aprs lexpression proprement dite.Exemple :

x = 7 ;

a = 2 + x++ ; // quivaut : a = 2 + x; puis x = x + 1; a vaut 9 et x vaut 8

++x est une pr-incrmentation. Cela signifie que lors de lvaluation dune expression arithmtique, lincrmentation

de x sera ralise avant lexpression proprement dite.

Exemple :x = 7 ;

a = ++x + 2; // quivaut : x = x + 1; puis a = x + 2; a vaut 10 et x vaut 8

( les oprations sont ralises dans cet ordre quelque soit la position de x dans lexpression )

5.4 Les oprateurs de comparaison

Oprateur Dnomination Effet Exemple Rsultat

==

A ne pas confondre avec

le signe d'affectation (=)!!

oprateur

d'galit

Compare deux valeurs et vrifie leur

galitX == 3

Retourne 1 si X est gal

3, sinon 0

1 (0110 >> 1) 3 (0011)

>>>Rotation droite avec

remplissage de zros

Dcale les bits vers la droite (divise par 2

chaque dcalage). Les zros qui sortent droite

sont perdus, tandis que des zros sont insrs

gauche

6 >>> 1 (0110 >>> 1) 3 (0011)


8/8/2019 20917021-Javascript[1]

23/47


5.8 Les priorits

Lorsque l'on associe plusieurs oprateurs, il faut que le navigateur sache dans quel ordre les traiter, voici donc dans

l'ordre dcroissant les priorits de tous les oprateurs:

() []

-- ++ ! ~ -

* / %

+ -

< = >

== !=

^

|

&& ||

? :

= += -= *= /= %= = >>>= &= ^= |=

,


8/8/2019 20917021-Javascript[1]

24/47


6 Les structures de contrle

Les structures de contrle alternatives (ou conditionnelles) et itratives (ou rptitives) ncessitent lusage dun test

spcifique appel condition. La condition est une expression dont le rsultat de son valuation prend toujours sesvaleurs dans lensemble des boolens (true ou false).

6.1 Les structures alternatives (ou conditionnelles)On appellestructure alternative ou conditionnelle lensemble des instructions (le traitement) qui sont ralises si une

condition est vraie ou non. Les structures conditionnelles ncessitent lusage dun test appel condition.

6.1.1 L'instruction if

L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe

diffrente...). Elle permet d'excuter une srie d'instructions si jamais une condition est ralise (condition vraie).

La syntaxe de cette expression est la suivante:

if (condition)

{liste d'instructions

}

Remarques :

la condition doit tre entre des parenthses

il est possible de dfinir plusieurs conditions remplir avec les oprateurs ET et OU (&& et ||)

Exemples :

if ((condition1 )&& (condition2)) teste si les deux conditions sont vraies

if ((condition1) || (condition2)) excutera les instructions si l'une ou l'autre des deux conditions est

vraie

s'il n'y a qu'une instruction, les accolades ne sont pas ncessaires.

6.1.2 L'instruction if ... else

L'instruction ifdans sa forme basique ne permet de tester qu'un tat de la condition (condition vraie), or la plupart du

temps on aimerait pouvoir choisir les instructions excuter en cas de non ralisation de la condition. (condition

fausse).

L'expression if ... else permet d'excuter une autre srie d'instructions en cas de non ralisation de la condition.La syntaxe de cette expression est la suivante:

if (condition)

{

liste d'instructions // si la condition est ralise (vraie)}

else

{

autre srie d'instructions // si la condition nest pas ralise (fausse)

}

6.1.3 loprateur ternaire (une faon plus courte de faire un test )

Il est possible de faire un test avec une structure beaucoup moins lourde grce la structure suivante:

(condition) ? instruction si condition vraie : instruction si condition fausse ;

Remarques :

la condition doit tre entre parenthses

Lorsque la condition est vraie, l'instruction gauche des : est excute

Lorsque la condition est fausse, l'instruction droite des : est excute


8/8/2019 20917021-Javascript[1]

25/47


6.2 Les structures itratives (ou rptitives : les boucles)

Les boucles sont des structures qui permettent d'excuter plusieurs fois la mme srie d'instructions jusqu' ce qu'une

condition ne soit plus ralise.

La faon la plus commune de faire une boucle, est de crer un compteur (une variable qui s'incrmente, c'est--dire qui

augmente de 1 chaque tour de boucle) et de faire arrter la boucle lorsque le compteur dpasse une certaine valeur.

6.2.1 Linstruction for

L'instructionforpermet d'excuter plusieurs fois la mme srie d'instructions: c'est une boucle!Dans sa syntaxe, il suffit de prciser le nom de la variable qui sert de compteur (et ventuellement sa valeur de dpart,

la condition sur la variable pour laquelle la boucle s'arrte (basiquement une condition qui teste si la valeur du

compteur dpasse une limite) et enfin une instruction qui incrmente (ou dcrmente) le compteur.

La syntaxe de cette expression est la suivante:

for (initialisation du compteur; condition; modification du compteur)

{

liste d'instructions

}

Lordre dvaluation (excution) des expressions est la suivante :

1) initialisation du compteur ; 2) condition ; 3) liste dinstructions ; 4) modification du compteur.

Exemple :

for ( i = 1 ; i < 6 ; i++ )

{

Alert( i ) ;

}

Cette boucle affiche 5 fois la valeur de i, c'est--dire 1,2,3,4,5Elle commence i = 1, vrifie que i est bien infrieur 6, etc... jusqu' atteindre la valeur i = 6, pour laquelle la

condition ne sera plus ralise, la boucle s'interrompra et le programme continuera son cours.

il faudra toujours vrifier que la boucle a bien une condition de sortie et que le compteur s'incrmente

correctement.

une instructionAlert(i); dans votre boucle est un bon moyen pour vrifier la valeur du compteur pas pas!

il faut bien compter le nombre de fois que l'on veut faire excuter la boucle:

for(i=0;i

8/8/2019 20917021-Javascript[1]

26/47


6.3 Linstruction continue (saut inconditionnel)

Il peut tre ncessaire de faire sauter de la boucle une ou plusieurs valeurs sans pour autant mettre fin celle-ci.

La syntaxe de cette expression est "continue;" (cette instruction se place dans une boucle!), on l'associe gnralement une structure conditionnelle, sinon les lignes situes entre cette instruction et la fin de la boucle seraient obsoltes.

Exemple :

Imaginons que l'on veuille imprimer pour x allant de 1 10 la valeur de 1/(x-7) ... il est vident que pour x = 7 il y

aura une erreur. Heureusement, grce l'instruction continue il est possible de traiter cette valeur part puis de

continuer la boucle!x = 1;

while ( x

8/8/2019 20917021-Javascript[1]

27/47


7 Les fonctions

On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de lafonction dans le corps du programme principal. Cette notion de sous-programme est gnralement appele fonction ou

procdure dans les langages autres que le Javascript (toutefois leur syntaxe est gnralement diffrente...).

Les fonctions permettent d'excuter dans plusieurs parties du programme une srie d'instructions, cela permet une

simplicit du code et donc une taille de programme minimale. D'autre part, une fonction peut faire appel elle-mme,

on parle alors de fonction rcursive (il ne faut pas oublier de mettre une condition de sortie au risque sinon de ne pas

pouvoir arrter le programme).

Javascript contient des fonctions prdfinies qui peuvent s'appliquer pour un ou plusieurs types d'objets spcifiques, on

appelle ces fonctions des mthodes.

7.1 La dclaration d'une fonction

Avant d'tre utilise, une fonction doit tre dfinie car pour l'appeler dans le corps du programme il faut que le

navigateur la connaisse, c'est--dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient. La

dfinition d'une fonction s'appelle "dclaration". La dclaration d'une fonction se fait grce au mot cl function selonla syntaxe suivante:

function Nom_De_La_Fonction(argument1, argument2, ...){

liste d'instructions

}

Remarques :

le mot clfunction est suivi du nom que l'on donne la fonction

le nom de la fonction suit les mmes rgles que les noms de variables:

- le nom doit commencer par une lettre

- un nom de fonction peut comporter des lettres, des chiffres et les caractres _ et & (les espaces ne sont pas

autoriss!)

- le nom de la fonction, comme celui des variables est sensible la casse (diffrenciation entre les

minuscules et majuscules)

Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthses doivent rester prsentes

Il ne faut pas oublier de refermer les accolades

Le nombre d'accolades ouvertes (fonction, boucles et autres structures) doit tre gal au nombre de

parenthses fermes!

La mme chose s'applique pour les parenthses, les crochets ou les guillemets!

Une fois cette tape franchie, votre fonction ne s'excutera pas tant que l'on ne fait pas appel elle quelque part dans la

page!


8/8/2019 20917021-Javascript[1]

28/47


7.2 Appel de fonction

Pour excuter une fonction, il suffit de faire appel elle en crivant son nom (une fois de plus en respectant la casse)

suivie d'une parenthse ouverte (ventuellement des arguments) puis d'une parenthse ferme:

Nom_De_La_Fonction();

Remarques :

le point virgule signifie la fin d'une instruction et permet au navigateur de distinguer les diffrents blocs

d'instructions

si jamais vous avez dfini des arguments dans la dclaration de la fonction, il faudra veiller les inclure lors

de l'appel de la fonction (le mme nombre d'arguments spars par des virgules!)

Veillez toujours ce qu'une fonction soit dclare avant d'tre appele, sachant que le navigateur traite la page de

haut en bas (Pour viter des erreurs de ce type on dclare gnralement les fonctions dans des balises SCRIPT situes

dans l'en-tte de la page, c'est--dire entre les balises et )

Grce au gestionnaire d'vnement onLoad( placer dans la balise BODY) il est possible d'excuter une fonction auchargement de la page, comme par exemple l'initialisation des variables pour votre script, et/ou le test du navigateur

pour savoir si celui-ci est apte faire fonctionner le script.Il s'utilise de la manire suivante :

function Chargement()

{

alert('Bienvenue sur le site');

}

Ceci est ma premire page HTML !

Rsultat obtenu :


8/8/2019 20917021-Javascript[1]

29/47


7.3 Les paramtres dune fonction

Il est possible de passer des paramtres une fonction, c'est--dire lui fournir une valeur ou le nom d'une variable afin

que la fonction puisse effectuer des oprations sur ces paramtres ou bien grce ces paramtres.

Lorsque vous passez plusieurs paramtres une fonction il faut les sparer par des virgules, aussi bien dans la

dclaration que dans l'appel et il faudra veiller bien passer le bon nombre de paramtres lors de l'appel au risque

sinon de crer une erreur dans votre Javascript...

Imaginons que l'on veuille crer une page Web qui affiche une bote de dialogue (les botes de dialogues sont viterdans vos pages car elles sont nervantes, mais c'est toutefois une manire simple d'apprendre le Javascript) qui affiche

un texte diffrent selon le lien sur lequel on clique.

La mthode de base consiste faire une fonction pour chaque texte afficher:

function Affiche1()

{

alert('Texte 1');

}

function Affiche2()

{

alert('Texte 2');

}

Texte1

Texte2

Il existe toutefois une mthode plus judicieuse qui consiste crer une fonction qui a comme paramtre le texte

afficher:

function Affiche(Texte)

{

alert(Texte);

}

Texte1

Texte2

Rsultat:Aucune diffrence visuellement mais vous n'avez plus qu'une seule fonction qui permet dafficher n'importe quel

texte...


8/8/2019 20917021-Javascript[1]

30/47


7.4 Travailler sur des variables dans les fonctions

Lorsque vous manipulerez des variables dans des fonctions, il vous arrivera de constater que vous avez beau modifier

la variable dans la fonction celle-ci retrouve sa valeur d'origine ds que l'on sort de la fonction...

Cela est du la porte des variables, c'est--dire si elles ont t dfinies comme variables globales ou locales.

Une variable dclare implicitement (non prcde du mot var) sera globale , c'est--dire accessible aprs

excution de la fonction

Une variable dclare explicitement (prcde du mot var) sera locale , c'est--dire accessible uniquementdans la fonction, toute rfrence cette variable hors de la fonction provoquera une erreur (variable inconnue).

7.5 Le mot cl this

Lorsque vous fates appel une fonction partir d'un objet, par exemple un formulaire, le mot cl this fait rfrence l'objet en cours et vous vite d'avoir dfinir l'objet en le nommant explicitement (window.objet1.objet2....).Pour manipuler les proprits de l'objet il suffira de taper this.propriete (opropriete reprsente bien sr le nom de la

proprit).


8/8/2019 20917021-Javascript[1]

31/47


8 Les objets

Les navigateurs ont leurs propres objets avec leurs proprits respectives. Il est toutefois possible de crer ses propres

objets avec les proprits qu'on leur dfinit.

Imaginons que l'on veuille par exemple crer un objetArbre avec ses proprits :

type

taille

age

Il est possible de crer l'objetArbre en crant une fonction dont le nom est Arbre et qui dfinit les proprits de l'objet

en cours grce au mot cl this, en passant en paramtre chacune des proprits :function Arbre(arg_Type, arg_Taille, arg_Age)

{

this.Type = arg_Type;this.Taille = arg_Taille;this.Age = arg_Age;

}

Grce au mot cl new, il va tre possible de crer des instances de l'objet Arbre (c'est--dire des objets possdant lesproprits de l'objetArbre) :Arbre1 = new Arbre("peuplier", 14, 20);

Il est alors possible de trouver le type de larbre :

alert(Arbre1.Type) ;

Ou de modifier sa taille :

Arbre1.Taille = 15 ;

On peut ainsi crer autant d'instances que l'on dsire.

Il est en plus possible d'ajouter un objet existant en tant que proprit d'un autre objet. Imaginons que vous criez un

objetProprietaire :function Proprietaire(arg_Nom, arg_Prenom)

{

this.Nom = arg_Nom;this.Prenom = arg_Prenom;

}

Dfinissons maintenant l'objetArbre comme suit :function Arbre(arg_Type, arg_Taille, arg_Age, arg_Proprio)

{

this.Type = arg_Type;this.Taille = arg_Taille;this.Age = arg_Age;this.Proprio = arg_Proprio; // cette proprit deviendra un objet lors de la cration de l instance Arbre1

// car le paramtre transmis est un objet instanci

}

Cration de l'instanceProprio1Proprio1 = new Proprietaire("DUPONT","Ren");

Cration de l'instanceArbre1Arbre1 = new Arbre("tilleul","20","100",Proprio1) ;


8/8/2019 20917021-Javascript[1]

32/47


8.1 Les mthodes

Une mthode est une fonction associe un objet, c'est--dire une action que l'on peut faire excuter un objet.

Les mthodes des objets du navigateur sont des fonctions dfinies l'avance par les normes HTML, on ne peut donc

pas les modifier, il est toutefois possible de crer une mthode personnelle pour un objet que l'on a cr soi-mme.

Prenons par exemple une page HTML, elle est compose d'un objet appel document.

L'objet documenta par exemple la mthode write() qui lui est associe et qui permet de modifier le contenu de la page

HTML en affichant du texte. Une mthode s'appelle un peu comme une proprit, c'est--dire de la manire suivante:window.objet.methode();

Dans le cas de la mthode write(), l'appel se fait comme suit:

window.document.write();

8.1.1 La mthode write()

La mthode write() de l'objet documentpermet de modifier de faon dynamique le contenu d'une page HTML, on peutl'utiliser de diffrentes faons:

soit en passant directement le texte en paramtres :

document.write("bonjour");qui aura pour effet de concatner la chane 'bonjour' l'endroit o est plac le script

soit en passant le texte par l'intermdiaire d'une variable :

Chaine = 'bonjour';document.write(Chaine);qui aura pour effet de concatner la chane 'bonjour' (contenue dans la variable Chaine) l'endroit o est placle script

soit en utilisant les deux:

Chaine = 'bonjour';document.write('je vous passe le' + Chaine);qui aura pour effet de concatner la chane 'bonjour' (contenue dans la variable Chaine) la suite de la chane

de caractres 'je vous passe le' dans la page HTML

Il est ainsi possible d'utiliser des balises HTML l'intrieur mme de la mthode write:

document.write('Bonjour'); < !couleurrouge

8.1.2 La mthode writeln()

La mthode writeln fonctionne exactement comme la mthode write la seule diffrence qu'elle ajoute un retourchariot la fin de la chane. Or un retour chariot (en HTML) est ignor par le navigateur (Rappel: un retour la ligne

se fait avec la balise
).

Cette mthode n'a donc un avantage que lorsqu'elle est utilise entre les balises et qui formatent letexte comme dans un fichier texte (et donc qui prend en compte le caractre de retour la ligne).


8/8/2019 20917021-Javascript[1]

33/47


8.2 Dfinir une mthode pour un objet

Il est possible de dfinir une mthode pour un type d'objet que l'on a cr en incluant une fonction en tant que

proprit d'un objet. Il suffit pour cela de mentionner le nom de la fonction (sans les parenthses) dans la liste des

paramtres lors de la cration de lobjet.

Reprenons l'exemple de l'arbre :

On dfinit tout d'abord un propritaire :

function Proprietaire(arg_Nom, arg_Prenom)

{

this.Nom = arg_Nom;

this.Prenom = arg_Prenom;}

Puis on dfinit l'objetArbre comme suit :function Arbre(arg_Type, arg_Taille, arg_Age, arg_Proprio, arg_Affiche)

{

this.Type = arg_Type;this.Taille = arg_Taille;

this.Age = arg_Age;this.Proprio = arg_Proprio;this.Affiche = arg_Affiche;

}

Et enfin on cre une fonction qui affiche le nom du propritaire d'un arbre ainsi que quelques caractristiques de celui-

ci :

function AfficheInfos()

{

alert(this.Proprio.Prenom + + this.Proprio.Nom + ' possde un ' + this.Type + de + this.Age + ans);

}

Cration de l'instanceProprio1 avec linitiation des proprits :Proprio1 = new Proprietaire("DUPONT","Ren");

Cration de l'instanceArbre1 avec linitiation des proprits :Arbre1 = new Arbre("tilleul","20","100",Proprio1,AfficheInfos);

Appel de la mthodeAfficheInfos() de l'objetArbre1 :Arbre1.Affiche();

Elle affichera un message dalerte contenant :Ren DUPONT possde un tilleul de 100 ans

Cration de l'instanceProprio2 avec linitiation des proprits :Proprio2 = new Proprietaire("MARTIN","Marcel");

Cration de l'instanceArbre2 avec linitiation des proprits :

Arbre2 = new Arbre("bouleau","20","50",Proprio2,AfficheInfos);

Appel de la mthodeAfficheInfos() de l'objetArbre2 :Arbre2.Affiche();

Elle affichera un message dalerte contenant : Marcel MARTIN possde un bouleau de 50 ans


8/8/2019 20917021-Javascript[1]

34/47


8.3 Prsentation des objets du navigateur

Lorsque vous ouvrez une page Web, le navigateur cre des objets prdfinis correspondant la page Web, l'tat du

navigateur, et peuvent donner beaucoup d'informations qui vous seront utiles.

Les objets de base du navigateur sont les suivants :

navigator: qui contient des informations sur le navigateur de celui qui visite la page

window: c'est l'objet o s'affiche la page, il contient donc des proprits concernant la fentre elle-mme mais

aussi tous les objets-enfants contenus dans celle-ci location: contient des informations relatives l'adresse de la page l'cran

history: c'est l'historique, c'est--dire la liste de liens qui ont t visits prcdemment

document: il contient les proprits sur le contenu du document (couleur d'arrire plan, titre, ...)

Ces objets sont largement dpendant du contenu de la page. En effet, mis part des objets tels que navigatorqui sontfigs pour un utilisateur donn, le contenu des autres objets variera suivant le contenu de la page, car suivant la page,

les objets prsents dans celles-ci (sous-objets des objets dcrits prcdemment) sont diffrents.

8.4 Classification des objets du navigateur

Les objets du navigateur sont classs dans une hirarchie qui dcrit la page affiche l'cran, et qui permet d'accder n'importe quel objet grce une dsignation dpendant de la hirarchie (on part du sommet puis on descend

l'arborescence).

Dans cette hirarchie, les descendants d'un objet sont des proprits de ces objets mais peuvent aussi tre des objets

qui contiennent eux mmes des proprits.

Niveau 1 Niveau 2 Niveau 3 Niveau 4 Commentaire

navigator Informations sur le browser utilis

window

Gestion de la fentre d'affichage

parent, frames,

self, top

Dsignation de la sous-fentre : window etselfdsignent

la fentre courante,parentdsigne la fentre pre, et top

dsigne la fentre racine.location Informations sur l'emplacement de la page

history Accs l'historique (pages prcdemment visites)

document

Informations sur le contenu de la fentre (lments qui

composent la page)

images Rfrence des images prsentes dans la page

forms Rfrence des formulaires prsents dans la page

elements Rfrence des lments (objets) prsents dans le

formulaire

links Rfrence des liens prsents dans la page

anchors Rfrence des ancrages prsents dans la page

8.5 Comment accder un objet?

Pour accder un objet du navigateur, il faut parcourir la hirarchie du navigateur, en partant du sommet (l'objet

window), puis en parcourant tous les maillons jusqu' atteindre l'objet dsir.La syntaxe est window.objet1.objet2.objet3.objet_vise (ici il y a trois objets intermdiaire objet1objet2objet3 mais cenombre peut varier de 0 un trs grand nombre d'objets, suivant l'imbrication de vos objets dans la page...).

Pour accder une proprit de l'objet vis il suffit de rajouter un point, puis le nom de la proprit.

Certaines proprits sont modifiables, c'est--dire que dynamiquement on va pouvoir modifier un lment (du texte,

une image, ...). Dautres sont par contre en lecture seule, c'est--dire qu'elles permettent uniquement de rcuprer des

informations mais que l'on ne peut pas les modifier.


8/8/2019 20917021-Javascript[1]

35/47


8.6 L'objet window

L'objet window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page Web,il contient donc:

l'objet document: la page en elle-mme

l'objet location: le lieu de stockage de la page l'objet history: les pages visites prcdemment

l'objetframes: les cadres (division de la fentre en sous-fentres)

8.6.1 Les proprits de l'objet window

proprit description lecture seule

defaultstatusIl s'agit du message qui s'affiche par dfaut dans

la barre d'tat du navigateurnon, modifiable tout moment

framesIl s'agit d'un tableau qui contient les cadres

prsents dans la fentreTous les lments deframes sont en lecture seule

lengthnombre de cadres (nombre d'lments du tableau

frames)Lecture seule

name nom de la fentre dans laquelle on se trouve Lecture seule

parentIl s'agit de la fentre qui englobe celle dans

laquelle on se trouve (si il y en a une..)Lecture seule, contient des proprits

selfSynonyme de la fentre actuelle (redondance ou

prcision?)Lecture seule, contient des proprits

status

Il s'agit d'un message temporaire qui s'affiche

dans la barre d'tat du navigateur suite un

vnement

non, modifiable tout moment, vous devez retournez

la valeurtrue pour l'utiliser avec onMouseOver

topIl s'agit de la fentre de plus haut niveau, celle

qui contient tous les cadres (frames)Lecture seule, contient des proprits

window Il s'agit de la fentre actuelle... Lecture seule, contient des proprits

Les proprits window,self,frames, top et parentpermettent de naviguer dans le systme de sous-fentres, appelesframes.

les proprits selfet window sont les mmes, elles permettent de dsigner la page en cours, leur seul but estd'accentuer la prcision de la hirarchie pour une meilleure lecture du code. en effet, self.name est plusexplicite que name

les proprits top et parentpermettent de remonter dans la hirarchie pour atteindre des fentres de niveausuprieur, notamment pour "sortir" desframes...

la propritframes est un tableau qui permet de cibler un cadre spcifique faisant partie de la fentre o on setrouve. Pour dsigner un cadre on utilise soit la notation window.frames[i] o i reprsente le numro du cadre,soit window.nom_du_cadre en dsignant le cadre directement par le nom qu'on lui a assign dans la balise

frameset.


8/8/2019 20917021-Javascript[1]

36/47


8.6.2 Les mthodes de l'objet window

L'objet window possde des mthodes relatives aux fentres :

- resizeTo() Dimensionne la taille d'une fentre. Ex : window.top.page.resizeTo(100,100); // nombre de pixels

- resizeBy() Modifie la taille d'une fentre. Ex : window.top.page.resizeBy(100,100); // nombre de pixels

- moveTo() Positionne une fentre. Ex : window.top.page.moveTo(100,100); // nombre de pixels

- moveBy() Dplace une fentre. Ex : window.top.page.moveBy(100,100); // nombre de pixels

- Les mthodes alert(), confirm() etprompt() sont des mthodes qui font apparatre une bote de dialogue, elles sont

expliques en dtail dans le chapitreBotes de dialogue.- Les mthodes open() et close() sont bien videmment destines permettre l'ouverture et la fermeture de fentres.

Toutefois la syntaxe de la mthode open() est longue car elle admet un nombre important de paramtres :

La mthode open() permet d'ouvrir une fentre, voici sa syntaxe:window.open("URL","nom_de_la_fenetre","options_de_la_fenetre");

URL dsigne l'url de la page qui sera affiche dans la nouvelle fentre, c'est--dire l'emplacement physique de

celle-ci.

Les options de la fentre sont les suivantes :

option description

directory =yes/no Affiche ou non les boutons de navigationlocation =yes/no Affiche ou non la barre d'adresse

menubar =yes/no Affiche ou non la barre de menu (fichier, edition, ...)

resizable =yes/no Dfinit si la taille de la fentre est modifiable ou non

scrollbars =yes/no Affiche ou non les ascenseurs (barres de dfilement)

status =yes/no Affiche ou non la barre d'tat

toolbar =yes/no Affiche ou non la barre d'outils

width = largeur (en pixels) Dfinit la largeur

height = hauteur (en pixels) Dfinit la hauteur

Ainsi, il est possible d'utiliser cette mthode avec n'importe quel gestionnaire d'vnement, directement dans le

code excuter ou bien dans une fonction.

les options doivent tre saisies les unes aprs les autres, spares par des virgules, sans espace

l'ensemble des options doit tre encadr par les guillemets

Chacune des fentres doit cependant tre ferme, il faut donc se servir de la mthode close() qui permet de fermerune fentre.

La mthode close() requiert le nom de la fentre comme argument, il suffit donc de crer un bouton (image,hypertexte, ou bouton de formulaire) qui permettra de fermer cette fentre.

Pour un lien hypertexte, le code sera :

Cliquez ici pour fermer la fentre

Pour un bouton (image), le code sera :

Il est bien videmment possible d'utiliser cette procdure avec tous les gestionnaires d'vnements, en utilisant

par exemple une syntaxe proche de celle-ci :


8/8/2019 20917021-Javascript[1]

37/47


8.7 Les botes de dialogue

Une bote de dialogue est une fentre qui s'affiche au premier plan suite un vnement, et qui permet

Soit d'avertir l'utilisateur

Soit de le confronter un choix

Soit de lui demander de complter un champ pour rcuprer une information

Ce type de bote est utiliser avec parcimonie car elle oblige une action de la part de l'utilisateur, et est terme trsnervante... Les botes de dialogues sont toutefois un moyen simple de dbugger (reprer les erreurs), en affichant un

point donn une fentre contenant la valeur d'une variable.

Javascript en propose trois diffrentes dont l'utilisation se rapporte pour chacune une de celles dcrites ci-dessus. Ce

sont des mthodes de l'objet window.Ces botes de dialogue ont une mention Javascript, par exemple "Javascript user prompt" pour permettre de savoir

l'utilisateur qu'il s'agit d'une bote d'invite de la page en cours. En effet certains webmasters peu scrupuleux pourraient

faire croire qu'il s'agit d'une bote windows et rcuprer le mot de passe (Suite une erreur du fournisseur d'accsveuillez entrer votre login et votre mot de passe)...

8.7.1 La mthode alert()

La mthode alert() permet d'afficher dans une bote toute simple, compose d'une fentre et d'un bouton OK, le textequ'on lui fournit en paramtre. Ds que cette bote est affiche, l'utilisateur n'a d'autre alternative que de cliquer sur le

bouton OK.

Son unique paramtre est une chane de caractres, on peut donc lui fournir directement cette chane de caractres

entre guillemets, lui fournir une variable dont il affichera le contenu, ou bien mler les deux en concatnant les chanes

grce l'oprateur+.

Voici sa syntaxe :

alert(nom_de_la_variable);

alert('Chane de caractres');

alert('Chane de caractres' + nom_de_la_variable);

La chane de caractres peut (et doit dans certains cas) contenir des caractres marqus d'un antislash (\).

Par exemple, si vous voulez obtenir la bote dalerte suivante :

Il faudra crire le script suivant :

alert('Message d\'alerte \nAu feu!!');

8.7.2 La mthode confirm()

La mthode confirm() est similaire la mthode alert(), si ce n'est qu'elle permet un choix entre "OK" et "Annuler".Lorsque l'utilisateur appuie sur "OK" la mthode renvoie la valeurtrue. Elle renvoiefalse dans le cas contraire...

Elle admet comme alert() un seul paramtre: une chane de caractres.Sa syntaxe est :

confirm('Chane de caractres');


8/8/2019 20917021-Javascript[1]

38/47


8.7.3 La mthode prompt()

La mthode prompt() est un peu plus volue que les deux prcdentes puisqu'elle fournit un moyen simple dercuprer une information provenant de l'utilisateur, on parle alors de bote d'invite.

La mthodeprompt() requiert deux arguments:

le texte d'invite

la chane de caractres par dfaut dans le champ de saisie

Sa syntaxe est donc la suivante :

prompt('Posez ici votre question','chane par dfaut');

Cette bote d'invite retourne la valeur de la chane saisie par l'utilisateur, elle retourne la valeurnullsi jamais aucuntexte n'est saisi...

Exemple :

Un bouton de type submit :

Le fait de cliquer sur ce bouton doit provoquer laffichage de la bote dinvite gnre par la mthodeprompt() :

En cliquant sur nous devons obtenir la bote dalerte suivante :

Nota : lanne dans la zone de texte est modifiable.

Script correspondant :

La mthode prompt()

function lireAnnee()

{

annee = prompt("En quelle anne sommes-nous ?", 2000);

alert("Vous avez rpondu : " + annee) ;

}


8/8/2019 20917021-Javascript[1]

39/47


8.8 L'objet navigator

L'objet navigatorest un objet qui permet de rcuprer des informations sur le navigateur qu'utilise le visiteur.Cela parat totalement inutile premire vue, toutefois, comme vous le savez srement, il existe de grandes diffrences

entre diffrentes versions d'un mme navigateur (intgration de nouvelles technologies), ainsi qu'entre des navigateurs

de types diffrents (les deux antagonistes sont gnralement Netscape Navigator et Microsoft Internet Explorer qui

d'une part n'interprtent pas toutes les balises HTML et les instructions Javascript de la mme manire, et qui, d'autre

part, possde parfois des balises HTML propritaires, c'est--dire qui leur sont propres...).

Toutes les proprits de l'objet navigatorsont en lecture seule, elles servent uniquement rcuprer des informationset non les modifier.

8.8.1 Les proprits de l'objet navigator

Les proprits de l'objet navigator sont peu nombreuses, elles permettent en fait de retourner des portions de

l'information sur votre navigateur qui est en fait une chane de caractres.

Proprit Description Pour votre navigateur

navigator.appCodeNameretourne le code du navigateur. Tout navigateur a

pour nom de code Mozilla, cette information sembledonc inutile

Mozilla

navigator.appNameretourne le nom du navigateur (la plupart du temps la

marque). Cette proprit est utile pour diffrencier

les navigateurs de Netscape et de Microsoft.

Microsoft Internet Explorer

navigator.appVersion

retourne la version du navigateur. Cette proprit

prend la forme suivante:

Numro de version( plate-forme ; systme

d'exploitation ; nationalit)

Elle est utile pour connatre le systme d'exploitation

de l'utilisateur, mais surtout, associe avec la

proprit navigator.appName elle permet deconnatre les fonctionnalits que supporte le

navigateur de votre visiteur.

4.0 (compatible; MSIE 5.5; Windows

NT 4.0; H010818)

navigator.userAgent

retourne la chane de caractres qui comprend toutes

les informations. Les proprits ci-dessus offrent un

moyen pratique de rcuprer une partie de cette

information (cette chane tant de longueur variable,

il ne serait pas vident d'en rcuprer une portion

sans les autres proprits...)

Mozilla/4.0 (compatible; MSIE 5.5;

Windows NT 4.0; H010818)

ESAT

Documents

20917021-Javascript[1]