Apprendre à développer avec JavaScript · Table des matières 11 Partie 6 Géolocalisation,...

Editions ENI

Apprendre à développer avec JavaScript

(3e édition)

CollectionRessources Informatiques

Table des matières

1Table des matières

Partie 1Présentation de JavaScript et programmation à partir d’algorithmes

Chapitre 1

Présentation du langage JavaScript

1. Définition et rapide historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2. Prérequis pour un apprentissage aisé du langage . . . . . . . . . . . . . . . . 21

3. Outillage nécessaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4. Positionnement du JavaScript face à d’autres technologies de développement web (HTML, CSS, PHP…) . . . . . . . . . . . . . . . . . . 23

Chapitre 2

Développement à partir d’algorithmes

1. Présentation de la notion d'algorithme . . . . . . . . . . . . . . . . . . . . . . . . 25

2. Notion de variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.1 Présentation des notions de variable et de type . . . . . . . . . . . . . 272.2 Types de base et opérations associées . . . . . . . . . . . . . . . . . . . . . 282.3 Intérêt des types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.4 Utilisation des variables dans des expressions . . . . . . . . . . . . . . 312.5 Tableau récapitulatif des opérateurs . . . . . . . . . . . . . . . . . . . . . . 31

3. Manipulation des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.1 Nommage des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.2 Affectation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Les éléments à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr

Saisissez la référence ENI de l'ouvrage RI3JASAP dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

2avec JavaScript

Apprendre à développer

3.3 Exercice n°1 : Inversion du contenu de deux variables mémoire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.4 Affichage des résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.5 Exercice n°2 : Surfaces de cercles . . . . . . . . . . . . . . . . . . . . . . . . . 393.6 Saisie au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.7 Exercice n°3 : Surface et volume d'une sphère . . . . . . . . . . . . . . 41

4. Fonctions prédéfinies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.1 Exercice n°4 : Affichage de la longueur d'un nom . . . . . . . . . . . 424.2 Exercice n°5 : Détermination des initiales . . . . . . . . . . . . . . . . . 43

5. Traitements conditionnés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465.1 Exercice n°6 : Polynôme du second degré . . . . . . . . . . . . . . . . . . 485.2 Exercice n°7 : Libellé du mois en clair . . . . . . . . . . . . . . . . . . . . . 505.3 Exercice n°8 : Libellé du mois en clair (Suivant ... Finsuivant) . 53

6. Structures itératives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.1 Principe des itérations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.2 Structures itératives de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.3 Exercice n°9 : Moyenne de 10 nombres. . . . . . . . . . . . . . . . . . . . 576.4 Exercice n°10 : Moyenne d'une série de n nombres . . . . . . . . . . 586.5 Exercice n°11 : Plus Grand Commun Diviseur

par la méthode des divisions successives. . . . . . . . . . . . . . . . . . . 616.6 Structure itérative Pour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.7 Exercice n°12 : Calcul de la moyenne de 10 nombres. . . . . . . . . 656.8 Exercice n°13 : Décompte du nombre

de voyelles dans un mot. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

7. Tableaux à dimension unique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687.1 Exercice n°14 : Décompte des nombres pairs dans un tableau . 69

8. Tableaux à dimensions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718.1 Exercice n°15 : Mini-tableur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

3Table des matières

9. Procédures, fonctions et passage de paramètres . . . . . . . . . . . . . . . . . 739.1 Les objectifs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739.2 Les procédures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.3 Exercice n°16 : Appel d'une procédure

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.4 Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779.5 Exercice n°17 : Appel d'une fonction

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Partie 2Bien débuter avec JavaScript

Chapitre 3

Bases du langage JavaScript

1. Méthodologie d'apprentissage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

2. Variables (déclaration et typage) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 822.1 Exercice n°2 : Surfaces de cercles . . . . . . . . . . . . . . . . . . . . . . . . . 822.2 Exercice n°3 : Surface et volume d'une sphère . . . . . . . . . . . . . . 892.3 Exercice n°4 : Nombre de lettres d'un mot . . . . . . . . . . . . . . . . . 922.4 Exercice n°5 : Détermination des initiales . . . . . . . . . . . . . . . . . 92

Chapitre 4

Conditionnement des traitements

1. Présentation de la syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

2. Exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 972.1 Exercice n°6 : Polynôme du second degré . . . . . . . . . . . . . . . . . . 972.2 Exercice n°8 : Impression du libellé d'un mois . . . . . . . . . . . . . . 98

4avec JavaScript

Apprendre à développer

Chapitre 5

Traitements itératifs (boucles)

1. Présentation de la syntaxe des boucles . . . . . . . . . . . . . . . . . . . . . . . 101

2. Boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.2 Exercice n°9 : Moyenne de 10 nombres saisis au clavier . . . . . 1032.3 Exercice n°10 : Moyenne d'une série

de n nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . 104

3. Boucle do while. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1053.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1053.2 Exercice n°11 : Moyenne d'une série

de n nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . 106

4. Boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074.2 Exercice n°12 : Moyenne d'une série

de 10 nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . 1084.3 Exercice n°13 : Décompte du nombre

de voyelles dans un mot. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Chapitre 6

Tableaux

1. Tableaux à dimension unique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111.2 Exercice n°14 : Décompte

des nombres pairs dans un tableau . . . . . . . . . . . . . . . . . . . . . . 113

2. Tableaux à dimensions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.2 Exercice n°15 : Mini-tableur. . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

5Table des matières

Chapitre 7

Procédures et fonctions

1. Les procédures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1191.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1201.2 Exercice n°16 : Appel d'une procédure

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

2. Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1222.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1222.2 Exercice n°17 : Appel d'une fonction

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Partie 3Approche POO sous JavaScript

Chapitre 8

Approche "objet" en JavaScript

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

2. Programmation orientée objet au travers d’exemples . . . . . . . . . . . 1262.1 Séquence 1 : Déclaration des objets

JavaScript en méthode "Inline" . . . . . . . . . . . . . . . . . . . . . . . . . 1262.2 Séquence 2 : Création des objets JavaScript par constructeur. 1272.3 Séquence 3 : Variables privées dans une instance d'objet . . . . 1292.4 Séquence 4 : Passage de paramètre(s) à un constructeur . . . . . 1302.5 Séquence 5 : Non-partage des méthodes

par les instances d'objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1312.6 Séquence 6 : Notion de prototype . . . . . . . . . . . . . . . . . . . . . . . 1322.7 Séquence 7 : Surcharge d'une méthode . . . . . . . . . . . . . . . . . . . 1342.8 Séquence 8 : Extension d'un prototype. . . . . . . . . . . . . . . . . . . 1352.9 Séquence 9 : Mécanisme de l'héritage . . . . . . . . . . . . . . . . . . . . 1362.10 Séquence 10 : Limite de l'héritage de la séquence n°9 . . . . . . . 1382.11 Séquence 11 : Une seconde limite à notre héritage . . . . . . . . . 139

6avec JavaScript

Apprendre à développer

Chapitre 9

Objets de base de JavaScript

1. Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

2. Les objets de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.1 Objet Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.2 Objet Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.3 Objet Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1512.4 Objet window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1542.5 Objet navigator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1642.6 Objet String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Chapitre 10

Les nouveautés d’EcmaScript 6

1. Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

2. Apports au niveau de la Programmation Orientée Objet . . . . . . . . 1742.1 Notion de prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1742.2 Surcharge d’une méthode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1772.3 Extension de prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1802.4 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1832.5 Premier exemple POO en EcmaScript 6 . . . . . . . . . . . . . . . . . . 1882.6 Héritage en EcmaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1912.7 Méthodes getter, setter et static en EcmaScript 6 . . . . . . . . . . 194

3. Fonctions fléchées (arrow functions) . . . . . . . . . . . . . . . . . . . . . . . . 1993.1 Avantages des fonctions fléchées . . . . . . . . . . . . . . . . . . . . . . . 1993.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

4. Structures Map, Set et boucle for of . . . . . . . . . . . . . . . . . . . . . . . . . 2054.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2054.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

5. Portée des variables (var ou let) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2155.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2155.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

7Table des matières

6. Promesses (promise) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2196.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2196.2 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

7. Déstructuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2247.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2247.2 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Partie 4Gestion de formulaire et modèle DOM

Chapitre 11

Saisie de données via des formulaires

1. Pilotage des contrôles de saisie via JavaScript. . . . . . . . . . . . . . . . . . 2291.1 Contrôle de saisie sur un champ texte . . . . . . . . . . . . . . . . . . . 2291.2 Contrôle de numéricité d'une saisie dans un champ texte . . . 2361.3 Contrôle de caractères alphabétiques d'une saisie

dans un champ texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2401.4 Contrôle de caractères alphabétiques et numériques

d'une saisie dans un champ texte . . . . . . . . . . . . . . . . . . . . . . . 2401.5 Contrôle de longueur d'une saisie dans un champ texte . . . . . 2411.6 Contrôle de saisie sur une adresse e-mail . . . . . . . . . . . . . . . . . 2421.7 Contrôle d'un choix dans une liste déroulante

(version simplifiée) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2431.8 Contrôle d'un choix dans une liste déroulante

(version étendue) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2461.9 Contrôle d'un choix par bouton radio . . . . . . . . . . . . . . . . . . . . 2491.10 Contrôle d'un choix par case à cocher . . . . . . . . . . . . . . . . . . . . 253

8avec JavaScript

Apprendre à développer

Chapitre 12

Modèle DOM

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2571.1 Définition de DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2571.2 Définition de l'arborescence. . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

2. Apprentissage du modèle DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.1 Script "Hello World!" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.2 Différence entre write et writeln. . . . . . . . . . . . . . . . . . . . . . . . 2622.3 Gestion des liens hypertextes . . . . . . . . . . . . . . . . . . . . . . . . . . 2642.4 Gestion des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2652.5 Gestion des formulaires et de leurs balises . . . . . . . . . . . . . . . . 2682.6 Gestion des ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2702.7 Gestion de la navigation entre pages web. . . . . . . . . . . . . . . . . 2732.8 Affichage de caractéristiques générales du document . . . . . . . 2782.9 Gestion des boutons dans les formulaires. . . . . . . . . . . . . . . . . 2802.10 Gestion des tableaux (balise HTML table) . . . . . . . . . . . . . . . . 290

Chapitre 13

Exploration de flux XML via DOM

1. Notion de flux XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

2. Exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3202.1 Exemple 1 : Affichage d'un contenu d’e-mail codé en XML . . 3202.2 Exemple 2 : Liste des marques des voitures

(fichier voitures.xml) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3242.3 Exemple 3 : Liste des marques des voitures avec une boucle. . 3262.4 Exemple 4 : Liste des nœuds rattachés à la racine . . . . . . . . . . 3282.5 Exemple 5 : Liste des champs (nœuds) de chaque voiture. . . . 3302.6 Exemple 6 : Remplacement d'une valeur de nœud. . . . . . . . . . 3332.7 Exemple 7 : Accès aux attributs. . . . . . . . . . . . . . . . . . . . . . . . . 3342.8 Exemple 8 : Accès à un nœud parent . . . . . . . . . . . . . . . . . . . . 3352.9 Exemple 9 : Parcours arrière des nœuds . . . . . . . . . . . . . . . . . . 336

9Table des matières

2.10 Exemple 10 : Remplacement systématique d'une valeur d'attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

2.11 Exemple 11 : Conversion XML en HTML . . . . . . . . . . . . . . . . 3392.12 Exemple 12 : Suppression d'un nœud dans un flux XML . . . . 341

Partie 5Cookie et mécanismes de persistances

Chapitre 14

Gestion des cookies en JavaScript

1. Notion de cookie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

2. Écriture d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

3. Lecture d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

4. Suppression d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

Chapitre 15

Stockage local de données

1. Présentation générale des solutions . . . . . . . . . . . . . . . . . . . . . . . . . . 3531.1 Stockage par sessionStorage. . . . . . . . . . . . . . . . . . . . . . . . . . . . 3541.2 Stockage par localStorage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

2. Mise en œuvre du Web Storage au travers d'exemples . . . . . . . . . . 3552.1 Exemple 1 : Stockage par localStorage

de chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3552.2 Exemple 2 : Stockage dans le localStorage

d'un objet JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

10avec JavaScript

Apprendre à développer

Chapitre 16

Stockage distant (Ajax - PHP - MySQL - XML)

1. Présentation générale de la solution . . . . . . . . . . . . . . . . . . . . . . . . . 375

2. Mise en œuvre du stockage distant au travers d'exemples . . . . . . . 3762.1 Exemple 1 : Accès Ajax sur BDD MySQL

(liste de l'ensemble des voitures) . . . . . . . . . . . . . . . . . . . . . . . . 3772.2 Exemple 2 : Accès MySQL via Ajax. . . . . . . . . . . . . . . . . . . . . . 403

Chapitre 17

Stockage distant (Ajax - PHP - MySQL - JSON)

1. Présentation générale de la solution . . . . . . . . . . . . . . . . . . . . . . . . . 411

2. Mise en œuvre du stockage distant au travers d'exemples . . . . . . . 4132.1 Exemple 1 : Présentation du système de notation JSON. . . . . 4132.2 Exemple 2 : Lecture d'un fichier JSON via XMLHttpRequest. 4182.3 Exemple 3 : Lecture d'un fichier JSON

via XMLHttpRequest et un script serveur en PHP . . . . . . . . . 4242.4 Exemple 4 : Lecture d'une table MySQL

via XMLHttpRequest (serveur PHP et flux JSON) . . . . . . . . . 4262.5 Exemple 5 : Recodage de l'exemple 4

avec une liste déroulante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432

11Table des matières

Partie 6Géolocalisation, dessin et graphiques de gestion

Chapitre 18

Géolocalisation

1. Principe de la géolocalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437

2. Exemples d'applications de géolocalisation. . . . . . . . . . . . . . . . . . . . 4382.1 Exemple 1 : Affichage de la carte de l'Ouest de la France . . . . 4382.2 Exemple 2 : Affichage de la carte de l'Ouest de la France

(informations météorologiques) . . . . . . . . . . . . . . . . . . . . . . . . 4552.3 Exemple 3 : Affichage de la carte de Rennes Centre-Sud

(couche panorama) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4582.4 Exemple 4 : Affichage de la carte de Rennes (Street View) . . . 462

Chapitre 19

Dessin (HTML5 CANVAS)

1. Présentation de l'API HTML5 CANVAS. . . . . . . . . . . . . . . . . . . . . . 465

2. Exemples d'applications de l'élément <canvas> . . . . . . . . . . . . . . . 4662.1 Exemple 1 : Tracé d'un simple carré . . . . . . . . . . . . . . . . . . . . . 4662.2 Exemple 2 : Tracé d'une grille de TicTacToe . . . . . . . . . . . . . . 4702.3 Améliorations possibles sur le jeu du TicTacToe . . . . . . . . . . . 477

Chapitre 20

Graphiques de gestion

1. Différentes solutions de conception de graphiques de gestion . . . . 479

2. Exemples d'utilisation des API Google Charts . . . . . . . . . . . . . . . . . 4802.1 Exemple 1 : Tracé d'un histogramme . . . . . . . . . . . . . . . . . . . . 4802.2 Exemple 2 : Tracé d'un graphique en secteurs . . . . . . . . . . . . . 4862.3 Exemple 3 : Tracé d'une carte . . . . . . . . . . . . . . . . . . . . . . . . . . 489

12avec JavaScript

Apprendre à développer

Partie 7Frameworks JavaScript et serveur/client

Chapitre 21

Framework AngularJS

1. Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493

2. Notions de base. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4942.1 Premier exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4942.2 Directive ng-bind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4972.3 Directive ng-init . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4992.4 Évaluation d’une expression . . . . . . . . . . . . . . . . . . . . . . . . . . . 5002.5 Exemple de synthèse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

3. Manipulation de tableaux mémoire et d’objets . . . . . . . . . . . . . . . . 5053.1 Utilisation d’un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5053.2 Utilisation d’un objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507

4. Module et contrôleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5094.1 Exemple utilisant un modèle et un contrôleur . . . . . . . . . . . . . 5114.2 Directive personnelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5134.3 Méthode personnelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5154.4 Contrôleur dans un fichier externe . . . . . . . . . . . . . . . . . . . . . . 5174.5 Saisie de données par zones de texte . . . . . . . . . . . . . . . . . . . . . 519

5. Boucles et affichage en mode tableau . . . . . . . . . . . . . . . . . . . . . . . . 5225.1 Itération sur un tableau de données . . . . . . . . . . . . . . . . . . . . . 5225.2 Itération sur un tableau de données et un filtre . . . . . . . . . . . . 5245.3 Itération sur un tableau de données et un tri . . . . . . . . . . . . . . 5275.4 Itération sur un tableau de données et un tableau HTML . . . 5295.5 Filtrage d’un tableau via une zone de texte . . . . . . . . . . . . . . . 532

6. Accès à un serveur de données distant (serveur PHP) . . . . . . . . . . . 5356.1 Liste simple à partir d’une table MySQL . . . . . . . . . . . . . . . . . 5356.2 Liste filtrée à partir d’une table MySQL . . . . . . . . . . . . . . . . . . 5456.3 Insertion d’un enregistrement dans une table MySQL . . . . . . 551

13Table des matières

7. Contrôles de saisie dans les formulaires . . . . . . . . . . . . . . . . . . . . . . 5577.1 Contrôle de saisie sur une zone de texte. . . . . . . . . . . . . . . . . . 5577.2 Contrôle de saisie sur adresse mail . . . . . . . . . . . . . . . . . . . . . . 5597.3 Contrôle de saisie sur une zone de texte requise . . . . . . . . . . . 5607.4 Liste déroulante pour choisir une marque. . . . . . . . . . . . . . . . . 5627.5 Liste déroulante plus évoluée pour choisir une marque . . . . . . 5647.6 Liste déroulante encore plus évoluée

pour choisir une marque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5667.7 Liste déroulante couplée à une recherche MySQL . . . . . . . . . . 5677.8 Directives ng-click et ng-mousemouve . . . . . . . . . . . . . . . . . . . 5717.9 Directives ng-show et ng-mouseleave . . . . . . . . . . . . . . . . . . . . 5757.10 Gestion du temps (temporisation) . . . . . . . . . . . . . . . . . . . . . . 5777.11 Gestion de choix par boutons radio. . . . . . . . . . . . . . . . . . . . . . 5817.12 Gestion de choix par cases à cocher. . . . . . . . . . . . . . . . . . . . . . 583

Chapitre 22

Framework Node.js

1. Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589

2. Installation de Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590

3. Lancement de l’environnement Node.js . . . . . . . . . . . . . . . . . . . . . . 592

4. Premier script Node.js affichant « Hello World » . . . . . . . . . . . . . . . 5944.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5944.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5954.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597

5. Deuxième script affichant « Hello World » (version avec Content-Type) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5985.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5985.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5985.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599

6. Troisième script affichant « Hello World » (version HTML) . . . . . . 6006.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600

14avec JavaScript

Apprendre à développer

6.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6006.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602

7. Gestion des URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6027.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6027.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6027.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

8. Récupération de paramètre dans l’URL . . . . . . . . . . . . . . . . . . . . . . 6058.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6058.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6058.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

9. Détection de l’événement close sur le serveur . . . . . . . . . . . . . . . . . 6089.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6089.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6089.3 Exécution du serveur node_06.js . . . . . . . . . . . . . . . . . . . . . . . . 609

10. Création d’un objet avec son propre événement . . . . . . . . . . . . . . . 61010.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61010.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61010.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612

11. Affichage du premier enregistrement d’une table MySQL (version 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61211.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61211.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61311.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616

12. Affichage de l’ensemble des enregistrements d’une table MySQL . 61812.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61812.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61812.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620

13. Affichage du premier enregistrement d’une table MySQL (version 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62113.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62113.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62113.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623

15Table des matières

Partie 8Développement hybride avec Ionic 3

Chapitre 23

Développement hybride en JavaScript

1. Approches de développement pour les applications mobiles. . . . . . 6251.1 Développements web, natif et hybride . . . . . . . . . . . . . . . . . . . 626

1.1.1 Applications web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6261.1.2 Applications natives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6271.1.3 Applications hybrides. . . . . . . . . . . . . . . . . . . . . . . . . . . . 628

1.2 Les trois principales plateformes . . . . . . . . . . . . . . . . . . . . . . . . 6291.2.1 Apple iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6291.2.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6291.2.3 Windows Phone, Windows 10 Mobile . . . . . . . . . . . . . . 630

2. Panorama des principales plateformes « hybrides » . . . . . . . . . . . . . 6302.1 Ionic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6302.2 React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6312.3 Autres solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631

Chapitre 24

Ionic 3, JavaScript en mode hybride

1. Présentation détaillée de l’environnement Ionic . . . . . . . . . . . . . . . 633

2. Installation de l’environnement Ionic 3 . . . . . . . . . . . . . . . . . . . . . . 6342.1 L’installation de Node.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6352.2 L’installation des frameworks Ionic et Cordova. . . . . . . . . . . . 6362.3 Une première application de test. . . . . . . . . . . . . . . . . . . . . . . . 6362.4 Un IDE pour modifier les scripts,

Microsoft Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . 6392.5 Le code du projet ionic3-blank en détail . . . . . . . . . . . . . . . . . . 640

16avec JavaScript

Apprendre à développer

Chapitre 25

Gestion du Hardware sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

2. Application ioni3-infos_hardware. . . . . . . . . . . . . . . . . . . . . . . . . . . 6592.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6592.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 6602.3 Déploiement de l’application sous Android . . . . . . . . . . . . . . . 668

2.3.1 Téléchargement d’Android Studio . . . . . . . . . . . . . . . . . 6702.3.2 Préparation de l’application Ionic pour transfert

sous Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6702.3.3 Importation de l’application Ionic

sous Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6722.3.4 Test de l’application Ionic sous Android Studio

en mode AVD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6752.3.5 Test de l’application Ionic

sur le périphérique « physique » . . . . . . . . . . . . . . . . . . . . 678

3. Application ionic3-battery_status. . . . . . . . . . . . . . . . . . . . . . . . . . . 6803.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6803.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 681

4. Application ionic3-screen_orientation . . . . . . . . . . . . . . . . . . . . . . . 6864.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6864.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 687

Chapitre 26

Composants de base sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695

2. Application ionic3-passage_parametres . . . . . . . . . . . . . . . . . . . . . . 6962.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6962.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 698

17Table des matières

3. Applications intégrant des fenêtres modales . . . . . . . . . . . . . . . . . . 7063.1 Application ionic3-alert_basic . . . . . . . . . . . . . . . . . . . . . . . . . . 7083.2 Application ionic3-alert_confirm . . . . . . . . . . . . . . . . . . . . . . . 7123.3 Application ionic3-alert_checkbox . . . . . . . . . . . . . . . . . . . . . . 7163.4 Application ionic3-alert_prompt . . . . . . . . . . . . . . . . . . . . . . . . 7233.5 Application ionic3-alert_radio . . . . . . . . . . . . . . . . . . . . . . . . . . 727

Chapitre 27

Applications basiques sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733

2. Application ionic3-racines_polynome. . . . . . . . . . . . . . . . . . . . . . . . 7332.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7332.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 735

3. Application ionic3-pgcd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7433.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7433.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 745

Chapitre 28

Gestion de la persistance sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747

2. Application ionic3-clipboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7482.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7482.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 749

3. Application ionic3-local_storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7533.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7533.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 754

4. Application ionic3-sqlite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7584.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7584.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 761

18avec JavaScript

Apprendre à développer

Chapitre 29

Gestion des listes sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769

2. Application ionic3-list_basic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7702.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7702.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 771

3. Application ionic3-list_avatar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7733.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7733.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 774

4. Application ionic3-list_slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7754.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7754.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 778

Chapitre 30

Graphiques de gestion sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787

2. Application ionic3-chartjs_bar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7882.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7882.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 789

3. Application ionic3-chartjs_pie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7943.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7943.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 796

4. Application ionic3-chartjs_doughnut_json . . . . . . . . . . . . . . . . . . . 8004.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 8004.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 801

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 811

Editions ENI

JavaScript Développez efficacement

(2e édition)

CollectionExpert IT

Table des matières

1Table des matières

Avant-propos

Chapitre 1

Bien démarrer vos projets

1. Choisir votre environnement de développement . . . . . . . . . . . . . . . . 131.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131.2 NetBeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161.3 Visual Studio Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171.4 Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191.5 Aptana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201.6 WebStorm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221.7 Bilan. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2. Organiser votre code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242.1 Séparer le code de la présentation . . . . . . . . . . . . . . . . . . . . . . . . 242.2 Chargement en pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.3 Chargement de script par le cache du navigateur. . . . . . . . . . . . 29

3. Portée des variables et fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.1 Portée des variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.2 Portée des variables dans une fonction . . . . . . . . . . . . . . . . . . . . 34

4. Optimisation de la portée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.1 Limiter le contexte global. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.2 Fonction anonyme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374.3 Fermeture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

5. Simplifier vos expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405.1 L’opérateur || . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405.2 L’opérateur &&. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Les éléments à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr

Saisissez la référence de l'ouvrage EI2JAV dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

2Développez efficacement

JavaScript

5.3 Comparaison. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435.4 Paramètres variants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455.5 Extension de type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

5.5.1 prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465.5.2 Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475.5.3 String. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485.5.4 Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495.5.5 Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

6. Passage au mode strict . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516.1 Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516.2 Quelques cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

7. JSHint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567.1 Usage de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567.2 Chargement de code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587.3 Autre usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

7.3.1 Ligne de commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607.3.2 Dans votre éditeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

8. Documenter votre code avec JSDoc . . . . . . . . . . . . . . . . . . . . . . . . . . 638.1 Le principe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638.2 Les marqueurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

8.2.1 Déclarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648.2.2 Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648.2.3 Objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668.2.4 Meta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

8.3 Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688.3.1 EDI WebStorm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688.3.2 Génération d’une documentation . . . . . . . . . . . . . . . . . . . 69

9. Passage d’un environnement de développement à un environnement de production. . . . . . . . . . . . . . . . . . . . . . . . . . . 729.1 Tests unitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

9.1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729.1.2 Gestion avec votre propre librairie . . . . . . . . . . . . . . . . . . 72

3Table des matières

9.1.3 QUnit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769.2 Minimisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

9.2.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 799.2.2 YUI Compressor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809.2.3 Closure Compiler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Chapitre 2

Développer efficacement en objet

1. Première approche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 831.1 Rappels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

1.1.1 Classe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 831.1.2 Instance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 841.1.3 Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 851.1.4 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 851.1.5 Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861.1.6 Surcharge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861.1.7 L’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 871.1.8 Polymorphisme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

1.2 Construction d’un objet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 881.2.1 Préambule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 881.2.2 Instance directe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 881.2.3 Tableau associatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 911.2.4 Parcours des propriétés. . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

1.3 Construction d’une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941.3.1 Le constructeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941.3.2 L’opérateur new . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941.3.3 L’opérateur this. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 951.3.4 Le mot-clé with. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 961.3.5 Le mot-clé instanceof . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

2. Contexte d’exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 972.1 this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 972.2 that . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

4Développez efficacement

JavaScript

2.3 Fonction anonyme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002.4 Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

3. Classes prédéfinies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1043.1 Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1043.2 String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063.3 RegExp. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1093.4 Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1123.5 Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1153.6 Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

4. Notions avancées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1184.1 Prototypage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

4.1.1 Simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1184.1.2 Optimisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

4.2 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1224.2.1 Principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1224.2.2 Surcharge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1244.2.3 polymorphisme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1264.2.4 Résolution des conflits . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

4.3 Gestion mémoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.3.1 Garbage collector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.3.2 null. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.3.3 delete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.3.4 var . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

5. Framework pour le développement objet . . . . . . . . . . . . . . . . . . . . . 1305.1 Prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

5.1.1 Création d’une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1305.1.2 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1315.1.3 Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

5.2 MooTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1335.2.1 Création d’une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345.2.2 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345.2.3 Implémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

5Table des matières

5.3 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1365.3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1365.3.2 Merge simple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1365.3.3 Mélange récursif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

5.4 Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1385.4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1385.4.2 Création d’une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1385.4.3 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Chapitre 3

Adopter les bonnes pratiques

1. Espace de noms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1411.1 Principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1411.2 Fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

1.2.1 Fonction interne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1421.2.2 Fonction anonyme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1441.2.3 Fonction anonyme avec paramètres . . . . . . . . . . . . . . . . 145

1.3 Fermeture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1471.4 Classe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

2. Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1512.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1512.2 Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

3. CommonJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1563.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1563.2 define . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

4. AMD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1594.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

4.1.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1594.1.2 Quelques conseils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

4.2 RequireJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1614.3 Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

6Développez efficacement

JavaScript

4.4 curl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1644.4.1 Principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1644.4.2 Accès relatif. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1654.4.3 Gestion des erreurs de chargement . . . . . . . . . . . . . . . . . 166

4.5 Écriture de votre gestionnaire de modules . . . . . . . . . . . . . . . . 166

5. Déboguer votre code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1705.1 Fonction alert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

5.1.1 Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1705.1.2 Simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1715.1.3 Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

5.2 Activation/désactivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1745.3 Fenêtre indépendante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1745.4 Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

5.4.1 Accès . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1775.4.2 log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1785.4.3 Groupe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1825.4.4 Niveaux de trace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1825.4.5 Mesure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1835.4.6 Pile d’appels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

5.5 Débogueur intégré . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1855.5.1 Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1855.5.2 Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1875.5.3 Firefox/Firebug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1895.5.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

Chapitre 4

Améliorer vos compétences Web

1. Page HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1931.1 L’indispensable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

1.1.1 Balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1931.1.2 Balises de structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1951.1.3 Lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

7Table des matières

1.1.4 Tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1971.1.5 Formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1981.1.6 Générique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

1.2 Le CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2001.2.1 Déclaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2001.2.2 Sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2021.2.3 Propriétés. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

2. Librairies JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2062.1 L’objet window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

2.1.1 Rôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2062.1.2 open . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2072.1.3 setInterval, setTimeout . . . . . . . . . . . . . . . . . . . . . . . . . . 2082.1.4 location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2102.1.5 navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

3. DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2143.1 Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

3.1.1 Propriétés et méthodes . . . . . . . . . . . . . . . . . . . . . . . . . . . 2143.1.2 Parcours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

3.2 Modification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2193.2.1 Construction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2223.2.2 Événements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

4. Formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2294.1 Validation simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2294.2 Gestion des champs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2324.3 Contraintes supplémentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . 2334.4 Conception d’un module de validation. . . . . . . . . . . . . . . . . . . 234

5. Étude de cas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2365.1 Gestion de notes dans une page Web, architecture MVC . . . . 236

5.1.1 Première étape. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2365.1.2 Modèle de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2375.1.3 La vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2385.1.4 Finalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

8Développez efficacement

JavaScript

5.2 Gestion de notes, version 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2405.2.1 Multivue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2405.2.2 Trier les notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

5.3 Gestion d’un QCM dans une page web . . . . . . . . . . . . . . . . . . 2445.3.1 Première étape. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2445.3.2 Réalisation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Chapitre 5

Développer aisément en client/serveur

1. AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2511.1 Requête simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2511.2 Réponse XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2541.3 Paramètres GET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2551.4 Paramètres POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2561.5 Requêtes entre domaines différents . . . . . . . . . . . . . . . . . . . . . 2581.6 Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

1.6.1 Version monorequête . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2591.6.2 Version multirequête . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

1.7 Format d’échange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2641.7.1 Texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2641.7.2 XML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2671.7.3 XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2701.7.4 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

1.8 Objets en client/serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2841.8.1 Implémentation Java intrusive . . . . . . . . . . . . . . . . . . . . 2841.8.2 Implémentation Java non intrusive . . . . . . . . . . . . . . . . 289

2. Chargement dynamique de script . . . . . . . . . . . . . . . . . . . . . . . . . . . 2922.1 Première implémentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2922.2 Module AMD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

9Table des matières

Chapitre 6

Maîtriser les frameworks Web

1. Bien démarrer avec jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2991.1 Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

1.1.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2991.1.2 Sélecteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3011.1.3 DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3091.1.4 Utilitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3121.1.5 Effets de transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

1.2 Événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3151.2.1 Interactions utilisateur. . . . . . . . . . . . . . . . . . . . . . . . . . . 3151.2.2 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3171.2.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

1.3 Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3221.3.1 Construction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3221.3.2 Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

2. Bien démarrer avec Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3272.1 Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

2.1.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3272.1.2 Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3282.1.3 Vos modules AMD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3312.1.4 DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

2.2 Événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3382.2.1 Interactions utilisateur. . . . . . . . . . . . . . . . . . . . . . . . . . . 3382.2.2 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3412.2.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

3. Construire votre framework web . . . . . . . . . . . . . . . . . . . . . . . . . . . 3433.1 Première étape. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

3.1.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3433.1.2 Organisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

10Développez efficacement

JavaScript

3.2 Deuxième étape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3463.2.1 Usage de templates de composant . . . . . . . . . . . . . . . . . 3463.2.2 Réalisation d’un bouton. . . . . . . . . . . . . . . . . . . . . . . . . . 350

3.3 Troisième étape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3523.3.1 Création d’une calculatrice simple . . . . . . . . . . . . . . . . . 3523.3.2 L’avenir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Chapitre 7

TypeScript

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3591.1 Objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3591.2 Hello world . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3601.3 Environnement de développement . . . . . . . . . . . . . . . . . . . . . . 361

1.3.1 Visual Studio Community 2017 . . . . . . . . . . . . . . . . . . . 3611.3.2 WebStorm 2017 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

2. Variable et constante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.1 Variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.2 Constante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

3. Typage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3653.1 Déclaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

3.1.1 Variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3653.1.2 Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

3.2 Chaînes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3663.3 Nombre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3663.4 Booléens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.5 Enumération . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.6 Any, Null et Undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

3.6.1 Any . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.6.2 Null et Undefined. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

3.7 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3693.8 Assertions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3703.9 Itérations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

11Table des matières

4. Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3714.1 Déclaration et usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3714.2 Héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3724.3 Visibilité des champs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3734.4 Propriétés en lecture seule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3754.5 Accesseurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3764.6 Propriétés statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

5. Interfaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3785.1 Déclaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3785.2 Propriétés optionnelles et en lecture seule . . . . . . . . . . . . . . . . 3795.3 Types de fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3815.4 Types indexables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3815.5 Implémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

6. Génériques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3856.1 Déclaration et usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3856.2 Types génériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3866.3 Classes génériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3886.4 Contraintes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388

7. Modules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3907.1 Déclaration et usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3907.2 Import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

8. Espace de noms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3938.1 Déclaration et usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3938.2 Espaces de noms multiples. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

8.2.1 Construction d’un fichier unique . . . . . . . . . . . . . . . . . . 3958.2.2 Instruction de compilation . . . . . . . . . . . . . . . . . . . . . . . 396

8.3 Espaces de noms imbriqués . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3978.4 Alias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

12Développez efficacement

JavaScript

Annexes

Liste des URL

1. Éditeurs JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

2. Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

3. Frameworks objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

4. Librairies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

5. Gestionnaires AMD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

6. Outils. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

7. Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

8. Références . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403