JavaScript - Acquérir les fondamentaux (1/2)
Chapitre 3 - Les bases du langage JavaScript - Variables, Tableaux, Conditions et Boucles

Les variables et leurs types

Plan de formation

• Notion de variable
• Déclarer une variable
• Initialiser une variable
• Les contraintes de nommage
• Les opérateurs
• Les types primitifs et l'opérateur typeof

Notion de variable

Une variable est utilisée pour stocker une valeur. Peut importe le langage, il y a 2 étapes :

1. Déclarer la variable
2. Initialiser la variable

Déclarer une variable

Pour déclarer une variable, il faut utiliser l'instruction var

var a; // déclaration

Initialiser une variable

Il existe 2 solutions pour initialiser une variable :

• Déclarer la variable et l'initialiser en 2 étapes :
  

  var a; // déclaration
  a = 1; // initialisation
  

• Déclarer la variable et l'initialiser en même temps :
  

  var a = 1; // déclaration et initialisation

Les contraintes de nommage

Les variables sont case sensitive. C'est à dire :

var a = "minuscule";
var A = "MAJUSCULE"

Il est recommandé d'utiliser l'auto complétion avec la touche Tab pour éviter une erreur de frappe.

Les opérateurs

Les opérateurs arithmétiques qui peuvent être utilisés sont les suivants :

Les types primitifs et l'opérateur typeof

En JavaScript, les variables sont typées. C'est un typage faible car c'est le contenu de la variable qui va automatiquement définir le typage de cette dernière.
Il y a 5 types de variables primitives (qui s'opposent au type objet) sont :

• Number : Entier ou flottant
• String : Chaîne de caractères
• Boolean : True ou False
• Undefined : Quand la variable à utiliser n'existe pas
• Null : Type particulier n'ayant qu'une seule valeur : null

Pour identifier le type d'une variable, il faut utiliser l'opérateur typeof.

Exercice pratique

var a = 1;
console.log("Valeur de a : " + a);
console.log("Type de a : " + typeof a);

Va nous donner ceci dans la console de l'inspecteur ;

En mettant la valeur de la variable a entre double cote, cela va générer une variable de type String.

Si maintenant, la valeur est passée sur null, alors le type changera pour devenir un objet.

var a = null;
console.log("Valeur de a : " + a);
console.log("Type de a : " + typeof a);

Si on met en commentaire la déclaration de la variable a, cela va générer une erreur :
Uncaught ReferenceError: a is not defined

// var a = null;
// console.log("Valeur de a : " + a);
console.log("Type de a : " + typeof a);

En gardant uniquement la ligne avec le typeof, on peut voir que la console renvoie le type undefined.

Les tableaux

Plan de formation

• Notion de tableau
• Déclarer et initialiser un tableau
• Accéder aux éléments d'un tableau
• Les opérations sur les tableaux

Notion de tableau

Un tableau est une variable qui contient une liste de valeurs. Voici une représentation d'un tableau :

Déclarer et initialiser un tableau

Comme pour les variables dites scalaire (variables standards), il faut déclarer et initialiser la variable tableau. Cependant ici, il faut préciser que c'est un tableau en utilisant les [ ]

Pour déclarer un tableau vide :

var a = []

Pour déclarer un tableau avec des valeurs :

var a = [1,2,3]

Accéder aux éléments d'un tableau

Pour accéder aux éléments d'un tableau, il faut utiliser l'index de la valeur à utiliser.
L'index est un nombre entier avec pour valeur initiale 0.

Sur la base de l'exemple précédent, on peut déduire la structure du tableau et la façon d'accéder aux éléments :

var a = [1, 2, 3]
console.log(a[0])
console.log(a[1])
console.log(a[2])

Les opérations sur les tableaux

Ajouter ou modifier une valeur d'un tableau

Pour modifier une valeur, il faut appeler la variable avec l'index et modifier sa valeur (avec le signe =).
Pour modifier la valeur située à l'index 2 :

a[2] = "la valeur 3";

Ajouter une valeur à l'index 3 :

a[3] = "la valeur 4";

Ajouter une valeur à l'index 6 :

a[6] = "la valeur 7";

Ce qui nous donne le résultat suivant :

var a = [1, 2, 3]
console.log(a[0])
console.log(a[1])
console.log(a[2])

a[2] = "la valeur 3";
a[3] = "la valeur 4";
a[6] = "la valeur 7";
console.log(a)
			

Dans ce cas ci, les index 4 et 5 sont laissés vides. Lors de la sortie console du tableau, l'inspecteur va afficher empty x 2 où 2 = à x fois le nombre d'index vide.

Effacer une valeur d'un tableau

var a = [1, 2, 3];
delete a[1];

console.log(a);

Contenu d'un tableau

Un tableau peut contenir différents types de données :

var a = [1, "deux", false, null, undefined]

Un tableau peut également contenir un autre tableau :

var a = [1, "deux", false, null, [1, 2, 3]]

Pour accéder au tableau contenu dans un autre tableau, il faut procéder comme suit 

console.log(a[4][1])

Exercice pratique

//définition + initialisation tableau a + modification
var a = [1, 2, 3];

a[2] = "la valeur 2";
a[6] = "la valeur 6";

//déf + init tableau b
var b = [1, 2, 3];
//déf + init tableau c
var c = [1, 2, 3];
//déf + init tableau d
var d = [a, b, c];

console.log(a[0])
console.log(a)
console.log(d)

// pour accéder à l'index 1 du tableau b:
console.log(d[1][1])

Les conditions

Plan de formation

• Notion de bloc de code
• Structure d'une condition if
• Structure d'une condition if - else
• Structure d'une condition if - else if - else
• La notation ternaire
• Le Switch

Notion de bloc de code

Un bloc de code est un ensemble d'instruction encadré par des accolades :

{
	var a = 1;
	var b = 2;
}

Tout le code du bloc est exécuté au moment où le bloc est sollicité.

Notion de comparaison

Une notion de comparaison renvoie toujours une valeur booléenne.
Elle est constituée :

• d'un opérateur de comparaison.
• d'un opérateur logique.
• de n'importe quelle valeur pouvant être convertie en booléen.

Les opérateurs

Il existe deux type d'opérateurs :

• Logiques
  • ! (NOT) : Pour tester l'inégalité.
  • && (AND) :
    Pour tester plusieurs égalité.
  • || (OR) :
    Pour tester une ou l'autre égalité.
• Comparaison
  • == (EQUAL) :
    Test l'égalité
  • === (STRICT EQUALITY) :
    Test l'égalité de la valeur ET l'égalité du type.
  • < (LESS TAN) : Test si le nombre est plus petit.
  • > (GREATER THAN) : Test si le nombre est plus grand.

Structure d'une condition if

var a = 2;
var result = '';
if (a>1) {
	result = "a est supérieur à 1"
}

Exercice pratique condition if

var result = "";
var a = 1;
if (a == 1) {
	result = "a==1";
}

console.log(result);

Structure d'une condition if - else

var a = 1;
var result = "";
if (a > 2) {
	result = "a est supérieur à 2";
} 
else {
	result = "a n'est pas supérieur à 2"
}

console.log(result);

Structure d'une condition if - else if - else

var a = 1;
var result = "";
if (a == 1) {
	result = "a == 1";
}
else if (a == 2) {
	result = "a == 2";
}

else if (a == 3) {
	result = "a == 3";
}

else {
	result = "a est différent de 1, 2, 3";
}

console.log(result);

Tester l'existence d'une variable

var a = 1;

if (typeof a == "undefined") {
	console.error("a : " + typeof a);
}
else {
	console.log("a est défini");
}

// var a = 1;

if (typeof a == "undefined") {
	console.error("a : " + typeof a);
}
else {
	console.log("a est défini");
}

La notation ternaire

La notation ternaire permet de simplifier un code. Voici un exemple.

var a = 1;
var result = "";

if (a > 2) {
	result = "a est supérieur à 2";
}
else {
	result = "a n'est pas supérieur à 2"
}

Ce code peut être remplacé par cette notation ternaire :

var a = 1;
var result = a > 2 ? "a est supérieur à 2" : "a n'est pas supérieur à 2";

console.log(result);

La notation ternaire commence par un test suivi d'un ?. Ce qui est à gauche du ? est le test et ce qui est à droite seront les conditions. La première série est la condition True et après le : nous aurons la condition false.

Le Switch

La condition Switch est une alternative à la condition if - else if - else. Elle se prononcerait :
Suivant la valeur de a, le cas 1 est...
Si le test est juste, l'opérateur break permet de sortir de la condition.

var a = 1;
var result = "";
switch (a) {
	case 1:
		result = "a = 1";
		break;
	case 2:
		result = "a = 2"
		break;
	default:
		result = "a est différent de 1 et 2"
		break;
}

La fonction Switch fonctionne également avec des chaînes de caractères.

var a = 'b';
var result = "";
switch (a) {
	case 'a':
		result = "a = 'a'";
		break;
	case 'b':
		result = "a = 'b'"
		break;
	default:
		result = "a est différent de a et b"
		break;
}

Les boucles

Plan de formation

• La boucle while
• La boucle do...while
• La boucle for
• La boucle for...in
• La boucle for...of

La boucle while

La boucle while permet d'itérer autant de fois que nécessaire une partie de code. Le code est directement testé.

var a = 1;

		while (a < 10) {
			console.log("valeur de a : " + a);
			a++;
		}

La boucle do...while

Contrairement à la boucle while, la boucle do...while va exécuter le code et ensuite tester la condition.

var a = 0;

do {
	a++;
	console.log("valeur de a : " + a);
}
while (a < 10);

La boucle for

La boucle for est utilisé quand on connaît le nombre d'itération à faire. Cela est pratique pour parcourir un tableau par exemple.
La boucle for est composée de 3 parties :

• L'initialisation de la variable.
• Le test.
• Le bloc de code.

Pour connaître la longueur d'un tableau, il est possible d'utiliser la fonction nom-du-tableau.length. Cela va renvoyer le nombre de ligne dans le tableau.

var arr = ["un", "deux", "trois"]

for (var indice = 0; indice <= arr.length - 1; indice++) {
	console.log(indice);
}

Sortie console : 
0
1
2

De cette manière, il est possible d'afficher les valeurs du tableau.

var arr = ["un", "deux", "trois"]

for (var indice = 0; indice <= arr.length - 1; indice++) {
	console.log("indice = " + indice + " / " + "valeur = " + arr[indice]);
}

Sortie console :
indice = 0 / valeur = un
indice = 1 / valeur = deux
indice = 2 / valeur = trois

La boucle for...in

La boucle for...in permet de boucler sur un tableau sans devoir s'inquiéter de sa longueur.

var arr = ["un", "deux", "trois"]

for (var ind in arr) {
	console.log(ind + " " + arr[ind]);
}

Sortie console :
0 un
1 deux
2 trois

La boucle for...of

La boucle for...of est une nouveauté ECMAScript6 !
Elle va permettre d'itérer sur les valeurs dun tableau au lieu de son index.

var arr = ["un", "deux", "trois"]

for (var value of arr) {
	console.log(value);
}

Sortie console :
un
deux
trois

Les fonctions

Plan de formation

• Notion de fonction
• Appeler des fonctions et passer des paramètres
• Quelques fonctions du langage
• Portée des variables
• Considérations importantes sur les fonctions

Notion de fonction

Les fonctions sont des blocs de code réutilisables et qui renvoie toujours une valeur à l'aide de return !
Il faut commencer par définir un nom pour la fonction puis, entre ( et ) les paramètres souhaités.

function somme (a,b) {
	var c = a + b;
	return c;
}

Appeler des fonctions et passer des paramètres

function somme(a, b) {
	var c = a + b;
	return c;
}

var resultat = somme(2, 3);
console.log(resultat);

Une particularité de JavaScript est que tous les paramètres sont disponibles dans une variable spéciale : arguments

Quelques fonctions du langage

• parsInt() :
  Renvoie un entier à partir d'une chaîne de caractères.
  Utile pour la saisie utilisateur.
• parsFloat() :
  Renvoie un flottant à partir d'une chaîne de caractères.
  Utile pour la saisie utilisateur.
• isNaN() :
  Teste si le paramètre n'est pas un nombre.
  Renvoie un booléen (comme toutes les fonctions qui commencent par "is").
• isFinite() :
  Teste si le paramètre n'est pas Infinity.
  Renvoie un booléen (comme toutes les fonctions qui commencent par "is").

function somme(a, b) {
	console.log(arguments)
	var c = "";

	if (!isNaN(a) && !isNaN(b)) {
		c = a + b;
	}
	else {
		console.log("Vous devez saisir des nombres.")
	}

	return c;
}

var resultat = somme(2, 3);
console.log(resultat);

Sortie console :
5

function somme(a, b) {
	console.log(arguments)
	var c = "";

	if (!isNaN(a) && !isNaN(b)) {
		c = a + b;
	}
	else {
		console.log("Vous devez saisir des nombres.")
	}

	return c;
}

var resultat = somme("deux", "trois");
console.log(resultat);

Sortie console :
Vous devez saisir des nombres.

Portée des variables

La portée d'une variable est définie par une fonction. Une variable doit être déclarée avec var. Si le mot clé var est utilisée, on obtient une variable local, sans le mot clé var, on obtient une variable globale.

Dans ce cas, le mot clé var a été utilisé. C'est pourquoi, la variable c est détectée comme non définie :

function somme(a, b) {
	console.log(arguments)
	var c = "";

	if (!isNaN(a) && !isNaN(b)) {
		c = a + b;
	}
	else {
		console.log("Vous devez saisir des nombres.")
	}

	return c;
}

var resultat = somme(2, 3);
console.log(resultat);
console.log(c)

Alors que si le mot clé var est retiré, on obtient une variable globale.

function somme(a, b) {
	console.log(arguments)
	c = "";

	if (!isNaN(a) && !isNaN(b)) {
		c = a + b;
	}
	else {
		console.log("Vous devez saisir des nombres.")
	}

	return c;
}

var resultat = somme(2, 3);
console.log(resultat);
console.log(c)

En utilisant "use strict"; avant le nom de la fonction, cela empêchera une variable d'être utilisée en dehors d'une fonction.

"use strict";
function somme(a, b) {
	console.log(arguments)
	var c = "";

	if (!isNaN(a) && !isNaN(b)) {
		c = a + b;
	}
	else {
		console.log("Vous devez saisir des nombres.")
	}

	return c;
}

var resultat = somme(2, 3);
console.log(resultat);
console.log(c)

Considérations importantes sur les fonctions

Les fonctions sont des données, elles sont donc typées !

function une_fonction() {
	console.log("une_fonction");
}
console.log(typeof une_fonction);

On peut en déduire cette notation :

var une_fonction = function() {
	console.log("une_fonction");
};
console.log(typeof une_fonction)

Exercice pratique

function somme(a, b) {
	console.log(arguments)
	var c = "";

	if (!isNaN(a) && !isNaN(b)) {
		c = a + b;
	}
	else {
		console.log("Vous devez saisir des nombres.")
	}
	return c;
}

var resultat = somme(2, 3);
console.log(resultat);
console.log(typeof somme)
	
Sortie console :
5
function

Les fonctions ont 3 caractéristiques :

• Elles contiennent du code.
• Elles sont exécutable.
• Elles se comportent comme des variables.

Gérer les erreurs

Plan de formation

• Les exceptions
• La structure try...catch
• La structure try...finally
• La structure try...catch...finally
• Lancer une exception avec throw

Les exceptions

Définition d'une exception

• Les exceptions sont la représentation d'un comportement exceptionnel.
• Elle interrompent le flot d'exécution normal de votre application.
• Elles évitent la scrutation d'une erreur.

La console

• L'API console fournit par les navigateurs offre plus de possibilités que le simple console.log("");.
  • console.info() :
    Affiche un message d'information

    
    

  • console.error() :
    Affiche un message d'erreur

    
    

  • console.warn() :
    Affiche un message de warning

    
    

La structure try...catch

Provoquons une erreur, ici la variable ma_variable n'existe pas.

console.log(ma_variable);

Il est possible d'intercepter cette erreur avec try...catch.

try {
	console.log(ma_variable);
}
catch (e) {
	console.error("Il y a une erreur");
}

Le bloc try exécute du code susceptible de provoquer une erreur.
Le bloc catch intercepte cette erreur si elle a lieu.

Sans ce try...catch, le code arrête de s'exécuter. Dans l'exemple ci-dessous, console.log("test") ne s'afficherait pas.

try {
	console.log(a);
}
catch (e) {
	console.error("Il y a une erreur");
}

La structure try...finally

Le bloc finally est exécuté quelque soit le résultat de l'exécution du bloc try (erreur ou pas).

try {
	console.log(ma_variable);
}
finally {
	console.info("après le bloc try");
}
console.log("test")

Cela est utile pour initialiser la valeur d'une variable pour la suite de l'exécution.

La structure try...catch...finally

C'est la forme la plus complète pour gérer des exceptions. Cela permet d'avoir une variable déclarée et initialisée.

try {
	console.log(ma_variable);
}
catch (e) {
	console.error("Il y a une erreur");
}
finally {
	console.info("après le bloc try");
}

Lancer une exception avec throw

Il est possible de lancer ses propres exceptions.

function division(a, b) {
	if (b === 0) {
		throw "Erreur : Division par zéro";
	}
	return a / b;
}

try {
	var c = division(2, 0);
	console.log(c);
}
catch (erreur) {
	console.log(erreur);
}