Table des

matières

I - Objectifs 3

II - Introduction 4

III - Section 1 - Définition et fonctionnement de JavaScript 5

1. 1. Qu'est ce que JavaScript ? ....................................................................................................... 5

2. 2. Comment et où écrire du code JavaScript ? ............................................................................ 6

3. Exercice ......................................................................................................................................... 8

IV - Section 2 - Syntaxe du Langage 9

1. 1. La notion de cadrage ................................................................................................................ 9

2. 2. Les commentaires et les variables en JavaScript ...................................................................... 9

3. 3. Les opérateurs ........................................................................................................................ 11

4. Exercice : Quiz d'entraînement ... ............................................................................................... 13

 Objectifs

À la fin de cette leçon, vous serez capable de :

Expliquer l'utilisation et le fonctionnement de JavaScript;
Décrire la structure générale d'un programme et la syntaxe du langage JavaScript.

3
 Introduction

Le JavaScript est un langage de programmation crée par Brendan Eich, orienté vers les objets-prototypes.
Il est traditionnellement interprété par un navigateur Web au sein d'une page web et permet, entre autres
choses, de modifier l'organisation de la page.
Le JavaScript est un langage « client », c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est
chargée. Il a pour but de dynamiser les sites Internet.

4
 Section 1 - Définition et fonctionnement de JavaScript

Section 1 - Définition
et fonctionnement de I
JavaScript

1. 1. Qu'est ce que JavaScript ?

Le JavaScript (JS) est un langage dit "client" qui est exécuté par le navigateur web c'est-à-dire qu'il
n'est pas nécessaire de lire ses pages depuis un serveur web comme pour le PHP. Il est désactivable
sur la plupart des navigateurs web en modifiant le menu "options".
Ce langage permet entre autres de développer l'interactivité d'un site (pop-up, pop-under, contrôle de
formulaire, chargement d'images...) à l'aide de scripts et de donner donc un aspect de "vivant" à une
page Web.
Un script, c'est tout simplement une suite d'instructions qui vont être interprétées par un
programme.
Ainsi, pour lire du code JavaScript, il va nous falloir un interpréteur. Heureusement, tous les
navigateurs (Google Chrome, Safari, etc.) possèdent leur propre interpréteur JavaScript.
JavaScript permet de faire beaucoup de choses. Avec le HTML dynamique, nous pouvons manier les
balises d'une page web. il aussi est possible même d'échanger des informations avec le serveur sans
rechargement de la page grâce à une collaboration avec des langages comme AJAX.
Cependant, il faut prendre des précautions dans l'utilisation de JavaScript. Car le code JavaScript
peut être vu par les internautes au même titre que votrs code HTML. Il faut donc veuillez à ne pas
stocker des informations ou données sensibles comme les mot de passe dans votre code JavaScript.
Ce qui fait toute la puissance du JavaScript, c'est qu'on va pouvoir l'utiliser pour manipuler
dynamiquement le code HTML d'une page.
Faîtes cependant bien attention à ne pas confondre JavaScript et Java! Ces deux langages, bien que
syntaxiquement assez proches à la base, reposent sur des concepts fondamentaux complétement
différents et servent à effectuer des tâches totalement différentes.

Attention : Les limites de JavaScript

Le JavaScript facilite la navigation au sein d'un site Web. Au fil du temps, des améliorations et des
fonctionnalités sont apportées avec Ajax, par exemple. Cependant, compte-tenu des différences
d'interprétation d'un navigateur à un autre, il est conseillé de tester chaque script sur différents
navigateurs voire sous différents systèmes d'exploitation pour assurer une portabilité du code.
En Outre, on peut dégager trois "limites" essentielles dans le JavaScript en tant que langage de
présentation des données :
Le JavaScript ne possèdent pas de fonctionnalité graphique.
Le JavaScript ne peut pas lire et encore moins écrire des fichiers sur le disque dur du visiteur
(hormis les cookies).
Le JavaScript ne s'interface pas avec une base données de type MySQL ou SQL.

5
 Section 1 - Définition et fonctionnement de JavaScript

2. 2. Comment et où écrire du code JavaScript ?

Il ne faut pas d'éditeur particulier pour écrire des scripts en JavaScript. On peut insérer du code
JavaScript dans une page HTML grâce à un simple éditeur de texte comme nous le faisons déjà bien
avec Notepad++.
Il existe cependant plusieurs autres outils ou plates-formes proposant l'écriture de code JavaScript.
Ce qu'il faut retenir, c'est que l'usage de ces outils vous faciliteront l'écriture de code en vous
permettant :
De Vérifier la syntaxe du code grâce à la coloration automatique.
De disposer de l'auto-complétion.
D'avoir un bon outil pour le débogage ; et souvent,
De connaître la valeur d'une variable lors de l'exécution du script.
Comme pour le CSS, le code JavaScript peut se placer à trois endroits différents :
1. Dans un fichier externe à la page web avec l'extension obligatoire .js.
2. Entre les balises <head> et </head> ou dans la balise <body>de la page web.
3. Directement dans une balise de la page à l'aide des évènements.
Dans le premier cas, on doit inclure le fichier .js (par référence) directement dans notre page web et
toujours entre les balises <head> et </head> comme ceci :
1 ...
2 <head>
3
4 <script src="./dossier_javascript/[Link]"></script>
5
6 </head>
7 ...

C'est très souvent la méthode recommandée dans le cas de gros projets car elle permet une meilleure
maintenabilité du code grâce à la séparation des langages, et car on va pouvoir réutiliser un même
code JavaScript dans plusieurs fichiers HTML.
Dans ce cas, nous allons devoir lier nos fichiers HTML et JavaScript en utilisant à nouveau un
élément script et son attribut src.
En valeur de l'attribut src, nous allons indiquer le chemin relatif du fichier .js par rapport au fichier
.html. Si nos deux fichiers sont dans le même dossier, par exemple, il suffira d'indiquer le nom du
fichier JavaScript.
Dans le deuxième cas, le code doit se tenir entre les balises <script> et </script> comme ceci :
1 ...
2 <head>
3
4 <script>
5 // Votre script
6 </script>
7
8 <!-- OU -->
9
10 <script language="javascript">
11 // Votre script
12 </script>
13
14 <!-- OU -->
15
16 <script type="text/javascript">
17 // Votre script
18 </script>
19

6
 Section 1 - Définition et fonctionnement de JavaScript

20 </head>
21 ...

En effet, le premier endroit où l'on peut placer du code JavaScript est dans l'élément head d'un
fichier HTML.
Dans ce cas, il faudra placer le JavaScript à l'intérieur d'un élément script.
On placera généralement l'élément script à la fin de notre élément head.
On peut également écrire notre code JavaScript au sein de l'élément body d'un fichier HTML.
Dans ce cas là également, nous utiliserons un élément script et préférerons le placer à la fin de notre
page.
Lorsqu'on écrit du JavaScript dans un fichier HTML, que ce soit dans l'élément head, le body ou les
deux, on peut utiliser autant d'éléments script que l'on veut.
Cependant, pour des raisons évidentes de performance et de clarté, on essaie souvent de placer tout
notre code JavaScript dans un même élément script.
Dans le dernier cas, nous verrons cela plus tard dans le cours mais voici un exemple très simple que
vous avez déjà dû apercevoir un jour :
1 <input type="button" onClick="..." />

Il s'agit d'un événement. JavaScript gère très bien beaucoup d’événements : du simple clic sur un
bouton (exemple ci-dessus) jusqu'à la fermeture de la fenêtre en cours.
Comme premier script, voyons comment écrire un texte à l'écran une fois la page chargée :
1 <!DOCTYPE html>
2 <html lang="FR">
3 <head>
4 <meta charset="utf-8" />
5 <title>Page modele en Javascript</title>
6 <script>
7 [Link]("Bonjour tout le monde, je suis du Javascript");
8 </script>
9 </head>
10 <body>
11
12 </body>
13 </html>

Testez ce code dans votre navigateur et vous verrez le résultat !

Il faut savoir que tous les navigateurs internet n'autorisent pas ou ne supportent pas forcément le
JavaScript. Certains navigateurs proposent même à l'utilisateur d'autoriser ou non le JavaScript. Si
vous voulez quand même passer des informations aux visiteurs ayant un navigateur ne supportant
pas JavaScript, il faudra utiliser la balise <noscript>.
Exemple :
1 <script language="javascript">
2 [Link] ("bonjour");
3 </script>
4 <noscript> votre navigateur ne peut pas lire le code JavaScript</noscript>

Dans cet exemple, le navigateur affichera Bonjour s'il est compatible ou le texte figurant entre les
balises <noscript> et </noscript> s'il ne l'est pas.

7
 Section 1 - Définition et fonctionnement de JavaScript

3. Exercice
Exercice
1) Quelles sont les abréviations possible qu'on peut donner au langage JavaScript ?
JS

JSCript

Java

JSC

Exercice
2) Avec lesquelles des bases de données suivantes peut-ont utiliser (ou interfacer) Javascript ?
MySQL

SQL

PostgreSQL

Aucune

Exercice
3) Quelle est l'extension d'un fichier JavaScript ?

Exercice
4) Où peut-on placer du code JavaScript dans une page HTML ?
Dans la section <head>

Dans la section <Body>

Partout dans le code après ouverture de la balise <body>

Exercice
5) Quelle balise nous permet de tester si un navigateur est compatible ou supporte JavaScript ?

8
 Section 2 - Syntaxe du Langage

Section 2 - Syntaxe
du Langage II

1. 1. La notion de cadrage
C'est le seul point assez complexe du langage qui fait qu'on pourrait le traiter de capricieux qu'est
JavaScript. En effet, le JavaScript se base sur des objets de la page où il est présent. De ce fait, nous
utiliserons souvent l'écriture :
1 [Link]

Les éléments nommées ci-dessus sont des objets organisés de façon hierarchique :
L'objet window pointe sur la fenêtre du navigateur (c'est donc le niveau le plus bas dans la
hiérarchie possible en js).
L'objet document est à un niveau un peu supérieur. En effet, cela pointe sur la page mais au
niveau de son contenu brut (sa source en l'occurrence).
L'objet form (parmi tant d'autres) est un objet qui vise les formulaires présents dans la page.
C'est donc un niveau encore plus précis que document.
Enfin, l'objet champ est une occurrence de form. C'est un objet appartenant à form.
Et les "xxxxx" sont les méthodes et les caractères de chaque occurrences de l'objet form.
Il faut donc retenir qu'une fenêtre possède plusieurs niveaux en JavaScript. Du plus bas (window) au
plus haut qui est un caractère d'une occurrence d'un niveau inférieur tel que form.
Vous verrez par la suite que ce qui paraît compliqué en théorie s'avère simple en pratique !
1 // On avait ça :
2 [Link]("Bonjour tout le monde !");
3 // Cela équivaut à cela :
4 [Link]("Bonjour tout le monde !");

Ici, on peut constater que write n'est en fait qu'une méthode (fonction) de l'ensemble document. Cela
peut faire penser à la POO (Programmation orientée objet) mais cela ne va pas jusque là.
Mais ceci est une erreur :
1 write("Bonjour tout le monde !");

Car on ne précise pas à quel ensemble appartient la méthode write. Cela n'affiche rien ou un message
d'erreur.

2. 2. Les commentaires et les variables en JavaScript

Les commentaires

Comme pour l'immense majorité des langages de programmation, on va également pouvoir

commenter en JavaScript. Commenter, c'est laisser des messages ou des indications au sein de son
code qui servent à expliquer le code en question.
En JavaScript, il existe deux types de commentaires qui vont s'écrire différemment : les
commentaires mono-ligne et les commentaires multi-lignes.

9
 Section 2 - Syntaxe du Langage

Les commentaires ne sont pas pris en compte dans le traitement des instructions, ils ne servent que
de repères et d'aide pour le codeur du script.
En JavaScript, les commentaires ressemblent à ceux utilisés dans le CSS :
1 // Deux slashes pour un commentaire sur une ligne
2
3 /* Un slash et une étoile pour un commentaire sur
4 plusieurs lignes...
5 */

Les variables

Une variable JavaScript est un conteneur servant à stocker temporairement une information, comme
un nombre ou une chaîne de caractères.
Les variables en JavaScript n'ont pas nécessairement besoin d'être déclarées avant de les initialiser ou
des les utiliser; mais il est plus correct de le faire.
On doit observer différentes règles lorsque l'on nomme une variable en JavaScript :
Le nom des variables doit commencer par une lettre ;
Le nom ne peut contenir que des lettres (non accentuées), des chiffres ou les signes « _ » et «
$»;
Le nom des variables est sensible à la casse (« a » est différent de « A ») ;
Le JavaScript possède des mots « réservés » comme le mot « var » qu'on ne peut utiliser pour
créer une variable. Nous verrons ces mots au fil de ce cours.
La syntaxe pour déclarer une variable est la suivante :
1 // Déclaration de la variable nombre
2 var nombre;

La déclaration de variable se fait avec l'instruction var (variables en anglais (et en français)). Inutile
de déclarer le type de variable comme le feraient certains langages de programmation. On peut
immédiatement déclarer une valeur par défaut mais cela n'est nullement obligatoire :
1 var entier = 5;
2 var float = 1.999992; // type float
3 var chaine = "J'adore l'UVCI!"; // type string
4 var booleen= true; // ou false
5 var objet = null; // type object

Complément : Nature des variables Javascript

Les variables en JavaScript peuvent stocker différents types de valeurs.
Très souvent, on parlera souvent de « types de variables » au lieu de parler de « types de valeurs
stockées par les variables ».
Les types de valeurs vont avoir une influence sur notre code, puisqu'on ne stockera pas de la même
façon un chiffre ou une chaîne de caractères (un texte) par exemple dans une variable.
Nous ne pourrons pas non plus effectuer les mêmes opérations sur les variables selon le type de
valeurs qu'elles stockent.
Les types de valeurs les plus courants que peuvent stocker nos variables en JavaScript sont :
Number
String
Boolean
Float
Object
Function
Connaître le type de la variable
L'opérateur typeof(nom_de_la_variable) permet de connaître le type de la variable si vous ne

10
 Section 2 - Syntaxe du Langage

les avez pas déclaré.

3. 3. Les opérateurs
Tout comme les autres langages, JavaScript dispose d'opérateurs permettant d'effectuer les
opérations informatiques de bases.
Le grand avantage des variables est avant tout que l'on va pouvoir les manipuler et notamment
effectuer des opérations entre variables.
Pour des variables stockant des valeurs de type Number, on va donc pouvoir effectuer les mêmes
opérations qu'avec des nombres en mathématiques.
Ainsi, nous allons pouvoir additionner (les valeurs de) deux variables entre elles, les soustraire l'une à
l'autre, les multiplier entre elles, etc.

Opérateurs binaires d'affectation

Comme vu dans les exemples précédents, le symbole "=" (égal) permet d'affecter une valeur (nombre
ou chaîne de caractères) à une variable.
1 var nombre = 18;
2 var chaine = "Bonjour tout le monde !";
3
4 // Et aussi
5 var a;
6 var b;
7 a = b;
8
9 // Et...
10 a = b = 0; // a et b valent toutes les deux 0

Opérateurs binaires de calcul

L'addition s'effectue en utilisant le traditionnel symbole "+" (plus)

La soustraction avec le symbole "-" (moins)
La multiplication avec le symbole "*" (étoile)
La division se sert du symbole "/" (slash)
1 var a = b = c = 2; // On initialise a, b et c
2 var d = a/(b+c)-a*4; // d = 2/(2+2)-2*4 = 1/2-8 = -7.5
3 var e = 3*(3+3); // e = 3*6 = 18

Il existe aussi les opérateurs +=, -=, *= et /= qui s'utilisent lorsque l'opération s'effectue sur une
seule variable. Voici un exemple très simple :
1 var a = 3;
2 var b = a-2;
3
4 a -= b; // a = a-b = 3-1 = 2
5 a += b; // a = a+b = 3+1 = 4
6 b *= a; // b = b*a = 1*3 = 3
7 b /= b; // b = b/b = 1

Opérateurs de comparaisons

Les opérateurs de comparaison permettent de comparer deux valeurs et renvoient une valeur de type
booléen (true, vrai ou false, faux) selon les cas. La syntaxe est simple à comprendre :
Valeur1 Opérateur de comparaison Valeur2
> : est strictement supérieur

11
 Section 2 - Syntaxe du Langage

< : est strictement inférieur

>= : est supérieur ou égal
<= : est inférieur ou égal
== : est strictement égal
!= : est strictement différent
Bien entendu il ne faut pas confondre l'opérateur "=" d'affectation et l'opérateur "==" de
comparaison
1 var a = b = 10;
2
3 [Link](a>b); // false
4 [Link](a>=b); // true
5 [Link]((a+1)>b); // true
6 [Link](b!=a); // false
7 [Link](b==a); // true
8 [Link](b<=a); // true

Opérateur de négation

Comme dans l'exemple précédent, il s'agit du point d'exclamation "!". Ainsi, true devient false et
vice-versa.
Exemple :
1 var a = 3;
2 var b = 5;
3
4 [Link](a<b); // affiche true car 3<5
5 [Link](!(a<b)); // affiche false car l'expression équivaut à a>=b

Concaténation

La concaténation est une technique qui consiste à rassembler deux chaînes de caractères pour n'en
former qu'une seule. C'est en quelque sorte le collage de ces deux chaînes. Pour ce faire, utilisez le
signe "+" et "+=". C'est le même principe que précédemment.
Voici comme vous faisiez avant pour afficher deux chaînes à la suite :
1 var chaine_a = "Bonjour";
2 var chaine_b = "tout le monde";
3
4 // On affiche les deux chaînes à la suite
5 [Link](chaine_a);
6 [Link](chaine_b);

Et bien désormais, vous pouvez faire ainsi :

1 var chaine_a = "Bonjour";
2 var chaine_b = "tout le monde";
3
4 // On affiche les deux chaînes à la suite avec la concatenation
5 [Link](chaine_a+chaine_b);

On décline un peu...
1 var chaine_a = "Bonjour";
2 var chaine_b = "tout le monde";
3
4 chaine_a += chaine_b; // chaine_a vaut Bonjourtout le monde

Notez bien qu'il existe une ambiguïté entre l'opérateur de concaténation et le signe de l'addition en

12
 Section 2 - Syntaxe du Langage

JavaScript. Cependant, l'interpréteur reconnaît s'il s'agit d'une chaîne donc concaténation ou bien
d'un nombre (addition).

Opérateurs d'incrémentation et de décrémentation

Ils sont deux et permettent soit de diminuer de 1 la valeur d'une variable (décrémentation), soit de
l'augmenter de 1 (incrémentation).
++ : incrémente de 1
-- : décrémente de 1
1 var a = 0;
2 a++; // a = a+1 = 0+1 = 1
3 a--; // a = a-1 = 1-1 = 0
4 a--; // a = -1

Notez que si vous placez ces opérateurs devant la variable à incrémenter, l'action sera faite
immédiatement ; voici un exemple simple :
1 var a = 0;
2 [Link](a++); // Affiche 0
3 [Link](++a); // Affiche 2
4 [Link](--a); // Affiche 1

4. Exercice : Quiz d'entraînement ...

Exercice
1) Quel(s) est(sont) la (les) syntaxe(s) correcte(s) pour déclarer une variable en JavaScript ?
int var monChiffre = 2;

int monChiffre = 2;

Number monChiffre = 2;

var monChiffre = 2;

Exercice
2) Comment déclare-t-on une chaîne de caractères ?
var chaine = "ma chaine";

var maChaine = 'ma chaine';

Les deux versions sont pas correctes

Exercice
3) Soit la portion de code JavaScript suivante :
1 var a = 20;
2 var b = c = a-12;
3 var d;

Quelle est la valeur de d +=b ?

13
 Section 2 - Syntaxe du Langage

Exercice
4) Quel type de commentaire est valide commentaire JavaScript ?
<!-- Commentaire -->

/* Commentaire */

// Commentaire

Exercice
5) Soit la portion de code JavaScript suivante :
1 var a = 10;
2 var b = c = a-12;
3 [Link](++c);
4 [Link](c++);

Quelles affirmations suivantes sont vraies ?

A la fin de ce code, les variables b et c on la même valeur.

La ligne 3 du code affiche la valeur -1

La ligne 4 affiche la valeur -2

A la fin de ce code, c vaut 0

A la fin de ce code, c vaut -1

La ligne 4 affiche la valeur -1

14
 Table des
matières

I - Objectifs 3

II - Introduction 4

III - Section 1 : Structures conditionnelles 5

1. 1. Tests conditionnels avec if et else ............................................................................................ 5

2. 2. L'alternative switch .................................................................................................................. 6

3. 3. Structures ternaires .................................................................................................................. 6

4. Exercice : Exercices de compréhension .......................................................................................... 7

IV - Section 2 : Structures répétitives (les boucles) 9

1. 1. La boucle while ........................................................................................................................ 9

2. 2. L'instruction do... while .......................................................................................................... 10

3. 3. L'instruction for ..................................................................................................................... 10

4. 4. Les instructions break et continue .......................................................................................... 11

5. Exercice ....................................................................................................................................... 11

V - Section 3 : Les fonctions en JavaScript 13

1. 1. Définir des fonctions ............................................................................................................... 13

2. 2. Les appels de fonctions ........................................................................................................... 14

3. 3. Les fonctions prédéfinies ......................................................................................................... 15

4. Exercice ....................................................................................................................................... 16
 Objectifs

À la fin de cette leçon, vous serez capable de :

utiliser les conditions en programmation JavaScript ;
utiliser les boucles et JavaScript.

3
 Introduction

En programmation informatique, une structure de contrôle est une instruction particulière d'un langage
de programmation impératif pouvant dévier le flot de contrôle du programme la contenant lorsqu'elle est
exécutée.
Cette leçon est une application des structures de contrôles et des fonctions vues aux cours d'algorithmique
et d'algorithmique avancée.
Nous ne nus attarderons donc pas sur l'explication des tournures mais plutôt de leur application avec
JavaScript.

4
 Section 1 : Structures conditionnelles

Section 1 : Structures
conditionnelles I

1. 1. Tests conditionnels avec if et else

Les instructions if et else mettent en place une condition dans le code. Elles permettent de
différencier plusieurs cas lors de l'exécution.
1 if (condition){
2 ...
3 }else{
}
4 ...
5}

Dans la condition, on se sert généralement des opérateurs de comparaison mais toute fonction
renvoyant un booléen est autorisée.
1 var age = 15;
2
3 if (age >= 18){
4 [Link]("Vous pouvez entrer.");
5 }else{
}
6 [Link]("Vous ne pouvez pas entrer.");
7}

Notez que ceci est également possible (lorsque le bloc à exécuter ne nécessite qu'une seule ligne) :
1 var age = 15;
2
3 if (age >= 18) [Link]("Vous pouvez entrer.");
4 else [Link]("Vous ne pouvez pas entrer.");

On peut aussi rajouter des conditions intermédiaires entre le if et le else qui permettront de tester
plus de cas. Cet exemple montre comment gérer simplement les conditions multiples en JavaScript.
1 var temps = "orageux";
2 var je_prends;
3
4 if (temps == "ensoleillé") je_prends = "mon parasol.";
5 else if (temps == "nuageux") je_prends = "mon chapeau.";
6 else if (temps == "pluvieux") je_prends = "mon parapluie.";
7 else je_prends = "mon paratonnerre.";
8
9 [Link]("Lorsque le temps est "+temps+", je prends "+je_prends);
10 // Lorsque le temps est orageux, je prends mon paratonnerre.

Il est possible de rallier plusieurs conditions en une seule. Évidemment, la précision sera moindre
mais cela se révèle vite incontournable et très pratique. Pour cela il existe deux opérateurs très
simples d'utilisation.
&& : il veut dire ET.

5
 Section 1 : Structures conditionnelles

|| : il veut dire OU.

Voyons comment cela fonctionne :
1 var temps = "neigeux";
2 var temperature = -5;
3 var je_prends;
4
5 if (temps == "neigeux" || temperature <= 0) je_prends = "ma luge ou mon gros
blouson.";
6 else if (temps == "neigeux" && temperature <= 0) je_prends = "ma luge et mon gros
blouson.";
7 else je_prends = "mes lunettes de soleil."; // Avec un peu de chance il fait beau
:)
8
9 [Link]("Lorsque le temps est "+temps+" et que la température est de "+
temperature+"{{Abbr|°C|degré Celcius}}, je prends "+je_prends);
10 // Lorsque le temps est orageux et que la température est de -5{{Abbr|°C|degré
Celcius}}, je prends ma luge ou mon gros blouson.

On peut aussi séparer les ET et les OU avec des parenthèses.

2. 2. L'alternative switch
Il existe une alternative intéressante aux if et else. En effet, lorsque vous avez un nombre important
de cas à vérifier, il peut être intéressant de ne pas avoir à recopier une cascade de else if.
L'instruction switch permet de gérer plusieurs cas en fonction de la valeur d'une variable. Son
utilisation, bien que pratique, est réputée être (un peu) plus lente que le if et surtout assez restreinte.
Sa syntaxe est la suivante :
1 switch (variable)
2{
3 case a: /*...*/ break;
4 case b: /*...*/ break;
5 case c: /*...*/ break;
6 default: /*...*/ break;
7}

En appliquant un exemple concret, on a :

1 var temps = "soleil";
2 var je_prends;
3
4 switch (temps)
5{
6 case "soleil": je_prends = "mon parasol."; break;
7 case "nuageux": je_prends = "mon chapeau."; break;
8 case "pluvieux": je_prends = "mon parapluie."; break;
9 default: je_prends = "mon paratonnerre."; break;
10 }
11
12 [Link]("Lorsque le temps est "+temps+", je prends "+je_prends);
13 // Lorsque le temps est soleil, je prends mon parasol.

3. 3. Structures ternaires
Les structures ternaires évoquent un procédé raisonnablement complexe mais surtout très pratique et
permettant de gagner du temps, de la place et de la lisibilité.
Les ternaires sont en fait un concentré d'un groupe if et else (sans else if au milieu). Cela
permet d'écrire une condition en une seule ligne. C'est une alternative aux structures conditionnelles
vues précédemment. Voici la syntaxe :

6
 Section 1 : Structures conditionnelles

(condition) ? ...bloc du if : ...bloc du else

Le "?" remplace donc l'accolade du if tandis que les " : " remplacent celle du else. Un code avec
if et else :
1 var age = 15;
2 if (age >= 18) [Link]("Vous pouvez entrer.");
3 else [Link]("Vous ne pouvez pas entrer.");

Un code avec structure ternaire renvoyant le même résultat :

1 var age = 15;
2 [Link]((age >= 18) ? "Vous pouvez entrer." : "Vous ne pouvez pas entrer."
);

Ici, on a mis la condition en ternaire directement dans le [Link].

4. Exercice : Exercices de compréhension

Exercice
1) Une structure conditionnelles peut-être rallier plus de deux conditions
Vrai

Faux

Exercice
2) Lorsqu'on utilise le mot-clé if, on doit forcément utiliser else par la suite
Vrai

Faux

Exercice
3) On désire délibérer sur les notes des étudiants en L2. Si la moyenne annuelle de l'étudiant est
supérieure ou égale à 11 alors il est admis sont il est ajourné.
En considérant que la note est saisie dans une variable déclarée par var NoteEtd ; complétez le
programme suivant en utilisant les structures conditionnelles.
<script>
var NoteEtd = prompt("Quelle est sa note?", "Note de l'etudiant"); // Invite a saisir la note
if (NoteEtd>=11) {
[Link]("Il est admis.");
} else{
[Link]("Il est recalé.");
}
</script>

7
 Section 1 : Structures conditionnelles

Exercice
4) On désire modifier le code de l'exercice précédent selon une nouvelle procédure : un étudiant est
vraiment admis si l'on confirme qu'il a validé toutes les UE en plus d'avoir la note de 11. S'il a
validé toutes les UE la variable ValidUE= 1 sinon ValidUE=0.
1 <script>
2 var NoteEtd = prompt("Quelle est sa note?", "Note de l'etudiant"); // Invite
a saisir la note
3 if(NoteEtd>=11){
4 var ValidUE = prompt("Toutes les UE validées?", " ");
5 if(...){
6 [Link]("Il est admis.");
7 }...{
8 [Link]("Il est recalé.");
9 }
10 }...
11 [Link]("Il est recalé.");
12 }
13 </script>
<

<script>
var NoteEtd = prompt("Quelle est sa note?", "Note de l'etudiant"); // Invite a saisir la note
if(NoteEtd>=11){
var ValidUE = prompt("Toutes les UE validées?", " ");
if( ValidUE==1 ){
[Link]("Il est admis.");
} else {
[Link]("Il est recalé.");
}
} else{
[Link]("Il est recalé.");
}
</script>

8
 Section 2 : Structures répétitives (les boucles)

Section 2 : Structures
répétitives (les II
boucles)

Une boucle, c'est un bloc d'instructions qui sera répété tant qu'une condition sera vérifiée (= true).
Une boucle doit être finie ; elle finira à un moment où la condition n'est plus vraie. Une boucle
infinie est une erreur et fera planter votre navigateur.

1. 1. La boucle while
L'instruction while est la boucle la plus simple d'utilisation puisqu'elle ne comporte qu'un seul "
argument" : la condition ! Voici la syntaxe de while :
while(condition)
{
... (instructions, incrémentation...)
}
Voici un exemple simple :
1 var i = 0;
2 while (i < 5){

9
 Section 2 : Structures répétitives (les boucles)

3 [Link]("Ligne "+i+"<br />");

4 i++;
5}
6 [Link]("Boucle terminée !");

LE résultat sera ceci :

Ligne 0
Ligne 1
Ligne 2
Ligne 3
Ligne 4
Boucle terminée !

2. 2. L'instruction do... while

La boucle do while est la sœur de la boucle while puisqu'il s'agit de la même boucle SAUF que le
bloc d'instruction s'effectuera au minimum une fois et ce même si la condition de la boucle n'est pas
vérifiée dès le début.
1 var i = 5;
2 do
3{
4 [Link]("Ligne "+i+"<br />");
5 i++;
6 } while (i < 5);
7
8 [Link]("Boucle terminée !");

Ici, la condition vaut false dès le début. Un while normal aurait donc sauté la condition pour
passer à la suite du code. Mais le do while exécute une fois le code et affiche :
Ligne 5
Boucle terminée !

3. 3. L'instruction for
Cette structure répétitive ne porte pas bien son nom contrairement aux précédentes. Pour faire court,
for est un alias de while à la différence qu'elle regroupe en son sein l'initialisation de(s) variable(s)
utilisée(s), la condition ainsi que l'incrémentation (décrémentation) de celle(s)-ci.
Syntaxe :
for (initialisation; condition; incrémentation)
{
...
}
Exemple :
1 for (i = 0; i<5; i++)
2{
3 [Link]("Ligne "+i+"<br />");
4}
5 [Link]("Boucle terminée !");

Le résultat est le même que celui de la boucle while.

Ceci dit, l'utilisation d'une des trois boucles dépend du contexte et des besoins du script.

10
 Section 2 : Structures répétitives (les boucles)

4. 4. Les instructions break et continue

Il arrive parfois que l'on veuille sortir d'une boucle alors même que la condition de la boucle est
encore vraie. Pour cela, on peut faire appel à l'instruction break. Lorsque cette instruction est
exécutée, la boucle se termine immédiatement et le code la suivant est exécuté.
1 var i = 1;
2 while (i <= 10)
3{
4 if (i == 5) break;
5 i++;
6}
7 [Link]("La valeur de i est "+i);

Ce qui affiche : La valeur de i est 5. En effet, le programme sort de la boucle lorsque i prend la
valeur de 5, donc après 4 tours.
Le rôle de l'instruction continue est de sauter le tour actuel et d'en recommencer un nouveau.
Cette instruction s'utilise exactement de la même façon que break.

5. Exercice
Exercice
1) Lesquelles des structures suivantes sont des structures repétitives
Do .... While

If....Else

for

While

Exercice
2) Quelles structure peuvent être utilisée pour afficher un formulaire qui reste toujours affiché tant
que l'utilisateur n'as pas saisi un multiple de 5 ?
Do .... While

for

While

Exercice
3) Quelles sont les structures qui ne peuvent fonctionner sans que l'ensemble des éléments suivants
ne soit défini ?
- compteur initial
- condition compteur
- incrément
Do .... While

for

While

11
 Section 2 : Structures répétitives (les boucles)

Exercice
4) Existe-il une instruction qui permet de sortir d'une boucle Do...while avant même que la
condition de sortie de la boucle ne soit vérifiée ? Si oui, laquelle ?
Oui

Non

Endif

break

exit

Exercice
5) On veut trouver le plus petit multiple d'un nombre saisi par l'utilisateur et stocké dans une
variable nommée maVariable Compris entre deux nombres Nbre1 et Nbre2 tel que Nbre1<Nbre2.
On se propose d'utiliser la boucle while sachant le a et b étant deux variables l'opération a%b
retourne le reste de la division euclidienne de a par b et qu'un un nombre x est multiple de y si
x%y=0.
Complétez le code suivant pour résoudre le problème posé.
var Cpt=1 ;
while ( [Cpt >Nbre1 | Cpt < Nbre1] && [Cpt <Nbre2 | Cpt >Nbre2] ){
if (Cpt % maVariable == 0) break ;
Cpt++;
}
[Link]("Le plus petit diviseur trouvé est"+Cpt);

12
 Section 3 : Les fonctions en JavaScript

Section 3 : Les
fonctions en III
JavaScript

Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure
JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser
une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on
souhaite l'appeler.

1. 1. Définir des fonctions

Une définition de fonction (aussi appelée déclaration de fonction ou instruction de fonction) est
construite avec le mot-clé function, suivi par :
Le nom de la fonction.
Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules.
Les instructions JavaScript définissant la fonction, entre accolades, { }.
Le code suivant, par exemple, définit une fonction intitulée carré :
1 function carré(nombre) {
2 return nombre * nombre;
3}

La fonction carré prend un seul argument, appelé nombre. La fonction est composée d'une seule
instruction qui renvoie l'argument de la fonction (nombre) multiplié par lui-même. L'instruction
return spécifie la valeur qui est renvoyée par la fonction.
Les arguments ne sont pas obligatoires dans la définition d'une fonction. Ainsi, on pourrait définir
une fonction sans argument comme par exemple générer un nombre aléatoire entre 0 et 50 :
1 function alea50() {
2 var nb = [Link]([Link]()*51);
3 return nb;
4}

Les paramètres primitifs (comme les nombres) sont passés à la fonction par valeur. La valeur est
passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact
au niveau global ou au niveau de ce qui a appelé la fonction .

Expression de fonctions

Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également
créer une fonction grâce à une expression de fonction. De telles fonctions peuvent être anonymes (ne
pas avoir de nom correspondant). La fonction carré aurait pu être définie de la façon suivante :
1 var carré = function (nombre) { return nombre * nombre };
2 var x = carré(4); //x reçoit la valeur 16

Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la

13
 Section 3 : Les fonctions en JavaScript

fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur :
1 var factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) };
2
3 [Link](factorielle(3));

En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit
définit une fonction seulement si num vaut 0 :
1 var maFonction;
2 if (num === 0){
3 maFonction = function(monObjet) {
4 [Link] = "Toyota"
5 }
6}

2. 2. Les appels de fonctions

La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un
nom et de définir ce qui doit être fait lorsque la fonction est appelée. Appeler la fonction permet
d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la
fonction carré, on peut l'appeler de la façon suivante :
1 carré(5);

Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses
instructions et renvoie la valeur 25.
Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. La portée d'une
fonction est la fonction dans laquelle elle est déclarée (son champ d'influence) ou le programme entier
si elle est déclarée au niveau le plus haut.
En effet, on ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction
: ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder
aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une
fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction «
parente » et à toute autre variable accessible depuis la fonction « parente ».
1 // Les variables suivantes sont globales
2 var num1 = 20,
3 num2 = 3,
4 nom = "Licorne";
5
6 // Cette fonction est définie dans la portée globale
7 function multiplier() {
8 return num1 * num2;
9}
10
11 multiplier(); // Renvoie 60
12
13 // Un exemple de fonction imbriquée
14 function getScore () {
15 var num1 = 2,
16 num2 = 3;
17
18 function ajoute() {
19 return nom + " a marqué " + (num1 + num2);
20 }
21
22 return ajoute();
23 }
24

14
 Section 3 : Les fonctions en JavaScript

25 getScore(); // Renvoie "Licorne a marqué 5"

Aussi, une fonction peut-elle être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la
fonction qui calcule récursivement la factorielle d'un nombre :
1 function factorielle(n){
2 if ((n === 0) || (n === 1))
3 return 1;
4 else
5 return (n * factorielle(n - 1));
6}

On peut ensuite calculer les factorielles des nombres 1 à 5 :

1 var a, b, c, d, e;
2a = factorielle(1); // a reçoit la valeur 1
3b = factorielle(2); // b reçoit la valeur 2
4c = factorielle(3); // c reçoit la valeur 6
5d = factorielle(4); // d reçoit la valeur 24
6e = factorielle(5); // e reçoit la valeur 120

3. 3. Les fonctions prédéfinies

JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau :
eval()
La fonction eval() permet d'évaluer du code JavaScript contenu dans une chaîne de caractères.
uneval()
La fonction uneval() crée une représentation sous la forme d'une chaîne de caractères pour le code
source d'un objet.
isFinite()
La fonction isFinite() détermine si la valeur passée est un nombre fini. Si nécessaire, le
paramètre sera converti en un nombre.
isNaN()
La fonction isNaN() détermine si une valeur est NaN ou non. Note : On pourra également utiliser
[Link]() défini avec ECMAScript 6 ou utiliser typeof afin de déterminer si la valeur est
Not-A-Number.
parseFloat()
La fonction parseFloat() convertit une chaîne de caractères en un nombre flottant.
parseInt()
La fonction parseInt() convertit une chaîne de caractères et renvoie un entier dans la base
donnée.
decodeURI()
La fonction decodeURI() décode un Uniform Resource Identifier (URI) créé par encodeURI() ou
une méthode similaire.
decodeURIComponent()
La fonction decodeURIComponent() décode un composant d'un Uniform Resource Identifier
(URI) créé par encodeURIComponent ou une méthode similaire.
encodeURI()
La fonction encodeURI() encode un Uniform Resource Identifier (URI) en remplaçant chaque
exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement
représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le
caractère est composé d'une paire de deux demi-codets).

15
 Section 3 : Les fonctions en JavaScript

encodeURIComponent()
La fonction encodeURIComponent() encode un composant d'un Uniform Resource Identifier
(URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre
séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront
utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).
escape():
La fonction dépréciée escape() calcule une nouvelle chaîne de caractères pour laquelle certains
caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions
encodeURI() ou encodeURIComponent() doivent être utilisées à la place.
unescape()
La fonction dépréciée unescape() calcule une nouvelle chaîne de caractères pour laquelle les
séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les
séquences d'échappement introduites peuvent provenir d'une fonction telle que escape().
unescape est dépréciée et doit être remplacée par decodeURI() ou decodeURIComponent().

4. Exercice
Exercice
1) Une fonction peut-elle prendre plusieurs arguments ?
Oui

Non

Exercice
2) Lesquelles des structures suivantes sont correctes pour définir une fonction en JavaScript ?
function maFonction() {
// code ici......
}

fonction maFonction() {
// code ici......
}

function maFonction {
// code ici......
}

function maFonction(10) {
// code ici......
}

Exercice
3) Quelle instruction permet à une fonction de retourner une valeur utilisable dans la suite du
programme ?

16
 Section 3 : Les fonctions en JavaScript

Exercice
4) Une fonction peut-elle avoir pour argument une autre fonction ?
Oui

Non

Exercice
5) Queml est le type de la variable défini par
1 var maJolieVar=maBelleFonction(NombreEntier){ var maChose="Code JavaScript";
return maChose;}

number

string

null

ce code est incorrecte

17