Cours MMI - Intégration avancée

Introduction

Javascript est un langage dynamique côté client.
Il est exécuté par le navigateur. Tous les navigateurs sont capables d'interpréter Javascript.
L'extension d'un fichier Javascript est le .js.

Javascript permet d'interagir avec le DOM (Document Object Model), autrement dit la page web. Il est alors possible, de façon dynamique, d'afficher et masquer des éléments, d'écrire du texte dans la page, de modifier le style d'un élément, etc.

Pour inclure du Javascript dans un document HTML, il existe deux possibilités :

Écrire le code javascript directement à l'intérieur de balises <script></script>
Écrire le code dans un fichier au format .js et l'importer à l'aide de la balise <script> via l'attribut src

Nous utiliserons quasi-systématiquement la deuxième solution, pour la simple raison qu'elle permet de rendre le code plus clair en séparant le JS du HTML.

Important : on importe toujours le javascript à la fin du document, juste avant la fermeture de la balise <body>. Un document étant toujours lu par le navigateur du haut vers le bas, le DOM peut ne pas avoir fini de charger au moment de l'exécution du script s'il est positionné en haut de page, et certaines parties du code risquent alors de ne pas fonctionner.

Premier exemple : Hello World

Créez un fichier script.js que vous placerez dans un répertoire nommé js. Écrivez l'instruction suivante dans le fichier :

js/script.js

alert('Hello World!');

Importez maintenant le script en utilisant la balise <script> juste avant la fermeture de la balise <body> :

index.html

<!doctype html>
<html lang="fr">
<head>
  <title>Introduction à Javascript</title>
</head>
<body>
  <h1>Introduction à Javascript</h1>

  <script src="js/script.js"></script>
</body>
</html>

alert() est une fonction Javascript qui affiche une pop-up contenant le texte passé en paramètre. Le code que nous avons écrit affiche donc une pop-up "Hello World!"

Les variables

Les variables sont des conteneurs qui permettent de stocker des valeurs. Ces valeurs peuvent être de différents types :

Chaîne de caractères (ou string)
Nombre
Booléen (vrai ou faux)
Tableau (ou array)
Objet

Pour déclarer une variable en Javascript, on utilise le mot-clé var suivi du nom de la variable. Attention, le nom de la variable ne peut contenir que des caractères alphanumériques et underscores (_).

var myVar;

Une fois que la variable est déclarée, on peut lui attribuer une valeur en utilisant le signe =.

myVar = "Ma variable";

On peut également déclarer une variable et lui attribuer une valeur directement en une seule instruction :

var myVar = "Ma variable";

On pourra ensuite utiliser cette valeur n'importe où dans notre script en faisant simplement référence au nom de la variable.

// Affiche une pop-up contenant le texte "Ma variable"
alert(myVar);

// Affiche "Ma variable" dans la console.
console.log(myVar);

L'instruction console.log() est une fonction qui permet d'afficher un message dans la console du navigateur. Cette fonction est très utile pour tester ses programmes.
Dans Google Chrome, la console peut être affichée depuis le menu "Afficher > Options pour les développeurs > Outils de développement" (⌘+⌥+I)

Il est également possible de déclarer une variable avec le mot-clé let pour limiter sa portée, ou une constante avec le mot-clé const. Pour en savoir plus, vous pouvez vous référer à ce guide.

Les Strings

Une chaîne de caractère doit être entourée de quotes simples (') ou doubles (")

var myVar = "Ma variable";

Les nombres

Pour être considérée comme un nombre, la valeur ne doit pas être entourée de quotes. Les décimales doivent être séparées par un point.

var myNumber = 10;

Les booléens

Une valeur booléenne est soit true (vrai), soit false (faux)

var myBoolean = true;

Les tableaux

Un tableau (ou array) est une liste de valeurs. Ces valeurs peuvent être de n'importe quel type. Les valeurs du tableau doivent être indiquées à l'intérieur de crochets ([]) et séparées par des virgules.

var myArray = [1, 6, 17];

Un tableau en Javascript est automatiquement indexé. L'index de la première valeur est toujours zéro, puis un, etc.
Pour afficher la valeur correspondant à un index, on utilisera le nom de la variable suivi de crochets contenant l'index.

console.log(myArray[0]);  // 1
console.log(myArray[1]);  // 6
console.log(myArray[2]);  // 17
console.log(myArray[3]);  // undefined

Les objets

Un objet est une association de clés (propriétés) et de valeurs. Il est défini par des crochets ({}). Chaque valeur est définie par une clé à l'aide du symbole :

var myObject = {
  first_name: "John",
  last_name: "Doe",
  age: 34
};

Pour récupérer une propriété d'un objet, on peut utiliser les crochets comme pour les tableaux, ou le point.

console.log(myObject['first_name']);    // John
console.log(myObject.last_name);        // Doe

Attention : Lorsque vous utilisez la syntaxe tableau, le nom de la clé doit être utilisé avec des guillemets (simples ou doubles) car il s'agit d'une chaîne de caractère.

On peut également affecter une valeur à une propriété d'un objet comme on affecte une valeur à une variable.

myObject.birth_date = '25/04/1990';

Les opérateurs

Comme dans tout langage de programmation, Javascript permet d'effectuer des opérations sur des valeurs pour en retourner un résultat.

Opérateurs mathématiques

Les opérateurs mathématiques peuvent être utilisés sur des nombres. Ils servent notamment à effectuer des additions, soustractions, multiplications et divisions.

var a = 12,
    b = 4;

var addition = a + b;
console.log(addition);        // 16

var soustraction = a - b;
console.log(soustraction);    // 8

var multiplication = a * b;
console.log(multiplication);  // 48

var division = a / b;
console.log(division);        // 3

var reste = a % b;
console.log(reste);           // 0

Raccourcis

Il arrive fréquemment que l'on aie besoin de modifier la valeur d'une variable au cours d'un programme. Dans ce cas, on peut affecter à la variable la nouvelle valeur en utilisant le signe = :

var a = 1;

console.log(a);         // 1

a = a + 2;

console.log(a);         // 3

Il existe pour ce type d'opération une syntaxe raccourcie constituée de l'opérateur accolé au signe =. Pour incrémenter la valeur d'une variable, on pourra donc utiliser le signe += :

var a = 1;

a += 4;
console.log(a);         // 5

La même règle fonctionne pour tous les autres opérateurs :

var a = 20;

a -= 4;
console.log(a);         // 16

a *= 2;
console.log(a);         // 32

a /= 4;
console.log(a);         // 8

a %= 3;
console.log(a);         // 2

Pour incrémenter ou décrémenter une valeur, on peut également utiliser les raccourcis ++ et -- :

var a = 0;

a++;
console.log(a);         // 1

a++;
console.log(a);         // 2

a--;
console.log(a);         // 1

Concaténation

Lorsque l'opérateur + est utilisé sur des chaînes de caractères, il a pour effet de coller les deux chaînes ensemble. C'est ce qu'on appelle concaténer.

var a = "Hello",
    b = "World";

console.log(a + b);         // HelloWorld
console.log(a + " " + b);   // Hello World

On peut là aussi utiliser le raccourci += pour ajouter du texte à la fin d'une chaîne :

var a = "Hello";

a += " World!";

console.log(a);             // Hello World!

Opérateurs de comparaison

Les opérateurs de comparaison permettent de vérifier, par exemples, si deux valeurs sont égales ou différentes ou bien si l'une est supérieure à l'autre. Le résultat renvoyé est toujours true ou false.

var a = 10,
    b = 20;

// Vérifier si a est égal à b (false)
console.log(a === b);

// Vérifier si a est supérieur à b (false)
console.log(a > b);

// Vérifier si a est inférieur à b (true)
console.log(a < b);

// Vérifier si a est supérieur ou égal à b (false)
console.log(a >= b);

// Vérifier si a est inférieur ou égal à b (true)
console.log(a <= b);

Les structures conditionnelles

Une structure conditionnelle permet d'exécuter des instructions en fonction d'une valeur booléenne.

Concrètement, on l'écrirait de la façon suivante en français :

SI (condition) ALORS
  Ma condition est vraie
SINON
  Ma condition est fausse
FIN

En Javascript, comme dans la grande majorité des langages de programmation, une condition est écrite de la façon suivante :

if (condition) {
  console.log("Ma condition est vraie")
}
else {
  console.log("Ma condition est fausse")
}

On va donc naturellement utiliser les opérateurs de comparaison vus précédemment pour comparer deux valeurs et exécuter des instructions différentes en fonction du résultat.

var a = 10,
    b = 20;

if (a > b) {
  console.log("A est supérieur à B.")
}
else {
  console.log("A est inférieur ou égal à B.")
}

Les fonctions

Pour définir une fonction en Javascript, on utilise le mot-clé function suivi du nom de la fonction.

function sayHello() {
  console.log('Hello World!');
}

Pour exécuter une fonction, on l'appelle ensuite par son nom suivi de parenthèses.

sayHello(); // Hello World!

Une fonction peut prendre un ou plusieurs paramètres et retourner un résultat.

function multiplier(a, b) {
  return a * b;
}

var resultat = multiplier(4, 3);

console.log(resultat); // 12

Les boucles

Une boucle permet d'exécuter une série d'opérations tant qu'une condition est vraie. En français, on écrirait une boucle comme ceci :

TANT QUE (condition) ALORS
  Faire ceci
FIN

Il existe plusieurs types de boucles:

Les boucles while
Les boucles for
Les boucles do...while
Les boucles for...in
Les boucles for...of

Dans ce cours nous ne verrons que les deux premières qui sont les plus simples et les plus courantes.

La boucle `while`

L'instruction while prend un seul paramètre qui doit être true ou false. Les instructions à l'intérieur de la boucle sont alors exécutées tant que ce paramètre est équivalent à true. Il faut donc veiller à ce que le paramètre devienne false à un moment donné sans quoi la boucle s'exécutera indéfiniment et fera planter le navigateur.

Exemple 1 : afficher tous les nombres entiers de 1 à 5

var monNombre = 0;

while (monNombre < 5) {
  monNombre++;

  console.log(monNombre);
}

Résultat :

1, 2, 3, 4, 5

L'instruction monNombre++ permet d'incrémenter la variable monNombre de 1.
Elle est équivalente à monNombre = monNombre + 1.

Exemple 2 : le code suivant effectue une fonction carrée sur un nombre jusqu'à atteindre 256, en affichant le résultat dans la console à chaque itération.

var monNombre = 2;

function carre(valeur) {
  return valeur * valeur;
}

while (monNombre < 256) {
  monNombre = carre(monNombre);

  console.log(monNombre);
}

Résultat :

4, 16, 256

La boucle `for`

L'instruction for permet de définir un compteur, une condition et une expression d'incrément. La plupart du temps, elle est utilisée de cette façon :

for (var index = 0; index < 5; index++) {
  console.log(index);
}

La première instruction indique que l'on définit une variable index avec pour valeur initiale zéro.
La seconde instruction indique que la condition pour rester dans la boucle est que la valeur de index soit inférieure à 5.
La dernière instruction indique que index est incrémenté de 1 à la fin chaque itération.

Résultat :

0, 1, 2, 3, 4

La boucle for est souvent utilisée pour manipuler des tableaux. Dans ce cas, la condition pour rester dans la boucle est que notre index soit inférieur à la taille du tableau. On utilisera pour cela la propriété length qui retourne la taille d'un tableau.

var monTableau = [3, 8, 22, 45, 72];

for (var index = 0; index < monTableau.length; index++) {
  console.log(monTableau[index]);
}

Résultat :

3, 8, 22, 45, 72

Exemple : parcourir un tableau et afficher pour chaque valeur si elle est paire ou impaire

var monTableau = [3, 8, 22, 45, 72];

function estPair(nombre) {
  return nombre % 2 === 0;
}

for (var index = 0; index < monTableau.length; index++) {
  if (estPair(monTableau[index])) {
    console.log(monTableau[index] + ' est pair.');
  } else {
    console.log(monTableau[index] + ' est impair.');
  }
}

Résultat :

3 est impair
8 est pair
22 est pair
45 est impair
72 est pair

Exercices

1. Écrire un programme qui calcule une moyenne à partir d'un tableau de notes sur 20.

var notes = [15, 12, 17.5, 10, 18, 16, 15];

// Résultat attendu : 14.785714285714286

2. Écrire une fonction qui vérifie si une personne est majeure à partir d'un objet.

var personnes = [
  {
    nom: "John Doe",
    age: 27
  }, {
    nom: "Jody Garner",
    age: 15
  }, {
    nom: "Antonio Walter",
    age: 17
  }, {
    nom: "Stanley Parry",
    age: 41
  }, {
    nom: "John Lawson",
    age: 18
  }
];

// Résultat attendu : true, false, false, true, true

Introduction à Javascript

Introduction

Premier exemple : Hello World

Les variables

Les Strings

Les nombres

Les booléens

Les tableaux

Les objets

Les opérateurs

Opérateurs mathématiques

Raccourcis

Concaténation

Opérateurs de comparaison

Les structures conditionnelles

Les fonctions

Les boucles

La boucle while

La boucle for

Exercices

La boucle `while`

La boucle `for`