Dynamisez vos sites web avec Javascript !Par Johann Pardanaud (Nesquik69) et Sbastien de la Marck (Thunderseb)

www.siteduzero.com

Licence Creative Commons BY-NC 2.0 Dernire mise jour le 29/01/2012

Sommaire

1/314

SommaireSommaire ........................................................................................................................................... Lire aussi ............................................................................................................................................ Dynamisez vos sites web avec Javascript ! ....................................................................................... Partie 1 : Les bases du Javascript ......................................................................................................Qu'est-ce que le Javascript ? ...................................................................................................................................................................................... Dfinition ..................................................................................................................................................................................................................... Javascript, le langage de scripts ................................................................................................................................................................................. Javascript, pas que le Web ......................................................................................................................................................................................... Petit historique du langage ..........................................................................................................................................................................................

1 4 6 77 7 8 9 9

1) Introduction au Javascript ............................................................................................................................................. 7

2) Premiers pas en Javascript ......................................................................................................................................... 11Afficher une bote de dialogue ................................................................................................................................................................................... 12 Le Hello World! .......................................................................................................................................................................................................... 12 Les nouveauts ......................................................................................................................................................................................................... 13 La bote de dialogue alert() ....................................................................................................................................................................................... 13 La syntaxe Javascript ................................................................................................................................................................................................ 13 Les instructions ......................................................................................................................................................................................................... 13 Les espaces .............................................................................................................................................................................................................. 14 Les commentaires ..................................................................................................................................................................................................... 15 Les fonctions ............................................................................................................................................................................................................. 16 O placer le code dans la page ................................................................................................................................................................................ 16 Le Javascript "dans la page" ..................................................................................................................................................................................... 17 Le Javascript externe ................................................................................................................................................................................................ 17 Positionner l'lment ................................................................................................................................................................................... 18 Quelques aides ......................................................................................................................................................................................................... 19

3) Les variables ............................................................................................................................................................... 19Qu'est-ce qu'une variable ? ....................................................................................................................................................................................... 20 Dclarer une variable ................................................................................................................................................................................................ 20 Les types de variables ............................................................................................................................................................................................... 21 Tester l'existence de variables avec "typeof" ............................................................................................................................................................ 22 Les oprateurs arithmtiques .................................................................................................................................................................................... 22 Quelques calculs simples .......................................................................................................................................................................................... 23 Simplifier encore plus vos calculs ............................................................................................................................................................................. 23 Initiation la concatnation et la conversion des types ......................................................................................................................................... 24 La concatnation ....................................................................................................................................................................................................... 24 Interagir avec l'utilisateur ........................................................................................................................................................................................... 25 Convertir une chane de caractres en nombre ........................................................................................................................................................ 26 Convertir un nombre en chane de caractres .......................................................................................................................................................... 27

4) Les conditions ............................................................................................................................................................. 28La base de toute condition : les boolens ................................................................................................................................................................. 28 Les oprateurs de comparaison ................................................................................................................................................................................ 28 Les oprateurs logiques ............................................................................................................................................................................................ 29 Combiner les oprateurs ........................................................................................................................................................................................... 30 La condition "if - else" ................................................................................................................................................................................................ 31 La structure "if" pour dire "si" ..................................................................................................................................................................................... 31 Petit intermde : la fonction confirm() ....................................................................................................................................................................... 32 La structure "else" pour dire "sinon" .......................................................................................................................................................................... 32 La structure "else if" pour dire "sinon si" ................................................................................................................................................................... 33 La condition "switch" ................................................................................................................................................................................................. 34 Les ternaires .............................................................................................................................................................................................................. 36 Les conditions sur les variables ................................................................................................................................................................................ 37 Tester l'existence de contenu d'une variable ............................................................................................................................................................. 37 Le cas de l'oprateur OU .......................................................................................................................................................................................... 38 Un petit exercice pour la forme ! ............................................................................................................................................................................... 38 Prsentation de l'exercice ......................................................................................................................................................................................... 38 Correction .................................................................................................................................................................................................................. 39

5) Les boucles ................................................................................................................................................................. 40L'incrmentation ........................................................................................................................................................................................................ 40 Le fonctionnement ..................................................................................................................................................................................................... 40 L'ordre des oprateurs .............................................................................................................................................................................................. 40 La boucle while .......................................................................................................................................................................................................... 41 Rpter tant que... ..................................................................................................................................................................................................... 42 Exemple pratique ...................................................................................................................................................................................................... 42 Quelques amliorations ............................................................................................................................................................................................ 43 La boucle do while ..................................................................................................................................................................................................... 43 La boucle for .............................................................................................................................................................................................................. 44 for, la boucle pour l'incrmentation ............................................................................................................................................................................ 44 Reprenons notre exemple ......................................................................................................................................................................................... 44

6) Les fonctions ............................................................................................................................................................... 47Concevoir des fonctions ............................................................................................................................................................................................ Crer sa premire fonction ........................................................................................................................................................................................ Un exemple concret .................................................................................................................................................................................................. La porte des variables ............................................................................................................................................................................................. La porte des variables ............................................................................................................................................................................................. Les variables globales ............................................................................................................................................................................................... 47 47 48 49 49 50

www.siteduzero.com

Sommaire

2/314

Les variables globales ? Avec modration ! .............................................................................................................................................................. 50 Les arguments et les valeurs de retour ..................................................................................................................................................................... 51 Les arguments .......................................................................................................................................................................................................... 51 Les valeurs de retour ................................................................................................................................................................................................. 55 Les fonctions anonymes ........................................................................................................................................................................................... 56 Les fonctions anonymes : les bases ......................................................................................................................................................................... 56 Retour sur l'utilisation des points-virgules ................................................................................................................................................................. 57 Les fonctions anonymes : Isoler son code ................................................................................................................................................................ 57

7) Les objets et les tableaux ........................................................................................................................................... 60Introduction aux objets .............................................................................................................................................................................................. 61 Que contiennent les objets ? ..................................................................................................................................................................................... 61 Exemple d'utilisation .................................................................................................................................................................................................. 62 Objets natifs dj rencontrs .................................................................................................................................................................................... 62 Les tableaux .............................................................................................................................................................................................................. 63 Les indices ................................................................................................................................................................................................................ 63 Dclarer un tableau ................................................................................................................................................................................................... 63 Rcuprer et modifier des valeurs ............................................................................................................................................................................ 64 Oprations sur les tableaux ....................................................................................................................................................................................... 64 Ajouter et supprimer des items ................................................................................................................................................................................. 64 Chanes de caractres et tableaux ............................................................................................................................................................................ 65 Parcourir un tableau .................................................................................................................................................................................................. 65 Parcourir avec for ...................................................................................................................................................................................................... 66 Attention la condition .............................................................................................................................................................................................. 66 Les objets littraux .................................................................................................................................................................................................... 67 La syntaxe d'un objet ................................................................................................................................................................................................ 67 Accs aux items ........................................................................................................................................................................................................ 68 Ajouter des items ...................................................................................................................................................................................................... 68 Parcourir un objet avec for in .................................................................................................................................................................................... 68 Utilisation des objets littraux .................................................................................................................................................................................... 69 Exercice rcapitulatif ................................................................................................................................................................................................. 69 nonc ...................................................................................................................................................................................................................... 69 Correction .................................................................................................................................................................................................................. 70

8) TP : Convertir un nombre en toutes lettres ................................................................................................................. 70Prsentation de l'exercice ......................................................................................................................................................................................... La marche suivre .................................................................................................................................................................................................... L'orthographe des nombres ...................................................................................................................................................................................... Tester et convertir les nombres ................................................................................................................................................................................. Il est temps de se lancer ! ......................................................................................................................................................................................... Correction .................................................................................................................................................................................................................. Le corrig complet ..................................................................................................................................................................................................... Les explications ......................................................................................................................................................................................................... Conclusion ................................................................................................................................................................................................................ 71 71 71 71 73 73 73 74 81

Partie 2 : Modeler vos pages web ..................................................................................................... 821) Manipuler le code HTML (Partie 1/2) .......................................................................................................................... 82Le Document Object Model ....................................................................................................................................................................................... Petit historique .......................................................................................................................................................................................................... L'objet window ........................................................................................................................................................................................................... Le document ............................................................................................................................................................................................................. Naviguer dans le document ...................................................................................................................................................................................... La structure DOM ...................................................................................................................................................................................................... Accder aux lments ............................................................................................................................................................................................... Accder aux lments grce aux technologies rcentes .......................................................................................................................................... L'hritage des proprits et des mthodes ............................................................................................................................................................... Editer les lments HTML ......................................................................................................................................................................................... Les attributs ............................................................................................................................................................................................................... Le contenu : innerHTML ............................................................................................................................................................................................ innerText et textContent ............................................................................................................................................................................................ innerText .................................................................................................................................................................................................................... textContent ................................................................................................................................................................................................................ 82 82 82 83 83 83 85 86 87 88 88 90 91 91 92

2) Manipuler le code HTML (Partie 2/2) .......................................................................................................................... 93Naviguer entre les nuds ......................................................................................................................................................................................... 94 La proprit parentNode ........................................................................................................................................................................................... 94 nodeType et nodeName ............................................................................................................................................................................................ 94 Lister et parcourir des nuds enfants ...................................................................................................................................................................... 95 Attention aux nuds vides ........................................................................................................................................................................................ 98 Crer et insrer des lments ................................................................................................................................................................................... 98 Ajouter des lments HTML ...................................................................................................................................................................................... 98 Ajouter des nuds textuels .................................................................................................................................................................................... 101 Notions sur les rfrences ...................................................................................................................................................................................... 103 Les rfrences ......................................................................................................................................................................................................... 103 Cloner, remplacer, supprimer... ............................................................................................................................................................................... 104 Cloner un lment ................................................................................................................................................................................................... 104 Remplacer un lment par un autre ........................................................................................................................................................................ 105 Supprimer un lment ............................................................................................................................................................................................. 105 Autres actions ......................................................................................................................................................................................................... 105 Vrifier la prsence d'lments enfants .................................................................................................................................................................. 105 Insrer la bonne place : insertBefore() ................................................................................................................................................................. 106 Une bonne astuce : insertAfter() ............................................................................................................................................................................. 106 Minis-TD : recrer une structure DOM .................................................................................................................................................................... 107 Premier exercice ..................................................................................................................................................................................................... 107 Deuxime exercice .................................................................................................................................................................................................. 109 Troisime exercice ................................................................................................................................................................................................... 111

www.siteduzero.com

Sommaire

3/314

Quatrime exercice ................................................................................................................................................................................................. 113 Conclusion des TD .................................................................................................................................................................................................. 115

3) Les vnements ........................................................................................................................................................ 116Que sont les vnements ? ..................................................................................................................................................................................... 116 La thorie ................................................................................................................................................................................................................. 116 La pratique ............................................................................................................................................................................................................... 117 Les vnements au travers du DOM ....................................................................................................................................................................... 119 Le DOM-0 ................................................................................................................................................................................................................ 119 Le DOM-2 ................................................................................................................................................................................................................ 120 Les phases de capture et de bouillonnement ......................................................................................................................................................... 123 L'objet Event ............................................................................................................................................................................................................ 124 Gnralits sur l'objet Event ................................................................................................................................................................................... 124 Les fonctionnalits de l'objet Event ......................................................................................................................................................................... 125 Dclencher soi-mme les vnements ................................................................................................................................................................... 130 La procdure standard ............................................................................................................................................................................................ 130 La procdure selon Internet Explorer < 9 ................................................................................................................................................................ 133

4) Les formulaires .......................................................................................................................................................... 135Les attributs ............................................................................................................................................................................................................. Un attribut classique : value .................................................................................................................................................................................... Les boolens avec : disabled, checked et readonly ................................................................................................................................................ Les listes droulantes avec : selectedIndex et options ........................................................................................................................................... Les mthodes et un retour sur quelques vnements ............................................................................................................................................ Les mthodes spcifiques l'lment ........................................................................................................................................................ La gestion du focus et de la slection ..................................................................................................................................................................... Explications sur l'vnement change ...................................................................................................................................................................... 135 135 135 136 137 137 138 138

5) Manipuler le CSS ...................................................................................................................................................... 138diter les proprits CSS ........................................................................................................................................................................................ 139 Quelques rappels sur le CSS .................................................................................................................................................................................. 139 diter les styles CSS d'un lment ......................................................................................................................................................................... 139 Rcuprer les proprits CSS ................................................................................................................................................................................. 141 La fonction getComputedStyle() .............................................................................................................................................................................. 141 Les attributs de type "offset" .................................................................................................................................................................................... 142 Votre premier script interactif ! ................................................................................................................................................................................. 146 Prsentation de l'exercice ....................................................................................................................................................................................... 146 Correction ................................................................................................................................................................................................................ 147

6) TP : Un formulaire interactif ...................................................................................................................................... 150Prsentation de l'exercice ....................................................................................................................................................................................... Correction ................................................................................................................................................................................................................ Le corrig au grand complet : HTML, CSS et Javascript ........................................................................................................................................ Les explications ....................................................................................................................................................................................................... 151 152 152 158

Partie 3 : Les objets : Conception et utilisation ............................................................................... 1641) Les objets .................................................................................................................................................................. 164Petite problmatique ............................................................................................................................................................................................... 164 Objet constructeur ................................................................................................................................................................................................... 165 Ajouter des mthodes ............................................................................................................................................................................................. 167 Ajouter une mthode ............................................................................................................................................................................................... 167 Ajouter des mthodes aux objets natifs .................................................................................................................................................................. 168 Ajout de mthodes .................................................................................................................................................................................................. 169 Remplacer des mthodes ....................................................................................................................................................................................... 171 Limitations ............................................................................................................................................................................................................... 171 Les namespaces ..................................................................................................................................................................................................... 171 Dfinir un namespace ............................................................................................................................................................................................. 171 Un style de code ...................................................................................................................................................................................................... 172 L'emploi de this ....................................................................................................................................................................................................... 173 Vrifier l'unicit du namespace ............................................................................................................................................................................... 173 Le cas des constructeurs ........................................................................................................................................................................................ 174 Modifier le contexte d'une mthode ........................................................................................................................................................................ 174

2) Les chanes de caractres ........................................................................................................................................ 177Les types primitifs ................................................................................................................................................................................................... 178 L'objet String ........................................................................................................................................................................................................... 179 Proprits ................................................................................................................................................................................................................ 179 Mthodes ................................................................................................................................................................................................................. 180 La casse et les caractres ...................................................................................................................................................................................... 180 toLowerCase() et toUpperCase() ............................................................................................................................................................................ 180 Accder aux caractres ........................................................................................................................................................................................... 181 Supprimer les espaces blancs avec trim() .............................................................................................................................................................. 182 Rechercher, couper et extraire ................................................................................................................................................................................ 182 Connatre la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 182 Extraire une chane avec substring(), substr() et slice() .......................................................................................................................................... 183 Couper une chane en un tableau avec split() ......................................................................................................................................................... 184 Tester l'existence d'une chane de caractres ......................................................................................................................................................... 184

3) Les expressions rgulires (Partie 1/2) .................................................................................................................... 186Les regex en Javascript .......................................................................................................................................................................................... Utilisation ................................................................................................................................................................................................................. Recherches de mots ............................................................................................................................................................................................... Dbut et fin de chane ............................................................................................................................................................................................. Les caractres et leurs classes ............................................................................................................................................................................... Les intervalles de caractres .................................................................................................................................................................................. Trouver un caractre quelconque ........................................................................................................................................................................... Les quantificateurs .................................................................................................................................................................................................. Les 3 symboles quantificateurs ............................................................................................................................................................................... 186 186 187 188 189 189 189 189 190

www.siteduzero.com

Lire aussi

4/314

Les accolades ......................................................................................................................................................................................................... 190 Les mtacaractres ................................................................................................................................................................................................. 191 Les mtacaractres au sein des classes ................................................................................................................................................................ 191 Types gnriques et assertions ............................................................................................................................................................................... 192 Les types gnriques .............................................................................................................................................................................................. 192 Les assertions ......................................................................................................................................................................................................... 192

4) Les expressions rgulires (Partie 2/2) .................................................................................................................... 192Construire une regex ............................................................................................................................................................................................... 193 L'objet RegExp ........................................................................................................................................................................................................ 194 Mthodes ................................................................................................................................................................................................................. 194 Proprits ................................................................................................................................................................................................................ 194 Les parenthses capturantes .................................................................................................................................................................................. 194 Les recherches non-greedy ..................................................................................................................................................................................... 196 Rechercher et remplacer ......................................................................................................................................................................................... 197 L'option g ................................................................................................................................................................................................................. 197 Rechercher et capturer ............................................................................................................................................................................................ 198 Utiliser une fonction pour le remplacement ............................................................................................................................................................. 199 Autres recherches ................................................................................................................................................................................................... 200 Rechercher la position d'une occurrence ................................................................................................................................................................ 200 Rcuprer toutes les occurrences .......................................................................................................................................................................... 201 Couper avec une regex ........................................................................................................................................................................................... 201

5) Les donnes numriques .......................................................................................................................................... 201L'objet Number ........................................................................................................................................................................................................ L'objet Math ............................................................................................................................................................................................................. Les attributs ............................................................................................................................................................................................................. Les mthodes .......................................................................................................................................................................................................... Les inclassables ...................................................................................................................................................................................................... Les fonctions de conversion .................................................................................................................................................................................... Les fonctions de contrle ........................................................................................................................................................................................ 202 203 203 203 206 206 207

6) La gestion du temps .................................................................................................................................................. 208Le systme de datation ........................................................................................................................................................................................... 209 Introduction aux systmes de datation .................................................................................................................................................................... 209 L'objet Date ............................................................................................................................................................................................................. 209 Mise en pratique : Calculer le temps d'excution d'un script ................................................................................................................................... 211 Les fonctions temporelles ........................................................................................................................................................................................ 211 Utiliser setTimeout() et setInterval() ........................................................................................................................................................................ 211 Annuler une action temporelle ................................................................................................................................................................................ 213 Mise en pratique : Les animations ! ......................................................................................................................................................................... 214

7) Les tableaux .............................................................................................................................................................. 215L'objet Array ............................................................................................................................................................................................................. 216 Le constructeur ........................................................................................................................................................................................................ 216 Les proprits .......................................................................................................................................................................................................... 216 Les mthodes .......................................................................................................................................................................................................... 217 Concatner deux tableaux ...................................................................................................................................................................................... 217 Parcourir un tableau ................................................................................................................................................................................................ 218 Rechercher un lment dans un tableau ................................................................................................................................................................ 219 Trier un tableau ....................................................................................................................................................................................................... 220 Extraire une partie d'un tableau .............................................................................................................................................................................. 222 Remplacer une partie d'un tableau ......................................................................................................................................................................... 222 Tester l'existence d'un tableau ................................................................................................................................................................................ 223 Les piles et les files ................................................................................................................................................................................................. 223 Retour sur les mthodes tudies .......................................................................................................................................................................... 223 Les piles .................................................................................................................................................................................................................. 224 Les files ................................................................................................................................................................................................................... 224 Quand les performances sont absentes : unshift() et shift() ................................................................................................................................... 225

8) Les images ................................................................................................................................................................ 226L'objet Image ........................................................................................................................................................................................................... 227 Le constructeur ........................................................................................................................................................................................................ 227 Proprits ................................................................................................................................................................................................................ 227 vnements ............................................................................................................................................................................................................ 227 Particularits ........................................................................................................................................................................................................... 228 Mise en pratique ...................................................................................................................................................................................................... 228

9) Les Polyfills et les Wrappers ..................................................................................................................................... 233Introduction aux Polyfills .......................................................................................................................................................................................... 233 La problmatique .................................................................................................................................................................................................... 233 La solution ............................................................................................................................................................................................................... 233 Quelques Polyfills importants .................................................................................................................................................................................. 233 Introduction aux Wrappers ...................................................................................................................................................................................... 234 La problmatique .................................................................................................................................................................................................... 234 La solution ............................................................................................................................................................................................................... 234

Partie 4 : L'change de donnes avec Ajax .................................................................................... 2381) AJAX : qu'est-ce que c'est ? ..................................................................................................................................... 239Introduction au concept ........................................................................................................................................................................................... Prsentation ............................................................................................................................................................................................................ Fonctionnement ...................................................................................................................................................................................................... Les formats de donnes .......................................................................................................................................................................................... Prsentation ............................................................................................................................................................................................................ Utilisation ................................................................................................................................................................................................................. 239 239 239 239 239 240

2) XMLHttpRequest ....................................................................................................................................................... 242L'objet XMLHttpRequest ......................................................................................................................................................................................... 243 Prsentation ............................................................................................................................................................................................................ 243

www.siteduzero.com

Lire aussi

5/314

XMLHttpRequest, versions 1 et 2 ............................................................................................................................................................................ 243 Premire version : Les bases .................................................................................................................................................................................. 243 Prparation et envoi de la requte .......................................................................................................................................................................... 243 Rception des donnes .......................................................................................................................................................................................... 245 Mise en pratique ...................................................................................................................................................................................................... 249 Rsoudre les problmes d'encodage ...................................................................................................................................................................... 251 L'encodage pour les nuls ........................................................................................................................................................................................ 251 AJAX et l'encodage des caractres ........................................................................................................................................................................ 252 Deuxime version : Usage avanc ......................................................................................................................................................................... 254 Les requtes cross-domain ..................................................................................................................................................................................... 255 Nouvelles proprits et mthodes ........................................................................................................................................................................... 256 Quand les vnements s'affolent ............................................................................................................................................................................ 258 L'objet FormData ..................................................................................................................................................................................................... 259

3) Upload via une iframe ............................................................................................................................................... 262Manipulation des iframes ........................................................................................................................................................................................ Les iframes .............................................................................................................................................................................................................. Accder au contenu ................................................................................................................................................................................................ Chargement de contenu .......................................................................................................................................................................................... Charger une iframe ................................................................................................................................................................................................. Dtecter le chargement ........................................................................................................................................................................................... Rcuprer du contenu ............................................................................................................................................................................................. Rcuprer des donnes Javascript ......................................................................................................................................................................... Exemple complet ..................................................................................................................................................................................................... Le systme d'upload ............................................................................................................................................................................................... Le code ct serveur : upload.php .......................................................................................................................................................................... Un concept simple ................................................................................................................................................................................................... Un premier exemple ................................................................................................................................................................................................ Avec des variables et du PHP ................................................................................................................................................................................. DSL et le format JSON ............................................................................................................................................................................................ Charger du JSON .................................................................................................................................................................................................... Petite astuce pour PHP ........................................................................................................................................................................................... Prsentation de l'exercice ....................................................................................................................................................................................... Les technologies employer .................................................................................................................................................................................. Principe de l'auto-compltion .................................................................................................................................................................................. Conception .............................................................................................................................................................................................................. C'est vous ! ........................................................................................................................................................................................................... Correction ................................................................................................................................................................................................................ Le corrig complet ................................................................................................................................................................................................... Les explications ....................................................................................................................................................................................................... Ides d'amliorations .............................................................................................................................................................................................. 262 262 262 262 263 263 265 265 265 266 267 269 269 270 270 270 271 272 272 272 272 274 275 275 278 285

4) Dynamic Script Loading ............................................................................................................................................ 269

5) TP : Un systme d'auto-compltion .......................................................................................................................... 272

Partie 5 : Javascript et HTML 5 ....................................................................................................... 2861) Qu'est-ce que l'HTML 5 ............................................................................................................................................. 287Rappel des faits ...................................................................................................................................................................................................... Accessibilit et smantique ..................................................................................................................................................................................... Applications Web et interactivit ............................................................................................................................................................................. Concurrencer Flash (et Silverlight) .......................................................................................................................................................................... Les API Javascript ................................................................................................................................................................................................... Anciennes API dsormais standardises ou amliores ........................................................................................................................................ Nouvelles API .......................................................................................................................................................................................................... Nouvelles API que nous allons tudier .................................................................................................................................................................... Premire utilisation .................................................................................................................................................................................................. Les objets Blob et File ............................................................................................................................................................................................. L'objet Blob .............................................................................................................................................................................................................. L'objet File ............................................................................................................................................................................................................... Lire les fichiers ........................................................................................................................................................................................................ Mise en pratique ...................................................................................................................................................................................................... 287 287 287 287 287 287 288 290 291 292 292 292 293 295

2) L'API File ................................................................................................................................................................... 291

Partie 6 : Annexe ............................................................................................................................. 2981) Dboguer votre code ................................................................................................................................................ 299Le dbogage : qu'est-ce que c'est ? ........................................................................................................................................................................ 299 Les consoles d'erreurs ............................................................................................................................................................................................ 300 Mozilla Firefox ......................................................................................................................................................................................................... 300 Internet Explorer ...................................................................................................................................................................................................... 300 Opera ...................................................................................................................................................................................................................... 301 Google Chrome ....................................................................................................................................................................................................... 301 Safari ....................................................................................................................................................................................................................... 302 Les bugs les plus courants ...................................................................................................................................................................................... 303 Les kits de dveloppement ..................................................................................................................................................................................... 304

2) Les closures .............................................................................................................................................................. 306Les variables et leurs accs .................................................................................................................................................................................... Comprendre le problme ........................................................................................................................................................................................ Premier exemple ..................................................................................................................................................................................................... Un cas concret ........................................................................................................................................................................................................ Explorer les solutions .............................................................................................................................................................................................. Une autre utilit, les variables statiques .................................................................................................................................................................. 307 308 308 309 309 312

www.siteduzero.com

Dynamisez vos sites web avec Javascript !

6/314

Dynamisez vos sites web avec Javascript !

Par

Sbastien de la Marck (Thunderseb) et

Johann Pardanaud

(Nesquik69) Mise jour : 28/01/2012 Difficult : Intermdiaire 58 210 visites depuis 7 jours, class 7/777 Bienvenue tous, V ous voici sur la page d'accueil du cours traitant du langage web Javascript ! Au cours de la lecture de ce cours vous apprendrez comment dynamiser vos pages web et les rendre beaucoup plus attrayantes auprs de vos visiteurs. Ce cours traitera de nombreux sujets, en partant des bases vous apprendrez raliser des animations, des applications complexes et utiliser ce langage conjointement avec l'HTML 5, la nouvelle version du fameux langage de balisage du W3C ! Ce cours va principalement aborder l'usage du Javascript conjointement avec l'HTML, il est donc de rigueur que vous sachiez coder la fois en HTML et en CSS. Le PHP peut tre un plus mais vous n'en aurez rellement besoin que lorsque nous aborderons la partie Ajax qui traite des communications entre le Javascript et un serveur. V quelques exemples de ce qui est ralisable grce au Javascript : oici

De gauche droite, vous pouvez trouver : une vido affiche en HTML5 (sans Flash) sur Youtube, l'usage du Javascript y est intensif ; un jeu bas sur le concept de Tetris, nomm Torus, qui utilise la clbre balise ; une modlisation 3D d'une Lamborghini affiche grce au WebGL et la librairie Three.js. Nous esprons vous avoir convaincu de vous lancer dans l'apprentissage de ce fabuleux langage qu'est le Javascript ! Sur ce, bonne lecture !

www.siteduzero.com

Partie 1 : Les bases du Javascript

7/314

Partie 1 : Les bases du JavascriptComme tout langage de programmation, le Javascript possde quelques particularits qui lui sont propres : sa syntaxe, les fonctions anonymes, son modle d'objet, etc... En clair, tout ce qui fait la particularit d'un langage. D'ailleurs, vous dcouvrirez rapidement que le Javascript est un langage assez hors-pair car il est assez "spcial" dans sa manire d'aborder les choses. Bref, cette partie est indispensable pour tout dbutant en programmation et mme pour ceux qui connaissent dj un langage de programmation car les diffrences avec les autres langages sont nombreuses.

1) Introduction au JavascriptAvant de commencer directement dans le vif du sujet, ce chapitre va vous apprendre ce qu'est le Javascript, ce qu'il permet de faire et quand il peut ou doit tre utilis. Un petit historique du langage sera aussi abord pour votre connaissance gnrale du langage.

Qu'est-ce que le Javascript ? DfinitionCitation : Dfinition Javascript est un langage de programmation de scripts orient objet.

Dans cette dfinition un peu barbare se trouvent plusieurs lments que nous allons dcortiquer.

Un langage de programmationTout d'abord, un langage de programmation est un langage qui permet aux dveloppeurs d'crire du code source qui sera analys par l'ordinateur. Un dveloppeur, ou un programmeur, est une personne qui dveloppe des programmes. a peut tre un professionnel (un ingnieur, un informaticien ou un analyste programmeur) ou bien un amateur. Le code source est crit par le dveloppeur. C'est un ensemble d'actions, appele instructions, qui vont permettre de donner des ordres l'ordinateur et ainsi de faire fonctionner le programme. Le code source est quelque chose de cach, un peu comme un moteur dans une voiture : le moteur est cach, mais il est bien l, et c'est lui qui fait en sorte que la voiture puisse tre propulse. Dans le cas d'un programme, c'est pareil, c'est le code source qui rgit le fonctionnement du programme. En fonction du code source, l'ordinateur excute diffrentes actions, comme ouvrir un menu, dmarrer une application, effectuer une recherche, enfin bref, tout ce que l'ordinateur est capable de faire. Il existe normment de langages de programmation, la plupart tant lists sur cette page.

Programmer des scriptsJavascript permet de programmer des scripts. Comme dit plus haut, un langage de programmation permet d'crire du code source qui sera analys par l'ordinateur. Il existe 3 manires d'utiliser du code source. Langage compil Le code source est donn un programme appel compilateur qui va lire le code source et le convertir dans un langage que l'ordinateur sera capable d'interprter : c'est le langage binaire, fait de 0 et de 1. Les langages comme le C ou le C++ sont des langages dits compils. Langage pr-compil Ici, le code source est compil partiellement, gnralement dans un code plus simple lire pour l'ordinateur, mais qui n'est pas encore du binaire. Ce code intermdiaire devra tre lu par ce que l'on appelle une machine virtuelle, qui excutera ce code. Les langages comme le C# ou le Java sont dits pr-compils. Langage interprt

www.siteduzero.com

Partie 1 : Les bases du JavascriptDans ce cas, il n'y a pas de compilation. Le code source reste tel quel, et si on veut excuter ce code, on doit le fournir un interprteur qui se chargera de le lire et de raliser les actions demandes.

8/314

Les scripts sont majoritairement interprts. Ainsi donc, quand on dit que Javascript est un langage de script, cela signifie qu'il s'agit d'un langage interprt ! Il est donc ncessaire de possder un interprteur pour faire fonctionner du code Javascript, et un interprteur, vous en utilisez un frquemment : il est inclus dans votre navigateur Web ! Chaque navigateur possde un interprteur Javascript, qui diffre selon le navigateur. Si vous utilisez Internet Explorer, son interprteur Javascript s'appelle JScript (l'interprteur de la version 9 s'appelle Chakra), alors que celui de Mozilla Firefox se nomme SpiderMonkey tandis que celui de Google Chrome est V8.

Langage orient objetIl reste un dernier fragment analyser : orient objet. Ce concept est assez compliqu dfinir maintenant et sera approfondi par la suite notamment au niveau de la partie II. Sachez toutefois qu'un langage de programmation orient objet est un langage qui contient des lments, appels objets, et que ces diffrents objets possdent des caractristiques spcifiques ainsi que des manires diffrentes de les utiliser. Le langage fournit des objets de base comme les images, les dates, les chanes de caractres... mais il est galement possible de crer n