Cours Javascript 1

BTS SNIR
___________________________________________________________________________
JavaScript
1 Introduction
1.1 Présentation du cours

Objectifs de ce tutoriel JavaScript et prérequis
Bienvenue dans ce nouveau cours traitant du langage de programmation JavaScript.
Ce tutoriel est accessible à tous et pourra être bénéfique à chacun, que vous soyez déjà un expert en
JavaScript ou un complet néophyte.
Le seul prérequis indispensable pour suivre ce cours est d’avoir déjà de bonnes notions en HTML et en
CSS, car dans le cas contraire vous ne pourrez pas suivre ce tutoriel.
Les objectifs de ce cours sont avant tout de vous présenter le fonctionnement du JavaScript et vous
présenter les possibilités offertes par ce langage.
Méthodologie et pédagogie
Afin de simplifier votre apprentissage, ce cours a été divisé en parties elles mêmes subdivisées en
chapitres étudiant chacun un aspect précis du JavaScript.
Vous pouvez accéder à n’importe quel chapitre via le sommaire sur votre gauche.
Ce cours suit un schéma logique et commence par présenter des mécanismes simples du JavaScript pour
aller progressivement vers du plus complexe. Je vous recommande donc de suivre tous les chapitres dans
l’ordre.
Pour optimiser votre apprentissage, ce cours utilise plusieurs supports dont la vidéo. En effet, vous aurez
en début de chaque chapitre une vidéo s’y rapportant.
J’essaie également d’illustrer un maximum mes cours avec le plus d’exemples possibles car, que les
choses soient dites immédiatement : vous ne pourrez apprendre à coder réellement qu’en pratiquant et
qu’en étant confronté aux difficultés.
Des liens seront également très souvent disponibles vous permettant de tester du code en même temps que
moi ou de le télécharger immédiatement en le copiant / collant comme cela :
P.M. Lycée Durzy Page 1 sur 40

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Lorsque vous cliquez sur le lien ci-dessus, vous arrivez sur le site JsBin qui permet de tester du code en
direct. Pensez bien à cliquer sur l’option « Run with Js » à chaque fois pour exécuter le JavaScript.
Finalement, des quizz et des exercices viendront valider vos progrès à la fin de chaque partie.
Vous avez toutes les clefs en main pour devenir un expert en JavaScript !
1.2 INTRODUCTION AU JAVASCRIPT

Qu’est-ce que le JavaScript ?
Le JavaScript est un langage de programmation créé en 1995.
Le JavaScript va nous permettre de créer des pages interactives et « vivantes » à l’aide de scripts.
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, Mozilla, Safari, etc.) possèdent leur propre interpréteur JavaScript.
Le JavaScript, un langage client-side

Le JavaScript est un langage de programmation dit « client-side ».
Il existe deux grands types de langages de programmation : les langages « client-side » et les langages «
server-side ».
Les langages client-side vont s’exécuter du côté du client, c’est-à-dire sur l’ordinateur de la personne qui
va demander la page web.
Les langages server-side, au contraire, vont s’exécuter côté serveur. Un serveur, c’est une sorte
d’ordinateur très puissant qui va stocker des pages web puis les envoyer au client lorsque celui-ci les
demande.

BTS SNIR
___________________________________________________________________________
Par exemple, lorsque vous faîtes une recherche sur Google, vous êtes le client et vous demandez via votre
navigateur à accéder à une page web. Cette page web est stockée sur un serveur qui va se charger de vous
l’envoyer.
Les langages client-side et server-side n’ont pas la même finalité. En effet, le client n’interagit que très
rarement directement avec les langages server-side (comme le PHP par exemple) car ces derniers sont
souvent là pour effectuer des calculs et traiter des données en arrière plan.
L’important pour le moment est que vous reteniez le schéma suivant :
1. Vous demandez à accéder à une page web via votre navigateur. Vous êtes le client et la page web
est stockée sur le serveur ;
2. Le serveur reçoit votre demande. Les langages server-side vont s’exécuter côté serveur (calculs,
etc.) ;
3. Une fois l’exécution terminée, le serveur renvoie la page web qui ne contient plus que du code
client-side (les langages server-side effectuent leurs opérations et renvoient du code client-side),
dont du JavaScript éventuellement ;
4. L’exécution des langages client-side se fait lorsque vous recevez la page demandée, dans votre
navigateur.
Retenez cependant que des projets ont vu le jour pour utiliser le JavaScript sur serveur (CommonJs,
Node.js). Nous n’en parlerons pas dans ce cours.
Le JavaScript, un langage orienté objet

Finalement, le JavaScript est également un langage orienté objet à prototype.
Cela signifie simplement que le JavaScript va utiliser des objets dans son fonctionnement, et que ces
objets sont prototypés.
Il est trop tôt pour que je puisse vous expliquer véritablement ce que sont les objets. Pour le moment,
retenez simplement qu’un objet correspond à un bloc cohérent de code servant à effectuer telle ou telle
opération.
JavaScript, Java et HTML

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.
Ainsi, nous allons pouvoir créer des effets intéressants et ajouter de l’interaction sur nos pages web.
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.

BTS SNIR
___________________________________________________________________________
1.3 ENVIRONNEMENT DE TRAVAIL

Choisir et utiliser un éditeur de code
Pour coder en JavaScript, nous n’allons avoir besoin que d’un éditeur de texte. Il existe de nombreux
éditeurs de texte sur le web et la majorité d’entre eux sont gratuits.
Personnellement, j’utilise la version gratuite du logiciel Komodo, c’est-à-dire Komodo Edit, que vous
pourrez trouver sur le site komodoide.com. Si vous êtes sous Windows, vous pouvez également utiliser
Notepad++ qui est un éditeur qui a fait ses preuves.
Les sites web de test

Vous pourrez également trouver sur le web de nombreux sites web vous permettant d’écrire du code en
JavaScript et d’avoir immédiatement un aperçu du résultat. Personnellement, je vous recommande
jsfiddle.net ou jsbin.com.
Ces sites sont très pratiques lorsque l’on souhaite tester rapidement un bout de code par exemple ou pour
des démonstrations de cours.
Rappelez-vous cependant que si un jour vous voulez créer un véritable programme ou site web, avec
plusieurs pages, vous serez alors obligé d’utiliser votre éditeur de texte, ne serait-ce que pour enregistrer
vos différentes pages de code.
2 Les bases en JavaScript
2.1 OU ECRIRE LE CODE JAVASCRIPT

Où écrire notre code JavaScript ?
On va pouvoir placer du code JavaScript à trois endroits différents :
 Dans l’élément head d’une page HTML ;

 Dans l’élément body d’une page HTML ;
 Dans un fichier portant l’extension « .js » séparé.
Bien que cette dernière méthode soit généralement recommandée, notamment pour des gros projets,
parfois vous serez « obligé » d’écrire votre code JavaScript dans votre fichier HTML.
Pour cette raison, nous allons étudier chacun de ces trois cas dans cette partie.

BTS SNIR
___________________________________________________________________________
Du JavaScript dans l’élément head d’une page HTML

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.
Du JavaScript dans l’élément body d’une page HTML

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.
Notez que 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.

BTS SNIR
___________________________________________________________________________
Si vous choisissez d’écrire plusieurs scripts dans une même page HTML, ceux-ci serons lus linéairement,
c’est-à-dire dans leur ordre d’écriture.
Regardez plutôt l’exemple ci-dessous :
Essayer ce code !
Du JavaScript dans un fichier « .js » séparé

Finalement, on peut écrire notre code JavaScript dans un fichier séparé portant l’extension « .js ».
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.
Par exemple, si l'on souhaite lier un fichier JavaScript script.js à un fichier HTML placé dans le même
dossier nous écrirons :

BTS SNIR
___________________________________________________________________________
Méthode utilisée dans ce cours

Dans ce cours, j’écrirai mon code JavaScript dans l’élément body de mes fichiers HTML, afin que vous
puissiez voir d’un coup le code HTML et le code JavaScript dans chaque leçon.
C’est la meilleure manière selon moi pour faciliter votre apprentissage.
2.2 SYNTAXE, INDENTATION, COMMENTAIRES

La syntaxe du JavaScript
Au niveau de la syntaxe générale du JavaScript,
retenez bien que chaque instruction en
JavaScript doit être terminée par un point
virgule.
Nous étudierons les syntaxes spécifiques

relatives aux variables, boucles, conditions,
fonctions et objets plus tard dans ce cours, dans
des chapitres dédiés.
Indenter en JavaScript
L’indentation correspond au fait de décaler certaines lignes de code par rapport à d’autres. Cela est
généralement utilisé pour rendre son code plus lisible et donc plus simple à comprendre.
Pour savoir quand indenter, il suffit de penser en terme de hiérarchie comme on le faisait déjà en HTML.
Une bonne pratique est d'effectuer un retrait vers la droite équivalent à une tabulation à chaque fois qu'on
écrit une nouvelle ligne de code à l'intérieur d'une instruction JavaScript. Nous aurons l'occasion
d'illustrer cela plus tard.

BTS SNIR
___________________________________________________________________________
Les commentaires en JavaScript

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.
Ces indications ne seront pas lues par le navigateur et seront donc invisibles pour les visiteurs (sauf s’ils
affichent le code source de la page).
Commenter va donc servir aux développeurs à se repérer plus facilement dans un script, à le lire et à le
comprendre plus vite.
Cela peut être utile à la fois pour vous même si vous

travaillez sur des projets complexes ou pour d’autres
développeurs si vous êtes amené à distribuer votre
code un jour ou l’autre.
En JavaScript, il existe deux types de commentaires

qui vont s’écrire différemment : les commentaires
mono-ligne et les commentaires multi-lignes.
Notez que la syntaxe des commentaires multi-lignes

peut-être utilisée pour écrire un commentaire mono-
ligne. Vous pouvez donc vous contenter de n’utiliser
que cette syntaxe.
2.3 LES VARIABLES EN JAVASCRIPT

Présentation des variables JavaScript
Une variable JavaScript est un conteneur servant à stocker temporairement une information,
comme un nombre ou une chaîne de caractères (c’est-à-dire un texte) par exemple.
Comme son nom l’indique, le propre d’une variable est de pouvoir varier, c’est-à-dire de pouvoir stocker
différentes valeurs dans le temps, en « écrasant » sa valeur précédente.
En JavaScript, on déclare une variable avec le mot clef « var » suivi du nom de notre variable. Chaque
nouvelle variable doit avoir un nom unique qu’on appelle également en anglais « identifier ».
Le nom des variables en JavaScript

On doit observer différentes règles lorsque l’on nomme une variable en JavaScript :
 Le nom des variables doit commencer par une lettre ;

BTS SNIR
___________________________________________________________________________
 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 » qu’on ne peut utiliser pour créer une variable. Nous
verrons ces mots au fil de ce cours. Par exemple, le mot « var » est un mot réservé.
Déclarer une variable en JavaScript

Il existe différentes façons de déclarer
une variable en JavaScript. On va
pouvoir :
 Déclarer une variable et lui

assigner une valeur immédiatement
;
 Déclarer une variable sans lui
assigner de valeur et lui assigner
une valeur plus tard ;
 Déclarer plusieurs variables en
même temps.
Voyons immédiatement un premier

exemple ensemble :
Deux remarques importantes : les types de valeurs et le signe « = »

Revenons au code ci-dessus afin de faire deux remarques essentielles pour la suite et pour votre
compréhension du JavaScript.
La première concerne les valeurs stockées par les variables. Vous pouvez remarquer que selon le type de
valeur stockée (texte, nombre ou booléen), nous allons déclarer nos variables de façon sensiblement
différente (utilisation ou non de guillemets ou d’apostrophes).
Nous allons revenir sur les types de valeurs stockées par les variables en JavaScript dans la prochaine
partie car cette notion est d’importance.
La deuxième remarque concerne le signe « = » (signe égal).
Faites très attention à la signification de ce signe en JavaScript et en programmation en général, car ce

n’est pas le égal mathématique que vous connaissez.
En effet, en JavaScript, le signe égal est un opérateur d'affectation et non pas d’égalité.

BTS SNIR
___________________________________________________________________________
Cela veut dire que ce signe va nous servir à affecter (ou assigner) une valeur à une variable, mais non pas
que la variable est égale à sa valeur.
Ainsi, on va pouvoir affecter différentes valeurs à une même variable dans le temps, chose qu’il est
strictement impossible de faire avec un égal mathématique.
Pour vous donner un exemple concret, en JavaScript, nous allons pouvoir faire cela (ce qui n’aurait aucun
sens en mathématiques) :
2.4 LES TYPES DE VALEURS EN JAVASCRIPT

Les types de valeurs des variables
Les variables en JavaScript peuvent stocker différents types de valeurs.
Par simplification, on parlera souvent (à tort) 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.
Dans cette partie, nous allons faire un tour d’horizon des types de valeurs les plus courants que peuvent
stocker nos variables en JavaScript.

BTS SNIR
___________________________________________________________________________
Le type de valeurs Number

Le type de valeurs Number va représenter tout nombre ou chiffre, qu’il soit positif, négatif, entier ou à
virgule.
Pour affecter une valeur de type Number à

une variable, on n’utilise ni guillemet ni
apostrophe.
Faites attention : lorsque nous codons

nous utilisons toujours des notations
anglo-saxonnes, ce qui signifie qu’il faut
remplacer nos virgules par des points pour
les nombres décimaux.
Le type de valeurs String

Le type de valeurs String va représenter les
chaînes de caractères, c’est-à-dire les textes.
Si l’on veut stocker une chaîne de caractères

dans une variable, il faut entourer notre chaîne
par des apostrophes ou des guillemets.
Ce sont justement ces apostrophes ou

guillemets qui vont indiquer au JavaScript que
l’on stocke une valeur de type String.
Au niveau des apostrophes / guillemets, vous pouvez

choisir les uns ou les autres selon votre préférence.
Cependant, si la valeur stockée contient elle-même des

apostrophes ou des guillemets, il faudra les échapper au
moyen d’un antislash selon ce que vous aurez choisi pour
entourer la valeur comme ceci :
Une nouvelle fois, comprenez bien que c’est le fait de mettre des guillemets ou des apostrophes qui va
faire qu’une valeur va être considérée comme une valeur de type String.

BTS SNIR
___________________________________________________________________________
Ainsi, même un nombre sera considéré comme étant

de type String, c’est-à-dire comme une chaîne de
caractères si on l’entoure de guillemets ou
d’apostrophes.
Faites bien attention à cela, car ça va avoir une

grande influence sur les manipulations que l’on va
pouvoir faire sur telle ou telle variable !
Le type de valeurs Boolean

Une variable en JavaScript peut encore stocker une valer de type Boolean, c’est-à-dire un booléen.
Un booléen, en algèbre, est une valeur binaire (soit 0, soit 1). En informatique, un booléen va être soit la
valeur true (vrai), soit la valeur false (faux).
Ce type de valeur peut sembler plus compliqué à

appréhender à première vue. Pas d’inquiétude,
nous allons souvent l’utiliser par la suite car il va
nous être très utile pour effectuer des tests et
vérifier si une condition est vérifiée (true) ou non
(false).
Une nouvelle fois, faites bien attention : pour

qu’une variable stocke bien un booléen, il faut lui
faire stocker la valeur true ou false, sans guillemets
ou apostrophes.
Si vous rajoutez des guillemets ou des apostrophes, la variable stockera alors la chaîne de caractères true
ou la chaîne de caractères false.
Autres valeurs stockées en JavaScript

Les variables en JavaScript peuvent stocker bien
d’autres valeurs n'étant pas de type String, Number
ou Boolean.
Parmi les autres valeurs remarquables, on peut citer

la valeur « null », qui correspond à la non
connaissance à priori de la valeur ainsi que la valeur
« undefined » qui correspond au fait de ne pas avoir
défini de valeur pour notre variable.
Une variable peut encore contenir la valeur « NaN »

qui signifie « Not a Number » (« n’est pas un
nombre » en Français).

BTS SNIR
___________________________________________________________________________
Changer le type d’une valeur stockée dans une variable

Notez que vous pouvez tout à fait affecter une
nouvelle valeur d’un autre type à une variable
JavaScript.
La nouvelle valeur écrasera l’ancienne, tout

simplement.
Tester le type de valeur d’une variable

Pour tester le type de la valeur que contient une variable, on utilise généralement la fonction typeof(). Nous
étudierons les fonctions en détail plus tard dans ce cours.
Attention cependant, cette fonction renvoie parfois des résultats contestables sur certaines valeurs.
Voyons immédiatement un exemple d’utilisation de typeof() ensemble. Pour afficher le résultat de typeof(),
nous allons l’utiliser avec une instruction alert().
Le script ci-dessous affichera tous les résultats au sein d’une même instruction alert(). Pour faire cela,
j’utilise ce qu’on appelle la concaténation (avec les « + ») et la notation \n qui sert à créer un retour à la
ligne en JavaScript.
Pour le moment, contentez vous de vous concentrer sur les types de variables, nous verrons une nouvelle
fois le reste plus tard dans ce cours.
Essayer ce code !
Sans surprise, notre variable texte est bien de type String, tandis que nos variables x et b sont
respectivement de type Number et Boolean.
Le résultat renvoyé par typeof() est undefined pour notre variable u puisqu’on ne l’a pas définie.

BTS SNIR
___________________________________________________________________________
En revanche, vous remarquez que le résultat renvoyé pour notre variable nn est Number, ce qui est très
étrange sachant qu’on lui a justement donné la valeur « Not a Number ».
Enfin, notez également que typeof() renvoie Object pour notre variable n qui contient la valeur null. Ce
résultat fait également débat.
2.5 OPERATIONS SUR LES VARIABLES EN JAVASCRIPT

Des opérations mathématiques
simples sur les variables
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.
Voyons immédiatement quelques exemples

avec des calculs simples :
Le modulo correspond au reste de la division entière d’un nombre par un autre. On utilise le signe « % »
pour le calculer.
Priorités de calcul
Faites attention à respecter les priorités de calcul lorsque vous effectuez des opérations sur les variables.
En réalité, c’est très simple puisque ce sont les mêmes qu’en mathématiques : les parenthèses sont
prioritaires sur toute autre opération, puis viennent la multiplication, la division et le modulo et finalement
l’addition et la soustraction.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Ici, on commence par calculer ce qui est entre parenthèses, c’est-à-dire 4 + z ce qui nous donne 4 + (-2) =
2.
Ensuite, on divise donc la valeur contenue dans y par 2 ce qui nous donne 5 et on calcule le modulo de 5
par 3 qui est égal à 2.
Finalement, on additionne la valeur contenue dans x et 2 pour arriver au résultat final : 7.
Faites donc bien attention aux priorités de calcul lorsque vous effectuez des manipulations sur les
variables, car le résultat peut s’avérer totalement différent de celui attendu si vous n’en tenez pas compte.
Opérations simplifiées sur les variables

JavaScript
Sachez que l’on peut simplifier l’écriture de certaines
opérations mathématiques sur les variables en JavaScript,
afin de gagner en temps, en performance et en clarté.
Voici les notations simplifiées ci-dessous avec leur

équivalent en « version longue » :
2.6 LA CONCATENATION EN JAVASCRIPT

La concaténation : définition et exemples
Concaténer signifie tout simplement mettre bout à bout deux chaînes de caractères afin d’en former une
troisième, nouvelle.
Concaténer, c’est donc « additionner » des chaînes de caractères.

BTS SNIR
___________________________________________________________________________
En JavaScript, on va pouvoir concaténer grâce à l’opérateur « + ».
Evidemment, nous allons pouvoir appliquer cet opérateur directement à nos variables afin de concaténer
leurs contenus respectifs.
Voyons immédiatement un exemple concret :
Essayer ce code !
Ici, nous avons utilisé la concaténation pour « additionner » les valeurs contenues dans prenom, espace et
dans nom. Nous avons ensuite stocké le résultat de cette concaténation dans une nouvelle variable moi.
Ensuite, nous avons fait de même avec la variable toi en concaténant cette fois-ci non plus des variables,
mais directement des valeurs entre elles.
Finalement, nous avons concaténé une variable avec une valeur. A noter évidemment qu’on ne concatène
jamais véritablement des variables (c’est un abus de langage), mais seulement les valeurs contenues dans
ces variables.
Finalement, nous avons utilisé la concaténation pour afficher le contenu de toutes nos variables d’un coup
au sein d’un même alert().
La seule chose à laquelle vous devez faire attention ici est l’utilisation des apostrophes / guillemets : on
ne s’en sert que pour entourer les chaînes de caractères, et non pas pour les variables.
Additionner un nombre et une chaîne de caractères

Si l’on tente « d’additionner » un nombre et une chaîne de caractères, tout ce qu’il y a derrière la chaîne
de caractères sera également considéré comme une chaine de caractères par le JavaScript.
Regardons les exemples suivants :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Ici, pour notre variable x, le JavaScript va commencer par additionner 2 et 4 naturellement, puis va ajouter
la chaîne de caractères « 1 » au résultat (c’est-à-dire à 6). Cela donne donc le résultat « 61 ».
Dans le second cas, le JavaScript va considérer tout ce qui se trouve derrière la chaîne de caractères « 1 »
comme une chaîne de caractères, et va donc concaténer 1, 2 et 4 pour donner « 124 ».
On peut également observer plus clairement cela avec notre troisième variable z, qui va stocker « 2un4 ».
2.7 LES CONDITIONS EN JAVASCRIPT
Découverte des conditions en JavaScript

En JavaScript, nous allons souvent vouloir effectuer différentes actions selon la valeur d’un paramètre,
afin de dynamiser notre site et d’y ajouter une certaine interaction.
Par exemple, on va vouloir afficher le message « Bonjour » s’il est moins de 18h ou « Bonsoir » dans le
cas contraire, ou encore afficher le message « Bonjour Pierre » si votre visiteur à indiqué au préalable
qu’il s’appelait Pierre.
Une façon simple de faire cela est d’utiliser les conditions.
Les conditions vont s’articuler autour d’un test. Généralement, nous allons comparer la valeur contenue
dans une variable à une certaine autre valeur.
Selon le résultat du test, nous allons ensuite pouvoir exécuter un bloc de code plutôt qu’un autre à
l’intérieur de notre condition.

BTS SNIR
___________________________________________________________________________
Les opérateurs de comparaison

Pour effectuer des comparaisons à l’intérieur d’une condition, nous allons avoir besoin d’opérateurs de
comparaison.
Ces opérateurs sont représentés par les symboles suivants :
Symbole Signification
== Est égal à (en valeur)
!= Est différent de (en valeur)
=== Est égal à (en valeur et en type)
!== Est différent de (en valeur ou en type)
< Est strictement inférieur à
<= Est inférieur ou égal à
> Est strictement supérieur à
>= Est supérieur ou égal à
Commencez par noter que pour tester l’égalité, on n’utilise pas le signe « = » qui, rappelons-le, est un
opérateur d’affectation et non d’égalité au sens mathématique du terme, mais le double égal (==).
Ensuite, deux symboles peuvent vous poser problème : le triple égal et le point d’exclamation suivi de
deux signes égal.
En utilisant seulement le double égal, nous n’allons tester que l’égalité sur la valeur. Ainsi, si l’on tente de
comparer le chiffre 4 à la chaîne de caractères « 4 » de cette manière, le JavaScript renverra le booléen «
true » (vrai).
En revanche, si l’on utilise le triple égal, on va tester à la fois l’égalité sur les valeurs et sur le type de
valeurs. Ainsi, si l’on compare le chiffre 4 à la chaîne de caractère « 4 », le JavaScript renverra « false »
(faux).
Le JavaScript et les comparaisons de valeurs

Afin de bien comprendre comment fonctionnent les conditions, il est indispensable au préalable que vous
compreniez comment le JavaScript effectue des comparaisons entre les valeurs.
Sans cette connaissance, il est impossible de savoir comment une condition marche véritablement.
Tout d’abord, vous devez bien comprendre que le JavaScript sait comparer différentes valeurs entre elles.
A chaque fois que l’on va comparer deux valeurs, le JavaScript va renvoyer un booléen, c’est-à-dire soit «
true », soit « false », selon que la comparaison soit vraie ou pas.

BTS SNIR
___________________________________________________________________________
Par exemple, si l’on écrit en JavaScript « 7 < 14 », le JavaScript renverra « true » car 7 est bien inférieur à
14.
Dans nos conditions, nous n’allons donc pas directement tester si une valeur est inférieure, égale ou
supérieure à une autre, mais tester si le JavaScript nous renvoie true ou false.
C’est une distinction très importante que malheureusement très peu de développeurs font ou
comprennent.
Voyons immédiatement plusieurs exemples afin d’être sûrs de bien comprendre comment tout cela
fonctionne :
Essayer ce code !
Dans le code ci-dessus, nous comparons des valeurs entre elles. A la suite de chaque comparaison, le
JavaScript renvoie soit true soit false selon que la comparaison soit vraie ou non.
On stocke le résultat renvoyé par le JavaScript dans une variable pour chaque comparaison puis on
affiche tout cela grâce à une instruction alert().
Maintenant que vous savez véritablement comment fonctionne le JavaScript avec les opérateurs de
comparaisons, nous allons pouvoir aborder sereinement les conditions en soi.

BTS SNIR
___________________________________________________________________________
2.8 LES CONDITIONS IF, IF…ELSE ET IF…ELSE IF…ELSE

La condition if
« If » en anglais signifie « si ». Avec cette première structure conditionnelle, on va pouvoir tester si une
valeur répond à un certain critère, et exécuter un bloc de code le cas échéant.
Par exemple, on peut choisir d’afficher le message « Bonjour » si une variable heure stocke une valeur
inférieure à 18.
Dans ce cas, le code sera la suivant (observez bien la syntaxe) :
Essayer ce code !
Analysons le code ci-dessus, étape par étape.
Tout d’abord, on commence par comparer le contenu de notre variable heure à la valeur 18. Si notre
variable contient un nombre inférieur à 18, le JavaScript renverra le booléen true.
Ensuite, justement, on teste si le JavaScript renvoie true ou pas au sein de notre condition if.
Littéralement, la ligne if(heure < 18 == true) se traduit par « si le JavaScript renvoie true par rapport à
l’inégalité heure < 18, alors exécuter le code contenu entre crochets ».
Dans le cas où le JavaScript renvoie false, rien ne se passe.

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Dans la pratique, on comparera souvent la valeur renvoyée par le JavaScript à l'issue de la comparaison à
la valeur true. Cependant, on peut également évidemment comparer cette valeur à false et exécuter notre
bloc de code le cas échéant.
Essayer ce code !
La condition if…else
La condition if…else (« si… sinon » en Français) va nous permettre d’exécuter un bloc de code si le
JavaScript renvoie bien la valeur attendue, et un autre bloc de code s’il ne renvoie pas la valeur attendue.
En reprenant notre exemple précédent, on va donc pouvoir dorénavant afficher « Bonjour » si notre
variable contient bien une valeur inférieure à 18 et « Bonsoir » dans le cas contraire.
Essayer ce code !
Notez dès à présent qu’on n’effectue jamais aucun test au sein du else, car le else va tout simplement
prendre en charge tous les cas non supportés par le if.
Essayez de vous souvenir de cela, car nombre de développeurs font l’erreur.
Ici, si notre variable heure contient une valeur inférieure ou égale à 18, on va exécuter le code dans le if et
donc afficher « bonjour ».
Dans tous les autres cas, nous allons exécuter le code contenu dans le else et donc afficher « bonsoir ».

BTS SNIR
___________________________________________________________________________
La condition if…else if…else

La condition if…else if…else signifie « si… sinon si… sinon » en Français.
Cette condition va être très puissante et très pratique puisqu’elle va nous permettre de gérer autant de cas
que l’on souhaite et d’exécuter un code différent pour chaque nouveau cas créé.
En effet, on va pouvoir insérer autant de else if que l’on veut au sein de notre condition pour pouvoir gérer
un nombre infini de cas.
En reprenant une nouvelle fois notre exemple précédent, on va donc pouvoir maintenant afficher
différents messages selon l’heure.
Essayer ce code !
Comme vous pouvez le voir, cette nouvelle condition est très pratique.
Limitations et solutions
Cependant, ce code est encore loin d’être parfait. En effet, certains d’entre vous se demandent peut être
comment le JavaScript fait pour savoir si « c’est le matin » ou « c’est l’après midi » lorsque notre variable
stocke une valeur inférieure à 12 ?
La réponse est simple : il ne le sait pas. Le code JavaScript va simplement être lu de façon linéaire et dès
qu’un test va être évalué à true, nous allons sortir de la condition.
Dans l’exemple précédent, par exemple, notre variable heure stocke le chiffre 9. A priori, le JavaScript va
donc renvoyer true pour « heure < 12 » et pour « heure <= 18 ».
Comme le code est lu linéairement, le premier cas rencontré revoyant true va être « heure < 12 ». Le
JavaScript va donc renvoyer « c’est le matin ».
Cependant, si nous avions construit notre condition différemment, le JavaScript aurait renvoyé le «
mauvais » message.

BTS SNIR
___________________________________________________________________________
Regardez plutôt l’exemple ci-dessous pour vous en convaincre. Nous avons simplement inversé l’ordre de
notre condition.
Essayer ce code !
Nous allons pouvoir régler ce premier défaut grâce aux opérateurs logiques, objet du prochain chapitre.
Second gros problème de cette condition : nous ne prenons pas en charge les valeurs aberrantes. Dans le
cas de l’heure, cela peut sembler superflu, mais imaginez que vous demandiez à vos visiteurs de rentrer
l’heure qu’ils souhaitent.
Vous pouvez alors être certain que certains d’entre eux vont rentrer des valeurs inférieures à 0 ou
supérieures à 24, ou même écrire en lettres plutôt qu’en chiffres.
Malheureusement, il est encore trop tôt pour apprendre comment filtrer les données envoyées par les
utilisateurs.
Dans notre cas, nous pourrions déjà utiliser deux structures conditionnelles if pour filtrer le type de
données reçues.
Voilà comment nous pourrions nous y prendre pour ne filtrer que les nombres. Ce n’est peut-être pas la
solution la plus élégante, mais c’est la meilleure dans l’état actuel de nos connaissances et ça possède
l’avantage d’être fonctionnel :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Ici, on utilise typeof() pour tester le type de la valeur contenue dans notre variable heure dans un premier if.
Ensuite, on compare la valeur renvoyée par notre fonction à la valeur "number" et si le JavaScript renvoie
true suite à cette comparaison, on exécute le code contenu dans ce premier if.
Si typeof() renvoie bien la valeur number, on rentre donc dans notre premier if et de nouveaux tests sont
effectués au sein de ce if. Sinon, on arrive dans le dernier else et on affiche « mauvaise valeur ».
2.9 OPERATEURS LOGIQUES ET CONDITIONS
Les opérateurs logiques

En JavaScript, il existe trois opérateurs logiques très utilisés : l’opérateur logique « ET », l’opérateur
logique « OU » et l’opérateur logique « CONTRAIRE » ou « NON ».
Chacun de ces opérateurs est représenté par un symbole.
Opérateur logique Symbole
ET (AND) &&
OU (OR) ||
NON !

BTS SNIR
___________________________________________________________________________
Opérateurs logiques et conditions

Nous allons pouvoir utiliser ces opérateurs logiques au sein même de nos conditions, afin de pouvoir par
exemple effectuer plusieurs comparaisons au sein d’un même test.
Plus précisément, l’opérateur logique « ET » va nous permettre de créer un intervalle de comparaison

pour une variable.
On va par exemple pouvoir tester si la valeur contenue dans une variable heure est comprise entre 0 et 12.
Grâce à cet opérateur, nous allons pouvoir lever l’ambiguïté sur certaines valeurs (ambiguïté vue dans la
partie précédente) en ne travaillant plus qu’avec des intervalles.
Essayer ce code !
L’opérateur « OU » va nous permettre de comparer la valeur d’une variable à deux valeurs différentes. Si
l’une des deux comparaisons affiche le résultat attendu, le reste du code sera exécuté.
On peut par exemple tester si la valeur contenue dans une variable heure est inférieure à 0 ou supérieure à
24.
Essayer ce code !

BTS SNIR
___________________________________________________________________________
Finalement, l’opérateur logique « NON » va nous permettre de nier une comparaison. Ainsi, des
comparaisons évaluées de base à false vont être évaluées à true et inversement.
Dans l'exemple ci-dessus, le deuxième jeu de parenthèses n'est pas strictement nécessaire. Je les ai
rajoutées afin de bien comprendre sur quoi porte l'opérateur « NON ».
Essayer ce code !
A votre niveau, il est possible que vous ne compreniez pas immédiatement l’utilité de ces opérateurs
logiques, notamment en ce qui concerne l’opérateur logique « NON ».
Cependant, chacun d’entre eux est très puissant et ils vont tous nous être très utiles par la suite. Ne les
négligez donc pas.
2.10 EVALUATION ET SIMPLIFICATION DES CONDITIONS
Simplifier ses conditions

La façon dont nous avons écrit nos conditions
jusqu’à présent est tout à fait valide.
Cependant, nous allons pouvoir simplifier
cette écriture.
En effet, vous devez savoir que lorsqu’on écrit

une condition, le JavaScript va par défaut
exécuter le code contenu dans un if ou dans un
else if si la comparaison a été évaluée à true.
En d’autres termes, il est inutile de préciser le

== true dans nos conditions.
Ainsi, les deux conditions ci-dessous vont produire exactement le même résultat :

BTS SNIR
___________________________________________________________________________
A partir de maintenant, je vous encourage fortement pour des raisons de simplicité et de lisibilité à écrire
vos conditions de façon abrégée.
Pour évaluer de cette manière si une comparaison est évaluée à false, nous allons avoir besoin de
l’opérateur logique « NON » qui, rappelons-le, va inverser la valeur logique d’un test.
L’évaluation des valeurs

Il y a un autre point que vous devez connaître afin de véritablement comprendre les conditions : une
valeur peut être évaluée à true ou false même sans opérateur de comparaison.
Ainsi, toute valeur différente de null, undefined, NaN, 0 et la chaîne de caractères vide sera évaluée par
défaut par le JavaScript à true.
Savoir cela nous permet de comprendre bien des choses et de résoudre certaines situations en JavaScript.
Comme d’habitude, nous allons illustrer cela par quelques exemples afin de toucher du doigt cette
nouvelle notion :
Essayer ce code !

BTS SNIR
___________________________________________________________________________
Dans notre exemple précédent, la variable x contient la valeur 6. Le code if(x) demande à JavaScript de
comparer la valeur de x à true par défaut.
Si la valeur de x a été évaluée à true, alors une boîte d'alerte apparaitra. Cela va être le cas d'après ce que
nous avons dit précédemment.
En revanche, notre variable y contient une chaîne de caractères vide. La chaine de caractères vide est par
défaut évaluée à false par le JavaScript. Ainsi, nous allons entrer dans le else de notre deuxième condition
et exécuter le code qui se trouve à l'intérieur.
2.11 LES STRUCTURES TERNAIRES EN JAVASCRIPT

Présentation des ternaires
Les structures ternaires correspondent à une façon très raccourcie d’écrire ses conditions.
Comme les ternaires sont très « denses », certaines

personnes en déconseillent l’usage car elles ne les
trouvent pas forcément toujours compréhensibles.
Pour construire une ternaire, nous allons utiliser

l’opérateur logique ?.
Voici un premier exemple concret de ternaire :
Comme vous pouvez le remarquer, cette nouvelle écriture tranche radicalement avec tout ce que nous
avons pu voir jusqu’à présent.
Dans le cas ci-dessus, nous commençons par déclarer deux variables heure et bon.
Le test va s’effectuer sur notre variable heure tandis que notre variable bon va nous servir à stocker le
résultat de notre ternaire.
On teste donc si notre variable heure contient une valeur inférieure ou égale à 18 ou pas.
Si c’est le cas, on stocke dans la variable bon la chaîne de caractères située juste après le point
d’interrogation et avant les deux points (c’est-à-dire « Bonjour »).
Dans le cas contraire, on stocke la valeur après les deux points (« Bonsoir ») dans notre variable bon.
Finalement, on affiche le contenu de notre variable bon.
L’utilisation d’une variable conteneur (ici bon) avec les ternaires n’est pas indispensable mais je vous le
recommande fortement pour deux raisons : d’une part, en stockant le résultat de la ternaire dans une

BTS SNIR
___________________________________________________________________________
variable, vous pouvez vous resservir de ce résultat plus tard et d’autre part cela rend la ternaire un peu
plus compréhensible.
2.12 Utilisation des ternaires

Comme je l’ai précisé plus haut, certaines personnes déconseillent l’utilisation des ternaires car ils les
jugent trop peu compréhensibles.
Personnellement, je n’ai aucun problème avec les ternaires à partir du moment où le code est bien
commenté et où la ternaire est explicite.
Le vous laisse donc le choix de les utiliser ou pas, mais dans tous les cas faites l’effort de mémoriser la
forme des ternaires au cas où vous en rencontriez dans le futur dans un code.
Notez tout de même que vous pourrez gagner beaucoup de temps si vous maitrisez les ternaires.
En effet, si nous devions réécrire notre ternaire ci-dessus de façon plus classique, c’est-à-dire avec un
if...else, voilà ce que cela donnerait.
Essayer ces codes !
2.13 LE SWITCH EN JAVASCRIPT
Cas d’utilisation
Parfois, dans vos conditions, vous voudrez pouvoir dissocier de nombreux cas afin de traiter chacun
d’entre eux différemment.
Par exemple, on peut imaginer renvoyer un message différent à des élèves selon la note obtenue par ceux-
ci à un test.

BTS SNIR
___________________________________________________________________________
Pour faire cela, on peut bien évidemment toujours utiliser un if… else if… else. Cependant, il va parfois être
plus judicieux d’utiliser une instruction switch.
Le switch est semblable à une condition dans laquelle on va pouvoir générer autant d’issues que l’on
souhaite.
Attention cependant à une limitation importante du switch : cette instruction ne peut tester que l’égalité de
valeurs et non pas l’inégalité.
Exemple d’utilisation du switch

Imaginons donc que l’on souhaite renvoyer un
message différent pour chaque heure entre 8h et
12h.
Pour cela, nous allons avoir besoin d’une

variable heure. On va ensuite switcher sur cette
valeur.
Le switch n’est pas très compliqué à comprendre

à partir du moment où vous avez compris les
conditions, car le principe est le même et seule
l’écriture change.
Dans notre cas, nous « switchons » donc sur

notre variable heure, ce qui signifie que notre
variable heure va être notre variable de test.
Dans un switch, nous allons créer des cas (case)

pour chaque issue que l’on souhaite traiter.
Ici, on souhaite renvoyer un message différent

selon que notre variable contienne les valeurs 8,
9, 10, 11 ou 12. On crée donc les cas
correspondants. Essayer ce code !
Si heure contient la valeur 8, par exemple, on rentre dans le case 8 : et le code qui se trouve à l’intérieur de
celui-ci est exécuté.
Dans le cas présent, si l'on souhaite faire un parallèle avec nos conditions, on peut considérer que le
premier cas correspond à un if (heure === 8), les cas suivants à des else if et le dernier à un else.
Notez bien qu’il faut préciser un « : » après chaque utilisation du mot case.
J’attire également votre attention sur deux autres choses : l’utilisation du mot clef break ainsi que du default
en fin de switch.

BTS SNIR
___________________________________________________________________________
Vous devez absolument préciser un break pour chaque issue créée afin de sortir du switch. Si vous oubliez
le break, le switch va lire et exécuter le code contenu dans chaque case à la suite, ce qui n’est pas du tout le
comportement attendu.
Finalement, vous devez également créer un cas par défaut (default). Si notre variable contient une valeur
non prise en charge par les cas ci-dessus, alors le code contenu dans default sera exécuté.
Il n’est pas nécessaire de mentionner de break dans le default car celui-ci doit toujours être placé en fin de
switch.
If… else if… else ou switch ?

Comme cela a été précisé en début de partie, nous pouvons arriver à des résultats similaires en utilisant le
switch ou une condition de type if… else if… else.
Cependant, si les issues sont nombreuses et si vous ne souhaitez tester que l’égalité de valeurs, le switch
peut être préféré à une condition « classique ».
2.14 LES BOUCLES EN JAVASCRIPT
Présentation des boucles

Les boucles vont nous permettre d’exécuter un bloc de code un certain nombre de fois, tant qu’une
certaine condition est remplie.
Par exemple, on va pouvoir exécuter une certaine instruction tant qu’une certaine variable n’aura pas
atteint telle ou telle valeur.
Les boucles nous permettent finalement de gagner beaucoup de temps en automatisant la répétition d’un
bloc de code.
Attention cependant : la condition donnée doit toujours être fausse à un moment donné, sinon la boucle ne
s’arrêtera jamais !
Nous allons étudier trois boucles dans cette partie :
 La boucle while (« tant que ») ;

 La boucle do… while (« faire… tant que ») ;
 La boucle for (« pour »).
La boucle while
La boucle while va nous permettre de répéter une série d’instructions tant qu’une condition donnée est
vraie.

BTS SNIR
___________________________________________________________________________
Les conditions au sein des boucles prendront très souvent la forme d’une inégalité sur une variable.
Par exemple, on va pouvoir faire quelque chose comme cela : « tant que la variable x contient une valeur
inférieure à 10, exécuter le bloc de code suivant : … ».
Cependant, rappelez-vous que notre condition doit toujours être fausse à un moment donné afin de
pouvoir sortir de la boucle. Il va donc également falloir faire varier la valeur à l’intérieur de notre
variable.
Pour cela, on va très souvent incrémenter (c’est-à-dire ajouter 1) ou décrémenter (soustraire 1) notre
variable à chaque nouveau passage dans notre boucle.
Voici comment on va écrire une boucle while en pratique :
Essayer ce code !
Dans le code ci-dessus, on commence par initialiser une variable x en lui faisant stocker la valeur 0.
Ensuite, on crée notre boucle while. Tant que x contient une valeur strictement inférieure à 10, on ne sort
pas de la boucle et on retourne au début de celle-ci pour effectuer un nouveau passage.
A chaque nouveau passage dans la boucle, on demande à afficher la valeur de x et on incrémente la valeur
de x, c’est-à-dire on ajoute 1 à cette valeur.
Comme vous pouvez le voir, pour incrémenter, il suffit d’ajouter deux signes « + » après notre variable.
Faites bien attention à l’ordre des instructions dans votre boucle.
En effet, dans notre exemple, j’incrémente ma variable après l’affichage de mon message, ce qui fait que
le premier message que l’on reçoit est le suivant :
Tandis que le dernier sera « x vaut : 9 ».
Si nous avions incrémenté la valeur de x avant d’afficher cette valeur, nous aurions obtenu des valeurs
différentes puisque x aurait valu 1 dès le premier message :

BTS SNIR
___________________________________________________________________________
Essayer ce code !
Un mot sur l’incrémentation et la décrémentation

Comme on vient de la voir, il suffit pour incrémenter la valeur d'une variable d’ajouter deux signes « + »
après le nom de la variable en question.
A partir de là, vous devriez avoir deviné que pour

décrémenter (c’est-à-dire enlever 1), il suffit tout
simplement d’ajouter deux signes « - » après
notre variable.
Cependant, il y a deux façons d’incrémenter ou

de décrémenter qui ne sont pas strictement
équivalentes : on peut ajouter le double « + » ou
le double « - » avant ou après le nom de la
variable.
La subtilité réside dans la priorité des opérations.

Regardez plutôt le code ci-dessous :
Essayer ce code !
Comme cela est précisé ci-dessus, vous pouvez remarquer qu’en incrémentant ou décrémentant avec le
double signe avant le nom de la variable, l’opération d’incrémentation ou de décrémentation sera
prioritaire sur l’assignation.
En revanche, si vous mettez le double signe après le nom de la variable, l’assignation sera prioritaire sur
l’incrémentation ou la décrémentation. Ainsi, y stockera la valeur contenue dans x avant que celle-ci soit
incrémentée, et stockera donc 0.
Retenez bien cette subtilité afin d’éviter de faire des erreurs lors de calculs sur des variables.

BTS SNIR
___________________________________________________________________________
La boucle do… while

Pour faire très simple, la différence entre la boucle do… while et la boucle while va être de même type que
ce que nous venons de voir avec l’incrémentation
: cela va être une question d'ordre des opérations.
En effet, dans une boucle while, si la condition

donnée est fausse dès le départ, la boucle ne sera
jamais exécutée.
Par exemple, si on écrit cela, rien ne s’affichera

puisqu’on ne rentrera jamais dans la boucle :
Essayer ce code !
En revanche, dans une boucle do… while (« faire… tant que »), on effectuera toujours au moins un passage
dans la boucle, même si la condition est fausse au départ car la condition va être testée après le premier
passage dans la boucle au contraire de la boucle while où la condition est testée avant tout passage dans la
boucle.
Reprenons le même exemple que précédemment avec une boucle do… while :
Essayer ce code !
La boucle do… while s’avère donc extrêmement intéressante si vous avez besoin pour une raison ou pour
une autre d’effectuer toujours au moins un passage dans une boucle pour faire fonctionner un script.
La boucle for
La boucle for (« pour ») va nous permettre de répéter une
série d’instructions à partir d’une valeur donnée, jusqu’à
une certaine valeur seuil.
Cette boucle utilise une syntaxe assez condensée qui fait

qu’elle est la plus utilisée en JavaScript car elle est la plus
simple à écrire, la plus performante et au final la plus
lisible.
Essayer ce code !
BTS SNIR
___________________________________________________________________________
Dans une boucle for, nous allons tout d’abord devoir
initialiser une variable, puis poser notre condition, et finalement incrémenter ou décrémenter notre
variable.
Notez que l’on sépare les différentes phases ou déclarations à l’intérieur de notre boucle for par des points
virgules.
Retenez aussi que l’initialisation est exécutée avant tout passage dans la boucle for, tandis que
l’incrémentation est exécutée à la fin de chaque passage dans la boucle for.
Finalement, notez également que vous n’êtes obligé ni d’initialiser, ni d’écrire la condition, ni
d’incrémenter à l’intérieur de la boucle for.
Cependant, je vous recommande autant que possible d’écrire vos boucles for comme moi pour le moment,
car cela me semble plus simple et plus clair.
2.15 DECOUVERTE DES FONCTIONS JAVASCRIPT
Présentation des fonctions

Une fonction correspond à un bloc de code dont le but est d’effectuer une tâche précise.
Par exemple, la fonction alert() a été créée afin d’afficher des messages dans des boîtes de dialogue.
Le grand intérêt des fonctions est que l’on a pas à redéfinir le code de notre fonction à chaque fois : une
fois notre fonction créée, nous n’avons plus qu’à l’appeler en mentionnant son nom pour pouvoir l’utiliser
autant de fois que nous le voulons.
On peut dissocier deux grands types de fonctions en JavaScript : les fonctions natives et celles que nous
allons créer nous-mêmes.
Les fonctions natives, ou prêtes à l’emploi, sont des fonctions qui ont déjà été créées par d’autres
développeurs et qui ont été intégrées au langage JavaScript lui-même.
Par exemple, la fonction alert() est une fonction native : nous n’avons jamais défini son code, nous nous
contentons de l’appeler pour l’utiliser.
Cependant, vous devez savoir que lorsqu'on utilise alert(), il y a tout un code long et complexe qui
s'exécute pour nous permettre d'afficher notre boîte de dialogue.
Le JavaScript possède de nombreuses fonctions natives. Cela est très pratique pour nous car, encore une
fois, nous n’avons qu’à appeler ces fonctions afin qu’elles effectuent les tâches voulues à notre place sans
avoir à nous soucier de savoir comment elles fonctionnent.

BTS SNIR
___________________________________________________________________________
Cependant, dans certains cas, nous aurons des besoins plus spécifiques et nous serons donc obligés de
créer nous-mêmes nos propres fonctions.
Création d’une fonction JavaScript

Dans cette partie, nous allons créer une première fonction JavaScript simple.
Cela va être pour nous l’occasion de voir « l’envers du décor » et de découvrir la syntaxe des fonctions en
JavaScript et comment celles-ci fonctionnent.
Je vous propose de créer une fonction multiplication() dont

le rôle sera de multiplier deux nombres entre eux, quels
que soient ces nombres.
Pour créer une fonction en JavaScript, il faut utiliser le

mot clef function (fonction en anglais), suivi du nom de la
fonction que l’on souhaite créer, puis d’un couple de
parenthèses et d’un couple d’accolades comme ceci :
Les noms des fonctions suivent les mêmes règles que ceux des variables. Vous pouvez donc donner le
nom que vous voulez à votre fonction du moment que celui-ci commence par une lettre, ne contient pas
d’espace ni de caractères spéciaux et n’est pas déjà pris nativement par le JavaScript.
Ici, j’ai choisi d’appeler ma fonction « multiplication ».
Entre les accolades, nous allons écrire le code qui doit être exécuté lorsqu’on va appeler notre fonction
par la suite.
Le couple de parenthèses est très important car ce sont elles qui vont nous permettre de déclencher
l’exécution de la fonction, entre autres.
A l’intérieur de ces parenthèses, nous allons également pouvoir passer ce que l’on appelle des paramètres
à notre fonction.
Les paramètres correspondent à ce dont la fonction a besoin pour fonctionner.
Par exemple, dans notre cas, le rôle de notre fonction est de multiplier deux nombres entre eux. Notre
fonction va donc avoir besoin de recevoir ces deux nombres.
Comme on veut pouvoir multiplier n’importe quels nombres entre eux, nous n’allons pas préciser de
nombres précis ici, mais plutôt utiliser arbitrairement deux lettres comme x et y par exemple.
Nous allons ensuite nous resservir de ces deux lettres à l’intérieur du code de notre fonction bien
évidemment.
Voici donc à quoi va finalement ressembler notre fonction :

BTS SNIR
___________________________________________________________________________
Ca y est, notre première fonction est créée et opérationnelle.
Pour la faire fonctionner, nous n’avons plus qu’à l’appeler grâce à son nom en précisant cette fois-ci entre
parenthèses les nombres que l’on souhaite multiplier entre eux. La fonction va alors exécuter son code.
Essayer ce code !
Comme vous pouvez le voir, notre fonction a bien multiplié les deux nombres entre eux et a renvoyé le
résultat grâce à alert(). Remarquez par ailleurs qu'on peut tout à fait inclure une autre fonction dans une
fonction (ici, nous avons inclus alert() dans notre fonction multiplication()).
Pour bien comprendre : lorsque l’on a appelé notre fonction, nous lui avons passé les nombres 5 et 10 qui
ont pris la place de x et y. Notre fonction a ensuite effectué le calcul « 5 * 10 » et a alerté le résultat.
L’intérêt majeur des fonctions, une fois encore, est qu’une fois créées on peut les utiliser à l’infini.
Ainsi, nous pouvons maintenant utiliser notre fonction multiplication() pour multiplier toutes sortes de
nombres entre eux :
Essayer ce code !

BTS SNIR
___________________________________________________________________________
Paramètres ou arguments
Afin d’être tout à fait précis, il me semble important de bien différencier les termes paramètres et
arguments.
Cela devrait également vous aider à bien comprendre ce qu’il s’est passé au dessus.
Tout d’abord, vous devez savoir que toutes les fonctions n’ont pas forcément besoin de paramètres (en
revanche, la paire de parenthèses est elle obligatoire).
Pour savoir si votre fonction a oui ou non besoin de paramètres, posez vous la question de ce dont elle a
besoin pour fonctionner.
Si celle-ci utilise une partie « variable » dans son code (des nombres à multiplier, un message à afficher,
etc.), alors votre fonction aura besoin de ces « variables » et aura donc besoin de paramètres.
On parle de paramètre lorsque l’on crée la fonction. Un paramètre n’est qu’un « témoin ».
Lorsqu’ensuite on passe de vraies valeurs à nos fonctions, on parle alors d’arguments. Prenez bien le
temps de faire cette distinction car connaître ceci aide beaucoup pour comprendre les fonctions.
Par exemple, dans notre exemple ci-dessus, les lettres x et y sont des paramètres tandis que les chiffres 5
et 10 sont des arguments qui ont été passés à notre fonction.
2.16 Faire retourner des valeurs à nos fonctions

Dans l’exemple précédent, notre fonction multiplication avait en fait deux rôles : calculer le produit de
deux nombres et renvoyer le résultat avec un alert().
Cette façon de faire n’est pas toujours la meilleure. En effet, nous n’avons ici aucun contrôle sur le
résultat en soi, puisque celui-ci est retourné dès que notre fonction est appelée.
Souvent, nous préférerons pouvoir récupérer le résultat d’une fonction afin de pouvoir le réutiliser ou
l’afficher plus tard.
Pour faire cela, nous allons cette fois-ci utiliser une

instruction return plutôt qu'un alert().
L’instruction return va retourner simplement le résultat

d’une fonction, sans l'afficher.
Pour récupérer le résultat retourné en JavaScript, il existe plusieurs solutions. Pour le moment, à notre
niveau, nous allons nous contenter d’une seule : le stockage du résultat dans une variable.

BTS SNIR
___________________________________________________________________________
De cette manière, nous allons ensuite pouvoir effectuer toutes sortes d’opérations sur notre variable ou
afficher son contenu lorsque nous le voulons.
Essayer ce code !
Ici, nous avons placé le résultat de la multiplication de 5 par 10 dans une variable resultat. Nous avons
ensuite ajouté 2 au contenu de notre variable puis avons finalement affiché son contenu.
Comme nos scripts et nos fonctions sont simples, il est possible que tout cela vous semble futile pour le
moment. Cependant, je vous recommande vraiment de vous attacher à ces points qui vont s’avérer très
utiles par la suite.
Attention cependant : l’instruction return met également fin à l’exécution d’une fonction, ce qui signifie
que toutes les autres opérations qui suivraient un return dans une fonction seraient ignorées.
Essayer ce code !
Plus sur les fonctions en JavaScript

Pour le moment, nous allons nous limiter à cette première approche des fonctions.
Nous verrons plus tard dans ce cours de nouveaux types de fonctions un peu plus complexes ainsi que
d’autres utilisations possibles pour nos fonctions.

BTS SNIR
___________________________________________________________________________
Bibliographie :
Pierre-Giraud

Cours Javascript 1

Transféré par

Informations du document

Titre original

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 1

Transféré par

Droits d'auteur :

Formats disponibles

BTS SNIR

1.1 Présentation du cours

P.M. Lycée Durzy Page 1 sur 40

1.2 INTRODUCTION AU JAVASCRIPT

Le JavaScript, un langage client-side

P.M. Lycée Durzy Page 2 sur 40

L’important pour le moment est que vous reteniez le schéma suivant :

Le JavaScript, un langage orienté objet

JavaScript, Java et HTML

P.M. Lycée Durzy Page 3 sur 40

1.3 ENVIRONNEMENT DE TRAVAIL

Les sites web de test

2 Les bases en JavaScript

2.1 OU ECRIRE LE CODE JAVASCRIPT

 Dans l’élément head d’une page HTML ;

P.M. Lycée Durzy Page 4 sur 40

Du JavaScript dans l’élément head d’une page 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.

Du JavaScript dans l’élément body d’une page HTML

P.M. Lycée Durzy Page 5 sur 40

Regardez plutôt l’exemple ci-dessous :

Du JavaScript dans un fichier « .js » séparé

P.M. Lycée Durzy Page 6 sur 40

Méthode utilisée dans ce cours

C’est la meilleure manière selon moi pour faciliter votre apprentissage.

2.2 SYNTAXE, INDENTATION, COMMENTAIRES

Nous étudierons les syntaxes spécifiques

P.M. Lycée Durzy Page 7 sur 40

Les commentaires en JavaScript

Cela peut être utile à la fois pour vous même si vous

En JavaScript, il existe deux types de commentaires

Notez que la syntaxe des commentaires multi-lignes

2.3 LES VARIABLES EN JAVASCRIPT

Le nom des variables en JavaScript

 Le nom des variables doit commencer par une lettre ;

P.M. Lycée Durzy Page 8 sur 40

Déclarer une variable en JavaScript

 Déclarer une variable et lui

Voyons immédiatement un premier

Deux remarques importantes : les types de valeurs et le signe « = »

La deuxième remarque concerne le signe « = » (signe égal).

Faites très attention à la signification de ce signe en JavaScript et en programmation en général, car ce

P.M. Lycée Durzy Page 9 sur 40

2.4 LES TYPES DE VALEURS EN JAVASCRIPT

P.M. Lycée Durzy Page 10 sur 40

Le type de valeurs Number

Pour affecter une valeur de type Number à

Faites attention : lorsque nous codons

Le type de valeurs String

Si l’on veut stocker une chaîne de caractères

Ce sont justement ces apostrophes ou

Au niveau des apostrophes / guillemets, vous pouvez

Cependant, si la valeur stockée contient elle-même des

P.M. Lycée Durzy Page 11 sur 40

Ainsi, même un nombre sera considéré comme étant

Faites bien attention à cela, car ça va avoir une

Le type de valeurs Boolean

Ce type de valeur peut sembler plus compliqué à

Une nouvelle fois, faites bien attention : pour

Autres valeurs stockées en JavaScript

Parmi les autres valeurs remarquables, on peut citer

Une variable peut encore contenir la valeur « NaN »