Design numérique

Javascript / Initier : variables

Nous allons commencer par un gros morceau de la programmation : les variables.

En programmation, une variable est un objet qui associe un nom à une valeur. Créer une variable consiste à mettre en place un lien entre un nom unique et une valeur, qui permet aux programmeurs d'utiliser la variable en appelant son nom, sans forcément savoir quelle est sa valeur. On utilise souvent la boîte comme métaphore : créer une variable reviens à créer une boîte à laquelle on donne un nom, dont il est ensuite possible de changer (ou non) le contenu au cours du programme.

Definition plus complète ici

Variables JS

Il existe différentes manières de déclarer une variable en Javascript, mais nous n’allons aborder que la déclaration générique dite de type var. Les variables déclarée avec var sont dynamiques ce qui veut dire qu’il est possible de changer leur valeur n'importe quand au cours du programme, quelque soit la cadre (scope). Ce sont les plus anciennes, les plus polyvalentes, mais aussi les plus délicates à manipuler.

La déclaration d’une variable se fait ainsi :

var hello = "Hello World";

La console

Maintenant, nous allons introduire un outil du navigateur permettant de tester et débugger son code Javascript, de la même manière que l'inspecteur permet de visualiser et débugger son code html. Il s'agit de la console.

La console est un espace implémenté par le navigateur, dans lequel il est possible d'imprimer afin de les visualiser, des variables utilisées dans le code JS. Cet espace est très utile, car il permet de visualiser le programme de l'intérieur, et non pas seulement ces effets.

Le code pour imprimer une variable est le suivant :

var hello = "Hello World";

console.log(hello);

Les types de variables

En Javascript, il existe différents types de variables qui permettent différents types de manipulation programmatique. Contrairement à d’autres langages, il n’est pas nécessaire de déclarer en amont le type d’élément que contiendra une variable. Commençons par les plus répandus, aussi présents dans d’autres langages de programmation :

Nombres int

En programmation, un élément de type int est un nombre entier. Les éléments de type int sont principalement utilisés pour parcourir les listes.

var typeInt = 1;

console.log(typeInt);

// Output: 1

Nombres float

En programmation, un élément de type float est nombre non-entier. Comme dit précédemment, en Javascript, nous sommes chanceux car il n’est pas nécessaire de déclarer en amont le type de variable (ou de nombre) que l’on va stocker dans une variable : le programme se charge de les reconnaître. 

var typeFloat = 1.1;

console.log(typeFloat);

// Ouputs: 1.1

Le type number

En Javascript, les types int et float sont rassemblés sous le type number, mais chacun permet bel et bien des actions programmatiques différentes. Un opérateur appelé typeof permet d'imprimer le type de variable dans la console.

var typeInt = 1;
var typeFloat = 1.1;

console.log(typeof typeInt);
console.log(typeof typeFloat);

// Output: number
// Output: number

Le type string

En programmation, un élément de type string est une chaîne de caractères, délimitée par des guillemets (simples ou doubles, au choix).

var typeString = "Alan";

console.log(typeString);
console.log(typeof typeString);

// Output: "Alan"
// Output: string

Le type boolean

En programmation, un élément de type boolean est un élément qui peut prendre deux valeurs : true et false. Ces éléments sont utilisés dans les conditions, et permettent d'exécuter différents scénarios selon leur valeur (nous verrons les conditions dans un deuxième temps).

var typeBoolean = true;

console.log(typeBoolean);
console.log(typeof typeBoolean);

// Output: true
// Output: boolean

Le type array

En programmation, un élément de type array est un tableau, c’est-à-dire une liste de plusieurs éléments, dont les clés sont le plus souvent définies par des nombres de type int. En Javascript, un tableau peut contenir tous types d’éléments, et ne peut pas être associatif, c’est-à-dire utiliser d’autres types de variables que int en tant que clés. En programmation, la première entrée d'un tableau porte l'index 0, la deuxième 1 et ainsi de suite.

var typeArray = [1, 1.1, "Alan", true];

console.log(typeArray);
// Ouput: [1, 1.1, "Alan", true]

console.log(typeArray[0]);
// Output: 1

console.log(typeArray[1]);
// Output: 1.1

console.log(typeArray[2]);
// Output: "Alan"

console.log(typeArray[3]);
// Output: true

Le type object

En Javascript, les arrays sont rassemblés dans un type plus large, appellé object. Nous reverrons ce type plus tard, lorsque nous aborderons les objets spécifiques au Javascript.

var typeArray = [1, 1.1, "Alan", true];

console.log(typeof typeArray);
// Output: object

Propriétés, opérations et méthodes

Propriétés

À la manière des éléments HTML, chaque type de variable comporte des données spécifiques appellées proriétés, qui diffèrent selon les types. Par exemple, une variable de type array aura une longueur (length) qui correspondra au nombre de ses entrées. Une chaine de caractère (string) aura également une propriété length qui correspond au nombre de caractères de la chaîne. Un nombre n'aura lui, pas de propriété length.

Pour accéder à la propriété d'une variable, on utilise le point (dot), suivi du nom de la prorpiété. 

var typeArray = [1, 1.1, "Alan", true];

console.log(typeArray.length);
// Output: 3

var typeString = "Alan";

console.log(typeString.length);
// Output: 4

var typeInt = 1;

console.log(typeInt.length);    
// Output: undefined

Opérations

À chaque type de variable est également attaché un ensemble d'opération mathématiques spécifiques, tel que la possibilité de les ajouter, soustraire etc... Selon le type de variable, ces possibilités diffèrent. Par exemple, il est possible de mutltiplier deux nombres, mais pas deux chaines de caractères.

var ears = 2;
var persons = 4;
var totalEars = ears * persons;

console.log(totalEars);
// Output: 8

var prenom = "Jane";
var nom = "Doe";

console.log(nom * prenom);
// Ouput: NaN

S'il n'est pas possible de multiplier deux chaines de caractères, il est possible de les ajouter. Contrairement aux nombres dont la somme sera retournée, l'opérateur + entre deux chaines de caractères permet de créer une nouvelle chaine de caractères mettant bout à bout toutes les chaines de caractères.

var prenom = "Jane";
var nom = "Doe";

console.log(nom + prenom);
// Ouput: "JaneDoe"

Ce qui, à l'aide d'un espace, peut nous permettre de créer une nouvelle variable.

var prenom = "Jane";
var nom = "Doe";
var nomComplet = nom + " " + prenom;

console.log(nomComplet);
// Ouput: "Jane Doe"

Méthodes

Les méthodes sont des fonctions spécifiques attachées à chaque type de variable. Celles-ci permettent de lancer des opérations spécifiques plus ellaborée que les simples opérateurs. Par exemple, dans le cas des string, on peut citer les méthodes toUpperCase() et toLowerCase() qui permettent de changer la case d'une chaine de caractères.

var prenom = "Jane";
var nom = "Doe";
var nomComplet = nom + " " + prenom;

console.log(nomComplet.toLowerCase());
// Ouput: "jane doe"

console.log(nomComplet.toUpperCase());
// Ouput: "JANE DOE"

Ici, les méthodes et propriétés disponibles par type d'objets standards :