100% ont trouvé ce document utile (1 vote)

594 vues63 pages

Introduction au JavaScript pour le Web

Transféré par

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

100% ont trouvé ce document utile (1 vote)

594 vues63 pages

Introduction au JavaScript pour le Web

Transféré par

THE SINAN

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Vous êtes sur la page 1/ 63

Java Script

Introduction :

Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que
simple langage de script, JavaScript est désormais un des poids lourds du
développement Web ! Qui plus est, il se démocratise au sein d'autres environnements
comme les serveurs avec le célèbre Node.js, les applications pour smartphones et
tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les
logiciels multiplateformes.

Bref, JavaScript est partout ! Mais avant de se targuer de créer des applications pour
serveurs, tablettes et Windows, il faut d'abord apprendre la base et s'intéresser aux
origines : le JavaScript au sein des pages Web. Et ça tombe bien ; c'est le sujet de ce
cours. Chemin faisant, vous apprendrez la structure du langage, à manipuler les
événements, interagir avec les éléments HTML, dialoguer avec le serveur, faire un
système d'envoi d'images, faire un peu de dessin et des animations, et bien d'autres
choses !

Voici quelques exemples de ce qui est réalisable grâce au JavaScript :

 Un système de chat, comme celui de Facebook ;

 Une suggestion lors de la frappe dans un champ de texte, comme lors d'une
recherche avec Google ;
 Un lecteur de vidéos ou de musiques, aussi puissant que celui de Youtube,
grâce aux balises <video> et <audio> ;
 Des jeux exploitants la balise <canvas> comme Torus, un Tetris en 3D ;
 La modélisation 3D d'une Lamborghini affichée grâce à l'API WebGL et à la
bibliothèque Three.js ;
 Et bien d'autres choses !
Avant d'entrer directement dans le vif du sujet, ce chapitre va vous apprendre ce
qu'est le JavaScript, ce qu'il permet de faire, quand il peut ou doit être utilisé et
comment il a considérablement évolué depuis sa création en 1995. Nous
aborderons aussi plusieurs notions de bases telles que les définitions exactes de
certains termes.

Définition :

Le JavaScript est un langage de programmation de scripts orienté objet.

Les versions du JavaScript

Les versions du JavaScript sont basées sur celles de l'ECMAScript (que nous
abrégeons ES ci-dessous). Ainsi, il existe :

 ES 1 et ES 2, qui sont les prémices du langage JavaScript ;

 ES 3 (sorti en décembre 1999) ;
 ES 4, qui a été abandonné en raison de modifications trop importantes qui ne
furent pas appréciées ;
 ES 5 (sorti en décembre 2009), la version la plus répandue et utilisée à ce jour ;
 ES 6, finalisé en décembre 2014 et dont l'implémentation avait déjà été
commencée avant cette date au sein de plusieurs navigateurs.
Ce cours portera sur la version 5 de l'ECMAScript, la version 6 n'étant pas encore très
bien supportée à l'heure où nous écrivons ces lignes.

Premiers pas en JavaScript

Comme indiqué précédemment, le JavaScript est un langage essentiellement utilisé
avec le HTML, vous allez donc apprendre dans ce chapitre comment intégrer ce
langage à vos pages Web, découvrir sa syntaxe de base et afficher un message sur
l'écran de l'utilisateur.

Afficher une boite de dialogue :

Le Hello World!
Ne dérogeons pas à la règle traditionnelle qui veut que tous les tutoriels de
programmation commencent par afficher le texte « Hello World! » (« Bonjour le monde !
» en français) à l'utilisateur. Voici un code HTML simple contenant une instruction (nous
allons y revenir) JavaScript, placée au sein d'un élément<script>:

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

Une boîte de dialogue s'ouvre, vous présentant le texte Hello world!

Les nouveautés
Dans le code HTML donné précédemment, on remarque quelques nouveautés.

Tout d'abord, un élément<script>est présent : c'est lui qui contient le code JavaScript
que voici :

alert('Hello world!');
Il s'agit d'une instruction, c'est-à-dire une commande, un ordre, ou plutôt une action que
l'ordinateur va devoir réaliser. Les langages de programmation sont constitués d'une
suite d'instructions qui, mises bout à bout, permettent d'obtenir un programme ou un
script complet.

Dans cet exemple, il n'y a qu'une instruction : l'appel de la fonctionalert().

La boîte de dialoguealert()
alert()est une instruction simple, appelée fonction, qui permet d'afficher une boîte de
dialogue contenant un message. Ce message est placé entre apostrophes, elles-
mêmes placées entre les parenthèses de la fonctionalert().

La syntaxe du JavaScript
Les instructions
La syntaxe du JavaScript n'est pas compliquée. De manière générale, les instructions doivent
être séparées par un point-virgule que l'on place à la fin de chaque instruction :
instruction_1;

instruction_2;

instruction_3;
En réalité le point-virgule n'est pas obligatoire si l'instruction qui suit se trouve sur la
ligne suivante, comme dans notre exemple. En revanche, si vous écrivez plusieurs
instructions sur une même ligne, comme dans l'exemple suivant, le point-virgule est
fortement recommandé. Si le point-virgule n'est pas mis, l'interpréteur risque de ne
pas comprendre qu'il s'agit d'une autre instruction et retournera une erreur.

Instruction_1;Instruction_2
Instruction_3
Les espaces
Le JavaScript n'est pas sensible aux espaces. Cela veut dire que vous pouvez aligner
des instructions comme vous le voulez, sans que cela ne gêne en rien l'exécution du
script. Par exemple, ceci est correct :

instruction_1;
instruction_1_1;
instruction_1_2;
instruction_2; instruction_3;
Les commentaires
Les commentaires sont des annotations faites par le développeur pour expliquer le
fonctionnement d'un script, d'une instruction ou même d'un groupe d'instructions. Les
commentaires ne gênent pas l'exécution d'un script.

Il existe deux types de commentaires : les commentaires de fin de ligne, et les commentaires
multilignes.

Commentaires de fin de ligne

Ils servent à commenter une instruction. Un tel commentaire commence par deux
slashs

instruction_1; // Ceci est ma première instruction

instruction_2;
// La troisième instruction ci-dessous :
instruction_3;
Le texte placé dans un commentaire est ignoré lors de l'exécution du script, ce qui veut dire que
vous pouvez mettre ce que bon vous semble en commentaire, même une instruction (qui ne
sera évidemment pas exécutée) :

instruction_1; // Ceci est ma première instruction

instruction_2;

// La troisième instruction ci-dessous pose problème, je l'annule temporairement

// instruction_3;
Commentaires multilignes

Ce type de commentaires permet les retours à la ligne. Un commentaire multiligne

commence par /* et se termine par */ :

* Ce script comporte 3 instructions :

- Instruction 1 qui fait telle chose

- Instruction 2 qui fait autre chose

- Instruction 3 qui termine le script

instruction_1;

instruction_2;

instruction_3; // Fin du script

Remarquez qu'un commentaire multiligne peut aussi être affiché sur une seule ligne :

instruction_1; /* Ceci est ma première instruction */

instruction_2;
Les fonctions
Dans l'exemple duHello world!, nous avons utilisé la fonctionalert(). Nous
reviendrons en détail sur le fonctionnement des fonctions, mais pour les chapitres
suivants, il sera nécessaire de connaître sommairement leur syntaxe.

Une fonction se compose de deux choses : son nom, suivi d'un couple de parenthèses
(une ouvrante et une fermante) :
myFunction(); // « function » veut dire « fonction » en anglais
Entre les parenthèses se trouvent les arguments, que l'on appelle aussi paramètres.
Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas
duHello world!, ce sont les mots « Hello world! » qui sont passés en paramètre :

alert('Hello world!');
Où placer le code dans la page
Les codes JavaScript sont insérés au moyen de l'élément<script>. Cet élément
possède un attributtypequi sert à indiquer le type de langage que l'on va utiliser. Dans
notre cas, il s'agit de JavaScript, mais ça pourrait être autre chose, comme du VBScript,
bien que ce soit extrêmement rare.

Si vous n'utilisez pas le HTML5, sachez que l'attributtypeprend comme

valeurtext/javascript, qui est en fait le type MIME d'un code JavaScript.

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

</body>
</html>
Le JavaScript externe
Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe,
portant l'extension.js. Ce fichier est ensuite appelé depuis la page Web au moyen de
l'élément<script>et de son attributsrcqui contient l'URL du fichier.js. Voici tout de
suite un petit exemple :

alert('Hello world!');

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

</body>
</html>
On suppose ici que le fichier hello.js se trouve dans le même répertoire que la page Web.

Positionner l'élément<script>
La plupart des cours de JavaScript, et des exemples donnés un peu partout, montrent qu'il faut
placer l'élément<script>au sein de l'élément<head>quand on l'utilise pour charger un fichier
JavaScript. C'est correct, oui, mais il y a mieux !

Une page Web est lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le<head>,
puis les éléments de<body>les uns à la suite des autres. Si vous appelez un fichier JavaScript
dès le début du chargement de la page, le navigateur va donc charger ce fichier, et si ce dernier
est volumineux, le chargement de la page s'en trouvera ralenti. C'est normal puisque le
navigateur va charger le fichier avant de commencer à afficher le contenu de la page.
Pour pallier ce problème, il est conseillé de placer les éléments<script>juste avant la
fermeture de l’élément<body>, comme ceci :

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

<p>
<!--

Contenu de la page Web

...

-->
</p>

</body>
</html>
Les variables :
Nous abordons enfin le premier chapitre technique de ce cours ! Tout au long de sa lecture
vous allez découvrir l'utilisation des variables, les différents types principaux qu'elles peuvent
contenir et surtout comment faire vos premiers calculs. Vous serez aussi initiés à la
concaténation et à la conversion des types. Et enfin, un élément important de ce chapitre : vous
allez apprendre l'utilisation d'une nouvelle fonction vous permettant d'interagir avec l'utilisateur !

Qu'est-ce qu'une variable ?

Pour faire simple, une variable est un espace de stockage sur votre ordinateur
permettant d'enregistrer tout type de données, que ce soit une chaîne de caractères,
une valeur numérique ou bien des structures un peu plus particulières.

Déclarer une variable

Tout d'abord, qu'est-ce que « déclarer une variable » veut dire ? Il s'agit tout
simplement de lui réserver un espace de stockage en mémoire, rien de plus. Une fois la
variable déclarée, vous pouvez commencer à y stocker des données sans problème.

Pour déclarer une variable, il vous faut d'abord lui trouver un nom. Il est important de
préciser que le nom d'une variable ne peut contenir que des
caractères alphanumériques, autrement dit les lettres de A à Z et les chiffres de 0 à 9 ;
l'underscore (_) et le dollar ($) sont aussi acceptés. Autre chose : le nom de la variable
ne peut pas commencer par un chiffre et ne peut pas être constitué uniquement de
mots-clés utilisés par le JavaScript. Par exemple, vous ne pouvez pas créer une
variable nomméevarcar vous allez constater que ce mot-clé est déjà utilisé, en
revanche vous pouvez créer une variable nommée var_

Pour déclarer une variable, il vous suffit d'écrire la ligne suivante :

var myVariable;
Le JavaScript étant un langage sensible à la casse, faites bien attention à ne pas vous
tromper sur les majuscules et minuscules utilisées car, dans l'exemple suivant, nous
avons bel et bien trois variables différentes déclarées :
var myVariable;

var myvariable;

var MYVARIABLE;
Le mot-clévarest présent pour indiquer que vous déclarez une variable. Une fois celle-ci
déclarée, il ne vous est plus nécessaire d'utiliser ce mot-clé pour cette variable et vous
pouvez y stocker ce que vous souhaitez :

var myVariable;

myVariable = 2;
Le signe = sert à attribuer une valeur à la variable ; ici nous lui avons attribué le nombre
2. Quand on donne une valeur à une variable, on dit que l'on fait une affectation, car on
affecte une valeur à la variable.

Il est possible de simplifier ce code en une seule ligne :

var myVariable = 5.5; // Comme vous pouvez le constater, les nombres à virgule s'écrivent avec
un point.
De même, vous pouvez déclarer et assigner des variables sur une seule et même ligne
:

var myVariable1, myVariable2 = 4, myVariable3;

Ici, nous avons déclaré trois variables en une ligne mais seulement la deuxième s'est vu
attribuer une valeur

Et enfin une dernière chose qui pourra vous être utile de temps en temps :

var myVariable1, myVariable2;

myVariable1 = myVariable2 = 2;
Les deux variables contiennent maintenant le nombre 2 ! Vous pouvez faire la même
chose avec autant de variables que vous le souhaitez.

Les types de variables

Le JavaScript est un langage typé dynamiquement. Cela veut dire, généralement, que
toute déclaration de variable se fait avec le mot-clévarsans distinction du contenu,
tandis qu'avec certains autres langages, comme le C, il est nécessaire de préciser quel
type de contenu la variable va devoir contenir.

En JavaScript, nos variables sont typées dynamiquement, ce qui veut dire que l'on peut
y mettre du texte en premier lieu puis l'effacer et y mettre un nombre quel qu'il soit, et
ce, sans contraintes.

Commençons tout d'abord par voir quels sont les trois types principaux en JavaScript :
 Le type numérique (alias number) : il représente tout nombre, que ce soit un
entier, un nombre négatif, scientifique, etc. Bref, c'est le type pour les nombres.
Pour assigner un type numérique à une variable, il vous suffit juste d'écrire le
nombre seul :var number = 5;
Tout comme de nombreux langages, le JavaScript reconnaît plusieurs écritures
pour les nombres, comme l'écriture décimalevar number = 5.5;ou l'écriture
scientifiquevar number = 3.65e+5;ou encore l'écriture hexadécimalevar number
= 0x391;
Bref, il existe pas mal de façons d'écrire les valeurs numériques !
 Les chaînes de caractères (alias string) : ce type représente n'importe quel
texte. On peut l'assigner de deux façons différentes :

 var text1 = "Mon premier texte"; // Avec des guillemets

 var text2 = 'Mon deuxième texte'; // Avec des apostrophes

Il est important de préciser que si vous écrivezvar myVariable = '2';alors le
type de cette variable est une chaîne de caractères et non pas un type
numérique.
Une autre précision importante, si vous utilisez les apostrophes pour « encadrer
» votre texte et que vous souhaitez utiliser des apostrophes dans ce même texte,
il vous faudra alors « échapper » vos apostrophes de cette façon :

var text = 'Ça c\'est quelque chose !';

Pourquoi ? Car si vous n'échappez pas votre apostrophe, le JavaScript croira
que votre texte s'arrête à l'apostrophe contenue dans le mot « c'est ». À noter
que ce problème est identique pour les guillemets.
En ce qui nous concerne, nous utilisons généralement les apostrophes mais
quand le texte en contient trop alors les guillemets peuvent être bien utiles. C'est
à vous de voir comment vous souhaitez présenter vos codes, libre à vous de
faire comme vous le souhaitez
Les booléens (alias boolean) : les booléens sont un type bien particulier que vous
n'étudierez réellement qu'au chapitre suivant. Dans l'immédiat, pour faire simple, un
booléen est un type à deux états qui sont les suivants : vrai ou faux. Ces deux états
s'écrivent de la façon suivante :

var isTrue = true;

var isFalse = false;

Voilà pour les trois principaux types. Il en existe d'autres, mais nous les étudierons lorsque ce
sera nécessaire.

Tester l'existence de variables avectypeof

Il se peut que vous ayez un jour ou l'autre besoin de tester l'existence d'une variable ou
d'en vérifier son type. Dans ce genre de situations, l'instructiontypeofest très utile, voici
comment l'utiliser :

var number = 2;

alert(typeof number); // Affiche : « number »

var text = 'Mon texte';

alert(typeof text); // Affiche : « string »

var aBoolean = false;

alert(typeof aBoolean); // Affiche : « boolean »

Simple non ? Et maintenant voici comment tester l'existence d'une variable :

alert(typeof nothing); // Affiche : « undefined »

Voilà un type de variable très important ! Si l'instructiontypeofvous renvoieundefined,
c'est soit que votre variable est inexistante, soit qu'elle est déclarée mais ne contient
rien.

Les opérateurs arithmétiques

Maintenant que vous savez déclarer une variable et lui attribuer une valeur, nous pouvons
entamer la partie concernant les opérateurs arithmétiques. Vous verrez plus tard qu'il existe
plusieurs sortes d'opérateurs mais dans l'immédiat nous voulons faire des calculs, nous allons
donc nous intéresser exclusivement aux opérateurs arithmétiques. Ces derniers sont à la base
de tout calcul et sont au nombre de cinq
Concernant le dernier opérateur, le modulo est tout simplement le reste d'une division. Par
exemple, si vous divisez 5 par 2 alors il vous reste 1, c'est le modulo !

Quelques calculs simples

Faire des calculs en programmation est quasiment tout aussi simple que sur une
calculatrice, exemple :

var result = 3 + 2;

alert(result); // Affiche : « 5 »
Alors vous savez faire des calculs avec deux nombres c'est bien, mais avec deux
variables contenant elles-mêmes des nombres c'est mieux :

var number1 = 3, number2 = 2, result;

result = number1 * number2;

alert(result); // Affiche : « 6 »
On peut aller encore plus loin comme ça en écrivant des calculs impliquant plusieurs
opérateurs ainsi que des variables :

var divisor = 3, result1, result2, result3;

result1 = (16 + 8) / 2 - 2 ; // 10
result2 = result1 / divisor;

result3 = result1 % divisor;

alert(result2); // Résultat de la division : 3,33

alert(result3); // Reste de la division : 1

Vous remarquerez que nous avons utilisé des parenthèses pour le calcul de la
variableresult1. Elles s'utilisent comme en mathématiques : grâce à elles le navigateur
calcule d'abord 16 + 8 puis divise le résultat par 2.

Simplifier encore plus vos calculs

Par moment vous aurez besoin d'écrire ce genre de choses :

var number = 3;

number = number + 5;

alert(number); // Affiche : « 8 »
Ce n'est pas spécialement long ou compliqué à faire, mais cela peut devenir très vite
rébarbatif, il existe donc une solution plus simple pour ajouter un nombre à une variable
:

var number = 3;

number += 5;

alert(number); // Affiche : « 8 »
Ce code a exactement le même effet que le précédent mais est plus rapide à écrire.

À noter que ceci ne s'applique pas uniquement aux additions mais fonctionne avec tous
les autres opérateurs arithmétiques :

 +=
 -=
 *=
 /=
 %=
 Certains opérateurs ont des particularités cachées. Prenons l'opérateur + ; en plus de
faire des additions, il permet de faire ce que l'on appelle des concaténations entre des
chaînes de caractères.
 La concaténation
 Une concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre,
comme dans cet exemple :

 var hi = 'Bonjour', name = 'toi', result;

 result = hi + name;

 alert(result); // Affiche : « Bonjourtoi »

 Cet exemple va afficher la phrase « Bonjourtoi ». Vous remarquerez qu'il n'y a pas
d'espace entre les deux mots, en effet, la concaténation respecte ce que vous avez écrit
dans les variables à la lettre près. Si vous voulez un espace, il vous faut en ajouter un à
l'une des variables, comme ceci :var hi = 'Bonjour ';
 Autre chose, vous souvenez-vous toujours de l'addition suivante ?

 var number = 3;

 number += 5;
 Eh bien vous pouvez faire la même chose avec les chaînes de caractères :

 var text = 'Bonjour ';

 text += 'toi';

 alert(text); // Affiche « Bonjour toi ».

 Interagir avec l'utilisateur
La concaténation est le bon moment pour introduire votre toute première interaction
avec l'utilisateur grâce à la fonctionprompt(). Voici comment l'utiliser :

var userName = prompt('Entrez votre prénom :');

alert(userName); // Affiche le prénom entré par l'utilisateur

Un aperçu de la fonction prompt()

La fonctionprompt()s'utilise commealert()mais a une petite particularité. Elle renvoie
ce que l'utilisateur a écrit sous forme d'une chaîne de caractères, voilà pourquoi on écrit
de cette manière :

var text = prompt('Tapez quelque chose :');

Ainsi, le texte tapé par l'utilisateur se retrouvera directement stocké dans la
variabletext.

Maintenant nous pouvons essayer de dire bonjour à nos visiteurs :

var start = 'Bonjour ', name, end = ' !', result;

name = prompt('Quel est votre prénom ?');

result = start + name + end;

alert(result);

À noter que dans notre cas de figure actuel, nous concaténons des chaînes de caractères entre
elles, mais sachez que vous pouvez très bien concaténer une chaîne de caractères et un
nombre de la même manière :

var text = 'Voici un nombre : ', number = 42, result;

result = text + number;

alert(result); // Affiche : « Voici un nombre : 42 »

Convertir une chaîne de caractères en nombre
Essayons maintenant de faire une addition avec des nombres fournis par l'utilisateur :

var first, second, result;

first = prompt('Entrez le premier chiffre :');

second = prompt('Entrez le second chiffre :');

result = first + second;

alert(result);

Si vous avez essayé ce code, vous avez sûrement remarqué qu'il y a un problème.
Admettons que vous ayez tapé deux fois le chiffre 1, le résultat sera 11… Pourquoi ?
Eh bien la raison a déjà été écrite quelques lignes plus haut :

Citation

Elle renvoie ce que l'utilisateur a écrit sous forme d'une chaîne de caractères […]

Voilà le problème, tout ce qui est écrit dans le champ de texte deprompt()est récupéré
sous forme d'une chaîne de caractères, que ce soit un chiffre ou non. Du coup, si vous
utilisez l'opérateur +, vous ne ferez pas une addition mais une concaténation !

C'est là que la conversion des types intervient. Le concept est simple : il suffit de
convertir la chaîne de caractères en nombre. Pour cela, vous allez avoir besoin de la
fonctionparseInt()qui s'utilise de cette manière :

var text = '1337', number;

number = parseInt(text);

alert(typeof number); // Affiche : « number »

alert(number); // Affiche : « 1337 »

Maintenant que vous savez comment vous en servir, on va pouvoir l'adapter à notre
code :

var first, second, result;

first = prompt('Entrez le premier chiffre :');

second = prompt('Entrez le second chiffre :');

result = parseInt(first) + parseInt(second);

alert(result);

Maintenant, si vous écrivez deux fois le chiffre 1, vous obtiendrez bien 2 comme résultat.

Convertir un nombre en chaîne de caractères

Pour clore ce chapitre, nous allons voir comment convertir un nombre en chaîne de
caractères. Il est déjà possible de concaténer un nombre et une chaîne sans
conversion, mais pas deux nombres, car ceux-ci s'ajouteraient à cause de l'emploi du +.
D'où le besoin de convertir un nombre en chaîne. Voici comment faire :

var text, number1 = 4, number2 = 2;

text = number1 + '' + number2;

alert(text); // Affiche : « 42 »

Qu'avons-nous fait ? Nous avons juste ajouté une chaîne de caractères vide entre les
deux nombres, ce qui aura eu pour effet de les convertir en chaînes de caractères.

Il existe une solution un peu moins archaïque que de rajouter une chaîne vide mais
vous la découvrirez plus tard.

Les Conditions :
Dans le chapitre précédent vous avez appris comment créer et modifier des variables.
C'est déjà bien mais malgré tout on se sent encore un peu limité dans nos codes. Dans
ce chapitre, vous allez donc découvrir les conditions de tout type et surtout vous rendre
compte que les possibilités pour votre code seront déjà bien plus ouvertes car vos
conditions vont influer directement sur la façon dont va réagir votre code à certains
critères.

En plus des conditions, vous allez aussi pouvoir approfondir vos connaissances sur un
fameux type de variable : le booléen !
La base de toute condition : les booléens :
La condition if else :

Enfin nous abordons les conditions ! Ou, plus exactement, les structures
conditionnelles, mais nous écrirons dorénavant le mot « condition » qui sera quand
même plus rapide à écrire et à lire.

Avant toute chose, précisons qu'il existe trois types de conditions, nous allons
commencer par la conditionif elsequi est la plus utilisée.

La structureifpour dire « si »

Effectivement, nous arrivons à obtenir un résultat sous forme de booléen, mais c'est
tout. Maintenant, il serait bien que ce résultat puisse influer sur l'exécution de votre
code. Nous allons tout de suite entrer dans le vif du sujet avec un exemple très simple :

if (true) {

alert("Ce message s'est bien affiché.");

if (false) {

alert("Pas la peine d'insister, ce message ne s'affichera pas.");

Tout d'abord, voyons de quoi est constitué une condition :

 De la structure conditionnelleif;
 De parenthèses qui contiennent la condition à analyser, ou plus précisément le
booléen retourné par les opérateurs conditionnels ;
 D'accolades qui permettent de définir la portion de code qui sera exécutée si la
condition se vérifie. À noter que nous plaçons ici la première accolade à la fin de
la première ligne de condition, mais vous pouvez très bien la placer comme vous
le souhaitez (en dessous, par exemple).
Comme vous pouvez le constater, le code d'une condition est exécuté si le booléen
reçu esttruealors quefalseempêche l'exécution du code.
Et vu que nos opérateurs conditionnels renvoient des booléens, nous allons donc
pouvoir les utiliser directement dans nos conditions :

if (2 < 8 && 8 >= 4) { // Cette condition renvoie « true », le code est donc exécuté

alert('La condition est bien vérifiée.');

if (2 > 8 || 8 <= 4) { // Cette condition renvoie « false », le code n'est donc pas exécuté

alert("La condition n'est pas vérifiée mais vous ne le saurez pas vu que ce code ne
s'exécute pas.");

Comme vous pouvez le constater, avant nous décomposions toutes les étapes d'une condition
dans plusieurs variables, dorénavant nous vous conseillons de tout mettre sur une seule et
même ligne car ce sera plus rapide à écrire pour vous et plus facile à lire pour tout le monde.

Petit intermède : la fonctionconfirm()

Afin d'aller un petit peu plus loin dans le cours, nous allons apprendre l'utilisation d'une
fonction bien pratique :confirm()! Son utilisation est simple : on lui passe en paramètre
une chaîne de caractères qui sera affichée à l'écran et elle retourne un booléen en
fonction de l'action de l'utilisateur ; vous allez comprendre en essayant :

if (confirm('Voulez-vous exécuter le code JavaScript de cette page ?')) {

alert('Le code a bien été exécuté !');

}
Un aperçu de la fonction confirm()
Comme vous pouvez le constater, le code s'exécute lorsque vous cliquez sur le
boutonOKet ne s'exécute pas lorsque vous cliquez surAnnuler. En clair : dans le premier
cas la fonction renvoietrueet dans le deuxième cas elle renvoiefalse. Ce qui en fait
une fonction très pratique à utiliser avec les conditions.

Nous pouvons maintenant revenir à nos conditions.

La structureelsepour dire « sinon »

Admettons maintenant que vous souhaitiez exécuter un code suite à la vérification
d'une condition et exécuter un autre code si elle n'est pas vérifiée. Il est possible de le
faire avec deux conditionsifmais il existe une solution beaucoup plus simple, la
structureelse:

if (confirm('Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur "OK" si
c\'est le cas.')) {

alert('Vous allez être redirigé vers le site.');

else {

alert("Désolé, vous n'avez pas accès à ce site.");

Comme vous pouvez le constater, la structureelsepermet d'exécuter un certain code si

la condition n'a pas été vérifiée, et vous allez rapidement vous rendre compte qu'elle
vous sera très utile à de nombreuses occasions.
Concernant la façon d'indenter vos structuresif else, il est conseillé de procéder de la
façon suivante :

if ( /* condition */ ) {

// Du code…

} else {

// Du code…

Ainsi la structureelsesuit directement l'accolade de fermeture de la structureif, pas de

risque de se tromper quant au fait de savoir quelle structureelseappartient à quelle
structureif. Et puis c'est, selon les goûts, un peu plus « propre » à lire. Enfin vous
n'êtes pas obligés de faire de cette façon, il s'agit juste d'un conseil.

La structureelse ifpour dire « sinon si »

Bien, vous savez exécuter du code si une condition se vérifie et si elle ne se vérifie pas,
mais il serait bien de savoir fonctionner de la façon suivante :

 Une première condition est à tester ;

 Une deuxième condition est présente et sera testée si la première échoue ;

 Et si aucune condition ne se vérifie, la structureelsefait alors son travail.
Cette espèce de cheminement est bien pratique pour tester plusieurs conditions à la
fois et exécuter leur code correspondant. La structureelse ifpermet cela, exemple :

var floor = parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de -2 à 30) :"));

if (floor == 0) {

alert('Vous vous trouvez déjà au rez-de-chaussée.');

} else if (-2 <= floor && floor <= 30) {

alert("Direction l'étage n°" + floor + ' !');

} else {

alert("L'étage spécifié n'existe pas.");

À noter que la structureelse ifpeut être utilisée plusieurs fois de suite, la seule chose qui lui
est nécessaire pour pouvoir fonctionner est d'avoir une condition avec la structureifjuste avant
elle.

La condition « switch »
Nous venons d'étudier le fonctionnement de la conditionif elsequi est très utile dans
de nombreux cas, toutefois elle n'est pas très pratique pour faire du cas par cas ; c'est
là qu'intervientswitch

Prenons un exemple : nous avons un meuble avec quatre tiroirs contenant chacun des
objets différents, et il faut que l'utilisateur puisse connaître le contenu du tiroir dont il
entre le chiffre. Si nous voulions le faire avecif elsece serait assez long et fastidieux :

var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :'));

if (drawer == 1) {

alert('Contient divers outils pour dessiner : du papier, des crayons, etc.');

} else if (drawer == 2) {
alert('Contient du matériel informatique : des câbles, des composants, etc.');

} else if (drawer == 3) {

alert('Ah ? Ce tiroir est fermé à clé ! Dommage !');

} else if (drawer == 4) {

alert('Contient des vêtements : des chemises, des pantalons, etc.');

} else {

alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuve du contraire,
les tiroirs négatifs n'existent pas.");

C'est long, non ? Et en plus ce n'est pas très adapté à ce que l'on souhaite faire. Le
plus gros problème est de devoir réécrire à chaque fois la condition ; mais
avecswitchc'est un peu plus facile :

var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :'));

switch (drawer) {
case 1:

alert('Contient divers outils pour dessiner : du papier, des crayons, etc.');

break;

case 2:

alert('Contient du matériel informatique : des câbles, des composants, etc.');

break;

case 3:

alert('Ah ? Ce tiroir est fermé à clé ! Dommage !');

break;

case 4:

alert('Contient des vêtements : des chemises, des pantalons, etc.');

break;

default:

alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuve du

contraire, les tiroirs négatifs n'existent pas.");

Comme vous pouvez le constater, le code n'est pas spécialement plus court mais il est
déjà mieux organisé et donc plus compréhensible. Détaillons maintenant son
fonctionnement :

 On écrit le mot-cléswitchsuivi de la variable à analyser entre parenthèses et

d'une paire d'accolades ;
 Dans les accolades se trouvent tous les cas de figure pour notre variable, définis
par le mot-clécasesuivi de la valeur qu'il doit prendre en compte (cela peut être
un nombre mais aussi du texte) et de deux points ;
 Tout ce qui suit les deux points d'uncasesera exécuté si la variable analysée par
leswitchcontient la valeur ducase;
 À chaque fin d'uncaseon écrit l'instructionbreakpour « casser » leswitchet ainsi
éviter d'exécuter le reste du code qu'il contient ;
 Et enfin on écrit le mot-clédefaultsuivi de deux points. Le code qui suit cette
instruction sera exécuté si aucun des cas précédents n'a été exécuté. Attention,
cette partie est optionnelle, vous n'êtes pas obligés de l'intégrer à votre code.

alert('Contient du matériel informatique : des câbles, des composants, etc.');

alert('Ah ? Ce tiroir est fermé à clé ! Dommage !');

alert('Contient des vêtements : des chemises, des pantalons, etc.');

alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuve du contraire,
les tiroirs négatifs n'existent pas.");

Dans certains cas, ce système peut être pratique mais cela reste extrêmement rare.

Avant de clore cette partie, il est nécessaire de vous faire comprendre un point
essentiel : unswitchpermet de faire une action en fonction d'une valeur mais aussi en
fonction du type de la valeur (comme l'opérateur ===), ce qui veut dire que ce code
n'affichera jamais « Bravo ! » :

var drawer = prompt('Entrez la valeur 1 :');

switch (drawer) {

case 1:

alert('Bravo !');

break;

default:
alert('Perdu !');

En effet, nous avons retiré la fonctionparseInt()de notre code, ce qui veut dire que
nous passons une chaîne de caractères à notreswitch. Puisque ce dernier vérifie aussi
les types des valeurs, le message « Bravo ! » ne sera jamais affiché.

En revanche, si nous modifions notre premiercasepour vérifier une chaîne de caractères

plutôt qu'un nombre alors nous n'avons aucun problème :

var drawer = prompt('Entrez la valeur 1 :');

switch (drawer) {

case '1':

alert('Bravo !');

break;

default:

alert('Perdu !');

Tester l'existence de contenu d'une variable

Pour tester l'existence de contenu d'une variable, il faut tout d'abord savoir que tout se joue au
niveau de la conversion des types. Vous savez que les variables peuvent être de plusieurs
types : les nombres, les chaînes de caractères, etc. Eh bien ici nous allons découvrir que le
type d'une variable (quel qu'il soit) peut être converti en booléen même si à la base on possède
un nombre ou une chaîne de caractères.

Voici un exemple simple :

var conditionTest = 'Fonctionnera ? Fonctionnera pas ?';

if (conditionTest) {

alert('Fonctionne !');

} else {

alert('Ne fonctionne pas !');

Le code nous affiche le texte « Fonctionne ! ». Pourquoi ? Tout simplement parce que
la variableconditionTesta été convertie en booléen et que son contenu est évalué
comme étant vrai (true).

Qu'est-ce qu'un contenu vrai ou faux ? Eh bien, il suffit simplement de lister les
contenus faux pour le savoir : un nombre qui vaut zéro ou bien une chaîne de
caractères vide. C'est tout, ces deux cas sont les seuls à être évalués comme étant
àfalse. Bon, après il est possible d'évaluer des attributs, des méthodes, des objets, etc.
Seulement, vous verrez cela plus tard.

Le cas de l'opérateur OU
Encore un cas à part : l'opérateur OU ! Celui-ci, en plus de sa fonction principale,
permet de renvoyer la première variable possédant une valeur évaluée àtrue! Exemple
:

var conditionTest1 = '', conditionTest2 = 'Une chaîne de caractères';

alert(conditionTest1 || conditionTest2);

Au final, ce code nous retourne la valeur « Une chaîne de caractères ». Pourquoi ? Eh

bien parce que l'opérateur OU va se charger de retourner la valeur de la première
variable dont le contenu est évalué àtrue. Ceci est extrêmement pratique ! Tâchez de
bien vous en rappeler car nous allons nous en resservir fréquemment !
Les boucles
Les programmeurs sont réputés pour être des gens fainéants, ce qui n'est pas totalement faux
puisque le but de la programmation est de faire exécuter des choses à un ordinateur, pour ne
pas les faire nous-mêmes. Ce chapitre va mettre en lumière ce comportement intéressant :
nous allons en effet voir comment répéter des actions, pour ne pas écrire plusieurs fois les
mêmes instructions. Mais avant ça, nous allons aborder le sujet de l'incrémentation.
Considérons le calcul suivant :

var number = 0;

number = number + 1;
La variablenumbercontient donc la valeur 1. Seulement l'instruction pour ajouter 1 est assez
lourde à écrire et souvenez-vous, nous sommes des fainéants. Le JavaScript, comme d'autres
langages de programmation, permet ce que l'on appelle l'incrémentation, ainsi que son
contraire, la décrémentation.

Le fonctionnement
L'incrémentation permet d'ajouter une unité à un nombre au moyen d'une syntaxe
courte. À l'inverse, la décrémentation permet de soustraire une unité.

var number = 0;

number++;
alert(number); // Affiche : « 1 »

number--;
alert(number); // Affiche : « 0 »
Il s'agit donc d'une méthode assez rapide pour ajouter ou soustraire une unité à une variable
(on dit incrémenter et décrémenter), et cela nous sera particulièrement utile tout au long de ce
chapitre.

L'ordre des opérateurs

Il existe deux manières d'utiliser l'incrémentation en fonction de la position de
l'opérateur ++ (ou --). On a vu qu'il pouvait se placer après la variable, mais il peut aussi
se placer avant. Petit exemple :

var number_1 = 0;
var number_2 = 0;

number_1++;
++number_2;

alert(number_1); // Affiche : « 1 »
alert(number_2); // Affiche : « 1 »
La différence réside en fait dans la priorité de l'opération, et ça a de l'importance si vous voulez
récupérer le résultat de l'incrémentation. Dans l'exemple suivant,++numberretourne la valeur
denumberincrémentée, c'est-à-dire 1.

var number = 0;
var output = ++number;

alert(number); // Affiche : « 1 »
alert(output); // Affiche : « 1 »
Maintenant, si on place l'opérateur après la variable à incrémenter, l'opération retourne la valeur
denumberavant qu'elle ne soit incrémentée :

var number = 0;
var output = number++;

alert(number); // Affiche : « 1 »
alert(output); // Affiche : « 0 »

La boucle while :
Une boucle est une structure analogue aux structures conditionnelles vues dans le chapitre
précédent sauf qu'ici il s'agit de répéter une série d'instructions. La répétition se fait jusqu'à ce
qu'on dise à la boucle de s'arrêter. À chaque fois que la boucle se répète on parle
d'itération (qui est en fait un synonyme de répétition).

Pour faire fonctionner une boucle, il est nécessaire de définir une condition. Tant que
celle-ci est vraie (true), la boucle se répète. Dès que la condition est fausse (false), la
boucle s'arrête.

Voici un exemple de la syntaxe d'une bouclewhile:

while (condition) {
instruction_1;
instruction_2;
instruction_3;
}
Répéter tant que…
La bouclewhilese répète tant que la condition est validée. Cela veut donc dire qu'il faut
s'arranger, à un moment, pour que la condition ne soit plus vraie, sinon la boucle se répéterait à
l'infini, ce qui serait fâcheux.

En guise d'exemple, on va incrémenter un nombre, qui vaut 1, jusqu'à ce qu'il vaille 10 :

var number = 1;

while (number < 10) {

number++;
}

alert(number); // Affiche : « 10 »

u départ,numbervaut 1. Arrive ensuite la boucle qui va demander sinumberest strictement

plus petit que 10. Comme c'est vrai, la boucle est exécutée, etnumberest incrémenté. À
chaque fois que les instructions présentes dans la boucle sont exécutées, la condition de la
boucle est réévaluée pour savoir s'il faut réexécuter la boucle ou non. Dans cet exemple, la
boucle se répète jusqu'à ce quenumbersoit égal à 10. Sinumbervaut 10, la conditionnumber
< 10est fausse, et la boucle s'arrête. Quand la boucle s'arrête, les instructions qui suivent la
boucle (la fonctionalert()dans notre exemple) sont exécutées normalement.

La boucle do while
La boucledo whileressemble très fortement à la bouclewhile, sauf que dans ce cas la
boucle est toujours exécutée au moins une fois. Dans le cas d'une bouclewhile, si la
condition n'est pas valide, la boucle n'est pas exécutée. Avecdo while, la boucle est
exécutée une première fois, puis la condition est testée pour savoir si la boucle doit
continuer.

Voici la syntaxe d'une boucledo while:

do {
instruction_1;
instruction_2;
instruction_3;
} while (condition);
On note donc une différence fondamentale dans l'écriture par rapport à la bouclewhile, ce qui
permet de bien faire la différence entre les deux. Cela dit, l'utilisation des bouclesdo
whilen'est pas très fréquente, et il est fort possible que vous n'en ayez jamais l'utilité car
généralement les programmeurs utilisent une bouclewhilenormale, avec une condition qui fait
que celle-ci est toujours exécutée une fois.

La boucle FOR :

La boucleforressemble dans son fonctionnement à la bouclewhile, mais son

architecture paraît compliquée au premier abord. La boucleforest en réalité une boucle
qui fonctionne assez simplement, mais qui semble très complexe pour les débutants en
raison de sa syntaxe. Une fois que cette boucle est maîtrisée, il y a fort à parier que
c'est celle-ci que vous utiliserez le plus souvent.

Le schéma d'une boucleforest le suivant :

Dans les parenthèses de la boucle ne se trouve plus juste la condition, mais trois blocs
: initialisation, condition, et incrémentation. Ces trois blocs sont séparés par un point-virgule
; c'est un peu comme si les parenthèses contenaient trois instructions distinctes.

for, la boucle conçue pour l'incrémentation

La boucleforpossède donc trois blocs qui la définissent. Le troisième est le bloc
d'incrémentation qu'on va utiliser pour incrémenter une variable à chaque itération de la boucle.
De ce fait, la boucleforest très pratique pour compter ainsi que pour répéter la boucle un
nombre défini de fois.

Dans l'exemple suivant, on va afficher cinq fois une boîte de dialogue à l'aide
dealert(), qui affichera le numéro de chaque itération :

for (var iter = 0; iter < 5; iter++) {

alert('Itération n°' + iter);
}

Dans le premier bloc, l'initialisation, on initialise une variable appeléeiterqui vaut 0 ; le mot-
clévarest requis, comme pour toute initialisation. On définit dans la conditionque la boucle
continue tant qu'iterest strictement inférieure à 5. Enfin, dans le bloc d'incrémentation, on
indique qu'itersera incrémentée à chaque itération terminée.

C'est tout à fait normal, pour deux raisons : le premier tour de boucle porte l'indice 0, donc si on
compte de 0 à 4, il y a bien 5 tours : 0, 1, 2, 3 et 4. Ensuite, l'incrémentation n'a pas lieu avant
chaque itération, mais à la fin de chaque itération. Donc, le tout premier tour de boucle est fait
aveciterqui vaut 0, avant d'être incrémenté.

Reprenons notre exemple

Avec les quelques points de théorie que nous venons de voir, nous pouvons réécrire
notre exemple des prénoms, tout en montrant qu'une boucleforpeut être utilisée sans
incrémentation :

for (var nicks = '', nick; true;) {

nick = prompt('Entrez un prénom :');

if (nick) {
nicks += nick + ' ';
} else {
break;
}
}

alert(nicks);
Dans le bloc d'initialisation (le premier), on commence par initialiser nos deux variables.
Vient alors le bloc avec la condition (le deuxième), qui vaut simplementtrue. On termine
par le bloc d'incrémentation et… il n'y en a pas besoin ici, puisqu'il n'y a pas besoin
d'incrémenter. On le fera pour un autre exemple juste après. Ce troisième bloc est vide,
mais est requis. C'est pour cela que l'on doit quand même mettre le point-virgule après
le deuxième bloc (la condition).

Maintenant, modifions la boucle de manière à compter combien de prénoms ont été

enregistrés. Pour ce faire, nous allons créer une variable de boucle, nomméei, qui sera
incrémentée à chaque passage de boucle.

for (var i = 0, nicks = '', nick; true; i++) {

nick = prompt('Entrez un prénom :');

if (nick) {
nicks += nick + ' ';
} else {
break;
}
}
alert('Il y a ' + i + ' prénoms :\n\n' + nicks);
La variable de boucle a été ajoutée dans le bloc d'initialisation. Le bloc d'incrémentation a lui
aussi été modifié : on indique qu'il faut incrémenter la variable de bouclei. Ainsi, à chaque
passage dans la boucle,iest incrémentée, ce qui va nous permettre de compter assez
facilement le nombre de prénoms ajoutés.

Les fonctions
Voici un chapitre très important, tant par sa longueur que par les connaissances qu'il permet
d'acquérir ! Vous allez y découvrir ce que sont exactement les fonctions et comment en créer
vous-mêmes. Tout y passera, vous saurez gérer vos variables dans les fonctions, utiliser des
arguments, retourner des valeurs, créer des fonctions dites « anonymes », bref, tout ce qu'il
vous faut pour faire des fonctions utiles !

Sur ce, nous allons tout de suite commencer, parce qu'il y a du boulot !

Concevoir des fonctions

Dans les chapitres précédents vous avez découvert quatre fonctions
:alert(),prompt(),confirm()etparseInt(). En les utilisant, vous avez pu constater que
chacune de ces fonctions avait pour but de mener à bien une action précise, reconnaissable par
un nom explicite.

Pour faire simple, si l'on devait associer une fonction à un objet de la vie de tous les jours, ce
serait le moteur d'une voiture : vous tournez juste la clé pour démarrer le moteur et celui-ci fait
déplacer tout son mécanisme pour renvoyer sa force motrice vers les roues. C'est pareil avec
une fonction : vous l'appelez en lui passant éventuellement quelques paramètres, elle va
ensuite exécuter le code qu'elle contient puis va renvoyer un résultat en sortie.

Le plus gros avantage d'une fonction est que vous pouvez exécuter un code assez long
et complexe juste en appelant la fonction le contenant. Cela réduit considérablement
votre code et le simplifie d'autant plus ! Seulement, vous êtes bien limités en utilisant
seulement les fonctions natives du JavaScript. C'est pourquoi il vous est possible de
créer vos propres fonctions, c'est ce que nous allons étudier tout au long de ce chapitre.

Créer sa première fonction

On ne va pas y aller par quatre chemins, voici comment écrire une fonction :

function myFunction(arguments) {

// Le code que la fonction va devoir exécuter

}
Décortiquons un peu tout ça et analysons un peu ce que nous pouvons lire dans ce
code :

 Le mot-cléfunctionest présent à chaque déclaration de fonction. C'est lui qui

permet de dire « Voilà, j'écris ici une fonction ! » ;
 Vient ensuite le nom de votre fonction, icimyFunction;
 S'ensuit un couple de parenthèses contenant ce que l'on appelle
des arguments. Ces arguments servent à fournir des informations à la fonction
lors de son exécution. Par exemple, avec la fonctionalert()quand vous lui
passez en paramètre ce que vous voulez afficher à l'écran ;
 Et vient enfin un couple d'accolades contenant le code que votre fonction devra
exécuter.
Il est important de préciser que tout code écrit dans une fonction ne s'exécutera que si
vous appelez cette dernière (« appeler une fonction » signifie « exécuter »). Sans ça, le
code qu'elle contient ne s'exécutera jamais.

Bien, maintenant que vous connaissez un peu le principe d'une fonction, voici un petit
exemple :

function showMsg() {

alert('Et une première fonction, une !');

showMsg(); // On exécute ici le code contenu dans la fonction

Dans ce code nous pouvons voir la déclaration d'une fonctionshowMsg()qui exécute elle-même
une autre fonction qui n'est autre quealert()avec un message prédéfini.
Bien sûr, tout code écrit dans une fonction ne s'exécute pas immédiatement, sinon l'intérêt
serait nul. C'est pourquoi à la fin du code on appelle la fonction afin de l'exécuter, ce qui nous
affiche le message souhaité.

Un exemple concret
Comme nous le disions plus haut, l'intérêt d'une fonction réside notamment dans le fait
de ne pas avoir à réécrire plusieurs fois le même code. Nous allons ici étudier un cas
intéressant où l'utilisation d'une fonction va se révéler utile :
var result;

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

Comme vous pouvez le constater, nous avons écrit ici exactement deux fois le même
code, ce qui nous donne un résultat peu efficace. Nous pouvons envisager d'utiliser une
boucle mais si nous voulons afficher un texte entre les deux opérations comme ceci
alors la boucle devient inutilisable :

var result;

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

alert('Vous en êtes à la moitié !');

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

Notre solution, ici, est donc de faire appel au système des fonctions de cette façon :
function byTwo() {

var result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

}
byTwo();

alert('Vous en êtes à la moitié !');

byTwo();

Concrètement, qu'est-ce qui a changé ? Eh bien, tout d'abord, nous avons créé une
fonction qui contient le code à exécuter deux fois (ou autant de fois qu'on le souhaite). Ensuite,
nous faisons la déclaration de notre variableresultdirectement dans notre fonction (oui, c'est
possible, vous allez obtenir de plus amples explications d'ici peu) et surtout nous appelons deux
fois notre fonction plutôt que de réécrire le code qu'elle contient.

Voilà l'utilité basique des fonctions : éviter la répétition d'un code. Mais leur utilisation peut être
largement plus poussée, continuons donc sur notre lancée !

La portée des variables

Bien, vous savez créer une fonction basique mais pour le moment vous ne pouvez rien faire de
bien transcendant. Pour commencer à faire des fonctions vraiment utiles il vous faut apprendre
à utiliser les arguments et les valeurs de retour mais nous allons tout d'abord devoir passer par
une étude barbante des fonctions :

La portée des variables

Derrière ce titre se cache un concept assez simple à comprendre mais pas forcément
simple à mettre en pratique car il est facile d'être induit en erreur si on ne fait pas
attention. Tout d'abord, nous allons commencer par faire un constat assez flagrant à
l'aide de deux exemples :

var ohai = 'Hello world !';

function sayHello() {

alert(ohai);

sayHello();
ci, pas de problème, on déclare une variable dans laquelle on stocke du texte puis on
crée une fonction qui se charge de l'afficher à l'écran et enfin on exécute cette dernière.
Maintenant, nous allons légèrement modifier l'ordre des instructions mais l'effet devrait
normalement rester le même :

function sayHello() {

var ohai = 'Hello world !';

sayHello();

alert(ohai);

Alors ? Aucun résultat ? Ce n'est pas surprenant ! Il s'est produit ce que l'on appelle une erreur :
en clair, le code s'est arrêté car il n'est pas capable d'exécuter ce que vous lui avez demandé.
L'erreur en question (nous allons revenir sur l'affichage de cette erreur dans un futur chapitre)
nous indique que la variableohain'existe pas au moment de son affichage avec la
fonctionalert()alors que nous avons pourtant bien déclaré cette variable dans la
fonctionsayHello().

Là, ça fonctionnera ! Voilà tout le concept de la portée des variables : toute variable déclarée
dans une fonction n'est utilisable que dans cette même fonction ! Ces variables
spécifiques à une seule fonction ont un nom : les variables locales.

Les variables globales

À l'inverse des variables locales, celles déclarées en-dehors d'une fonction sont nommées
les variables globales car elles sont accessibles partout dans votre code, y compris à
l'intérieur de vos fonctions.

À ce propos, qu'est-ce qui se produirait si je créais une variable globale

nomméemessageet une variable locale du même nom ? Essayons !
var message = 'Ici la variable globale !';

function showMsg() {

var message = 'Ici la variable locale !';

alert(message);

showMsg();

alert(message);

Comme vous pouvez le constater, quand on exécute la fonction, la variable locale

prend le dessus sur la variable globale de même nom pendant tout le temps de
l'exécution de la fonction. Mais une fois la fonction terminée (et donc, la variable locale
détruite) c'est la variable globale qui reprend ses droits.
Il existe une solution pour utiliser la variable globale dans une fonction malgré la
création d'une variable locale de même nom, mais nous étudierons cela bien plus tard
car ce n'est actuellement pas de votre niveau.

À noter que, dans l'ensemble, il est plutôt déconseillé de créer des variables globales et
locales de même nom, cela est souvent source de confusion.

Les objets et les tableaux

Les objets sont une notion fondamentale en JavaScript. Dans ce chapitre, nous verrons
comment les utiliser, ce qui nous permettra d'introduire l'utilisation des tableaux, un type
d'objet bien particulier et très courant en JavaScript. Nous verrons comment créer des
objets simples et des objets littéraux, qui vont se révéler rapidement indispensables.

Introduction aux objets

Il a été dit précédemment que le JavaScript est un langage orienté objet. Cela veut dire que le
langage dispose d'objets.

Un objet est un concept, une idée ou une chose. Un objet possède une structure qui lui permet
de pouvoir fonctionner et d'interagir avec d'autres objets. Le JavaScript met à notre disposition
des objets natifs, c'est-à-dire des objets directement utilisables. Vous avez déjà manipulé de
tels objets sans le savoir : un nombre, une chaîne de caractères ou même un booléen

Ce ne sont pas des variables ?

Si, mais en réalité, une variable contient surtout un objet. Par exemple, si nous créons
une chaîne de caractères, comme ceci :
var myString = 'Ceci est une chaîne de caractères';
La variablemyStringcontient un objet, et cet objet représente une chaîne de caractères.
C'est la raison pour laquelle on dit que le JavaScript n'est pas un langage typé, car les
variables contiennent toujours la même chose : un objet. Mais cet objet peut être de
nature différente (un nombre, un booléen…).

Exemple d'utilisation
Nous allons créer une chaîne de caractères, pour ensuite afficher son nombre de
caractères et la transformer en majuscules. Soit la mise en pratique de la partie
théorique que nous venons de voir.

Le constructeur
Le constructeur est un code qui est exécuté quand on utilise un nouvel objet. Il permet
d’effectuer des actions comme définir diverses variables au sein même de l'objet (comme le
nombre de caractères d'une chaîne de caractères). Tout cela est fait automatiquement pour les
objets natifs, nous en reparlerons quand nous aborderons l'orienté objet.

Les propriétés
Toute valeur va être placée dans une variable au sein de l'objet : c'est ce que l'on appelle
une propriété. Une propriété est une variable contenue dans l'objet, elle contient des
informations nécessaires au fonctionnement de l'objet.

Les méthodes

Enfin, il est possible de modifier l'objet. Cela se fait par l'intermédiaire des méthodes.
Les méthodes sont des fonctions contenues dans l'objet, et qui permettent de réaliser
des opérations sur le contenu de l'objet. Par exemple, dans le cas d'une chaîne de
caractères, il existe une méthode qui permet de mettre la chaîne de caractères en
majuscules

ar myString = 'Ceci est une chaîne de caractères'; // On crée un objet

String

alert(myString.length); // On affiche le nombre de caractères, au moyen de

la propriété « length »
alert(myString.toUpperCase()); // On récupère la chaîne en majuscules,
avec la méthode toUpperCase()

On remarque quelque chose de nouveau dans ce code : la présence d'un point. Ce dernier
permet d'accéder aux propriétés et aux méthodes d'un objet. Ainsi, quand nous
écrivonsmyString.length, nous demandons au JavaScript de fournir le nombre de
caractères contenus dansmyString. La propriétélengthcontient ce nombre, qui a été défini
quand nous avons créé l'objet. Ce nombre est également mis à jour quand on modifie la chaîne
de caractères :
ar myString = 'Test';
alert(myString.length); // Affiche : « 4 »

myString = 'Test 2';

alert(myString.length); // Affiche : « 6 » (l'espace est aussi un
caractère)

C'est pareil pour les méthodes : avecmyString.toUpperCase(), je demande au

JavaScript de changer la casse de la chaîne, ici, tout mettre en majuscules. À l'inverse,
la méthodetoLowerCase()permet de tout mettre en minuscules.

Objets natifs déjà rencontrés

Nous en avons déjà rencontré trois :

1. Number: l'objet qui gère les nombres ;

2. Boolean: l'objet qui gère les booléens ;
3. String: l'objet qui gère les chaînes de caractères.
Nous allons maintenant découvrir l'objetArrayqui, comme son nom l'indique, gère les
tableaux (array signifie « tableau » en anglais) !

Les tableaux
Souvenez-vous : dans le chapitre sur les boucles, il était question de demander à l'utilisateur les
prénoms de ses frères et sœurs. Les prénoms étaient concaténés dans une chaîne de
caractères, puis affichés. À cause de cette méthode de stockage, à part réafficher les prénoms
tels quels, on ne sait pas faire grand-chose.

C'est dans un tel cas que les tableaux entrent en jeu. Un tableau, ou plutôt un array en anglais,
est une variable qui contient plusieurs valeurs, appelées items. Chaque item est accessible au
moyen d'un indice (index en anglais) et dont la numérotation commence à partir de 0. Voici un
schéma représentant un tableau, qui stocke cinq items :
Les indices
Comme vous le voyez dans le tableau, la numérotation des items commence à 0 ! C'est très
important, car il y aura toujours un décalage d'une unité : l'item numéro 1 porte l'indice 0, et
donc le cinquième item porte l'indice 4. Vous devrez donc faire très attention à ne pas vous
emmêler les pinceaux, et à toujours garder cela en tête, sinon ça vous posera problème.

Déclarer un tableau
On utilise bien évidemmentvarpour déclarer un tableau, mais la syntaxe pour définir les
valeurs est spécifique :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline',

'Guillaume'];

Le contenu du tableau se définit entre crochets, et chaque valeur est séparée par une virgule.
Les valeurs sont introduites comme pour des variables simples, c'est-à-dire qu'il faut des
guillemets ou des apostrophes pour définir les chaînes de caractères :

var myArray_a = [42, 12, 6, 3];

var myArray_b = [42, 'Sébastien', 12, 'Laurence'];

On peut schématiser le contenu du tableaumyArrayainsi :

L'index numéro0contient « Sébastien », tandis que le2contient « Ludovic ».

La déclaration par le biais de crochets est la syntaxe courte. Il se peut que vous
rencontriez un jour une syntaxe plus longue qui est vouée à disparaître. Voici à quoi
ressemble cette syntaxe :
var myArray = new Array('Sébastien', 'Laurence', 'Ludovic', 'Pauline',
'Guillaume');

Le mot-clénewde cette syntaxe demande au JavaScript de définir un nouvel array dont le

contenu se trouve en paramètre (un peu comme une fonction). Vous verrez l'utilisation de ce
mot-clé plus tard. En attendant il faut que vous sachiez que cette syntaxe est dépréciée et qu'il
est conseillé d'utiliser celle avec les crochets.

Récupérer et modifier des valeurs

Comment faire pour récupérer la valeur de l'index 1 de mon tableau ? Rien de plus
simple, il suffit de spécifier l'index voulu, entre crochets, comme ceci :
var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline',
'Guillaume'];

alert(myArray[1]); // Affiche : « Laurence »

Sachant cela, il est facile de modifier le contenu d'un item du tableau :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline',
'Guillaume'];

myArray[1] = 'Clarisse';

alert(myArray[1]); // Affiche : « Clarisse »

Opérations sur les tableaux

Ajouter et supprimer des items
La méthodepush()permet d'ajouter un ou plusieurs items à un tableau

var myArray = ['Sébastien', 'Laurence'];

myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau

myArray.push('Pauline', 'Guillaume'); // Ajoute « Pauline » et « Guillaume
» à la fin du tableau

Comme dit dans la partie théorique sur les objets, les méthodes sont des fonctions, et
peuvent donc recevoir des paramètres. Ici,push()peut recevoir un nombre illimité de
paramètres, et chaque paramètre représente un item à ajouter à la fin du tableau.

La méthodeunshift()fonctionne commepush(), excepté que les items sont ajoutés au

début du tableau. Cette méthode n'est pas très fréquente mais peut être utile.

Les méthodesshift()etpop()retirent respectivement le premier et le dernier élément du

tableau.
var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline',
'Guillaume'];

myArray.shift(); // Retire « Sébastien »

myArray.pop(); // Retire « Guillaume »

alert(myArray); // Affiche « Laurence,Ludovic,Pauline »

Chaînes de caractères et tableaux

Les chaînes de caractères possèdent une méthodesplit()qui permet de les découper
en un tableau, en fonction d'un séparateur. Prenons l'exemple suivant :

var cousinsString = 'Pauline Guillaume Clarisse',

cousinsArray = cousinsString.split(' ');

alert(cousinsString);
alert(cousinsArray);

La méthodesplit()va couper la chaîne de caractères à chaque fois qu'elle va rencontrer une

espace. Les portions ainsi découpées sont placées dans un tableau, icicousinsArray.

L'inverse desplit(), c'est-à-dire créer une chaîne de caractères depuis un tableau, se

nommejoin():
var cousinsString_2 = cousinsArray.join('-');

alert(cousinsString_2);

Parcourir un tableau
Soyez attentifs, il s'agit ici d'un gros morceau ! Parcourir un tableau est quelque chose que vous
allez faire très fréquemment en JavaScript, surtout plus tard, quand nous verrons comment
interagir avec les éléments HTML

Dans le chapitre sur les boucles nous avons étudié la bouclefor. Celle-ci va nous servir à
parcourir les tableaux. La bouclewhilepeut aussi être utilisée, maisforest la plus adaptée pour
cela. Nous allons voir aussi une variante defor: la bouclefor in.

Parcourir avecfor
Reprenons le tableau avec les prénoms :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline',

'Guillaume'];

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

for (var i = 0; i < myArray.length; i++) {

alert(myArray[i]);

On commence par définir la variable de bouclei. Ensuite, on règle la condition pour que la
boucle s'exécute tant que l'on n'a pas atteint le nombre d'items.myArray.lengthreprésente
le nombre d'items du tableau, c'est-à-dire cinq.

Attention à la condition
Nous avons volontairement mal rédigé le code précédent. En effet, dans le chapitre sur les
boucles, nous avons dit que le deuxième bloc d'une bouclefor, le bloc de condition, était
exécuté à chaque itération. Ici ça veut donc dire quemyArray.lengthest utilisé à chaque
itération, ce qui, à part ralentir la boucle, n'a que peu d'intérêt puisque le nombre d'items du
tableau ne change normalement pas (dans le cas contraire, n'utilisez pas la solution qui suit).

L'astuce est de définir une seconde variable, dans le bloc d'initialisation, qui contiendra la valeur
delength. On utilisera cette variable pour la condition :

for (var i = 0, c = myArray.length; i < c; i++) {

alert(myArray[i]);

Nous utilisonsccomme nom de variable, qui signifie count (compter), mais vous pouvez utiliser
ce que vous voulez.
Les objets littéraux
S'il est possible d'accéder aux items d'un tableau via leur indice, il peut être pratique d'y
accéder au moyen d'un identifiant. Par exemple, dans le tableau des prénoms, l'item
appelésisterpourrait retourner la valeur « Laurence ».

Pour ce faire, nous allons créer nous-mêmes un tableau sous la forme d'un objet littéral. Voici
un exemple

var family = {
self: 'Sébastien',
sister: 'Laurence',
brother: 'Ludovic',
cousin_1: 'Pauline',
cousin_2: 'Guillaume'
};

Cette déclaration va créer un objet analogue à un tableau, excepté le fait que chaque item sera
accessible au moyen d'un identifiant, ce qui donne schématiquement ceci :

Quelques petites explications s'imposent sur les objets, et tout particulièrement sur leur
syntaxe. Précédemment dans ce chapitre vous avez vu que pour créer un array vide il
suffisait d'écrire :
var myArray = [];
Pour les objets c'est à peu près similaire sauf que l'on met des accolades à la place des
crochets :
var myObject = {};
Pour définir dès l'initialisation les items à ajouter à l'objet, il suffit d'écrire :

var myObject = {

item1: 'Texte 1',

item2: 'Texte 2'

};
Comme l'indique ce code, il suffit de taper l'identifiant souhaité suivi de deux points et de la
valeur à lui attribuer. La séparation des items se fait comme pour un tableau, avec une virgule.
Accès aux items
Revenons à notre objet littéral : ce que nous avons créé est un objet, et les identifiants sont en
réalité des propriétés, exactement comme la propriétélengthd'un tableau ou d'une chaîne de
caractères. Donc, pour récupérer le nom de la sœur, il suffit de faire :

family.sister;
Il existe une autre manière, semblable à celle qui permet d'accéder aux items d'un
tableau en connaissant l'indice, sauf qu'ici on va simplement spécifier le nom de la
propriété :
family['sister'];
Cela va nous être particulièrement utile si l'identifiant est contenu dans une variable,
comme ce sera le cas avec la boucle que nous allons voir après. Exemple :

var id = 'sister';

alert(family[id]); // Affiche : « Laurence »

Parcourir un objet avecfor in
Il n'est pas possible de parcourir un objet littéral avec une bouclefor. Normal, puisqu'une
boucleforest surtout capable d'incrémenter une variable numérique, ce qui ne nous est
d'aucune utilité dans le cas d'un objet littéral puisque nous devons posséder un identifiant. En
revanche, la bouclefor inse révèle très intéressante !

La bouclefor inest l'équivalent de la boucleforeachdu PHP : elle est très simple et ne sert
qu'à une seule chose : parcourir un objet.

Le fonctionnement est quasiment le même que pour un tableau, excepté qu'ici il suffit
de fournir une « variable clé » qui reçoit un identifiant (au lieu d'un index) et de spécifier
l'objet à parcourir :
for (var id in family) { // On stocke l'identifiant dans « id » pour
parcourir l'objet « family »

alert(family[id]);

Parce que les tableaux se voient souvent attribuer des méthodes supplémentaires par certains
navigateurs ou certains scripts tiers utilisés dans la page, ce qui fait que la bouclefor inva
vous les énumérer en même temps que les items du tableau.

Il y a aussi un autre facteur important à prendre en compte : la bouclefor inest plus

gourmande qu'une boucleforclassique.

Utilisation des objets littéraux

Les objets littéraux ne sont pas souvent utilisés mais peuvent se révéler très utiles pour
ordonner un code. On les utilise aussi dans les fonctions : les fonctions, avecreturn, ne savent
retourner qu'une seule variable. Si on veut retourner plusieurs variables, il faut les placer dans
un tableau et retourner ce dernier. Mais il est plus commode d'utiliser un objet littéral.

L'exemple classique est la fonction qui calcule des coordonnées d'un élément HTML
sur une page Web. Il faut ici retourner les coordonnéesxety.

function getCoords() {

/* Script incomplet, juste pour l'exemple */

return {

x: 12,

y: 21

};

var coords = getCoords();

alert(coords.x); // 12
alert(coords.y); // 21
La valeur de retour de la fonctiongetCoords()est mise dans la variablecoords, et l'accès
àxetyen est simplifié

Le document
L'objetdocumentest un sous-objet dewindow, l'un des plus utilisés. Et pour cause, il
représente la page Web et plus précisément la balise<html>. C'est grâce à cet élément-
là que nous allons pouvoir accéder aux éléments HTML et les modifier. Voyons donc,
dans la sous-partie suivante, comment naviguer dans le document.

Accéder aux éléments

L'accès aux éléments HTML via le DOM est assez simple mais demeure actuellement plutôt
limité. L'objetdocumentpossède trois méthodes principales
:getElementById(),getElementsByTagName()etgetElementsByName().

getElementById()

Cette méthode permet d'accéder à un élément en connaissant son ID qui est

simplement l'attributidde l'élément. Cela fonctionne de cette manière :

<p>Un peu de texte <a>et un lien</a></p>

</div>

var div = document.getElementById('myDiv');

alert(div);

</script>

n exécutant ce code, le navigateur affiche ceci :

Notre div est bien un objet de type HTMLDivElement

Il nous dit quedivest un objet de typeHTMLDivElement. En clair, c'est un élément HTML qui
se trouve être un<div>, ce qui nous montre que le script fonctionne correctement.

getElementsByTagName():

Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments de la famille.
Si, dans une page, on veut récupérer tous les<div>, il suffit de faire comme ceci :
var divs = document.getElementsByTagName('div');

for (var i = 0, c = divs.length ; i < c ; i++) {

alert('Element n° ' + (i + 1) + ' : ' + divs[i]);

La méthode retourne une collection d'éléments (utilisable de la même manière qu'un

tableau). Pour accéder à chaque élément, il est nécessaire de parcourir le tableau avec
une petite boucle.

Deux petites astuces :

1. Cette méthode est accessible sur n'importe quel élément HTML et pas
seulement sur l'objetdocument.
2. En paramètre de cette méthode vous pouvez mettre une chaîne de caractères
contenant un astérisque * qui récupérera tous les éléments HTML contenus dans
l'élément ciblé.

getElementsByName()

Cette méthode est semblable àgetElementsByTagName()et permet de ne récupérer que

les éléments qui possèdent un attributnameque vous spécifiez. L'attributnamen'est utilisé
qu'au sein des formulaires, et est déprécié depuis la spécification HTML5 dans tout
autre élément que celui d'un formulaire. Par exemple, vous pouvez vous en servir pour
un élément<input>

Le contenu :innerHTML
La propriétéinnerHTMLest spéciale et demande une petite introduction. Elle a été créée par
Microsoft pour les besoins d'Internet Explorer et a été normalisée au sein du HTML5. Bien que
non normalisée pendant des années, elle est devenue un standard parce que tous les
navigateurs la supportaient déjà, et non l'inverse comme c'est généralement le cas.

Récupérer du HTML

innerHTMLpermet de récupérer le code HTML enfant d'un élément sous forme de texte.
Ainsi, si des balises sont présentes,innerHTMLles retournera sous forme de texte :

<body>

<p>Un peu de texte <a>et un lien</a></p>

</div>
<script>

var div = document.getElementById('myDiv');

alert(div.innerHTML);

</script>

</body>

Nous avons donc bien une boîte de dialogue qui affiche le contenu demyDiv, sous forme de
texte :

Le contenu de myDiv est bien affiché

Ajouter ou éditer du HTML

Pour éditer ou ajouter du contenu HTML, il suffit de faire l'inverse, c'est-à-dire de définir
un nouveau contenu :

document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une citation à la place du

paragraphe</blockquote>';

Si vous voulez ajouter du contenu, et ne pas modifier le contenu déjà en place, il suffit
d’utiliser+=à la place de l'opérateur d'affectation :

document.getElementById('myDiv').innerHTML += ' et <strong>une portion mise en

emphase</strong>.';

Toutefois, une petite mise en garde : il ne faut pas utiliser le += dans une boucle ! En
effet,innerHTMLralentit considérablement l'exécution du code si l'on opère de cette manière, il
vaut donc mieux concaténer son texte dans une variable pour ensuite ajouter le tout
viainnerHTML. Exemple :
var text = '';

while ( /* condition */ ) {

text += 'votre_texte'; // On concatène dans la variable « text »

element.innerHTML = text; // Une fois la concaténation terminée, on ajoute le tout à « element » via
innerHTML

innerText et textContent
Penchons-nous maintenant sur deux propriétés analogues àinnerHTML:innerTextpour Internet
Explorer ettextContentpour les autres navigateurs.

innerText

La propriétéinnerTexta aussi été introduite dans Internet Explorer, mais à la différence de sa

propriété sœurinnerHTML, elle n'a jamais été standardisée et n'est pas supportée par tous les
navigateurs. Internet Explorer (pour toute version antérieure à la neuvième) ne supporte que
cette propriété et non pas la version standardisée que nous verrons par la suite.

Le fonctionnement d'innerTextest le même qu'innerHTMLexcepté le fait que seul le texte est

récupéré, et non les balises. C'est pratique pour récupérer du contenu sans le balisage, petit
exemple :

<body>

<p>Un peu de texte <a>et un lien</a></p>

</div>

var div = document.getElementById('myDiv');

alert(div.innerText);

</script>
</body>

Ce qui nous donne bien « Un peu de texte et un lien », sans les balises :

Le texte est affiché sans les balises HTML

textContent

La propriététextContentest la version standardisée d'innerText; elle est reconnue par tous

les navigateurs à l'exception des versions d'Internet Explorer antérieures à la 9. Le
fonctionnement est évidemment le même. Maintenant une question se pose : comment faire un
script qui fonctionne à la fois pour Internet Explorer et les autres navigateurs ? C'est ce que
nous allons voir !

Tester le navigateur

Il est possible via une simple condition de tester si le navigateur prend en charge telle
ou telle méthode ou propriété.

<body>

<p>Un peu de texte <a>et un lien</a></p>

</div>

var div = document.getElementById('myDiv');

var txt = '';

if (div.textContent) { // « textContent » existe ? Alors on s'en sert !

txt = div.textContent;

} else if (div.innerText) { // « innerText » existe ? Alors on doit être sous IE.

txt = div.innerText + ' [via Internet Explorer]';

} else { // Si aucun des deux n'existe, cela est sûrement dû au fait qu'il n'y a pas de texte

txt = ''; // On met une chaîne de caractères vide

alert(txt);

</script>

</body>

Il suffit donc de tester par le biais d'une condition si l'instruction fonctionne.

SitextContentne fonctionne pas, pas de soucis, on prendinnerText:

La fenêtre s'affiche avec Internet

Explorer
Cela dit, ce code est quand même très long et redondant. Il est possible de le raccourcir
de manière considérable :

txt = div.textContent || div.innerText || '';

Les événement :
Les événements permettent de déclencher une fonction selon qu'une action s'est
produite ou non. Par exemple, on peut faire apparaître une fenêtrealert()lorsque
l'utilisateur survole une zone d'une page Web.

« Zone » est un terme un peu vague, il vaut mieux parler d'élément (HTML dans la
plupart des cas). Ainsi, vous pouvez très bien ajouter un événement à un élément de
votre page Web (par exemple, une balise<div>) pour faire en sorte de déclencher un
code JavaScript lorsque l'utilisateur fera une action sur l'élément en question

Liste des événements

Il existe de nombreux événements, tous plus ou moins utiles. Parmi les évènements utiles que
nous n'aborderons pas, sachez qu'il en existe des spécifiques pour les plateformes mobiles
(smartphones, tablettes, etc...).

Voici la liste des événements principaux, ainsi que les actions à effectuer pour qu'ils se
déclenchent :

Nom de
Action pour le déclencher
l'événement

Click Cliquer (appuyer puis relâcher) sur l'élément

Dblclick Double-cliquer sur l'élément

Mouseover Faire entrer le curseur sur l'élément

Mouseout Faire sortir le curseur de l'élément

Mousedown Appuyer (sans relâcher) sur le bouton gauche de la souris sur

l'élément

Mouseup Relâcher le bouton gauche de la souris sur l'élément

Mousemove Faire déplacer le curseur sur l'élément

Keydown Appuyer (sans relâcher) sur une touche de clavier sur

l'élément

Keyup Relâcher une touche de clavier sur l'élément

Keypress Frapper (appuyer puis relâcher) une touche de clavier sur

l'élément

Focus « Cibler » l'élément

Blur Annuler le « ciblage » de l'élément

Change Changer la valeur d'un élément spécifique aux formulaires

(input,checkbox, etc.)

Input Taper un caractère dans un champ de texte

Toutefois, ce n'est pas tout, il existe aussi deux événements spécifiques à l'élément<form>,
que voici :

submit Envoyer le formulaire

reset Réinitialiser le formulaire

Le mot-cléthis
Ce mot-clé n'est, normalement, pas censé vous servir dès maintenant, cependant il est toujours
bon de le connaître pour les événements. Il s'agit d'une propriété pointant sur l'objet
actuellement en cours d'utilisation. Donc, si vous faites appel à ce mot-clé lorsqu'un événement
est déclenché, l'objet pointé sera l'élément qui a déclenché l'événement. Exemple :

<p onclick="alert('Voici le contenu de l\'élément que vous avez cliqué :\n\n' +

this.innerHTML);">Cliquez-moi !</p>

Retour sur le focus

Afin de bien vous montrer ce qu'est le focus, voici un exemple qui vous montrera ce que ça
donne sur uninputclassique et un lien :

<a href="#" onfocus="document.getElementById('in').value = 'Vous avez maintenant le focus sur le lien,

bravo !';">Un lien bidon</a>

Comme vous pouvez le constater, lorsque vous cliquez sur l'input, celui-ci « possède » le
focus : il exécute donc l'événement et affiche alors un texte différent vous demandant d'appuyer
sur votre touche de tabulation. L'appui sur la touche de tabulation permet de faire passer le
focus à l'élément suivant. En clair, en appuyant sur cette touche vous faites perdre le focus à
l'input, ce qui déclenche l'événementblur(qui désigne la perte du focus) et fait passer le
focus sur le lien qui affiche alors son message grâce à son événementfocus.

L'utilisation de « javascript: » dans les liens

Dans certains cas, vous allez devoir créer des liens juste pour leur attribuer un
événementclicket non pas pour leur fournir un lien vers lequel rediriger. Dans ce genre de
cas, il est courant de voir ce type de code :
<a href="javascript: alert('Vous avez cliqué !');">Cliquez-moi !</a>

Généralités sur l'objetEvent

Tout d'abord, à quoi sert cet objet ? À vous fournir une multitude d'informations sur
l'événement actuellement déclenché. Par exemple, vous pouvez récupérer quelles sont
les touches actuellement enfoncées, les coordonnées du curseur, l'élément qui a
déclenché l'événement… Les possibilités sont nombreuses !

element.onclick = function(e) { // L'argument « e » va récupérer une référence vers l'objet « Event »

alert(e.type); // Ceci affiche le type de l'événement (click, mouseover, etc.)

};

Il est important de préciser que l'objetEventpeut se récupérer dans un argument autre quee!
Vous pouvez très bien le récupérer dans un argument nommétest,hello, ou autre… Après
tout, l'objetEventest tout simplement passé en référence à l'argument de votre fonction, ce qui
vous permet de choisir le nom que vous souhaitez.

Validation de formulaire JavaScript

La validation du formulaire HTML peut être effectuée par JavaScript.

Si un champ de formulaire (fname) est vide, cette fonction alerte un message et renvoie la valeur false
pour empêcher la soumission du formulaire:

function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

la function peut étre appelé lorsque le formulaire est

<!DOCTYPE html>

<html>

<head>

function validateForm() {
var x = document.forms["myForm"]["fname"].value;

if (x == "") {

alert("Name must be filled out");

return false;

</script>

</head>

<body>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">

Name: <input type="text" name="fname">

<input type="submit" value="Submit">

</form>

</body>

</html>

JavaScript peut valider la saisie numérique

JavaScript est souvent utilisé pour valider une entrée numérique:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Can Validate Input</h2>

<p>Please input a number between 1 and 10:</p>

<button type="button" onclick="myFunction()">Submit</button>

function myFunction() {

var x, text;

// Get the value of the input field with id="numb"

x = document.getElementById("numb").value;

// If x is Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10) {

text = "Input not valid";

} else {

text = "Input OK";

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

Validation automatique du formulaire HTML

La validation du formulaire HTML peut être effectuée automatiquement par le navigateur:

Si un champ de formulaire (fname) est vide, l'attribut requis empêche l'envoi de ce formulaire:

<!DOCTYPE html>

<html>

<body>

<form action="/action_page.php" method="post">

<input type="text" name="fname" required>

<input type="submit" value="Submit">

</form>

<p>If you click submit, without filling out the text field,

your browser will display an error message.</p>

</body>

</html>

La validation des données

La validation des données consiste à s'assurer que les entrées de l'utilisateur sont propres, correctes et
utiles.

Les tâches de validation typiques sont:

l'utilisateur a-t-il rempli tous les champs obligatoires?

l'utilisateur a-t-il entré une date valide?

l'utilisateur a-t-il saisi du texte dans un champ numérique?

Le plus souvent, la validation des données a pour but de garantir une saisie correcte de l'utilisateur. La
validation peut être définie par différentes méthodes et déployée de différentes manières. La validation
côté serveur est effectuée par un serveur Web, une fois que les données ont été envoyées au serveur.
La validation côté client est effectuée par un navigateur Web avant que les entrées ne soient envoyées à
un serveur Web.

Vous aimerez peut-être aussi

Cours 4 Javascript
Pas encore d'évaluation
Cours 4 Javascript
52 pages
Chapitre 4 - JavaScript
Pas encore d'évaluation
Chapitre 4 - JavaScript
18 pages
Introduction au JavaScript Web
Pas encore d'évaluation
Introduction au JavaScript Web
51 pages
Chapitre 1: Introduction À Javascript: 1. Qu'Est-Ce Que Le Javascript ?
100% (1)
Chapitre 1: Introduction À Javascript: 1. Qu'Est-Ce Que Le Javascript ?
4 pages
JavaScript: Dynamisme Client et Intégration
100% (1)
JavaScript: Dynamisme Client et Intégration
73 pages
Exercices JavaScript: Scripts, Variables, Boucles et Formulaires
Pas encore d'évaluation
Exercices JavaScript: Scripts, Variables, Boucles et Formulaires
85 pages
Introduction au HTML pour Débutants
Pas encore d'évaluation
Introduction au HTML pour Débutants
59 pages
Technologie Web JavaScript PDF
100% (1)
Technologie Web JavaScript PDF
64 pages
Javascript
Pas encore d'évaluation
Javascript
51 pages
Chapitre 4 Le Langage JavaScript PDF
Pas encore d'évaluation
Chapitre 4 Le Langage JavaScript PDF
9 pages
Javascript
Pas encore d'évaluation
Javascript
67 pages
Guide des Événements JavaScript
Pas encore d'évaluation
Guide des Événements JavaScript
11 pages
Support Programmation Web JavaScript 2024-2025
Pas encore d'évaluation
Support Programmation Web JavaScript 2024-2025
37 pages
Mémo Js PDF
Pas encore d'évaluation
Mémo Js PDF
2 pages
Ch2 JavaScript (Complet) PDF
Pas encore d'évaluation
Ch2 JavaScript (Complet) PDF
25 pages
Résumé JS LBC
Pas encore d'évaluation
Résumé JS LBC
12 pages
Exercices Javascript
Pas encore d'évaluation
Exercices Javascript
4 pages
Chap9 Les Formulaires
Pas encore d'évaluation
Chap9 Les Formulaires
34 pages
E htmlCssExercice
Pas encore d'évaluation
E htmlCssExercice
36 pages
Poo Avec PHP7
100% (1)
Poo Avec PHP7
33 pages
Atelier 1 Mise en Place de L'environnement Du Travail Création D'une Application React & Initiation À JSX
Pas encore d'évaluation
Atelier 1 Mise en Place de L'environnement Du Travail Création D'une Application React & Initiation À JSX
7 pages
Résumé-JAVA SCRIPT
100% (1)
Résumé-JAVA SCRIPT
2 pages
Billiejoe Javascript Fiches
100% (1)
Billiejoe Javascript Fiches
54 pages
Chapitre1 HTML
Pas encore d'évaluation
Chapitre1 HTML
18 pages
NodeJS - N1-2-3-4-5-6-7 - 2023 - SansCCCC - 205 - Correction
Pas encore d'évaluation
NodeJS - N1-2-3-4-5-6-7 - 2023 - SansCCCC - 205 - Correction
57 pages
PHP 2022-2023 (Part 1)
Pas encore d'évaluation
PHP 2022-2023 (Part 1)
40 pages
Introduction à JavaScript pour Débutants
Pas encore d'évaluation
Introduction à JavaScript pour Débutants
73 pages
Cours Et TP 3
100% (1)
Cours Et TP 3
6 pages
TD-TP 3 - Dynamisme Avec JavaScript
Pas encore d'évaluation
TD-TP 3 - Dynamisme Avec JavaScript
5 pages
TP1 Javascript
100% (2)
TP1 Javascript
2 pages
Cours HTML5 2024-2025
Pas encore d'évaluation
Cours HTML5 2024-2025
14 pages
JavaScript (PDFDrive)
Pas encore d'évaluation
JavaScript (PDFDrive)
47 pages
TP JS
100% (3)
TP JS
5 pages
Cours Responsive Design
Pas encore d'évaluation
Cours Responsive Design
38 pages
PHP MySQL: Connexion et Requêtes
Pas encore d'évaluation
PHP MySQL: Connexion et Requêtes
13 pages
Formation Débutant en JavaScript
Pas encore d'évaluation
Formation Débutant en JavaScript
45 pages
Correction TP1 2 3-HTML5
Pas encore d'évaluation
Correction TP1 2 3-HTML5
4 pages
Cours PHP pour Débutants en BTS
Pas encore d'évaluation
Cours PHP pour Débutants en BTS
69 pages
TP JavaScript
100% (1)
TP JavaScript
3 pages
Atelier 1 HTML
Pas encore d'évaluation
Atelier 1 HTML
3 pages
Cours CSS
Pas encore d'évaluation
Cours CSS
37 pages
Les Bases de PHP
Pas encore d'évaluation
Les Bases de PHP
23 pages
Développement Web pour Lycéens
Pas encore d'évaluation
Développement Web pour Lycéens
54 pages
SLAM5 - 04 Cours NodeJS
Pas encore d'évaluation
SLAM5 - 04 Cours NodeJS
22 pages
Introduction au HTML et CSS pour lycéens
Pas encore d'évaluation
Introduction au HTML et CSS pour lycéens
7 pages
TP1 HTML - Développement D'application Web
Pas encore d'évaluation
TP1 HTML - Développement D'application Web
6 pages
Cours PHP
Pas encore d'évaluation
Cours PHP
52 pages
Chapitre1 Language Java
Pas encore d'évaluation
Chapitre1 Language Java
15 pages
Lecon 1 - Introduction A JavaScript PDF
Pas encore d'évaluation
Lecon 1 - Introduction A JavaScript PDF
14 pages
Introduction et Guide Complet sur JavaScript
Pas encore d'évaluation
Introduction et Guide Complet sur JavaScript
37 pages
Javascript: Formateur Jaouad Assabbour
Pas encore d'évaluation
Javascript: Formateur Jaouad Assabbour
164 pages
Programmation Web 2 Seances1-2
Pas encore d'évaluation
Programmation Web 2 Seances1-2
110 pages
Programmation Web 2 Seances 1-4
Pas encore d'évaluation
Programmation Web 2 Seances 1-4
150 pages
CoursJavaScript Id1805
Pas encore d'évaluation
CoursJavaScript Id1805
42 pages
Javascript
Pas encore d'évaluation
Javascript
57 pages
Cours JS
Pas encore d'évaluation
Cours JS
60 pages
JavaScript 1
Pas encore d'évaluation
JavaScript 1
34 pages
Partie1 Cours JavaScript V3 Presentation Variables Type
Pas encore d'évaluation
Partie1 Cours JavaScript V3 Presentation Variables Type
56 pages
1-JavaScript (1) - 035530
Pas encore d'évaluation
1-JavaScript (1) - 035530
31 pages
Programmation en Javascript Safaa New
Pas encore d'évaluation
Programmation en Javascript Safaa New
280 pages
Java Exercice Corrigé IGE
100% (7)
Java Exercice Corrigé IGE
83 pages
DAW Introduction Générale PDF
Pas encore d'évaluation
DAW Introduction Générale PDF
10 pages
02 - Grammaires Cours THL
Pas encore d'évaluation
02 - Grammaires Cours THL
42 pages
03 Automates Finis Cours THL
0% (1)
03 Automates Finis Cours THL
87 pages
Cours 2 CSS PDF
Pas encore d'évaluation
Cours 2 CSS PDF
57 pages
Cours Classe Arrays
Pas encore d'évaluation
Cours Classe Arrays
14 pages
00 Introduction Cours THL
Pas encore d'évaluation
00 Introduction Cours THL
8 pages
Chapitre5 Paquetages
Pas encore d'évaluation
Chapitre5 Paquetages
15 pages
Classes Abstraites et Interfaces
100% (1)
Classes Abstraites et Interfaces
33 pages
Systeme Exploitation Des Ordinateurs
Pas encore d'évaluation
Systeme Exploitation Des Ordinateurs
230 pages
Chapitre1 Introduction POO
Pas encore d'évaluation
Chapitre1 Introduction POO
43 pages
Introduction à la POO: Classes et Objets
Pas encore d'évaluation
Introduction à la POO: Classes et Objets
48 pages
LES SIEM - Les Log Sous Ubuntu Linux Server
Pas encore d'évaluation
LES SIEM - Les Log Sous Ubuntu Linux Server
11 pages
Irc Chapitre I PDF
Pas encore d'évaluation
Irc Chapitre I PDF
37 pages
Tp2 Wifi Vlans
Pas encore d'évaluation
Tp2 Wifi Vlans
3 pages
Creer Une Application Web de Vente en Ligne Avec Python
Pas encore d'évaluation
Creer Une Application Web de Vente en Ligne Avec Python
8 pages
11 - Présentation Des Services AD RMS
Pas encore d'évaluation
11 - Présentation Des Services AD RMS
21 pages
Compte Rendu TP 1 Montage Et Simulation D'un Générateur de Données Pseudo-Aléatoire
Pas encore d'évaluation
Compte Rendu TP 1 Montage Et Simulation D'un Générateur de Données Pseudo-Aléatoire
19 pages
TP 2 Scan
Pas encore d'évaluation
TP 2 Scan
3 pages
Fondement Du Web I Cours 5
Pas encore d'évaluation
Fondement Du Web I Cours 5
17 pages
Ingénieur D'etat en Aéronautique: Formation
Pas encore d'évaluation
Ingénieur D'etat en Aéronautique: Formation
1 page
TP2 - Traitement D'images Section: ING2 - INFO - TD1 Proposé Par: Nada Haj Messaoud & Asma Ben Abdallah
Pas encore d'évaluation
TP2 - Traitement D'images Section: ING2 - INFO - TD1 Proposé Par: Nada Haj Messaoud & Asma Ben Abdallah
11 pages
D (Lettre) - Wikipédia
Pas encore d'évaluation
D (Lettre) - Wikipédia
4 pages
Cours et Exercices sur Processus Stochastiques
Pas encore d'évaluation
Cours et Exercices sur Processus Stochastiques
46 pages
Optimisation des Réseaux de Graphes
Pas encore d'évaluation
Optimisation des Réseaux de Graphes
2 pages
Puissance de l'industrie américaine
Pas encore d'évaluation
Puissance de l'industrie américaine
5 pages
Formation - Cisco Implementation de Cisco Ip Switched Networks
Pas encore d'évaluation
Formation - Cisco Implementation de Cisco Ip Switched Networks
1 page
Zaha Hadid-5
Pas encore d'évaluation
Zaha Hadid-5
11 pages
Programme Sciences 2e Degré GT
Pas encore d'évaluation
Programme Sciences 2e Degré GT
108 pages
Créer Un DVD de Vista Avec sp2 Intégré
Pas encore d'évaluation
Créer Un DVD de Vista Avec sp2 Intégré
10 pages
Introduction au langage SysML
Pas encore d'évaluation
Introduction au langage SysML
9 pages
TD8 Rtel
Pas encore d'évaluation
TD8 Rtel
3 pages
Etat de L'art de La Classification Automatique Pour L'acquisition de Connaissances À Partir de Textes.
Pas encore d'évaluation
Etat de L'art de La Classification Automatique Pour L'acquisition de Connaissances À Partir de Textes.
30 pages
CFR MANUEL-SIMPLIFIE EVD EVDEVO FR Rel1.3
Pas encore d'évaluation
CFR MANUEL-SIMPLIFIE EVD EVDEVO FR Rel1.3
7 pages
Delta Ia-Plc DVP-20PM I Tset 20140702
Pas encore d'évaluation
Delta Ia-Plc DVP-20PM I Tset 20140702
20 pages
Covadis PLATEFORME Cov2
Pas encore d'évaluation
Covadis PLATEFORME Cov2
3 pages
Cat 14 FR Complete PDF
Pas encore d'évaluation
Cat 14 FR Complete PDF
165 pages
Introduction aux Diagrammes UML
Pas encore d'évaluation
Introduction aux Diagrammes UML
11 pages
Plans D'action
Pas encore d'évaluation
Plans D'action
15 pages
CV Job Étudiant - Soukaina AADNANE
Pas encore d'évaluation
CV Job Étudiant - Soukaina AADNANE
1 page
Chapitre 1 Et 2 Final
Pas encore d'évaluation
Chapitre 1 Et 2 Final
20 pages
CV Tchetche Henri PDF
Pas encore d'évaluation
CV Tchetche Henri PDF
1 page