Apprendre à développer avec JavaScript · Table des matières 11 Partie 6 Géolocalisation,...
Transcript of 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