[PDF] Document complet sur JavaScript

(1)

IFT 6800

Atelier en technologies d'Information

Javascript

IFT1146 – Javascript – p.1

Javascript – c’est quoi?

• Javascript est un langage de programmation. • Javascript ressemble à C, C++ et Java.

• Javascript peut être utilisé dans des fichiers

HTML.

• Javascript permet d’interagir avec l’usager de la

page Web.

• Javascript est exécuté à l’intérieur du fureteur

(2)

Javascript

• Javascript est un langage interprété: l’ordinateur

convertit à chaque exécution le code source en langage exécutable.

• Dans un langage de programmation compilé, le

code source est compilé une seule fois afin de créer un fichier exécutable.

• Dans un langage interprété, le code source est

toujours lisible (on peut vérifier ce qu’est le contenu du programme).

Historique

• Le nom JavaScript est une propriété de Netscape. • L’implantation de Microsoft porte le nom JScript. • Javascript a été standardisé par l’ECMA

(European Computer Manufacturers

Association). La version standardisée s’appele

ECMAScript.

• Un standard ISO verra le jour bientôt.

• Les versions de Microsoft et Netscape ne sont pas

(3)

Premier exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>Exemple Javascript</title>

Premier exemple – suite

<body>

<h1>La fonction factorielle</h1>

<p>

<!--for (var i=1; i<10; i++) {

document.writeln(i + ’! = ’ + factorielle(i) + ’<br>’); } // --> </script> </p> </body> </html>

(4)

Masquage des scripts

• Pas tous les fureteurs peuvent gérer des

programmes Javascript.

• On peut “cacher” le Javascript de la façon

suivante: <script type="text/javascript">  </script>

• On peut aussi utiliser le conteneur <noscript>

afin de proposer un contenu sans Javascript.

Structure d’un programme

• Javascript est sensible à la casse (case-sensitive),

i.e. While est différent de while

• Les commentaires peuvent être spécifiés par //

et par /* ... */

// voici un commentaire d’une ligne /* et

voici

un plus long */

(5)

Structure d’un programme

• Les point-virgules ne sont pas obligatoires après

une expression si elle est suivie d’un retour à la ligne (mais souvent on place des point-virgules après chaque expression).

• Chaque variable utilisée doit être déclarée avec

var

var b=45

var c=34; var d=56

• Les accolades ({ et }) permettent de former des

blocs (fonctions, boucles etc.)

Types de données

• nombres • valeurs booléennes • chaînes de caractères • objets • tableaux • expressions régulières

(6)

Nombres

• tous les nombres sont représentés en virgule

flottante var x=33; var y=3.14; var z=-234.56786; • valeurs particulières: • Number.MAX_VALUE • Number.MIN_VALUE • Number.NEGATIVE_INFINITY • Number.POSITIVE_INFINITY IFT1146 – Javascript – p.11

Opérateurs mathématiques

• x++ équivalent à x=x+1 • x-- équivalent à x=x-1

• x+=y équivalent a x=x+y

• x-=y équivalent à x=x-y

• x*=y équivalent a x=x*y

• x/=y équivalent à x=x/y

• x%y reste de la division entière de x par y

• Math.max(x,y) maximum entre x et y

• Math.min(x,y) minimum entre x et y

(7)

Exemple

<html lang="fr"> <head> <title>Exemple Javascript</title> </head> <body> <script type="text/javascript">  </script> </body> </html> IFT1146 – Javascript – p.13

Opérateurs de comparaison

• x==y est VRAI si x est égal à y

• x!=y est _VRAI si x est différent de y • x<y est VRAI si x est plus petit que y • x>y est VRAI si x est plus grand que y • x<=y est _VRAI si x est plus petit que y+1 • x>=y est VRAI si x est plus grand que y-1

(8)

Opérateurs logiques

• Une valeur logique (booléenne) est toujours soit

VRAI soit FAUX

• x&&y est VRAI si x et y sont VRAI. Si x est

FAUX, la valeur de y n’est pas évaluée.

• x||y test VRAI au moins un de x et y est VRAI. Si x est VRAI, la valeur de y n’est pas évaluée.

• !x correspond au NON logique

Chaînes de caractères

• Des chaînes de caractères peuvent être spécifiés

entre " ou entre ’ (dernière conseillée)

var chaine1 = ’abc’; var chaine2 = ’def’;

• concaténation: +

var chaine = ’abc’ + ’def’; // alors chaine=’abcdef’

• longueur : length

l = chaine.length; // alors l = 6

• caractère à une position: charAt

var s = chaine.charAt(1) // alors s = ’b’

• position de la première occurence: indexOf

var i = chaine.indexOf(’d’) // alors i = 3

(9)

Objets

• Un objet est un ensemble de données qui portent

chacune un nom. Une donnée s’appelle une propiété de l’objet.

• On fait référence à une propriété en utilisant le

nom de l’objet suivi de . suivi du nom de la propriété.

image.height image.width

document.formulaire.button

• Si une fonction est associée avec un objet, la

fonction est appelée une méthode et on l’accède en utilisant le nom de l’objet suivi de . suivi du nom de la méthode.

document.write("test");

• Un objet est créé avec un constructeur (new)

Tableaux

• Un tableau contient des valeurs énumérées. • L’opérateur [] est utilisé afin d’accéder aux

valeurs.

var a = new Array(); // cree un tableau vide

var b = new Array(5); // cree un tableau de taille 5 var cours = new Array("IFT1146", "IFT2102", "IFT2121"); var c = cours[0]; // c = "IFT1146"

var d = [[1,2,3], [4,5,6], [7,8,9]]; var e = d[0][1]; //e = 2

• Le premier élément d’un tableau est à la position

0.

• Une propriété très utile est length (nombre

d’éléments dans le tableau).

(10)

Structures de contrôle

• On des fois besoin de répéter une certaine

opération plusieurs fois ou de seulement

l’exécuter si une certaine condition est remplie.

• structures de contrôle disponibles:

• if ... else • for( ... ; ... ; ... ) • while( ...) • do ... while( ... ) IFT1146 – Javascript – p.19

if

if (condition) { code 1 } else { code 2 }

• Si la condition est vraie, alors code 1 est

executé.

• Si la condition est fausse, alors code 2 est

executé.

(11)

while

while (condition) { code

}

• Tant que la condition est vraie, code est executé. • Attention de ne pas créer de boucles infinies.

• Permet de répéter une action tant qu’une

condition est remplie.

do while

do { code } while (condition);

• Tant que la condition est vraie, code est executé. • Similaire à la boucle while, mais la condition

est vérifiée à la fin de la boucle.

• Le code est toujours executé au moins une fois. • Attention de ne pas créer de boucles infinies.

(12)

for

for (initialisation; test; incrementation) code

}

utilisation courante

for (i=0; i<10; i++) code

}

• Utilisé afin d’effectuer une action un nombre

prédéterminé de fois.

Fonctions

function nomDeLaFonction (argument1, argument2, ...) { code

return }

• Définit une fonction du nom

nomDeLaFonction avec un certain nombre d’arguments.

• Une fonction est un petit programme

indépendant.

• Tous les arguments de type nombre et booléen

sont transmis par valeur, i.e. la fonction obtient la valeur des arguments, mais ne peut pas les modifier. Les arguments de type objet sont transmis par référence.

(13)

Exemple fonction

<html lang="fr"> <head> <title>Exemple Javascript</title> <script type="text/javascript"> function add1(x) { x++; document.writeln(’dans la fonction x = ’ + x + ’<br>’); } </script> </head> <body> <script type="text/javascript"> var x = 6; document.writeln(’avant x = ’ + x + ’<br>’); add1(x); document.writeln(’après x = ’ + x + ’<br>’); </script> </body> </html> IFT1146 – Javascript – p.25

Tri d’un tableau

function initialiser(tableau) {

for (var i=0; i<tableau.length; i++)

tableau[i] = Math.floor(Math.random()*100) }

function tri(tableau) { var minpos;

var intermed;

for (var j=0; j<tableau.length-1; j++) { minpos=j;

for (var i=j+1; i<tableau.length; i++) { if (tableau[i] < tableau[minpos]) minpos = i; } intermed = tableau[j]; tableau[j] = tableau[minpos]; tableau[minpos] = intermed; } }

(14)

Durée de vie d’une variable

<html lang="fr"> <head> <title>Exemple Javascript</title> </head> <body> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </body> </html> IFT1146 – Javascript – p.27

Durée de vie d’une variable

<html lang="fr"> <head> <title>Exemple Javascript</title> <script type="text/javascript">  </script> </head> <body> <script type="text/javascript">  </script>

(15)

Dates

• L’objet Date permet d’utiliser des dates et

heures dans des programmes Javascript.

• exemples:

var aujourdhui = new Date() //la date du jour

var date1 = new Date(2001,02,30,8,45,0) // 30 mars 2001

• le mois doit être indiqué comme entier entre 0 et

11

• méthodes utiles:

• toLocaleString(): chaîne représentant la

date

• getYear(), getMonth(), ...

Javascript dans un fureteur

• Javascript interagit avec le fureteur grâce à son

modèle d’objet.

• Divers aspects du fureteur correspondent à

différents objets (avec diverses propriétés et méthodes)

• Les fonctions sont usuellement placées à

l’intérieur du conteneur <head> afin d’être disponibles quand la page est affichée.

• Tout code Javascript qui modifie le code HTML

d’une page doit être exécuté lors de l’évaluation de la page.

• <script type="text/javascript" src="fichier.js"></script>

(16)

Gestionnaire d’événements

• Un lien permet (entre autres) la gestion des

événements suivants:

onClick on clique sur le lien

onMouseOver la souris passe par dessus le lien

onMouseOut la souris quitte le lien

• onClick doit retourner _FAUX pour que le lien

ne soit pas suivi.

L’objet window – propriétés

• window se trouve tout en haut de l’hiérarchie

des objets Javascript

• window représente la fenêtre du fureteur • Objets qui sont des propriétés de window

• document: contenu de la fenêtre • history: liste d’historique

(17)

L’objet window – méthodes

• alert(’text’): boîte de dialogue

d’avertissement

• confirm(’text’): boîte de dialogue de

confirmation; si l’utilisateur appuie sur ok VRAI est retourné

• prompt(’text’): boîte de dialogue d’entrée • close(): fermeture de la fenêtre

• open(url,nom): ouverture de l’URL dans

une fenêtre s’appelant nom. Si nom n’existe pas encore, une nouvelle fenêtre est créée.

La méthode window.open

• window.open() permet un troisième

argument (chaîne de caractères) qui spécifie les fonctionnalités de la nouvelle fenêtre (séparées par des virgules sans espaces:

(18)

Événements de l’objet window

• onfocus: lorsque la fenêtre est activée • onload: lorsque la fenêtre est chargée • onunload: lorsque l’utilisateur quitte le

document dans la fenêtre

• Ces événements sont placés dans la balise

Tableaux d’objets

• Un tableau d’objets est utilisé afin de faire

référence à plusieurs objets du même genre qui peuvent être présents dans un document (images, formulaires, liens hypertexte, etc.)

• documents contient les tableaux suivants: anchors, forms, images, links, frames, ...

• On peut faire référence aux objets contenu dans

les tableaux de trois façons:

• document.forms[0] avec un numéro

• document.formulaire1 si on déclare le

formulaire par <form name="formulaire1">

• document.forms["formulaire1"] si le

(19)

Exemple concret

• Création d’une image qui change quand elle

reçoit le focus

• Les événements à capturer sont onMouseOver

et onMouseOut

<a href="noscript.html"

onMouseOver="document.fureteur.src=’netscape.gif’" onMouseOut="document.fureteur.src=’ie.jpg’"

onClick="return false;">

Charger les images d’avance

• Il faut charger les images à afficher d’avance pour

qu’elles se trouvent dans la mémoire cache de l’ordinateur

• On se sert du constructeur d’images

var image1 = new Image(); image1.src = "image1.gif"; var image2 = new Image(); image2.src = "image2.gif"; ...

(20)

setTimeout()

• La fonction setTimeout() peut être utilisée

afin de faire exécuter une fonction après un certain délai.

var timeID = setTimeout(’charger();’, 2000);

• Le délai est indiqué en millisecondes.

• La fonction clearTimeout() annule les

appels de setTimeout().

clearTimeout(timeID);

Permutation d’un tableau

• Le code

function permuter(tableau) { var position;

var intermed;

for (var i = tableau.length-1; i > 0; i--) { do {

position = Math.floor(Math.random() * i); } while (position == i);

intermed = tableau[position]; tableau[position] = tableau[i]; tableau[i] = intermed; } } • Exemple

(21)

window.status

• window.status permet d’afficher un message

dans la barre de statut du fureteur.

• window.defaultStatus spécifie le contenu

par défaut de la barre de statut.

• Attention: pour associer une valeur a

window.status ou

window.defaultStatus, vous devez absolument retourner true!

<a href="http://www.iro.umontreal.ca"

onMouseOver = "window.status = ’Cliquez ici’; return true"> UdM

</a>

URL Javascript

• javascript: peut apparaître comme

“protocole” à la place d’un URL afin d’exécuter du code Javascript.

• <a href="javascript: test();">test</a>

• Le code Javascript est exécuté et la valeur de

retour sert d’URL.

• Si on veut s’assurer que la valeur de retour n’est

pas prise en compte, il faut utiliser void.

(22)

Couleurs

• On peut spécifier avec Javascript des couleurs

pour l’arrière-fond, l’écriture et les liens d’un document HTML.

• Les propriétés à utiliser sont

• document.bgColor (arrière-fond) • document.fgColor (texte)

• document.linkColor (lien)

• document.alinkColor (lien actif) • document.vlinkColor (lien suivi) • Exemple

window.location

• window.location contient une

représentation de l’URL du document actuel.

• en assignant une valeur à window.location,

on peut changer le contenu d’une page.

• window.location=’http://www.iro.umontreal.ca’

• Exemple

• la méthode window.location.replace a

le même effet, mais ne crée pas d’entrée dans l’historique du fureteur pour la page courante. L’usager ne pourra donc pas utiliser le bouton “Back” du fureteur pour revenir à cette page.

(23)

window.navigator

• window.navigator contient des

informations sur le fureteur (nom, langue, système d’exploitation, etc)

• grâce à window.navigator on peut donc

détecter le furetur du client et proposer des pages différentes pour différents fureteurs.

• window.navigator.plugins contient les

plugins installés. On teste pour un plugin en particulier avec

if (window.plugins["Shockwave"] != null)

• window.navigator.javaEnabled() est

vrai si la console Java est disponible.

window.screen

• window.screen contient des informations sur

l’affichage.

• résolution de l’écran

• nombre de couleurs disponibles

• On peut ainsi proposer par exemple des sites

optimisés pour différentes résolutions d’écran.

• Exemple

(24)

Cookies

• HTTP ne conserve pas l’état des interactions avec

le serveur comme:

• nom d’utilisateur

• nombre de fois que le site a été visité • préférences

• ...

• Cookies permettent de sauvegarder de

l’information sur l’ordinateur du client.

• Cookies ont été inventé par Netscape (pas de

raison particulière pour le choix du nom)

• Les cookies restent même une fois le fureteur

quitté.

Cookies - Propriétés (1)

• Chaque cookie possède une valeur ainsi que

quatre attributs supplémentaires qui contrôlent sa durée de vie, sa visibilité, son accessibilité et sa sécurité.

• durée de vie (expires): par défaut un cookie ne

dure que pendant le fureteur est ouvert. Si on veut sauvegarder une information de manière permanente, il faut spécifier une date

d’expiration.

• visibilité (path ): pages du même site qui peuvent

accéder le cookie. Par défaut, seulement les pages dans le même répertoire et dans des sous-répertoires peuvent accéder un cookie.

(25)

Cookies - Propriétés (2)

• accessibilité (domain): Permet de rendre le

cookie accessible à d’autres serveurs Web à l’intérieur du même domaine.

• sécurité (secure): si secure est spécifié, le cookie

est seulement transmis si la connexion est https

escape() et unescape()

• escape() permet d’encoder une chaîne de

caractères pour une transmission.

• Tout caractère non ASCII est encodé en deux

chiffres hexadécimaux représentant l’encodage en ISO-8859-1 du caractère

• Exemple:

escape("Bonjour tout le monde!") retourne

Bonjour%20tout%20le%20monde%21

• unescape() est tout simplement la fonction

(26)

Écriture d’un cookie

• document.cookie contient tous les cookies

du document actuel.

• document.cookie permet de lire et d’écrire

les cookies du document actuel.

• Exemple: écriture du cookie de nom nombre et

de valeur 0

document.cookie = ’nombre=0’;

• si la valeur d’un cookie contient des espaces ou

des caractères non–ASCII, on doit l’encoder:

document.cookie = ’nom=’ + escape(valeur);

Lecture d’un cookie

• On se sert de nouveau de document.cookie.

var allcookies = document.cookie; var nom = ’nbVisitesCourantes’; var valeur;

var debut = allcookies.indexOf(nom + ’=’); var fin;

if (debut != -1) {

fin = allcookies.indexOf(’;’, nom.length+1); if (fin == -1)

fin = allcookies.length;

valeur = unescape(allcookies.substring(nom.length+1, fin))); }

(27)

Cookie avec expiration

• Si expires n’est pas spécifié, le cookie n’existe

que pour la session courante.

• Pour spécifier une date d’expiration, on ajoute

’; expires=’ + dateExp.toGMTString()

où dateExp est la date d’expiration du Cookie.

• Il est important de spécifier la date en

.toGMTString().

• Exemple:

document.cookie = ’nombre=’ + nombre + ’; expires=’ + dateExp.toGMTString();

Éffacer un cookie

• Afin d’éffacer un cookie, il suffit de spécifier

qu’il est périmé, i.e. que sa date d’expiration est passée.

• Le cookie ne sera peut-être pas éffacé

immédiatement, mais seulement à la fermeture du fureteur.

• Exemple:

var ancien = new Date(1970,0,0);

document.cookie = (nom + ’=’ + escape(valeur) + ’; expires=’ancien.toGMTString(););

(28)

Spécifier path et domain

• On spécifie path et domain de a même façon

qu’on spécifie expires

document.cookie = (nom + ’=’ + escape(valeur) + ’; domain=’ + domaine + ’; path=’ + chemin;

• Exemple pour path • Exemple pour domain

Validation de formulaires

• On peut vérifier la validité des entrées d’un

formulaire du côté client avant même de le soumettre au serveur.

• On peut associer une fonction

verifierFormulaire à l’événement onSubmit du formulaire: seulement si la

fonction verifierFormulaire retourne vrai le formulaire est envoyé.

• Une autre méthode consiste à crééer un bouton

“standard” (input type="button" ou input type="image") et de lui associer la fonction de vérification et d’appeler ensuite soi-même la méthode submit du formulaire.

(29)

Expressions régulières

• Une expression régulière représente un motif de

caractères.

• Une expression régulière est un objet en

Javascript et peut être créée de deux façons:

• le constructeur RegExp()

• comme suite de caractères entre /

var expReg1= /s$/;

var expReg2= new RegExp("s$");

// equivalent et correspond aux suite de caracteres qui finissent pas ’s’.

• La partie difficile est de bien définir l’expression

régulière pour le motif de caractères voulu.

Classes de caractères

• Une classe de caractères correspond aux

caractères contenues dans elle.

• [...] un caractère

• [ˆ...] tout sauf les caractères • \w équivalent à [a-zA-Z0-9_] • \W équivalent à [ˆa-zA-Z0-9_] • \d équivalent à [0-9] • \D équivalent à [ˆ0-9] • \s équivalent à [ \t\n\r\f\v] • \S équivalent à [ˆ \t\n\r\f\v]

(30)

Caractères spéciaux

• $ indique la fin d’une ligne • ˆ indique le début d’une ligne

• . n’importe quel caractère sauf le retour à la ligne

Répétitions

• Permettent de spécifier combien de fois un

élément d’une expression régulière peut être répété.

• {n,m} entre n et m fois l’expression • {n,} au moins n fois

• {n} exactement n fois • ? 0 ou 1 fois

• + équivalent à {1,} • * équivalent à {0,}

(31)

Groupement

• | permet de spécifier des alternatives comme

dans /a|b/

• () permet de regrouper

/(ab|cd)+|ef/ correspond soit à ef soit à une ou plusieurs occurences de ab et cd

• Des parenthèses peuvent aussi indiquer une

occurence! Les occurences sont accessibles avec RegExp.$1, RegExp.$2, ...

Méthodes

• test() est la méthode la plus facile à utiliser:

elle prend en argument une chaîne de caractères et retourne VRAI s’il y a une correspondance.

var pattern = /ava/;

pattern.test("Javascript"); // retourne vrai

• search() est une méthode de chaînes de

caractères qui prend comme argument une

expression régulière et retourne la position de la première correspondance et -1 s’il n’y a pas de correspondance.