Javascript

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

Panachage dclaration arg. / non dclaration possible

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

Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

12.

Cours Web JavaScript

ct serveur servlet JSP

du code JavaScript rsultat = HTML gnr via la fonction write

images[] Les images

force l'envoi des donnes du formulaire

( clic sur bouton submit)

amne le curseur de saisie dans le champ

excute un traitement priodiquement

affiche un message dans une bote de dialogue

appel de la fonction lorsque l'vnement survient excution

affiche une bote de dialogue oui/non

affiche une bote de dialogue permettant de saisir une valeur

Nombres Boolens Chanes

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

si ncessaire conversion de type pas de conversion

Affectations Logiques Sur les chanes Arithmtiques

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

value l'expression JavaScript passe en paramtre

Panachage dclaration arg. / non dclaration possible

Accs aux proprits des objets

Itration sur les proprits d'un objet

Vous aimerez peut-être aussi