JAVASCRIPT

Préparé par Y. Ait Lahcen

QU’EST CE QUE JAVASCRIPT?
 JavaScript est un langage interprété par le navigateur.

 JavaScript est un langage « client » c'est à dire exécuté chez

l'utilisateur.
 JavaScript a pour but de dynamiser les sites Internet.

 JavaScript a été initialement développé par Netscape et

s'appelait à l'époque LiveScript. Adopté à la fin de l'année 1995,
par la firme Sun (qui a aussi développé Java), il prit alors son
nom actuel de JavaScript.

 JavaScript n'est donc pas propre aux navigateurs de Netscape.

Microsoft l'a d'ailleurs aussi adopté à partir de son Internet
Explorer 3. On le retrouve, de façon améliorée, dans Explorer 4 et 2
plus.
EXÉCUTION DE JAVASCRIPT
 Les scripts JavaScript sont gérés et exécutés par
le browser lui-même sans devoir faire appel aux
ressources du serveur. Ses instructions seront
donc traitées en direct et surtout sans retard par
le navigateur.

3
UTILISATION DE JAVASCRIPT
Il existe deux manières d’utiliser JavaScript dans une page Web :
1. Implémenter directement des traitements JavaScript dans la page.
Le code JavaScript est placé entre La balise <script> et </script>
<script type="text/javascript">
var test = "Ceci est un test";
alert(test);
</script>

2. Faire référence à une adresse contenant le code par l’intermédiaire

de l’attribut src de la balise script :
<script type="text/javascript" src="monScript.js">
</script>
Le code suivant illustre un contenu possible du fichier monScript.js :
var test = "Ceci est un test";
alert(test); 4
 CARACTÉRISTIQUES DE JAVASCRIPT
o JavaScript est un langage de script coté client. C’est-à-dire
que c’est le navigateur qui se charge de l’exécuter tout
comme le code HTML.

o La confidentialité du code est « compromise » le code

source peut être copié et réutilisé par d’autres personnes.

o On appelle souvent le langage JavaScript un langage

événementiel. En effet la plupart de ses scripts sont
associés à des événements qui peuvent se produire sur le
navigateur

o JavaScript est généralement utilisé pour contrôler les

formulaires avant envoi au lieu d’attribuer ce travail à un
langage coté serveur tel que le PHP.
5
LES COMMENTAIRES
Les commentaires en JavaScript sont semblables à ceux du langage
C ou php. En effet on utilise les doubles slash (//) pour un
commentaire de fin de ligne. Tandis que /* et */ délimitent les
commentaires sur plusieurs lignes.

Exemple:
<script language=‘’javascript’’>
// Ceci est un commentaire sur une ligne
/*
Ceci est un commentaire
sur plusieurs lignes
*/
</script>
6
LES VARIABLES
 Le choix du nom des variables doit respecter les deux règles
suivantes:
 le premier caractère ne peut être qu’une lettre, un souligné
(underscore) ou un dollar,
 les caractères suivants doivent être des caractères
alphanumériques, des soulignés (underscores) ou des dollars.

 Pour rappel JavaScript est sensible à la case. Attention donc

aux majuscules et minuscules

 Pour déclarer une variable on utilise le mot clé « var ». On

parle alors d’une déclaration explicite: var a=20;

 Comme on peut directement initier la variable (déclaration 7

implicite): a=20;
LES VARIABLES : TYPES PRIMITIFS

 Le typage des variable n’est pas obligatoire en JavaScript.

Ainsi on peut changer le type d’une variable plusieurs fois lors du
même script.

8
INITIALISATION DES VARIABLE

JavaScript a la responsabilité de créer la valeur du bon

type en fonction de l’initialisation ou de l’affectation.

Le code suivant illustre l’initialisation de différentes variables

en se fondant sur des formes littérales :

var nombreEntier = 11;

var nombreReel = 11.435;
var chaineCaracteres = "Une chaine de caractères";
var tableau = [ "Premier élément", "SecondElement" ];
var tableauAssociatif = { "cle1" : "valeur1", "cle2" : "valeur2" }; 9
CONVERSION DE TYPES
 var booleen = true;
var variable1 = booleen.toString();
// variable1 contient la chaîne de caractère « true »

 var nombreEntier = 10;

var variable2 = nomEntier.toString();
// variable2 contient la chaîne de caractère « 10 »

 var nombreReel = 10.5;

var variable2 = nombreReel.toString();
// variable2 contient la chaîne de caractère « 10.5 » 10
CONVERSION DE TYPES
 La création de nombres à partir de chaînes de
caractères se réalise par l’intermédiaire des
méthodes parseInt et parseFloat.

var entier1 = parseInt("15");

// entier1 contient le nombre 15

var entier3 = parseInt("16");

// entier3 contient le nombre 16

var reel = parseFloat("15.5");

11
// reel contient le nombre réel 15,5
LES OPÉRATEURS

Les opérateurs en JavaScript sont les même

qu’en langage PHP:

+-*/%
< > <= >= == !=
++ -- += -= *= /=
()
&& ||

12
STRUCTURES CONDITIONNELLES

Les structures conditionnelles en JavaScript sont

les même qu’en langage PHP, à savoir:

 If … else
 Opérateur ternaire
(condition)?(traitement1):(traitement2)
 Boucle for

 Boucle while

 Les mots clé break et continue conservent

toujours leurs fonctions connues en JavaScript.
13
MÉTHODES DE BASE
 JavaScript propose un ensemble de méthodes permettant
de détecter le type et la validité de la variable passée en
paramètre.

Méthode Description
isArray Détermine si le paramètre est un tableau.
isBoolean Détermine si le paramètre est un booléen.
isEmpty Détermine si un tableau est vide.
isNull Détermine si le paramètre est null.
isNumber Détermine si le paramètre est un nombre.
isObject Détermine si le paramètre est un objet.
Détermine si le paramètre est une chaîne de
isString
caractères. 14
MANIPULATION DES TYPES DE BASE
 Le langage JavaScript offre différents mécanismes
pour utiliser des éléments courants tels que
 les chaînes de caractères,
 les nombres
 les dates.

 JavaScript définit pour cela des classes

correspondant aux types primitifs.

15
MANIPULATION DES CHAÎNES
 JavaScript gère les chaînes de caractères de manière
similaire à Java.

 les chaînes de caractères peuvent être définies avec des

guillemets ou des apostrophes :
var chaine1 = "ma chaîne de caractère";
var chaine2 = 'mon autre chaîne de caractère';

 Le langage JavaScript introduit la classe String

correspondante :
var chaine1 = new String("chaîne de caractère");

16
 MÉTHODES DE LA CLASSE STRING
Méthode Description

charAt Retourne le caractère localisé à l’index spécifié en paramètre.

Retourne le code du caractère localisé à l’index spécifié en
charCodeAt
paramètre.
concat Concatène la chaîne en paramètres à la chaîne courante.
Recherche la première occurrence de la chaîne passée en
indexOf paramètreet retourne l’index de cette première occurrence.

Recherche la dernière occurrence de la chaîne passée en

lastIndexOf
paramètre et retourne l’index de cette dernière occurrence.
Remplace un bloc de caractères par un autre dans une chaîne
replace
decaractères.
Retourne une sous-chaîne de caractères en commençant à
Slice
l’index spécifié en paramètre et en finissant à la fin de la chaîne
substr
initiale si la méthode ne comporte qu’un seul paramètre. Dans le
substring
cas contraire, elle se termine à l’index spécifié par le second
paramètre.
Permet de découper une chaîne de caractères en sous-chaînes
split
en se fondant sur un délimiteur. Le resultat est un tableau
toLowerCase Convertit la chaîne de caractères en minuscules.
17
Convertit la chaîne de caractères en majuscules.
toUpperCase
MANIPULATION DES NOMBRES
 Un nombre entier et un nombre réel sont tous deux de
type Number. La différentiation se fait au niveau de
leur initialisation. JavaScript fournit la classe
correspondante Number.

var nombre = 11;

var chaineDecimale = nombre.toString();
/* chaineDecimale contient la chaine de caractère « 11 » */

var chaineHexdecimale = nombre.toString(16);

/* chaineDecimale contient la chaine de caractère « b » */

18
MANIPULATION DES DATES
 JavaScript définit les dates uniquement en tant que classe par
l’intermédiaire de la classe Date, laquelle comporte un grand
nombre de méthodes.
 La création d’une date se réalise par le biais du constructeur de
la classe Date. Ce dernier peut ne prendre aucun paramètre.
Dans ce cas, l’instance créée correspond à la date courante.
var dateCourante = new Date();

var uneAutreDate = new Date(1996,10,20,12,5,0);

//correspond au 20 octobre 1996 à 12 heures et 5 minutes

Var date = new Date();

Var chaineDate = date.toString();
/* avec Internet Explorer, chaineDate contient « Mon Nov 20
12:05:00 UTC+0100 2006 » */
/* avec Firefox, chaineDate contient « Mon Nov 20 2006 12:05:00 19
GMT+0100 » */
MANIPULATION DES DATES

20
LES FONCTIONS
En JavaScript les fonctions sont déclarées et appelées
de la même façon qu’en PHP.

Délaration:

Function
identificateur_de_la_fonction(liste_des_arguments)
{
Liste des instructions;
Return (valeur_de_retour);
}
21
FONCTION ANONYME
Dans le cas d’une fonction anonyme, la syntaxe est la
suivante :
var maFonction = function(parametre1, parametre2, ...)
{
//Code de la fonction
};

Note : Une fonctionnalité intéressante de JavaScript permet

d’affecter une fonction à une variable. Cette dernière fait
alors référence à la fonction, elle est utilisée comme suit :
maFonction("param1", "param2") ;

22
LES FONCTIONS
 L’identificateur de la fonction suit les même règles que
l’identificateur de la variable:
 Il est sensible à la casse.

 Les arguments de la fonction sont facultatifs cependant

les parenthèses sont obligatoires même vides.

 Le mot clé return permet de passer le résultat de la

fonction dans le reste du script. Il est facultatif.

 D’habitude les fonctions sont déclarées à l’entête du

document et sont souvent appelés par les événements. 23
LES ÉVÉNEMENTS
 JavaScript est un langage de programmation appelé aussi
langage événementiel vu que la majorité de ses scripts sont
associés à des événements qui se produisent sur le navigateur.

 Les événements sont des actions de l’utilisateur qui vont

pouvoir donner lieu à une interactivité. L’ événement par
excellence est le clic de la souris

 Grâce à JavaScript il est possible d’associer des fonctions

ou des méthodes à des événements tel que le passage de la
souris au dessus d’une zone, le changement d’une valeur…

 Ce sont les gestionnaires d’événement qui permettent

d’associer une action à un événement. La syntaxe d’un
gestionnaire d’événement est la suivante:

onEvenement=‘’action_JavaScript_ou_fonction()’’; 24
LISTE DES ÉVÉNEMENTS:
 Click: se produit lorsque l’utilisateur clique sur un élément associé à
l’événement.

 Load: se produit lorsque le navigateur de l’utilisateur charge la page en

cours.

 Unload: se produit lorsque le navigateur de l’utilisateur quitte la page en

cours.

 MouseOver: c’est lorsque l’utilisateur survole (met le curseur de la souris

sur) l’élément associé à l’événement.

 MouseOut: c’est lorsque le curseur de la souris quitte l’élément.

 Focus: se produit lorsque l’utilisateur donne le focus à un élément, c’est-

à-dire que l’élément devient actif.

 Blur: c’est lorsque l’élément perd le focus (il était actif et il ne l’est plus,
c’est à ce moment que cet événement est déclanché).
25
 Change: se produit lorsque l’utilisateur modifie le contenu d’un champs
donné.
LISTE DES ÉVÉNEMENTS:

 Select: se produit lorsque l’utilisateur sélectionne un texte (ou

une partie d’un texte) dans un champs de type ‘text’ ou ‘textarea’.

 Submit: se produit lorsque l’utilisateur clique sur le bouton de la

soumission d’un formulaire (bouton ‘submit’).

 KeyDown: se produit lorsque l’utilisateur enfonce une touche du

clavier.

 KeyUp: c’est lorsque l’utilisateur relâche une touche du clavier.

 DblClick: se produit lorsque l’utilisateur clique deux (double

clique) fois sur un élément du navigateur.

 Resize: quand l’utilisateur redimensionne le navigateur.

26
LES ÉVÉNEMENTS
Chaque événement ne peut pas être associé à n’importe quel
objet. Par exemple on ne pas appliquer l’événement
onChange à un lien hypertexte.
Ci-dessous un résumé des événements qui peuvent être
associés aux objets les plus courants:

 Lien hypertexte: onClick, onMouseOver, onMouseOut

 Page du navigateur: onLoad, onUnload
 Boutons: onClick
 Liste de selection: onBlur, onFocus, onChange
 Champs de texte: onBlur, onFocus, onChange, onSelect,
onKeyUp, onKeyDown
27
 Images: onMouseOver, onMouseOut
EXPRESSIONS RÉGULIÈRES.

 Une expression régulière correspond à une

notation compacte qui décrit de manière
concise un ensemble de chaînes de caractères.

 Elle peut ê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.
28
EXPRESSIONS RÉGULIÈRES.
JavaScript permet de définir une expression régulière
par l’intermédiaire du symbole /
var expression = /test/gi;
var chaine = "Ceci est un test";
var chaineCorrespond = expression.test(chaine);
/* chaineCorrespond contient true puisque la chaîne correspond à
l’expression régulière */

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. 29
SYMBOLES DES EXPRESSIONS RÉGULIÈRES
$ Indique que l’expression se situe en fin de chaîne de caractères.
+ Désigne un ensemble d’au moins un signe quelconque.
* Désigne un ensemble de zéro ou plusieurs signes quelconques.
. Désigne un signe quelconque.
[] Spécifie un ensemble de caractères sous la forme d’une plage de caractères. On
spécifie que le caractère peut être un de ceux compris entre a et f, par exemple.
\b Désigne l’extrémité d’un mot.
\B Tout sauf l’extrémité d’un mot.
\d Désigne un chiffre quelconque.
\D Désigne un signe autre qu’un chiffre .
\n Correspond à un signe de saut de ligne.
\t Correspond à un signe de tabulation.
\w Désigne tous les signes alphanumériques, y compris le tiret.
\W Désigne un signe autre qu’un signe alphan umérique ou un tiret.
^ Indique que l’expression se situe en début de chaîne de caractères. Entre
crochets, ce symbole correspond à la négation.
30
{} Spécifie le nombre d’occurrences du bloc de caractères qui le précède.
| Désigne l’une ou l’autre expression.
EXPRESSIONS RÉGULIÈRES.

Exemples :
var chaine = "Ceci est une chaine de test";
var monExpression = /c[a-z]*e/g;
/* monExpression correspond au mot « chaine » dans la chaîne
de caractères */

var chaine = "Ceci est une chaine de test";

var monExpression = /c[a-z]{4}e/g;
/* monExpression correspond au mot « chaine » dans la chaîne
de caractères */

Remarque : Le caractère d’échappement est \

Il doit être mis en œuvre lorsque des caractères du tableau
précédent doivent être utilisés dans l’expression elle-même.
31
MÉTHODES DES EXPRESSIONS RÉGULIÈRES.

 exec Retourne les occurrences correspondant à

l’expression régulière dans la chaîne.

 test Détermine si des occurrences sont contenues

dans la chaîne de caractères en paramètre pour
l’expression régulière.

var chaine = "Ceci est une chaine de test";

var expression = /test$/g;
var retour = expresson.test(chaine); // contient la valeur true

var sousChaines = expression.exec(chaine); 32

// sousChaines est un tableau contenant un seul élément, « test »
MÉTHODE DE STRING ACCEPTANT EN PARAMÈTRE UNE
EXPRESSION RÉGULIÈRE

 match retourne les différentes sous-chaînes de caractères

correspondant à l’expression régulière dans la chaîne de caractères
initiale.
 search retourne la position de la première occurrence correspondant
à l’expression régulière.
 replace permet de remplacer le premier élément correspondant à
l’expression régulière spécifiée.

Exemple :
var chaine = "Ceci est une chaine de test";
var expression = /chaine|test/g;
var sousChaines = chaine.match(expression);
/* sousChaines est un tableau contenant les valeurs « chaine » et
« test » */
var position = chaine. search(expression);
// position contient la valeur 13
33
var nouvelleChaine = chaine.replace(expression, "chose");
// nouvelleChaine contient « Ceci est une chose de chose »
MANIPULATION DES TABLEAUX

Le langage JavaScript offre deux types de tableaux :

 Tableaux indexés numériquement

 Tableaux associatifs

34
TABLEAU CLASSIQUE

Le premier type correspond à un tableau classique, géré

par index.

// Initialisation d’un tableau vide

var tableau1 = [];
tableau1[0] = "Le premier élément";
tableau1[1] = "Le seconde élément";
// Initialisation d’un tableau avec des éléments
var tableau2 = ["Le premier élément", "Le seconde
élément" ];
tableau1[2] = "Le troisième élément";
35
 MÉTHODES DE LA CLASSE ARRAY PERMETTANT DE
MANIPULER LES TABLEAUX

Méthode Paramètre Description

concat Tableau à ajouter Concatène un tableau à un autre.
Construit une chaîne de caractères à partir d’un tableau en
join Séparateur
utilisant un séparateur.
pop - Supprime et retourne le dernier élément d’un tableau.
push Élément à ajouter Ajoute des éléments à la fin d’un tableau.
reverse - Inverse l’ordre des éléments d’un tableau.
Retourne le premier élément et le supprime du tableau. Décale
shift -
vers la gauche tous ses éléments.
Indices de début et Retourne une partie du tableau en fonction d’indices de début et
slice
de fin de fin.

Trie les éléments d’un tableau. Par défaut, le tri s’effectue par
sort -
ordre alphabétique.

toString - Convertit un tableau en une chaîne de caractères.

Permet d’ajouter un élément au début d’un tableau et de décaler 3
unshift Éléments à ajouter
tous ses éléments vers la droite.
TABLEAU ASSOCIATIF
Un tableau associatif est fondé sur des identifiants
d’éléments dites clés

// Initialisation d’un tableau vide

var tableau1 = {};
tableau1["cle1"]= "Le premier élément";
tableau1["cle2"]= "Le second élément";

// Initialisation d’un tableau avec des éléments

var tableau2 = {
"cle1": "Le premier élément",
"cle2": "Le second élément"
}; 37
tableau2["cle3"] = "Le troisième élément";
PARCOURS DE TABLEAU ASSOCIATIF
Le parcours d’un tableau de ce type se réalise en
utilisant la boucle dédiée for…in, comme dans le code
suivant :

for(var cle in tableau)

{
alert("Elément pour la clé "+cle+" : "+ tableau[cle]);
}

38
GESTION DES EXCEPTIONS

 JavaScript permet de gérer les exceptions. Ce

mécanisme offre la possibilité d’intercepter les
erreurs.
 Cela évite l’arrêt brutal de l’exécution d’un script.

39
INTERCEPTION GLOBALE
JavaScript offre la possibilité d’intercepter d’une
manière globale toutes les erreurs qui surviennent.

<script langage="text/javascript">
function gestionErreurs(message, fichier, ligne) {
alert(message+ "dans la ligne "+ligne);
}
onerror = gestionErreurs;
</script>
40
ATTRAPER LES EXCEPTIONS

JavaScript offre la même syntaxe que Java pour gérer

les exceptions, au moyen des motsclés try, catch et
finally.

try {
testException(); //Cette méthode est inexistante!
} catch(error) {
alert("Une exception a été levée");
alert("Nom de l’exception levée : "+error.name);
alert("Message de l’exception : "+error.message);
} finally {
alert("Passage dans finally");
41
}
LANCER DES EXCEPTIONS

JavaScript offre la possibilité aux applications de

lancer des exceptions afin de signaler une erreur.

try {
throw new Error("test");
} catch(error) {
alert("Une exception a été levée");
alert("Nom de l’exception levée : "+error.name);
alert("Message de l’exception : "+error.message);
}
42