TI1

Chapitre 3: Initiation JavaScript

Introduction

Brendan Eich

JavaScript (souvent abr g JS) est un langage de programmation de scripts

Membre du conseil

d'administration de la

fondation Mozilla

utilis dans les pages web interactives. Le langage a t cr en 1995

par Brendan Eich pour le compte de Netscape Communications Corporation.

Le langage, actuellement a la version 1.8.2.

Le Javascript est sensible la casse, c'est- -dire qu'il fait une diff rence entre

un nom de variable contenant ou non des majuscules.

Ainsi la fonction bonjour(); n'est pas la m me fonction que Bonjour();.

Comme en langage C, chaque instruction se termine par un point-virgule (;).

JavaScript & Java

Il ne faut pas confondre le JavaScript et le Java. En effet contrairement au langage Java, le code

est directement crit dans la page HTML, c'est un langage peu volu qui ne permet aucune

confidentialit au niveau des codes. D'autre part l'applet Java a t pr alablement compil e, et

une machine virtuelle permettant d'interpr ter le pseudo-code doit tre charg e en m moire

(du c t du client) chaque chargement de la page, d'o un important ralentissement pour les

applets Java contrairement au JavaScript.

Javascript

Langage interpr t

Code int gr au HTML

Langage peu typ

Liaisons dynamiques: les

r f rences des objets sont

v rifi es au chargement

Accessibilit du code

Java

Langage pseudo-compil

(chargement d'une machine virtuelle)

Code (applet) part du document HTML, appel partir

de la page

Langage fortement typ (d claration du type de variable)

Liaisons statiques: les objets doivent exister au chargement

(compilation)

Confidentialit du code

ISET DE BIZERTE 2014-2015 | HTML5 1

TI1

Insertion de code JavaScript dans une page HTML

Utilisation de la balise script

Un script est une portion de code qui vient s'ins rer dans une page HTML. Le code du script

n'est toutefois pas visible dans la fen tre du navigateur car il est compris entre des balises (ou

tags) sp cifiques qui signalent au navigateur qu'il s'agit d'un script crit en langage JavaScript.

Les balises annon ant un code Javascript sont les suivantes :

//Placez ici le code de votre script

</script>

On ins re normalement toutes les fonctions et initialisations dans le head de la page HTML

(cela assure que les proc dures soient connues, avant d tre appel es).

Exemple

programme sayhello() qui permettra dafficher une petite fen tre avec le texte: "Bonjour Tout le monde!!!"

<HEAD>

<TITLE>Hello World avec JavaScript</TITLE>

// ICI on definit une fonction JavaScript

function sayhello() {

alert("Bonjour tout le monde!!! ")

}

</script>

</HEAD>

<BODY>

Script Externe

Il est possible de mettre les portions de code dans un fichier externe. L'appel se fait via l'attribut

SRC, plac dans la balise Script.

Exemple

<html>

<head>

</head>

<body>

</body>

</html>

ISET DE BIZERTE 2014-2015 | HTML5 2

TI1

Syntaxes

D claration des variables

En JavaScript les variables ne sont pas typ es. La d claration peut se faire dune mani re

explicite gr ce au mot clef var ou dune mani re implicite.

Exemple

var i; //D claration de variable dune fa on explicite

i = 2;

chaine = "bonjour"; //D claration de variable dune fa on implicite

bool = true;

Les variables ne doivent pas tre des mots-clefs JavaScript : var, form, int,

document, etc..

D finition des fonctions

Une fonction est introduite par function.

function nom(arg0, arg1, ..., argN) { //votre script. }

//ou

var nom = function (arg0, arg1, ..., argN) { //votre script. }

Exemple

return n1+n2; }

function sum(n1, n2) {

alert(sum(5,10)); //15

// ou bien

var sum = function (n1, n2) { return n1+n2; };

alert(sum(5,10)); //15

Port e locale dune variable

function test() {

var message = "hi";

}

test();

alert(message); // undefined

Port e globale

function test() {

message = "hi";

}

test();

alert(message); // "hi"

Types

ISET DE BIZERTE 2014-2015 | HTML5 3

TI1

Types

Il y a principalement trois types classiques de donn es Boolean, Number, String et un type

complexe Object (liste de couples nom-valeurs). Il est possible de d terminer le type (courant)

d'une variable avec l'op rateur typeof qui retourne l'une des valeurs suivantes:

undefined si la valeur est ind finie (variable d clar e mais pas initialis e ou variable non

d clar e)

boolean

number

string

object si la valeur est un objet ou null

function si la valeur est une fonction

Conversions num riques

Relatifs aux valeurs et conversions des nombres, on trouve 4 fonctions :

isNaN d termine si un param tre donn n'est pas un nombre

Number effectue une conversion

parseInt effectue une conversion en valeur enti re

parseFloat effectue une conversion en valeur r elle

Exemple

alert(isNaN(10)); // false

alert(isNaN("10")); // false - peut tre convertie

alert(isNaN("blue")); // true - ne peut tre convertie

var num1 = Number("hello world"); // NaN

var num2 = Number("00001"); // 1

var num3 = Number(true); // 1

var num3 = parseInt(""); // NaN

var num4 = parseInt(22.5); // 22

var num5 = parseInt("70",10); // 70 - la base 10 est sp cifi e

var num6 = parseFloat("22.5"); // 22.5

String

On utilise les quotes simples (apostrophes) ou doubles (guillemets) pour d finir des valeurs

cha nes de caract res. L'attribut length permet de d terminer la longueur d'une cha ne.

Exemple

var nom = "Ali";

var prenom = 'Mohamed';

alert(prenom.length); // 7

var message = "toto a dit \"je suis malade\".";

Il est possible de transtyper une valeur en cha ne avec String().

Exemple

ISET DE BIZERTE 2014-2015 | HTML5 4

TI1

var v1 = 10; alert(String(v1)); // "10"

var v2 = true; alert(String(v2)); // "true"

var v3 = null; alert(String(v3)); // "null"

var v4; alert(String(v4)); // "undefined"

Il existe de nombreuses fonctions sur les cha nes de caract res.

Exemple

var s = "hello world";

alert(s.length); // 11

alert(s.charAt(1)); // "e"

alert(s.charCodeAt(1)); // 101

alert(s.slice(3)); // "lo world"

alert(s.slice(-3)); // "rld"

alert(s.substring(3,7)); // "lo w"

alert(s.indexOf("o")); // 4

alert(s.lastIndexOf("o")); // 7

alert(s.toUpperCase()); // HELLO WORLD

alert(s + " !"); // hellow world !

Math

Il s'agit d'un objet d finissant de nombreuses constantes et fonctions math matiques.

Exemple

alert(Math.E); // la valeur de e

alert(Math.PI); // la valeur de pi

alert(Math.min(5,12)); // 5

alert(Math.max(23,5,7,130,12)); // 130

alert(Math.ceil(25.3)); // 26

alert(Math.floor(25.8)); //25

alert(Math.random()); // valeur al atoire entre 0 et 1

var n = Math.floor(Math.random()*nb + min);

alert(n); // valeur al atoire entre min et min+nb (exclus)

D'autres fonctions:

Math.abs(x) Math.exp(x) Math.log(x)

Math.pow(x,y) Math.sqrt(x)

Math.sin(x) Math.cos(x) Math.tan(x)

Op rateurs

Typiquement, ceux de C, C++ et java:

ISET DE BIZERTE 2014-2015 | HTML5 5

TI1

incr mentation/d cr mentation (++, --)

arithm tiques (+,*,-,=,%)

relationnels (>,<,>=,<=,==,! =) et (===,! ==)

logique (!,&&,||)

affectation (=,+=,-=,*=,/=,%=)

Exemple

var age = 10;

age++;

alert(age); // 11

alert(age > 10 && age < 20); // true

alert(26 % 5); // 1

age*=2;

alert(age); // 22

Structures de contr le

Elles sont tr s proches de celles de langages tels que C, C++ et Java. Pour rappel, les structures

de contr les sont de trois types :

S quence : ex cution s quentielle d'une suite d'instructions s par es par un point-

virgule

Alternative : structure permettant un choix entre divers blocs d'instructions suivant le

r sultat d'un test logique

Boucle : structure it rative permettant de r p ter plusieurs fois le m me bloc

d'instructions tant qu'une condition de sortie n'est pas av r e

Alternative

L'instruction if sans partie else :

if (condition) instruction;

if (condition) { instruction; }

if (condition) { instruction1; instruction2; ... }

Exemple

if (x >= 0) alert("valeur positive ou nulle");

...

if (note > 12 && note <= 14) {

alert("bravo");

mention="bien";

}

L'instruction if...else :

if (condition) instruction1;

else instruction2;

if (condition) {

instructions1;

} else {

instructions2;

}

if (condition1) {

instructions1;

} else if (condition2) {

instructions2;

} else {

instructions3;

}

ISET DE BIZERTE 2014-2015 | HTML5 6

TI1

Exemple

if (rank == 1)

medaille="or";

else if (rank == 2)

medaille="argent";

else if (rank == 3)

medaille="bronze";

L'op rateur ternaire ?:

Permet de remplacer une instruction if...else simple. Sa syntaxe (lorsqu'utilis e pour donner

une valeur une variable) est :

variable = condition ? expressionIf : expressionElse;

Elle est quivalente :

if (condition) variable=expressionIf;

else variable=expressionElse;

Exemple

var civilite = (sexe == "F") ? "Madame" : "Monsieur";

Cet op rateur est utile pour les expressions courtes.

L'instruction switch :

switch (expression) {

case valeur1 :

instructions1;

break;

case valeur2 :

instructions2;

break;

...

case valeurN :

instructionsN;

break;

default:

instructionsDefault;

}

@ Le branchement par d faut n'est pas obligatoire.

Boucle

L'instruction while :

while (condition) instruction;

while (condition) { instruction1; instruction2; ... }

Exemple

var num = 1;

while (num <= 5) { alert(num); num++; }

ISET DE BIZERTE 2014-2015 | HTML5 7

TI1

L'instruction for :

for (instructionInit; condition; instructionIter) instruction;

for (instructionInit; condition; instructionIter) { instruction1; instruction2; ... }

Exemple

for (var num = 1; num <= 5; num++) alert(num);

L'instruction do...while :

do {

instruction1;

instruction2;

...

} while (condition);

L'instruction for-in pour les objets :

for (var prop in window)

document.writeln(prop);

Certaines instructions permettent un contr le suppl mentaire sur les boucles :

break permet de quitter la boucle courante

continue permet de terminer l'it ration en cours de la boucle courante

Exemple

for (var i=0; i<5; i++) {

for (var j=0; j<5; j++) {

if ((i+j)%3 == 0)

continue;

for (var k=0; k<5; k++) {

if ((i+j+k)%3 == 0)

break;

alert(i + " " + j + " " + k);

}

Exercice

Ecrire le code Javascript qui d termine si un nombre entier x est parfait.

@ Un nombre est parfait ssi il est gal la somme de ses diviseurs stricts.

6 est parfait car 6 = 1 + 2 + 3.

Object

ISET DE BIZERTE 2014-2015 | HTML5 8

TI1

Utilis pour stocker des donn es. Cr ation d'une variable (de type Object) avec new Object() ou

de mani re litt rale ( num ration entre accolades).

Exemple

var person = new Object();

person.name = "Julien";

person.age = 23;

//ou bien

var person = { name : "Julien", age : 23 }

@ Il est possible d'utiliser les crochets pour acc der un champ.

alert(person.name);

alert(person["name"]);

var field="name"; alert(person ); 35

Array

Les tableaux peuvent contenir des donn es de nature diff rente.

Exemple

var colors = new Array(); // tableau vide

var colors2 = new Array(20); // tableau avec 20 cases

var colors3 = new Array("red","blue","green"); // 3 cases

var colors4 = ["red","blue","green"]; // notation litt rale

@ Le champ length indique la taille d'un tableau.

var colors = ["red","blue","green"];

alert(colors.length); // 3

colors ="black"; // nouvelle couleur

colors[99]="pink";

alert(colors.length); // 100

alert(colors[50]): // undefined

colors.length=10; // plus que 10 cases

@ De nombreuses m thodes existent sur les tableaux.

Exemple

var colors = ["red","blue","green"];

alert(colors); // red,blue,green

alert(colors.join(";")); // red;blue;green

colors.push("black");

alert(colors); // red,blue,green,black

var item = colors.pop();

alert(item + " " + colors); // black red,blue,green

var item2= colors.shift();

ISET DE BIZERTE 2014-2015 | HTML5 9

TI1

alert(item2 + " " + colors); // red blue,green

@ Il existe d'autres m thodes telles que concat, slice et splice.

R -ordonner les tableaux

On peut utiliser reverse et sort.

Exemple

var values = [0, 1, 2, 3, 4];

alert(values.reverse()); // 4,3,2,1,0

values = [0, 1, 5, 10, 15];

alert(values.sort()); // 0,1,10,15,5

function compare(value1, value2) {

...

}

values = [0, 1, 5, 10, 15];

alert(values.sort(compare)); // 0,1,5,10,15

Exercice

Ecrire le corps de la fonction compare ci-dessus qui retourne -1 lorsque le premier argument

est inf rieur au second, +1 lorsque le premier argument est sup rieur au second, et 0 sinon.

Window

L'objet window repr sente la fen tre du navigateur.

Exemple

window.moveTo(0,0);

window.resizeTo(800,800);

var vW = window.open("http://www.isetb.tn","v");

if (vW == null) alert("fenetre bloquee");

else { ...

vW.close();

}

@ Le navigateur peut tre configur de mani re emp cher de modifier son emplacement, de

modifier sa taille ou encore d'afficher une fen tre pop-up.

Timer

Il est possible de programmer l'ex cution d'une m thode un instant donn ou des temps

r guliers gr ce setTimeout et setInterval.

Exemple

function helloWorld() { alert("hello world"); }

var id = setTimeout(helloWorld, 1000);

ISET DE BIZERTE 2014-2015 | HTML5 10

TI1

var num=0, max=4, intervalId = setInterval(incrementNumber,500);

function incrementNumber() {

if (++num == max) clearInterval(intervalId);

else alert(num);

}

@ Il est possible d'annuler avec clearTimeout et clearInterval.

Boites de dialogues

Des boites de dialogues peuvent tre ouvertes en utilisant les m thodes alert, confirm et

prompt.

Exemple

if (confirm("Voulez vous quitter?"))

alert("Au revoir");

else

alert(" Suite& ");

var name = prompt("What is your name?","Toto");

if (name != null)

alert("Welcome " + name);

ISET DE BIZERTE 2014-2015 | HTML5 11

TI1

Annexes : Les v nements

Les v nements

vont pouvoir donner

lieu une interactivit . Ce sont les gestionnaires d' v nements qui permettent d'associer une

action un v nement.

l'utilisateur, qui

actions de

sont des

La syntaxe d'un gestionnaire d' v nement est la suivante :

onEvenement="Action_Javascript_ou_Fonction();"

@ Associer un v nement un l ment

Pour ce faire il suffit de mettre dans la balise le nom de l' v nement et de lui associ une

fonction

exemple :

On peut ex cuter plusieurs fonctions sur le m me v nement pour ce faire il suffit de rajouter

un point virgule.

@ Liste non exhaustive des v nements

Ev nement Description

Objets Associ s

onClick

onLoad

Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre l ment. Button, document, Checkbox,

Link, Radio, Reset, Select,

Submit

Image, Layer, window

Lorsque la page est charg e par le browser ou le navigateur.

onUnload

Lorsque l'utilisateur quitte la page.

onMouseOver

onDragdrop

onMouseOut

mouseup

onMouseDown

onFocus

Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout

autre l ment.

lorsque

navigateur.

Lorsque le pointeur de la souris quitte un lien ou tout autre l ment.

l'utilisateur effectue un glisser-d poser sur

la fen tre du

Lorsqu un l ment de formulaire a le focus c- -d devient la zone

d'entr e active.

onBlur

Lorsquun l ment de formulaire perd le focus c- -d que l'utilisateur

clique hors du champs et que la zone d'entr e n'est plus active.

onChange

Lorsque la valeur d'un champ de formulaire est modifi e.

onSelect

onSubmit

onError

Lorsque l'utilisateur s lectionne un champ dans un l ment de

formulaire.

Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un

formulaire

lorsqu'une erreur appara t durant le chargement de la page.

window

Area, Layer, Link

window

Layer, Link

Button, document, Link

Button, Checkbox,

FileUpload, Layer, Password,

Radio, Reset, Select, Submit,

Text, TextArea, window

Button,

Checkbox,

FileUpload, Layer, Password,

Radio, Reset, Select, Submit,

Text, TextArea, window

FileUpload, Select, Submit,

Text, TextArea

text, Textarea

Form

Image, window

ISET DE BIZERTE 2014-2015 | HTML5 12

TI1

onKeydown

lorsque l'utilisateur appuie sur une touche de son clavier.

onKeypress

lorsque l'utilisateur maintient une touche de son clavier enfonc e.

lorsque l'utilisateur rel che une touche de son clavier pr alablement

enfonc e.

lorsque l'utilisateur efface les donn es d'un formulaire l'aide du bouton

Reset.

lorsque l'utilisateur redimensionne la fen tre du navigateur

onKeyup

onReset

onResize

onAbort

dblclick

Image,

Link,

Image,

Link,

Image,

Link,

document,

TextArea

document,

TextArea

document,

TextArea

form

window

image

document, Link

ISET DE BIZERTE 2014-2015 | HTML5 13

Introduction to JavaScript

Introduction to JavaScript