JavaScript / Vue.js

Benjamin Chazelle

iut@chazelle.pro

Avant-propos

Module

36 heures (4h + 4x8h)

Jusqu'à mi-janvier

Évaluation par un projet

(promis j'essaye de ne pas vous surcharger)

iut@chazelle.pro

Contenu

Tour d'horizon de JavaScript

Introduction à Vue.js

Concepts et syntaxes

Outils

Méthodologie

Bonnes pratiques

Pour aller plus loin

Qui suis-je ?

Benjamin Chazelle, 24 ans

Passionné d'informatique 💻

de musique 🎹 et de cuisine 🍪

IUT Bourg, DUT Info 2016

INSA Lyon, IF 2019

www.chazelle.pro

Qui suis-je ?

Ingénieur en développement

spécialisé front-end

Chez Ubitransport

Éditeur de logiciel pour le monde du transport de voyageur

www.ubitransport.com

welcometothejungle.com/fr/companies/ubitransport

Kahoot time !

www.kahoot.it

902 0522

Qui êtes-vous ?

JavaScript

Tour d'horizon

Introduction

Langage pour le web (et +), interprété, orienté objet,

dynamique, typage faible,

riche en API

Standard et écosystème en évolution

JavaScript != Java

Historique

1995 - Créer par Brenden Eich chez Netscape/Mozilla

1997 - Standardiser comme ECMAScript (ES1)

2015 - Version majeur ES6 (ES2015)

Depuis 2015, une nouvelle version chaque année

Get started

Légende

ES6

OLD

Vue

Apparu avec ECMAScript 6

Usage déprécié

Fréquent dans l'usage de Vue.js

Intégration de JS

// index.html
 
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Apprenons JS</title>
  <script src="script.js"></script>
</head>
<body>

</body>
</html>

// script.js
 
window.addEventListener("load", () => {
    let body = document.body;
    body.textContent = "Hello world";
});

OLD

Les commentaires

// Commentaire monoligne

/*
Commentaire
multi
ligne
*/

Les variables

Déclaration

let maVariable;

Déclaration

let maVariable;

maVariable; // undefined

Déclaration

let maVariable;

maVariable; // ?

Initialisation

let maVariable;

maVariable = "Hello world";

Initialisation

let maVariable;

maVariable = "Hello world";

maVariable // "Hello world"

Déclaration + Initialisation

let maVariable = "Hello world";

Déclaration unique

let maVariable = "Hello world";

let maVariable = "Bonjour le monde";
// Uncaught SyntaxError: redeclaration of let maVariable

Nommage

Un nom de variable correct peut contenir :
- lettres minuscules (a-z)

   - lettres majuscules (A-Z)
   - chiffres (0-9)
   - caractères dollar ($)
   - caractères underscore (_)

Un nom de variable ne commence jamais par un chiffre.

good

GOOD

$Good

_good_

gôöd

b-a-d

-Bad-

84D

Portée d'une variable

if(true) {
  let x = 42;
  x; // 42
}

x; // undefined

Portée d'une variable

if(true) {
  let x = 42;
  x; // 42
}

x; // undefined

ES6

OLD

if(true) {
  var x = 42;
  x; // 42
}

x; // 42

Portée d'une variable

function foo() {
  
  let bar = 9;
  
  if(bar > 0) {
    
    let bar = 42;
    
  }
  
  bar; // ?
  
}

OLD

if(true) {
  var x = 42;
  x; // 42
}

x; // 42

Portée d'une variable

if(true) {
  let x = 42;
  x; // 42
}

x; // undefined

ES6

OLD

function f() {
  if(true) {
    var x = 42;
    x; // 42
  }

  x; // 42
}
x; // undefined

Les constantes

let x = 42; // 42

x = 1337;
// 1337

ES6

const x = 42; // 42

x = 1337;
// Uncaught TypeError: invalid assignment to const 'x'

ES6

Les types

Types primitifs et objets

Types objets (Object)
Object
Array
Set
Map
RegExp
Function
...

Types primitifs
string
number
boolean
null
undefined
symbol
BigInt

ES6

ES11

"hello"

true

null

undefined

Symbol(42)

BigInt('1337')

[42, "Hello", true]

{ foo: "bar" }

function f() {}

Typage faible

let x = 1337;

x; // 1337

typeof x; // "number"

Typage faible

let x = 1337;

x; // 1337

typeof x; // "number"

x = new Date();

typeof x; // "object"

Typage faible

x = new Date();

typeof x; // "object"

x instanceof Date; // true

x instanceof RegExp; // false

Les opérateurs

Opérateurs arithmétiques

let x = (2 + 13 - 7) * 2 / 4 % 5; // 4

Opérateurs d'affectation

let x = 2; // 2
x += 13; // 15
x -= 7; // 8
x *= 2; // 16
x /= 4; // 4
x %= 5; // 4

Opérateurs d'incrémentation

let x = 9;

x++; // 9;

x; // 10

let x = 9;

++x; // 10;

x; // 10

Opérateurs d'incrémentation

let x = 9;

x++; // 9;

x; // 10

let x = 56;

x--; // ?

x; // ?

Opérateurs de décrémentation

let x = 9;

x--; // 9;

x; // 8

let x = 9;

--x; // 8;

x; // 8

Opérateurs logiques

let x = true && false; // false

let y = true || false; // true

let z = true || false && false; // true
//    = true || (false && false) 

let notZ = !z; // false

Opérateurs d'égalité

23 == 23; // true

23 == "23"; // true

0 == "0"; // true;

0 == false; // true;

0 == ""; // true;

23 === 23; // true

23 === "23"; // false

0 === "0"; // false;

0 === false; // false;

0 === ""; // false;

OLD

Opérateurs de non-égalité

23 != 23; // false

23 != "23"; // false

0 != "0"; // false;

0 != false; // false;

0 != ""; // false;

23 !== 23; // false

23 !== "23"; // true

0 !== "0"; // true;

0 !== false; // true;

0 !== ""; // true;

OLD

Opérateurs d'inégalité

let x = 42;

x < 32; // false

x <= 42; // true

x > 6; // true

17 >= x; // false

Les structures condtionelles

if

const couleur = "rose";

if(couleur === "rouge") {
  peindre();
}

if

const couleur = "rose";

if(couleur === "rouge") {
  peindre();
}
else {
  console.log("Couleur indisponible");
}

if

const couleur = "rose";

if(couleur === "rouge") {
  peindre();
}
else if(couleur === "rose") {
  console.log("Rouge, rose, sur un malentendu vous savez...");
}
else {
  console.log("Couleur indisponible");
}

if

const couleur = "rose";

if(couleur === "rouge") {
  peindre();
}
else if(couleur === "rose") {
  console.log("Rouge, rose, sur un malentendu vous savez...");
}
else if(couleur === "transparent") {
  pasPeindre();
}
else {
  console.log("Couleur indisponible");
}

switch

const couleur = "rose";

switch(couleur) {
  case "rouge":
    peindre();
    break;
  default:
    console.log("Couleur indisponible");
}

switch

const couleur = "rose";

switch(couleur) {
  case "rouge":
    peindre();
    break;
  case "rose":
    console.log("Rouge, rose, sur un malentendu vous savez...");
    break;
  default:
    console.log("Couleur indisponible");
}

while

let i = 0;

while(i < 5) {
  coupDePinceaux();
  i++;
}

for

for(let i = 0; i < 5; i++) {
  coupDePinceaux();
}

Kahoot time ! #2

Number

Initialisation d'un nombre

let a = 42;

let b = 3.;

let c = 3.14;

let d = -20;

let e = 10e5;

let f = 0x20; // 32

let g = Infinity;

let h = -Infinity;

let i = NaN;
// = Not a Number

let j = +0;

let h = -0;

Division par 0

42 / +0; // Infinity

42 / -0; // -Infinity

Float precision

0.1 + 0.2; // 0.30000000000000004

IEEE 754

Transtypage d'un nombre

// De Number to String

const x = 42;

// Lisible
String(x); // "42"


// Performant
x + ""; // "42"

// De String à Number

const x = "42";

// Lisible
parseInt(x, 10); // 42
parseFloat(x); // 42

// Performant
+x; // 42

Test d'un nombre

isFinite(42); // true
isFinite(Infinity); // false
isFinite(-Infinity); // false
isFinite(NaN); // false
isFinite("42"); // false

isNaN(42); // false
isNaN(Infinity); // false
isNaN(-Infinity); // false
isNaN(NaN); // true
isNaN("42"); // false

Math

Math.round(100.7); // 101

Math.ceil(12.3); // 13

Math.floor(12.7); // 12

Math.random(); // 0

Math.PI; // 3.141592653589793

Math.cos(0); // 1

Math.min(2, 6); // 2

Math.max(2, 6); // 6

String

Initialisation d'un String

const x = "foo";

const y = 'bar';

const z = `qux`;

ES6

Initialisation d'un String

const x = "I'm your \"father\"";

const y = 'I\'m your "father"';

const z = `I'm your "father"`;

ES6

Accès à un String

const x = "foo";

x[0]; // "f"
x[1]; // "o"
x[2]; // "o"

Taille d'un String

const x = "foo";

x.length; // 3

Méta-caractères

const x = "Saut de ligne\n";

const y = "Retour chariot\r";

const z = "Tabulation\t";

Concaténation d'un String

const x = "Veni";
const y = "vidi";
const z = "vici";

// Performant
x + " " + y + " " + z; // "Veni vidi vici"

// Lisible
`${x} ${y} ${z}`; // "Veni vidi vici"

ES6

Concaténation d'un String

true + " " + false + " " + null + " " + undefined + " " + NaN + " " + 0;
// "true false null undefined NaN 0"

Méthodes de String

const x = "  JavaScript\n";

x.substring(4, 9); // "vaScr";

x.toUpperCase(); // "  JAVASCRIPT\n"

x.toLowerCase(); // "  javascript\n"

x.replace("a", "@"); // "  J@vaScript\n";

x.indexOf("Java"); // 2
x.indexOf("Vue"); // -1


x.includes("Java"); // true

x.trim(); // "JavaScript";

ES6

RegExp

Initialisation d'une RegExp

const x = /^\d{4} \d{4} \d{4} \d{4}$/g; // Compact

const y = new RegExp("^\d{4} \d{4} \d{4} \d{4}$", "g"); // Performant

Tester une RegExp

const x = "I love JavaScript, Vue.js, Vuex and Vue-router";

x.match(/[A-Z][^, ]+/g); // ["JavaScript", "Vue.js", "Vuex", "Vue-router"]

x.match(/\d/g); // null

Kahoot time ! #3

Array

Initialisation d'un Array

let x = [1, 2, 3];

let y = ["Hello", true, 42, {foo: "bar"}];

let z = [[1,2,3], [4,5,6]];

Lecture dans un Array

let x = [1, 2, 3];

x[0]; // 1

let y = ["Hello", true, 42, {foo: "bar"}];

x[3]; // {foo: "bar"}

let z = [[1,2,3], [4,5,6]];

x[1]; // [4,5,6]
x[1][2]; // 6

Écriture dans un Array

let x = [1, 2, 3];

x[0] = 42;

x; // [42, 2, 3]

Taille d'un Array

let x = [1, 2, 3];

x.length; // 3

Itération d'un Array

let digits = [1, 2, 3];

for(let i = 0; i < digits.length; i++) {
  // digits[i];
}

for(let digit of digits) {
  // digit;
}

// Performance
digits.forEach(digit => {
  // digit;
});

ES6

Manipulation d'un Array

let x = [12, 3, 1, 150];

x.push(17); // Ajoute 17 en fin de tableau
x; // [12, 3, 1, 150, 17]

x.pop(); // 17 - Supprime et retourne le dernier élement
x; // [12, 3, 1, 150]

x.unshift(42); // Ajoute 17 en début de tableau
x; // [42, 12, 3, 1, 150]

x.shift(); // 42 - Supprime et retourne le premier élement
x; // [12, 3, 1, 150]

x.splice(1, 2); // [12, 150] - Supprime 2 éléments à la position 1

Transformation d'un Array

let x = [12, 3, 1, 150];

x.map(element => element * 2); // [24, 6, 2, 300]

x.reduce((acc, element) => acc + element) // 166

x.sort();
x; // [1, 12, 150, 3]

x.sort((a, b) => a - b);
x; // [1, 3, 12, 150]

Recherche dans un Array

let x = [12, 3, 1, 150];

x.indexOf(3); // 1 - Trouve l'index d'un élément

Recherche dans un Array

let x = [12, 3, 1, 150];

x.includes(3); // true - Indique la présence d'un élément

x.find(element => element === 3); // 3 - Trouve un élément
x.find(element => element === 0); // undefined

x.findIndex(element => element === 3); // 1 - Trouve l'index d'un élément
x.findIndex(element => element === 0); // undefined

x.filter(element => element < 10); // [3, 1] - Filtre les éléments

ES6

Affectation par décomposition

const [x, y] = [1, "foo"];

x; // 1
y; // "foo"

ES6

Opérateur de reste et Array

const [x, y, ...z] = [1, "foo", true, {}, 23];

x; // 1
y; // "foo"
z; // [true, {}, 23]

ES6

Opérateur de reste et Array

const [x, y, ...z] = [1, "foo", true, {}, 23];

x; // 1
y; // "foo"
z; // [true, {}, 23]

const reconstruit = [x, y, ...z]; 
// [1, "foo", true, {}, 23]

ES6

Object

Initialisation d'un objet

let x = {};

let y = new Object();

Initialisation d'un objet

let x = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  age: 24,
  engineer: true,
  company: "Ubitransport"
};

Initialisation d'un objet

let x = {
  firstname: "Benjamin",
  "lastname": "Chazelle",
  age: 24,
  'engineer': true,
  company: "Ubitransport"
};

Propriétés d'un objet

let x = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  age: 24,
  engineer: true,
  company: "Ubitransport"
};

x.age; // 24

x['company']; // "Ubitransport"

Propriétés d'un objet

let infos = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  company: {
    name: "Ubitransport",
    city: "Mâcon",
    creation: 2012
  }
};

Propriétés d'un objet

let x = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  age: 24,
  engineer: true,
  company: "Ubitransport"
};

x.age = 20;
x['company'] = "IUT Lyon 1";

x;
// {
//   firstname: "Benjamin",
//   lastname: "Chazelle",
//   age: 20,
//   engineer: true,
//   company: "IUT Lyon 1"
// }

Chaînage de propriétés

let x = {
  firstname: "Benjamin",
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

x.company.name; // "Ubitransport"

Chaînage de propriétés

let x = {
  firstname: "Benjamin",
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

x.home; // undefined

x.home.address; // Uncaught TypeError: x.home is undefined

Chaînage optionnel

let x = {
  firstname: "Benjamin",
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

x.home; // undefined

x.home.address; // Uncaught TypeError: x.home is undefined


x?.home; // undefined

x?.home?.address; // undefined

ES6

Opérateur in

let x = {
  firstname: "Benjamin",
  company: "Ubitransport"
};

"firstname" in x; // true

"phone" in x; // false

Opérateur delete

let x = {
  firstname: "Benjamin",
  company: "Ubitransport"
};

delete x.firstname;

x; // { company: "Ubitransport" }

Lister les propriétés

let x = {
  firstname: "Benjamin",  
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

Object.keys(x); // ["firstname", "company"]

Object.keys(x.company); // ["name", "address"]

Itérer sur les propriétés

let x = {
  firstname: "Benjamin",  
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

// Historique
for(let property in x) {
    // x[property];
}

// Performance
Object.keys(x).forEach(property => {
    // x[property];
})

ES6

Affectation par composition

const firstname = "Benjamin";
const lastname = "Chazelle";

let x = { 
  firstname, 
  lastname 
};

x;
// {
//   firstname: "Benjamin",
//   lastname: "Chazelle"
// }

Vue

ES6

Affectation par composition

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  contact
};

x;
// {
//   firstname: "Benjamin",
//   contact: {
//     phone: "06 51 23 51 39",
//     email: "benjamin@chazelle.pro"
//    }
// }

Opérateur de reste et Objet

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  ...contact
};

x;
// {
//   firstname: "Benjamin",
//   phone: "06 51 23 51 39",
//   email: "benjamin@chazelle.pro"
// }

Vue

ES6

Affectation par composition

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  contact
};

x;
// {
//   firstname: "Benjamin",
//   contact = {
//     phone: "06 51 23 51 39",
//     email: "benjamin@chazelle.pro"
//    }
// }

Affectation par composition

const width = 67;
const height = 23;
const dimensions 
= { width, height }
const colour = "red";
const texture = "vinyle";

const data = {
  colour,
  texture: "iron",
  ...dimensions
}


data; // ?

// Triangle rouge
{
  colour: "red",
  texture: "vinyle",
  dimensions: {
  	width: 67,
  	height: 23
  }
}

// Rond jaune
{
  colour: undefined,
  texture: "iron",
  width: 67,
  height: 23
}

// Losange bleu
{
  colour: "red",
  texture: "iron",
  width: 67,
  height: 23
}

// Carré vert
{
  colour: "red",
  texture: "iron",
  dimensions: {
  	width: 67,
  	height: 23
  }
}

Affectation par composition

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  contact
};

x;
// {
//   firstname: "Benjamin",
//   contact = {
//     phone: "06 51 23 51 39",
//     email: "benjamin@chazelle.pro"
//    }
// }

Kahoot time ! #4

Set et Map

Set

let x = new Set();

x.add(42); // { 42 }
x.add("foo"); // { 42, "foo" }

x.has("foo"); // true
x.has(1337); // false

x.delete("foo");

x.size; // 1

for (let item of x) {
  // items; 
}

ES6

Map

let x = new Map();

x.set(42, "quarante-deux'");
x.set("foo", "f o o");

x.size; // 2

x.get(42); // "quarante-deux";
x.get("foo") // "f o o"

x.delete("foo");

x.forEach((value, key) => {
  // value;, key;
});

ES6

Date

Initialisation d'une Date

let a = new Date() // Maintenant

let b = new Date(1537621200000) // Milisecondes depuis l'epoch Unix

let c = new Date('2018-09-22T15:00:00+02:00') // Format ISO 8601

let d = new Date(2018, 8, 22) // Le mois est 0-indexé

ISO 8601

Formatter d'une Date

let x = new Date('2018-09-22T15:00:00+02:00')

x.getTime(); // 1537621200000

x.toLocaleDateString(); // "2018-9-22"

x.toLocaleTimeString(); // "15:00:00"

x.toISOString(); // "2018-09-22T13:00:00.000Z"

ISO 8601

Manipuler une Date

let x = new Date('2018-09-22T15:00:00+02:00');

x.getDate(); // 22

x.setDate(30); // Date { 2018-09-30T13:00:00.000Z }


// Je vous épargne tout les getters/setters

Maintenant

let now = new Date().getTime();

let now = Date.now();

ES6

JSON

JavaScript Object Notation

JSON est une syntaxe pour sérialiser des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs null.

Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.

Extrait de la Mozilla Developer Network

JSON invalide

{

firstname: "Benjamin",

'lastname': "Chazelle",

"age": 024,

"company": {

`hiring`: true,

"nextWebTalent": undefined

"confinedUntil": null,

"courses": ['JavaScript', "Vue.js"],

}

JSON invalide

{

firstname: "Benjamin",

'lastname': 'Chazelle',

"age": 024,

"company": {

`hiring`: true,

"nextWebTalent": undefined

"confinedUntil": null,

"courses": ['JavaScript', "Vue.js"],

}

JSON valide

{

"firstname": "Benjamin",

"lastname": "Chazelle",

"age": 24,

"company": {

"hiring": true

"confinedUntil": null,

"courses": ["JavaScript", "Vue.js"]

}

Encoder et décoder en JSON

let decoded = { firstname: 'Benjamin', age: 24, company: "Ubitransport" };

JSON.stringify(decoded);
// '{"firstname":"Benjamin","age":24,"company":"Ubitransport"}'


let encoded = '{"firstname":"Benjamin","age":24,"company":"Ubitransport"}';

JSON.parse(encoded);
// {
//    firstname: 'Benjamin',
//    age: 24, 
//    company: 'Ubitransport'
// }

Les fonctions

Déclaration d'une fonction

function maFonction () {
  
}

Déclaration d'une fonction

function maFonction () {
  
}

maFonction(); // undefined

Déclaration d'une fonction

function maFonction () {
  return 42;
}

maFonction(); // 42

Déclaration d'une fonction

function addition (a, b) {
  return a + b;
}

addition(10, 7); // 17

Déclaration d'une fonction

function addition (a, b, c = 0) {
  return a + b + c;
}

addition(10, 7); // 17

addition(10, 7, 100); // 117

Fonction anonyme

const addition = function (a, b, c = 0) {
  return a + b + c;
}

addition(10, 7); // 17

addition(10, 7, 100); // 117

Fonction fléchée

const addition = (a, b, c = 0) => {
  return a + b + c;
}

addition(10, 7); // 17

addition(10, 7, 100); // 117

ES6

Fonction fléchée

const addition = (a, b, c = 0) => a + b + c;

addition(10, 7); // 17

addition(10, 7, 100); // 117

ES6

Fonction fléchée

const majuscule = str => str.toUpperCase();

majuscule("hello world"); // "HELLO WORLD"

ES6

Opérateur de reste et Function

const casting = (a, b, ...plusEncore) => {
  let liste = `${a} et ${b}`;
  if(plusEncore.length > 0) {
    liste += ` (et ${plusEncore.join(", ")})`;
  }
  return liste;
};

casting("Alice", "Bob");
// "Alice et Bob"

casting("Alice", "Bob", "Charlie", "Dan");
// "Alice et Bob (et Charlie, Dan)"

ES6

Passage par copie / référence

function exclamer(str) {
  str += " !";
  return str;
}

// Type primitif
let x = "Hello world";


exclamer(x); // "Hello world !"
x; // "Hello world"

x = exclamer(x);
x; // "Hello world !"

!!!

function exclamer(obj) {
  obj.y += " !";
}


// Type objet
let x = {};
x.y = "Hello world";

exclamer(x);
x.y; // "Hello world !"

Les fermetures

function () {
  const phrase = "Houra";
  const crier = function () {
    console.log(phrase); // phrase est accessible
  }
}

Fonction d'objet

let x = {
  argent: 25,
  gagnerLoto: function () {
    // ...
  }
}

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    // ...
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    // ...
  }
}

Le mot clé this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this; // === x
  }
}

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    this; // !== y
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    this; // === z
  }
}

Le mot clé this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this.argent = 10e6;
  }
}

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    this.argent = 10e6; 
    // this ne cible pas y
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    this.argent = 10e6;
  }
}

Le mot clé this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this.argent = 10e6;
  }
}

x.gagnerLoto();
x.argent; // 10e6

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    this.argent = 10e6;
    // this ne cible pas y
  }
}

y.gagnerLoto();
y.argent; // 25

let z = {
  argent: 25,
  gagnerLoto() {
    this.argent = 10e6;
  }
}

z.gagnerLoto();
z.argent; // 10e6

Fonction fléchée et this

this; // globalThis;


let x = {
  gagnerLoto: () => {
    this; // globalThis;
  },
  houra: function () {
    this; // x
    const crier = () => {
      this; // x
      console.log("Houra");
    }
    crier();
  }
}

ES6

Function.bind et this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this.argent = 10e6;
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    this.argent = 350;
  }
}

ES6

Vue

let volerLoto = x.gagnerLoto.bind(z);

volerLoto();

x.argent; // 25

z.argent; // 10e6

!!!

Les classes

Déclaration d'une classe

class Humain {
  
}

ES6

kevin = new Humain();

Déclaration d'une classe

class Humain {
  
}

ES6

kevin = new Humain();

Constructeur d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.age = 0;
  }
  
}

ES6

kevin = new Humain("Kevin");

Méthode d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.age = 0;
  }
  
  vieillir() {
    this.age++;
  }
  
}

ES6

kevin = new Humain("Kevin");

kevin.vieillir();

Getter d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.langues =
      ["Anglais", "Italien"];
  }
  
  get langue() {
    let langue = this.nom;
    langue += " parle ";
    langue += this.langues.join(" ");
    return langue;
  }
  
}

ES6

kevin = new Humain("Kevin");

kevin.langue; 
// "Kevin parle Anglais Italien"

Setter d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.langues = [];
  }
  
  set langue(nom) {
    this
      .langues
      .push(nom);
  }
  
}

ES6

kevin = new Humain("Kevin");

kevin.langues; 
// []

kevin.langue = "Anglais";

kevin.langues; 
// ["Anglais"]

kevin.langue = "Italien";

kevin.langues; 
// ["Anglais", "Italien"]

Héritage

class Terrien {
  constructor(age) {
    this.planet = "Terre";
    this.age = age;
  }
}

class Humain extends Terrien {
  constructor(age) {
    super(age);
  }
}

ES6

kevin = new Humain("Kevin");

kevin.planet; // "Terre"

Static

class Humain {
  
  static estHomoSapiens() {
    return true;
  }
  
}

ES6

Humain.estHomoSapiens(); // true

Le prototype

class Humain {}

let kevin = new Humain();

Humain.prototype.parler = function () {
  console.log("Blah blah");
}

kevin.parler(); // > "Blah blah"

Vue

Affecter comme un pro

Opérateur ternaire

// condition ? siConditionVraie : siConditionFausse;

let x = age >= 18 ? "Majeur" : "Mineur";

Coalescence des nuls

const a = null || "default"; // "default"

const b = undefined || "default"; // "default"

const c = false || "default"; // "default"

const d = 0 || "default"; // "default"

const e = [] || "default"; // []

const f = "" || "default"; // "default"

const g = true || "default"; // true

const h = "foo" || "default"; // "foo"

ES11

const a = null ?? "default"; // "default"

const b = undefined ?? "default"; // "default"

const c = false ?? "default"; // false

const d = 0 ?? "default"; // 0

const e = [] ?? "default"; // []

const f = "" ?? "default"; // ""

const g = true ?? "default"; // true

const h = "foo" ?? "default"; // "foo"

Les erreurs

try catch

try {
  
  vivreTranquille();
  
} catch (e) {
  
  if(e.message === "covid") {
    
     seConfiner();    
    
  }
 
}

function vivreTranquile() {
  
  // ...
  
  throw new Error("covid");
 
  // ...
  
}

Programmation asynchrone

Text

La boucle d'événement

File

d'événements

1

Fonction de rappel

document.body.addEventListener('click', () => {
  
  alert("Hello world");
  
})

Événement après un délai

console.log("Le petit oiseau va sortir dans 2 secondes !")


setTimeout(() => {
  
  console.log("Coucou !");
  
}, 2000);

Événement récurrent

let compteur = 10;

setInterval(() => {
  
  if(compteur === 0) {
    console.log("BOOM !")
  } 
  else if(compteur > 0) {
    console.log(compteur);
  }
  
  compteur--;
  
}, 1000);

Événement récurrent

let compteur = 10;

const interval = setInterval(() => {
    
  if(compteur === 0) {
    console.log("BOOM !")
    clearInterval(interval);
  }
  
  console.log(compteur--);
  
}, 1000);

Les promesses

ES6

En attente

Résolue

Rejetée

Les promesses

ES6

En attente

Résolue

Rejetée

Si Matteo fournit un bon travail, il sera récompensé

Les promesses

ES6

En attente

Résolue

Rejetée

Matteo travail jusqu'à avoir un bon résultat ou bien ne plus pouvoir travailler

La mama est informée

Matteo est recompensé

Les promesses

const promise = new Promise((resolve, reject) => {
  
  let matteoPeutTravailler = true;
  let mauvaisResultat = true;
  let resultat;
  
  while(matteoPeutTravailler && mauvaisResultat) {
    resultat = travaillerDur();
    mauvaisResultat = evaluerTravail(resultat);
    matteoPeutTravailler = estimerFatigue();
  }
 
  if(!mauvaisResultat) {
    	resolve(resultat);
  } else {
    	reject("Abandon")
  }
  
})

ES6

promise
  .then(result => {
    recompenserMatteo();
  })
  .catch(error => {
    informerLaMama();
  })

async / await

const promise = new Promise((resolve, reject) => {
  
  let matteoPeutTravailler = true;
  let mauvaisResultat = true;
  let resultat;
  
  while(matteoPeutTravailler && mauvaisResultat) {
    resultat = travaillerDur();
    mauvaisResultat = evaluerTravail(resultat);
    matteoPeutTravailler = estimerFatigue();
  }
 
  if(!mauvaisResultat) {
    	resolve(resultat);
  } else {
    	reject("Abandon")
  }
  
})

ES6

async function () {
  
  // Attendre le résultat
  try {
    
    let resultat = await promise;
    
  } catch(e) {
    
    e; // "Abandon"
    
  }
}

async / await

const promise = new Promise((resolve, reject) => {
  
  let result = tacheBloquante();
 
  if(result) {
    	resolve(result);
  } else {
    	reject("Requête impossible")
  }
  
})

ES6

promise
  .then(result => {
  
})
  .catch(error => {
  
})

Déboguer malin

Logguer en console

let maVariable = 42;

console.log(maVariable);
// > 42

console.log({maVariable});
// > { maVariable: 42 }

Logguer en console

console.info("foo");

console.warn("bar");

console.error("qux");

Plus loin avec la console

// Effacer la console
console.clear();


// Afficher la pile d'appel 
console.trace();


// Mesurer le temps
console.time("mesurer durée traitement");

console.timeEnd("mesurer durée traitement");

Le débogueur

debugger;

Les modules

Import export

// module.js
 
export default { 
  name: "Benjamin"
};

ES6

Vue

// main.js

import Module from "./module.js";
Module; // { name: "Benjamin" }


import AutreNom from "./module.js";
AutreNom; // { name: "Benjamin" }

Import export

// module.js
 
export default { 
  name: "Benjamin"
};

export const email = "iut@chazelle.pro";

ES6

Vue

// main.js

import Module from "./module.js";
Module; // { name: "Benjamin" }


import { email } from "./module.js";
email; // "iut@chazelle.pro"

Import export

// module.js
 
export default { 
  name: "Benjamin"
};

export const email = "iut@chazelle.pro";

let website = "chazelle.pro";

export website;

ES6

Vue

// main.js

import Module from "./module.js";
Module; // { name: "Benjamin" }


import { email } from "./module.js";
email; // "iut@chazelle.pro"

import { website as url } from "./module.js";
url; // "chazelle.pro"

Import export

// module.js
 
export default { 
  name: "Benjamin"
};

const email = "iut@chazelle.pro";

let website = "chazelle.pro";

export { email, website };

ES6

Vue

// main.js

import Module from "./module.js";
Module; // { name: "Benjamin" }


import { email, website as url } from "./module.js";
email; // "iut@chazelle.pro"
url; // "chazelle.pro"

Import export

// module.js
 
export default { 
  name: "Benjamin"
};

const email = "iut@chazelle.pro";

let website = "chazelle.pro";

export { email, website };

ES6

Vue

// main.js

import Module, { email, website as url } from "./module.js";
Module; // { name: "Benjamin" }
email; // "iut@chazelle.pro"
url; // "chazelle.pro"

Import export

// module.js
 
export default { 
  name: "Benjamin"
};

const email = "iut@chazelle.pro";

function share() {};

export { email, share };

ES6

Vue

// main.js

import Module, { email, share } from "./module.js";
Module; // { name: "Benjamin" }
email; // "iut@chazelle.pro"
share; // function share() {}

DOM API

Accès à un élément

document.body;
// <body>

document.getElementById("titre");
// <input #titre>

document.querySelector("p");
// <p>



window.title;
// "Apprenons JS"

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Apprenons JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello world</h1>
  <input id="titre" type="text" />
  <button>Envoyer</button>
</body>
</html>

Manipuler un élément

let input = document.querySelector("#titre");

// Valeur du champ
input.value;

input.getAttribute("type"); // "text"

input.setAttribute("type", "password");

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Apprenons JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello world</h1>
  <input id="titre" type="text" />
  <button>Envoyer</button>
</body>
</html>

Manipuler un élément

let paragraph = document.querySelector("p");

paragraph.textContent;
// "Hello world"

paragraph.innerHTML;
// "Hello<br />world"

paragraph.outerHTML;
// "<p>Hello<br /world</p>"

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Apprenons JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello<br />world</h1>
  <input id="titre" type="text" />
  <button>Envoyer</button>
</body>
</html>

Événements DOM

let bouton = document.querySelector("button");

bouton.addEventListener("click", () => {
  alert("Clicked !");
});


// Il y a de nombreux événements écoutables
// 
//  mousedown, mouseup, mousemove, click, dblclick 
//  keydown, keyup, keypress
//  scroll
//  ...

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Apprenons JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello<br />world</h1>
  <input id="titre" type="text" />
  <button>Envoyer</button>
</body>
</html>

Créer un élément

document.body;
// <body>

document.getElementById("titre");
// <input #titre>

document.querySelector("p");
// <p>



window.title;
// "Apprenons JS"

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Apprenons JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello world</h1>
  <input id="titre" type="text" />
  <button>Envoyer</button>
</body>
</html>

La jungle

🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴🌴

Canvas API	TypedArray	Ramasse-miette
XHR	Video API	Mode strict
Générateur	Buffer	Local sotrage
Node	WebSocket	Fetch API
BigInt	Worker	Notification

Face à une erreur

Formuler sa requête
1. Extraire le code et le message d'erreur
2. Enlever les chemins de fichier et autres données locales
3. Éventuellement rajouter le nom du langage / de la lib
Examiner les réponses
1. Prioriser StackOverflow, GitHub, forums, blogs
2. Penser à regarder dans les sous-threads StackOverflow
3. Tracker les réponses avec des feedbacks positifs
Checker les docs, voire les specs (e.g. MDN, Vue.js, W3C)

Kahoot time ! #5

En route vers Vue.js

Installer Node/npm

Node.js + NPM

Installer un IDE

WebStorm

dans le GitHub Student Pack

VisualStudio Code

Atom

Installer Vue

Vue.js

Merci

iut@chazelle.pro