Développement web

Cours 10

• site : https://bruno-simon.com/esin/e1-p2026/
• contact : bruno.simon1@exterieur.groupe-igs.fr

JavaScript

Variables

L'un des composants principaux de tous les languages est la variable

La variable permet d'enregistrer des valeurs (score, nom de l'utilisateur, nombre de vie restantes, est-ce que le produit est déjà dans le panier, etc.)

Elles fonctionnent comme des boîtes, chacun ayant un nom et contenant quelque chose

Dans les exemples suivant, nous allons utiliser les termes foo et bar

Ces termes ne designent rien.
On peut les comparer à truc et bidule

Wiki 1

Wiki 2

Déclarer une variable

Il existe deux méthodes pour déclarer les variables

• Avec var —à l'ancienne
• Avec const et let—plus flexible et plus performant

Ancienne méthode

Pour créer une variable, nous commencons par écrire var suivi d'un = et de la valeur

var foo = 'bar';
                        

Nouvelle méthode

Depuis l'ES6, on utilise les termes const et let

const foo = 'bar';
let toto = 'tata';
                        

• const permet de créer une variable qui ne changera pas (une erreur se produit si on tente de modifier la variable) ce qui permet au navigateur d'optimiser la gestion de la mémoire
• let permet de créer une variable qui peut changer

Nous allons donc toujours utiliser const a moins d'avoir l'intension de changer sa valeur par la suite

Cela optimise la gestion de la mémoire

Il n'est aujourd'hui plus nécessaire d'utiliser var

☝️ Le fait de mettre une valeur dans une variable s'appelle une assignation

Naming convention

Le choix du nom de variable et la façon de l'écrire s'appelle naming convention (convention de nommage)

On parle aussi de nomenclature ou de casse

Si une variable se compose de plusieurs mots (ex: foo et bar) il existe plusieurs façons de séparer ces mots

Les plus connues en JS sont :

Quelques autres naming conventions :

title snake	Lorem_Ipsum_Dolors
screaming snake	LOREM_IPSUM_DOLORS
dash	lorem-ipsum-dolors
train	Lorem-Ipsum-Dolors
space	lorem ipsum dolors
title	Lorem Ipsum Dolors
dot	lorem.ipsum.dolors

Quelques autres naming conventions :

slash	lorem/ipsum/dolors
backslash	lorem\ipsum\dolors
lower	loremipsumdolors
upper	LOREMIPSUMDOLORS
studlycaps	LOremIPsUmDolORs

En JS, la convention veut qu'on utilise plutôt le camelCase

• Choisissez bien le nom de votre variable
• Il doit en dire suffisamment sans être trop long
• Préférez l'anglais
• Évitez les mots clés réservés :
  var, const, let, class, default, if, do, for, function, ...
• Soyez constant

Jusqu'à présent, pour afficher le contenu d'une variable, nous avons utilisé alert(), mais il existe une autre méthode plus pratique appelée console.log()

console.log(fooBar);
                        

console.log() est utilisé pour aider le développeur. Il convient de les supprimer du code une fois le développement terminé.

Pour afficher les résultats de la console de Chrome, il suffit d'aller dans Outils de développement

Puis dans l'onglet console

Il est possible de déclarer plusieurs variable en même temps en séparant les assignations par des ,

const foo = 'foo';
const bar = 'bar';

// Devient
const foo = 'foo', bar = 'bar';

// Ou
const foo = 'foo',
      bar = 'bar';
                        

Point virgule

Jusqu'à présent, nous utilisions ; pour indiquer la fin d'une instruction

Depuis plusieurs années, le ; ne sert plus à rien et le navigateur n'aura aucune difficulté à interpréter le code sans

Certaines personnes et certaines entreprises telle que Google, continuent de l'utiliser afin de palier à des micro bugs que peut provoquer leur absence
Google guidelines

Les types de variables

Jusqu'ici, nous avons stocké une valeur de type string ou chaîne de caractères en français

Il existe plusieurs types de variables

number

const foo = 1337
const bar = 0.5

console.log(foo)
                        

Contrairement à d'autres languages, il n'y a pas de distinction entre float et integer

string

const foo = 'coucou'

console.log(foo)
                        

Il n'y a pas de différence entre ' et "

boolean

const foo = true
const bar = false

console.log(foo)
                        

array

const foo = ['toto', 1337, true]

foo.push('hey')

console.log(foo)
console.log(foo[1])
console.log(foo.length)
                        

object

const foo = {
    lorem: 'ipsum',
    toto: 1337,
    test: true
}

foo.hoy = 'hey'

console.log(foo)
console.log(foo.toto)
console.log(foo['toto'])
                        

Il existe d'autres types de variables plus complexe que nous aborderons plus tard

• function
• null
• undefined
• Date
• DOMElement
• regex
• ...

typeof permet de connaître le type d'une variable

const fooBar = 'lorem ipsum'

console.log(typeof(fooBar)) // "string"
console.log(typeof fooBar)  // "string"
                        

typeof 1337          // "number"
typeof 0.5           // "number"
typeof 'lorem ipsum' // "string"
typeof function(){}  // "function"
typeof true          // "boolean"

typeof {}            // "object"
typeof []            // "object"
typeof null          // "object"
typeof /abcd/        // "object"
typeof document.createElement('div') // 'object'
                        

typeof ne renvoie pas toujours la valeur attendue

Une autre méthode est instanceof

{} instanceof Object       // true
[] instanceof Array        // true
new Date() instanceof Date // true
/abcd/ instanceof RegExp   // true
                        

Pas mal, mais pas très pratique