Cours Javascript Algo

JavaScript : les fondamentaux
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
elmouelhi.achref@gmail.com
H & H: Research and Training 1 / 143

Plan
1 Introduction
2 Intégrer JavaScript dans HTML
3 Console
4 Commentaires
5 Variables
6 Quelques opérations sur les variables
7 Méthodes utiles pour les chaı̂nes de caractères

Plan
8 Conditions et boucles
if
if ... else
else if
switch
Expression ternaire
while
do ... while
for
9 Tableaux
10 Fonctions
Fonction de retour (callback)
Quelques fonctions connues utilisant le callback
Closure d’une fonction

Plan
11 Objets
Attributs
Méthodes
Constructeurs
Prototypes
12 Objets et méthodes prédéfinis
13 Opérateurs
L’opérateur in
L’opérateur delete
L’opérateur instanceof

Plan
14 Constantes
15 Exceptions
16 Hoisting
17 Expressions régulières
18 Quelques erreurs JavaScript
19 Conventions et bonnes pratiques

Introduction
JavaScript
Définition, histoire et rôle

est un langage de programmation de scripts orienté objet (à
prototype)
H I ©
créé par Brendan Eich
U EL
O
f E LM
présenté par Netscape et Sun Microsystems en décembre 1995
ch r e
standardisé par ECMAScript en juin 1997 pour
permettant de©A
compléter l’aspect algorithmique manquant à HTML (et CSS)
rendre plus vivant le site web avec notamment des animations,
effets et de l’interaction avec l’internaute (le visiteur, le client...).

Introduction
JavaScript
Spécificités du JavaScript
langage faiblement typé

H I ©
EL
OU
syntaxe assez proche de celle de Java, C++, C...
M
E
possibilité d’écrire plusieurs
f Linstructions sur une seule ligne à
h r
condition de les séparer
c e par ;
terminer©
A
une instruction par ; est fortement recommandée même
si cette dernière est la seule sur la ligne

Introduction
JavaScript
Autres langages de programmation de scripts
AppleScript
H I ©
JScript, VBScript et TypeScript (Microsoft)EL
M OU
f E L
LiveScript (Netscape) puis JavaScript
chr e
ActionScript (MacroMedia)
A
© (Open-source)
CoffeeScript
...

Intégrer JavaScript dans HTML
JavaScript
Trois façons pour définir des scripts JavaScript

H I ©
EL
OU
comme valeur d’attribut de n’importe quelle balise HTML
M
dans une balise <script>
f E Lde la section <head> d’une page
HTML
chr e
dans un©
A
fichier d’extension .js référencé dans une page HTML
par la balise <script>

JavaScript
H I ©
EL
Première méthode
<button onclick="alert(’Hello World’);"> Cliquer ici O U
</button>
f E LM
ch r e
©A

JavaScript
Deuxième méthode
<!DOCTYPE html>
<html>
<head>
<title>First JS Page</title>
<script type="text/javascript">
H I ©
function maFonction() {
UEL
alert("Hello World !"); O
}
f E LM
</script>
</head> ch r e
<body>
©A
<button onclick="maFonction()">
Cliquer ici
</button>
</body>
</html>

JavaScript
Deuxième méthode
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
H I ©
UEL
alert("Hello World !"); O
}
f E LM
</script>
</head> ch r e
<body>
©A
<button onclick="maFonction()">
Cliquer ici
</button>
</body>
</html>
L’attribut type="text/javascript" n’est plus nécessaire depuis HTML 5.
JavaScript
Troisième méthode
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
H I ©
</head>
UEL
<body>
O
<button onclick="maFonction()"> Cliquer ici</button>
</body>
f E LM
</html>
ch r e
©A

JavaScript
Troisième méthode
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
H I ©
</head>
UEL
<body>
O
<button onclick="maFonction()"> Cliquer ici</button>
</body>
f E LM
</html>
ch r e
©A
Contenu du script.js
alert("Hello World !");
}

JavaScript
Pour une box d’affichage avec confirmation

var bin = confirm("Press a button!");
H I ©
alert(bin);
UEL
O
f E LM
ch r e
©A

JavaScript
Pour une box d’affichage avec confirmation

var bin = confirm("Press a button!");
H I ©
alert(bin);
UEL
O
f E LM
ch r e
Pour une box d’affichage avec une zone de saisie
©A
var str = prompt("Votre nom", "John Wick");
alert(str);

Console
JavaScript
La console, pourquoi ?
permet de contrôler l’avancement de l’exécution d’un programme

en affichant le contenu de variables (déboguer)
H I ©
U EL
en vérifiant les blocs du code visites (tracer)
L MO
r e f E
A ch
©

Console
JavaScript
La console, pourquoi ?
permet de contrôler l’avancement de l’exécution d’un programme
H I ©
en affichant le contenu de variables (déboguer)
U EL
en vérifiant les blocs du code visites (tracer)
L MO
r e f E
A
Modifions le contenu chdu script.js
©
function maFonction(){
console.log("Hello World !");
}

Console
JavaScript
Où trouve t-on le message ?

Pour les navigateurs suivants H I ©
UEL
Google chrome
O
Mozilla firefox
f E LM
ch
Internet explorer r e
©A
Cliquer sur F12

Console
JavaScript
Existe t-il un autre moyen de tester un programme JS sans passer par

un navigateur ?
Oui, en utilisant NodeJS (pour télécharger

H I ©
https://nodejs.org/en/)
U EL
O
f E LM
Pour tester, utiliser une console telle que
r
Invite de commandes
ch e
© A
Windows PowerShell
Cmder
Lancer la commande node nomFichier.js

Console
JavaScript
Modifions le contenu du script.js

H I ©
UEL
O
LM
}
maFonction();
r e f E
ch
©A

Console
JavaScript
Modifions le contenu du script.js

H I ©
UEL
O
LM
}
maFonction();
r e f E
A ch
©
Lancer la commande node script.js

Console
JavaScript
H I ©
EL
Il est aussi possible de définir un raccourci de console.log
var cl = console.log; O U
cl("Hello World !");
f E LM
ch r e
©A

Commentaires
JavaScript
Commentaire sur une seule ligne
// commentaire
H I ©
UEL
O
f E LM
ch r e
©A

Commentaires
JavaScript
// commentaire
Commentaire sur plusieurs lignes

H I ©
/* le commentaire
UEL
la suite O
et encore la suite
f E LM
*/
ch r e
©A

Commentaires
JavaScript
// commentaire
Commentaire sur plusieurs lignes

H I ©
/* le commentaire
UEL
la suite O
et encore la suite
f E LM
*/
ch r e
©A
Commentaire pour la documentation
/** un commentaire
pour
la documentation
*/
Variables
JavaScript
Déclaration d’une variable avec le mot clé var
var x;
H I ©
UEL
O
f E LM
ch r e
©A

Variables
JavaScript
var x;
Initialisation
H I ©
x = 0;
UEL
O
f E LM
ch r e
©A

Variables
JavaScript
var x;
Initialisation
H I ©
x = 0;
UEL
O
f E LM
Déclaration + initialisation
ch r e
var y = 5; ©A

Variables
JavaScript
var x;
Initialisation
H I ©
x = 0;
U EL
O
f E LM
Déclaration + initialisation
ch r e
var y = 5; ©A
Il est possible de déclarer simultanément plusieurs variables
var x = 0, y = 5;

Variables
JavaScript
Initialisation d’une variable non-déclarée ⇒ déclaration

H I ©
z = 5;
UEL
O
f E LM
ch r e
©A

Variables
JavaScript
Initialisation d’une variable non-déclarée ⇒ déclaration

H I ©
z = 5;
UEL
O
f E LM
ch r e
Affectation d’une variable non-déclarée
t = x + y;
©A

Variables
JavaScript
Utiliser une variable non-déclarée et non-initialisée ⇒
ReferenceError
alert (v);
H I ©
UEL
O
f E LM
ch r e
©A

Variables
JavaScript
ReferenceError
alert (v);
H I ©
EL
Une variable déclarée mais non-initialisée a par défaut la valeur
U
undefined
O
var w;
f E LM
alert (w);
ch r e
©A

Variables
JavaScript
ReferenceError
alert (v);
H I ©
EL
Une variable déclarée mais non-initialisée a par défaut la valeur
U
undefined
O
var w;
f E LM
alert (w);
ch r e
©A
NaN : not a number
var x = "bonjour";
n = x * 2;
console.log(n);

Variables
JavaScript
Quelques types de variable selon la valeur affectée

number
H I ©
UEL
string
O
boolean
f E LM
ch r e
object
© A
undefined

Variables
JavaScript
Pour récupérer le type de valeur affectée à une variable
console.log(typeof 5);
// affiche number
console.log(typeof true);
// affiche boolean
H I ©
U EL
console.log(typeof 5.2);
O
// affiche number
f E LM
console.log(typeof "bonjour");
ch r e
A
// affiche string
©
console.log(typeof ’c’);
// affiche string
var x;
console.log(typeof x);
// affiche undefined

Variables
JavaScript
Une variable déclarée avec le mot-clé var a une visibilité globale

{
var x = 1;
}
H I ©
console.log(x);
UEL
O
LM
// affiche 1
r e f E
ch
©A

Variables
JavaScript
Une variable déclarée avec le mot-clé var a une visibilité globale

{
var x = 1;
}
H I ©
console.log(x);
UEL
O
LM
// affiche 1
r e f E
ch
Remarque ©A
Une variable déclarée dans un bloc { ... } autre que fonction (if,
for...) a une portée globale.

Quelques opérations sur les variables
JavaScript
Addition (qui peut se transformer en concaténation) et conversion
var x = 1;
var y = 3;
var z = ’8’;
var t = "2";
var u = "bonjour";
var v = "3bonjour";
H I ©
var m;
var n = 2.5;
UEL
O
LM
console.log(x + y); // 4
console.log(x + z); // 18
console.log(x + parseInt(z)); // 9
r e f E
console.log(x + t); // 12
ch
©A
console.log(x + y + z); // 48
console.log(z + y + x); // 831
console.log(x + u); // 1bonjour
console.log(x + parseInt(u)); // NaN
console.log(x + v); // 13bonjour
console.log(x + parseInt(v)); // 4
console.log(u + v); // bonjour3bonjour
console.log(x + m); // NaN
console.log(x + n); // 3.5

JavaScript
Autres opérateurs arithmétiques
* : multiplication
H I ©
UEL
- : soustraction
O
/ : division
f E LM
% : reste de A ch r e
la division
©
** : exponentiel

JavaScript
Attention, l’opérateur + pour les chaı̂nes de caractères est différent de tous les
autres opérateurs arithmétiques
var a = "2";
var b = ’3’;
var resultat = a * b;
console.log(resultat);
H I ©
// affiche 6
UEL
O
f E LM
ch r e
©A

JavaScript
Attention, l’opérateur + pour les chaı̂nes de caractères est différent de tous les
autres opérateurs arithmétiques
var a = "2";
var b = ’3’;
H I ©
// affiche 6
UEL
O
f E LM
ch
Cependant ce code génère un NaN r e
var a = "bon";
var b = ’jour’;
©A
// affiche NaN
console.log(b + parseInt(a));
// affiche jourNaN

JavaScript
En JavaScript, une division par 0 ne génère pas d’erreur

a = 2;
b = 0;
H I ©
console.log(a / b);
UEL
O
f E LM
ch r e
©A

JavaScript
En JavaScript, une division par 0 ne génère pas d’erreur

a = 2;
b = 0;
H I ©
console.log(a / b);
UEL
O
f E LM
ch r
Pour convertir une chaı̂ne en entier e
var a = ’4’; ©A
b = 2;
console.log(b + parseInt(a));

JavaScript
Quelques raccourcis
i++; ≡ i = i + 1;
i--; ≡ i = i - 1; H I ©
UEL
i += 2; ≡ i = i + 2; O
f E LM
i -= 3; ≡ i = i - 3;
ch r e
©A
i *= 2; ≡ i = i * 2;
i /= 3; ≡ i = i / 3;
i %= 5; ≡ i = i % 5;

JavaScript
Exemple de post-incrémentation
var i = 2;
var j = i++;
console.log(i); // affiche 3
H I ©
console.log(j); // affiche 2
UEL
O
f E LM
ch r e
©A

JavaScript
Exemple de post-incrémentation
var i = 2;
var j = i++;
H I ©
UEL
O
f E LM
Exemple de pre-incrémentation
ch r e
var i = 2; ©A
var j = ++i;

JavaScript
Pour permuter le contenu de deux variables, on peut utiliser la

décomposition
a = 2;
b = 0;
H I ©
[a, b] = [b, a];
UEL
O
f E LM
ch r e
©A

JavaScript
Pour permuter le contenu de deux variables, on peut utiliser la

décomposition
a = 2;
b = 0;
H I ©
[a, b] = [b, a];
UEL
O
f E LM
ch r e
Pour évaluer une expression arithmétique exprimée sous forme
©A
de chaı̂ne de caractères (EvalError si l’expression est mal
formulée)
var str = "2 + 5 * 3";
console.log(eval(str));
// affiche 17

JavaScript
L’opérateur unaire + peut être utilisé pour convertir en nombre
console.log(typeof (+"3"));
// affiche number
console.log(+true);
// affiche 1
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
L’opérateur unaire + peut être utilisé pour convertir en nombre
console.log(typeof (+"3"));
// affiche number
console.log(+true);
// affiche 1
H I ©
U EL
M O
E L la négation ou la conversion en
L’opérateur unaire - peut être utilisé pour
f
nombre
c h re
console.log(typeof
// affiche ©
A
nombre
(-"-3"));
console.log(-"-3");
// affiche 3
console.log(-true);
// affiche -1

Méthodes utiles pour les chaı̂nes de caractères
JavaScript

length : la longueur de la chaı̂ne
toUpperCase() : pour convertir une chaı̂ne de caractères en
majuscule
H I ©
UEL
O
toLowerCase() : pour convertir une chaı̂ne de caractères en
minuscule
f E LM
ch r e
trim() : pour supprimer les espaces au début et à la fin
©A
substr() : pour extraire une sous-chaı̂ne de caractères
indexOf() : pour retourner la position d’une sous-chaı̂ne dans
une chaı̂ne, -1 sinon.
...

JavaScript
Pour connaı̂tre la longueur d’une chaı̂ne
var str = "bonjour";
console.log(str.length);
// affiche 7
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
Pour connaı̂tre la longueur d’une chaı̂ne
// affiche 7
H I ©
UEL
O
f E LM
Pour supprimer les espaces au début et à la fin de la chaı̂ne
var str = " bon jour ";
ch r e
©A
// affiche 12
var sansEspace = str.trim();

console.log(sansEspace.length);
// affiche 8

JavaScript
Pour extraire une sous-chaı̂ne à partir de l’indice 3 jusqu’à la fin
console.log(str.substr(3));
// affiche jour
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
// affiche jour
H I ©
U EL
On peut aussi préciser le nombre de caractère à extraire
L MO
console.log(str.substr(3,2));
r e f E
// affiche jo
A ch
©

JavaScript
// affiche jour
H I ©
U EL
On peut aussi préciser le nombre de caractère à extraire
L MO
console.log(str.substr(3,2));
r e f E
// affiche jo
A ch
©
Pour extraire les trois derniers caractères, on utilise une valeur négative
console.log(str.substr(-3)); //eq substr(4) avec 4 = length - 3
// affiche our

JavaScript
Ne pas confondre substr() avec substring() qui elle prend

H I ©
comme paramètre l’indice de début et l’indice de fin (non-inclus)
UEL
O
LM
console.log(str.substring(1,3));
r e f E
// affiche on
ch
©A

JavaScript
Pour déterminer l’indice d’une sous chaı̂ne dans une chaı̂ne de

caractère
H I ©
EL
console.log(str.indexOf("jour"));
// affiche 3
O U
f E LM
ch r e
©A

JavaScript
Pour déterminer l’indice d’une sous chaı̂ne dans une chaı̂ne de

caractère
H I ©
EL
console.log(str.indexOf("jour"));
// affiche 3
O U
f E LM
ch r e
© A
S’il n’y a aucune occurrence, elle retourne -1
console.log(str.indexOf("soir"));
// affiche -1

JavaScript
Pour accéder à un caractère d’indice i dans une chaı̂ne de

caractères
// soit directement via l’indice
H I ©
console.log(str[i]);
U EL
M O
f E L
// soit en faisant l’extraction d’une sous chaine de
caractère
c h re
©A
console.log(str.substr(i,1));
// soit avec la méthode d’extraction de caractère

console.log(str.charAt(i));

JavaScript
H I ©
Remarque
UEL
O
LM
Appeler une de ces méthodes à partir d’une variable ayant la valeur
f E
undefined génère une erreur nommée TypeError.
r e
ch
©A

Conditions et boucles if
JavaScript
Exécuter si une condition est vraie

if (condition)
{
...
H I ©
}
UEL
O
f E LM
ch r e
©A

Conditions et boucles if
JavaScript
Exécuter si une condition est vraie

if (condition)
{
...
H I ©
}
UEL
O
f E LM
Exemple
ch r e
var x = 3;
if (x > 0)
©A
{
console.log(x + " est strictement positif");
}

Conditions et boucles if ... else
JavaScript
Exécuter un premier bloc si une condition est vraie, un deuxième sinon (le bloc else
if (condition1) {
...
}
else {
...
H I ©
EL
}
O U
f E LM
ch r e
©A

Conditions et boucles if ... else
JavaScript
Exécuter un premier bloc si une condition est vraie, un deuxième sinon (le bloc else
if (condition1) {
...
}
else {
...
H I ©
EL
}
O U
Exemple
f E LM
ch r e
©A
var x = 3;
if (x > 0)
{
}
else
{
console.log(x + " est négatif ou nul");
}

Conditions et boucles else if
JavaScript
On peut enchaı̂ner les conditions avec else if (et avoir un
troisième bloc voire ... un nième)
if (condition1)
{
...
H I ©
}
UEL
O
LM
else if (condition2)
{
r e f E
...
ch
}
... ©A
else
{
...
}

JavaScript
Exemple
var x = -3;
if (x > 0)
{
H I ©
EL
}
O U
else if (x < 0)
f E LM
{
ch r e
console.log(x + " est strictement négatif");
}
else
©A
{
console.log(x + " est nul");
}

JavaScript
Opérateurs logiques
&& : ET
|| : OU
! : NON
H I ©
ˆ : XOR
UEL
O
f E LM
ch r e
©A

JavaScript
&& : ET
|| : OU
! : NON
H I ©
ˆ : XOR
UEL
O
f E LM
ch r e
©A
Tester plusieurs conditions (en utilisant des opérateurs logiques)
if (condition1 && !condition2 || condition3) {

...
}

JavaScript
&& : ET
|| : OU
! : NON
H I ©
ˆ : XOR
UEL
O
f E LM
ch r e
©A
Tester plusieurs conditions (en utilisant des opérateurs logiques)
if (condition1 && !condition2 || condition3) {

...
}
Pour les conditions, on utilise les opérateurs de comparaison.

JavaScript
Opérateurs de comparaison
== : pour tester l’égalité des valeurs

!= : pour tester l’inégalité des valeurs
H I ©
U
=== : pour tester l’égalité des valeurs et ELtypes
des
M O
E L
!== : pour tester l’inégalité des
f
valeurs ou des types
> : supérieur àch r e
©A
< : inférieur à
>= : supérieur ou égal à
<= : inférieur ou égal à

Conditions et boucles switch
JavaScript
Structure conditionnelle switch : syntaxe
switch (nomVariable) {
case constante-1:
groupe-instructions-1;
break;
H I ©
case constante-2:
UEL
O
LM
groupe-instructions-2;
break;
r e f E
ch
...
case constante-N:
©A
groupe-instructions-N;
break;
default:
groupe-instructions-par-défaut;
}

JavaScript
Remarques
Le switch permet seulement de tester l’égalité

H I ©
UEL
Le break permet de quitter le switch une fois le bloc de case
O
est vérifier
f E LM
ch r e
Il est possible de regrouper plusieurs case
©A
Le bloc default est facultatif, il sera exécuter si la valeur de la
variable ne correspond à aucune constante de case

JavaScript
Structure conditionnelle avec switch
var x = 5;
switch (x) {
case 1:
alert(’un’);
H I ©
break;
UEL
O
LM
case 2:
alert(’deux’);
r e f E
break;
ch
case 3:
alert(’trois’); ©A
break;
default:
alert("autre");
}

JavaScript
Un multi-case pour un seul traitement
var x = 5;
switch (x) {
case 1:
case 2:
H I ©
EL
alert(’un ou deux’);
break;
O U
LM
case 3:
alert(’trois’);
break;
r e f E
ch
©A
case 4:
case 5:
alert(’quatre ou cinq’);
break;
default:
alert("autre");
}

JavaScript
La variable dans switch peut être

H I ©
un nombre UEL
O
un caractère
f E LM
une chaı̂ne de c r e
h ère (contrairement aux C++, C...)
caract
© A

Conditions et boucles Expression ternaire
JavaScript
Considérons l’exemple suivant
var nbr = prompt(’Saisir un nombre’);
if (nbr % 2 == 0) {
alert ("pair);
}
else {
H I ©
EL
alert ("imapir");
}
O U
f E LM
ch r e
©A

JavaScript
if (nbr % 2 == 0) {
alert ("pair);
}
else {
H I ©
EL
alert ("imapir");
}
O U
f E LM
ch r e
Simplifions l’écriture avec l’expression ternaire
©A
nbr % 2 == 0 ? alert("pair") : alert(’impair’);

JavaScript
if (nbr % 2 == 0) {
alert ("pair);
}
else {
H I ©
EL
alert ("imapir");
}
O U
f E LM
ch r e
Simplifions l’écriture avec l’expression ternaire
©A
nbr % 2 == 0 ? alert("pair") : alert(’impair’);
Ou
alert(nbr % 2 == 0 ? "pair" : ’impair’);

Conditions et boucles while
JavaScript
Boucle while : à chaque itération on teste si la condition est

vraie avant d’accéder aux traitements
H I ©
while (condition[s]) {
UEL
...
O
}
f E LM
ch r e
©A

JavaScript
Boucle while : à chaque itération on teste si la condition est

vraie avant d’accéder aux traitements
H I ©
while (condition[s]) {
UEL
...
O
}
f E LM
ch r e
©A
Attention aux boucles infinies, vérifier que la condition d’arrêt sera bien
atteinte après un certain nombre d’itérations.

JavaScript
Exemple
var i = 0;
while (i < 5) {
console.log(i);
i++;
H I ©
}
UEL
O
f E LM
ch r e
©A

JavaScript
Exemple
var i = 0;
while (i < 5) {
console.log(i);
i++;
H I ©
}
UEL
O
f E LM
Le résultat est ch r e
0 ©A
1
2
3
4

Conditions et boucles do ... while
JavaScript
La Boucle do ... while exécute le bloc au moins une fois ensuite

elle vérifie la condition
H I ©
do {
U EL
... O
}
f E LM
while (condition[s]);
ch r e
©A

JavaScript
La Boucle do ... while exécute le bloc au moins une fois ensuite

elle vérifie la condition
H I ©
do {
U EL
... O
}
f E LM
while (condition[s]);
ch r e
©A
Attention aux boucles infinies, vérifier que la condition d’arrêt sera bien
atteinte après un certain nombre d’itérations.

JavaScript
Exemple
var i = 0;
do {
console.log(i);
i++;
H I ©
} while (i < 5);
U EL
O
f E LM
ch r e
©A

JavaScript
Exemple
var i = 0;
do {
console.log(i);
i++;
H I ©
} while (i < 5);
U EL
O
f E LM
Le résultat est ch r e
0 ©A
1
2
3
4

Conditions et boucles for
JavaScript
Boucle for
for (initialisation; condition[s]; incrémentation) {
H I ©
...
UEL
O
LM
}
r e f E
ch
©A

JavaScript
Boucle for
for (initialisation; condition[s]; incrémentation) {
H I ©
...
UEL
O
LM
}
r e f E
ch
©A
Attention aux boucles infinies si vous modifiez la valeur du compteur à
l’intérieur de la boucle.

JavaScript
Exemple
for (var i = 0; i < 5; i++) {
console.log(i);
}
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
Exemple
for (var i = 0; i < 5; i++) {
console.log(i);
}
H I ©
UEL
O
Le résultat est f E LM
ch r e
©A
0
1
2
3
4

JavaScript
Exercice
Écrire un code JavaScript qui permet d’afficher les nombres pairs compris entre 0 et 10.
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
Exercice
H I ©
Première solution
UEL
for (var i = 0; i < 10; i++) {
O
if (i % 2 == 0) {
console.log(i);
f E LM
}
ch r e
©A
}

JavaScript
Exercice
H I ©
Première solution
UEL
for (var i = 0; i < 10; i++) {
O
if (i % 2 == 0) {
console.log(i);
f E LM
}
ch r e
©A
}
Deuxième solution
for (var i = 0; i < 10; i += 2) {

console.log(i);
}

Tableaux
JavaScript
Tableau (array)
H I ©
une variable pouvant avoir simultanément plusieurs valeurs
U EL
O
l’accès à chaque valeur s’effectue via son indice et avec
l’opérateur [] : [ indice ]
f E LM
ch r e
la première valeur (on dit aussi élément) du tableau est d’indice 0.
©A
les valeurs peuvent avoir plusieurs types différents

Tableaux
JavaScript
Déclaration
var tab = new Array(value1, value2,... valueN);
H I ©
UEL
O
f E LM
ch r e
©A

Tableaux
JavaScript
Déclaration
H I ©
EL
Le raccourci
M OU
f E L valueN];
var tab = [value1, value2,...
chr e
© A

Tableaux
JavaScript
Déclaration
H I ©
EL
Le raccourci
M OU
f E L valueN];
var tab = [value1, value2,...
chr e
© A
Accès à l’élément du tableau d’indice i
tab[i]

Tableaux
JavaScript
Exemple
var tab = [2, 3, 5];
H I ©
UEL
O
f E LM
ch r e
©A

Tableaux
JavaScript
Exemple
var tab = [2, 3, 5];
I
Pour connaı̂tre la taille du tableau (nombre d’élément)
H ©
console.log(tab.length); UEL
O
f E LM
ch r e
©A

Tableaux
JavaScript
Exemple
var tab = [2, 3, 5];
I ©
H
console.log(tab.length); U EL
O
f E LM
r e
ch élément du tableau
Pour afficher le premier
tab[0] © A

Tableaux
JavaScript
Exemple
var tab = [2, 3, 5];
I ©
H
console.log(tab.length); U EL
O
f E LM
r e
ch élément du tableau
Pour afficher le premier
tab[0] © A
Pour afficher le dernier élément du tableau

tab[tab.length - 1]
Tableaux
JavaScript
Pour ajouter une nouvelle valeur (par exemple 7) au tableau
H I ©
EL
tab[tab.length] = 7;
O U
f E LM
ch r e
©A

Tableaux
JavaScript
Pour ajouter une nouvelle valeur (par exemple 7) au tableau
H I ©
EL
tab[tab.length] = 7;
O U
f E LM
Ou tout simplement
ch r e
tab.push(7);
©A

Tableaux
Pour afficher un tableau

console.log(tab);
H I ©
UEL
O
f E LM
ch r e
©A

Tableaux

console.log(tab);
Pour parcourir et afficher un tableau

for (var i = 0; i < tab.length; i++) {
}
console.log(tab[i]);
H I ©
UEL
O
f E LM
ch r e
©A

Tableaux

console.log(tab);

}
H I ©
UEL
O
E LM
On peut aussi utiliser la version simplifiée de for
f
for(var elt of tab) {
ch r e
©A
console.log(elt);
}

Tableaux

console.log(tab);

}
H I ©
UEL
O
E LM
On peut aussi utiliser la version simplifiée de for
f
for(var elt of tab) {
ch r e
©A
console.log(elt);
}
Et pour récupérer l’indice

for (const [index, value] of tab.entries()) {
console.log(index, value);
}

Tableaux
JavaScript
Opérations sur les tableaux
push() : ajoute un élément passé en paramètre au tableau
pop() : supprime le dernier élément du tableau
shift() : supprime le premier élément du tableau

H I ©
U EL
indexOf() : retourne la position de l’élément, passé en paramètre, dans le tableau, -1
O
LM
sinon.
f E
reverse() : inverse l’ordre des éléments du tableau
r e
ch
©A
sort() : trie un tableau
splice() : permet d’extraire, ajouter ou supprimer un ou plusieurs éléments (selon les

paramètres, voir slide suivante)
includes() : retourne true si la valeur passée en paramètre est dans un tableau,

false sinon.
...

Tableaux
JavaScript
Utilisons splice pour supprimer un seul élément à partir de la position

2
var sports = [ "foot", "tennis", "basket", "volley" ];
H I ©
EL
tab = sports.splice(2, 1);
O U
LM
for (var elt of sports) {
console.log(elt);
r e f E
ch
}
©A
// affiche foot, tennis, volley
console.log(tab);
// affiche basket

Tableaux
JavaScript
Utilisons splice pour ajouter les deux sports rugby et natation à la

position 2
tab = sports.splice(2, 0, "rugby", "natation");
H I ©
UEL
console.log(elt); O
}
f E LM
r e
// affiche foot, tennis, rugby, natation, basket, volley
ch
console.log(tab);
// n’affiche rien
©A

Tableaux
JavaScript
Utilisons splice pour ajouter les deux sports rugby et natation à la

position 2
H I ©
U EL
console.log(elt); O
}
f E LM
r e
// affiche foot, tennis, rugby, natation, basket, volley
ch
console.log(tab);
// n’affiche rien
©A
Aucun élément supprimé car le deuxième paramètre = 0

Tableaux
JavaScript
splice peut être utilisée pour ajouter et supprimer à la fois

H I ©
EL
console.log(elt);
O U
LM
}
f E
// affiche foot, tennis, rugby, natation, volley
r e
A ch
console.log(tab);
// affiche©basket

Tableaux
JavaScript
splice peut être utilisée pour ajouter et supprimer à la fois

H I ©
EL
console.log(elt);
O U
LM
}
f E
// affiche foot, tennis, rugby, natation, volley
r e
A ch
console.log(tab);
// affiche©basket
Un seul élément supprimé car le deuxième paramètre = 1.

Tableaux
JavaScript
À ne pas confondre avec slice qui permet d’extraire un

sous-tableau sans modifier le tableau d’origine
var sports = [ "foot", "tennis", "basket", "volley"
];
H I ©
tab = sports.slice(1, 3);
U EL
for(var elt of sports) {L M O
r e f E
ch
console.log(elt);
} A
©foot, tennis, basket, volley
// affiche
console.log(tab);
// affiche tennis, basket

Tableaux
JavaScript
Exercice
H I ©
Écrire un code JavaScript qui
UEL
O
LM
1 permet à l’utilisateur de saisir un sport
2
r e f E
supprime le sport saisi s’il est déjà dans le tableau sports
ch
3
©A
ajoute le sport saisi s’il n’est pas dans le tableau sports

Tableaux
JavaScript
Il est possible de préciser la taille d’un tableau et d’initialiser ses

valeurs avec la méthode fill
var tab = new Array(3).fill(0);
console.log(tab);
H I ©
// affiche [ 0, 0, 0 ]
UEL
O
f E LM
ch r e
©A

Tableaux
JavaScript
Il est possible de préciser la taille d’un tableau et d’initialiser ses

valeurs avec la méthode fill
var tab = new Array(3).fill(0);
console.log(tab);
H I ©
// affiche [ 0, 0, 0 ]
UEL
O
f E LM
ch r e
On peut aussi utiliser fill pour modifier les valeurs d’une partie
du tableau
© A
var tab = [0, 1, 2, 3, 4, 5, 6, 7, 8];
tab.fill(9, 2, 5);
console.log(tab);
// affiche [ 0, 1, 9, 9, 9, 5, 6, 7, 8 ]

Tableaux
JavaScript
Autres opérations sur les tableaux (ES5)

forEach() : pour parcourir un tableau
H I ©
EL
map() : pour appliquer une fonction sur les éléments d’un tableau
O U
LM
filter() : pour filtrer les éléments d’un tableau selon un critère
r e f E
défini sous forme d’une fonction anonyme ou fléchée
A chréduire tous les éléments d’un tableau en un

reduce() : pour
© une règle définie dans une fonction anonyme ou
seul selon
fléchée
...

Tableaux
JavaScript
Exemple avec map, filter, forEach

var tab = [2, 3, 5];
tab.map(x => x + 3)
.filter(x => x > 5)
H I ©
.forEach(
UEL
function(a,b){ O
console.log(a-3);
f E LM
}
ch r e
);
// affiche 3 et 5 ©A

Tableaux
JavaScript

var tab = [2, 3, 5];
tab.map(x => x + 3)
.filter(x => x > 5)
H I ©
.forEach(
UEL
function(a,b){ O
console.log(a-3);
f E LM
}
ch r e
);
On peut permuter map et filter selon le besoin.

Tableaux
JavaScript

var tab = [2, 3, 5];
tab.map(x => x + 3)
.filter(x => x > 5)
H I ©
.forEach(
UEL
function(a,b){ O
console.log(a-3);
f E LM
}
ch r e
);
On peut permuter map et filter selon le besoin.
On peut aussi remplacer les fonctions fléchée par des fonctions
anonymes

Tableaux
JavaScript
Exemple avec reduce : permet de réduire les éléments d’un

tableau en une seule valeur
var tab =[2, 3, 5];
H I ©
var somme = tab.map(x => x + 3)
UEL
.filter(x => x > 5)
O
.reduce(function(sum, elem){
f E LM
return sum + elem;
ch r e
©A
});
console.log(somme);
// affiche 14

Fonctions
JavaScript
Déclarer une fonction
function nomFonction ([les arguments]){
les instructions de la fonction
}
H I ©
UEL
O
f E LM
ch r e
©A

Fonctions
JavaScript
}
H I ©
UEL
O
Exemple
f E LM
function somme (a, b) {
ch r e
©A
return a + b;
}

Fonctions
JavaScript
}
H I ©
UEL
O
Exemple
f E LM
function somme (a, b) {
ch r e
©A
return a + b;
}
Appeler une fonction

var resultat = somme (1, 3);

Fonctions
JavaScript
Déclarer une fonction anonyme et l’affecter a‘ une variable
var nomVariable = function ([les arguments]) {
}
H I ©
UEL
O
f E LM
ch r e
©A

Fonctions
JavaScript
}
H I ©
UEL
O
Exemple
f E LM
var somme2 = function (a, b){
ch r e
©A
return a + b;
}

Fonctions
JavaScript
}
H I ©
UEL
O
Exemple
f E LM
var somme2 = function (a, b){
ch r e
©A
return a + b;
}
Appeler une fonction anonyme

var resultat2 = somme2 (1, 3);

Fonctions
JavaScript
Déclarer une fonction en utilisant un constructeur de fonction

var nomFunction = new Function (["param1", ... , "
paramN",] "instructions");
H I ©
UEL
O
f E LM
ch r e
©A

Fonctions
JavaScript

H I ©
UEL
Exemple O
f E LM
; ch r e
var somme4 = new Function ("a", "b", "return a + b")
©A

Fonctions
JavaScript

H I ©
UEL
Exemple O
f E LM
; ch r e
var somme4 = new Function ("a", "b", "return a + b")
©A
Appeler une fonction anonyme
var resultat4 = somme4 (1, 3);

Fonctions
JavaScript
Et si on appelle la fonction somme sans passer de paramètres

console.log(somme());
H I ©
UEL
O
f E LM
ch r e
©A

Fonctions
JavaScript

H I ©
Le resultat
UEL
O
NaN
f E LM
ch r e
©A

Fonctions
JavaScript

H I ©
Le resultat
UEL
O
NaN
f E LM
ch r e
©A
On peut affecter une valeur par défaut aux paramètres
function somme (a=0, b=0) {
return a + b;
}

Fonctions
JavaScript
Et si on veut que la fonction somme retourne la somme quel que
soit le nombre de paramètres
function somme () {
result = 0;
for (var i = 0; i < arguments.length ; i++) {
H I ©
result += arguments[i];
UEL
}
O
return result;
f E LM
}
ch r e
©A

Fonctions
JavaScript
Et si on veut que la fonction somme retourne la somme quel que
soit le nombre de paramètres
function somme () {
result = 0;
for (var i = 0; i < arguments.length ; i++) {
H I ©
result += arguments[i];
UEL
}
O
return result;
f E LM
}
ch r e
©A
Tous ces appels sont corrects
console.log(somme(2, 3, 5));
console.log(somme(2, 3));
console.log(somme(2, 3, 5, 7));
console.log(somme(2));
Fonctions Fonction de retour (callback)
JavaScript
fonction appelée comme un paramètre d’une deuxième fonction

très utilisée en JavaScript (jQuery et nodeJS) avec les fonctions
asynchrones
H I ©
U EL
O
f E LM
ch r e
©A

JavaScript
fonction appelée comme un paramètre d’une deuxième fonction

très utilisée en JavaScript (jQuery et nodeJS) avec les fonctions
asynchrones
H I ©
U EL
O
f E LM
r e
Considérons les deux fonctions suivantes
ch
function
© A b) {
somme(a,
return a + b;
}
function produit(a, b) {
return a * b;
}

JavaScript
Utilisons les fonctions précédentes comme callback d’une

fonction operation()
H I ©
EL
function operation(a, b, fonction) {
console.log (fonction(a, b));
O U
}
f E LM
r e
chsomme);opération
// appeler la fonction
operation© A5,
(3,
// affiche 8

JavaScript
Exercice
H I
Modifier la fonction opération pour qu’elle puisse accepter deux ©
U EL
fonctions callback ensuite retourner le résultat de la composition
O
des deux.
f E LM
Par exemple :
ch r e
©A
operation (2, 3 , 6, somme, produit) retourne 30 = (2
+ 3) * 6

Fonctions Quelques fonctions connues utilisant le callback
JavaScript
La fonction setTimeout accepte deux paramètres
le premier : une fonction callback
le deuxième : une durée (en millisecondes) qui précède l’exécution de la fonction callback
H I ©
U EL
O
f E LM
ch r e
©A

JavaScript
H I ©
EL
Déclarons une fonction qui affiche bonjour
function direBonjour() {
O U
}
alert("Bonjour");
f E LM
ch r e
©A

JavaScript
H I ©
EL
O U
}
alert("Bonjour");
f E LM
ch r e
©A
Utilisons cette fonction comme callback dans setTimeout
function direBonjourApresXSecondes(x) {
setTimeout(direBonjour, x * 1000);
}

JavaScript
H I ©
EL
O U
}
alert("Bonjour");
f E LM
ch r e
©A
Utilisons cette fonction comme callback dans setTimeout
setTimeout(direBonjour, x * 1000);
}
Appelons direBonjourApresXSecondes et bonjour sera affiché après

direBonjourApresXSecondes(5);

JavaScript
Il est aussi possible d’utiliser une fonction anonyme

setTimeout(function() {
H I ©
alert("Bonjour");
U EL
O
LM
},
x * 1000);
r e f E
}
ch
©A

JavaScript
Il est aussi possible d’utiliser une fonction anonyme

setTimeout(function() {
H I ©
alert("Bonjour");
U EL
O
LM
},
x * 1000);
r e f E
}
ch
©A
La fonction setTimeout() ne permet pas de répéter l’affichage

toutes les x secondes.

JavaScript
Il est aussi d’annuler l’exécution de la fonction callback de
setTimeout avec clearTimeout si cette dernière est appelée
avant la fin de la durée de setTimeout
var timeout;
H I ©
timeout = setTimeout(function(){
U EL
O
LM
alert("Bonjour");
},
r e f E
x * 1000);
ch
}
©A
clearTimeout(timeout);
// Bonjour ne sera jamais affiché

JavaScript
Pour afficher un message toutes les X secondes, on peut utiliser

setInterval qui a la même signature que setTimeout
function direBonjourToutesXSecondes(x) {
H I ©
EL
setInterval(direBonjour, x * 1000);
}
O U
L M
f
function direBonjour()
r e E{
ch
alert("Bonjour");
A
} ©
direBonjourToutesXSecondes(5);

JavaScript
Pour afficher un message toutes les X secondes, on peut utiliser

setInterval qui a la même signature que setTimeout
function direBonjourToutesXSecondes(x) {
H I ©
EL
setInterval(direBonjour, x * 1000);
}
O U
L M
f
function direBonjour()
r e E{
ch
alert("Bonjour");
A
} ©
direBonjourToutesXSecondes(5);
Comme clearTimeout(), il existe une fonction clearInterval().

JavaScript
H I ©
Remarque
U EL
O
LM
Si la fonction callback nécessite de paramètres, alors il est possible de
f E
les préciser après la durée dans setInterval et setTimeout.
r e
ch
©A

Fonctions Closure d’une fonction
JavaScript
var i = 0;
function f() {
i++;
}
H I ©
f();
U EL
O
function g() {
f E LM
var j = 5;
ch r e
©A
}
g();
console.log(j); // génère une erreur

JavaScript
var i = 0;
function f() {
i++;
}
H I ©
f();
U EL
O
function g() {
f E LM
var j = 5;
ch r e
©A
}
g();
console.log(j); // génère une erreur
Remarque
Une variable déclarée dans une fonction avec le mot-clé var n’a pas
une portée globale. Donc, elle est locale.
JavaScript
La closure : déclarer une variable locale dans une fonction qui
existe en globale
var i = 0;
function f() {
var i = 5;
H I ©
i++;
U EL
console.log(i);
O
}
f E LM
f(); // affiche 6
ch r e
©A

JavaScript
La closure : déclarer une variable locale dans une fonction qui
existe en globale
var i = 0;
function f() {
var i = 5;
H I ©
i++;
U EL
console.log(i);
O
}
f E LM
f(); // affiche 6
ch r e
©A
Remarque
La variable i affichée à la dernière instruction est la variable déclarée
à la première ligne.
Objets
JavaScript
Comment sauvegarder toutes ces donnees dans une seule variable ?
nom wick
prénom john
H I ©
..
.
..
.
UEL
O
f E LM
ch r e
©A

Objets
JavaScript
Comment sauvegarder toutes ces donnees dans une seule variable ?
nom wick
prénom john
H I ©
..
.
..
.
UEL
O
f E LM
ch r e
Comment faire ? ©A
Les tableaux indexés ne le permettent pas
Les tableaux associatifs ou les objets

Objets
JavaScript
Objet ?
H I ©
EL
un ensemble de
M OU
attributs (variables, champs)L
re f E : clé + valeur[s]
c h
méthodes : fonctions
©A

Objets Attributs
JavaScript
Création d’un objet

var obj = {
nom: "wick",
H I ©
prenom: "john"
UEL
}; O
f E LM
ch r e
©A

Objets Attributs
JavaScript
Création d’un objet

var obj = {
nom: "wick",
H I ©
prenom: "john"
UEL
}; O
f E LM
ch r e
©A
Accès à un attribut de l’objet
console.log(obj.nom);
console.log(obj["prenom"]);

Objets Attributs
JavaScript
Un objet est non-itérable avec for ... of
for(var elt of obj)
console.log(elt);
H I ©
UEL
O
f E LM
ch r e
©A

Objets Attributs
JavaScript
for(var elt of obj)
console.log(elt);
H I ©
Il est itérable avec for ... in
UEL
O
for(var key in obj)
f E LM
r e
console.log(key + " : " + obj[key]);
ch
©A

Objets Attributs
JavaScript
for(var elt of obj)
console.log(elt);
H I ©
Il est itérable avec for ... in
UEL
O
for(var key in obj)
f E LM
r e
ch
©A
Un objet peut aussi être créé ainsi
var obj = new Object();
obj.nom = "wick";
obj.prenom = "john";

Objets Attributs
JavaScript
Copier un objet
var obj2 = obj;
H I ©
UEL
O
f E LM
ch r e
©A

Objets Attributs
JavaScript
Copier un objet
var obj2 = obj;
H I ©
Modifier un ⇒ modifier l’autre
UEL
O
obj2.nom = "travolta";
f E LM
// affiche travolta ch r e
©A

Objets Attributs
JavaScript
Copier un objet
var obj2 = obj;
H I ©
Modifier un ⇒ modifier l’autre
UEL
O
obj2.nom = "travolta";
f E LM
// affiche travolta ch r e
©A
Ajouter un nouvel attribut à un objet existant
obj2.age = 35;

Objets Attributs
JavaScript
Pour cloner un objet
function clone(obj){
var obj2 = {};
for (key in obj)
obj2[key] = obj[key];
H I ©
EL
return obj2;
OU
}
M
L "john"};
f E
var obj = {nom: "wick", prenom:
e
chr
var obj2 = clone(obj);
A
obj2.nom = "abruzzi";
©
console.log(obj);
// affiche wick
console.log(obj2);
// affiche abruzzi

Objets Attributs
JavaScript
Ou tout simplement
H I ©
EL
var obj2 = Object.assign({}, obj);
console.log(obj);
O U
console.log(obj2);
f E LM
ch r e
©A

Objets Attributs
JavaScript
Ou tout simplement
H I ©
EL
var obj2 = Object.assign({}, obj);
console.log(obj);
O U
console.log(obj2);
f E LM
ch r e
©A
La méthode Object.create() permet de copier un objet.

Objets Attributs
JavaScript
Pour récupérer l’ensemble des valeurs d’un objet dans un tableau

var obj = {nom: "wick", prenom: "john"};
H I ©
var values = Object.values(obj);
UEL
O
for (value of values)
f E LM
console.log(value);
ch r e
©A
// affiche wick ensuite john

Objets Attributs
JavaScript
Pour récupérer l’ensemble des clés d’un objet dans un tableau

var keys = Object.keys(obj);
H I ©
UEL
for (key of keys) O
E LM
f
r e
c:hwick
// prenom©
A
// affiche nom
: john

Objets Attributs
JavaScript
Considérons toujours l’objet obj
const obj = { nom: ’wick’, prenom: ’john’ };
H I ©
UEL
O
f E LM
ch r e
©A

Objets Attributs
JavaScript
I ©
Déclarons une variable name qui reçoit sa valeur d’un attribut d’obj
H
var name = obj.nom;
UEL
O
f E LM
ch r e
©A

Objets Attributs
JavaScript
I ©
Déclarons une variable name qui reçoit sa valeur d’un attribut d’obj
H
var name = obj.nom;
UEL
O
f E LM
ch r e
Modifions la valeur d’un n’affecte pas l’autre
name = "travolta";
©A
// affiche wick
obj.nom = "abruzzi";
console.log(name);
// affiche travolta

Objets Attributs
JavaScript
Pour transformer un objet en chaı̂ne de caractère

var perso = { nom: ’wick’, prenom: ’john’ };
var str = JSON.stringify(perso);
H I ©
EL
console.log(str);
// affiche {"nom":"wick","prenom":"john"}
O U
f E LM
ch r e
©A

Objets Attributs
JavaScript
Pour transformer un objet en chaı̂ne de caractère

var str = JSON.stringify(perso);
H I ©
EL
console.log(str);
// affiche {"nom":"wick","prenom":"john"}
O U
f E LM
r e
chchaı̂ne de caractère en objet
A
Pour transformer une
©
var p = JSON.parse(str);
console.log(p.nom + " " + p.prenom);
// affiche wick john

Objets Méthodes
JavaScript
Un objet avec attributs et méthodes

var obj = {
nom: "wick",
prenom: "john",
H I ©
direBonjour: function (){
UEL
console.log("bonjour");
O
}
f E LM
};
ch r e
©A

Objets Méthodes
JavaScript

var obj = {
nom: "wick",
prenom: "john",
H I ©
UEL
O
}
f E LM
};
ch r e
©A
Pour appeler la méthode direBonjour
obj.direBonjour();

Objets Méthodes
JavaScript

var obj = {
nom: "wick",
prenom: "john",
H I ©
UEL
O
}
f E LM
};
ch r e
©A
Pour appeler la méthode direBonjour
obj.direBonjour();
Comment afficher le nom dans la méthode ?

Objets Méthodes
JavaScript
Ceci génère une erreur
var obj = {
nom: "wick",
prenom: "john",
console.log("bonjour " + nom);
H I ©
EL
}
};
O U
LM
obj.direBonjour();
r e f E
ch
©A

Objets Méthodes
JavaScript
Ceci génère une erreur
var obj = {
nom: "wick",
prenom: "john",
console.log("bonjour " + nom);
H I ©
EL
}
};
O U
LM
obj.direBonjour();
r
Il faut utiliser l’opérateur this e f E
ch
var obj = {
nom: "wick", ©A
prenom: "john",
console.log("bonjour " + this.nom);
}
};
obj.direBonjour();
Objets Constructeurs
JavaScript
Constructeurs ?
Besoin d’un moule pour créer des objets (comme les classes en
H I ©
Java, C#, PHP...)
U EL
O
LM
Tous les objets JS sont de type Object
r e f E
Il est possible de créer ou de cloner un objet a‘ partir d’un autre en
A ch
utilisant des méthodes d’Object
©
Et si on veut créer un modèle d’objet (comme la classe), on peut
utiliser les constructeurs

JavaScript
Déclarer un constructeur d’objet
var Personne = function(nom,prenom){
this.nom = nom;
this.prenom = prenom;
}
H I ©
U EL
O
f E LM
ch r e
©A

JavaScript
Déclarer un constructeur d’objet
this.nom = nom;
}
H I ©
U EL
O
f E LM
Explication
ch r e
©A
Un constructeur d’objet permettant d’initialiser la valeur de deux
attributs nom et prenom
L’appel de ce constructeur avec l’opérateur new permet de créer
plusieurs objets ayant tous les attributs nom et prenom
C’est comme une classe dans un LOO à classes

JavaScript
Créer un objet en utilisant l’opérateur new

perso = new Personne("wick","john");
H I ©
U EL
O
f E LM
ch r e
©A

JavaScript

H I ©
U EL
Afficher les valeurs d’un objet O
console.log(perso);
f E LM
ch r e
©A

JavaScript

H I ©
U EL
Afficher les valeurs d’un objet O
console.log(perso);
f E LM
ch r e
©A
Pour vérifier qu’il s’agit bien d’un objet
console.log(typeof perso);

JavaScript
Déclarer un constructeur contenant une méthode

this.nom = nom;
H I ©
this.direBonjour = function (){
U EL
O
}
f E LM
}
ch r e
©A

JavaScript
Déclarer un constructeur contenant une méthode

this.nom = nom;
H I ©
this.direBonjour = function (){
U EL
O
}
f E LM
}
ch r e
©A
Pour appeler cette méthode
var perso = new Personne("wick","john");
perso.direBonjour();

Objets Prototypes
JavaScript
Une fois le constructeur déclaré, impossible de lui ajouter de

nouvel attribut de cette manière
H I ©
Personne.age = 0;
UEL
O
f E LM
ch r e
©A

Objets Prototypes
JavaScript
Une fois le constructeur déclaré, impossible de lui ajouter de

nouvel attribut de cette manière
H I ©
Personne.age = 0;
UEL
O
f E LM
ch r e
Pour cela, il faut utiliser le prototype
©A
Personne.prototype.age = 0;

Objets Prototypes
JavaScript
Pareillement pour les méthodes
Personne.prototype.getAge = function(){
return this.age;
}
H I ©
EL
Personne.prototype.setAge = function(age){
U
this.age = age;
L MO
}
r e f E
A ch
©

Objets Prototypes
JavaScript
return this.age;
}
H I ©
EL
U
this.age = age;
L MO
}
r e f E
A ch ajoutées
Appeler les méthodes
©
perso.setAge(45);
console.log(perso.getAge());

Objets Prototypes
JavaScript
return this.age;
}
H I ©
EL
U
this.age = age;
L MO
}
r e f E
A ch ajoutées
Appeler les méthodes
©
perso.setAge(45);
console.log(perso.getAge());
Remarque
Ne jamais modifier le prototype d’un objet prédéfini.
Objets et méthodes prédéfinis
JavaScript
Objets prédéfinis
H I ©
Math : contenant de méthodes permettantE
U Lréaliser des
de
MO
opérations mathématiques sur les nombres
L
e f E des dates
Date : permet de manipuler
r
A ch
...
©

JavaScript
Exemple de méthodes de l’objet Math

Math.round(2.1); // retourne 2
Math.round(2.9); // retourne 3
H I ©
Math.pow(2, 3); // retourne 8
UEL
Math.sqrt(4); // retourne 2
O
Math.abs(-2); // retourne 2
f E LM
r e
Math.min(0, 1, 4, 2, -4, -5); // retourne -5
ch
©A
Math.max(0, 1, 4, 2, -4, -5); // retourne 4
Math.random(); // retourne un nombre aléatoire
Math.floor(Math.random() * 10);
// retourne un entier compris entre 0 et 9

JavaScript
Créer et afficher un objet date
var date = new Date();
console.log(date);
// affiche la date complète du jour
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
console.log(date);
H I ©
ELètre (les mois sont
Créer une date à partir de valeurs passées en param
U
codés de 0 à 11)
L MO
console.log(date); ref
E
var date = new Date(1985,7,30,5,50,0,0);
// affiche Fri A ch30 1985 05:50:00 GMT+0200

Aug
©

JavaScript
console.log(date);
H I ©
ELètre (les mois sont
Créer une date à partir de valeurs passées en param
U
codés de 0 à 11)
L MO
console.log(date); ref
E
var date = new Date(1985,7,30,5,50,0,0);
// affiche Fri A ch30 1985 05:50:00 GMT+0200

Aug
©
Créer une date à partir d’un nombre de millisecondes
var date = new Date(100000000000);
console.log(date);
// affiche Sat Mar 03 1973 10:46:40 GMT+0100
JavaScript
Exemple de méthodes pour les dates
getFullYear() : retourne l’annee
getMonth() : retourne le mois [0-11]
getDate() : retourne le jour [1-31]

H I ©
EL
getHours() : retourne l’heure [0-23]
M OU
f E L [0-59]
getMinutes() : retourne les minutes
getSeconds() : c
e
hr les secondes [0-59]
© A retourne
getMilliseconds() : retourne les millisecondes [0-999]
getTime() : retourne le nombre de millisecondes depuis le 1 Janvier 1970

(Avec ES5, on peut utiliser Date.now())

JavaScript
Exemple de méthodes pour les dates
getFullYear() : retourne l’annee
getMonth() : retourne le mois [0-11]
getDate() : retourne le jour [1-31]

H I ©
EL
getHours() : retourne l’heure [0-23]
M OU
f E L [0-59]
getMinutes() : retourne les minutes
getSeconds() : c
e
hr les secondes [0-59]
© A retourne
getMilliseconds() : retourne les millisecondes [0-999]
getTime() : retourne le nombre de millisecondes depuis le 1 Janvier 1970

(Avec ES5, on peut utiliser Date.now())
On peut aussi modifier les attributs de l’objet Date en utilisant les set.
Opérateurs
JavaScript
Quelques opérateurs
typeof : pour obtenir le type d’une variable
new : pour créer un objet en utilisant un constructeur
H I ©
this : pour désigner l’objet courant
UEL
O
f E LM
ch r e
©A

Opérateurs
JavaScript
Quelques opérateurs
typeof : pour obtenir le type d’une variable
new : pour créer un objet en utilisant un constructeur
H I ©
this : pour désigner l’objet courant
UEL
O
f E LM
Autres opérateurs
ch r e
in ©A
delete
instanceof
...

Opérateurs L’opérateur in
JavaScript
L’opérateur in
H I ©
Il permet de tester si
U EL
O
f E LM
un indice est dans le tableau (inférieur à la taille de ce dernier)
r e
une méthode appartient à un objet
ch
... ©A

JavaScript
Exemple avec un tableau
var tab = [2,3,5];
if (2 in tab)
console.log("oui");
// affiche oui
H I ©
U EL
O
f E LM
ch r e
©A

JavaScript
var tab = [2,3,5];
if (2 in tab)
console.log("oui");
// affiche oui
H I ©
Exemple avec un objet de type chaı̂ne de caractère EL
var str = new String("bonjour");
M OU
console.log("oui"); ef
if ("length" in str)
E L
// affiche oui
A chr
©

JavaScript
var tab = [2,3,5];
if (2 in tab)
console.log("oui");
// affiche oui
H I ©
Exemple avec un objet de type chaı̂ne de caractère EL
var str = new String("bonjour");
M OU
console.log("oui"); ef
if ("length" in str)
E L
// affiche oui
A chr
©
Exemple avec un autre type d’objet
if ("nom" in perso)
console.log("oui");
// affiche oui

Opérateurs L’opérateur delete
JavaScript
L’opérateur delete
Il permet de supprimer
H I ©
U EL
une variables non déclarée explicitement (avec var)
O
un attribut d’objet
f E LM
ch r e
un élément de tableau
©A
retourne true si la suppression se termine correctement, false
sinon.

JavaScript
Exemple avec une variable de type object
perso = { nom: ’wick’, prenom: ’john’ };
console.log(perso);
// affiche { nom: ’wick’, prenom: ’john’ }
delete perso.prenom ;
console.log(perso);
H I ©
EL
// affiche { nom: ’wick’ }
O U
f E LM
ch r e
©A

JavaScript
console.log(perso);
console.log(perso);
H I ©
EL
O U
f E LM
Ceci génère une erreur car l’objet a été supprimé
r e
ch
©A
delete perso;
console.log(perso);

JavaScript
console.log(perso);
console.log(perso);
H I ©
EL
O U
f E LM
Ceci génère une erreur car l’objet a été supprimé
r e
ch
©A
delete perso;
console.log(perso);
Une variable déclarée avec var ne sera pas supprimée

delete perso;
console.log(perso);

Opérateurs L’opérateur instanceof
JavaScript
retourne true si l’objet donné est du type spécifié, false sinon.
H I ©
U EL
O
f E LM
ch r e
©A

Opérateurs L’opérateur instanceof
JavaScript
retourne true si l’objet donné est du type spécifié, false sinon.
H I ©
U EL
O
Exemple
f E LM
ch r
var jour = new Date(2019, 06, 06); e
©A
if (jour instanceof Date) {
console.log("oui");
}
// affiche oui

Constantes
JavaScript
Une constante
un élément qui ne peut changer de valeur
H I ©
UEL
O
f E LM
ch r e
©A

Constantes
JavaScript
Une constante
Pour déclarer une constante

H I ©
UEL
il faut utiliser le mot-clé const
O
f E LM
ch r e
©A

Constantes
JavaScript
Une constante

H I ©
UEL
O
f E LM
Déclaration d’une constante
ch r e
const PI = 3.1415; ©A

Constantes
JavaScript
Une constante

H I ©
UEL
O
f E LM
Déclaration d’une constante
ch r e
const PI = 3.1415; ©A
L’instruction suivante lève une exception (Uncaught TypeError: Assignment
to constant variable)
PI = 5;

Constantes
JavaScript
Considérons l’objet suivant déclaré avec le mot-clé const
const obj = {
nom: "wick",
prenom: "john"
};
H I ©
U EL
O
f E LM
ch r e
©A

Constantes
JavaScript
const obj = {
nom: "wick",
prenom: "john"
};
H I ©
EL
L’instruction suivante lève une exception (Uncaught TypeError: Assignment to
U
constant variable)
O
obj = {};
f E LM
ch r e
©A

Constantes
JavaScript
const obj = {
nom: "wick",
prenom: "john"
};
H I ©
EL
L’instruction suivante lève une exception (Uncaught TypeError: Assignment to
U
constant variable)
O
obj = {};
f E LM
ch r e
©A
Cependant, l’instruction suivante est correcte et ne lève donc pas d’exception
obj.nom ="travolta";
obj[’prenom’] = "denzel";
obj.age = 50;
console.log(obj);
// affiche {nom: "travolta", prenom: "denzel", age: 50}

Constantes
JavaScript
Idem pour les tableaux
const tableau = [2, 3, 8];
H I ©
UEL
O
f E LM
ch r e
©A

Constantes
JavaScript
L’instruction suivante lève une exception (Uncaught

TypeError: Assignment to constant variable)
H I ©
tableau = []; UEL
O
f E LM
ch r e
©A

Constantes
JavaScript
L’instruction suivante lève une exception (Uncaught

TypeError: Assignment to constant variable)
H I ©
tableau = []; UEL
O
f E LM
r e
Cependant, l’instruction suivante est correcte et ne lève donc pas
ch
d’exception
© A
tableau[2] = 1;
tableau[0] = 9;
console.log(tableau);
// affiche [9, 3, 1]

Exceptions
JavaScript
Considérons la fonction suivante
function produit (a, b) {
return a * b;
}
H I ©
UEL
O
f E LM
ch r e
©A

Exceptions
JavaScript
return a * b;
}
H I ©
UEL
MO
Appeler la fonction avec des nombres donne le résultat suivant
L
r e f
console.log(produit (2, E3));
// affiche 6
A ch
©

Exceptions
JavaScript
return a * b;
}
H I ©
UEL
MO
Appeler la fonction avec des nombres donne le résultat suivant
L
r e f
console.log(produit (2, E3));
// affiche 6
A ch
©
Appeler la fonction avec un nombre et une chaı̂ne de caractère
donne le résultat suivant
console.log(produit (2, "a"));
// affiche NaN
Exceptions
JavaScript
On peut lancer une exception si un des paramètres n’est pas de type number
if (isNaN (a) || isNaN (b))
throw "Les paramètres doivent être de type number";
return a * b;
}
H I ©
UEL
O
f E LM
ch r e
©A

Exceptions
JavaScript
On peut lancer une exception si un des paramètres n’est pas de type number
if (isNaN (a) || isNaN (b))
throw "Les paramètres doivent être de type number";
return a * b;
}
H I ©
EL
M OU
f E
L’appel de la fonction doit être entourLé par un bloc try ... catch pour
h r e
capturer et traiter l’éventuelle
c
exception lancée
try {
©A
console.log(produit (2, "a"));
}
catch(e) {
console.error(e);
}
console.error() permet d’afficher dans la console une erreur en rouge.

Exceptions
JavaScript
En exécutant le code précédent, le résultat est
H I ©
Les paramètres doivent être de type number
UEL
O
f E LM
ch r e
©A

Exceptions
JavaScript
En exécutant le code précédent, le résultat est
H I ©
Les paramètres doivent être de type number
UEL
O
f E LM
Remarque
ch r e
©A
On peut lancer une exception de type string, number, boolean...

Hoisting
JavaScript
Hoisting (la remontée)
Possibilité d’utiliser une variable avant de la déclarer
reste du code
H I ©
Le compilateur commence par lire toutes les déclarations, ensuite il traite le
U EL
O
Les constantes et les variables déclarées avec let ne supporte pas le hoisting
f E LM
ch r e
©A

Hoisting
JavaScript
Hoisting (la remontée)
Possibilité d’utiliser une variable avant de la déclarer
reste du code
H I ©
Le compilateur commence par lire toutes les déclarations, ensuite il traite le
U EL
O
Les constantes et les variables déclarées avec let ne supporte pas le hoisting
f E LM
ch r e
©A
Malgré l’utilisation du mode strict, l’affichage d’une variable non-déclarée ne
génère pas d’erreur grâce à la remontée
"use strict";
x = 7;
console.log(x);
var x;

Expressions régulières
JavaScript
outil de recherche puissant adopté par la plupart des langages de

programmation
H I ©
UEL
O
facilitant la recherche dans les chaı̂nes de caractères (et donc le
f E LM
remplacement, le calcul de nombre d’occurrences...)
ch r e
permettent de vérifier si des chaı̂nes de caractères respectent
©A
certains formats (email, numéro de téléphone...)
syntaxe plus ou moins proche pour tous les langages de
programmation

JavaScript
Plusieurs méthodes de recherche disponibles
chaine1.search(chaine2) : permet de chercher et retourner la position de

la première occurrence de chaine2 dans chaine1
H I ©
chaine2 contient chaine1, false sinon. U EL
chaine1.test(chaine2) : permet de chercher et retourner true si
M O
E
chaine1.replace(chaine2, chaine3)
f L par chaine3
: permet de remplacer la première
c h re
occurrence de chaine2 dans chaine1
retourner©
A
chaine1.exec(chaine2) : permet de chercher chaine1 dans chaine2 et
un objet contenant plusieurs données sur la recherche (position de la
première occurrence, chaı̂ne recherchée...).
chaine1.match(chaine2) : permet de chercher chaine1 dans chaine2 et

retourner un tableau contenant toutes les occurrences.

JavaScript
Recherche d’une sous-chaı̂ne dans une chaı̂ne de caractère
var str = "Bonjour tout le monde";
var pos = str.search("tout");
console.log(pos); // affiche 8
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
H I ©
U
Recherche avec une expression régulière insensibleEà laLcasse
L MO
e f
var pos = str.search(/Tout/i);
r E
console.log(pos); //
A ch affiche 8

JavaScript
H I ©
U
Recherche avec une expression régulière insensibleEà laLcasse
L MO
e f
var pos = str.search(/Tout/i);
r E
console.log(pos); //
A ch affiche 8
©
Retourne -1 si la sous-chaı̂ne n’existe pas
var pos = str.search(/c/i);
console.log(pos); // affiche -1

JavaScript
On peut aussi utiliser la fonction de recherche test qui retourne

H I ©
true si la sous-chaine existe, false sinon.
UEL
O
LM
var str = /AB/i;
f
var result = str.test("ababaabbaaab");
r e E
ch
console.log(result); // affiche true
©A

JavaScript
Remplacer la première occurrence d’une sous-chaı̂ne

var chaine = "ababaabbaaab";
var txt = chaine.replace(/ab/,"c");
console.log(txt);
H I ©
// affiche cabaabbaaab
UEL
O
f E LM
ch r e
©A

JavaScript
Remplacer la première occurrence d’une sous-chaı̂ne

var txt = chaine.replace(/ab/,"c");
console.log(txt);
H I ©
// affiche cabaabbaaab
UEL
O
f E LM
ch r e
Remplacer toutes les occurrences d’une sous-chaı̂ne
©A
var txt = chaine.replace(/ab/g,"c");
console.log(txt);
// affiche ccacbaac

JavaScript
Utiliser exec pour avoir un résultat sous forme d’un objet

var str = /AA/i;
var resultat = str.exec(chaine);
H I ©
UEL
console.log("chaı̂ne trouvée : " + resultat[0]);
O
// affiche chaı̂ne trouvée : aa
f E LM
r e
ch de la première occurrence : " +
console.log("indice
© A
resultat.index);
// affiche indice de la première occurrence : 4
console.log("texte complet : " + resultat.input);

// affiche texte complet : ababaabbaaab

JavaScript
Pour trouver toutes les occurrences avec exec, il faut utiliser une
boucle et ajouter le paramètre g
var str = /AA/gi;
H I ©
var resultat;
UEL
while (resultat = str.exec(chaine)) { O
E
console.log("motif recherché : " + resultat
f LM
[0]);
ch r e
©A
console.log("indice de la première
occurrence : " + resultat.index);
console.log("texte complet : " + resultat.
input);
}

JavaScript
On peut aussi utiliser match qui retourne un tableau contenant

toutes occurrences sans utiliser de boucles
H I ©
UEL
O
var str = /AA/gi;
var resultat;
f E LM
ch
console.log(chaine.match(str)); r e
©A
// affiche (2) ["aa", "aa"]

JavaScript
Contraintes exprimées avec les expressions régulières
a+ : 1 ou plusieurs a
a* : 0 ou plusieurs a
a? : 0 ou 1 a
H I ©
consécutives
UEL
a{n, m} : minimum n occurrences de a consécutives, maximum m occurrences de a
O
f E LM
a{n} : exactement n occurrences de a consécutives
ch r e
a{n, } : minimum n occurrences de a consécutives
©A

JavaScript
a? : 0 ou 1 a
H I ©
consécutives
UEL
O
f E LM
ch r e
©A
var str = /ba?c/i;
console.log(str.test("bac")); // true

JavaScript
a? : 0 ou 1 a
H I ©
consécutives
UEL
O
f E LM
ch r e
©A
var str = /ba?c/i;
console.log(str.test("bac")); // true
var str = /ba?c/i;

console.log(str.test("baac")); // false
JavaScript
a | b : a ou b
H I ©
EL
ˆ : commence par
$ : se termine par O U
f E LM
() : le groupe
ch r e
©A
a(?!b) : a non suivi de b
a(?=b) : a suivi de b
(?<!a)b : b non précédé par a

JavaScript
. : n’importe quel caractère

\d : un chiffre
H I ©
\D : tout sauf un chiffre
UEL
O
\w : un caractère alphanumérique
f E LM
r e
\W : tout sauf un caractère alphanumérique
ch
©A
\t : un caractère de tabulation
\n : un caractère de retour à la ligne
\s : un espace
...

JavaScript

[a-z] : toutes les lettres entre a et z
[abcd] : a, b, c, ou d
H I ©
UEL
O
[A-Za-z] : une lettre en majuscule ou en minuscule
M
[ˆa-d] : tout sauf a, b,f c,E L
et d
ch r e
...
© A

JavaScript

[a-z] : toutes les lettres entre a et z
[abcd] : a, b, c, ou d
H I ©
UEL
O
[A-Za-z] : une lettre en majuscule ou en minuscule
M
[ˆa-d] : tout sauf a, b,f c,E L
et d
ch r e
...
© A
Pour utiliser un caractère réservé (ˆ, $...) dans une expression

régulière, il faut le précéder par \

JavaScript
Exercice 1
I ©
Trouver une expression régulière qui permet de déterminer si une
H
chaı̂ne de caractère contient 3 occurrences (pas forcement
UEL
consécutives) de la sous-chaı̂ne ab. O
true pour abacccababcc f E LM
ch r e
true pourA
abababccccab
©
false pour baaaaabaccccba

JavaScript
Exercice 2
chaı̂ne commence par la lettre a, se termine par la lettre b et pour
H I ©
chaque x suivi de y (pas forcement consécutives), il existe un z situé
entre x et y.
UEL
O
true pour ab
f E LM
true pour abxyb
ch r e
©A
true pour abxazyb
false pour abxuyb
false pour abxazyxyb

JavaScript
Exercice 3
H I ©
EL
chaı̂ne de caractère correspond à une adresse e-mail.
O U
f E LM
ch r e
©A

JavaScript
Exercice 3
H I ©
EL
chaı̂ne de caractère correspond à une adresse e-mail.
O U
f E LM
ch r e
©A
Exercice 4
chaı̂ne de caractère correspond à un numéro de téléphone français.

Quelques erreurs JavaScript
JavaScript
Quelques erreurs JavaScript
TypeError : lorsqu’on appelle une méthode sur une variable de

type undefined
SyntaxError : lorsqu’on rencontre un symbole inattendu
H I ©
var x = 2 + 3,;
UEL
O
f E LM
ReferenceError : lorsqu’on utilise une variable non-déclarée et
non-initialisée
ch r e
©A
EvalError : lorsque l’expression passé à la fonction eval est mal
formulée
RangeError : lorsqu’une variable de type number reçoit une
valeur supérieure à sa limite autorisée
...

Conventions et bonnes pratiques
JavaScript

Utilisation du camelCase pour les variables (sauf pour les
H I ©
constantes et variables globales) et fonctions
UEL
O
LM
Terminer chaque instruction par ;
r e f E
Placer un espace avant et après chaque opérateur ou accolade
ch
©A
Bien indenter son code et ne pas utiliser la touche de tabulation
Ne pas dépasser 80 caractères par ligne

JavaScript
Éviter les variables globales

Déclarer les variables au tout début du bloc
H I ©
EL
OU
Utiliser les types primitifs et éviter les types objets
M
E
Éviter l’utilisation de eval()
f Lpour la sécurité de votre programme
Définir un bloc c
e
hr dans le switch
© A default
Utiliser \ pour indiquer le retour à la ligne pour les chaines de
caractères :
var str = "Bonjour \
tout le monde"

Cours Javascript Algo

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Javascript Algo

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript : les fondamentaux

Docteur de l’université d’Aix-Marseille

H & H: Research and Training 1 / 143

2 Intégrer JavaScript dans HTML

6 Quelques opérations sur les variables

7 Méthodes utiles pour les chaı̂nes de caractères

H & H: Research and Training 2 / 143

H & H: Research and Training 3 / 143

12 Objets et méthodes prédéfinis

H & H: Research and Training 4 / 143

18 Quelques erreurs JavaScript

19 Conventions et bonnes pratiques

H & H: Research and Training 5 / 143

Définition, histoire et rôle

H & H: Research and Training 6 / 143

langage faiblement typé

H & H: Research and Training 7 / 143

Autres langages de programmation de scripts

H & H: Research and Training 8 / 143

Intégrer JavaScript dans HTML

Trois façons pour définir des scripts JavaScript

H & H: Research and Training 9 / 143

H & H: Research and Training 10 / 143

H & H: Research and Training 11 / 143

H & H: Research and Training 12 / 143

H & H: Research and Training 12 / 143

Pour une box d’affichage avec confirmation

H & H: Research and Training 13 / 143

Pour une box d’affichage avec confirmation

H & H: Research and Training 13 / 143

permet de contrôler l’avancement de l’exécution d’un programme

H & H: Research and Training 14 / 143

permet de contrôler l’avancement de l’exécution d’un programme

H & H: Research and Training 14 / 143

Où trouve t-on le message ?

H & H: Research and Training 15 / 143

Existe t-il un autre moyen de tester un programme JS sans passer par

Oui, en utilisant NodeJS (pour télécharger

Lancer la commande node nomFichier.js

H & H: Research and Training 16 / 143

Modifions le contenu du script.js

H & H: Research and Training 17 / 143

Modifions le contenu du script.js

H & H: Research and Training 17 / 143

H & H: Research and Training 18 / 143

H & H: Research and Training 19 / 143

Commentaire sur plusieurs lignes

H & H: Research and Training 19 / 143

Commentaire sur plusieurs lignes

H & H: Research and Training 20 / 143

H & H: Research and Training 20 / 143

H & H: Research and Training 20 / 143

H & H: Research and Training 20 / 143

Initialisation d’une variable non-déclarée ⇒ déclaration

H & H: Research and Training 21 / 143

Initialisation d’une variable non-déclarée ⇒ déclaration

H & H: Research and Training 21 / 143

H & H: Research and Training 22 / 143

H & H: Research and Training 22 / 143

H & H: Research and Training 22 / 143

Quelques types de variable selon la valeur affectée

H & H: Research and Training 23 / 143

H & H: Research and Training 24 / 143

Une variable déclarée avec le mot-clé var a une visibilité globale