L’ÉCOLE DES EXPERTS

MÉTIERS DE
L’INFORMATIQUE
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’environnement de travail
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Environnement de travail

Pour coder en javascript, un simple éditeur de texte suffit comme par exemple Notepad++

et un navigateur HTML.

Cependant de nos jours, l’utilisation d’un Ide (Integrated Development Environment) est préférable. Il en

existe pleins, Atom, Bracket, Komodo, VsCode...

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Environnement de travail

Pour cette formation, je vous conseille VsCode, auquel nous allons ajouter quelques extensions :

- EsLint

- Live server

- Prettier

- TabNine

- Indent-Rainbow

- Javascript (ES6)

- Désactiver GitHubCopilot (pour l’instant)

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

L’objectif d’un programme informatique est de travailler avec des données.

Votre programme utilise des variables pour enregistrer et manipuler ces données.

Plus précisément, une variable est un contenant utilisé pour enregistrer une donnée spécifique dont

votre programme a besoin pour travailler.

Une donnée placée dans une variable s’appelle une valeur.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

Vous attribuez un nom à votre variable.

Le nom d’une variable doit indiquer ce qui se trouve à l’intérieur.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

Voici quelques règles générales pour la création de noms de variable :

- utilisez des noms descriptifs dans l’ensemble de votre code.

am = 15; // qu’est ce que AM ?

ageMaximum = 15;

Soyez le plus descriptif dans la dénomination des variables

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

- Évitez d’utiliser des abréviations ou de raccourcir des mots à chaque fois que c’est possible,

ageMaximum est mieux que am

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

- Suivez une convention de nommage constante

En javascript, la convention de nommage est le camel case.

Dans cette convention, les noms sont constitués de plusieurs mots dont l’initiale est en capitale, sauf la

première initiale.

let ageMaxOfTheThirdChild = 30;

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

Une variable, ne peut commencer par un chiffre et ne doit jamais contenir de caractères spéciaux,

ni accent.

En javascript les variables sont case Sensitive, c’est à dire que

myVar et Myvar, sont 2 variables différentes.

let 1var; // interdit

let my var; // interdit

let m@var; // interdit

let prénom; // interdit

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

Pour utiliser une variable, il faut la déclarer avec le mot clé «let»

let ageMaximum; // 1

let ageMaximum = 15; // 2

A la première instruction, nous avons seulement déclarer la variable, elle existe mais elle est vide,

elle ne contient rien.

A la seconde instruction, nous avons déclaré une variable et initialisé, en lui affectant une valeur.

= 15 est une affectation

= est l’opérateur d’affection

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

Vous trouverez dans la littérature «affectation» ou «assignation», «affecter» ou «assigner», c’est la même

chose.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les variables

Pour modifier une variable existante, il suffit de lui assigner une nouvelle valeur, sans la redéclarer

ageMaximum = 30;

Vous trouverez dans pleins de programme, «var myVariable», pour l’instant utiliser «let»
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les types
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les types

En Javascript, on peut stocker différents types de valeurs, comme des nombres, textes...

Contrairement à d’autres langages de programmation, nous n’avons pas besoin de préciser à priori le

type de valeur qu’une variable va pouvoir stocker.

Le JavaScript va en effet automatiquement détecter quel est le type de la valeur stockée dans telle ou

telle variable, et nous allons ensuite pouvoir effectuer différentes opérations selon le type de la variable.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les types

Il existe 7 types de données :

- string «chaine de caractères»

- number «nombre»

- boolean «booléen»

- null «null»

- undefined «indéfini»

- symbol «symbole»

- object «objet»
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le type : string

Les strings sont affectées via des guillemets (double quote) ou des apostrophes (simple quote)

let prenom = ‘jerome’;

// OR

let prenom = ‘‘jerome’’;

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le type : string

Si vous affectez une variable avec un nombre entre guillemets, elle sera considérée comme une string

let age = ‘49’;

[Link](age+1); // => 491

[Link]() permet d’afficher des informations dans la console du navigateur

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le type : string

Pour vérifier de quel type est une variable, on utilise

typeof age; // => string

Veuillez noter que l’utilisation des guillemets ou apostrophes est identique.

A l’exception des chaines de caractères contenant un guillemet ou une apostrophe, il faudra «échapper»

le guillemet ou l’apostrophe. Le caractère d’échappement est «\»

let text1 = ‘‘Je m’appelle Jérôme ’’;

let text2 = ‘Je m\’appelle Jérôme ’;

let text3 = ‘‘Je m’appelle \’’Jérôme\’’ ’’;

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le type : number

Les numbers, regroupent tous les types numériques, entiers, négatifs, décimaux (avec virgule -> float);

let x = 2;

let y = -3;

let z = 2.5;

[Link](x+y+z); // => 1.5

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le type : boolean

Les booleans, sont des types qui ne peuvent prendre pour valeur que 0 (ou false), 1 (ou true);

let vrai = true;

let faux = false;

[Link](‘vrai’,vrai); // => vrai true

let vrai = true ou let vrai = 1 sont identiques mais Il est conseillé false et true, idem avec false
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le type : null et undefined

Les nulls et undefined, sont des types qui ne peuvent prendre pour valeur que null ou undefined.

Une variable déclarée mais non affectée, aura pour type undefined

let var1;

[Link](var1); // => undefined

let var2 = null;

[Link](var2); // => null

La valeur null, correspond à l’absence de valeur. Cette valeur va être utile dans certains cas où on

souhaite explicitement indiquer une absence de valeur connue.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le type : object et symbol

Les objects et symbols sont des structures complexes qui peuvent stocker en même temps plusieurs

valeurs. Nous les étudierons plus tard.

Une particularité, les tableaux en javascript sont des objets.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les opérateurs
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les Opérateurs

Les opérateurs sont des symboles qui vont permettre d’effectuer des opérations sur les variables et leur

valeur.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les Opérateurs

Il existe plusieurs types d’opérateur

- Les opérateurs arithmétiques,

- Les opérateurs d’affectation / d’assignation,

- Les opérateurs de comparaison,

- Les opérateurs d’incrémentation et décrémentation,

- Les opérateurs logiques,

- L’opérateur de concaténation,

- L’opérateur ternaire,

- L’opérateur virgule.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les Opérateurs

A ce point, nous allons regarder les opérateurs arithmétiques, et les opérateurs d’affectation.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les Opérateurs arithmétiques

Opérateur Opération
+ Addition
- Soustraction
* Multiplication
/ Division
% Modulo (reste d’une division)
** Exponentielle
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’opérateur modulo

Le modulo renvoi le reste d’une division

let reste = 5%3;

[Link](reste); // => 2

Explication :

5/3 = 1,333; on garde la valeur entière 1

5 - (3*1) = 2
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’opérateur exponentielle

L’exponentielle, renvoie x élevé à la puissance de y

let exponentiel = 5**2;

[Link](exponentiel); // => 25

// 5*5

let exponentiel = 2**3;

[Link](exponentiel); // => 8

// 2*2*2
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Priorité

Les priorités de règles de calcul sont les mêmes qu’en mathématique, la multiplication et la division

prévalent sur l’addition et la soustraction

let a = 1 -2 -3; // -> -4

let b = 1 + 2 * 3 // => 1+(2*3) => 7

let c = 2 * 3 + 4 - 8 / 4 // => (2*3) + 4 – (8/4) => 8

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Priorité

Nous allons finalement, comme en mathématique, pouvoir forcer l’ordre de priorité en utilisant des

couples de parenthèses pour indiquer qu’une opération doit se faire avant toutes les autres

let a = 1 - 2 - 3; // -4

let b = 1 - (2-3); // 1 - (-1) => 2

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les Opérateurs d’affectation

Opérateur Opération
= Affecte une valeur
+= Additionne lui-même puis affecte une valeur
-= Soustrait lui-même puis affecte une valeur
*= Multiplie lui-même puis affecte une valeur
/= Divise lui-même puis affecte une valeur
%= Calcule le modulo puis affecte une valeur
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les Opérateurs d’affectation

let x=3;

x = x + 5; // => 8

x += 5; // => 8

let y=5;

y = y -2 ; // => 3

y -= 2 ; // => 3

Ces opérateurs (sauf =) permettent de faire une opération arithmétique puis une affectation.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La concaténation

La concaténation ne s’applique qu’au chaine de caractère, elles permettent de regrouper plusieurs

chaines de caractères en une seule. L’opérateur de concaténation est +

let a = ‘hello’; let b = ‘world’;

alert(‘a = ‘ + a +

‘\nb = ‘ + b +

‘\nConcatener = ‘ + a + ‘ ‘ + b);

alert() permet d’afficher une information à l’écran dans une boîte de dialogue
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les littéraux de gabarit

Les littéraux de gabarit sont une autre façon de réaliser des concaténations, c’est utilisé essentiellement

pour l’affichage.

La grande différence entre l’utilisation de ` (back tick) ou l’utilisation d’apostrophes ou de guillemets est

que toute expression placée entre les ` (back tick) va être interprétée en JavaScript.

Pour le dire simplement : tout ce qui renvoie une valeur va être remplacé par sa valeur. Pour se faire il

faut commencer et finir par ` (back tick).

Les variables vont être placées entre ${ et }, javascript va remplacer automatiquement les variables par

leur valeur.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La concaténation Les littéraux de gabarit

let a = ‘hello’; let b = ‘world’; let c = ‘hello’;

alert(‘a = ‘ + a + let d = ‘world’;

‘\nb = ‘ + b + alert(`c = ${c}

‘\nConcatener = ‘ + a + ‘ ‘ + b); d = ${d}

Concatener = ${c} ${d}`);

Notez également, que je n’ai plus besoin de forcer le retour à la ligne car dans l’expression je retourne à

la ligne
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les constantes
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les constantes

Une constante est identique à une variable, c’est une unité de stockage.

La grosse différence, est comme son nom l’indique, qu’une constante ne peut changer de valeur.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les constantes

Pour déclarer une constante on utilise le mot clé const

Une constante doit être initialisée lors de sa déclaration

const TVA = 1.2;

const LANG = ‘FR’;

Par convention, les constantes «de valeurs» sont en majuscule (upper case)
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux indexés

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux indexés

Les tableaux sont des variables (en fait ce sont des objets), qui peuvent contenir plusieurs valeurs.

On définit les valeurs d’un tableau entre [ et ].

Créer un tableau vide

let tableau1 = [];

Créer un tableau et initialiser

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

let tableau2 = [’pierre’, ’paul’, ’jacques’];

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux indexés

Pour accéder, a une valeur précise d’un tableau, il faut utiliser son index, c’est à dire sa position dans le

tableau. Les indexes commencent à zéro;

Index Valeur
Pour accéder à une valeur, on utilise var[index]
0 1
1 2 [Link](tableau1[2]); // => 3

2 3
3 4
4 5
5 6
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux associatifs

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux associatifs

Les tableaux associatifs sont des tableaux qui associent une clé à une valeur

let tableau2 = {

name: ‘borg’,

firstname: ‘jerome’,

age: 49

}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux associatifs

let tableau2 = {

name: ‘borg’,

firstname: ‘jerome’,

age: 49

Pour accéder à une valeur, au lieu d’utiliser l’index vous allez utiliser la référence

[Link](tableau2[‘age’]);// => 49

/*OU*/

[Link]([Link]);// => 49
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux associatifs

Dans un tableau associatif, la référence ou clé, est notée sans apostrophe ou guillemet et suivi de «:»,

pour accéder à une valeur, il faut utiliser la clé entre apostrophe ou guillemet

Pour un tableau indexé, pour connaitre le nombre d’élément on utilise la fonction length

[Link]([Link]); // => 6

Pour un tableau associatif, pour connaitre le nombre d’élément on utilise la fonction

length de la fonction [Link]

[Link]([Link](tableau2).length); // => 3
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux associatifs

Function Définition
length renvoi la longueur d’un tableau indexé
toString() convertit un tableau en string séparé par ,
join(separator) convertit un tableau en string séparé par separator
pop() extrait et renvoi le dernier élément d’un tableau
push() ajoute à la fin un élément dans le tableau
shift() extrait et renvoi le premier élément d’un tableau (pop inverse)
unshift() ajoute au début un élément dans le tableau (push inverse)
splice() ajouter de nouveaux éléments a un tableau, à une position
donnée
slice() extrait et renvoi une partie d’un tableau, à une position donnée
split() convertit une chaine de caractère en tableau
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les tableaux associatifs

Function Définition
filter() renvoi un tableau avec les éléments qui répondent à la condition
find() renvoi le 1er élément qui répond à la condition
forEach() parcours un tableau (autre sorte de boucle)
map() parcours un tableau et effectue une opération pour chaque item
reduce() parcours et renvoie la somme des éléments
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les structures de contrôle

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les structures de contrôle

Les structures de contrôle, sont un ensemble d’instruction qui permettent de contrôler l’exécution du

code, elles sont de 2 types :

- conditionnelle

- boucle.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les conditions

Il existe les structures conditionnelles suivantes :

- if (si) ;

- if… else (si… sinon) ;

- if… elseif… else (si… sinon si… sinon).

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les opérateurs de comparaison

Opérateur Définition
== Test l’égalité de valeur (égalité simple)
=== Test l’égalité de valeur et de type (égalité stricte)
!= Test la différence de valeur
!== Test la différence de valeur ou de type
< Test si une valeur est strictement inférieure à une autre valeur
> Test si une valeur est strictement supérieure à une autre valeur
<= Test si une valeur est inférieure ou égale à une autre valeur
>= Test si une valeur est supérieure ou égale à une autre valeur
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les opérateurs logiques

Opérateur nom Opérateur symbole Définition

AND (et) && pour vérifier si deux conditions sont toutes
les deux vraies
OR (ou) || pour vérifier si au moins une condition est
vraie
NOT (non) ! pour vérifier si une condition n’est pas vraie
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les opérateurs logiques

L’ordre des comparaisons a de l’importance

Dans le cas du And, a la première comparaison qui est fausse, le test s’arrête et renvoie false

Dans le cas du Or, a la première comparaison qui est vrai, le test s’arrête et renvoie true
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les ternaires

Les ternaires sont des structures conditionnelles mais avec une syntaxe différente et raccourci
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les ternaires

if (condition) { condition ? do true : do false

do true;

} else {

do false;

Si la condition est vrai ? (alors) Action pour vrai : (sinon) action pour faux
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

switch

L’instruction switch va permettre de tester différentes valeurs d’une variable.

C’est une alternative au if, mais ne fonctionne que sur des valeurs précises,

on ne peut pas utiliser >=, <=, !

Cela évite les if elseif elseif elseif else interminable, et c’est plus lisible
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

switch

let a = 2;
switch (a) {
case 2 :
// do something for 2
break;
case 4 :
// do something for 4
break;
case 6 :
// do something for 6
break;
case 8 :
// do something for 8
break;
default :
// do something else
}

// Notez l’instruction break pour sortir du switch lorsque la condition est remplie.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles

En développement, il y a des ensembles d’instructions à répéter plusieurs fois.

Parfois, vous connaîtrez à l’avance le nombre de répétitions, d’autres fois non.

Il est aussi possible que le nombre de fois n’importe pas, et que vous souhaitiez répéter le code jusqu’à

atteindre une certaine condition. Pour tous ces cas, nous utiliserons des boucles.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : for

La boucle for, est la boucle la plus utilisée en développement.

La boucle for contient 3 blocs :

- une initialisation i = 0; point de départ

- une condition d’arrêt i< 10

- une incrémentation pour passer à la boucle suivante

for (let i=0; i< 10; i++) {

[Link](i);

Une boucle for est généralement utilisée, lorsque que l’on connait le nombre de répétition (itération).
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : while et do while

Ces 2 boucles sont quasi identiques, et s’utilisent lorsqu’on ne connait pas le nombre d’itération.

let somme1 = 0; let somme2 = 0;

while(somme1 <=10) { do {

somme1++; somme2++;

} }

while(somme2 <=10)

La différence entre les deux, est le test de condition de sortie dans un cas au début, et dans l’autre à la fin.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : for of et for in

Ces boucles sont faites pour parcourir les objets itérables.

Rappelez-vous que les tableaux sont des objets, et s’ils contiennent plusieurs éléments, on peut donc

réaliser une boucle

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : for of

const array1 = [‘a’,’b’,’c’];

for (const item of array1) {

[Link](‘item: ’, item); // => item: a

Item va représenter un élément de la boucle, avec une boucle for standard, item a la première itération

serait array1[0]
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : for in

const object1 = [a: 1, b: 2, c:3 ];

for (const item in object1) {

[Link](‘item: ’ + item + ‘, ‘ + object1[item]); // => item: a, 1

for in, va s’utiliser sur les tableaux associatifs

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : break et continue

Il existe deux instructions, qui permettent d’arrêter l’itération.

Continue; stoppe l’itération en cours et passe à l’itération suivante

Break; stoppe l’itération en cours et sort de la boucle

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : break et continue

const NUMBER_DIGIT = 10;

for (let i=0; i< NUMBER_DIGIT; i++) {

if (i % 2) { // impair

continue;

[Link](‘le chiffre ‘+i+’ est pair’);

}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les boucles : break et continue

const MAX_NUMBER = 1000;

const SEARCH_NUMBER = 22;

let iteration;

for (let i = 0; i < MAX_NUMBER; i++) {

if (i === SEARCH_NUMBER) {

iteration = i;

break;

[Link](iteration);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions

«Une fonction correspond à un bloc de code nommé et réutilisable et dont le but est d’effectuer une

tâche précise.»

Dans tous les langages de programmation, il existe des fonctions natives ou prédéfinies, ce sont les

fonctions propres a javascript, et des fonctions personnalisées, ce sont nos fonctions.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions

Par exemple la fonction split, qui va transformer une chaine de caractère en un tableau

Voici le prototype ou signature

[Link](separateur)

let chaine = ‘Une chaine de caractère’;

let tableau = [Link](‘ ‘);

[Link]([Link]); // => 4
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions

Pour créer une fonction personnalisée, on utilise le mot clé function suivi du nom de la fonction, et entre

parenthèse, les paramètres dont aura besoin la fonction.

On peut créer une fonction sans paramètre.

function aleatoire() {

return [Link]()*100;

[Link](‘aleatoire’, aleatoire()); // => 24.2222

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions

function carre(x) {

// execution du code de la fonction

let resultat = x * x;

return resultat;

let resultatCarre2 = carre(2);

[Link](‘resultatCarre2‘, resultatCarre2); // => 4

let resultatCarre3 = carre(-3);

[Link](‘resultatCarre3‘, resultatCarre3); // => 9

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions

Notre fonction exécute son code, puis renvoi son résultat via le mot clé return

Dans le programme, l’appel se fait par le nom de la fonction et la valeur du paramètre.

La valeur du paramètre (2) se nomme l’argument.

carre(2)
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions

Dans un souci pédagogique, nous avons détaillé, mais nous pouvons faire plus court, cette opération

s’appelle «refactoriser»

function carre(x) {

return x * x;

[Link](‘resultatCarre2‘, carre(2)); // => 4

[Link](‘resultatCarre3‘, carre(-3)); // => 9

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La portée des variables

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La portée des variables

La portée des variables ou scope, désigne l’espace du script ou cette variable sera accessible. Toutes les
variables ne sont pas accessibles de n’importe quel endroit de notre programme.
Il existe 2 espaces de portés différents : l’espace global et l’espace local.

L’espace global désigne l’intégralité du script a l’exception de l’intérieur des fonctions.

L’espace local désigne, l’inverse, l’intérieur des fonctions.

Une variable définit dans l’espace global avec être accessible dans tous les scripts même dans les
fonctions.
Une variable définit dans une fonction ne sera accessible que dans de cette fonction, et non manipulable
dans l’espace global.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La portée des variables

let x = 5;

function test1() { test1(); // => 5

[Link](‘x global:’,x); test2(); // => 10
x++; test3(); // => 6
} x++;
function test2() { test4(); // => 10
let a = 10; [Link](‘x’,x);// => 7
[Link](‘a local:’,5); [Link](‘a’, a);// error a not defined
a++;
}
function test3() {
[Link](‘x global:’,x);
}
function test4() {
let x = 10;
[Link](‘x local:’, x);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La portée des variables

Let x est définie dans l’espace global donc accessible dans l’espace global et dans les fonctions
test1 => peut accéder à x et peut le modifier

test2 => a est définie en local, donc accessible que de cette fonction et pas des autres fonctions, ni en
global, d’où l’erreur a la dernière ligne

test3 => x est global, est a été modifié dans test1() x++; donc x vaut maintenant 6

test4 => let x , on ne redéfinit pas x du global mais un nouveau x en local

x du global n’a pas changé
x++; => 7
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La portée des variables

Différence entre let et var

let et var, dans le scope global sont identiques
mais var dans le scope local, sera accessible dans tous les blocs que la fonction possède.

function test1() {
let x = 10;
var y = 10;
if (true) {
let x = 15;
var y =15;
[Link](‘if x:’, x); // => 15
[Link](‘if y:’, y); // => 15
}
[Link](‘x:’, x); // => 10
[Link](‘y:’, y); // => 15

}
test1();
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

La portée des variables

Au sein de notre fonction, on définit y, dans la condition if, on redéfini y a 15, mais également x, mais
c’est un nouveau x, alors que le y est celui de la fonction.

Il est préconisé de ne plus utiliser var, d’autre part, c’est une mauvaise pratique d’utiliser des variables de
même nom dans une même fonction, cela porte à confusion.

Certaines fonctions vont renvoyer une valeur, d’autre non.

Notre fonction «carre», renvoie une valeur via le mot clé «return».
Le mot clé «return» met fin à l’exécution de la fonction, tout le code se trouvant après ne sera pas
exécuté.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions anonymes

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions anonymes

Les fonctions anonymes, sont des fonctions qui n’ont pas de nom.
En général, on utilise les fonctions anonymes lorsque le code de la fonction est unique, donc non
réutiliser.

On définit le prototype d’une fonction anonyme comme n’importe quelle fonction, mais sans lui donner
de nom

function () {
alert(‘hello world’);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions anonymes

Alors comment faire un appel à ces fonctions ?

Pour faire appel à une fonction anonyme, on peut :
1 - encapsuler le code de la fonction dans une variable, et utiliser la variable comme fonction
2 - auto-invoquer la fonction anonyme
3 - utiliser un événement afin de déclencher l’exécution de notre fonction
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions anonymes : 1 encapsuler

let alerte = function () {

alert(‘hello world’);
}
alerte();

const alerte2 = function () {

alert(‘hello world 2’);
}
alerte2();
On préconisera plutôt const, car le contenu ne changera pas, même si on passe un paramètre
const alerte3 = function (text) {
alert(text);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions anonymes : 2 auto-invoquer

Pour auto-invoquer une fonction il faut placer la fonction anonyme entre () et la finir par des ()

( function() { alert(‘hello world 4’)} )()

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions anonymes : 3 événement

Pour exécuter une fonction après un évènement (on y reviendra plus tard)
<div id=’bloc’>Lorem ipsum, ....</div>
<script>
let bloc = [Link](‘bloc’);
[Link](‘click’, function () {
alert(‘Clic sur la div bloc’);
});
</script>
Examinons ce code,
On définit une div avec du texte, on lui attribue l’id «bloc»
On récupère de la dom (on y reviendra plus tard), la div «bloc»
On affecte un écouteur d’événement à ce bloc, l’évènement sera un click sur la div, et on exécute la
fonction anonyme.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions récursives

Ce sont des fonctions qui s’appelles elles-mêmes.

De la même manière que les boucles, elles vont permettre d’exécuter une action, jusqu’à rencontrer
une condition de sortie;

function countDown(val) {
if (val > 0) {
// do something
[Link](val);
return countDown(val - 1);
} else {
// on sort de la recursivité
[Link](‘end:’, val);
}
}
countDown(5);
5
4
3
2
1
end:0
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les fonctions récursives

On fait appel à la fonction countDown, qui doit commencer a 5, et s’arrêter a 0.

Si la valeur est > 0, on va exécuter du code «do something», et s’auto rappeler avec sa valeur -1

Si la valeur est = 0, on s’arrête.

Soyez très vigilent, avec l’utilisation de la récursivité, vous pouvez très facilement générer des

boucles infinies, c’est à dire que votre condition de sortie n’est jamais atteinte.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le BOM
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le BOM (Browser Object Model)

Le Bom (Browser Object Model), est une sorte de «super-api» car elle contient de multiple api. Une api

(Application Programming Interface, Interface de Programmation Applicative), est une interface, un

ensemble de code permettant de communiquer entre deux éléments. Par exemple, un clavier est une

interface, on n’a pas besoin de savoir ce qui se passe réellement lorsque que je clique sur la touche «a»,

tout ce que l’on a besoin de savoir, est qu’un «a» apparaitra à l’écran.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le BOM (Browser Object Model)

A la base de la Bom, nous avons l’interface Window, qui contient les objets suivants :

- L’objet Navigator, qui correspond aux informations du navigateur

- L’objet History, qui permet de manipuler l’historique de la navigation

- L’objet Location, qui fournit des informations sur l’url en cours (rien a voir avec la géolocalisation)

- L’objet Screen, qui fournit des informations sur la fenêtre courante

- L’objet Document, c’est en gros le Dom, que nous verrons juste après
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le BOM (Browser Object Model) : l’objet window

Les propriétés de l’objet Window

Propriété Définition
outerHeight hauteur «externe» de la fenêtre de navigation avec les options du navigateur
outerWidth largeur «externe» de la fenêtre de navigation avec les options du navigateur
innerHeight hauteur «interne» de la fenêtre de navigation sans les options du navigateur
innerWidth largeur «interne» de la fenêtre de navigation sans les options du navigateur
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le BOM (Browser Object Model) : l’objet window

Les méthodes de l’objet Window

Propriété Définition
open(url, taille) hauteur «externe» de la fenêtre de navigation avec les options du navigateur,
renvoie une référence à la fenêtre ouverte
resizeBy(w, h) redimensionne la taille de la fenêtre en ajoutant w et h
resizeTo(w,h) redimensionne la taille de la fenêtre a w et h
moveBy(x,y) déplace la fenêtre de x et y par rapport à la position actuelle
moveTo(x,y) déplace la fenêtre de x et y par rapport au haut gauche de l’écran
scrollBy(x,y) scroll de x et y par rapport à la position actuelle
scrollTo(x,y) scroll de x et y par rapport au haut gauche de l’écran
close() permet de fermer une fenêtre référencée
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le BOM (Browser Object Model) : l’objet window

Exemple

let newWindow = [Link](‘[Link] ‘width=400, height=500’);

[Link]();
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le DOM
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le DOM (Document Object Model)

Le Dom (Document Object Model, modèle objet d’un document), que nous avons déjà évoqué sur l’html,

est une représentation structurée sous forme d’arbre, de tous les éléments de notre document. Chaque

branche de cet arbre se termine par un noeud.

Ce qui va nous intéresser, essentiellement,

ce sont tous les noeuds de body,

ils sont contenus dans l’objet «document».

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Accéder aux éléments

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le DOM (Document Object Model) : accéder aux éléments

Il existe plusieurs façons d’accéder aux noeuds, on peut par le nom du tag (p), le nom de la classe

(couleur), le nom de l’id, l’attribut name.

getElementsByClassName, getElementsByTagName et getElementsByName, va nous renvoyer

plusieurs d’élément (un tableau), car une classe ou un tag ou un name peut être multiple,

getElementById, renvoie un élément unique

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le DOM (Document Object Model) : accéder aux éléments

<h1>Titre</h1>

<p class=‘paragraphe’>Lorem ipsum <input id=‘name’ name=‘name’ value=‘’> </p>

<p class=‘paragraphe’>Lorem ipsum2 <input id=‘name2’ name=‘name2’ value=‘’> </p>

let titre = [Link](‘h1’);

let paragraphes = [Link](‘paragraphe’);

let input = [Link](‘name’);

let input2 = [Link](‘name2’);

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le DOM (Document Object Model) : querySelector et querySelectorAll

Javascript nous propose également d’autres fonctions

querySelector() pour récupérer 1 seul élément (le premier trouvé)

querySelectorAll(), pour récupérer tous les éléments.

Il faut juste formater le paramètre afin que javascript identifie s’il doit chercher une classe, un tag, ou un id

Type Codage
Class .nomClasse
Tag nomTag
Id #nomId
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le DOM (Document Object Model) : accéder aux éléments

<h1>Titre</h1>

<p class=‘paragraphe’>Lorem ipsum <input id=‘name’ name=‘name’ value=‘’> </p>

<p class=‘paragraphe’>Lorem ipsum2 <input id=‘name2’ name=‘name2’ value=‘’> </p>

let titre = [Link](‘h1’);

let paragraphes = [Link](‘.paragraphe’);

let input = [Link](‘name’); => let input = [Link](‘#name’);

let input2 = [Link](‘#name2’);

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Naviguer dans le Dom

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Naviguer dans le DOM

A partir d’un élément on peut accéder à ses enfants ou son parent

Avec parentNode, on peut accéder au parent de l’élément

Avec children, on peut accéder aux enfants de l’élément, les enfants sont dans une collection (tableau)
L’ÉCOLE DES EXPERTS
<script>
MÉTIERS DE
L’INFORMATIQUE
let h1 = [Link](‘h1’);

Naviguer dans le DOM // on récupére le parent

[Link] = ‘#ccc’;
<div> Titre

<h1 class=’titre’>Titre</h1> paragraphe 1

let paras =
</div> paragraphe 2
[Link](‘.paragraph’);
<div class=’paragraph’>
// on récupére tous les enfants
<p class=’p1’>paragraphe 1</p>
let enfants = [Link];
<p class=’p2’>paragraphe 2</p>
enfants[0].[Link] = ‘#ff0000’;
</div>
enfants[1].[Link] = ‘#00ff00’;

</script>
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Naviguer dans le DOM

A noter, que les styles modifiés sont les styles en ligne, et non ceux d’une classe.

A noter également que les styles sont accessibles en lower camel case

background-color => backgroundColor

text-transform => textTransform

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Modifier le contenu
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Modifier le contenu d’un élément

Méthode Définition
innerHTML récupère tous ce qu’il y a à l’INTERIEUR des balises HTML
outterHTML récupère tous ce qu’il y a à l’INTERIEUR des balises HTML et les balises HTML
textContent accède au contenu textuel (visible ou pas) de l’élément, les balises script ou style
sont renvoyées
innerText accède au contenu textuel (visible) de l’élément, les balises script ou style NE sont
PAS renvoyées

Attention a innerHTML, qui peut être une source d’injection XSS

 let h1 = [Link](‘h1’);

L’ÉCOLE DES EXPERTS

MÉTIERS DE
L’INFORMATIQUE

[Link]('inner:', [Link]);
Naviguer dans le DOM // inner: <span class="gras">Titre</span>

<h1 class='titre’>
[Link]('outer:', [Link]);
<span class='gras'>Titre</span>
// outer: <h1 class="titre"><span
</h1>
class="gras">Titre</span></h1>

[Link]('textContent:', [Link]);

// Titre

[Link]('innerText:', [Link]);

// Titre
 let h1 = [Link](‘h1’);

L’ÉCOLE DES EXPERTS

MÉTIERS DE
L’INFORMATIQUE

[Link]('inner:', [Link]);
Naviguer dans le DOM // inner: <span class="gras">Titre</span>

<h1 class='titre’>
[Link]('outer:', [Link]);
<span class='gras'>Titre</span>
// outer: <h1 class="titre"><span
</h1>
class="gras">Titre</span></h1>

[Link]('textContent:', [Link]);

// Titre

[Link]('innerText:', [Link]);

// Titre
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les attributs
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les attributs

La méthode hasAttributes() permet de vérifier si un élément a des attributs ou pas,

la méthode attributes, les récupère.

La méthode setAttribute(‘name’, ‘value’) permet d’ajouter un élément.

La méthode removeAttribute(‘name’) permet de supprimer un élément.

 h1 = [Link]('h1');

L’ÉCOLE DES EXPERTS

MÉTIERS DE
L’INFORMATIQUE

if ([Link]()) {
Les attributs let lists = [Link];

for(let i = 0; i < [Link]; i++) {

<h1
[Link]('name:'+lists[i].name+'
class='titre-demo’
value:'+lists[i].value)
name='titre’
}
alt='gros titre’
}
perso='mon attribut’>
// name:class value:titre-demo
Titre</h1>
// name:name value:titre

// name:alt value:gros titre

// name:perso value:mon attribut

 h1 = [Link]('h1');

L’ÉCOLE DES EXPERTS [Link]('newAttribut', 'newAttribut');

MÉTIERS DE
L’INFORMATIQUE

[Link]('perso');
Les attributs if ([Link]()) {

let lists = [Link];

<h1
for(let i = 0; i < [Link]; i++) {
class='titre-demo’
[Link]('name:'+lists[i].name+'
name='titre’
value:'+lists[i].value)
alt='gros titre’
}
perso='mon attribut’>
}
Titre</h1>
// name:class value:titre-demo

// name:name value:titre

// name:alt value:gros titre

// name:newAttribut value: newAttribut

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les classes
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les classes

On peut récupérer les classes d’un élément et les modifier, en ajouter et en supprimer.

[Link] => liste des classes

[Link](‘class’) => Ajoute une classe
[Link](‘class’) => Enlève une classe
[Link](‘class1’,’class2’) => Remplace class1 par class2
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les attributs

<style> <script>

.strong { font-weight: bold } h1 = [Link]('h1');

.italic { font-style: italic; } [Link]('bleu');

.bleu { color: #0000ff} [Link]('red');

.red { color:#ff0000} [Link]('italic','uppercase');

.uppercase { text-transform: uppercase } </script>

</style>

<body>

<h1 class='strong italic bleu' >Titre</h1>

</body>
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les styles (inline)

On peut également modifier les styles (inline) d’un élément.

[Link] = ‘#ccc’;
[Link] = ‘#ff0000’;

Les styles sont accessibles en lower camel case

background-color => backgroundColor
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Ajouter des éléments

dans le DOM
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’insertion

Javascript nous permet d’ajouter dynamiquement des éléments dans notre document.
Il faut procéder en 2 phases (voir 3), on va créer un noeud, (le remplir), puis l’insérer.

<body><p>Paragraphe initial</p></body>
<script>
// 1 creation d’un noeud vide
let newP1 = [Link](‘p’);
// remplissage de l’élément p
[Link] = ‘Premier paragraphe’;
// insertion dans le document au début
[Link](newP1);
</script>
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’insertion

// 2 creation d’un noeud vide

let newP2 = [Link](‘p’);

// remplissage de l’élément p
[Link] = ‘Dernier <strong>paragraphe</strong>’;

// insertion dans le document a la fin

[Link](newP2);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’insertion

// 3 creation d’un texte vide

let newText = [Link](‘Dernier texte’);

// insertion d’un text directement

[Link](newText);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’insertion

// 4 creation d’un texte vide

let newText2 = [Link](‘Dernier dernier texte append child’);

// insertion d’un text directement

[Link](newText2);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’insertion

Les méthodes 1 et 2 sont équivalentes, on créer un nouveau noeud de type p

On remplit ce noeud du texte (image, ...)
On attache ce noeud au document body
Avec la méthode 1 en premier
Avec la méthode 2 en dernier

La méthode 3 et 4 font la même chose, mais ne créer pas de nouvel élément,

elles insèrent directement du texte.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Déplacer des éléments

dans le DOM
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Déplacer

Javascript nous permet de déplacer des éléments à l’intérieur de le Dom

La méthode [Link](quoi, où) permet d’insérer un élément (quoi) avant (où).

La méthode [Link](quoi) permet d’insérer un élément (quoi) à la fin.

Démo HTML
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Cloner et remplacer
des éléments dans le DOM
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Clonage

Pour dupliquer un élément, il faut le cloner

La méthode [Link](true) permet de cloner un élément.

Elle accepte pour paramêtre true (avec ses enfants) ou false (seulement l’élément)
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Insertion à coté de

Pour insérer un élément « à coté » d’un autre élément, on peut utiliser la méthode :

[Link](‘où’, ‘quoi’)
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Insertion à coté de

Le paramètre où peut prendre pour valeur

Propriété Définition
beforebegin insère avant l’élément, juste avant <p> de p2
afterbegin insère dans l’élément, juste après <p> de p2, dans p2
beforeend insère dans l’élément, juste avant </p> de p2, dans p2
aftereend insère après l’élément, juste après </p> de p2
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Remplacement

Pour remplace un élément par un autre élément, on peut utiliser la méthode :

[Link](‘par quoi’, ‘qui’)

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Supprimer des éléments

dans le DOM
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Suppression

Pour supprimer, on peut utiliser la méthode :

let deletedElement = [Link](‘quoi’)

cette méthode renvoie l’élément supprimé

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Conclusion

Toutes les manipulations, se font au niveau de la Dom, elles sont effectives

visuellement, mais le code de la page html, n’a pas changé.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les délais
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

setInterval

Tout programme se stoppe lorsqu’il a exécuté tout son code. Si vous souhaitez qu’il continu à s’exécuter,
afin par exemple d’écouter des événements..., il faut lui spécifier de réaliser certaines opérations à un
intervalle défini.
Pour cela on utilise un minuteur, le minuteur prend en paramètres, un code a exécuté lorsque le délai est
dépassé, et un délai en milliseconde, il s’exécute a vie.

setInterval(() => {
[Link](«Retardée d’une seconde.»);
}, 1000)
// OU
setInterval(affiche, 1000);
function affiche() {
[Link](«Retardée d’une seconde.»);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

setTimeout

Il existe une autre fonction, qui fait exactement la même chose, mais qu’une seule fois

setTimeout(function, delay);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

clearInterval

Pour arrêter, exécution d’un intervalle donné, on utilise

let intervalId = setInterval(() => {

// do something
}, 1000);
let timerId = setInterval(() => {
// do something once
}, 1000);

clearInterval(intervalId);
clearInterval(timerId);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements

Un événement est une réaction (de javascript) à une action émise par l’utilisateur,
comme le click d’une souris, l’envoie d’un formulaire.

Le développeur ne gère pas l’événement, c’est javascript qui s’en charge, vous n’avez qu’à écouter
l’événement.

Pour cela il faut créer un écouteur «listener» sur l’élément à écouter, avec la méthode
[Link](‘event’, ‘callback’)

Cette méthode attend 2 paramètres

- l’événement à écouter,
- le nom de la fonction de gestion de cet événement
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements

Voici une partie des événements en javascript

click, keydown, mouseenter, mouseleave, scroll, submit, reset...

[Link]
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements

<form id=’subscribe’ action=’’ method=’post’>

<input type=’email’ name=’email’>
<button type=’submit’>Send</button>
</form>

<script>
const form = [Link](‘#subscribe’);
[Link](‘submit’,registerEmail);

function registerEmail(event) {
alert(‘form submit ’ + [Link]);
}
</script>
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements

Dans notre exemple ci-dessus, après l’alert, la page se recharge.

C’est simplement, qu’en plus d’écouter notre événement, la page continue son «comportement par
défaut», à savoir envoyer le formulaire.

Nous ne souhaitons pas de ce fonctionnement standard, pour cela, nous devons lui stipuler ne pas avoir
de «comportement par défaut»

[Link]();

A présent la page ne se recharge plus.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements

Il existe une autre méthode pour gérer les événements, les attributs html.
Ces méthodes sont dépréciées en «javascript pur», mais sachez qu’on les utilise en [Link].
Par exemple onclick, onsubmit, onchange ....

<form id=’subscribe’ action=’’ method=’post’ onsubmit=registerEmail(event)>

<input type=’email’ name=’email’>
<button type=’submit’>Send</button>
</form>

<script>
function registerEmail(event) {
[Link]();
alert(‘form submit ‘+[Link]);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements

De la même manière, on peut également supprimer un événement avec la méthode

[Link](‘event’, ‘callback’)
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les événements

Quoi que vous fassiez, écoutez ou pas, l’événement va se produire, c’est javascript qui gère.

Votre rôle, et d’interceptez le comportement par défaut d’un événement en plaçant un écouteur, de
stopper le comportement standard, et d’exécuter votre propre code.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’orienté objet
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’orienté objet

Dans cette partie, nous allons voir la programmation orientée objet.

La programmation orientée objet est une façon de concevoir un code autour du concept d’objets.
Un objet est une entité qui peut être vue comme indépendante et qui va contenir un ensemble de
propriétés (qui correspondent aux variables) et de méthodes (qui correspondent aux fonctions).

Ces objets vont pouvoir interagir entre eux.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’orienté objet

Nous pouvons créer un objet de 4 manières différentes :

- Objet littéral
- Constructeur Object()
- Une fonction de constructeur personnalisée
- La méthode create()
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Objet littéral

let user = { Noter qu’a l’intérieur de l’objet, pour accéder à ses

name: [‘jerome’, ‘borg’], propriétés il faut utiliser le mot clé «this» (moi-même),
age:49, à l’extérieur de l’objet ce n’est pas nécessaire puisque on
email: ‘contact@[Link]’, utilise le nom de l’objet
[Link]
hello: function() {
alert(‘Hello, my name is De la même manière, pour appeler la méthode hello, on
‘+[Link][0] + ‘ ‘ + [Link][1] + ‘, i am ‘ utilise le nom de l’objet
+ [Link]+ ‘ years old.’); [Link]()
}
}; Nous parlons d’objet littéral, car nous avons littéralement
[Link](typeof user); défini toutes ses méthodes et propriétés a la création.
[Link]();
alert(‘email: ‘ + [Link]);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Objet littéral

[Link] = ‘jerome@[Link]’; On utilisera le nom de l’objet suivi de «.» suivi de sa

alert(‘email: ‘ + [Link]); propriété ou méthode pour y accéder ainsi que pour
modifier des propriétés
[Link] = ‘Ford’;
[Link] = function() { On peut également, DE l’extérieur de l’objet, créer de
alert([Link][0] + ‘ drive a ‘ + nouvelles méthodes et propriétés
[Link]);
}
[Link]();
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Une fonction de constructeur personnalisée

Tous ce que nous avons vu sur la manipulation des objets littéraux s’appliquent à tous les objets.

Si nous devons créer dynamiquement des objets, il serait plus pratique de créer un modèle à partir duquel on pourrait
créer dynamiquement des objets.

On va utiliser une fonction constructeur

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Une fonction de constructeur personnalisée

function User(name, age, email) { Reprenons notre exemple précédent, mais cette fois
[Link] = name,
[Link] = age, nous allons créer plusieurs utilisateurs, pour ce faire on
[Link] = email, va utiliser une fonction constructeur «User(...)», a
[Link] = function() { laquelle on va passer des paramètres afin de l’initialiser
alert(‘Hello, my name is ‘+[Link][0] Noter que cette fonction est écrite en Pascal Case
+ ‘ ‘ + [Link][1] + ‘, i am ‘ + [Link]+ ‘
years old.’);
} Pour créer un nouvel objet User que l’on va stocker dans
};
jerome, on utilise le mot clé «new». jerome et paul sont 2
let jerome = new User([‘jerome’, ‘borg’], 49, instances de User.
‘contact@[Link]’);
let paul = new User([‘paul’, ‘auchon’], 39, La création d’une nouvelle instance se nomme
‘paul@[Link]’); l’instanciation.
[Link]([Link]());
[Link]([Link]());
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Une fonction de constructeur personnalisée

[Link] = ‘Ford’; On peut également créer, DE l’extérieur de l’objet, de

[Link] = function () {
alert([Link][0] + ‘ drive a ‘ + nouvelles méthodes et propriétés, ces méthodes et
[Link]); objets seront propres à l’objet et non à la fonction
}
[Link](); constructeur.

[Link] = ‘Giant’;
[Link] = function () { Ici on a défini une propriété et une méthode différente
alert([Link][0] + ‘ ride a ‘ + pour nos instances ‘jerome’ et ‘paul’
[Link]);
}
[Link]();
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Constructeur Object()

Dans les langages orientés objet utilisant des prototypes comme le JavaScript, tout est objet et il n’existe pas de
classes et l’héritage va se faire au moyen de prototypes.

Cette propriété prototype possède une valeur qui est elle-même un objet. On parlera donc de « prototype objet » ou
« d’objet prototype » pour parler de la propriété prototype.

Par défaut, la propriété prototype d’un constructeur ne contient que deux propriétés : une propriété constructor qui
renvoie vers le constructeur contenant le prototype et une propriété __proto__ qui contient elle-même de
nombreuses propriétés et méthodes.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Constructeur Object()

function User(name, age, email) { Nous avons défini la fonction de constructeur, puis nous
[Link] = name,
[Link] = age, ajoutons au prototype, la propriété size et la méthode
}; hello. De cette manière tous les objets créés auront
[Link] = 172;
[Link] = function() { accès aux méthodes et propriétés de prototype (qui est
alert(‘Hello, my name is ‘ + [Link][0] + une propriété).
‘ ‘ + [Link][1] + ‘, i am ‘ + [Link] + ‘
years old, and I am ‘ + [Link]/100 + ‘m
tall’); D’une manière générale, on définit les propriétés dans le
}
constructeur, et les méthodes dans le prototype du
let jerome = new User([‘jerome’, ‘borg’], 49); constructeur.
let paul = new User([‘paul’, ‘auchon’], 39);
[Link]([Link]());
[Link]([Link]());

[Link] = 185;
[Link]([Link]());
[Link](paul);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Hiérarchie et héritage
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Hiérarchie et héritage en JavaScript

Souvent, nous allons devoir créer des objets relativement proche (d’un point de vue structure), plutôt
que de redéfinir systématiquement le constructeur (évitons le D.R.Y., Don’t Repeat Yourself), il va être
plus judicieux de créer un constructeur de base qui va contenir les propriétés et méthodes communes à
tous nos objets puis des constructeurs plus spécialisés qui vont hériter de ce premier constructeur.

Pour implémenter un héritage, il faut procéder en 3 étapes :

1 - Création du constructeur «Parent»
2 - Création du constructeur «Enfant» qui va faire appel au «Parent»
3 - On modifie la propriété «_proto_», de la propriété «prototype» de l’enfant afin qu’elle soit égale au
parent.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Hiérarchie et héritage en JavaScript

Cela devrait être plus simple avec un exemple, nous avons une entreprise, qui a des employés, un comité
de direction (ce sont aussi des employé), et un pdg qui fait partie du comité de direction.
Chaque employé a un nom.
Le comité de direction a des RTT.
Le pdg a une prime annuelle.

En résumé,
employé : nom
cd : nom + RTT
pdg : nom + RTT + prime

Cet exemple est volontairement simpliste, c’est simplement pour mettre en avant l’héritage de propriété
et de méthode Démo HTML
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Notions avancées
sur les fonctions
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Notions avancées sur les fonctions

Il existe 4 méthodes pour créer une fonction

- la déclaration de fonction
- l’expression de fonction
- la fonction fléchée
- la syntaxe new Function
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Notions avancées sur les fonctions

- La déclaration de fonction

C’est ce que nous avons utilisé jusqu’a présent

function getName(name) {
alert(name);
}
getName(‘jerome’);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Notions avancées sur les fonctions

- L’expression de fonction
On créer une fonction que l’on stocke dans une variable, pour l’utiliser on appelle la variable avec ()

let getName = function(name) {

alert(name);
}
getName(‘jerome’);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Notions avancées sur les fonctions

- L’expression de fonction
La plupart du temps, il est plus pratique d’utiliser une déclaration de fonction plutôt qu’une expression
de fonction. Car les fonctions déclarées sont immédiatement disponibles, alors que les expressions non.

getName(‘jerome’); // ceci fonctionne

function getName(name) {
alert(name);
}

getName2(‘jerome’);// ceci NE fonctionne PAS

let getName2 = function(name) {
alert(name);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Notions avancées sur les fonctions

- les fonctions fléchées

Ce sont des fonctions qui utilisent une syntaxe très courtes =>

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

let sum2 = (a,b) => a + b;

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le paramètre du reste
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le paramètre du reste

Dans certains cas, on a besoin d’avoir un nombre variable de paramètre dans une fonction. Pour se faire
nous allons nous servir l’opérateur ... .
let a = 1; let b = 1; let c = 1; let d = 1;
function sum(...numbers) {
let total=0;
for (let number of numbers) {
total += number;
}
return total;
}
[Link](sum(a)); //1
[Link](sum(a, b));//2
[Link](sum(a, b, c));//3
[Link](sum(a, b, c, d));//4
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Le paramètre du reste

Si l’on a «des paramètres fixes», ils devront être passés en premiers

let a = 1; let b = 1; let c = 1; let d = 1;
function sum(name, date, ...numbers) {
let total=0;
for (let number of numbers) {
total += number;
}
return ‘facture:‘ + name+ ‘ date: ‘ + date+ ‘ total: ‘+total;
}
[Link](sum(‘jean’,’2022-01-01’, a)); //facture:jean date: 2022-01-01 total: 1
[Link](sum(‘paul’, ‘2022-02-01’, a, b));//facture:paul date: 2022-02-01 total: 2
[Link](sum(‘lou’, ‘2022-02-01’, a, b, c));//facture:lou date: 2022-02-01 total: 3
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les closures
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les closures

On appelle closure, «une fonction interne qui va pouvoir continuer d’accéder à des variables définies
dans la fonction externe à laquelle elle appartient même après que cette fonction externe ait été
exécutée.»

Vous n’avez rien compris, regardons ceci en détail.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les closures

Pour bien comprendre toute la puissance et l’intérêt des closures, il va falloir avant tout bien comprendre
la portée des variables et détailler le fonctionnement interne des fonctions.

Dans la première partie sur les fonctions, nous avons vu qu’une fonction pouvait accéder aux variables
définies dans la fonction en soi ainsi qu’à celles définies dans le contexte global.

En javascript, une fonction peut contenir une ou des fonction(s). La fonction «conteneur» est appelée
fonction «externe», la ou les fonctions contenue(s) sont appelées fonction «interne»

La fonction interne peut accéder aux variables de la fonction externe.

La fonction externe NE peut PAS accéder aux variables de la fonction interne.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les closures

let prenom = ‘Pierre’;

//bio() a accès à let prenom (et à let age) mais pas à Le fait de placer des variables dans une
let hobbie
fonction interne, permet de les sécuriser en
function bio() { empêchant leur accès depuis un contexte
let age = 29;
//hobbies() a accès à let prenom et à let age (et à externe.
let hobbie)
function hobbies() {
let hobbie = ‘Trail’;
return prenom + ‘, ‘ + age + ‘ ans. Je fais du ‘
+ hobbie;
}
return hobbies();
}

[Link](bio());
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les closures

function compteur() {
let passage = 0; On créer une closure, qui stocke une variable le

return function () { nombre d’appel.

return passage++; Cette closure appelle une fonction anonyme qui
};
} incrémente la variable externe «passage»

let count = compteur();

[Link](count()); //0
[Link](count()); //1
[Link](count()); //2
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

L’asynchrone
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Synchrone

En informatique, on dit que deux opérations sont synchrones, lorsque la seconde attend que la première
soit finie pour démarrer;

function un() {
setTimeout(function () {
}, 5000);
[Link](‘end un’);
}

function deux() {
[Link](‘end deux’);
}
un(); // end un
deux();// end deux
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Synchrone

Le javascript est un langage synchrone, on voit bien dans notre exemple que malgré le temps

d’exécution de la fonction «un», la fonction «deux» s’exécute après.

En résumé, on ne peut faire qu’une chose à la fois.

Dans certains cas, nous souhaiterions, pouvoir débuter une autre action, sans attendre la fin de l’action

en cours, ce principe se nomme l’asynchrone.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Asynchrone

L’idée principale de l’asynchrone est que le reste du script puisse continuer à s’exécuter pendant qu’une

certaine opération plus longue ou demandant une réponse / valeur est en cours. Cela permet un

affichage plus rapide des pages et en une meilleure expérience utilisateur.

Javascript possède nativement des fonctions asynchrones

setTimeout(function () {

[Link](‘un’)

}, 5000);

[Link](‘deux’);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Asynchrone

Javascript propose aussi plusieurs solutions dont les fonctions de rappel «callback».

C’est la méthode la plus «vieille» mais toujours utilisée par beaucoup de modules JavaScript.

Le principe de la callback est de la passer en paramètre d’une fonction asynchrone. Une fois que la

fonction asynchrone a fini sa tâche, elle va appeler notre fonction callback en lui passant un résultat.

Ainsi, le code que nous mettons dans notre fonction callback sera exécutée de manière asynchrone.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Asynchrone

function displayer(sum) {
setTimeout(function () {
[Link](‘sum:’+sum)
}, 5000);
}

function calculator(num1, num2, callback) {

let sum = num1 + num2;
callback(sum);
}

calculator(5, 5, displayer);
[Link](‘suite’);

Dans cet exemple, on créer une fonction de calcul, qui fait appel à une fonction de callback pour
l’affichage.
On voit bien que le mot «suite» apparait avant le résultat de la somme.
Ne tenez pas compte du setTimeout, cette fonction est présente pour vous montrer qu’un certain temps
s’est écoulé.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les promesses
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les promesses

En 2015, cependant, JavaScript a intégré un nouvel outil dont l’unique but est la génération et la gestion
du code asynchrone : les promesses avec l’objet constructeur Promise. C’est à ce jour l’outil le plus
récent et le plus puissant fourni par le JavaScript nous permettant d’utiliser l’asynchrone dans nos
scripts.

Une « promesse » est donc un objet représentant l’état d’une opération asynchrone. Comme dans la vie
réelle, une promesse peut être soit en cours (on a promis de faire quelque chose mais on ne l’a pas
encore fait), soit honorée (on a bien fait la chose qu’on avait promis), soit rompue (on ne fera pas ce
qu’on avait promis et on a prévenu qu’on ne le fera pas).
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les promesses

Plutôt que d’attacher des fonctions de rappel à nos fonctions pour générer des comportements
asynchrones, nous allons créer ou utiliser des fonctions qui vont renvoyer des promesses et allons
attacher des fonctions de rappel aux promesses.

Les avantages des promesses par rapport à l’utilisation de simples fonctions de rappel pour gérer des
opérations asynchrones vont être notamment la possibilité de chainer les opérations asynchrones, la
garantie que les opérations vont se dérouler dans l’ordre voulu et une gestion des erreurs simplifiées.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les promesses

Une promesse en JavaScript est un objet qui représente l’état d’une opération asynchrone. Une
opération asynchrone peut être dans l’un des états suivants :

- Opération en cours (non terminée) ;

- Opération terminée avec succès (promesse résolue) ;
- Opération terminée ou plus exactement stoppée après un échec (promesse rejetée).
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les promesses

Nous allons pouvoir créer nos propres promesses, mais la majorité des opérations asynchrones qu’on va
vouloir réaliser en JavaScript vont déjà être pré-codées et fournies par des API.

Pour créer une promesse, on va utiliser la syntaxe new Promise() qui fait donc appel au constructeur
Promise.

Ce constructeur va prendre en argument une fonction qui va elle-même prendre deux autres fonctions
en arguments. La première sera appelée si la tâche asynchrone est effectuée avec succès tandis que la
seconde sera appelée si l’opération échoue.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les promesses

const promesse = new Promise((resolve, reject) => {

// tache asynchrone à réaliser
/* Appel de resolve() si la promesse est résolue
ou
Appel de reject() si la promesse est rejetée*/
});

Si la promesse est tenue, la fonction resolve() sera appelée tandis que si la promesse est rompue la
fonction reject() va être appelée. Ces deux fonctions sont des fonctions prédéfinies en JavaScript et
nous n’avons donc pas besoin de les déclarer. Nous allons pouvoir passer un résultat en argument pour
chacune d’entre elles.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les promesses

function testPromesse() {
return new Promise((resolve, reject) => {
[Link](‘‘C’est fait’’);
// réussir une fois sur deux
if ([Link]() > .5) {
resolve(‘‘Réussite’’);
} else {
reject(‘‘Échec’’);
}
})
}
function resolveFunction(msg) {
[Link](msg);
}
function rejectFunction(msg) {
[Link](msg);
}

const promesse = testPromesse();

[Link](resolveFunction, rejectFunction);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Async Await
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Async et Await

Le mot clef await est uniquement valide au sein de fonctions asynchrones définies avec async.
Il permet d’interrompre l’exécution d’une fonction asynchrone tant qu’une promesse n’est pas résolue ou
rejetée. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Async et Await

async function test() {

const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve(‘Ok !’), 2000)
});

try {
let result = await promise; //Attend que la promesse soit résolue ou rejetée
[Link](result);
} catch (error) {
[Link](error);
}
}
test(); // Ok ! DEMO HTML
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les cookies
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les cookies

Un cookie est un petit fichier qui ne contient généralement qu’une seule donnée et qui va être stocké
directement dans le navigateur d’un utilisateur.

Les cookies vont nous permettre d’enregistrer des informations à propos de l’utilisateur comme un
choix, par exemple : « j’accepte les cookies ».

On peut stocker plusieurs données dans un même cookie, le cookie peut avoir une taille maximale de
4000 octets.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les cookies

Pour créer un cookie, on utilise l’objet [Link]

[Link] = ‘darkmode=true’;

On peut spécifier des options, comme l’accessibilité, généralement, le cookie est valable pour tout le site
[Link] = ‘darkmode=true; path=/’;

Mais on peut le restreindre à un dossier

[Link] = ‘darkmode=true; path=/formations’;
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les cookies

On peut également spécifier la durée de vie du cookie en milliseconde, dépassé cette durée, il sera
détruit, par exemple pour 1 jour

let expiration = new Date([Link]() + 24 * 60 * 60);//24h * 60m * 60s => 1j

expiration = [Link]();
[Link] = ‘darkmode=true; path=/ ; expires=’ + expiration;
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Les cookies

Pour modifier un cookie, il suffit de le réécrire

[Link] = ‘darkmode=false’;

Pour supprimer un cookie, il faut le réécrire sans valeur avec une date d’expiration passée
[Link] = ‘darkmode=; expires=Thu, 01 Jan 1970 00:00:00 UTC’;

Pour lire les cookies

[Link]([Link]);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Web storage
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Web storage

L’Api Web Storage, permet de stocker des données sous forme de clé=valeur

Pour ce faire, on va utiliser les objets localstorage et sessionstorage de l’objet window.

La différence entre localstorage et sessionstorage, est qu’avec sessionstorage, les données seront
supprimées a la fermeture du navigateur et non avec localstorage.

Les objets localstorage et sessionstorage vont nous fournir les propriétés et méthodes suivantes :
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Web storage

Les objets localstorage et sessionstorage vont nous fournir les propriétés et méthodes suivantes :

Function Définition
setItem() permet de stocker une paire clef/valeur. Prend une clef et une valeur en arguments
getItem() permet d’obtenir une valeur liée à une clef. Prend une clef en argument
removeItem() permet de supprimer une paire clef/valeur. Prend une clef en argument
clear() permet de supprimer tous les objets de stockage. Ne prend pas d’argument
key() permet d’obtenir une clef située à une certaine position. Prend un index en
argument
length permet d’obtenir le nombre de données stockées
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Web storage

let cookies [Link](cookies’);

[Link](‘cookies’, true);

[Link](‘cookies’);
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Db Storage
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

DB storage

L’API IndexedDB est une API de stockage de données côté client qui va être utilisée pour stocker des
quantités importantes de données structurées.

IndexedDB est un système de gestion de bases de données transactionnel. On peut le comparer à

d’autres systèmes de gestion de base de données basés que le SQL mais, à la différence de ces derniers,
IndexedDB est orienté objet.

Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, et ceci afin de ne pas
bloquer le reste de la page.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

DB storage

En pratique, pour utiliser IndexedDB, on suivra le schéma suivant :

- On ouvre une connexion à la base de données

- On crée un objet de stockage ;
- On initie une transaction ;
- On effectue des requêtes ;
- On crée des gestionnaires d’évènements liés au résultat de nos requêtes.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

DB storage

Ouverture de connexion
C’est assez mécanique, on ouvre une connexion, et créer trois gestionnaires (maj, succès et erreur),

Objet de stockage
Les objets de stockage vont stocker les données, ils peuvent être considérés comme des tables d’un
SGBD.

La création ou la modification des objets de stockage va toujours se faire au sein du gestionnaire

d’évènements upgradeneeded.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

DB storage

Débuter une transaction

Une transaction est un ensemble d’opérations qui doivent toutes aboutir. Si une des opérations échoues,
aucune des opérations ne sera réalisée, la transaction aura échouée. C’est un principe de base sur les
bases de données.
Pour démarrer une transaction, on utilise la méthode «transaction», qui va prendre 2 paramètres :
- la liste des objets de stockage (obligatoire)
- le type de transaction (facultatif), readonly, readwrite, versionchange
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

DB storage

Requêter
Avec IndexDB, on peut ajouter, modifier, supprimer des données de notre base de données.
Il faut d’abord créer une transaction (1), récupérer l’objet de stockage (2), requêter (3).
IDBObjectStore, nous fournit les méthodes suivantes :
- put() et add() pour modifier et ajouter des données
- get() et getAll() pour récupérer les données
- delete() et clear() pour supprimer des données

Démo HTML
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Json
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Json

Le json (Javascript Object Notation) est une structure de fichier qui permet de «sérialiser les objets en
tableaux». Cette structure est beaucoup utilisée, y compris dans d’autres langages de programmation.
On s’en sert pour échanger des données.

{ {
‘name’: ‘borg’, ‘name’: ‘dupont’,
‘firstname’: ’jerome’, ‘firstname’: ’michel’,
‘address’: { ‘address’: {
‘street1’: ‘rue ..’, ‘street1’: ‘rue ..’,
‘zip’: 37000, ‘zip’: 67000,
‘city’: ‘Tours’, ‘city’: ‘Somewhere’,
}, },
‘mails’: [ ‘mails’: [
‘mail1@[Link]’, ‘mail3@[Link]’,
‘mail2@[Link]’ ‘mail4@[Link]’
] ]
}, }
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Json

L’objet javascript a 2 méthodes pour interpréter du json

- parse() va analyser un json et le transformer en valeur ou objet Javascript
- stringify() convertit une valeur ou objet Javascript et en Json
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Ajax
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Ajax

Ajax «Asynchronous JavaScript and XML» correspond à un ensemble de techniques utilisant des
technologies diverses pour envoyer et récupérer des données vers et depuis un serveur de façon
asynchrone, c’est-à-dire sans avoir à recharger la page.

L’AJAX est aujourd’hui un terme générique utilisé pour désigner toute technique côté client (côté
navigateur) permettant d’envoyer et de récupérer des données depuis un serveur et de mettre à jour
dynamiquement le DOM sans nécessiter l’actualisation complète de la page.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Ajax

L’objet XMLHttpRequest a longtemps été, et est toujours dans une certaine mesure, au coeur de l’AJAX.
C’est cet objet qui permet le dialogue asynchrone (c’est-à-dire l’échange de données en arrière-plan)
avec le serveur.

Cet objet est cependant aujourd’hui délaissé au profit de l’API et de la méthode fetch() par la plupart
des applications modernes car cette dernière est jugée plus puissante et plus intuitive à utiliser.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

L'API Fetch est une interface moderne qui vous permet de faire des requêtes HTTP aux serveurs à partir
de navigateurs Web.

L'API Fetch peut effectuer toutes les tâches comme le fait l’objet XMLHttpRequest (XHR).

De plus, l'API Fetch est beaucoup plus simple et plus propre.

Il utilise Promise pour fournir des fonctionnalités plus flexibles pour effectuer des requêtes aux serveurs
à partir des navigateurs Web.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Envoyer une demande

fetch() ne nécessite qu'un seul paramètre qui est l'URL de la ressource que vous souhaitez récupérer :
let response = fetch(url);
fetch() renvoie une Promesse afin que vous puissiez utiliser les méthodes then() et catch() :

fetch(url)
.then(response => {
// handle the response
})
.catch(error => {
// handle the error
});
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Envoyer une demande

Lorsque la demande est terminée, la ressource est disponible.

À ce moment, la promesse se résoudra en un objet Response.

L’objet Response est l'encapsuleur d'API pour la ressource récupérée.

Response a un certain nombre de propriétés et de méthodes utiles pour inspecter la réponse.

L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Lire la réponse

Si le contenu de la réponse est au format texte brut, vous pouvez utiliser la méthode text().
text() renvoie une Promise qui se résout avec le contenu complet de la ressource récupérée :

fetch('/[Link]')
.then(response => [Link]())
.then(data => [Link](data));
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Lire la réponse

En pratique, on utilise souvent le async/await avec fetch() comme celle-ci :

async function fetchText() {

let response = await fetch('/[Link]');
let data = await [Link]();
[Link](data);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Lire la réponse

En pratique, on utilise souvent le async/await avec fetch() comme celle-ci, et une réponse en json :

async function fetchText() {

let response = await fetch('/[Link]');
let data = await [Link]();
[Link](data);
}
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Gestion des codes d'état de la réponse

L’objet Response fournit le code d'état et le texte d'état via les propriétés status et statusText.
Lorsqu'une requête aboutit, le code d'état est 200 et le texte d'état est OK :

async function fetchText() {

let response = await fetch('/[Link]');
[Link]([Link]); // 200
[Link]([Link]); // OK
if ([Link] === 200) {
let data = await [Link](); // handle data
}
}
fetchText();
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Gestion des codes d'état de la réponse

Si la ressource n’existe pas, c’est-à-dire que l’url n’existe pas le code de réponse sera 404.
Si la ressource génère une erreur sur le serveur, la réponse sera 500.
Si la ressource est redirigé, la réponse sera dans la famille des 300 à 309

[Link]
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Les options de fetch

fetch() accepte un deuxième argument, qui est un objet. On va pouvoir définir les options suivantes :

Option Définition
headers les en-têtes qu’on souhaite ajouter à notre requête
body un corps qu’on souhaite ajouter à notre requête
un référant. Les valeurs possibles sont «about:client» (valeur par défaut), «» pour une
referrer absence de référant, ou une URL
referrerPolicy spécifie la valeur de l’en-tête HTTP du référent. Les valeurs possibles sont no-referrer-
when-downgrade (défaut), no-referrer, origin, origin-when-cross-origin et unsafe-url
mode spécifie le mode qu’on souhaite utiliser pour la requête. Les valeurs possibles sont
cors (défaut), no-cors et same-origin
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Les options de fetch

Option Définition
credentials les informations d’identification qu’on souhaite utiliser pour la demande. Les valeurs
possibles sont same-origin (défaut), omit et include
cache le mode de cache qu’on souhaite utiliser pour la requête. Les valeurs possibles sont
default (défaut), no-store, reload, no-cache, force-cache et only-if-cached
redirect le mode de redirection à utiliser. Valeurs possibles : follow (défaut), manual, error
integrity contient la valeur d’intégrité de la sous-ressource de la demande. Valeurs possibles :
«» (défaut) ou un hash
keepalive permet à une requête de survivre à la page. Valeurs possibles : false (défaut) et true
signal une instance d‘un objet AbortSignal qui nous permet de communiquer avec une
requête fetch() et de l’abandonner.
L’ÉCOLE DES EXPERTS
MÉTIERS DE
L’INFORMATIQUE

Fetch

Un exemple d’utilisation de fetch en Get

const headers = {
‘Accept’: ‘application/json’
}

const apiCall = fetch(«[Link] {

method: ‘GET’,
headers: headers,
})
.then(response => [Link]())
.then(response => {
[Link](‘the king citation: ‘ + [Link]);
})
.catch(error => [Link](‘fetch error’));