Vous êtes sur la page 1sur 5

12.

JavaScript
JavaScript

Cours Web JavaScript


Lionel Seinturier Universit Pierre & Marie Curie
Lionel.Seinturier@lip6.fr

Programme Java s'excutant ct client Web (ie dans le navigateur) applet JavaScript prog. "autonome" stock dans un fichier .class prog. source embarqu dans une page .html ct client .class autonome embarqu dans .html JavaScript (quasiment) mme syntaxe que Java mais langage interprt (par le navigateur) pas de classe, pas d'hritage, pas de typage, API moins riche
Web 274 Lionel Seinturier

ct serveur servlet JSP

applet JavaScript

11/7/02
Web 273 Lionel Seinturier

12. JavaScript
JavaScript
Java embarqu dans une page HTML entre les balises <SCRIPT> et </SCRIPT> le chargement de la page provoque l'excution du code JavaScript le script JavaScript gnre dynamiquement du code HTML
<HTML> <BODY> <H1>Table des factorielles</H1> <SCRIPT LANGUAGE="JavaScript"> for ( i=1 , fact=1 ; i<4 ; i++ , fact *= i ) { document.write( i + "! = " + fact + "<BR>" ); } </SCRIPT> </BODY> </HTML>

12. JavaScript
Principe de fonctionnement
<HTML> <BODY> <H1>Table des factorielles</H1> <SCRIPT LANGUAGE="JavaScript"> for ( i=1 , fact=1 ; i<4 ; i++ , fact *= i ) { document.write( i + "! = " + fact + "<BR>" ); } </SCRIPT> </BODY> </HTML> <HTML> <BODY> <H1>Table des factorielles</H1> 1! = 1<BR> 2! = 2<BR> 3! = 6<BR> </BODY> </HTML>
276 Lionel Seinturier

du code JavaScript rsultat = HTML gnr via la fonction write

chargement de la page

ce qu'affiche le navigateur

Web

275

Lionel Seinturier

Web

12. JavaScript
Hirarchie des lments d'une page HTML
hirarchie de (pseudo)-objets JavaScript reprsentation du contenu HTML consultables / modifiables gnration dynamique de contenu HTML

12. JavaScript
Hirarchie des lments d'une page HTML
Exemple d'accs aux lments d'une page HTML
<FORM ACTION="..." NAME="formulaire" METHOD=POST> Nom <INPUT NAME="nom" SIZE=46> <P> Prnom <INPUT NAME="prenom" SIZE=40> <P> <INPUT TYPE=SUBMIT VALUE="Envoi"> <INPUT TYPE=RESET VALUE="Remise zro"> <P>
location URL courante history Anciennes URL applets[] Les applets

window La fentre courante frames[] Les cadres anchors[] Les signets self, window, parent, top Accs aux fentres links[] Les liens document Le document forms[] Les formulaires elements[] Les zones de saisie des formulaires

</FORM>

images[] Les images

Lecture/criture de la variable document.forms[0].elements[1].value consultation/modification automatique du contenu du champ prenom Utilisation de faon alternative des attributs NAME
document.formulaire.prenom.value

Web

277

Lionel Seinturier

Web

278

Lionel Seinturier

12. JavaScript
Hirarchie des lments d'une page HTML
Nombreuses variables et fonctions disponibles sur chaque lment
- Form.submit()

12. JavaScript
Gestion d'vnements
Interaction avec l'utilisateur via des gestionnaires d'vnements vnements grables : clavier/souris ajout de gestionnaires sur des lments du document HTML ajout d'attributs (onClick="...", keyPressed="...", ...) sur des balises HTML (<INPUT TYPE=SUBMIT onClick="...">, ...) fonctions JavaScript (dfinies par le programmeur) associe aux gestionnaires
<INPUT TYPE=SUBMIT onClick="onAClique()">

force l'envoi des donnes du formulaire


- Input.focus()

( clic sur bouton submit)

amne le curseur de saisie dans le champ


- window.setInterval( fonction, nbMilliSecondes )

excute un traitement priodiquement


- window.alert( "message" )

affiche un message dans une bote de dialogue


- window.confirm( "message" )

appel de la fonction lorsque l'vnement survient excution

affiche une bote de dialogue oui/non


- window.prompt( "message", "valeur par dfaut" )

affiche une bote de dialogue permettant de saisir une valeur


Web 279 Lionel Seinturier Web 280 Lionel Seinturier

12. JavaScript
Type d'vnements
Souris Clavier Mixte
onClick, onDblClick, onMouseDown, onMouseUp onMouseOver, onMouseOut onKeyPressed, onKeyDown, onKeyUp onFocus, onBlur onSubmit, onReset onChange onLoad, onUnload, onAbort
liens onClick, onDblClick onKey... onMouse... boutons onFocus, onBlur onClick, onDblClick

12. JavaScript
Type d'vnements
En fonction de l'lment envisag
window onFocus, onBlur onLoad, onUnload, onError document onDblClick onKey... onMouseDown, onMouseUp formulaires onReset onSubmit <INPUT> onFocus, onBlur onChange, onKey... images onLoad, onUnload onDblClick, onKey... onAbort, onError <SELECT> onFocus, onBlur onChange images onMouse...

Pour les formulaires Pour les zones de saisie des form. Pour les documents et les images - onMouseDown - onMouseUp - onMouseOver - onMouseOut - onFocus - onBlur
Web

: appui sur le bouton de la souris : relachement du bouton de la souris : arrive sur une zone : dpart de la zone : lorsque le curseur de saisie arrive dans une zone : lorsque le curseur de saisie repart d'une zone
281 Lionel Seinturier Web

282

Lionel Seinturier

12. JavaScript
Syntaxe
Types de base nombre (pas de distinction entier, rel), chane de caractres, boolen Langage faiblement typ une variable peut tout moment changer de type le type est dtermin au moment de l'affectation Syntaxe proche de Java quasiment les mmes mots-cls et oprateurs mais pas de classe, ni d'hritage, ni d'exception, ni d'interface Quelques pseudo-objets prdfinis (manipulation de dates, tableaux, calculs) Entres/sorties rudimentaires (clavier, cran), pas de fichiers, ni de rseau Langage sensible la casse (var VAR) Commentaires (idem Java, C/C++)
Web 283

12. JavaScript
Dclaration de variables
affectation d'une valeur un identificateur utilisation du mot cl var
x = 24.5; var y;

Nombres Boolens Chanes

entiers signs, hxadcimaux (0x..), octal (0..), rels true ou false '...' ou "..." ASCII 8 bits + \" \' \n \t

\\

Oprations sur les chanes de caractres ( nombreuses autres) - maChaine.length - maChaine.charAt(i) - maChaine.indexOf(ch,start) - maChaine.substring(from,to) - maChaine.split(delim)
Web

/* */ ou //
Lionel Seinturier

: longueur de la chane : ime caractre de la chane : indice de ch partir de start : sous-chane de from (inclus) to (exclus) : tableau de sous-chanes spares par delim
284 Lionel Seinturier

12. JavaScript
Tableaux
commencent l'indice 0 accs aux lments avec [] monTab[12] type Array peuvent contenir des lments de types htrognes leur taille peut tre augmente la demande Dclaration
t = new Array( 'garage', '', 2 ); t = [ 'garage', '' , 2 ]; t = new Array(); t[0]='garage'; t[1]=''; t[2]=2; t = new Array(3); t[0]='garage'; t[1]=''; t[2]=2;

12. JavaScript
Tableaux
Oprations sur les tableaux - t.length - t.concat(t1,...) - t.join(sep) - t.reverse() - t.slice(from,to) - t.sort() : taille du tableau : concatnation de t, t1, ... : concatnation des lments de t spars par sep : renverse les lments de t : sous-tableau de from (inclus) to (exclus) : tri

ces oprations retournent un rsultat le tableau initial (t) est inchang (ce n'est pas un objet au sens Java)

Tableaux multi-dimensionnels
matrice[i][j] = ...

Web

285

Lionel Seinturier

Web

286

Lionel Seinturier

12. JavaScript
Oprateurs
Comparaison
== != === !== == != === !== < > <= >=

12. JavaScript
Oprateurs
Manipulation de bits
^ ~ >> >>> & | ^ ~ << >> >>>

test d'identit (de id.) test d'galit (de )

si ncessaire conversion de type pas de conversion

XOR NOT dcalage droite en conservant le signe dcalage droite en ajoutant des 0
= += -= *= /= <<= >>= >>>= &= ~= |= && || ! + +=

Affectations Logiques Sur les chanes Arithmtiques


+ - * / % ++ -- -

ternaire

?:

division entre entiers donne un rel ( Java, C/C++) Java, C/C++ JavaScript 1/2=0.5
Web 287

1/2=0
Lionel Seinturier

Sur les v ariables typeof variable retourne 'number', 'boolean', 'string', 'object', 'function' ou 'undefined' selon le type de la variable
Web 288 Lionel Seinturier

12. JavaScript
Instructions
Identiques Java, C/C++ Conditions
if (condition) { ... } else { ... /* facultatif */ } switch (expression) { case constante : ... break; ... default : ... } for ( initialisation ; test ; increment ) { ... } while (condition) { ... } do { ... } while (condition); break continue

12. JavaScript
Fonctions
Dfinition identique aux fonctions C mais pas de typage des arguments, ni de la valeur de retour
function factorielle(n) { if (n<2) return 1; else return n*factorielle(n-1); }

Boucles

Non dclaration exhaustive des arguments possible accs par le tableau prdfini arguments
function plus() { for ( i=0,s=0 ; i<arguments.length ; i++ ) { s += arguments[i]; } return s; }

Droutements

: interruption for, case, while ou do/while : passage itration suivante for

Fonction prdfinie

eval('expression JavaScript')

value l'expression JavaScript passe en paramtre


Web 289 Lionel Seinturier

Panachage dclaration arg. / non dclaration possible


Web 290 Lionel Seinturier

12. JavaScript
Fonctions
Appels imbriqus de fonctions possibles !! Attention: les variables ont une porte globale !!
function f1(n) { x = 12; f2(14); // x vaut 13 maintenant } function f2(n) { // x vaut 12 x = 13; }

12. JavaScript
Pseudo-objets JavaScript
But identique aux structures (struct) C stocker des donnes dans un enregistrement Dclaration
objet = { propriete1: valeur1, ... , proprieten: valeurn }; monRectangle = { longueur: 4.5, largeur: 2 };

Accs aux proprits des objets

objet.propriete

Itration sur les proprits d'un objet


for ( variable in objet ) { ... } for ( i in monRectangle ) { document.write(i); }

affichage : 4.5 2

Web

291

Lionel Seinturier

Web

292

Lionel Seinturier