309961-dynamisez-vos-sites-web-avec-javascript

Telechargé par Kodzo Apélété DANON
Dynamisez vos sites
web avec Javascript !
Par Johann Pardanaud (Nesk)
et 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
1 / 377 100%

309961-dynamisez-vos-sites-web-avec-javascript

Telechargé par Kodzo Apélété DANON
Study collections
La catégorie de ce document est-elle correcte?
Merci pour votre participation!

Faire une suggestion

Avez-vous trouvé des erreurs dans linterface ou les textes ? Ou savez-vous comment améliorer linterface utilisateur de StudyLib ? Nhésitez pas à envoyer vos suggestions. Cest très important pour nous !