Chapitre n°2 : Syntaxes de base de JavaScript

I. Généralités
Le langage JavaScript a une syntaxe qui se rapproche des langages C/C++ :
 Le JavaScript est sensible à la casse : la variable « A » n’est pas la même que « a ».
 Comme en langage C, chaque instruction se termine par un point-virgule (;).
 Un nombre à virgule (réel) est séparé par un point (.) et non par une virgule (12.75).
 Pour mettre en commentaire toute une ligne on utilise le double slach (//commentaires).
 Pour mettre un commentaire sur plusieurs lignes, on utilise le */ et le /*.
 Les niveaux d’imbrication de boucle sont indiquées avec les caractères ‘{’ et ‘}’ ;
 Pour que l’interpréteur JavaScript puisse reconnaître du code JavaScript, on l’insère
dans la page HTML à l’aide de la balise <script>.
II. Les variables
En JavaScript, le type d’une variable n’est pas explicité. Le type de la variable est donc
fixé en fonction de son contenu.

II.1. La déclaration et l’affectation

 La déclaration : consiste à donner un nom à la variable ; Le mot-clé var permet de déclarer

une ou plusieurs variables.
 L’affectation : consiste à donner une valeur à la variable. Après la déclaration de la
variable, il est possible de lui affecter une valeur par l'intermédiaire du signe d'égalité (=).
 Si une valeur est affectée à une variable sans que cette dernière ne soit déclarée, alors
JavaScript la déclare automatiquement.
Exemple:
var i, j, k; //Déclaration de i, de j et de k.
i = 1; //Affectation de i.
var prix = 0; //Déclaration et affectation de prix.

II.2. Les types de variables

Les types disponibles en JavaScript sont classiques :

 boolean :booléen, ex. : var isOK = true ;
 number : nombre entier ou réel, ex. : var nb = 15;
 string : chaîne de caractère, ex. : var nom = "Jean";
 Array: tableau, liste de valeur, ex. : var tab = new array(12,4,2) ;
1
 objet: objet (au sens programmation orientée objet).

2
 II.3. Les booléens

Ils ne peuvent prendre que deux valeurs: true ou false.

II.4. Les opérateurs

Comme tout langage informatique, JS possède des opérateurs pour effectuer les calculs.
On prend dans les exemples, x=11 et y=5 ;

II.4.1. Les opérateurs de calcul

Les opérateurs de calcul dans JavaScript sont présentés dans le tableau suivant :
Signe Nom Signification Exemple Résultat
+ Plus Addition x+3 14
- Moins Soustraction x–3 8
* multiplié par multiplication x*2 22
/ divisé par Division x/2 5.5
% Modulo reste de la division par x % 5 1
= Affectation a la valeur x=5 5

II.4.2. Les opérateurs de comparaison

Les opérateurs de comparaison dans JavaScript sont présentés dans le tableau suivant :
Signe Nom Exemple Résultat
== Egal x == 11 true
< Inférieur x < 11 false
<= Inférieur ou égal x <= 11 true
> Supérieur x > 11 false
>= Supérieur ou égal x >= 11 true
!= Différent x != 11 false
Ces opérateurs seront utilisés dans les boucles conditionnelles. Le résultat s’exprime alors en
valeur booléenne.

II.4.3. Les opérateurs associatifs

Les opérateurs associatifs dans JavaScript sont présentés dans le tableau suivant :

Signe Description Exemple Signification Résultat

3
+= plus égal x += y x=x+y 16

4
 -= moins égal x -= y x=x–y 6
*= multiplié égal x *= y x=x*y 55
/= divisé égal x /= y x=x/y 2.2
Ces opérateurs permettent une incrémentation ou une décrémentation autre que 1.

II.4.4. Les opérateurs logiques

Les opérateurs logiques dans JavaScript sont présentés dans le tableau suivant :
Signe Nom Exemple Signification
&& Et (condition1) && (condition2) condition1 et condition2
|| Ou (condition1) || (condition2) condition1 ou condition2
On utilisera ces opérateurs dans les boucles conditionnelles principalement. Chaque
condition correspondant à une expression avec un opérateur de comparaison. Ces opérateurs
fonctionnent comme un ET logique et un OU logique.

II.4.5. Les opérateurs d'incrémentation

Les opérateurs d’incrémentation dans JavaScript sont présentés dans le tableau suivant :
Signe Description Exemple Signification Résultat
x++ incrémentation y = x++ y =x+1 6
x-- décrémentation y= x-- y =x–1 4

II.5. Les chaînes de caractères

Les chaînes de caractères peuvent être délimitées aussi bien par le caractère « ' ' »
(apostrophe) que par le caractère « " " » (guillemets).
On peut concaténer les chaînes facilement avec l’opérateur ‘+’ (plus).
Certains caractères peuvent être insérés dans les chaînes de caractères : le retour arrière (\b), le
saut de page (\f), le saut de ligne (\n), l’entrée (\r), la tabulation (&) et l’apostrophe (\’).

II.6. Les tableaux

On peut définir des tableaux grâce au mot clé Array. Plus qu’un mot clé, il s’agit en fait
d’un objet. Pour définir un tableau, on effectue donc une instanciation de la classe Array (avec
le mot clé new ).
Exemple:
var tab1 = new Array();
var tab2 = new Array('Jean','Michel');
5
var tab3 = new Array(2);

6
tab3[0] = 'Jean';
Les tableaux sont dynamiques, c’est-à-dire que la taille s’adapte automatiquement en
fonction du nombre de valeurs enregistrées. On peut aussi définir des tableaux associatifs, ainsi
que des tableaux multi-dimensions.
III. Les structures de contrôle
Elles sont identiques au langage C.

III.1. Les opérateurs

 opérateurs de tests : ==, !=, >, <, >=, <= ;

 opérateurs logiques : AND ou &&, OR ou ||, NOT ou !, XOR ou ^^.
Le résultat obtenu est un booléen.

III.2. Les tests

III.2.1. Test simple

On réalise un test simple avec l’instruction if () éventuellement associée avec l’instruction
else, suivant la syntaxe :
if (condition) {
/* instructions si condition validée */
}
else {
/* instructions si condition invalidée */
}
Exemple:
x = prompt ("votre age?","age");
if ( x < 40) {
alert ('vous êtes jeune') ;
}
else {
alert ('vous êtes vieux') ;
}

III.2.2. Test multiple

On réalise un test multiple avec les instructions switch et case éventuellement associées
avec l’instruction default, suivant la syntaxe :
switch (variable) {
case valeur1 : /* instructions si variable vaut valeur1 */
break
case valeur2 : /* instructions si variable vaut valeur2 */
break
7
...
default : /* instructions si variable ne vaut aucune des valeurs */

8
 }

III.3. Les boucles

III.3.1. Boucle « tant que… faire… »

On réalise une boucle « tant que » (répétition avec aucune exécution au minimum) avec
l’instruction while (), suivant la syntaxe :

while (condition) {
/* instructions */
}

III.3.2. Boucle « répéter… jusqu’a »

On réalise une boucle « répéter tant que » (répétition avec aucune exécution au minimum)
avec les instructions do et while (), suivant la syntaxe :
do {
/* instructions */
}
while (condition);

III.3.3. Boucle « pour… faire »

On réalise une boucle « pour » (répétition contrôlée) avec l’instruction for (), suivant la
syntaxe :
for (initialisation ; condition ; incrémentation ou décrémentation) {
/* instructions */
}
Exemple :
for (i = 0; i < 10; i++) {
document.write(i + " ");
}

IV. Les fonctions

IV.1. Définition

C’est un groupe d’instruction prédéfini et exécuté lorsqu’il est appelé et que l’on peut
appeler plusieurs fois.
En JavaScript, il existe deux types de fonctions :
9
  les fonctions propres à JavaScript, appelées méthodes. Elles sont associées à un objet
en particulier.
 les fonctions que vous définissez vous-même. Ce sont celles qui nous intéressent ici.

IV.2. Déclaration

Pour déclarer ou définir une fonction, on utilise le mot-clé function.

La syntaxe d'une déclaration de fonction est la suivante :
Syntaxe :
function nom_de_la_fonction (arguments) {
code des instructions
}

Le nom d’une fonction suit les mêmes règles que celui d’une variable. Chaque nom de
fonction doit être unique dans un même script. Les parenthèses sont obligatoires même si il n’y
a pas d’arguments, puisque JavaScript reconnaît une fonction grâce à elles.

IV.3. Les fonctions dans l’en-tête

Il est plus prudent de placer les déclarations de fonctions dans l’en-tête <head>…</head>
pour qu’elles soient prises en compte par l’interpréteur avant leur exécution dans le corps de
la page <body>…</body>

IV.4. L'appel d'une fonction

Syntaxe :
nom_de_la_fonction();
Il faut que la fonction ait été définie avant l’appel, étant donné que l’interpréteur lit le
script de haut en bas.

IV.5. Fonctions manipulant des valeurs

IV.5.1. Passer une valeur à une fonction

On peut passer des valeurs à une fonction. On parle alors de paramètres. Pour passer un
paramètre à une fonction, on fournit un nom d'une variable dans la déclaration de la fonction.

On peut passer plusieurs paramètres à une fonction, en séparant les paramètres par des virgules.
Syntaxe :
function nom_de_la_fonction(arg1, arg2, arg3) {
instructions
}
10
Exemple:
function cube(nombre) {
y = nombre*nombre*nombre;
return y; //retour de valeur
}
x = cube(5); //appel avec paramètre
document.write(x); //résultat

IV.5.2. Retourner une valeur

Une fonction peut retourner une valeur. Il suffit alors de placer le mot-clé return suivi de
la valeur ou de la variable à retourner.
Exemple:
function cube(nombre) { //Définition de la fonction
var c = nombre*nombre*nombre ;
return c; //Retour du cube du paramètre
}
var x = cube(5) ; // appel avec paramètre
document.write (x) ; //affichage
NB : Le mot-clé return est facultatif.

IV.6. Variables locales et variables globales

Une variable déclarée dans une fonction par le mot-clé var aura une portée limitée à cette
seule fonction. On l'appelle donc variable locale et ne pourra être utilisé dans le reste du script.
Exemple:
function cube(nombre) {
var c = nombre*nombre*nombre ;
}
Si la variable est déclarée sans utiliser le mot var, sa portée sera globale.
Les variables déclarées tout au début du script, en dehors et avant toutes fonctions, seront
toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle.
Exemple:
var cube=1
function cube(nombre) {
var cube = nombre*nombre*nombre ;
}

11
 IV.7. Les fonctions prédéfinies

IV.7.1. eval
 Cette fonction exécute un code JavaScript à partir d'une chaîne de caractères.
...
<SCRIPT LANGUAGE="JavaScript"> function evaluation() {
document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }
</SCRIPT>
...
<FORM NAME="formulaire">
Saisissez une expression mathématique : <INPUT TYPE="text" NAME=saisie
MAXLENGTH=40 SIZE=40>
<INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()">
<INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40>
</FORM>...

IV.7.2. isFinite
 Détermine si le paramètre est un nombre fini. Renvoie false si ce n'est pas un
nombre ou l'infini positif ou infini négatif.
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false

IV.7.3. isNaN
 détermine si le parametre n’est pas un nombre (NaN : Not a Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false

IV.7.4. parseFloat
 analyse une chaîne de caractères et retourne un nombre décimal.
 Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125

IV.7.5. parseInt
 analyse une chaîne de caractères et retourne un nombre entier de la base spécifiée.
 La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2
(binaire).
12
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30

IV.7.6. Number
 convertit l'objet spécifié en valeur numérique
var jour = new Date("December 17, 1995 03:24:00"); /*converit la date en millisecondes*/
alert (Number(jour));

IV.7.7. String
 convertit l'objet spécifié en chaîne de caractères

jour = new Date(430054663215); /*Convertit le nombre en date Mois jour, Annéee etc.*/
alert (String(jour));

IV.7.8. Escape
 retourne la valeur hexadécimale à partir d'une chaîne de caractère codée en ISO-
Latin-1.
escape("!&") //retourne %21%26%

V. Exercices d’application

Exercice n°1:
Créer un document HTML contenant un script JavaScript qui permet d'entrer un prix hors taxe
puis calcule et affiche le prix TTC pour un taux de TVA de 18%.

Exercice n°2 :
Écrire un programme HTML contenant un script JavaScript qui demande trois nombres a, b et
c et qui effectue une permutation circulaire, donc rend c, a, b (la valeur de c doit être dans la
variable a, la valeur de a dans la variable b et la valeur b dans la variable c).

Exercice n°3 :
Écrire un programme HTML contenant un script JavaScript qui demande deux nombres et rend
le plus grand.

Exercice n°4 :

13
Écrire un programme HTML contenant un script JavaScript qui demande le nombre de notes,
puis calcule la moyenne.

14
Exercice n°5 :
Écrire un programme HTML contenant un script JavaScript qui affiche tous les
nombres impairs inferieurs à N après avoir demandé N.

Exercice n°6 :
Écrire un programme HTML contenant un script JavaScript faisant apparaitre les
nombres premiers compris entre 0 et 100.

Exercice n°7 :
Ecrire en JavaScript une fonction qui permet de tester si un nombre donnée est premier ou
non. (Si nombre premier la fonction retourne « true », si non retourne « false »)

Exercice n°8 :
Ecrire en JavaScript une fonction Somme et multiplie qui permet de calculer la somme et
la multiplication des entiers de 0 à n. (Écrire les deux fonctions de deux façons (sans et
avec argument)).
Exercice n°9 :
Ecrire en JavaScript une fonction qui retournera la racine quatrième de la valeur passée
en argument.
Exercice n°10 :
Ecrire une fonction qui permette de donner la factorielle d’un nombre positif de trois
façon, à l'aide d'une boucle for, boucle while puis de manière récursive.
Explication :
factorielle(n) = 1×2×3×4×...×n = n!
Est définie récursivement par 0! = 1 et lorsque n>0 par n! = n × (n-1)!

15