Cours JavaScript : les événements, les variables et les tableaux

Cours Web JavaScript

Lionel Seinturier Université Pierre & Marie Curie

                                                                                                                           11/7/02

Web                                                                                                273                                                                        Lionel Seinturier

JavaScript

Programme Java s'exécutant côté client Web (ie dans le navigateur)

applet                        prog. "autonome" stocké dans un fichier .class

JavaScript                prog. source embarqué dans une page .html

JavaScript

(quasiment) même syntaxe que Java mais

•  langage interprété (par le navigateur)

•  pas de classe, pas d'héritage, pas de typage, API moins riche

Web                                                                                                274                                                                        Lionel Seinturier

Hiérarchie des éléments d'une page HTML

•  hiérarchie de (pseudo)-objets JavaScript Ö représentation du contenu HTML

•  consultables / modifiables              Ö génération dynamique de contenu HTML

Web                                                                                                277                                                                        Lionel Seinturier

Hiérarchie des éléments d'une page HTML

Exemple d'accès aux éléments d'une page HTML

<FORM ACTION=" " NAME="formulaire" METHOD=POST>

Nom <INPUT NAME="nom" SIZE=46> <P>

Prénom <INPUT NAME="prenom" SIZE=40> <P>

<INPUT TYPE=SUBMIT VALUE="Envoi">

<INPUT TYPE=RESET VALUE="Remise à zéro"> <P>

</FORM>

Lecture/écriture de la variable document.forms[0].elements[1].value

? consultation/modification automatique du contenu du champ prenom

Utilisation de façon alternative des attributs NAME

document.formulaire.prenom.value

Web                                                                                                278                                                                        Lionel Seinturier

12.  JavaScript

Hiérarchie des éléments d'une page HTML

Nombreuses variables et fonctions disponibles sur chaque élément

-  Form.submit()

     force l'envoi des données du formulaire     (? clic sur bouton submit)

-  Input.focus()

amène le curseur de saisie dans le champ

-  window.setInterval( fonction, nbMilliSecondes ) exécute un traitement périodiquement

-  window.alert( "message" )

affiche un message dans une boîte de dialogue

-  window.confirm( "message" )

affiche une boîte de dialogue oui/non

-  window.prompt( "message", "valeur par défaut" )

affiche une boîte de dialogue permettant de saisir une valeur

279

12.  JavaScript

Gestion d'événements

Interaction avec l'utilisateur via des gestionnaires d'événements

•  événements gérables : clavier/souris

•  ajout de gestionnaires sur des éléments du document HTMLÖ ajout d'attributs (onClick=" ", keyPressed=" ", ) sur des balises HTML (<INPUT TYPE=SUBMIT onClick=" ">, )

•  fonctions JavaScript (définies par le programmeur) associée aux gestionnaires

Ö<INPUT TYPE=SUBMIT onClick="onAClique()">

Ö    appel de la fonction lorsque l'événement survient

Ö    exécution

280

12.  JavaScript

Syntaxe

Types de base nombre (pas de distinction entier, réel), chaîne de caractères, booléen Langage faiblement typé une variable peut à tout moment changer de type le type est déterminé au moment de l'affectation Syntaxe proche de Java quasiment les mêmes mots-clés et opérateurs mais pas de classe, ni d'héritage, ni d'exception, ni d'interface

Quelques pseudo-objets prédéfinis (manipulation de dates, tableaux, calculs)

Entrées/sorties rudimentaires (clavier, écran), pas de fichiers, ni de réseau

Langage sensible à la casse (var ? VAR) Commentaires (idem Java, C/C++)           /* */ ou //

283

12.  JavaScript

Déclaration de variables

•  affectation d'une valeur à un identificateur• utilisation du mot clé var

x = 24.5; var y;

Nombres                 entiers signés, héxadécimaux (0_x..), octal (0..), réels

Booléens                true ou false

Chaînes                  ' ' ou " "           ASCII 8 bits  +  \" \' \n \t \\

Opérations sur les chaînes de caractères (? nombreuses autres)

284

Tableaux • commencent à l'indice 0

•  accès aux éléments avec []      _monTab[12]

•  type ^Array

•  peuvent contenir des éléments de types hétérogènes

•  leur taille peut être augmentée à la demande

Déclaration 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; Tableaux multi-dimensionnels

matrice[i][j] =

Web                                                                                                285                                                                        Lionel Seinturier

Tableaux

Opérations sur les tableaux

-  t.length      : taille du tableau

-  t.concat(_{t1, )}        : concaténation de t, t1,

-  t.join(_sep)    : concaténation des éléments de t séparés par sep

-  t.reverse()   : renverse les éléments de t

-  t.slice(_from,to)         : sous-tableau de from (inclus) à to (exclus)

-  t.sort()      : tri

•  ces opérations retournent un résultat

•  le tableau initial (t) est inchangé (ce n'est pas un objet au sens Java)

Web                                                                                                286                                                                        Lionel Seinturier

12.  JavaScript

Arithmétiques       + - * / % ++ -- -

division entre entiers donne un réel (? Java, C/C++)

          JavaScript 1/2=0.5                 Java, C/C++           1/2=0

287

12.  JavaScript

Opérateurs

Manipulation de bits               ^{& | ^ ~ << >> >>>}

^ XOR

~ NOT

>> décalage à droite en conservant le signe

>>> décalage à droite en ajoutant des 0

Affectations            = += -= *= /= <<= >>= >>>= &= ~= |=     ternaire ?:

Logiques                  ^{&& || !}

Sur les chaînes       + ₊₌

Sur les variables typeof variable

retourne 'number', 'boolean', 'string', 'object', 'function' ou 'undefined' selon le type de la variable

288

Instructions

Identiques Java, C/C++

Conditions           if (condition) { } else { /* facultatif */ } switch (expression) { case constante : break;

default :

}

Boucles                      for ( initialisation ; test ; increment ) { }

while (condition) { } do { } while (condition);

Déroutements      break  : interruption for, case, while ou do/while continue  : passage itération suivante for

Fonction prédéfinie                 eval('expression JavaScript')

évalue l'expression JavaScript passée en paramètre

Web                                                                                                289                                                                        Lionel Seinturier

Fonctions

Définition 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);

}

Non déclaration exhaustive des arguments possible

Ö accès par le tableau prédéfini arguments

function plus() {

for ( i=0,s=0 ; i<arguments.length ; i++ ) {

s += arguments[i];

} return s;

}

Panachage déclaration arg. / non déclaration possible

Web                                                                                                290                                                                        Lionel Seinturier

12. JavaScript

Fonctions

Appels imbriqués de fonctions possibles

!! Attention: les variables ont une portée globale !!

function f1(n) { x = 12;

f2(14); // x vaut 13 maintenant }

function f2(n) { // x vaut 12 x = 13;

}

291

12.  JavaScript

Pseudo-objets JavaScript

But identique aux structures (struct) C

Ö stocker des données dans un enregistrement

Déclaration

objet = { propriete₁: valeur₁, , propriete_n: valeur_n }; monRectangle = { longueur: 4.5, largeur: 2 };

Accès aux propriétés des objets           objet_.propriete

Itération sur les propriétés d'un objet

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

Ö affichage : 4.5 2

292