Vous êtes sur la page 1sur 48

Chapitre 4:

Langage JavaScript
Hajer Fradi-ISSAT 2016/2017
1

Plan du chapitre
Introduction
Insertion du code JavaScript dans une page HTML
Conventions
Variables
Tableaux
Oprateurs
Tests logiques
Boucles
Fonctions
Objets & proprits
Evnements
2

JAVASCRIPT-Introduction
JavaScript a t initialement dvelopp par Netscape en 1995, puis standardis par
lECMA International (European Computer Manufacturers Association) sous le nom
dECMAScript.
Le JavaScript est un langage de programmation de scripts (i.e. langage interprt) orient
objet (i.e. utilise les objets pour communiquer avec le monde extrieur).
Le JavaScript est intgr directement dans le fichier HTML et permet de dynamiser une
page web, en ajoutant des interactions avec lutilisateur, des animations (afficher
/masquer du texte, faire dfiler des images, ).

JAVASCRIPT-Introduction
Les scripts JavaScript sont excuts pat le navigateur Web sur la machine du client (cot
client).
Le JavaScript est un langage bas vnement (event-driven)
Il permet de manipuler les vnements de la souris, les menus droulants, les
messages dalerte, les fentres, les cadres, les donnes des formulaires, et leur associer
des actions ou des fonctions.
Il peut tre utilis pour vrifier la validit des donnes fournies par linternaute.

Insertion du code JavaScript


Linsertion du code JavaScript peut se faire de 3 faons:
1.

Avec la balise <SCRIPT>

2.

En mettant le code dans un fichier externe

3.

En mettant en place un gestionnaire dvnements

Insertion du code JavaScript


1.

Insertion avec la balise <SCRIPT>:


Le code JavaScript peut tre insr dans nimporte quel endroit de la page Web, condition
que le script soit entirement charg avant dexcuter une instruction.
Gnralement, le code JavaScript est plac dans la balise den-tte (<head> </head>).
Cependant, les vnements JavaScript sont insrs dans le corps de la page Web entre les
balises <body> </body> en tant qu'attribut dun marqueur HTML.
Syntaxe:

<script language= javascript >


<!-Placez le code du script ici
-->
</script>

Ou

<script type= text/javascript >


<!-Placez le code du script ici
-->
</script>

Insertion du code JavaScript


Avec lattribut language, on spcifie le langage utilis pour les lignes de code qui suivent.
Dautres langages Script peuvent tre interprts par le navigateur (exp: VbScript).
N.B: Les versions du HTML antrieures la norme HTML 5, il est obligatoire de mettre
tout le script entre <!- et --> pour que le document soit correctement valid.

Insertion du code JavaScript


2.

Insertion dans un fichier externe:


Le code JavaScript peut tre plac dans un fichier indpendant sauvegard avec lextension
.js.
Dans le fichier HTML, on insre:

<script language=javascript src="url/fichier.js"> </script>

Insertion du code JavaScript


3. Mise en place dun gestionnaire dvnements:
Dans le navigateur, certaines actions effectues par linternaute donnent lieu des
vnements (exp: clic dun bouton de la souris).
Un gestionnaire dvnements, sera automatiquement excut lorsque lvnement
correspondant se prsentera.
Pour dfinir un gestionnaire dvnements, on utilise la syntaxe:

<balise NomEvenement= code JavaScript excuter >

Insertion du code JavaScript


Exemple:

10

Conventions
Les instructions dun script JavaScript sont spares par des ; ou par un retour chariot.
Un commentaire se trouve aprs //.
Un commentaire multiligne est crit entre /* et */.
Il faut faire attention aux noms des variables et des fonctions.

11

Variables
Dfinition:
Une variable est un objet identifi par un nom et contenant des donnes qui pourront tre modifies lors de
lexcution du programme.

Types de donnes:
En JavaScript, les variables sont dclares sans avoir besoin de prciser leur type.
Les diffrents types de donnes:
1. Les nombres: entiers (dcimal (base10), octal (base8) ou hexadcimal (base16)) ou virgules
flottantes. Certaines constantes correspondent des valeurs particulires:
o positive Infinity ou +Infinity qui peut tre obtenu quand on ajoute une quantit strictement
positive au plus grand nombre gr par le langage.
o negative Infinity ou Infinity
o Positive zero ou +0 correspond une valeur nulle positive
o Negative zero ou -0 correspond une valeur nulle ngative
o NaN (Not a Number) qui est obtenu quand on ralise une opration interdite (exp: division par
zro).
12

Variables
2.

Les chanes de caractres (String): une suite de caractres dlimite par des ou . Pour insrer des
caractres spciaux, on utilise (\).
o
o
o
o
o
o
o
o

\b: touche de suppression (retour en arrire)


\f: saut de page
\n: retour la ligne
\r: appui sur la touche ENTREE
\t: tabulation
\: guillemets doubles
\: guillemets simples
\\: caractre antislash

3. Les boolens: des variables deux tats (true, false)


4. Null: une variable qui ne contient pas de donne.
Pour tester lexistence dune variable et/ou vrifier son type, on utilise linstruction typeof:

13

Variables
Conversion de type:
JavaScript est dot de 4 fonctions de conversion de types chane/numrique.
o

eval (): valuation et conversion numrique dune chane.

var a=2
eval(a*2)
//retourne la valeur numrique 4.
o

eval(123)
//retourne la valeur numrique 123.

parseInt (): conversion dune chane en un nombre entier.

parseInt (FF, 16) /* retourne la valeur numrique 255 correspondante la chane FF dans la base 16*/
parseInt (12, 8) /* retourne la valeur numrique 10 correspondante la chane 12 dans la base 8*/
parseInt (essai, 10) /* retourne la valeur numrique 0 */
o

parseFloat(): conversion dune chane en un nombre rel.

parseFloat(1.12) /* retourne la valeur numrique 1.12 */


o

parseFloat(X12) /* retourne la valeur numrique 0 */

string (): transforme un objet en chane de caractres.


14

Variables
Tests sur les types:
isFinite():tester si la variable passe en paramtre est un nombre fini.
isNaN(): tester si le paramtre nest pas un nombre.

(exp: isFinite(+Infinity) renvoie false).

(exp: isNaN(abc) renvoie true, isNaN(32) renvoie false).

Dclaration & affectation des valeurs:


Dclaration dune variable sans affectation de la valeur:
o Pour dclarer une variable, on utilise var.
o Exemple: var a; /* dclare lexistence dune variable avec le nom est a. */
Oprateur daffectation simple:
o Laffectation dune valeur une variable se fait laide de loprateur =.
o Exemple: a=Ceci est une chane
a=b=c=d=e=5
Oprateurs daffectation complexe:
+=: permet de raliser une addition (si a vaut 5, a+=2; affecte 7 a).
-=: permet de raliser une soustraction (si a vaut 5, a-=2; affecte 3 a).

15

Variables
*=: permet de raliser une multiplication: si a vaut 5, a*=2; affecte 10 a.
/=: permet de raliser une division: si a vaut 5, a/=2; affecte 2.5 a.
Oprateur ternaire:
Cet oprateur permet daffecter une valeur une variable en fonction du rsultat un test.
Syntaxe: variable = TestARaliser?valeurSiTestVrai:ValeurSiTestFaux
Exemple: a=b>3?0:1 affecte 0 a si b est strictement suprieur 3, et 1 dans le cas contraire.
Porte dune variable:
Variable globale: une variable dclare sans le mot-cl var et accessible de partout dans le script.
Variable locale: une variable dclare avec le mot-cl var dont la porte dpend de lendroit o elle
est dclare.
function carre(nombre) {
var c = nombre*nombre;
}
// c est une variable locale

function carre(nombre) {
c = nombre*nombre;
}
/*c dclare dans le mot var, sa porte sera globale*/
16

Tableaux
Tableau une dimension:
Dclaration dun tableau de n lments: var nom_tableau= new Array (n);
Dclaration dun tableau dont le nombre dlments est priori inconnu: var nom_tableau= new Array ();
Affectation des valeurs un tableau:

var tableau1= new Array(4);


tableau1[0]=Beurre;
tableau1[1]=Confiture;
tableau1[2]=Pain;
tableau1[3]=Jus de fruit;

ou

var tableau1= new Array(4);


tableau1= [Beurre, Confiture, Pain, Jus de fruit];

Dclaration et dfinition simultanes dun tableau:

var tableau1= new Array(Beurre, Confiture, Pain, Jus de fruit);


La proprit length dun tableau renvoie son nombre dlments:

alert (tableau1.length);
//renvoie 4
17

Tableaux
Il est possible de remplir un tableau de donnes de diffrents types.
var tableau= new Array(10, "jeune",22.5);
Tableau multidimensionnel:

var nom_tableau = new Array (n);


for (i=0; i<nom_tableau.length; i++)
{
nom_tableau[i]=new Array(m);
}

Tableau associatif:
Tableaux dont les lments sont accessibles grce des noms utiliss comme cls (au lieu des
indices).
Preferences [Saison]=Ete;
Preferences[Couleur]=Bleu;
Preferences[Jour]=Vendredi;
Preferences[Musique]= Jazz;
18

Oprateurs
Oprateurs mathmatiques:
+

Additionner deux nombres ou concatner deux chanes ce caractres

Faire la soustraction de deux nombres

Faire la multiplication de deux nombres

Faire la division

Renvoie le reste de la division euclidienne de deux nombres.

Oprateurs de comparaison:
< (<=)

Tester si le premier nombre est strictement infrieur (infrieur ou gale) au second. Il renvoie true ou false.

> (>=)

Tester si le premier nombre est strictement suprieur (suprieur ou gale) au second. Il renvoie true ou false.

==

Tester lgalit de deux nombres. Il renvoie true ou false.

!=

Tester si les deux nombres sont diffrents. Il renvoie true ou false.

===

Permet de tester la fois le type et lgalit de deux expressions: 1===2 renvoie false, 1===1 renvoie true mais
1=== 1 renvoie false, puisquon compare un nombre une chane de caractres.
19

Oprateurs
Oprateurs logiques:
&&

et logique . Renvoie true quand les deux variables valent true.

||

ou logique . Renvoie true quand au moins une deux variables vaut true.

Oprateurs unaires:
!

Oprateur logique de ngation. Il sapplique aux boolens.

++

Oprateur dincrmentation: il ajoute 1 la variable concerne. Cet oprateur peut tre plac en prfixe
(lopration est ralise avant tout calcul) ou en postfixe (lopration est ralise la fin du calcul).

--

Oprateur de dcrmentation: il soustrait 1 la variable concerne. Cet oprateur peut tre plac en
prfixe (lopration est ralise avant tout calcul) ou en postfixe (lopration est ralise la fin du
calcul).

20

Tests logiques
Instruction switch:

Instruction if simple:

switch (choix){
case 1:
alert(Vous avez fait le premier choix);
break;
case 2:
alert(Vous avez fait le deuxime choix);
break;
case 3:
alert(Vous avez fait le troisime choix);
break;
default:
alert(Vous devez faire un choix entre 1 et 3);
}

if (choix==1)
{
alert(Vous avez fait le premier choix);
}

Instruction if else:
if (choix==1) {
alert(Vous avez fait le premier choix);
}
else {
alert(Vous navez pas fait le premier choix);
}

Exemple:

ou
21

Boucles
Boucle do while:
var compteur =1;
var n=10;
do
{
compteur++;
document.write(compteur+" ");
}
while(compteur<n)

Boucle while:
var compteur =1;
var n=10;
while(compteur<n)
{
compteur++;
document.write(compteur+" ");
}

Boucle for in:


Boucle for:
for (i=0; i<n; i++)
{
// Suite dinstructions
}

Souvent utilise avec les tableaux.


var Langages = new Array ('C++','Java', 'JavaScript','C#', 'Matlab');
for (i in Langages)
{
document.write(Langages[i]+'<hr/>');
}
22

Boucles
Linstruction break:

Linstruction continue:

Elle permet de mettre fin prmaturment une

Elle permet de mettre fin une itration et de

instruction itrative while ou for.

passer la boucle suivante.

23

Fonctions
Une fonction est un sous-programme qui permet deffectuer un ensemble dinstructions par simple
appel dans le corps du programme principal.
Une fonction doit tre dfinie avant dtre utilise.
La dclaration dune fonction se fait avec le mot-cl function:
function Nom_De_Fonction (argument1, argument2, )
{
//liste dinstructions
}

Une fonction peut ventuellement retourner une valeur:

24

Fonctions
Arguments:

25

Fonctions
Fonctions prdfinies:
setTimeout():
Permet de spcifier un temps aprs lequel une certaine action doit sexcuter.
Syntaxe:
nom_du_compteur=setTimeout(fonction_appele() , dure en millisecondes);
//Appelle la fonction fonction_appele aprs une dure en millisecondes.

Exemple:
<script type=text/javascript>
setTimeout(alert(Trente secondes sont passes!); ,30000);
</script>

clearTimeout():
Permet darrter une excution avec setTimeout().
Syntaxe:
var nom_du_compteur=setTimeout(fonction_appele() , dure );
clearTimeout(nom_du_compteur);

26

Fonctions
setInterval():
Syntaxe:

setInterval(fonction_appele(), duree);
/* Permet de dclencher lexcution de la fonction MaFonction toutes les dures en millisecondes */

Elle peut tre arrte par clearTimeout:


var vTimeout=setInterval(fonction_appele(), duree);
clearTimeout(vTimeout);

27

Objets & proprits


JavaScript traite les lments qui saffichent dans le navigateur comme des objets.
Quatre objets prdfinis sont instantanment associs un document lors de son chargement dans le
navigateur:
Lobjet window reprsente la fentre affiche dans le navigateur.
Lobjet location contient lURL du document courant.
Lobjet document donne accs aux proprits du document: titre, couleur, image de fond
Lobjet history donne accs aux URL des pages prcdemment visualises.

Les objets sont accessibles par une syntaxe hirarchique " point": objet1.objet2.objet3
Cette syntaxe point se termine souvent par une proprit associe un objet.
window.document.form.resultat.value

Une proprit est un attribut, ou une description de lobjet. Un objet peut possder plus quune seule
proprit.
28

Objets & proprits


Le mot cl This:
Le mot cl this fait rfrence lobjet en cours. Pour manipuler les proprits de cet objet:
this.propriete.
Dfinition dun nouveau type dobjet:
JavaScript permet de dfinir de nouveaux objets.
La cration dun nouvel objet se fait en deux temps:
- Dfinition du type de lobjet laide dune fonction
- Instanciation de lobjet avec loprateur new: var objet=new Object ();
Lire la valeur dune proprit dun objet:
objet.propertyName
objet["propertyName"];
Affectation dune valeur un proprit:
objet.propertyName =
objet["propertyName"] =

29

Objets & proprits


Exemple:

Dfinition

Crer un objet car avec trois proprits:

function car (brand, model, year)


{
car.brand=brand;
car.model=model;
car.year=year;
}

brand, model et year.

Mthodes:

Instanciation
var ma_voiture=new car(Toyota,
Yaris, 2007);

Une mthode est une fonction associe un objet.


Les mthodes des objets du navigateur sont des fonctions prdfinies par les normes HTML, quune on ne
peut pas les modifier.
Il est possible de crer une mthode personnelle pour un objet que lon a cre soi-mme.
Syntaxe: objet.nom_mthode(arguments...)
Lappel dune mthode se fait suivant la syntaxe suivante: window.objet1.objet2.methode ().

Exemple:

function displayCar() {
var result = My car is " + this.brand+ " " + this.model + " of " this.year ;
return (result);
}

30

Objets & proprits


Objets prdfinis:
Lobjet String:
Lorsqu'on dfinit une constante ou une variable chane de caractres, JavaScript cre d'une
faon transparente une instance String.
Proprits de lobjet String:
- Une seule proprit: length, qui renvoie sa longueur.
Exemple: chane="Bonjour";
alert(chane.length); //renvoie 7.

Mthodes de lobjet String:


indexOf(), lastIndexOf(), charAt(), charCodeAt(), fromCharCode(), toUpperCase(),
toLowerCase(), substring(), substr(), slice(), split(), concat(), replace(), search().

Lobjet String possde aussi dautres mthodes de formatage:


big(), blink(), bold(), fontcolor(), fontsize(), italics(), sub(), sup(),

31

Objets & proprits


Exemple:

Aperu sur le navigateur

32

Objets & proprits


Lobjet Math:
Proprits de lobjet Math:
- E est la constante dEuler (environ 2,718)
- PI est le nombre pi (environ 3,14159)
- LN2 est le logarithme naturel de 2 (environ 0.693)
- LN10 est le logarithme naturel de 10 (environ 2.302)
- LOG2E est le logarithme en base 2 de e (environ 1,442)
- LOG10E est le logarithme en base 10 de e (environ 0,434)
- SQRT2 est la racine carre de 2 (environ 1,414)

Mthodes de lobjet Math:


abs (), cos() , sin (), tan(), acos(), asin(), atan(), atan2(), ceil (), floor(), round(), exp(), log(), max(), min(),
pow(), sqrt(), et random().

33

Objets & proprits


Lobjet Date:
Syntaxe du constructeur de lobjet Date:
var nouvDate= new Date(annee, mois, jour, [,heure, minute, seconde, milliseconde]);
Les paramtres heure, minute, seconde, et milliseconde sont optionnels.

Exemple:
var nouvelleDate=new Date(2003,09,14,9,30, 48, 12);
var nouvelleDate=new Date; // La date renvoye est la date actuelle.

Mthodes de lobjet Date:

34

Objets & proprits


Lobjet Array:
Proprit de lobjet Array:
- length: nombre dlments dans le tableau.

Mthodes de lobjet Array:


- join(): liste des lments du tableau.
- pop(): enlve et retourne le dernier lment du tableau.
- shift(): enlve et retourne le premier lment du tableau.
- push(): ajoute un nouvel lment la fin du tableau.
- slice(debut, fin): sous-tableau dbutant dbut et se terminant la fin.
- pslice(debut, n): enlve n lments partir de dbut.
- concat(): fait une jointure de deux tableaux.
- reverse(): renverse lordre des lments.
- sort(): trie les lments du tableau.
- toString(): convertit un tableau en chane.
- unshift(): ajoute un lment au dbut du tableau.
35

Objets & proprits


Exemple:

Rsultat affich

36

Objets & proprits


Lobjet window:

Il sagit de la fentre du browser en cours dexcution.

Proprits de lobjet window:


- closed: indique si la fentre est ferme.
- document: document de la fentre.
- frames[]: tableau des cadres (frames) dans le document.
- history: historique de la fentre.
- length: nombre de cadres (frames) dans la fentre.
- location: emplacement (URL) de la fentre.
- name: nom de la fentre.
- navigator: type de navigateur.
- opener: fentre qui a cre la fentre courante.
- parent: parent de la fentre.
- self: la fentre elle-mme.
- status: le texte afficher dans la barre dtat.
- top: fentre de plus haut niveau.

37

Objets & proprits


Mthodes de lobjet window:

38

Objets & proprits


Exemple 1:

39

Objets & proprits


Exemple 2:

40

Objets & proprits


Lobjet document: Il sagit de la page en cours dexcution. Lobjet document fait partie de
lobjet window, mais il nest pas ncessaire de prciser le suffixe "window."
Reprsente le contenu de la fentre et possde plusieurs collection dobjets tels que:
- anchors[ ]: tableau des ancrages dans le document.
- forms[ ]: tableau des formulaires dans le document.
- images[ ]: tableau des images dans le document.
- links[ ]: tableau des liens dans le document.
Mthodes de lobjet document:
- write() et writeln() pour modifier le contenu dun document.
- close (): ferme la communication avec le document.
- getElementById(id): renvoie llment ayant lidentificateur donn. (id)
- getElementsByName(nom): renvoie tous les lments identifis par un nom (attribut
name) donn.
- getElementByTagName (type): renvoie un tableau des lments ayant une balise donn.
41

Objets & proprits


Exemple:

42

vnements
Les vnements sont des actions de linternaute, qui vont pouvoir donner lieu une
interactivit (clic de souris, passage de la souris au-dessus dune zone, changement dune
valeur ).
Grce aux gestionnaires dvnements, on peut associer une action un vnement selon la
syntaxe suivante:
onEvenement="Action_Javascript_ou_Fonction (); "

43

vnements
Liste des vnements:
Evnements
(gestionnaire dvnement)

Description

Click (onClick)

Se produit lorsque lutilisateur clique sur llment associ lvnement.

Load (onLoad)

Se produit lorsque le navigateur de lutilisateur charge la page en cours.

Unload (onUnload)

Se produit lorsque le navigateur de lutilisateur quitte la page en cours.

MouseOver (onMouseOver)

Se produit lorsque lutilisateur positionne le curseur au-dessus dun lment

MouseOut (onMouseOut)

Se produit lorsque le curseur quitte un lment(Cet vnement fait partie du JS 1.1)

Focus (onFocus)

Se produit lorsque lutilisateur donne le focus un lment c..d. que cet lment est
slectionn comme tant llment actif.

Blur (onBlur)

Se produit lorsque llment perd le focus, c..d. que lutilisateur clique hors de cet lment,
celui-ci nest alors plus slectionn comme tant llment actif.

Change (onChange)

Se produit lorsque lutilisateur modifie le contenue dun champ de donnes.

Select (onSelect)

Se produit lorsque lutilisateur slectionne un texte dans un champ de type "text" ou"textarea"

Submit (onSubmit)

Se produit lorsque lutilisateur clique sut le bouton de soumission dun formulaire

Error (onError)

Se produit lorsque le chargement dune page ou dun image sinterrompt en erreur.

Abort (onAbort)

Se produit lorsque le utilisateur interrompe le chargement dune image.

vnements
Objets auxquels sont associs des vnements:
Objet

vnements associables

Lien hypertexte

onClick, onMouseOver, onMouseOut

Page du navigateur

onLoad, onUnload

Bouton, Case cocher, Bouton radio, Bouton Reset

onClick

Liste de slection dun formulaire

onBlur, onChange, onFocus

Bouton Submit

onSubmit

Champ de texte et zone de texte

onBlur, onChange, onFocus, onSelect

45

Objets & proprits


Exemples:

46

Objets & proprits

Objets & proprits