Chapitre 2 : Les bases de JavaScript

1. Déclaration et affectation de variables

a. Déclaration
Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront
être modifiées lors de l'exécution du script JavaScript. Le nom de la variable respecte les
mêmes règles que celles du langage C. Une variable est déclarée au départ par :
var nom_variable = valeur;
ou encore :
var nom_variable ;
b. Affectation
var a,b,c,d ;
a=2 ;
a=b=c=d=5 ;
c. Affectation composée
+= -= *= /= %=
a+=b ; // équivaut à a=a+b ;

2. Types de variables
Les variables JavaScript peuvent contenir de nombreux types de données : nombres, chaînes,
objets et plus. JavaScript a des types dynamiques cela signifie que la même variable peut être
utilisée pour contenir différents types de données :
var x=5 ;
x="Ali" ;
a. Chaînes de caractères : string
La chaîne de caractères écrite entre deux guillemets " ou entre deux côtes '
var x="Hello" ;
var y='Hi' ;
b. Type numérique : number
Un nombre peut être un entier ou réel.
var x1 = 34.00;
var x2 = 34;
var y = 123e5;
var z = 123e-5;
c. Booléens : Boolean
Un booléen pouvant avoir l’une des valeurs : true et false.

1
 d. Tableaux : array
Les tableaux avec JavaScript sont écrits entre crochets et les éléments sont séparés par des
virgules.
var prenoms = ["Ali", "Salah", "Ahmed"];
Les index de tableau commencent par zéro. Pour le tableau prenoms, le premier élément est
prenoms[0], le second est prenoms[1], etc.
e. Objets : object
Les objets JavaScript sont écrits avec des accolades {}. Les propriétés des objets sont écrites
sous forme de paires nom : valeur, séparées par des virgules.
var etudiant = {CIN:123456789, prenom:"Ali", classe:"TI1.1"};
f. Undefined
En JavaScript, une variable sans valeur a la valeur undefined. Le type est aussi undefined.
var x ; //la valeur de x est undefined et le type de x est
undefined

3. Fonctions sur les types

a. Conversion de type
parseInt() : analyse une chaîne et retourne un entier.
var a = parseInt("10") ;// a contient l’entier 10
parseFloat (): analyse une chaîne et retourne un réel.
var b = parseFloat("10.56") ; // b contient le réel 10.56
Number() : convertit l'argument objet en un nombre qui représente la valeur de l'objet.
var c = Number(true); // c contient 1
String() : convertit la valeur d'un objet en chaîne.
var d = String(12345); // d contient la chaine "12345"
b. Test sur les types
typeof : cet opérateur donne le type de données d’une variable JavaScript.
typeof "Ali" // Retourne "string"
typeof 3.14 // Retourne "number"
isNaN (): La fonction isNaN () détermine si une valeur est un nombre illégal (Not-a-Number).
isNaN(123) //false
isNaN('Hello') //true
isNaN(undefined) //true

2
 4. Les opérateurs
a. Les opérateurs arithmétiques binaires
Opérateur Nom Exemple Résultat

+ Plus 7+5 12

- Moins 7-5 2

* multiplié par 7*5 35

/ divisé par 4/2 2

% Modulo (reste de la division) 12%7 5

b. Les opérateurs de comparaison

Opérateur Signification Exemple

< inférieur a<b

<= inférieur ou égal a<=b

== égal a==b

> supérieur a>b

>= supérieur ou égal a>=b

!= différent a!=b

=== égal valeur et type a===b

!=== différent valeur et type a !===b

c. Les opérateurs logiques

Opérateur Signification Exemple

&& et a && b

|| Ou a || b

! Non !a

d. Opérateur ternaire
x= b> 3 ? "oui" : "non" ;
/*x contient oui si b>3 et non si b<=3*/

3
 e. La concaténation de caractères
L'opérateur + permet de concaténer des chaînes de caractères, c'est-à-dire de les mettre bout
à bout.
Exemple :
var bjr = 'Bonjour', nom = 'Ali', resultat;
resultat = bjr + nom;
alert(result); // Affiche : « BonjourAli »
L'ajout de deux nombres renvoie la somme, mais l'ajout d'un nombre et d'une chaîne renvoie
une chaîne.
Exemples :
var x = 5 + 5; // x contient 10
var y = "5" + 5; // x contient 55
var z = "Hello" + 5; // x contient Hello5
var w = 5 + 5 + "Hello" ; // x contient 10Hello

5. Les structures de contrôle

Les structures de contrôles conditionnelles et itératives ont la même syntaxe des structures
du langage C.
a. if – else
L'expression if – else permet d'exécuter une autre série d'instruction en cas de non-réalisation
de la condition. La syntaxe de cette expression est la suivante :
if (condition) {
instructions lorsque condition est évaluée à true
}
else {
instructions lorsque condition est évaluée à false
}
b. switch – case
L'instruction switch permet de faire plusieurs tests de valeurs sur le contenu d'une même
variable. Ce branchement conditionnel simplifie beaucoup le test de plusieurs valeurs d'une
variable. Sa syntaxe est la suivante :
switch (Variable) {
case Valeur1: Liste d'instructions; break;
case Valeur2: Liste d'instructions; break;
case ValeurX: Liste d'instructions; break;
default: Liste d'instructions;
}
c. for
L'instruction for permet d'exécuter plusieurs fois la même série d'instructions. La syntaxe de
cette expression est la suivante :
for (initialisation compteur; condition; modification du
compteur) {
liste d'instructions à répéter
}

4
 d. while
L'instruction while représente un autre moyen d'exécuter plusieurs fois la même série
d'instructions. La syntaxe de cette expression est la suivante :
while (condition) {
liste d'instructions à répéter
}
e. do – while
L'instruction do – while représente permet d'exécuter une ou plusieurs fois la même série
d'instructions. La syntaxe de cette expression est la suivante :
do {
liste d'instructions à répéter
} while (condition)

6. Les fonctions
On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions
par simple appel de la fonction dans le corps du programme principal.
a. Déclaration d’une fonction
Avant d'être utilisée, une fonction personnalisée doit être déclaré par le programmeur. La
déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe suivante :
function Nom_De_La_Fonction(argument1, argument2, ...)
{
liste d'instructions
}
b. Appel d’une fonction
Pour exécuter une fonction, il suffit de lui faire appel en écrivant son nom suivie d'une
parenthèse ouverte (éventuellement des arguments) puis d'une parenthèse fermée :
Nom_De_La_Fonction();
c. Valeur renvoyée
return valeur ;
Exemple :
// Corps de la fonction
function surfaceRec (longueur, largueur)
{
return longueur*largueur ;
}
// Appel de la fonction
alert (surfaceRec(30,50)) ;
d. Fonctions anonymes et fonctions fléchées
Les fonctions anonymes sont importantes en JavaScript. Elles serviront dans la programmation
des objets, des évènements, etc. Il n’est pas possible de voir l'utilité immédiatement, il est
nécessaire de voir quelques chapitres supplémentaires pour commencer à en servir
réellement.

5
Comme leur nom l'indique, ces fonctions spéciales sont anonymes car elles ne possèdent pas
de nom. C’est la seule et unique différence avec une fonction traditionnelle.
Pour déclarer une fonction anonyme, il suffit de faire comme pour une fonction classique mais
sans indiquer de nom :
function (arguments) {
// Le code de la fonction anonyme
}
Pour exécuter cette fonction, il existe de très nombreuses façons de faire. Cependant, dans
l'état actuel du cours, on va se limiter à une seule solution : assigner la fonction à une variable.
var affBonjour = function() {
alert('Bonjour !');
};
affBonjour ();
Les fonctions fléchées ont été introduites avec ES6. Elles sont des fonctions anonymes avec
une nouvelle syntaxe. Elles sont destinées à faciliter l'appel aux callbacks (c'est-à-dire des
fonctions passées en paramètres d'autres fonctions). Il est possible de les affecter à une
variable. Ces fonctions renvoient toujours un résultat, mais le return est implicite. La syntaxe
générale est la suivante :
([param] [, param]) =>{
//instructions
}
La syntaxe la plus courte est par exemple
var res = x => x+2;

7. Déclaration de variable avec var, let et const

a. Portée de variable
La portée d'une variable désigne l'ensemble du code dans lequel elle peut être utilisée. Une
variable peut être définie avec les mots-clefs var, const ou let.
b. Déclarer une variable avec var
Si une variable est déclarée sans le mot-clef var, elle peut être utilisée n'importe où dans le
script. On l’appelle alors variable globale.
Si une variable est déclarée avec le mot-clef var, elle ne peut être utilisée que dans la fonction
où elle se trouve. On l’appelle alors variable locale.
Exemple :
var a = 8 ;
function test()
{
var pi = 3.14 ;
(…) ;
}
function test2()
{
(…) ;

6
Dans l’exemple ci-dessous, la variable a peut-être utilisée dans les fonctions test et test2, mais
la variable pi ne peut être utilisée que dans la fonction test.
Cette possibilité de contrôler la portée d'une variable conduit à conseiller l'utilisation du mot-
clef var dès que cela est possible. Cela permet par exemple d'éviter d'écraser par inattention
la valeur d'une variable portant le même nom.
c. Déclarer une variable avec let
On peut affiner la portée d'une variable avec le mot-clef let. let permet de limiter la portée
d'une variable à un bloc (compris entre deux accolades), alors que var s'étend au-delà du bloc.
Exemple :
function testVarLet()
{
var x=5 ;
let y=5 ;
{
var x=6 ;
let y=6 ;
}
console.log(x) ; // affiche 6
console.log(y) ; // affiche 5
}
La portée de y modifiée étant restée confinée dans le bloc.
d. Déclarer une variable avec const
const fonctionne, du point de vue de la portée, de manière similaire à let mais introduit une
nuance de taille : on ne peut pas affecter une nouvelle valeur à une variable définie avec const.
Exemple :
function testConst()
{
const X=5 ;
const X=6 ;
const Y={prop1:1, prop2:"essai"} ;
const Y={prop1:2, prop2:"test"} ;
}
L’exemple ci-dessous de la focntion testConst déclenchera des erreurs.
Uncaught SyntaxError: Identifier 'X' has already been declared
Mais const ne signifie pas que la « constante » ne peut pas changer ; cette instruction signifie
que la variable (ici X ou Y) pointe toujours vers la même référence.
Le code ci-dessous de la fonction testConst2 ne produit ainsi pas d'erreur, car on ne change
pas la valeur de la constante (qui continue à pointer vers un objet donné), mais son contenu :
Exemple :
function testConst2()
{
const Z={prop1:1, prop2:"essai"} ;
Z.prop1=2;
Z.prop2="test" ;
}

7
 8. Les boîtes de dialogue
Une boîte de dialogue est une fenêtre qui s'affiche à l’écran suite à un événement, et qui
permet :
• Soit d'avertir l'utilisateur : alert
• Soit de confirmer un choix : confirm
• Soit de lui demander de saisir une information : prompt
a. alert()
alert () permet d'afficher une boîte composée d'une fenêtre d'un bouton OK et le texte qu'on
lui fournit en paramètre. Dès que cette boîte est affichée, l'utilisateur n'a d'autre alternative
que de cliquer sur le bouton OK.
Voici sa syntaxe :
alert('Message affiché par alert');
// ou bien
alert('Message affiché par alert' + variable);

b. confirm()
confirm () est similaire à la méthode alert (), la différence est qu'elle permet un choix entre
"OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la valeur true. Elle
renvoie false dans le cas contraire.
Elle admet comme alert() un seul paramètre : une chaîne de caractères.Sa syntaxe est :
var x=confirm('Message affiché par confirm');

c. prompt()
prompt () fournit un moyen simple de récupérer une information provenant de l'utilisateur.
prompt () requiert deux arguments :
• le texte d'invite
• la chaîne de caractères par défaut dans le champ de saisie

8
Sa syntaxe est la suivante :
var v = prompt('Posez ici votre question','chaîne par défaut');
Cette boîte d'invite retourne la valeur de la chaîne saisie par l'utilisateur, elle retourne la
valeur null si jamais aucun texte n'est saisi.

9. Les sorties de JavaScript

JavaScript peut afficher les données de différentes manières :
a. document.write()
À des fins de test, il est pratique d'utiliser document.write ().
Exemple :
<!DOCTYPE html>
<html>
<body>
<h1>Mon titre</h1>
<p>Mon paragraphe</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
On aura l’affichage suivant :

b. console.log()
À des fins de débogage, on peut appeler la méthode console.log () dans le navigateur pour
afficher les données dans la partie console.
<!DOCTYPE html>
<html>
<body>
9
 <script>
console.log(5 + 6);
</script>
</body>
</html>
On aura l’affichage suivant :

10