Académique Documents
Professionnel Documents
Culture Documents
JavaScript
D. Muller - 13-11-99
JavaScript
JavaScript
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
D. Muller - 13-11-99
! !
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
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)
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
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
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
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" ...
JavaScript
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 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();
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.
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
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";
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 &= y x |= y x ^= y
D. Muller - 13-11-99
12
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; }
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
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 -
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; }
L'instruction continue permet d'interrompre le droulement du corps d'une boucle, en excutant directement l'itration suivante.
JavaScript
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
! ! !
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
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
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
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
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
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