Vous êtes sur la page 1sur 21

JavaScript

10 minutes pour comprendre Core JavaScript Client-side JavaScript Applications


http://campus.ec-lyon.fr/options/tic/js.pdf

JavaScript

D. Muller - 13-11-99

JavaScript

10 minutes pour comprendre

JavaScript

D. Muller - 13-11-99

Qu'est-ce que JavaScript


JavaScript est un langage de programmation de scripts. Un script est un programme dont le code source est inclus dans un document HTML. Ce programme est interprt et s'excute sur la machine du client lorsque le document est charg ou lors d'une action de l'utilisateur (clic ou dplacement du curseur par exemple). Les principes, l'implmentation, le fonctionnement, les domaines d'application de JavaScript n'ont strictement rien voir avec ceux de Java. Seule une ventuelle ressemblance superficielle au niveau de la syntaxe et la volont de profiter d'un effet de mode relatif Java ont valu ce langage de s'appeler JavaScript.
JavaScript - 10 minutes pour comprendre D. Muller - 13-11-99

Fonctionnement de JavaScript
Serveur Client
WW W

Le client demande un document HTML au serveur. Le serveur envoie le document au client Le document contient un script. Le client interprte le script
<SCRIPT LANGUAGE="JavaScript"> </SCRIPT>

JavaScript

- 10 minutes pour comprendre -

D. Muller - 13-11-99

Exemple de programme JavaScript


<HEAD> <SCRIPT LANGUAGE="JavaScript"><!-function maj() { document.write("Dernire mise jour : " + document.lastModified); } //--> </SCRIPT> </HEAD> <BODY> Ceci est un essai <P> <SCRIPT><!-maj(); //--> </SCRIPT>
<NOSCRIPT>Dommage !</NOSCRIPT>
JavaScript - 10 minutes pour comprendre -

! !
D. Muller - 13-11-99

Possibilits de JavaScript
Contrairement Java, JavaScript est compltement intgr au navigateur. Un programme JavaScript a accs des informations internes au navigateur (version, plugins), et tous les lments de la page HTML courante (cf. DOM). Les principales applications de JavaScript sont :

JavaScript

la validation de formulaires avant envoi au serveur, la dtection de type et de version de navigateur, la gestion de fentres (pop-ups, cadres), la prservation d'informations contextuelles, la gnration automatique de date, la dtection de plug-in, les calculs ct client, les effets d'images...
- 10 minutes pour comprendre D. Muller - 13-11-99

Versions JavaScript
JavaScript a t invent par Netscape et implment partir de Navigator 2.0. Bien entendu (!) JavaScript a volu au fur et mesure des versions de navigateurs. La correspondance entre les versions du langage et les versions des navigateurs est rappele ci-dessous :
Version JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3 Navigator Navigator 2.0 Navigator 3.0 Navigator 4.0 Navigator 4.06 Explorer I. Explorer 3.0 I. Explorer 4.0 I. Explorer 5.0

JavaScript

- 10 minutes pour comprendre -

D. Muller - 13-11-99

JavaScript

Core JavaScript

JavaScript

D. Muller - 13-11-99

Environnements JavaScript
Core JavaScript (le noyau de JavaScript) est un langage de script orient objet qui, comme tout langage, reconnat un certain nombre d'oprateurs, de structures de contrle et d'instructions. Certains objets tels Array, Date ou Math font partie intgrante du langage, mais il est possible de complter le noyau de base par des objets supplmentaires.
Client-side JavaScript est une implmentation qui complte les lments de base par des objets permettant de contrler un navigateur (Netscape ou autre) et l'apparence du document courant. Server-side JavaScript ajoute des objets pertinents pour une excution ct serveur, permettant par exemple de communiquer avec des bases de donnes, de grer des sessions ou d'accder aux fichiers du serveur (Essentiellement disponible sur serveurs Netscape).
JavaScript - Core JavaScript - Introduction D. Muller - 13-11-99

Environnements JavaScript
Le principe qui consiste tendre Core JavaScript avec des fonctionnalits spcifiques peut tre gnralis pour la programmation de tout type de systme. C'est sur cette base que JavaScript (Core JavaScript) a t standardis par l'ECMA (European Computer Manufacturers Association) sous l'appellation ECMAScript :
ECMA-262 = ISO-616262 = JavaScript 1.3 ECMA-262 = ISO-616262 = JavaScript 1.3 (cf N 4.06, IE5) (cf N 4.06, IE5)

Le standard ECMAScript a t adopt en aot 1998. Les navigateurs implmentant JavaScript 1.3 datent de 1999.
JavaScript - Core JavaScript - Introduction D. Muller - 13-11-99

Syntaxe
A priori, une instruction JavaScript se termine toujours par un point-virgule : pi = 3.141592; Toutefois, l'interprteur est trs permissif, et il fait partie des spcifications d'ECMAScript d'accepter l'absence de pointvirgule dans tous les cas o cela ne conduit pas une ambigut. a = b + c;
a = b + c (d + e).print() (d + e).print();

Ambigut !

?
a = b + c(d + e).print(); return; (a + b);

return (a + b)

Un conseil : toujours finir une instruction par un point-virgule.


JavaScript - Core JavaScript - Syntaxe D. Muller - 13-11-99

Commentaires
En JavaScript les commentaires peuvent prendre deux formes correspondant la syntaxe C ou C++.
/* ** initialisation de tableau */ var centralien = {}; // dclaration du tableau centralien.nom = "Deubaze"; centralien.prenom = "Raymond"; centralien.promo = 2000; // initialisation d'objet var centralienne = { prenom:"Raymonde", nom:"Deubaze", promo:2000};

JavaScript

- Core JavaScript - Syntaxe -

D. Muller - 13-11-99

Types de donnes
JavaScript accepte les types de donnes suivants :
des nombres (cf. 1, 2, 3, 42, 3.141592 ) des valeurs logiques , (true ou false) des chanes (cf. "Hello !", 'Ca marche aussi', "aujourd'hui") null undefined

Les conversions de type sont automatiques :


"Pi vaut : " + 3.141592 + " (ou peu prs)" rsulte bien en la chane escompte, mais ceci ne fonctionne que pour l'oprateur +, ainsi : "64" - 4 "64" + 4
JavaScript

donne 60, mais donne "644" ...

null et undefined valent false null vaut 0


D. Muller - 13-11-99

- Core JavaScript - Types de donnes -

Variables
Les variables peuvent tre dclares explicitement : var pi = 3.141592; ou implicitement lors de leur premire utilisation : pi = 3.141592; L'valuation (i.e. droite du signe =) d'une variable non initialise produit une erreur si celle-ci n'est pas dclare, undefined ou NaN si elle l'a t (suivant le contexte) La porte d'une variable dclare en dehors du corps d'une fonction est globale, et disponible dans l'ensemble du document courant. Si elle est dclare dans le corps d'une fonction elle est locale cette fonction. Les variables locales doivent tre dclares de manire explicite.
JavaScript - Core JavaScript - Variables D. Muller - 13-11-99

Valeurs littrales
Nombres entiers : 314, 0xbebe, 011 (en octal, vaut 9) Nombres virgule flottante : 1, 1., 1.0, -3.2e5, .1e10 Boolens : true, false Chanes : "bla", 'bla', "J'ai dit \"non !\"", caractres spciaux :
\b \f \n \r \t backspace form feed new line carriage return tab \' \" \040 \0x20 apostrophe simple apostrophe double code octal (ici espace) code hexadecimal (ici espace)

JavaScript

- Core JavaScript - Valeurs littrales -

D. Muller - 13-11-99

Tableaux
Un tableau peut tre initialis avec une liste de valeurs (ventuellement vide) spcifies entre crochets []. Par exemple :
jours = [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ];

initialise un tableau de 7 lments (jours.length = 7). L' indice du premier lment est 0 :
jours[0] vaut "Dimanche" jours[1] vaut "Lundi" ...

N.B. Un tableau est un objet du type Array.

JavaScript

- Core JavaScript - Valeurs littrales -

D. Muller - 13-11-99

Oprateurs de comparaison
Ces oprateurs renvoient une valeur true ou false. Les oprandes peuvent tre des nombres ou des chanes. Les nombres sont compars numriquement, les chanes alphabtiquement.
a == b a != b a === b a !== b a> b a >= b a<b a <= b
JavaScript

a gale b ? a diffrent de b ? a strictement gal b ? (oprandes gaux et du mme type) a non strictement gal b ? (vrai si valeur ou type diffrents) a suprieur b ? a suprieur ou gal b ? a infrieur b ? a infrieur ou gal b ?
- Core JavaScript - Oprateurs D. Muller - 13-11-99

Oprateurs arithmtiques
Les quatre oprateurs fonctionnent de manire classique : + addition, soustraction, * multiplication / division (toujours virgule flottante, jamais entire) Les autres oprateurs sont : % ++ -JavaScript

modulo, deux arguments, reste de la division entire incrment, un argument, prfixe ou postfixe dcrment, un argument, prfixe ou postfixe oppos, un argument, prfixe
- Core JavaScript - Oprateurs D. Muller - 13-11-99

Oprateurs bit bit


Les oprateurs bit bit considrent leurs oprandes comme des mots de 32 bits, mais retournent des valeurs numriques standard : & ET logique, bit bit | OU logique, bit bit ^ OU exclusif, bit bit ~ complment bit bit << dcalage gauche (on rentre des zros droite) >> dcalage droite (bit de signe conserv) >>> dcalage droite (on rentre des zros gauche)
Exemple : 3 << 2 donne 12,
JavaScript - Core JavaScript - Oprateurs D. Muller - 13-11-99

Oprateurs logiques
Les oprateurs logiques portent sur des variables boolennes. Toutefois leur valuation est inhabituelle : a && b ET logique, ( a == false ) ? a : b a || b OU logique, (a == true ) ? a : b !a NON logique, ( a == true) ? false : true
N.B. == s'interprte de fait comme "peut tre converti en".

Par consquent, si les oprateurs && et || sont appliqus des variables boolennes, ils retournent un boolen conforme au rsultat attendu. S'ils sont appliqus des variables non boolennes le rsultat est non boolen :
par exemple : 1 && "Hello" vaut "Hello"
JavaScript - Core JavaScript - Oprateurs D. Muller - 13-11-99

10

Oprateurs logiques
L'valuation des expressions logiques est interrompue ds que la valeur du rsultat est connu. Dans l'expression ci-dessous, la fonction essai( ) n'est pas appele :
art = false; x = art && essai();

De mme, dans la situation suivante la fonction la_vie ( ) n'est pas appele :


la_bourse = true; y = la_bourse || la_vie(); Ce comportement est garanti. Il fait partie des spcifications du langage.
JavaScript - Core JavaScript - Oprateurs D. Muller - 13-11-99

Autres oprateurs
S'il est utilis dans un contexte o l'un au moins des oprandes est une chane, + est interprt comme tant l'oprateur de concatnation :
"Pi vaut : " + 3.141592 + " (ou peu prs)" est une chane.

? est le seul oprateur JavaScript admettre trois arguments :


condition ? val1 : val2 vaut val1 si condition est vraie (true), val2 sinon.

L'oprateur , (virgule) value ses deux oprandes et retourne le second (principalement utilis avec l'instruction de boucle for).
Exemples :
JavaScript

i=1, j=2

for(i=1, j=2; i++, j++; i<10)


- Core JavaScript - Oprateurs D. Muller - 13-11-99

11

L'oprateur typeof
L'oprateur typeof renvoie le type de la variable ou de l'expression laquelle il s'applique :
var pi = 3.141592; var str = "Coucou"; var now = Date(); var check = "typeof + "typeof str + "typeof now + "typeof foo pi : " + typeof(pi) : " + typeof(str) + : " + typeof(now) + : " + typeof(foo) + + "\n" "\n" "\n" "\n";

Le type d'un objet non dfini est undefined


JavaScript - Core JavaScript - Oprateurs D. Muller - 13-11-99

Oprateurs d'affectation
Un oprateur d'affectation affecte la valeur de l'oprande situ sa droite (gnralement une expression) l'oprande situ sa gauche (gnralement une variable). L'oprateur d'affectation le plus simple est = : x = y affecte la valeur de y la variable x. Les autres oprateurs d'affectation sont en fait des raccourcis pour quelques oprations standards :
x += y x -= y x *= y x /= y
JavaScript

x=x+y x=x-y x=x*y x=x/y

x %= y x <<= y x >>= y x >>>= y

x=x%y x = x << y x = x >> y x = x >>> y

x &= y x |= y x ^= y

x=x&y x=x|y x=x^y

- Core JavaScript - Oprateurs -

D. Muller - 13-11-99

12

Prcdence des oprateurs


La prcdence des oprateurs donne l'ordre de priorit dans lequel ils sont valus. Cet ordre permet d'crire des expressions comme :
x = a + b * c - d == 23 ? 1 : ++j , ++i;

et d'obtenir le rsultat escompt, qui est : ?? (x = (((a+(b*c)-d) == 23) ? 1 : ++j)), ++i;


Un conseil : il est plus sr, plus rapide et plus efficace de spcifier l'ordre de priorit des oprations effectuer l'aide de parenthses bien places (mme si celles-ci sont ventuellement inutiles) que de consulter la documentation relative la prcdence des oprateurs et d'accoucher d'une squence de code illisible et non maintenable ...
JavaScript - Core JavaScript - Oprateurs D. Muller - 13-11-99

Instructions conditionnelles
Une instruction conditionnelle permet de spcifier une squence d'instructions qui ne s'excute que si une certaine condition est remplie.
Exemple :
if (condition ) { instructions; } else { instructions; }

if ( s % 2 ) { alert("seconde impaire : "+s); } else { alert("seconde paire : "+s); }

Il est bien entendu possible de faire directement suivre l'instruction else par une autre instruction if, pour obtenir une construction if - else if - else classique.
JavaScript - Core JavaScript - Instructions de contrle D. Muller - 13-11-99

13

Instruction conditionnelle (2)


La seconde instruction conditionnelle reconnue par JavaScript est l'instruction switch. Cette instruction permet de tester un ventail de valeurs plus important que simplement true / false.
Exemple :
switch(expression){ case valeur_1 : instructions; break; case valeur_2 : instructions; break; default : instructions; }
JavaScript

switch(Math.floor(s/10)) { case 0 : alert("tout petit : "+s ); break; case 1 : alert("petit : " + s ); break; case 2 : }
- Core JavaScript - Instructions de contrle D. Muller - 13-11-99

Boucles
Une boucle est une squence d'instructions qui s'excute de manire rptitive jusqu' ce qu'une certaine condition soit remplie.
do { instructions; } while (condition);

Exemple :
do { time = new Date(); s = time.getSeconds(); } while ( s % 10 ); alert("nouvelle dizaine : "+s);

Cette boucle est parcourue une fois, la suite de quoi la condition est value.

La boucle est alors excute nouveau jusqu' ce que la condition ne soit plus remplie. Si la condition est initialement fausse, la boucle est parcourue une fois et une seule. (preuve)
JavaScript - Core JavaScript - Instructions de contrle D. Muller - 13-11-99

14

Boucles (2)
Une boucle base sur l'instruction while n'est pas excute si la condition est initialement fausse.
while (condition){ instructions; } while ( n < 5 ) { alert("n = " + n++); }

Exemple :

La boucle est parcourue tant que la condition est remplie. La condition est value avant toute excution des instructions de la boucle. Si la condition est initialement fausse, la boucle n'est pas parcourue. (preuve)
JavaScript - Core JavaScript - Instructions de contrle D. Muller - 13-11-99

Boucles (3)
L'instruction for permet de spcifier, en plus de la condition, une instruction d'initialisation et une instruction de boucle. La boucle n'est pas excute si la condition est initialement fausse. ! Exemple :
for(init; condition; repeat){ instructions; } for( n = 1; n < 5; n++ ) { alert("n = " + n); }

L'instruction for ci-dessus est smantiquement quivalente la boucle : Cette instruction est trs souvent utilise,comme dans l'exemple mentionn, ds lors o l'on gre un compteur de boucle.
JavaScript - Core JavaScript - Instructions de contrle -

init; while(condition){ instructions; repeat; }

D. Muller - 13-11-99

15

Boucles (4)
L'instruction break permet d'interrompre prmaturment l'excution d'une boucle.
while(true){ instructions; if (condition) break; instructions; }

Exemple : (quelle est la dernire valeur de n affiche ?)

! while (true) { alert("n = " + n++); if ( n == 5 ) break; alert("On continue"); }


for ( n = 0; n alert("n if ( n % alert("n } < 10; n++ ){ = " + n++); 2 ) continue; pair");

L'instruction continue permet d'interrompre le droulement du corps d'une boucle, en excutant directement l'itration suivante.
JavaScript

- Core JavaScript - Instructions de contrle -

D. Muller - 13-11-99

Boucles (5)
Dans le cas de boucles imbriques il est possible de les nommer l'aide d'un label qui permet de spcifier celle laquelle s'appliquent les instructions break ou continue.
label: while(true){ instructions; if (condition) break label; instructions; } loop_i: for (i=1; i < 5; i++) { loop_j: for (j=1; j < 5; j++) { alert("(i,j) = (" + i + "," + j + ")"); if ( j == i ) continue loop_i; } }
JavaScript - Core JavaScript - Instructions de contrle D. Muller - 13-11-99

Exemple :

16

Fonctions
En JavaScript la dfinition d'une fonction se fait l'aide de l'instruction function. L'appel se fait de manire classique. Depuis le corps d'une fonction il est possible d'accder la liste des arguments l'aide du tableau arguments[]. Le ! premier argument a pour indice 0. Une fonction peut renvoyer une valeur l'aide de l'instruction return.
JavaScript possde un certain nombre de fonctions prdfinies : eval isFinite isNaN
JavaScript

! ! ! !
D. Muller - 13-11-99

! ! !

parseInt, parseFloat Number, String escape, unescape


- Core JavaScript - Fonctions -

Tableaux associatifs
Comme dans d'autres langages (cf. perl) il est possible en JavaScript d'indexer des tables ascendant[0] = "Raymond"; non pas avec un entier mais ascendant[1] = "Marcelle"; ascendant[2] = "Raymond"; avec une chane de caractres
(tableaux associatifs). Ainsi, la squence : Gagnerait en lisibilit tre code :
ascendant["pre"] = "Raymond"; ascendant["mre"] = "Marcelle"; ascendant["grand'pre paternel"] = ascendant["grand'mre paternelle"] ascendant["grand'pre maternel"] = ascendant["grand'mre maternelle"]
JavaScript

ascendant[3] = "Ginette"; ascendant[4] = "Marcel"; ascendant[5] = "Raymonde";

"Raymond"; = "Ginette"; "Marcel"; = "Raymonde";


D. Muller - 13-11-99

- Core JavaScript - Objets -

17

Objets
Si la valeur de l'index ne comprend que des caractres alphanumriques (cf. nom de variable), la notation prcdente peut tre simplifie :
ascendant["p"] = "Raymond"; ascendant["m"] = "Marcelle"; ascendant["pp"] = "Raymond"; ascendant["pm"] = "Ginette"; ascendant["mp"] = "Marcel"; ascendant["mm"] = "Raymonde"; ascendant.p = "Raymond"; ascendant.m = "Marcelle"; ascendant.pp = "Raymond"; ascendant.pm = "Ginette"; ascendant.mp = "Marcel"; ascendant.mm = "Raymonde";

En JavaScript, un objet est un tableau associatif : centralien.prenom = "Raymond"; centralien.nom = "Deubaze"; centralien.promo = 2000;
JavaScript

Cette squence cre un objet centralien possdant les trois proprits prenom, nom et promo.
D. Muller - 13-11-99

- Core JavaScript - Objets -

Initialisation d'un objet


Une variable du type objet peut tre initialise lors de sa dclaration :
var centralien = {prenom:"Raymond", nom:"Deubaze", promo:2000};

En gnral, on dfinit une fonction appele constructeur, permettant de crer des instances d'objets similaires.
function Centralien(prenom,nom,promo) { ! this.prenom = prenom; this.nom = nom; this.promo = promo; } var moniteur_H10 = new Centralien("Raymond","Deubaze",2000); var moniteur_F7 = new Centralien("Raymonde","Deubaze",2001);

Noter la variable this qui se rfre l'objet que l'on est en train d'initialiser
JavaScript - Core JavaScript - Objets D. Muller - 13-11-99

18

Prototype
Il est possible d'initialiser ou de modifier une proprit pour l'ensemble des objets d'un type donn (en C++ on dirait pour toutes les instances d'une classe).
function Centralien(prenom,nom,promo) { this.prenom = prenom; this.nom = nom; this.promo = promo; } var moniteur_H10 = new Centralien("Raymond","Deubaze",2000); var moniteur_F7 = new Centralien("Raymonde","Deubaze",2001); Centralien.prototype.option = "TIC";

La dernire instruction ajoute et initialise la proprit option aux deux objets du type Centralien : moniteur_H10 et moniteur_F7.
JavaScript - Core JavaScript - Objets D. Muller - 13-11-99

Mthodes
Lorsqu'une proprit d'un objet est une fonction, on appelle cette fonction une mthode de l'objet considr. La dfinition d'une mthode peut tre intgre au constructeur.
function Centralien(prenom,nom,promo) { ... this.print = list_props; }
function list_props() { var str = ""; var prop; for ( prop in this ) { str += prop + " = " + this[prop] + "\n"; } return str; }

!
D. Muller - 13-11-99

Noter encore la variable this qui se rfre l'objet appelant.


JavaScript - Core JavaScript - Objets -

19

Oprateurs objet
JavaScript possde des oprateurs qui s'appliquent plus particulirement des objets : new (cration d'un objet), this (se rfre l'objet appelant dans une mthode), et delete qui permet de supprimer un objet. L'oprateur delete peut s'appliquer toutes les variables dclares implicitement. Ceci recouvre en particulier une proprit ou un lment de tableau mais aussi une variable ou un objet dclars implicitement (sans utiliser l'oprateur var). delete renvoie true si l'opration s'est bien passe, false sinon.

JavaScript

- Core JavaScript - Objets -

D. Muller - 13-11-99

Instructions objet
Il existe galement des instructions qui ne s'appliquent qu' des objets. La premire est for.. in. Elle permet d'effectuer une boucle sur toutes les proprits d'un objet.
function list_props(obj) { var str = ""; var prop; for ( prop in obj ) { str += prop + " = " + obj[prop] + "\n"; } return str; }

L'instruction with permet de travailler dans le contexte d'un objet particulier (confort d'criture).
x = r * Math.sin(Math.PI / 2); with ( Math ) { x = r * sin(PI / 2); }
D. Muller - 13-11-99

JavaScript

- Core JavaScript - Objets -

20

Objets prdfinis
Boolean constructeur : Boolean(valeur) mthode : valueOf( ) Attention : un objet du type Boolean, non null et non undefined sera toujours converti la valeur true dans une expression logique :
var mybool = new Boolean(false); if ( mybool ) { alert("mybool is true"); } alert("mybool's value is " + mybool.ValueOf());

Sauf cas particulier, il vaut mieux utiliser une variable boolenne qu'un objet.
JavaScript - Core JavaScript - Objets D. Muller - 13-11-99

Number
Number constructeur : Number(valeur) mthodes : valueOf( ), toString( )
Comme dans le cas de l'objet Boolean, il est peu courant de crer des objets du type Number. Toutefois, le prototype de l'objet Number possde des proprits intressantes (en C++ on parlerait de variables de classe) : Number.MAX_VALUE Number.MIN_VALUE Number.NaN Number.NEGATIVE_INFINITY Number.POSITIVE_INFINITY : le plus grand nombre : le plus petit nombre : le code NaN (Not a Number) : l'infini positif : l'infini ngatif

Pour le dtail de ces codes, cf. double prcision IEEE 754 (64 bits).
JavaScript - Core JavaScript - Objets D. Muller - 13-11-99

21