Java Script

JavaScript
[Le Web Statique]
16/02/2015
Les bases de JavaScript
Les bases de
JavaScript
16/02/2015
Les bases de JavaScript - Plan
Introduction
Le rle de JavaScript
Intgrer JavaScript ans une page web
Les rgles de syntaxe du code
Constantes et Variables
Types de donnes
Les oprateurs
Les structures de contrle
Les botes de dialogue
les Tableaux
les chaines de caractres
les Dates
Les expressions rgulires
Les Fonctions
Gestion des exceptions
la Programmation Oriente Objet
16/02/2015
Les bases de JavaScript - Introduction

Le JavaScript est la partie client dun langage de scriptage. Dvelopper par netscape, le
JavaScript est utilis avec le HTML pour la cration d'un site Web.
Initialement les pages Web ont t conues uniquement avec le html. Le html qui n'est rien
d'autre que des pages statiques. L'interaction avec l'utilisateur et les changements
dynamiques ne sont pas possible avec le html. Un problme rsolu avec la venue des
langages de script.
Le JavaScript fonctionne avec la plupart des navigateurs principaux tels que l'Internet
Explorer, Mozilla, Firefox, Netscape, Opera, Safari et plus encore.
16/02/2015
Les bases de JavaScript Le rle de JavaScript
Contrler dynamiquement une page web (lire, modifier, supprimer des lments) au
niveau du navigateur. La page web charge, elle est manipule au niveau du client sans
nouvel change avec le serveur.

Lire/crire un cookie
Utiliser des vnements afin de dclencher des actions dans la page web, sans
communication avec le serveur (ex : afficher du texte, une image suite un click ou au
survol d'une zone).
JavaScript ne pet pas:

- lire des informations contenues sur le serveur (c'est le travail de PHP, Java, Perl...)
- lire des informations contenues sur le poste client ( l'exception des cookies). (ouf !).
16/02/2015
Les bases de JavaScript Intgrer JavaScript ans une page web

Il est thoriquement possible d'insrer du code Javascript dans le HEADER ou n'importe o
dans le BODY d'une page web.
Dans le fichier HTML: Entre des balises <script type="text/javascript>...</script>
Dans un fichier externe: On appellera un fichier Javascript externe "nom_de_fichier.js"
dans le HEADER comme suit :<script src= " script.js" type="text/javascript"></script>
16/02/2015
Les bases de JavaScript Les rgles de syntaxe du code

Pour bien dbuter en JavaScript le respect de ces rgles est fondamental, car ce langage
est peu souple et nautorise pas derreurs
La casse: Une des principales difficults de JavaScript rside dans le fait que cest un
langage sensible la casse, cest dire quil diffrencie les majuscules des minuscules.
Les commentaires: Lajout de commentaires dans un bloc de code JavaScript seffectue de
manire mono-ligne " //commentaire " ou multi-lignes " /*commentaire*/ ".

Le point-virgule: Chaque ligne de code JavaScript se termine gnralement par un pointvirgule sauf exception de syntaxe.
16/02/2015
Les bases de JavaScript Constantes et Variables

Pour faire simple, une variable est un espace de stockage sur votre ordinateur permettant
d'enregistrer tout type de donnes, que ce soit une chane de caractres, une valeur
numrique ou bien des structures un peu plus particulires.
Dclarer une variable: cest tout simplement lui rserver un espace de stockage en
mmoire. Il est important de prciser que le nom d'une variable ne peut contenir que des
caractres alphanumriques. Autre chose : le nom de la variable ne peut pas commencer
par un chiffre.
// Variable initialise avec une chane de caractres
var variable1 = "mon texte dinitialisation";
// Variable non initialise
var variable2;
// Dfinition de plusieurs variables en une seule instruction
var variable3 = 2, variable4 = "mon texte dinitialisation";
16/02/2015
Les bases de JavaScript La porte des Variables

Lorsquon affecte une variable, nous pouvons manipuler la valeur affecte cette variable.
Elle nous est donc accessible. Cependant, cette accessibilit dpend de lendroit o la
variable a t affecte. On parle donc de la porte de la variable.
Une variable dclare en dehors de toute fonction peut tre utilise nimporte o dans
le script. On parle alors de VARIABLE GLOBALE.
Une variable dclare dans une fonction aura une porte limite cette seule fonction,
cest--dire quelle est inutilisable ailleurs. On parle alors de VARIABLE LOCALE.
16/02/2015
Les bases de JavaScript Le Typage

JavaScript est un langage non typ. Cela signifie que le type dune variable est dfini
uniquement au moment de lexcution.
Linterprteur JavaScript a la responsabilit de crer la valeur du bon type en fonction de
linitialisation ou de laffectation. Le langage nimpose pas linitialisation des variables au
moment de leur cration. Cependant il y a quelques types prexistants.
16/02/2015
Les bases de JavaScript Types de donnes

Les types de donnes principales (primitives) sont :
String: suite de un ou plusieurs caractres Unicode, utilis pour reprsenter du texte

Number: en JavaScript un nombre peut tre un entier ou un rel, en interne il es toujours
reprsent comme un rel.
Boolean: est une valeur de vrit, elle spcifie si la condition est vrai ou non. il ne reconnat que les
deux littraux true et false.
Les types de donnes composites (rfrence) sont : Dans JavaScript, les objets et les
tableaux sont grs quasiment de la mme manire, car les tableaux sont simplement un
type particulier d'objet.
Object: est un ensemble de correspondances entre des cls et des valeurs. Les cls sont
reprsentes par des chanes ou des symboles. Les valeurs peuvent tre de n'importe quel type.
Tableau: est un ensemble d'lments contigus reprs par leur indice, qui est un nombre entier.
Les types de donnes spciaux sont :
Null: ce type n'a qu'une seule valeur (Null), null n'est pas identiques 0.
Indfini: La valeur undefined est retourne lorsque vous utilisez une proprit d'objet qui n'existe
pas, ou une variable qui a t dclare, mais qui aucune valeur n'a t affecte.
16/02/2015
Les bases de JavaScript Types de donnes

Il se peut que vous ayez un jour ou l'autre besoin de tester l'existence d'une variable ou
d'en vrifier son type. Dans ce genre de situations, l'instruction typeof est trs utile, voici
comment l'utiliser :
var number = 2;
alert(typeof number); // Affiche : number
var text = 'Mon texte';
alert(typeof text); // Affiche : string
var aBoolean = false;
alert(typeof aBoolean); // Affiche : boolean
alert(typeof nothing); // Affiche : undefined
16/02/2015
Les bases de JavaScript Les oprateurs

Prcdemment nous avons vus les variables, maintenant nous allons voir comment les
manipuler ou les valuer. Pour se faire Javascript a mis notre disposition un ensemble
d'oprateurs classs en 5 groupes:
Les oprateurs de calcul (arithmtiques);
Les oprateurs de comparaison;
Les oprateurs associatifs;
Les oprateurs logiques;
Les oprateurs d'incrmentation.
16/02/2015

Les oprateurs de calcul (arithmtiques):
Ils nous permettent de manipuler des Nombres.
Dans les exemples, la valeur initiale de x sera toujours gale 11
Signe
+
*
/
%
=
Nom
Signification
plus
moins
multipli par
divis par
modulo
a la valeur
addition
soustraction
multiplication
division
reste de la division
affectation
Exemple
Rsultat
x+3
x-3
x*2
x/2
x%5
x=5
14
8
22
5.5
1
5
16/02/2015

Les oprateurs de comparaison:
Retourne une valeur boolenne indiquant le rsultat de la comparaison.
Signe
==
<
<=
>
=<
!=
===
!==
Nom
gal
infrieur
infrieur ou gal
suprieur
suprieur ou gal
diffrent
strictement gal
strictement diffrent
Exemple
x==11
x<11
x<=11
x>11
x>=11
x!=11
a ==='11'
a !== '11'
Rsultat
true
false
true
false
true
false
false
true
16/02/2015

Les oprateurs associatifs:
Le but de ces oprateurs et de simplifier les affectations:
Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.
Signe
+=
-=
*=
/=
Description
plus gal
moins gal
multipli gal
divis gal
Exemple
x+=y
x-=y
x*=y
x/=y
Signification
x=x+y
x=x-y
x=x*y
x=x/y
Rsultat
16
6
55
2.2
16/02/2015

Les oprateurs logiques:
Aussi appels oprateurs boolens, ses oprateurs servent vrifier deux ou plusieurs
conditions.
Signe
&&
||
Nom
et
ou
Exemple
Signification
(condition1) && (condition2) (condition1) et (condition2)

(condition1) || (condition2)
(condition1) ou (condition2)
16/02/2015

Les oprateurs d'incrmentation:
Ces oprateurs vont augmenter ou diminuer la valeur de la variable d'une unit.
Signe
++
--
Exemple
Signification
A=A++
A=A--
A=A+1
A=A-1
16/02/2015
Les bases de JavaScript Les structures de contrle

Les structures de contrle alternatives (ou conditionnelles) et itratives (ou rptitives)
ncessitent lusage dun test spcifique appel condition. La condition est une expression
dont le rsultat de son valuation prend toujours ses valeurs dans lensemble des
boolens (true ou false).
16/02/2015

Les structures alternatives (ou conditionnelles)
On appelle structure alternative ou conditionnelle lensemble des instructions (le
traitement) qui sont ralises si une condition est vraie ou non. Les structures
conditionnelles ncessitent lusage dun test appel condition.
L'instruction if ... else
L'instruction switch
if (condition)
{
switch(expression) {
case Valeur1:
code block
break;
liste d'instructions // si la condition

ralise (vraie)
}else{
}
case Valeur1 :
code block
break;
autre srie d'instructions // si la

condition nest pas ralise (fausse)
default:
}
default code block
16/02/2015

Les structures itratives (ou rptitives : les boucles)
Les boucles sont des structures qui permettent d'excuter plusieurs fois la mme srie
d'instructions jusqu' ce qu'une condition ne soit plus ralise.
La faon la plus commune de faire une boucle, est de crer un compteur et de faire
arrter la boucle lorsque le compteur dpasse une certaine valeur.
16/02/2015

La boucle for
Cette instruction cre une boucle qui se base sur trois expressions. Ces expressions sont
entre parenthses, spares par des points virgules et suivies par l'instruction excuter
dans la boucle.
for ([initialisation]; [condition]; [expression_finale])

insruction
for (var i = 0; i < 9; i++) {
i *= i;
alert(la valeur de i * i est:+ i);
}
16/02/2015

La boucle while
Cette instruction permet de crer une boucle qui s'excute tant qu'une condition de test
est vrifie. La condition est value avant d'excuter l'instruction contenue dans la
boucle.
while (condition) {
instruction
}
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
16/02/2015

La boucle do...while
Cette instruction cre une boucle qui s'excute tant que la condition est vraie. La
condition est value aprs avoir excut une itration de boucle, ce qui fait que cette
boucle sera excute au moins une fois.

do
instruction
while (condition);
var i = 0;
do {
i ++;
document.write(i);
} while (i < 5);
16/02/2015
Les bases de JavaScript Les botes de dialogue

Dfinition
Une bote de dialogue est une fentre qui s'affiche au premier plan suite un
vnement, et qui permet:
Soit d'avertir l'utilisateur
Soit le confronter un choix
Soit lui demander de complter un champ pour rcuprer une information
Javascript propose trois types diffrents de bote de dialogue, dont l'utilisation se
rapporte une de celles dcrites ci-dessus.
16/02/2015

Bote de dialogue alert()
Permet d'afficher une bote de dialogue de type avertissement, ne laissant l'utilisateur
que la possibilit d'appuyer sur un bouton Ok.
function ExempleAlert(){
alert( Message dalert :\n Bote de dialogue Alert");
}
16/02/2015

Bote de dialogue confirm()
Permet comme la mthode alert d'afficher un message, mais ajoute des options de
rponse qui peuvent tre adaptes pour effectuer des confirmations ou annulations.
function ExempleConfirm(){
if (confirm( tes-vous un Web dveloppeur?")){
alert("Vous venez de cliquer sur le bouton :\n OK");
} else{
alert("Vous venez de cliquer sur le bouton :\n Annuler");
}
}
16/02/2015

Bote de dialogue prompt()
Permet d'ouvrir une bote de dialogue pour demander une saisie l'utilisateur. Elle est
compose d'un message (premier paramtre de la mthode)), d'une zone de saisie de
type text et de deux boutons "Ok" et "Annuler".
function ExemplePrompt(){
var prenom = prompt('Saisissez votre prnom',Mohammed');
if (prenom != null && prenom != ""){
alert(" Votre Prnom:\n"+ prenom );
} else{
alert(" Valeur par dfaut");
}
}
16/02/2015
Les bases de JavaScript Manipuler les Tableaux

Un tableau, ou plutt un array en anglais, est une variable qui contient plusieurs valeurs,
appeles items. Chaque item est accessible au moyen d'un indice et dont la
numrotation commence partir de 0.
Dclarer un tableau
On utilise bien videmment var pour dclarer un tableau, mais la syntaxe pour dfinir les
valeurs est spcifique :
Var MyTab1 = [element0, element1, ..., elementN];
Var MyTab2 = new Array(element0, element1[, ...[, elementN]]);
Var MyTab3 = new Array(10);
16/02/2015

Parcourir un tableau
Le principe pour parcourir un tableau est simple : il faut faire autant d'itrations qu'il y a
d'items. Le nombre d'items d'un tableau se rcupre avec la proprit length, exactement
comme pour le nombre de caractres d'une chane de caractres. chaque itration, on va
avancer d'un item dans le tableau, en utilisant la variable de boucle i : chaque itration,
elle s'incrmente, ce qui permet d'avancer dans le tableau item par item. Voici un exemple :
for (var i = 0; i < myArray.length; i++) {
alert(myArray[i]);
}
16/02/2015

Oprations sur les tableaux
Transformer en String: Array.join()

Rcuprer les valeurs d'un tableau sous la forme d'une String
var tab = [true,2,5,"d","2 m","c"];
alert(tab.join("|"));// Affiche: true|2|5|d|2 m|c
Rassembler plusieurs tableaux: Array.concat()
Permet d'additionner un tableau d'autres tableaux
var tab = [1,2];
var tab1 = [3,4];
var tab2 = [5,6];
alert(tab.concat(tab1,tab2)); // Affiche: 1,2,3,4,5,6
16/02/2015

Supprimer un lment depuis un tableau

Supprimer le premier lment: Array.shift()
Supprimer le dernier lment: Array.pop()
var tab = [1,2,4,7];
alert(tab.shift());//Affiche: 1
alert(tab);//Affiche: 2,4,7
alert(tab.pop());//Affiche: 7
alert(tab);//Affiche: 2,4
16/02/2015

Insrer une ou plusieurs valeurs dans un tableau

Insrer des valeurs au dbut: Array.unshift()
Insrer des valeurs la fin: Array.push()
var tab = [1,2,4,7];
alert(tab.unshift(O,9));//Affiche: 6, la langueur du tableau
alert(tab.push(23,12));//Affiche: 8, la langueur du tableau
16/02/2015

Insrer, modifier, ou supprimer une ou plusieurs valeurs dans un tableau: Array.splice()
splice( dbut, quantit, liste de valeur )
- dbut: position o commence l'insertion ou suppression.
- quantit: nombre d'lments a supprimer ou modifier partir de dbut,
- liste de valeur: un ou une liste de valeurs spares par une ","
var tab = [1,2,3,4,5];
//Exemple de modification
alert(tab.splice(1,2,"a","b"));//Affiche: 2,3. Les lments modifis
alert(tab); //1,a,b,4,5
//Exemple de Suppression
alert(tab.splice(1,2));//Affiche: 2,3. Les lments supprims
alert(tab); //1,4,5
//Exemple d'ajout :
alert(tab.splice(1,0,"a","b"));
alert(tab); //1,a,b,4,5
16/02/2015

Trier ou inverser lordre des lments dun tableau

Trier les lments dun tableau : Array. sort()
Inverser l'ordre des lments dun tableau : Array. reverse()
var tab = ["1",3","2","4","5"];
tab. reverse();
alert(tab); //Affiche: 5,4,3,2,1
tab. sort();
alert(tab); //Affiche: 1,2,3,4,5
16/02/2015
Les bases de JavaScript Manipuler les chaines de caractres

String est un mot anglais qui signifie "chane", il s'agit en fait de chane de caractres.
Les chanes de caractres sont utiles pour reprsenter des donnes textuelles. Les
oprations les plus frquentes qui concernent les chanes de caractres sont : la
vrification de leur longueur( str.length ), la concatnation de plusieurs chanes grce
aux oprateurs + et +=, tudier la prsence et la position de fragments de chanes avec
les mthodes indexOf et substring.
Pour crer une chane de caractres, on utilise gnralement cette syntaxe :
var MonChaine = "Chane de caractres primitive";
var MonObjetChaine = new String("Chane de caractres");
16/02/2015

Oprations sur les chanes de caractres
La mthode charAt() renvoie le caractre la position spcifie.

str.charAt(index); // index est un entier
La mthode concat() combine le texte de deux chanes et renvoie une nouvelle chane
ainsi forme.
str.concat(string2, string3[, ..., stringN]);
La mthode slice() extrait une section de la chaine de caractres et renvoie une nouvelle
chaine de caractres.
str.slice(Dbut[, fin]); // le paramtre fin est facultatif
16/02/2015

La mthode split() divise l'aide d'un sparateur un objet String en un tableau de souschanes.
str.split([separateur][, limit]); // limit est le nombre de sous-chanes retourner
La mthode substring() retourne un extrait d'une chaine, selon un index de dbut et,
soit un index de fin, soit la fin de la chane.
str.substring(indexDebut[, indexFin]);
La mthode Substr() renvoie les caractres d'une chane partir de la position spcifie
et pour la longueur spcifie.
str. Substr(Dbut[, Longueur]);
16/02/2015

La mthode indexOf retourne pour la chane de caractre sur laquelle a t appele,

l'index de la premire occurrence pour la valeur renseigne, en commenant la recherche
partir de indexDebut
str. indexOf([ChaineRecherche][, indexDebut]);
La mthode lastIndexOf retourne pour la chane de caractre sur laquelle a t appele,

l'index de la dernire occurrence pour la valeur renseigne, La recherche est effectue en
partant de la fin (sens inverse de lecture) en commenant partir de indexDebut
str. lastIndexOf([ChaineRecherche][, indexDebut]);
16/02/2015

La mthode toUpperCase() retourne la valeur de la chane appelante convertie en

majuscules.
str.toUpperCase();
La mthode toLowerCase() retourne la chane pass en paramtre convertie en
minuscule.
str.toLowerCase();
16/02/2015
Les bases de JavaScript Manipuler les Dates

L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la
gestion du temps. Il s'agit d'un objet inclus de faon native dans Javascript, et que l'on
peut toujours utiliser.
L'objet Date nous fournit un grand nombre de mthodes pour lire ou crire une date. Il y
en a d'ailleurs tellement que nous n'allons en voir qu'une infime partie.
new Date();
new Date(timestamp);
new Date(dateString);
new Date(anne, mois, jour [, heure, minutes, secondes, millisecondes ]);
16/02/2015
Les bases de JavaScript Manipuler les Dates

Ce tableau rcapitule les mthodes principales. Toutes les mthodes commenant par
get se fondent sur les paramtres rgionaux
Mthode
Description
getDate
getDay
getFullYear
getHours
getMilliseconds
getMinutes
getMonth
getSeconds
getTime
getTimezoneOffset
getYear
setXXX
toGMTString
toLocaleString
toSource
toString
valueOf
Retourne le jour du mois de la date courante.

Retourne le jour de la semaine de la date courante.
Retourne lanne de la date courante.
Retourne les heures de lheure courante.
Retourne les millisecondes de lheure courante.
Retourne les minutes de lheure courante.
Retourne le mois de la date courante.
Retourne les secondes de lheure courante.
Dtermine le nombre reprsentant la date en millisecondes.
Dtermine le dcalage horaire par rapport lheure GMT.
Retourne lanne de la date courante sur deux caractres pour les annes prcdant 2000.
Toutes les mthodes getXXX ont des mthodes setXXX correspondantes.
Retourne la date GMT sous forme de chanes de caractres.
Retourne la date sous forme de chanes de caractres en utilisant les paramtres rgionaux.
Retourne un objet littral reprsentant la date.
Retourne la date sous forme de chane de caractres.
Retourne la date sous forme de nombre.
16/02/2015
Les bases de JavaScript Les expressions rgulires

Dfinition
Le langage JavaScript propose diffrentes fonctionnalits afin de mettre en uvre les
expressions rgulires.
Une expression rgulire correspond une notation compacte et puissante qui dcrit de
manire concise un ensemble de chanes de caractres. Elle peut notamment tre
applique une chane de caractres afin de dterminer si elle correspond des critres
particuliers. Elle obit une syntaxe particulire et interprte spcifiquement diffrents
symboles.
16/02/2015

Forme littrale
JavaScript permet de dfinir une expression rgulire sous forme littrale par
lintermdiaire du symbole "/". Cette dfinition comporte deux parties : lexpression
proprement dite et les proprits relatives son application.
Il existe deux proprits relatives lapplication des expressions rgulires :
La valeur g: qui spcifie que toutes les occurrences dans la chane doivent tre
utilises. Si elle nest pas spcifie, seule la premire occurrence est utilise.
La valeur i: qui spcifie que la recherche nest pas sensible la casse.
var chaine = "Ceci est un test";
var expression = /test/gi;
var chaineCorrespond = expression.test(chaine);
/* chaineCorrespond contient true puisque la chane correspond lexpression rgulire */
16/02/2015

Syntaxe
Le tableau suivant rcapitule les symboles utilisables pour les expressions rgulires.
Caractre doption Fonction
g
i
gi
Caractre outil
[xyz]
[xz]
[XZ]
[09]
[^xz]
\d
\D
()
*
+
?
{x}
{x,z}
x|z
Aucune option dfinie.

Force une recherche globale.
Ne tient pas compte de la casse des caractres.
Associe les options i et g.
Fonction
Les caractres densemble
Correspond un ensemble de caractres (ici xyz), plac entre les crochets.

Correspond un ensemble de caractres en minuscules entre x et z.
Correspond un ensemble de caractres en majuscules entre X et Z.
Correspond un ensemble de caractres entre 0 et 9
Interdit les caractres suivants ^ (ici x et z).
Correspond un chiffre. quivalent [09].
Interdit les chiffres de 0 9. quivalent [^09].
Les caractres de groupement
Permet de grouper des caractres formant alors un sous motif.
Les caractres de rptition
Le caractre peut apparatre un nombre indfini de fois.

Le caractre doit apparatre au moins une fois.
Le caractre doit apparatre zro ou une fois.
Le caractre doit apparatre le nombre de fois quivalent x.
Le caractre doit apparatre au moins x fois et au plus z fois.
Le caractre peut tre x ou z.
16/02/2015

Syntaxe (suite)
Le tableau suivant rcapitule les symboles utilisables pour les expressions rgulires.
Caractre outil
^
$
\b
\B
(x)
Les caractres de positionnement

Fonction
Prcise le dbut de lexpression dans la chane de caractres.

Prcise la fin de lexpression dans la chane de caractres.
Prcise le dbut de mot.
Prcise la fin de mot.
Trouve la chane et retient sa position.
Le caractre de choix
x|z
Le caractre peut tre x ou z.
Les caractres spciaux

.
\
\f
\n
\r
\t
Correspond tout caractre.

Indique que le caractre suivant nest pas spcial.
Correspond un saut de page.
Correspond un saut de ligne.
Correspond un retour chariot.
Correspond une tabulation.
16/02/2015

Mthodes utilisables
Nous nous intressons dans cette section aux mthodes utilisables avec les expressions
rgulires.
Mthode
Description
exec
Retourne la premire occurrence correspondant lexpression rgulire dans la chane.

Dtermine si des occurrences sont contenues dans la chane de caractres en paramtre
pour lexpression rgulire.
Retourne les diffrentes sous-chanes (sous forme de tableau) de caractres
correspondant lexpression rgulire dans la chane de caractres initiale
Retourne la position de la premire occurrence correspondant lexpression rgulire.
test
match
search
16/02/2015

Exemples dapplication:
La mthode test()
La mthode exec()
var chaine = "Ceci est une chaine de test";

var expression = /test$/g;
var retour = expression.test(chaine);
// retour contient la valeur true
chaine = "Ceci est une chaine de test.";
retour = expression.test(chaine);
// retour contient dsormais la valeur false

var expression = /test$/g;
var sousChaines = expression.exec(chaine);
// sousChaines est un tableau contenant un
seul lment, test
La mthode match()
La mthode search()

var expression = /chaine|test/g;
var sousChaines = chaine.match(expression);
/* sousChaines est un tableau contenant les
valeurs chaine et test */

var expression = /chaine|test/g;
var position = chaine. search(expression);
// position contient la valeur 13
16/02/2015
Les bases de JavaScript Les Fonctions

Introduction
Les fonctions reprsentent le concept de base de la programmation JavaScript afin de
modulariser les traitements.
Nous verrons que les fonctions constituent la cl de vote du dveloppement objet en
JavaScript.
Le mot-cl function permet de mettre en uvre les fonctions selon la syntaxe suivante :
function nomDeLaFonction(parametre1, parametre2, ...) {

//Code de la fonction
}
16/02/2015

Identification de fonction
Le langage JavaScript nutilise pas les signatures pour identifier les fonctions et se fonde
uniquement sur leurs noms. Ainsi, deux fonctions globales ou dun mme objet
possdant le mme nom ne peuvent coexister avec ce langage. enfaite linterprtateur
JavaScript utilise toujours celle qui a t dfinie en dernier, ignorant toutes les
prcdentes.
function maFonction(parametre1, parametre2) {
return parametre1+" - "+parametre2;
}
function maFonction(parametre1) {
return parametre1;
}
var retour = maFonction("param1", "param2"); // Affiche
parametre1
16/02/2015

Gestion des arguments
JavaScript met disposition la liste des arguments passs une fonction dans une
variable particulire. Nomme arguments, cette variable est implicitement dfinie pour
chaque fonction. Le dveloppeur peut donc lutiliser directement dans le code des
fonctions.
Cette fonctionnalit de JavaScript permet de supporter plusieurs signatures de mthodes
et ainsi de contourner le problme li au nombre d'arguments.
function maFonction() {
if( arguments.length == 1 ) {
return arguments[0];
}
if( arguments.length == 2 ) {
return arguments[0]+" - "+arguments[1];
}
}
16/02/2015

Mthodes de la classe Function
La class Function de JavaScript propose deux mthodes supplmentaires dappelle de
fonctions. Ces mthodes sont :
La mthode apply() appelle une fonction en lui passant une valeur this et des
arguments sous forme d'un tableau (ou d'un objet semblable un tableau).
La mthode call() ralise un appel une fonction avec une valeur this et les
arguments fournis individuellement.
var nombresTab = [5, 6, 2, 3, 7];
var v = MaFonction.apply(this, nombres);
Var v1=2; Var v2=34; Var v4=7;

var v = MaFonction.call(this, v1,v2,v3);
16/02/2015
Les bases de JavaScript Les Closures

Dfinition
En rapport avec les fonctions JavaScript propose d'autres fonctionnalits permettent le
support des Closures.
Une closure est une fonction JavaScript particulire, qui utilise directement des variables
dfinies en dehors de la porte de son code. Ce mcanisme est souvent utilis par des
fonctions dfinies dans dautres fonctions, comme lillustre le code suivant :
function uneFonction(parametre) {
function uneClosure(unAutreParametre) {
return "Les paramtres sont: "
+parametre+", "+ unAutreParametre;
}
return uneClosure;
}
var retour = uneFonction("Mon paramtre");
var valeurRetour = retour("Mon autre paramtre");
// valeurRetour contient Les paramtres sont: Mon paramtre, Mon autre paramtre
16/02/2015
Les bases de JavaScript Gestion des exceptions

Introduction
La gestion des anomalies dexcution est un aspect trs important de la programmation.
Une approche mthodique ce sujet de la part des dveloppeurs permet dobtenir du
code plus robuste et lisible la fois.
Dans le contexte des langages de programmation, un systme de gestion dexceptions
permet de grer les conditions exceptionnelles pendant lexcution du programme.
Lorsquune exception se produit, lexcution normale du programme est interrompue et
lexception est traite.
16/02/2015

Erreurs et exceptions
Une erreur est une anomalie de fonctionnement, une condition imprvue durant
lexcution dun programme, qui rend impossible sa continuation et demande que des
actions soient entreprises pour rparer la dfaillance, comme par exemple :
une division par zro ;
une tentative douvrir un fichier qui nexiste pas ;
lutilisation dune rfrence nulle pour accder un objet.
Tout programme en excution peut tre sujet des conditions qui pourraient, si non
gres, provoquer des erreurs. Ces conditions, en elles mmes, ne sont pas des bugs,
mais des conditions particulires (exceptions) dans le droulement normal dune partie
dun programme. Tel limpossibilit douvrir un fichier.
16/02/2015

Attraper les exceptions
JavaScript offre la mme syntaxe que Java pour grer les exceptions, au moyen des mots
cls try, catch et finally. Le premier dfinit le bloc dinterception des exceptions, le
second les traitements raliser en cas de leve dexceptions et le dernier les traitements
excuter, que des exceptions soient leves ou non.
Le code suivant dcrit la faon de grer les exceptions (nous faisons volontairement
appel une mthode testException inexistante afin de dclencher une exception) :
try {
testException(); //Cette mthode est inexistante!
} catch(error) {
alert("Une exception a t leve");
alert("Nom de lexception leve : "+error.name);
alert("Message de lexception leve : "+error.message);
} finally {
alert("Passage dans finally");
}
16/02/2015
Les bases de JavaScript la Programmation Oriente Objet

Le langage JavaScript offre la possibilit de mettre en uvre la plupart des concepts
objet, tels que lhritage et le polymorphisme. Les dveloppeurs peuvent tirer parti de
ces mcanismes pour augmenter la qualit, la lisibilit et la modularit de leurs
applications JavaScript.
La faon de mettre en uvre les concepts objet est spcifique ce langage, et est
essentiellement fonde sur les fonctions et closures de JavaScript.
16/02/2015
Les bases de JavaScript POO: Concepts gnraux

Classes et objets: Le concept central de la programmation objet est la classe. Compose
dattributs et de mthodes, ces derniers permettent de dfinir respectivement les tats et
les comportements de la classe.
Instances et objets: Une classe nest pas utilisable directement dans une application, car
elle correspond un concept abstrait. Les applications travaillent sur des objets ou
instances correspondant des occurrences de classes.
Encapsulation et visibilit: Lencapsulation revient interdire laccs certains lments
dune classe afin de protger ses tats et fonctionnements internes. Les attributs de
classe ne doivent pas tre exposs directement lextrieur. Cest la raison pour laquelle
la mise en uvre daccesseurs constitue une bonne pratique de conception.
Niveau de visibilit
Description
Par dfaut
Priv
Protg
Public
Seules les sous-classes ont accs aux lments de la classe.

Les entits externes nont pas accs aux lments de la classe.
Seules les sous-classes ont accs aux lments de la classe.
Les entits externes ont accs aux lments de la classe.
16/02/2015
Les bases de JavaScript POO: Concepts gnraux

Lhritage: Par souci de modularit, les langages orients objet mettent en uvre des
mcanismes dhritage. Ces derniers permettent de dfinir des sous-classes afin
denrichir et de bnficier dattributs et de mthodes de classes existantes.
Le polymorphisme: Les mcanismes de polymorphisme permettent une application

de voir une instance sous diffrentes formes. Le polymorphisme est intimement li aux
mcanismes de transtypage, qui permettent de convertir le type dune instance, quand
cest possible, en un autre type.
16/02/2015
Les bases de JavaScript POO: et JavaScript

En rsum
Nous avons dcrit dans cette section les principaux concepts de la programmation
oriente objet.
Le langage JavaScript nest pas un langage orient objet, mais il permet
nanmoins de mettre en uvre quelques concepts dcrits au cours des sections
prcdentes.
16/02/2015
Les bases de JavaScript POO: et JavaScript

Mot cl this
Le mot cl this est galement important dans la mise en uvre de la programmation
oriente objet en JavaScript. Il est utilis dans une mthode afin de rfrencer l'instance
sur laquelle est excute cette mthode. Il faut nanmoins faire attention lorsque l'on
utilise this dans une fonction qui n'est pas rattache un objet car soit une erreur se
produit ou des champs possdent des valeurs non dfinies. L'exemple suivant illustre la
mise en uvre de ce mot cl:
var maFonction = function() {
alert("attribut: " + this.attribut);
};
maFonction(); // Affiche la valeur undefined car this.attribut ne peut tre rsolu
// Cration de l'objet obj1 et affectation de maFonction
var obj1 = {
attribut: "valeur1",
methode: maFonction
}
obj1.methode(); // Affiche la valeur de attribut, savoir valeur1
// Cration de l'objet obj2 et affectation de maFonction
var obj2 = {
attribut: "valeur2",
methode: maFonction
}
obj2.methode(); // Affiche la valeur de attribut2, savoir valeur2
16/02/2015
Les bases de JavaScript POO: Structures des objets avec JavaScript

Structure simple
En JavaScript, le mot cl new peut tre utilis en se fondant sur une fonction afin
d'initialiser un objet. L'initialisation est ralise en utilisant les lments contenus dans la
fonction, ces derniers peuvent tre aussi bien des attributs que des mthodes. Le code
suivant illustre la mise en uvre d'une classe JavaScript en utilisant ce principe:
function MaClasse(parametre1, parametre2) {
this.attribut1 = parametre1;
this.methode = function() {
alert("Attributs: " + this.attribut1 + ", " + this.attribut2);
}
}
var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1
obj.methode(); // Affiche la chane de caractres contenant les valeurs des attributs
16/02/2015

Prototypage
Le prototypage correspond spcifier une sorte de modle indpendamment du constructeur
afin d'initialiser chaque objet sa cration. Comme nous l'avons mentionn rapidement
prcdemment, la spcification de ce modle se ralise en se fondant sur la proprit
prototype de la classe Function.
Il convient donc ainsi de toujours de crer une fonction constructeur comme prcdemment
afin de dfinir une classe. Cependant, contrairement l'approche prcdente, les lments de
la classe ne sont plus tous dfinis dans cette fonction.
Le code suivant illustre l'adaptation de la classe MaClasse prcdemment mise en uvre en
se fondant sur le prototypage:
function MaClasse(parametre1, parametre2) {
}
MaClasse.prototype = {
methode: function() {
alert("Attributs: " + this.attribut1 + ", " + this.attribut2);
}
}
var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1
obj.methode(); // Affiche la chane de caractres contenant les valeurs des attributs
16/02/2015

Combinaison des deux approches
Dans cette approche, l'initialisation de la proprit prototype est ralise dans le code du
constructeur de la classe, ceci offrant la possibilit d'avoir accs toutes les variables et
mthodes de cette fonction particulire. Par contre, les principes dcris dans les diffrentes
approches restent vrais. Les mthodes dfinies directement dans le constructeur seront
dupliques alors que celles positionnes sur le prototype non.
Le seul point subtil de cette approche est de forcer la proprit prototype n'tre initialise
qu'une seule et unique fois la premire fois que le constructeur est appel. Pour ce faire, il
suffit d'ajouter une proprit personnalise directement sur le constructeur de la manire
suivante:
function MaClasse() {
this.attribut = "valeur";
if( typeof MaClasse.initialized == "undefined" ) {
MaClasse.prototype.methode = function() {
alert("Attribut: " + this.attribut);
};
MaClasse.initialized = true;
}
}
var obj = new MaClasse();
alert(obj.attribut); // Affiche la valeur de l'attribut attribut
obj.methode();// Fonctionne correctement car la mthode a t ajoute au prototype
16/02/2015
16/02/2015

Java Script

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script

Uploaded by

Copyright:

Available Formats

JavaScript

[Le Web Statique]

Les bases de JavaScript

Les bases de JavaScript - Plan

Les bases de JavaScript - Introduction

Les bases de JavaScript Le rle de JavaScript

nouvel change avec le serveur.

JavaScript ne pet pas:

Les bases de JavaScript Intgrer JavaScript ans une page web

Les bases de JavaScript Les rgles de syntaxe du code

manire mono-ligne " //commentaire " ou multi-lignes " /*commentaire*/ ".

Les bases de JavaScript Constantes et Variables

Les bases de JavaScript La porte des Variables

Les bases de JavaScript Le Typage

Les bases de JavaScript Types de donnes

String: suite de un ou plusieurs caractres Unicode, utilis pour reprsenter du texte

Les types de donnes spciaux sont :

Les bases de JavaScript Types de donnes

Les bases de JavaScript Les oprateurs

Les bases de JavaScript Les oprateurs

Les bases de JavaScript Les oprateurs

Les bases de JavaScript Les oprateurs

Les bases de JavaScript Les oprateurs

(condition1) && (condition2) (condition1) et (condition2)

Les bases de JavaScript Les oprateurs

Les bases de JavaScript Les structures de contrle

Les bases de JavaScript Les structures de contrle

liste d'instructions // si la condition

autre srie d'instructions // si la

default code block

Les bases de JavaScript Les structures de contrle

Les bases de JavaScript Les structures de contrle

for ([initialisation]; [condition]; [expression_finale])

Les bases de JavaScript Les structures de contrle

Les bases de JavaScript Les structures de contrle

boucle sera excute au moins une fois.

Les bases de JavaScript Les botes de dialogue

Les bases de JavaScript Les botes de dialogue

Les bases de JavaScript Les botes de dialogue

Les bases de JavaScript Les botes de dialogue

Les bases de JavaScript Manipuler les Tableaux

Les bases de JavaScript Manipuler les Tableaux

Les bases de JavaScript Manipuler les Tableaux

Transformer en String: Array.join()

Les bases de JavaScript Manipuler les Tableaux

Supprimer un lment depuis un tableau

Les bases de JavaScript Manipuler les Tableaux

Insrer une ou plusieurs valeurs dans un tableau

alert(tab.push(23,12));//Affiche: 8, la langueur du tableau

Les bases de JavaScript Manipuler les Tableaux

Les bases de JavaScript Manipuler les Tableaux

Trier ou inverser lordre des lments dun tableau

Les bases de JavaScript Manipuler les chaines de caractres

Les bases de JavaScript Manipuler les chaines de caractres

La mthode charAt() renvoie le caractre la position spcifie.

Les bases de JavaScript Manipuler les chaines de caractres

Les bases de JavaScript Manipuler les chaines de caractres

La mthode indexOf retourne pour la chane de caractre sur laquelle a t appele,

La mthode lastIndexOf retourne pour la chane de caractre sur laquelle a t appele,

Les bases de JavaScript Manipuler les chaines de caractres

La mthode toUpperCase() retourne la valeur de la chane appelante convertie en

Les bases de JavaScript Manipuler les Dates

Les bases de JavaScript Manipuler les Dates

manire mono-ligne " //commentaire " ou multi-lignes " /commentaire/ ".