12.
JavaScript
JavaScript
Cours Web Programme Java s'exécutant côté client Web (ie dans le navigateur)
applet prog. "autonome" stocké dans un fichier .class
JavaScript JavaScript prog. source embarqué dans une page .html
côté client côté serveur
Lionel Seinturier .class autonome applet servlet
embarqué dans .html JavaScript JSP
Université Pierre & Marie Curie
[Link]@[Link] JavaScript
(quasiment) même syntaxe que Java mais
• langage interprété (par le navigateur)
11/7/02 • pas de classe, pas d'héritage, pas de typage, API moins riche
Web 273 Lionel Seinturier Web 274 Lionel Seinturier
12. JavaScript 12. JavaScript
JavaScript Principe de fonctionnement
<HTML> <BODY>
• Java embarqué dans une page HTML entre les balises <SCRIPT> et </SCRIPT>
<H1>Table des factorielles</H1>
• le chargement de la page provoque l'exécution du code JavaScript
• le script JavaScript génère dynamiquement du code HTML <SCRIPT LANGUAGE="JavaScript">
du code JavaScript
for ( i=1 , fact=1 ; i<4 ; i++ , fact *= i ) {
<HTML> <BODY>
<H1>Table des factorielles</H1> [Link]( i + "! = " + fact + "<BR>" );
<SCRIPT LANGUAGE="JavaScript"> résultat = HTML
}
for ( i=1 , fact=1 ; i<4 ; i++ , fact *= i ) { généré via la
[Link]( i + "! = " + fact + "<BR>" ); </SCRIPT> fonction write
}
</SCRIPT> </BODY> </HTML>
</BODY> </HTML>
<HTML> <BODY>
<H1>Table des factorielles</H1>
chargement ce qu'affiche 1! = 1<BR>
de la page le navigateur 2! = 2<BR>
3! = 6<BR>
</BODY> </HTML>
Web 275 Lionel Seinturier Web 276 Lionel Seinturier
12. JavaScript 12. JavaScript
Hiérarchie des éléments d'une page HTML Hiérarchie des éléments d'une page HTML
• hiérarchie de (pseudo)-objets JavaScript Ö représentation du contenu HTML Exemple d'accès aux éléments d'une page HTML
• consultables / modifiables Ö génération dynamique de contenu HTML
<FORM ACTION="..." NAME="formulaire" METHOD=POST>
Nom <INPUT NAME="nom" SIZE=46> <P>
Prénom <INPUT NAME="prenom" SIZE=40> <P>
window
La fenêtre courante
<INPUT TYPE=SUBMIT VALUE="Envoi">
<INPUT TYPE=RESET VALUE="Remise à zéro"> <P>
frames[] self, window, parent, top document location history </FORM>
Les cadres Accès aux fenêtres Le document URL courante Anciennes URL
anchors[] links[] forms[] images[] applets[] Lecture/écriture de la variable [Link][0].elements[1].value
Les signets Les liens Les formulaires Les images Les applets
≡ consultation/modification automatique du contenu du champ prenom
elements[]
Les zones de saisie
des formulaires
Utilisation de façon alternative des attributs NAME
[Link]
Web 277 Lionel Seinturier Web 278 Lionel Seinturier
12. JavaScript 12. JavaScript
Hiérarchie des éléments d'une page HTML Gestion d'événements
Nombreuses variables et fonctions disponibles sur chaque élément Interaction avec l'utilisateur via des gestionnaires d'événements
- [Link]() • événements gérables : clavier/souris
force l'envoi des données du formulaire (≡ clic sur bouton submit) • ajout de gestionnaires sur des éléments du document HTML
- [Link]() Ö ajout d'attributs (onClick="...", keyPressed="...", ...)
amène le curseur de saisie dans le champ sur des balises HTML (<INPUT TYPE=SUBMIT onClick="...">, ...)
- [Link]( fonction, nbMilliSecondes )
• fonctions JavaScript (définies par le programmeur) associée aux gestionnaires
exécute un traitement périodiquement Ö <INPUT TYPE=SUBMIT onClick="onAClique()">
- [Link]( "message" ) Ö appel de la fonction lorsque l'événement survient
affiche un message dans une boîte de dialogue Ö exécution
- [Link]( "message" )
affiche une boîte de dialogue oui/non
- [Link]( "message", "valeur par défaut" )
affiche une boîte de dialogue permettant de saisir une valeur
Web 279 Lionel Seinturier Web 280 Lionel Seinturier
12. JavaScript 12. JavaScript
Type d'événements Type d'événements
window
Souris onClick, onDblClick, onMouseDown, onMouseUp En fonction de
onMouseOver, onMouseOut l'élément envisagé onFocus, onBlur
onLoad, onUnload, onError
Clavier onKeyPressed, onKeyDown, onKeyUp
Mixte onFocus, onBlur
document
onDblClick
Pour les formulaires onSubmit, onReset onKey...
onMouseDown, onMouseUp
Pour les zones de saisie des form. onChange
Pour les documents et les images onLoad, onUnload, onAbort
liens formulaires images images
onClick, onDblClick onLoad, onUnload
onKey... onReset onDblClick, onKey... onMouse...
- onMouseDown : appui sur le bouton de la souris onMouse... onSubmit onAbort, onError
- onMouseUp : relachement du bouton de la souris
- onMouseOver : arrivée sur une zone boutons <INPUT> <SELECT>
- onMouseOut : départ de la zone
onFocus, onBlur onFocus, onBlur onFocus, onBlur
- onFocus : lorsque le curseur de saisie arrive dans une zone onClick, onDblClick onChange, onKey... onChange
- onBlur : lorsque le curseur de saisie repart d'une zone
Web 281 Lionel Seinturier Web 282 Lionel Seinturier
12. JavaScript 12. JavaScript
Syntaxe Déclaration de variables
Types de base • affectation d'une valeur à un identificateur
nombre (pas de distinction entier, réel), chaîne de caractères, booléen • utilisation du mot clé var
Langage faiblement typé x = 24.5; var y;
une variable peut à tout moment changer de type
le type est déterminé au moment de l'affectation Nombres entiers signés, héxadécimaux (0x..), octal (0..), réels
Booléens true ou false
Syntaxe proche de Java Chaînes '...' ou "..." ASCII 8 bits + \" \' \n \t \\
quasiment les mêmes mots-clés et opérateurs
mais pas de classe, ni d'héritage, ni d'exception, ni d'interface Opérations sur les chaînes de caractères (∃ nombreuses autres)
Quelques pseudo-objets prédéfinis (manipulation de dates, tableaux, calculs) - [Link] : longueur de la chaîne
Entrées/sorties rudimentaires (clavier, écran), pas de fichiers, ni de réseau - [Link](i) : ième caractère de la chaîne
- [Link](ch,start) : indice de ch à partir de start
Langage sensible à la casse (var ≠ VAR) - [Link](from,to) : sous-chaîne de from (inclus) à to (exclus)
Commentaires (idem Java, C/C++) /* */ ou // - [Link](delim) : tableau de sous-chaînes séparées par delim
Web 283 Lionel Seinturier Web 284 Lionel Seinturier
12. JavaScript 12. JavaScript
Tableaux Tableaux
• commencent à l'indice 0 Opérations sur les tableaux
• accès aux éléments avec [] monTab[12]
- [Link] : taille du tableau
• type Array
- [Link](t1,...) : concaténation de t, t1, ...
• peuvent contenir des éléments de types hétérogènes
- [Link](sep) : concaténation des éléments de t séparés par sep
• leur taille peut être augmentée à la demande
- [Link]() : renverse les éléments de t
- [Link](from,to) : sous-tableau de from (inclus) à to (exclus)
Déclaration
- [Link]() : tri
t = new Array( 'garage', '', 2 );
≡ t = [ 'garage', '' , 2 ];
≡ t = new Array(); t[0]='garage'; t[1]=''; t[2]=2;
• ces opérations retournent un résultat
≡ t = new Array(3); t[0]='garage'; t[1]=''; t[2]=2; • 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 12. JavaScript
Opérateurs Opérateurs
Comparaison == != === !== < > <= >= Manipulation de bits & | ^ ~ << >> >>>
== != test d'identité (de ¬ id.) si nécessaire conversion de type ^ XOR
=== !== test d'égalité (de ≠) pas de conversion ~ NOT
>> décalage à droite en conservant le signe
>>> décalage à droite en ajoutant des 0
Affectations = += -= *= /= <<= >>= >>>= &= ~= |= ternaire ?:
Logiques && || !
Sur les chaînes + +=
Arithmétiques + - * / % ++ -- - Sur les v ariables typeof variable
division entre entiers donne un réel (≠ Java, C/C++) retourne 'number', 'boolean', 'string', 'object', 'function'
JavaScript 1/2=0.5 Java, C/C++ 1/2=0
ou 'undefined' selon le type de la variable
Web 287 Lionel Seinturier Web 288 Lionel Seinturier
12. JavaScript 12. JavaScript
Instructions Fonctions
Identiques Java, C/C++ Définition identique aux fonctions C
mais pas de typage des arguments, ni de la valeur de retour
Conditions if (condition) { ... } else { ... /* facultatif */ } function factorielle(n) {
switch (expression) { if (n<2) return 1; else return n*factorielle(n-1);
case constante : ... break; }
...
default : ...
} Non déclaration exhaustive des arguments possible
Ö accès par le tableau prédéfini arguments
Boucles for ( initialisation ; test ; increment ) { ... }
while (condition) { ... } function plus() {
do { ... } while (condition); for ( i=0,s=0 ; i<[Link] ; i++ ) {
s += arguments[i];
Déroutements break : interruption for, case, while ou do/while }
continue : passage itération suivante for return s;
}
Fonction prédéfinie eval('expression JavaScript')
évalue l'expression JavaScript passée en paramètre Panachage déclaration arg. / non déclaration possible
Web 289 Lionel Seinturier Web 290 Lionel Seinturier
12. JavaScript 12. JavaScript
Fonctions Pseudo-objets JavaScript
Appels imbriqués de fonctions possibles But identique aux structures (struct) C
!! Attention: les variables ont une portée globale !! Ö stocker des données dans un enregistrement
function f1(n) {
x = 12; Déclaration
f2(14);
objet = { propriete1: valeur1, ... , proprieten: valeurn };
// x vaut 13 maintenant
monRectangle = { longueur: 4.5, largeur: 2 };
}
function f2(n) { Accès aux propriétés des objets [Link]
// x vaut 12
x = 13;
}
Itération sur les propriétés d'un objet
for ( variable in objet ) { ... }
for ( i in monRectangle ) { [Link](i); }
Ö affichage : 4.5 2
Web 291 Lionel Seinturier Web 292 Lionel Seinturier
