Dynamisez vos sites
web avec Javascript !
Par Johann Pardanaud (Nesk)
et Sébastien de la Marck (Thunderseb)
Ce PDF vous est offert par
Découvrez des métiers plein d'envies
http://www.fr.capgemini.com/carrieres/technology_services/
www.openclassrooms.com
Licence Creative Commons 6 2.0
Dernière mise à jour le 9/12/2012
Sommaire
2Sommaire ...........................................................................................................................................
6Lire aussi ............................................................................................................................................
8 Dynamisez vos sites web avec Javascript ! .......................................................................................
9Partie 1 : Les bases du Javascript ......................................................................................................
10Introduction au Javascript ...............................................................................................................................................
10Qu'est-ce que le Javascript ? ....................................................................................................................................................................................
10Qu'est-ce que c'est ? .................................................................................................................................................................................................
11Le Javascript, le langage de scripts ..........................................................................................................................................................................
12Le Javascript, pas que le Web ..................................................................................................................................................................................
12Petit historique du langage ........................................................................................................................................................................................
13L'ECMAScript et ses dérivés .....................................................................................................................................................................................
13Les versions du Javascript ........................................................................................................................................................................................
13Un logo inconnu ........................................................................................................................................................................................................
15Premiers pas en Javascript .............................................................................................................................................
15Afficher une boîte de dialogue ...................................................................................................................................................................................
15Le Hello World! ..........................................................................................................................................................................................................
16Les nouveautés .........................................................................................................................................................................................................
16La boîte de dialogue alert() .......................................................................................................................................................................................
16La syntaxe du Javascript ...........................................................................................................................................................................................
16Les instructions .........................................................................................................................................................................................................
17Les espaces ..............................................................................................................................................................................................................
18Les commentaires .....................................................................................................................................................................................................
19Les fonctions .............................................................................................................................................................................................................
19Où placer le code dans la page ................................................................................................................................................................................
20Le Javascript « dans la page » .................................................................................................................................................................................
20Le Javascript externe ................................................................................................................................................................................................
21Positionner l'élément <script> ...................................................................................................................................................................................
22Quelques aides .........................................................................................................................................................................................................
24Les variables ...................................................................................................................................................................
24Qu'est-ce qu'une variable ? .......................................................................................................................................................................................
24Déclarer une variable ................................................................................................................................................................................................
25Les types de variables ...............................................................................................................................................................................................
26Tester l'existence de variables avec typeof ...............................................................................................................................................................
27Les opérateurs arithmétiques ....................................................................................................................................................................................
27Quelques calculs simples ..........................................................................................................................................................................................
27Simplifier encore plus vos calculs .............................................................................................................................................................................
28Initiation à la concaténation et à la conversion des types .........................................................................................................................................
28La concaténation .......................................................................................................................................................................................................
29Interagir avec l'utilisateur ...........................................................................................................................................................................................
30Convertir une chaîne de caractères en nombre ........................................................................................................................................................
31Convertir un nombre en chaîne de caractères ..........................................................................................................................................................
32Les conditions .................................................................................................................................................................
32La base de toute condition : les booléens .................................................................................................................................................................
32Les opérateurs de comparaison ................................................................................................................................................................................
33Les opérateurs logiques ............................................................................................................................................................................................
34Combiner les opérateurs ...........................................................................................................................................................................................
35La condition « if else » ..............................................................................................................................................................................................
35La structure if pour dire « si » ....................................................................................................................................................................................
36Petit intermède : la fonction confirm() .......................................................................................................................................................................
36La structure else pour dire « sinon » .........................................................................................................................................................................
37La structure else if pour dire « sinon si » ..................................................................................................................................................................
38La condition « switch » ..............................................................................................................................................................................................
40Les ternaires ..............................................................................................................................................................................................................
41Les conditions sur les variables ................................................................................................................................................................................
41Tester l'existence de contenu d'une variable .............................................................................................................................................................
42Le cas de l'opérateur OU ..........................................................................................................................................................................................
42Un petit exercice pour la forme ! ...............................................................................................................................................................................
42Présentation de l'exercice .........................................................................................................................................................................................
43Correction ..................................................................................................................................................................................................................
44Les boucles .....................................................................................................................................................................
45L'incrémentation ........................................................................................................................................................................................................
45Le fonctionnement .....................................................................................................................................................................................................
45L'ordre des opérateurs ..............................................................................................................................................................................................
46La boucle while ..........................................................................................................................................................................................................
47Répéter tant que… ....................................................................................................................................................................................................
47Exemple pratique ......................................................................................................................................................................................................
48Quelques améliorations ............................................................................................................................................................................................
48La boucle do while .....................................................................................................................................................................................................
49La boucle for ..............................................................................................................................................................................................................
49for, la boucle conçue pour l'incrémentation ...............................................................................................................................................................
49Reprenons notre exemple .........................................................................................................................................................................................
51Les fonctions ...................................................................................................................................................................
52Concevoir des fonctions ............................................................................................................................................................................................
52Créer sa première fonction ........................................................................................................................................................................................
53Un exemple concret ..................................................................................................................................................................................................
2/378
Ce PDF vous est offert par CAPGEMINI
Découv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/
www.openclassrooms.com
54La portée des variables .............................................................................................................................................................................................
54La portée des variables .............................................................................................................................................................................................
55Les variables globales ...............................................................................................................................................................................................
55Les variables globales ? Avec modération ! ..............................................................................................................................................................
56Les arguments et les valeurs de retour .....................................................................................................................................................................
56Les arguments ..........................................................................................................................................................................................................
60Les valeurs de retour .................................................................................................................................................................................................
61Les fonctions anonymes ...........................................................................................................................................................................................
61Les fonctions anonymes : les bases .........................................................................................................................................................................
62Retour sur l'utilisation des points-virgules .................................................................................................................................................................
63Les fonctions anonymes : isoler son code ................................................................................................................................................................
67Les objets et les tableaux ................................................................................................................................................
67Introduction aux objets ..............................................................................................................................................................................................
67Que contiennent les objets ? .....................................................................................................................................................................................
68Exemple d'utilisation ..................................................................................................................................................................................................
68Objets natifs déjà rencontrés ....................................................................................................................................................................................
68Les tableaux ..............................................................................................................................................................................................................
69Les indices ................................................................................................................................................................................................................
69Déclarer un tableau ...................................................................................................................................................................................................
70Récupérer et modifier des valeurs ............................................................................................................................................................................
70Opérations sur les tableaux .......................................................................................................................................................................................
70Ajouter et supprimer des items .................................................................................................................................................................................
71Chaînes de caractères et tableaux ............................................................................................................................................................................
71Parcourir un tableau ..................................................................................................................................................................................................
72Parcourir avec for ......................................................................................................................................................................................................
72Attention à la condition ..............................................................................................................................................................................................
73Les objets littéraux ....................................................................................................................................................................................................
73La syntaxe d'un objet ................................................................................................................................................................................................
74Accès aux items ........................................................................................................................................................................................................
74Ajouter des items ......................................................................................................................................................................................................
75Parcourir un objet avec for in ....................................................................................................................................................................................
75Utilisation des objets littéraux ....................................................................................................................................................................................
76Exercice récapitulatif .................................................................................................................................................................................................
76Énoncé ......................................................................................................................................................................................................................
76Correction ..................................................................................................................................................................................................................
77TP : convertir un nombre en toutes lettres ......................................................................................................................
78Présentation de l'exercice .........................................................................................................................................................................................
78La marche à suivre ....................................................................................................................................................................................................
78L'orthographe des nombres ......................................................................................................................................................................................
78Tester et convertir les nombres .................................................................................................................................................................................
80Il est temps de se lancer ! .........................................................................................................................................................................................
80Correction ..................................................................................................................................................................................................................
80Le corrigé complet .....................................................................................................................................................................................................
81Les explications .........................................................................................................................................................................................................
88Conclusion ................................................................................................................................................................................................................
88Partie 2 : Modeler vos pages Web ....................................................................................................
89Manipuler le code HTML (partie 1/2) ...............................................................................................................................
89Le Document Object Model .......................................................................................................................................................................................
89Petit historique ..........................................................................................................................................................................................................
89L'objet window ...........................................................................................................................................................................................................
91Le document .............................................................................................................................................................................................................
91Naviguer dans le document ......................................................................................................................................................................................
91La structure DOM ......................................................................................................................................................................................................
93Accéder aux éléments ...............................................................................................................................................................................................
94Accéder aux éléments grâce aux technologies récentes ..........................................................................................................................................
95L'héritage des propriétés et des méthodes ...............................................................................................................................................................
96Éditer les éléments HTML .........................................................................................................................................................................................
96Les attributs ...............................................................................................................................................................................................................
98Le contenu : innerHTML ............................................................................................................................................................................................
99innerText et textContent ............................................................................................................................................................................................
99innerText ....................................................................................................................................................................................................................
100textContent ..............................................................................................................................................................................................................
102Manipuler le code HTML (partie 2/2) .............................................................................................................................
103Naviguer entre les nœuds .......................................................................................................................................................................................
103La propriété parentNode .........................................................................................................................................................................................
103nodeType et nodeName ..........................................................................................................................................................................................
104Lister et parcourir des nœuds enfants ....................................................................................................................................................................
107Attention aux nœuds vides ......................................................................................................................................................................................
108Créer et insérer des éléments .................................................................................................................................................................................
108Ajouter des éléments HTML ....................................................................................................................................................................................
110Ajouter des nœuds textuels .....................................................................................................................................................................................
112Notions sur les références .......................................................................................................................................................................................
112Les références .........................................................................................................................................................................................................
113Cloner, remplacer, supprimer… ...............................................................................................................................................................................
113Cloner un élément ...................................................................................................................................................................................................
114Remplacer un élément par un autre ........................................................................................................................................................................
114Supprimer un élément .............................................................................................................................................................................................
115Autres actions ..........................................................................................................................................................................................................
115Vérifier la présence d'éléments enfants ..................................................................................................................................................................
115Insérer à la bonne place : insertBefore() .................................................................................................................................................................
116Une bonne astuce : insertAfter() ..............................................................................................................................................................................
116Mini-TP : recréer une structure DOM .......................................................................................................................................................................
Sommaire 3/378
Ce PDF vous est offert par CAPGEMINI
Découv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/
www.openclassrooms.com
116Premier exercice ......................................................................................................................................................................................................
118Deuxième exercice ..................................................................................................................................................................................................
120Troisième exercice ..................................................................................................................................................................................................
122Quatrième exercice .................................................................................................................................................................................................
124Conclusion des TP ..................................................................................................................................................................................................
125Les événements ............................................................................................................................................................
126Que sont les événements ? ....................................................................................................................................................................................
126La théorie ................................................................................................................................................................................................................
127La pratique ..............................................................................................................................................................................................................
129Les événements au travers du DOM .......................................................................................................................................................................
129Le DOM-0 ................................................................................................................................................................................................................
130Le DOM-2 ................................................................................................................................................................................................................
133Les phases de capture et de bouillonnement .........................................................................................................................................................
134L'objet Event ............................................................................................................................................................................................................
134Généralités sur l'objet Event ...................................................................................................................................................................................
135Les fonctionnalités de l'objet Event .........................................................................................................................................................................
141Résoudre les problèmes d'héritage des événements .............................................................................................................................................
141Le problème ............................................................................................................................................................................................................
142La solution ...............................................................................................................................................................................................................
146Les formulaires ..............................................................................................................................................................
146Les propriétés ..........................................................................................................................................................................................................
146Une propriété classique : value ...............................................................................................................................................................................
146Les booléens avec disabled, checked et readonly ..................................................................................................................................................
147Les listes déroulantes avec selectedIndex et options .............................................................................................................................................
148Les méthodes et un retour sur quelques événements ............................................................................................................................................
148Les méthodes spécifiques à l'élément <form> ........................................................................................................................................................
149La gestion du focus et de la sélection .....................................................................................................................................................................
149Explications sur l'événement change ......................................................................................................................................................................
151Manipuler le CSS ..........................................................................................................................................................
151Éditer les propriétés CSS ........................................................................................................................................................................................
151Quelques rappels sur le CSS ..................................................................................................................................................................................
151Éditer les styles CSS d'un élément .........................................................................................................................................................................
153Récupérer les propriétés CSS .................................................................................................................................................................................
153La fonction getComputedStyle() ..............................................................................................................................................................................
154Les propriétés de type offset ...................................................................................................................................................................................
158Votre premier script interactif ! .................................................................................................................................................................................
158Présentation de l'exercice .......................................................................................................................................................................................
159Correction ................................................................................................................................................................................................................
163TP : un formulaire interactif ...........................................................................................................................................
164Présentation de l'exercice .......................................................................................................................................................................................
165Correction ................................................................................................................................................................................................................
165Le corrigé au grand complet : HTML, CSS et Javascript ........................................................................................................................................
171Les explications .......................................................................................................................................................................................................
176Partie 3 : Les objets : conception et utilisation ................................................................................
177Les objets ......................................................................................................................................................................
177Petite problématique ...............................................................................................................................................................................................
178Objet constructeur ...................................................................................................................................................................................................
180Ajouter des méthodes .............................................................................................................................................................................................
180Ajouter une méthode ...............................................................................................................................................................................................
182Ajouter des méthodes aux objets natifs ..................................................................................................................................................................
182Ajout de méthodes ..................................................................................................................................................................................................
184Remplacer des méthodes .......................................................................................................................................................................................
184Limitations ...............................................................................................................................................................................................................
184Les namespaces .....................................................................................................................................................................................................
185Définir un namespace .............................................................................................................................................................................................
185Un style de code ......................................................................................................................................................................................................
186L'emploi de this .......................................................................................................................................................................................................
187Vérifier l'unicité du namespace ...............................................................................................................................................................................
187Modifier le contexte d'une méthode ........................................................................................................................................................................
190Les chaînes de caractères ............................................................................................................................................
190Les types primitifs ...................................................................................................................................................................................................
191L'objet String ...........................................................................................................................................................................................................
191Propriétés ................................................................................................................................................................................................................
192Méthodes .................................................................................................................................................................................................................
192La casse et les caractères ......................................................................................................................................................................................
192toLowerCase() et toUpperCase() ............................................................................................................................................................................
193Accéder aux caractères ...........................................................................................................................................................................................
194Supprimer les espaces avec trim() ..........................................................................................................................................................................
194Rechercher, couper et extraire ................................................................................................................................................................................
194Connaître la position avec indexOf() et lastIndexOf() .............................................................................................................................................
196Extraire une chaîne avec substring(), substr() et slice() ..........................................................................................................................................
197Couper une chaîne en un tableau avec split() .........................................................................................................................................................
197Tester l'existence d'une chaîne de caractères .........................................................................................................................................................
198Les expressions régulières (1/2) ...................................................................................................................................
199Les regex en Javascript ..........................................................................................................................................................................................
199Utilisation .................................................................................................................................................................................................................
200Recherches de mots ...............................................................................................................................................................................................
201Début et fin de chaîne .............................................................................................................................................................................................
202Les caractères et leurs classes ...............................................................................................................................................................................
202Les intervalles de caractères ..................................................................................................................................................................................
203Trouver un caractère quelconque ...........................................................................................................................................................................
Sommaire 4/378
Ce PDF vous est offert par CAPGEMINI
Découv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/
www.openclassrooms.com
203Les quantificateurs ..................................................................................................................................................................................................
203Les trois symboles quantificateurs ..........................................................................................................................................................................
204Les accolades .........................................................................................................................................................................................................
204Les métacaractères .................................................................................................................................................................................................
205Les métacaractères au sein des classes ................................................................................................................................................................
205Types génériques et assertions ...............................................................................................................................................................................
205Les types génériques ..............................................................................................................................................................................................
206Les assertions .........................................................................................................................................................................................................
207Les expressions régulières (partie 2/2) .........................................................................................................................
208Construire une regex ...............................................................................................................................................................................................
209L'objet RegExp ........................................................................................................................................................................................................
209Méthodes .................................................................................................................................................................................................................
210Propriétés ................................................................................................................................................................................................................
210Les parenthèses ......................................................................................................................................................................................................
210Les parenthèses capturantes ..................................................................................................................................................................................
211Les parenthèses non capturantes ...........................................................................................................................................................................
211Les recherches non-greedy .....................................................................................................................................................................................
213Rechercher et remplacer .........................................................................................................................................................................................
213L'option g .................................................................................................................................................................................................................
213Rechercher et capturer ............................................................................................................................................................................................
215Utiliser une fonction pour le remplacement .............................................................................................................................................................
216Autres recherches ...................................................................................................................................................................................................
216Rechercher la position d'une occurrence ................................................................................................................................................................
216Récupérer toutes les occurrences ..........................................................................................................................................................................
217Couper avec une regex ...........................................................................................................................................................................................
218Les données numériques ..............................................................................................................................................
218L'objet Number ........................................................................................................................................................................................................
218L'objet Math .............................................................................................................................................................................................................
219Les propriétés ..........................................................................................................................................................................................................
219Les méthodes ..........................................................................................................................................................................................................
221Les inclassables ......................................................................................................................................................................................................
221Les fonctions de conversion ....................................................................................................................................................................................
222Les fonctions de contrôle ........................................................................................................................................................................................
224La gestion du temps ......................................................................................................................................................
225Le système de datation ...........................................................................................................................................................................................
225Introduction aux systèmes de datation ....................................................................................................................................................................
225L'objet Date .............................................................................................................................................................................................................
227Mise en pratique : calculer le temps d'exécution d'un script ...................................................................................................................................
227Les fonctions temporelles .......................................................................................................................................................................................
228Utiliser setTimeout() et setInterval() ........................................................................................................................................................................
229Annuler une action temporelle ................................................................................................................................................................................
230Mise en pratique : les animations ! ..........................................................................................................................................................................
231Les tableaux ..................................................................................................................................................................
232L'objet Array .............................................................................................................................................................................................................
232Le constructeur ........................................................................................................................................................................................................
232Les propriétés ..........................................................................................................................................................................................................
233Les méthodes ..........................................................................................................................................................................................................
233Concaténer deux tableaux ......................................................................................................................................................................................
234Parcourir un tableau ................................................................................................................................................................................................
235Rechercher un élément dans un tableau ................................................................................................................................................................
235Trier un tableau .......................................................................................................................................................................................................
238Extraire une partie d'un tableau ..............................................................................................................................................................................
238Remplacer une partie d'un tableau .........................................................................................................................................................................
239Tester l'existence d'un tableau ................................................................................................................................................................................
239Les piles et les files .................................................................................................................................................................................................
239Retour sur les méthodes étudiées ..........................................................................................................................................................................
240Les piles ..................................................................................................................................................................................................................
240Les files ...................................................................................................................................................................................................................
241Quand les performances sont absentes : unshift() et shift() ...................................................................................................................................
242Les images ....................................................................................................................................................................
243L'objet Image ...........................................................................................................................................................................................................
243Le constructeur ........................................................................................................................................................................................................
243Propriétés ................................................................................................................................................................................................................
243Événements ............................................................................................................................................................................................................
244Particularités ...........................................................................................................................................................................................................
244Mise en pratique ......................................................................................................................................................................................................
248Les polyfills et les wrappers ..........................................................................................................................................
249Introduction aux polyfills ..........................................................................................................................................................................................
249La problématique ....................................................................................................................................................................................................
249La solution ...............................................................................................................................................................................................................
249Quelques polyfills importants ..................................................................................................................................................................................
250Introduction aux wrappers .......................................................................................................................................................................................
250La problématique ....................................................................................................................................................................................................
250La solution ...............................................................................................................................................................................................................
254Partie 4 : L'échange de données avec l'AJAX .................................................................................
255L'AJAX : qu'est-ce que c'est ? .......................................................................................................................................
255Introduction au concept ...........................................................................................................................................................................................
255Présentation ............................................................................................................................................................................................................
255Fonctionnement ......................................................................................................................................................................................................
255Les formats de données ..........................................................................................................................................................................................
256Présentation ............................................................................................................................................................................................................
Sommaire 5/378
Ce PDF vous est offert par CAPGEMINI
Découv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/
www.openclassrooms.com
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
1
/
377
100%
