Les bases

de
JavaScript

› Introduction
› Le rôle de JavaScript
› Intégrer JavaScript ans une page web
› Les règles de syntaxe du code
› Constantes et Variables
› Types de données
› Les opérateurs
› Les structures de contrôle
› Les boîtes de dialogue
› Les Tableaux
› Les chaines de caractères
Les bases de JavaScript

› Les Dates
› Les expressions régulières
› Les Fonctions
› Gestion des exceptions
› la Programmation Orientée Objet
Les bases de JavaScript
Introduction
Le JavaScript est la partie client d’un langage de scriptage. Développer par
netscape, le JavaScript est utilisé avec le HTML pour la création d'un site Web.
Initialement les pages Web ont été conçues 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 problème
résolu 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.
Les bases de JavaScript –
Le rôle de JavaScript

› Contrôler dynamiquement une page web (lire, modifier, supprimer des

éléments) au niveau du navigateur. La page web chargée, elle est manipulée
au niveau du client sans nouvel échange avec le serveur.

› Lire/écrire un cookie

› Utiliser des événements afin de déclencher 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).
Les bases de JavaScript –
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 !).

Intégrer JavaScript dans une page web

Il est théoriquement possible d'insérer 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= " [Link]" type="text/javascript"></script>
Les bases de JavaScript –
Les règles de syntaxe du code
Pour bien débuter en JavaScript le respect de ces règles est fondamental, car ce
langage est peu souple et n’autorise pas d’erreurs

La casse: Une des principales difficultés de JavaScript réside dans le fait que
c’est un langage sensible à la casse, c’est à dire qu’il différencie les majuscules
des minuscules. Les commentaires: L’ajout de commentaires dans un bloc de
code JavaScript s’effectue de manière mono-ligne " //commentaire " ou multi-
lignes " /*commentaire*/ ".

Le point-virgule: Chaque ligne de code JavaScript se termine généralement

par un pointvirgule sauf exception de syntaxe.
Constantes et Variables
Pour faire simple, une variable est un espace de stockage sur votre ordinateur
permettant d'enregistrer tout type de données, que ce soit une chaîne de
Les bases de JavaScript –
caractères, une valeur numérique ou bien des structures un peu plus
particulières.
Déclarer une variable: c’est tout simplement lui réserver un espace de
stockage en mémoire. Il est important de préciser que le nom d'une variable ne
peut contenir que des caractères alphanumériques. Autre chose : le nom de la
variable ne peut pas commencer par un chiffre.
// Variable initialisée avec une chaîne de
caractères var variable1 = "mon texte d’initialisation";
// Variable non initialisée var
variable2;
// Définition de plusieurs variables en une seule instruction var
variable3 = 2, variable4 = "mon texte d’initialisation";

La portée des Variables

Lorsqu’on affecte une variable, nous pouvons manipuler la valeur affectée à
cette variable. Elle nous est donc accessible. Cependant, cette accessibilité
dépend de l’endroit où la variable a été affectée. On parle donc de la portée de
la variable.
Les bases de JavaScript –
› Une variable déclarée en dehors de toute fonction peut être utilisée
n’importe où dans le script. On parle alors de VARIABLE GLOBALE.

› Une variable déclarée dans une fonction aura une portée limitée à cette
seule fonction, c’est-à-dire quelle est inutilisable ailleurs. On parle alors de
VARIABLE LOCALE.
Le Typage
JavaScript est un langage non typé. Cela signifie que le type d’une variable est
défini uniquement au moment de l’exécution.
L’interpréteur JavaScript a la responsabilité de créer la valeur du bon type en
fonction de l’initialisation ou de l’affectation. Le langage n’impose pas
l’initialisation des variables au moment de leur création. Cependant il y a
quelques types préexistants.
Les bases de JavaScript –
Types de données
Les types de données principales (primitives) sont :
›String: suite de un ou plusieurs caractères Unicode, utilisé pour représenter du texte
› Number: en JavaScript un nombre peut être un entier ou un réel, en interne il es
toujours représenté comme un réel.
› Boolean: est une valeur de vérité, elle spécifie si la condition est vrai ou non. il ne
reconnaît que les deux littéraux true et false.

Les types de données composites (référence) sont : Dans JavaScript, les objets
et les tableaux sont gérés quasiment de la même manière, car les tableaux
sont simplement un type particulier d'objet.
› Object: est un ensemble de correspondances entre des clés et des valeurs. Les clés
sont représentées par des chaînes ou des symboles. Les valeurs peuvent être de
n'importe quel type.
› Tableau: est un ensemble d'éléments contigus repérés par leur indice, qui est un
nombre entier.

Les types de données spéciaux sont :

›Null: ce type n'a qu'une seule valeur (Null), null n'est pas identiques à 0.
Les bases de JavaScript –
› Indéfini: La valeur undefined est retournée lorsque vous utilisez une propriété d'objet
qui n'existe pas, ou une variable qui a été déclarée, mais à qui aucune valeur n'a été
affectée.
Types de données
Il se peut que vous ayez un jour ou l'autre besoin de tester l'existence d'une
variable ou d'en vérifier son type. Dans ce genre de situations, l'instruction
typeof est très 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 »
Les bases de JavaScript – Les opérateurs

Précédemment nous avons vu les variables, maintenant nous allons voir

comment les manipuler ou les évaluer. Pour se faire JavaScript a mis à notre
disposition un ensemble d'opérateurs classés en 5 groupes:
›Les opérateurs de calcul (arithmétiques);
›Les opérateurs de comparaison;
›Les opérateurs associatifs;
›Les opérateurs logiques;
›Les opérateurs d'incrémentation.
Les opérateurs de calcul (arithmétique):
Ils nous permettent de manipuler des Nombres.

Dans les exemples, la valeur initiale de x sera toujours égale à 11

Signe Nom Signification Exemple Résultat

+ plus addition x+3 14

Les bases de JavaScript – Les opérateurs

- moins soustraction x-3 8

* multiplié par multiplication x*2 22
/ divisé par division x/2 5.5
reste de la
% modulo division x%5 1
= a la valeur affectation x=5 5

Les opérateurs de comparaison:

Retourne une valeur booléenne indiquant le résultat de la comparaison.
Les bases de JavaScript – Les opérateurs

Résult
Signe Nom Exemple
at
== égal x==11 true
< inférieur x<11 false
<= inférieur ou égal x<=11 true
> supérieur x>11 false
=< supérieur ou égal x>=11 true
!= différent x!=11 false
=== strictement égal a ==='11' false
!== strictement différent a !== '11' true
Les opérateurs associatifs:
Le but de ces opérateurs et de simplifier les affectations:
Les bases de JavaScript – Les opérateurs

Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.

Significatio Résult
Signe Description Exemple
n at
+= plus égal x+=y x=x+y 16
-= moins égal x-=y x=x-y 6
*= multiplié égal x*=y x=x*y 55
/= divisé égal x/=y x=x/y 2.2

Les opérateurs logiques:

Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier deux ou
plusieurs conditions.
Signe Nom Exemple Signification
Les bases de JavaScript – Les opérateurs

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

(condition2)
|| ou (condition1) || (condition1) ou (condition2)
(condition2)

Les opérateurs d'incrémentation:

Ces opérateurs vont augmenter ou diminuer la valeur de la variable d'une
unité.
Signe Exemple Signification
++ A=A++ A=A+1
-- A=A-- A=A-1
Les bases de JavaScript – Les structures de
contrôle
Les structures de contrôle alternatives (ou conditionnelles) et itératives
(ou répétitives) nécessitent l’usage d’un test spécifique appelé condition. La
condition est une expression dont le résultat de son évaluation prend toujours
ses valeurs dans l’ensemble des booléens (true ou false).
Les bases de JavaScript – Les structures de
contrôle
Les structures alternatives (ou
conditionnelles)
On appelle structure alternative ou conditionnelle l’ensemble des instructions
(le traitement) qui sont réalisées si une condition est vraie ou non. Les
structures conditionnelles nécessitent l’usage d’un test appelé condition.
L'instruction if ... else L'instruction switch

if (condition)
{
liste d'instructions
switch(expression) {
// si la condition réalisée (vraie) case Valeur1: code block break;
}else{ case Valeur1 : code block break;
autre série d'instructions // si la default:
condition n’est pas réalisée (fausse) default code block }
Les bases de JavaScript – Les structures de
contrôle
Les structures itératives (ou répétitives : les
boucles)
Les boucles sont des structures qui permettent d'exécuter plusieurs fois la
même série d'instructions jusqu'à ce qu'une condition ne soit plus réalisée.
La façon la plus commune de faire une boucle, est de créer un compteur et de
faire arrêter la boucle lorsque le compteur dépasse une certaine valeur.
Les bases de JavaScript – Les structures de
contrôle
La boucle for
Cette instruction crée une boucle qui se base sur trois expressions. Ces
expressions sont entre parenthèses, séparées par des points virgules et
suivies par l'instruction à exécuter 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); }
La boucle while
Cette instruction permet de créer une boucle qui s'exécute tant qu'une
condition de test est vérifiée. La condition est évaluée avant d'exécuter
l'instruction contenue dans la boucle.
Les bases de JavaScript – Les structures de
contrôle
while (condition) {

instruction
}
var n = 0;
var x = 0;

while (n < 3) { n++;

x += n;
}
La boucle do...while
Cette instruction crée une boucle qui s'exécute tant que la condition est vraie.
La condition est évaluée après avoir exécuté une itération de boucle, ce qui
fait que cette boucle sera exécutée au moins une fois.
Les bases de JavaScript – Les structures de
contrôle
do
instruction
while
(condition);

var i = 0;

do { i ++; [Link](i);
} while (i < 5);
Les bases de JavaScript – Les boîtes de dialogue

Définition
Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un
événement, et qui permet:
›Soit d'avertir l'utilisateur
›Soit le confronter à un choix
›Soit lui demander de compléter un champ pour récupérer une information
Javascript propose trois types différents de boîte de dialogue, dont
l'utilisation se rapporte à une de celles décrites ci-dessus.
Boîte de dialogue alert()
Permet d'afficher une boîte de dialogue de type avertissement, ne laissant à
l'utilisateur que la possibilité d'appuyer sur un bouton Ok.
function ExempleAlert(){
alert(« Message d’alert :\n Boîte de dialogue
Alert");
}
Les bases de JavaScript – Les boîtes de dialogue

Boîte de dialogue confirm()

Permet comme la méthode alert d'afficher un message, mais ajoute des
options de réponse qui peuvent être adaptées pour effectuer des
confirmations ou annulations.

function ExempleConfirm(){
if (confirm(« êtes-vous un Web développeur?")){
alert("Vous venez de cliquer sur le bouton :\n OK");
} else{
alert("Vous venez de cliquer sur le bouton :\n
Annuler");
}
}
Les bases de JavaScript – Les boîtes de dialogue

Boîte de dialogue prompt()

Permet d'ouvrir une boîte de dialogue pour demander une saisie à
l'utilisateur. Elle est composée d'un message (premier paramètre de la
méthode)), d'une zone de saisie de type text et de deux boutons "Ok" et
"Annuler".

function ExemplePrompt(){
var prenom = prompt('Saisissez votre
prénom',‘Mohammed');
if (prenom != null && prenom != ""){ alert(" Votre
Prénom:\n"+ prenom );
} else{
alert(" Valeur par défaut");
}
}
Les bases de JavaScript – Manipuler les
Tableaux
Un tableau, ou plutôt un array en anglais, est une variable qui contient
plusieurs valeurs, appelées items. Chaque item est accessible au moyen d'un
indice et dont la numérotation commence à partir de 0.
Déclarer un tableau
On utilise bien évidemment var pour déclarer un tableau, mais la syntaxe
pour définir les valeurs est spécifique :
Var MyTab1 = [element0, element1, ..., elementN];
Var MyTab2 = new Array(element0, element1[, ...[,
elementN]]); Var MyTab3 = new Array(10);
Les bases de JavaScript – Manipuler les Tableaux
Parcourir un tableau

Le principe pour parcourir un tableau est simple : il faut faire autant

d'itérations qu'il y a d'items. Le nombre d'items d'un tableau se récupère avec
la propriété length, exactement comme pour le nombre de caractères d'une
chaîne de caractères. À chaque itération, on va avancer d'un item dans le
tableau, en utilisant la variable de boucle i : à chaque itération, elle
s'incrémente, ce qui permet d'avancer dans le tableau item par item. Voici un
exemple :

for (var i = 0; i < [Link]; i++) {

alert(myArray[i]);
Les bases de JavaScript – Manipuler les
Tableaux
}
Opérations sur les tableaux
Transformer en String: [Link]()
Récupérer les valeurs d'un tableau sous la forme d'une String
var tab = [true,2,5,"d","2 m","c"];
alert([Link]("|"));// Affiche: true|2|5|d|2 m|c

Rassembler plusieurs tableaux:

[Link]()
Permet d'additionner à un tableau d'autres tableaux
var tab = [1,2];
var tab1 =
Les bases de JavaScript – Manipuler les Tableaux
[3,4]; var tab2
= [5,6];
alert([Link](tab1,tab2)); // Affiche: 1,2,3,4,5,6
Les bases de JavaScript – Manipuler les
Tableaux
Opérations sur les tableaux
Supprimer un élément depuis un tableau

Supprimer le premier élément:

[Link]() Supprimer le dernier
élément: [Link]()

var tab = [1,2,4,7];

alert([Link]());//Affiche: 1
alert(tab);//Affiche: 2,4,7

alert([Link]());//Affiche: 7
alert(tab);//Affiche: 2,4

Opérations sur les tableaux

Les bases de JavaScript – Manipuler les Tableaux

Insérer une ou plusieurs valeurs dans un tableau

Insérer des valeurs au début:

[Link]() Insérer des valeurs à la
fin: [Link]()

var tab = [1,2,4,7];

alert([Link](O,9));//Affiche: 6, la langueur du tableau

alert([Link](23,12));//Affiche: 8, la langueur du tableau

Opérations sur les tableaux
Insérer, modifier, ou supprimer une ou plusieurs valeurs dans un tableau:
[Link]() splice( début, quantité, liste de valeur )
- début: position où commence l'insertion ou suppression.
- quantité: nombre d'éléments a supprimer ou à modifier à partir de début,
- liste de valeur: un ou une liste de valeurs séparées par une ","
Les bases de JavaScript – Manipuler les
Tableaux
var tab = [1,2,3,4,5];
//Exemple de modification
alert([Link](1,2,"a","b"));//Affiche: 2,3. Les éléments
modifiés alert(tab); //1,a,b,4,5

//Exemple de Suppression
alert([Link](1,2));//Affiche: 2,3. Les éléments
supprimés alert(tab); //1,4,5

//Exemple d'ajout :
alert([Link](1,0,"a","b"));
alert(tab); //1,a,b,4,5
Opérations sur les tableaux
Trier ou inverser l’ordre des éléments d’un tableau
Les bases de JavaScript – Manipuler les Tableaux

Trier les éléments d’un tableau : Array.

sort() Inverser l'ordre des éléments d’un
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
Les bases de JavaScript – Manipuler les chaines de
caractères
String est un mot anglais qui signifie "chaîne", il s'agit en fait de chaîne de
caractères.
Les chaînes de caractères sont utiles pour représenter des données
textuelles. Les opérations les plus fréquentes qui concernent les chaînes de
caractères sont : la vérification de leur longueur( [Link] ), la
concaténation de plusieurs chaînes grâce aux opérateurs + et +=, étudier
la présence et la position de fragments de chaînes avec les méthodes
indexOf et substring.
Pour créer une chaîne de caractères, on utilise généralement cette syntaxe :

var MonChaine = "Chaîne de caractères primitive";

var MonObjetChaine = new String("Chaîne de
Les bases de JavaScript – Manipuler les chaines de
caractères
caractères"); Opérations sur les chaînes de
caractères

La méthode charAt() renvoie le caractère à la position spécifiée.

[Link](index); // index est un entier

La méthode concat() combine le texte de deux chaînes et renvoie une

nouvelle chaîne ainsi formée.
[Link](string2, string3[, ..., stringN]);

La méthode slice() extrait une section de la chaine de caractères et renvoie

une nouvelle chaine de caractères.
[Link](Début[, fin]); // le paramètre fin est facultatif
Les bases de JavaScript – Manipuler les chaines de
caractères
Opérations sur les chaînes de caractères

La méthode split() divise à l'aide d'un séparateur un objet String en un

tableau de souschaînes.
[Link]([separateur][, limit]); // limit est le nombre de sous-chaînes à
retourner

La méthode substring() retourne un extrait d'une chaine, selon un index de

début et, soit un index de fin, soit la fin de la chaîne.
[Link](indexDebut[, indexFin]);

La méthode Substr() renvoie les caractères d'une chaîne à partir de la

position spécifiée et pour la longueur spécifiée.
Les bases de JavaScript – Manipuler les chaines de
caractères
str. Substr(Début[, Longueur]);
Opérations sur les chaînes de caractères

La méthode indexOf retourne pour la chaîne de caractère sur laquelle a été

appelée, l'index de la première occurrence pour la valeur renseignée, en
commençant la recherche à partir de indexDebut

str. indexOf([ChaineRecherchée][, indexDebut]);

La méthode lastIndexOf retourne pour la chaîne de caractère sur laquelle a

été appelée, l'index de la dernière occurrence pour la valeur renseignée, La
recherche est effectuée en partant de la fin (sens inverse de lecture) en
commençant à partir de indexDebut

str. lastIndexOf([ChaineRecherchée][, indexDebut]);

Les bases de JavaScript – Manipuler les chaines de
caractères
Opérations sur les chaînes de caractères

La méthode toUpperCase() retourne la valeur de la chaîne appelante

convertie en majuscules.
[Link]();

La méthode toLowerCase() retourne la chaîne passé en paramètre

convertie en minuscule.
[Link]();
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 façon native dans
Javascript, et que l'on peut toujours utiliser.
L'objet Date nous fournit un grand nombre de méthodes 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(année, mois, jour [, heure, minutes, secondes,
millisecondes ]);
Les bases de JavaScript – Manipuler
les Dates
Ce tableau récapitule les méthodes principales. Toutes les méthodes
commençant par get se fondent sur les paramètres régionaux
Méthode Description
getDate Retourne le jour du mois de la date courante.
getDay Retourne le jour de la semaine de la date courante.
getFullYear Retourne l’année de la date courante.
getHours Retourne les heures de l’heure courante.
getMilliseconds Retourne les millisecondes de l’heure courante.
getMinutes Retourne les minutes de l’heure courante.
getMonth Retourne le mois de la date courante.
getSeconds Retourne les secondes de l’heure courante.
getTime Détermine le nombre représentant la date en millisecondes.
getTimezoneOffs Détermine le décalage horaire par rapport à l’heure GMT.
et
getYear Retourne l’année de la date courante sur deux caractères pour les années
précédant 2000.
Les bases de JavaScript – Les expressions régulières
setXXX Toutes les méthodes getXXX ont des méthodes setXXX correspondantes.
toGMTString Retourne la date GMT sous forme de chaînes de caractères.
toLocaleString Retourne la date sous forme de chaînes de caractères en utilisant les paramètres
régionaux.
toSource Retourne un objet littéral représentant la date.
toString Retourne la date sous forme de chaîne de caractères.
valueOf Retourne la date sous forme de nombre.
Définition
Le langage JavaScript propose différentes fonctionnalités afin de mettre en
œuvre les expressions régulières.
Une expression régulière correspond à une notation compacte et puissante
qui décrit de manière concise un ensemble de chaînes de caractères. Elle
peut notamment être appliquée à une chaîne de caractères afin de
déterminer si elle correspond à des critères particuliers. Elle obéit à une
syntaxe particulière et interprète spécifiquement différents symboles.
Les bases de JavaScript – Les expressions régulières

Forme littérale
JavaScript permet de définir une expression régulière sous forme littérale par
l’intermédiaire du symbole "/". Cette définition comporte deux parties :
l’expression proprement dite et les propriétés relatives à son application.
Il existe deux propriétés relatives à l’application des expressions régulières :
› La valeur g: qui spécifie que toutes les occurrences dans la chaîne doivent être
utilisées. Si elle n’est pas spécifiée, seule la première occurrence est utilisée.
›La valeur i: qui spécifie que la recherche n’est pas sensible à la casse.
var chaine = "Ceci est un
test"; var expression =
/test/gi;
var chaineCorrespond = [Link](chaine);
/* chaineCorrespond contient true puisque la chaîne correspond à l’expression régulière
*/
Syntaxe
Le tableau suivant récapitule les symboles utilisables pour les expressions
régulières.
Les bases de JavaScript – Les expressions régulières

Caractère Fonction
d’option
”” Aucune option définie.

”g” Force une recherche globale.

”i” Ne tient pas compte de la casse des caractères.

”gi” Associe les options i et g.

Les caractères d’ensemble

Caractère outil Fonction

[xyz] Correspond à un ensemble de caractères (ici xyz), placé entre les

crochets.
[xz] Correspond à un ensemble de caractères en minuscules entre x et z.

[XZ] Correspond à un ensemble de caractères en majuscules entre X et Z.

Les bases de JavaScript – Les expressions régulières

[09] Correspond à un ensemble de caractères entre 0 et 9

[^xz] Interdit les caractères suivants ^ (ici x et z).

\d Correspond à un chiffre. Équivalent à [09].

\D Interdit les chiffres de 0 à 9. Équivalent à [^09].

Les caractères de groupement

() Permet de grouper des caractères formant alors un sous motif.

Les caractères de répétition

* Le caractère peut apparaître un nombre indéfini de fois.

+ Le caractère doit apparaître au moins une fois.

? Le caractère doit apparaître zéro ou une fois.

{x} Le caractère doit apparaître le nombre de fois équivalent à x.

Les bases de JavaScript – Les expressions régulières

{x,z} Le caractère doit apparaître au moins x fois et au plus z fois.

x|z Le caractère peut être x ou z.

16/02/2015
Syntaxe (suite)
Le tableau suivant récapitule les symboles utilisables pour les expressions
régulières.
Les caractères de positionnement

Caractère outil Fonction

^ Précise le début de l’expression dans la chaîne de caractères.
$ Précise la fin de l’expression dans la chaîne de caractères.
\b Précise le début de mot.
\B Précise la fin de mot.
(x) Trouve la chaîne et retient sa position.
Le caractère de choix

x|z Le caractère peut être x ou z.

Les bases de JavaScript – Les expressions régulières

Les caractères spéciaux

. Correspond à tout caractère.

\ Indique que le caractère suivant n’est pas spécial.
\f Correspond à un saut de page.
\n Correspond à un saut de ligne.
\r Correspond à un retour chariot.
\t Correspond à une tabulation.
Les bases de JavaScript – Les expressions régulières

Méthodes utilisables
Nous nous intéressons dans cette section aux méthodes utilisables avec les
expressions régulières.
Méthod
Description
e
exec Retourne la première occurrence correspondant à l’expression régulière
dans la chaîne.
Détermine si des occurrences sont contenues dans la chaîne de caractères
test
en paramètre pour l’expression régulière.
Retourne les différentes sous-chaînes (sous forme de tableau) de caractères
match correspondant à l’expression régulière dans la chaîne de caractères initiale
Retourne la position de la première occurrence correspondant à l’expression
search régulière.
Exemples d’application:
La méthode test() La méthode exec()
Les bases de JavaScript – Les expressions régulières

var chaine = "Ceci est une chainevar chaine = "Ceci est une chaine de
de test"; var expression = /test test"; var expression = /test$/g; var
var retour =
sousChaines =
[Link](chaine); // retour
contient la valeur true chaine =[Link](chaine); //
"Ceci est une chaine de test."; sousChaines est un tableau
retour = [Link](chaine);contenant un seul élément, « test »
// retour contient désormais la valeur false
La méthode match() La méthode search()

var chaine = "Ceci est une chainevardechaine = "Ceci est une chaine de
test"; var expression = /chaine test"; var expression = /chaine|test/g;
var sousChaines = var position = chaine.
[Link](expression); /* search(expression);
// position contient la valeur 13
sousChaines est un tableau contenant
les valeurs « chaine » et « test » */
Les bases de JavaScript – Les Fonctions

Introduction
Les fonctions représentent le concept de base de la programmation
JavaScript afin de modulariser les traitements.
Nous verrons que les fonctions constituent la clé de voûte du développement
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
}
Les bases de JavaScript – Les Fonctions

Identification de fonction
Le langage JavaScript n’utilise pas les signatures pour identifier les fonctions
et se fonde uniquement sur leurs noms. Ainsi, deux fonctions globales ou
d’un même objet possédant le même nom ne peuvent coexister avec ce
langage. enfaite l’interprétateur JavaScript utilise toujours celle qui a été
définie en dernier, ignorant toutes les précédentes.
function maFonction(parametre1, parametre2)
{ return parametre1+" - "+parametre2;
}
function maFonction(parametre1)
{ return parametre1;
}
var retour = maFonction("param1", "param2"); //
Affiche parametre1

16/02/2015
Les bases de JavaScript – Les Fonctions

Gestion des arguments

function maFonction()
{ if( [Link]
== 1 ) { return
arguments[0];
}
if( [Link] == 2 ) {
return arguments[0]+" - "+arguments[1];
}
}
JavaScript met à disposition la liste des arguments passés à une fonction
dans une variable particulière. Nommée arguments, cette variable est
implicitement définie pour chaque fonction. Le développeur peut donc
l’utiliser directement dans le code des fonctions.
Cette fonctionnalité de JavaScript permet de supporter plusieurs signatures
de méthodes et ainsi de contourner le problème lié au nombre d'arguments.
Les bases de JavaScript – Les Fonctions

Méthodes de la classe Function

La class Function de JavaScript propose deux méthodes supplémentaires
d’appelle de fonctions. Ces méthodes sont :

var nombresTab = [5, 6, 2, 3, 7]; Var v1=2; Var v2=34; Var v4=7;
var v = [Link](this, var v = [Link](this,
nombres); v1,v2,v3);
› La méthode 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 méthode call() réalise un appel à une fonction avec une valeur this et
les arguments fournis individuellement.

16/02/2015
Les bases de JavaScript –
Les Closures
Définition
En rapport avec les fonctions JavaScript propose d'autres fonctionnalités
permettent le support des Closures.
Une closure est une fonction JavaScript particulière, qui utilise directement
des variables définies en dehors de la portée de son code. Ce mécanisme est
souvent utilisé par des fonctions définies dans d’autres fonctions, comme
l’illustre le code suivant :
function uneFonction(parametre)
{ function
uneClosure(unAutreParametre) {
return "Les paramètres sont: "
+parametre+", "+ unAutreParametre;
}
return uneClosure;
}
var retour = uneFonction("Mon
paramètre"); var valeurRetour =
Les bases de JavaScript – Gestion des exceptions
retour("Mon autre paramètre");
// valeurRetour contient « Les paramètres sont: Mon paramètre, Mon autre
paramètre »
Introduction
La gestion des anomalies d’exécution est un aspect très important de la
programmation. Une approche méthodique à ce sujet de la part des
développeurs permet d’obtenir du code plus robuste et lisible à la fois.
Dans le contexte des langages de programmation, un système de gestion
d’exceptions permet de gérer les conditions exceptionnelles pendant
l’exécution du programme. Lorsqu’une exception se produit, l’exécution
normale du programme est interrompue et l’exception est traitée.
Erreurs et exceptions
Une erreur est une anomalie de fonctionnement, une condition imprévue
durant l’exécution d’un programme, qui rend impossible sa continuation et
demande que des actions soient entreprises pour réparer la défaillance,
comme par exemple :
Les bases de JavaScript – Gestion des exceptions
– une division par zéro ;
– une tentative d’ouvrir un fichier qui n’existe pas ;
– l’utilisation d’une référence nulle pour accéder à un objet.
Tout programme en exécution peut être sujet à des conditions qui pourraient,
si non gérées, provoquer des erreurs. Ces conditions, en elles mêmes, ne
sont pas des bugs, mais des conditions particulières (exceptions) dans le
déroulement normal d’une partie d’un programme. Tel l’impossibilité
d’ouvrir un fichier.
Attraper les exceptions
JavaScript offre la même syntaxe que Java pour gérer les exceptions, au
moyen des mots clés try, catch et finally. Le premier définit le bloc
d’interception des exceptions, le second les traitements à réaliser en cas de
levée d’exceptions et le dernier les traitements à exécuter, que des
exceptions soient levées ou non.
Les bases de JavaScript – Gestion des exceptions
Le code suivant décrit la façon de gérer les exceptions (nous faisons
volontairement appel à une méthode testException inexistante afin de
déclencher une exception) :
try { testException(); //Cette méthode
est inexistante!
} catch(error) {
alert("Une exception a été levée");
alert("Nom de l’exception levée :
"+[Link]); alert("Message de l’exception
levée : "+[Link]);
} finally {
alert("Passage dans finally");
}
Les bases de JavaScript –
la Programmation Orientée Objet
Le langage JavaScript offre la possibilité de mettre en œuvre la plupart des
concepts objet, tels que l’héritage et le polymorphisme. Les développeurs
peuvent tirer parti de ces mécanismes pour augmenter la qualité, la lisibilité
et la modularité de leurs applications JavaScript.
La façon de mettre en œuvre les concepts objet est spécifique à ce langage,
et est essentiellement fondée sur les fonctions et closures de JavaScript.

16/02/2015
Les bases de JavaScript –
POO: Concepts généraux
Classes et objets: Le concept central de la programmation objet est la
classe. Composée d’attributs et de méthodes, ces derniers permettent de
définir respectivement les états et les comportements de la classe.

Niveau de visibilité Description

Par défaut Seules les sous-classes ont accès aux éléments de la classe.
Privé Les entités externes n’ont pas accès aux éléments de la
classe.
Protégé Seules les sous-classes ont accès aux éléments de la classe.
Public Les entités externes ont accès aux éléments de la classe.
Instances et objets: Une classe n’est 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é: L’encapsulation revient à interdire l’accès à

certains éléments d’une classe afin de protéger ses états et fonctionnements
Les bases de JavaScript –
internes. Les attributs de classe ne doivent pas être exposés directement à
l’extérieur. C’est la raison pour laquelle la mise en œuvre d’accesseurs
constitue une bonne pratique de conception.
POO: Concepts généraux
L’héritage: Par souci de modularité, les langages orientés objet mettent en
œuvre des mécanismes d’héritage. Ces derniers permettent de définir des
sous-classes afin d’enrichir et de bénéficier d’attributs et de méthodes de
classes existantes.

Le polymorphisme: Les mécanismes de polymorphisme permettent à une

application de voir une instance sous différentes formes. Le polymorphisme
est intimement lié aux mécanismes de transtypage, qui permettent de
convertir le type d’une instance, quand c’est possible, en un autre type.

16/02/2015
Les bases de JavaScript –
POO: et JavaScript
En résumé
Nous avons décrit dans cette section les principaux concepts de la
programmation orientée objet.
Le langage JavaScript n’est pas un langage orienté objet , mais il
permet néanmoins de mettre en œuvre quelques concepts décrits au cours
des sections précédentes.
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 orientée objet en JavaScript. Il est utilisé dans une méthode
afin de référencer l'instance sur laquelle est exécutée cette méthode. Il faut
néanmoins faire attention lorsque l'on utilise this dans une fonction qui n'est
pas rattachée à un objet car soit une erreur se produit ou des champs
possèdent des valeurs non définies. L'exemple suivant illustre la mise en
œuvre de ce mot clé:

16/02/2015
Les bases de JavaScript –
var maFonction = function() {
alert("attribut: " + [Link]);
};
maFonction(); // Affiche la valeur undefined car [Link] ne peut
être résolu
// Création de l'objet obj1 et affectation de
maFonction var obj1 = { attribut: "valeur1",
methode: maFonction
}
[Link](); // Affiche la valeur de attribut, à
savoir valeur1 // Création de l'objet obj2 et affectation
de maFonction var obj2 = { attribut: "valeur2",
methode: maFonction
}
[Link](); // Affiche la valeur de attribut2, à savoir valeur2
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 réalisée en utilisant les éléments
contenus dans la fonction, ces derniers peuvent être aussi bien des
attributs que des méthodes. Le code suivant illustre la mise en œuvre
d'une classe JavaScript en utilisant ce principe:
function MaClasse(parametre1, parametre2) {
this.attribut1 = parametre1;
this.attribut2 = parametre2;
[Link] = function() {
alert("Attributs: " + this.attribut1 + ", " + this.attribut2);
}
}
var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut
attribut1 [Link](); // Affiche la chaîne de caractères contenant les
valeurs des attributs
Prototypage
function MaClasse(parametre1, parametre2) {
this.attribut1 = parametre1;
this.attribut2 = parametre2;
16/02/2015
Les bases de JavaScript – POO: Structures des objets
avec JavaScript
}
[Link] =
{ 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 [Link](); // Affiche la chaîne de caractères contenant les
valeurs des attributs
Le prototypage correspond à spécifier une sorte de modèle indépendamment du
constructeur afin d'initialiser chaque objet à sa création. Comme nous l'avons
mentionné rapidement précédemment, la spécification de ce modèle se réalise en
se fondant sur la propriété prototype de la classe Function.
Il convient donc ainsi de toujours de créer une fonction constructeur comme
précédemment afin de définir une classe. Cependant, contrairement à l'approche
précédente, les éléments de la classe ne sont plus tous définis dans cette
fonction.
Le code suivant illustre l'adaptation de la classe MaClasse précédemment mise
en œuvre en se fondant sur le prototypage:
Combinaison des deux approches
Dans cette approche, l'initialisation de la propriété prototype est réalisée dans le
code du constructeur de la classe, ceci offrant la possibilité d'avoir accès à toutes
16/02/2015
Les bases de JavaScript – POO: Structures des objets
avec JavaScript
les variables et méthodes de cette fonction particulière. Par contre, les principes
décris dans les différentes approches restent vrais. Les méthodes définies
directement dans le constructeur seront dupliquées alors que celles positionnées
sur le prototype non.
Le seul point subtil de cette approche est de forcer la propriété prototype à n'être
initialisée qu'une seule et unique fois la première fois que le constructeur est
appelé. Pour ce faire, il suffit d'ajouter une propriété personnalisée directement
sur le constructeur de la manière suivante:
function MaClasse() { [Link] =
"valeur"; if( typeof [Link]
== "undefined" )
{ [Link] =
function() { alert("Attribut: " +
[Link]);
};
[Link] = true;
}
}
var obj = new MaClasse();
alert([Link]); // Affiche la valeur de l'attribut attribut
[Link]();// Fonctionne correctement car la méthode a été ajoutée au
prototype

16/02/2015
16/02/2015