Upload
salaheddine019
View
36
Download
0
Embed Size (px)
Citation preview
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/369
SommaireSommaire ........................................................................................................................................... 1 Dynamisez vos sites web avec Javascript ! ....................................................................................... 6 Partie 1 : Les bases du Javascript ...................................................................................................... 71) Introduction au Javascript ............................................................................................................................................. 7Qu'est-ce que le Javascript ? ...................................................................................................................................................................................... 7 Dfinition ..................................................................................................................................................................................................................... 8 Javascript, le langage de scripts ................................................................................................................................................................................. 9 Javascript, pas que le Web ......................................................................................................................................................................................... 9 Petit historique du langage ........................................................................................................................................................................................ 10
2) Premiers pas en Javascript ......................................................................................................................................... 12Afficher une bote de dialogue ................................................................................................................................................................................... 13 Le Hello World! .......................................................................................................................................................................................................... 13 Les nouveauts ......................................................................................................................................................................................................... 13 La bote de dialogue alert .......................................................................................................................................................................................... 14 La syntaxe Javascript ................................................................................................................................................................................................ 14 Les instructions ......................................................................................................................................................................................................... 15 Les espaces .............................................................................................................................................................................................................. 15 Les commentaires ..................................................................................................................................................................................................... 16 Les fonctions ............................................................................................................................................................................................................. 17 O placer le code dans la page ................................................................................................................................................................................ 18 Le Javascript "dans la page" ..................................................................................................................................................................................... 19 Le Javascript externe ................................................................................................................................................................................................ 20 Positionner l'lment ................................................................................................................................................................................... 20 Quelques aides ......................................................................................................................................................................................................... 21
3) Les variables ............................................................................................................................................................... 23Qu'est-ce qu'une variable ? ....................................................................................................................................................................................... 24 Dclarer une variable ................................................................................................................................................................................................ 24 Les types de variables ............................................................................................................................................................................................... 25 Tester l'existence de variables avec "typeof" ............................................................................................................................................................ 26 Les oprateurs arithmtiques .................................................................................................................................................................................... 27 Quelques calculs simples .......................................................................................................................................................................................... 27 Simplifier encore plus vos calculs ............................................................................................................................................................................. 28 Initiation la concatnation et la conversion des types ......................................................................................................................................... 29 La concatnation ....................................................................................................................................................................................................... 29 Interagir avec l'utilisateur ........................................................................................................................................................................................... 29 Convertir une chane de caractres en nombre ........................................................................................................................................................ 30 Convertir un nombre en chane de caractres .......................................................................................................................................................... 31
4) Les conditions ............................................................................................................................................................. 32La base de toute condition : les boolens ................................................................................................................................................................. 32 Les oprateurs de comparaison ................................................................................................................................................................................ 33 Les oprateurs logiques ............................................................................................................................................................................................ 34 Combiner les oprateurs ........................................................................................................................................................................................... 35 La condition "if - else" ................................................................................................................................................................................................ 36 La structure "if" pour dire "si" ..................................................................................................................................................................................... 37 Petit intermde : la fonction confirm .......................................................................................................................................................................... 38 La structure "else" pour dire "sinon" .......................................................................................................................................................................... 38 La structure "else if" pour dire "sinon si" ................................................................................................................................................................... 39 La condition "switch" ................................................................................................................................................................................................. 39 Les ternaires .............................................................................................................................................................................................................. 42 Les conditions sur les variables ................................................................................................................................................................................ 44 Tester l'existence de contenu d'une variable ............................................................................................................................................................. 45 Le cas de l'oprateur OU .......................................................................................................................................................................................... 45 Un petit exercice pour la forme ! ............................................................................................................................................................................... 45 Prsentation de l'exercice ......................................................................................................................................................................................... 46 Correction .................................................................................................................................................................................................................. 46
5) Les boucles ................................................................................................................................................................. 47L'incrmentation ........................................................................................................................................................................................................ 47 Le fonctionnement ..................................................................................................................................................................................................... 48 L'ordre des oprateurs .............................................................................................................................................................................................. 48 La boucle while .......................................................................................................................................................................................................... 50 Rpter tant que... ..................................................................................................................................................................................................... 50 Exemple pratique ...................................................................................................................................................................................................... 50 Quelques amliorations ............................................................................................................................................................................................ 51 La boucle do while ..................................................................................................................................................................................................... 52 La boucle for .............................................................................................................................................................................................................. 53 for, la boucle pour l'incrmentation ............................................................................................................................................................................ 54 Reprenons notre exemple ......................................................................................................................................................................................... 54
6) Les fonctions ............................................................................................................................................................... 56Concevoir des fonctions ............................................................................................................................................................................................ Crer sa premire fonction ........................................................................................................................................................................................ Un exemple concret .................................................................................................................................................................................................. La porte des variables ............................................................................................................................................................................................. La porte des variables ............................................................................................................................................................................................. Les variables globales ............................................................................................................................................................................................... Les variables globales ? Avec modration ! .............................................................................................................................................................. 56 57 58 59 60 60 61
www.siteduzero.com
Sommaire
2/369
Les arguments et les valeurs de retour ..................................................................................................................................................................... 62 Les arguments .......................................................................................................................................................................................................... 63 Les valeurs de retour ................................................................................................................................................................................................. 67 Les fonctions anonymes ........................................................................................................................................................................................... 68 Les fonctions anonymes : les bases ......................................................................................................................................................................... 69 Retour sur l'utilisation des points-virgules ................................................................................................................................................................. 69 Les fonctions anonymes : Isoler son code ................................................................................................................................................................ 70
7) Les objets et les tableaux ........................................................................................................................................... 73Introduction aux objets .............................................................................................................................................................................................. 73 Que contiennent les objets ? ..................................................................................................................................................................................... 74 Exemple d'utilisation .................................................................................................................................................................................................. 75 Objets natifs dj rencontrs .................................................................................................................................................................................... 75 Les tableaux .............................................................................................................................................................................................................. 75 Les indices ................................................................................................................................................................................................................ 76 Dclarer un tableau ................................................................................................................................................................................................... 76 Rcuprer et modifier des valeurs ............................................................................................................................................................................ 77 Oprations sur les tableaux ....................................................................................................................................................................................... 78 Ajouter et supprimer des items ................................................................................................................................................................................. 78 Chanes de caractres et tableaux ............................................................................................................................................................................ 78 Parcourir un tableau .................................................................................................................................................................................................. 79 Parcourir avec for ...................................................................................................................................................................................................... 80 Attention la condition .............................................................................................................................................................................................. 80 Les objets littraux .................................................................................................................................................................................................... 81 La syntaxe d'un objet ................................................................................................................................................................................................ 82 Accs aux items ........................................................................................................................................................................................................ 82 Ajouter des items ...................................................................................................................................................................................................... 83 Parcourir un objet avec for in .................................................................................................................................................................................... 83 Utilisation des objets littraux .................................................................................................................................................................................... 84 Exercice rcapitulatif ................................................................................................................................................................................................. 84 nonc ...................................................................................................................................................................................................................... 85 Correction .................................................................................................................................................................................................................. 85
8) TP : Convertir un nombre en toutes lettres ................................................................................................................. 86Prsentation 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 ................................................................................................................................................................................................................ 87 87 87 87 88 90 90 91 97
Partie 2 : Modeler vos pages web ..................................................................................................... 981) Manipuler le code HTML (Partie 1/2) .......................................................................................................................... 99Le Document Object Model ....................................................................................................................................................................................... 99 Petit historique ........................................................................................................................................................................................................ 100 L'objet window ......................................................................................................................................................................................................... 100 Le document ........................................................................................................................................................................................................... 101 Naviguer dans le document .................................................................................................................................................................................... 101 La structure DOM .................................................................................................................................................................................................... 102 Accder aux lments ............................................................................................................................................................................................. 103 Accder aux lments grce aux technologies rcentes ........................................................................................................................................ 104 L'hritage des proprits et des mthodes ............................................................................................................................................................. 105 Editer les lments HTML ....................................................................................................................................................................................... 107 Les attributs ............................................................................................................................................................................................................. 107 Le contenu : innerHTML .......................................................................................................................................................................................... 109 innerText et textContent ........................................................................................................................................................................................... 110 innerText .................................................................................................................................................................................................................. 111 textContent .............................................................................................................................................................................................................. 111
2) Manipuler le code HTML (Partie 2/2) ........................................................................................................................ 112Naviguer entre les nuds ....................................................................................................................................................................................... 113 La proprit parentNode .......................................................................................................................................................................................... 113 nodeType et nodeName .......................................................................................................................................................................................... 113 Lister et parcourir des nuds enfants ..................................................................................................................................................................... 114 Attention aux nuds vides ...................................................................................................................................................................................... 117 Crer et insrer des lments ................................................................................................................................................................................. 117 Ajouter des lments HTML .................................................................................................................................................................................... 118 Ajouter des nuds textuels .................................................................................................................................................................................... 120 Notions sur les rfrences ...................................................................................................................................................................................... 122 Les rfrences ......................................................................................................................................................................................................... 123 Cloner, remplacer, supprimer... ............................................................................................................................................................................... 124 Cloner un lment ................................................................................................................................................................................................... 125 Remplacer un lment par un autre ........................................................................................................................................................................ 125 Supprimer un lment ............................................................................................................................................................................................. 125 Autres actions ......................................................................................................................................................................................................... 127 Vrifier la prsence d'lments enfants .................................................................................................................................................................. 127 Insrer la bonne place : insertBefore() ................................................................................................................................................................. 127 Une bonne astuce : insertAfter() ............................................................................................................................................................................. 127 Minis-TD : recrer une structure DOM .................................................................................................................................................................... 128 Premier exercice ..................................................................................................................................................................................................... 129 Deuxime exercice .................................................................................................................................................................................................. 131 Troisime exercice .................................................................................................................................................................................................. 133 Quatrime exercice ................................................................................................................................................................................................. 135
www.siteduzero.com
Sommaire
3/369
Conclusion des TD .................................................................................................................................................................................................. 137
3) Les vnements ........................................................................................................................................................ 137Que sont les vnements ? .................................................................................................................................................................................... 139 La thorie ................................................................................................................................................................................................................ 139 La pratique .............................................................................................................................................................................................................. 140 Les vnements au travers du DOM ....................................................................................................................................................................... 142 Le DOM-0 ................................................................................................................................................................................................................ 143 Le DOM-2 ................................................................................................................................................................................................................ 143 Les phases de capture et de bouillonnement ......................................................................................................................................................... 146 L'objet Event ............................................................................................................................................................................................................ 148 Gnralits sur l'objet Event ................................................................................................................................................................................... 149 Les fonctionnalits de l'objet Event ......................................................................................................................................................................... 149 Dclencher soi-mme les vnements ................................................................................................................................................................... 156 La procdure standard ............................................................................................................................................................................................ 156 La procdure selon Internet Explorer < 9 ................................................................................................................................................................ 159
4) Les formulaires .......................................................................................................................................................... 159Les 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 ...................................................................................................................................................................... 159 160 160 161 162 163 163 164
5) Manipuler le CSS ...................................................................................................................................................... 164diter les proprits CSS ........................................................................................................................................................................................ 165 Quelques rappels sur le CSS .................................................................................................................................................................................. 165 diter les styles CSS d'un lment ......................................................................................................................................................................... 165 Rcuprer les proprits CSS ................................................................................................................................................................................. 167 La fonction getComputedStyle() .............................................................................................................................................................................. 168 Les attributs de type "offset" .................................................................................................................................................................................... 169 Votre premier script interactif ! ................................................................................................................................................................................. 173 Prsentation de l'exercice ....................................................................................................................................................................................... 173 Correction ................................................................................................................................................................................................................ 174
6) TP : Un formulaire interactif ...................................................................................................................................... 177Prsentation de l'exercice ....................................................................................................................................................................................... Correction ................................................................................................................................................................................................................ Le corrig au grand complet : HTML, CSS et Javascript ........................................................................................................................................ Les explications ....................................................................................................................................................................................................... 177 179 180 185
Partie 3 : Les objets : Conception et utilisation ............................................................................... 1911) Les objets .................................................................................................................................................................. 192Petite problmatique ............................................................................................................................................................................................... 193 Objet constructeur ................................................................................................................................................................................................... 193 Ajouter des mthodes ............................................................................................................................................................................................. 196 Ajouter une mthode ............................................................................................................................................................................................... 197 Ajouter des mthodes aux objets natifs .................................................................................................................................................................. 199 Ajout de mthodes .................................................................................................................................................................................................. 199 Remplacer des mthodes ....................................................................................................................................................................................... 201 Limitations ............................................................................................................................................................................................................... 201 Les namespaces ..................................................................................................................................................................................................... 201 Dfinir un namespace ............................................................................................................................................................................................. 202 Un style de code ...................................................................................................................................................................................................... 202 L'emploi de this ....................................................................................................................................................................................................... 203 Vrifier l'unicit du namespace ............................................................................................................................................................................... 204 Le cas des constructeurs ........................................................................................................................................................................................ 204 Modifier le contexte d'une mthode ........................................................................................................................................................................ 205
2) Les chanes de caractres ........................................................................................................................................ 208Les types primitifs ................................................................................................................................................................................................... 208 L'objet String ........................................................................................................................................................................................................... 210 Proprits ................................................................................................................................................................................................................ 211 Mthodes ................................................................................................................................................................................................................. 211 La casse et les caractres ...................................................................................................................................................................................... 212 toLowerCase() et toUpperCase() ............................................................................................................................................................................ 213 Accder aux caractres ........................................................................................................................................................................................... 213 Supprimer les espaces blancs avec trim() .............................................................................................................................................................. 214 Rechercher, couper et extraire ................................................................................................................................................................................ 215 Connatre la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 215 Extraire une chane avec substring(), substr() et slice() .......................................................................................................................................... 215 Couper une chane en un tableau avec split() ......................................................................................................................................................... 216 Tester l'existence d'une chane de caractres ......................................................................................................................................................... 216
3) Les expressions rgulires (Partie 1/2) .................................................................................................................... 218Les 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 ............................................................................................................................................................................... Les accolades ......................................................................................................................................................................................................... 218 219 221 222 222 223 223 224 224 224
www.siteduzero.com
Sommaire
4/369
Les mtacaractres ................................................................................................................................................................................................. 225 Les mtacaractres au sein des classes ................................................................................................................................................................ 226 Types gnriques et assertions ............................................................................................................................................................................... 227 Les types gnriques .............................................................................................................................................................................................. 227 Les assertions ......................................................................................................................................................................................................... 227
4) Les expressions rgulires (Partie 2/2) .................................................................................................................... 227Construire une regex ............................................................................................................................................................................................... 228 L'objet RegExp ........................................................................................................................................................................................................ 230 Mthodes ................................................................................................................................................................................................................. 230 Proprits ................................................................................................................................................................................................................ 230 Les parenthses capturantes .................................................................................................................................................................................. 230 Les recherches non-greedy ..................................................................................................................................................................................... 233 Rechercher et remplacer ......................................................................................................................................................................................... 235 L'option g ................................................................................................................................................................................................................. 235 Rechercher et capturer ............................................................................................................................................................................................ 235 Utiliser une fonction pour le remplacement ............................................................................................................................................................. 237 Autres recherches ................................................................................................................................................................................................... 238 Rechercher la position d'une occurrence ................................................................................................................................................................ 239 Rcuprer toutes les occurrences .......................................................................................................................................................................... 239 Couper avec une regex ........................................................................................................................................................................................... 239
5) Les donnes numriques .......................................................................................................................................... 240L'objet Number ........................................................................................................................................................................................................ L'objet Math ............................................................................................................................................................................................................. Les attributs ............................................................................................................................................................................................................. Les mthodes .......................................................................................................................................................................................................... Les inclassables ...................................................................................................................................................................................................... Les fonctions de conversion .................................................................................................................................................................................... Les fonctions de contrle ........................................................................................................................................................................................ 241 242 243 243 245 246 246
6) La gestion du temps .................................................................................................................................................. 248Le systme de datation ........................................................................................................................................................................................... 248 Introduction aux systmes de datation .................................................................................................................................................................... 249 L'objet Date ............................................................................................................................................................................................................. 249 Mise en pratique : Calculer le temps d'excution d'un script ................................................................................................................................... 251 Les fonctions temporelles ....................................................................................................................................................................................... 251 Utiliser setTimeout() et setInterval() ........................................................................................................................................................................ 252 Annuler une action temporelle ................................................................................................................................................................................ 253 Mise en pratique : Les animations ! ......................................................................................................................................................................... 254
7) Les tableaux .............................................................................................................................................................. 255L'objet Array ............................................................................................................................................................................................................. 256 Le constructeur ........................................................................................................................................................................................................ 256 Les proprits .......................................................................................................................................................................................................... 256 Les mthodes .......................................................................................................................................................................................................... 258 Concatner deux tableaux ...................................................................................................................................................................................... 258 Parcourir un tableau ................................................................................................................................................................................................ 258 Rechercher un lment dans un tableau ................................................................................................................................................................ 259 Trier un tableau ....................................................................................................................................................................................................... 260 Extraire une partie d'un tableau .............................................................................................................................................................................. 263 Remplacer une partie d'un tableau ......................................................................................................................................................................... 263 Tester l'existence d'un tableau ................................................................................................................................................................................ 264 Les piles et les files ................................................................................................................................................................................................. 264 Retour sur les mthodes tudies .......................................................................................................................................................................... 265 Les piles .................................................................................................................................................................................................................. 265 Les files ................................................................................................................................................................................................................... 266 Quand les performances sont absentes : unshift() et shift() ................................................................................................................................... 266
8) Les images ................................................................................................................................................................ 267L'objet Image ........................................................................................................................................................................................................... 267 Le constructeur ........................................................................................................................................................................................................ 268 Proprits ................................................................................................................................................................................................................ 268 vnements ............................................................................................................................................................................................................ 268 Particularits ........................................................................................................................................................................................................... 269 Mise en pratique ...................................................................................................................................................................................................... 270
9) Les Polyfills et les Wrappers ..................................................................................................................................... 273Introduction aux Polyfills .......................................................................................................................................................................................... 273 La problmatique .................................................................................................................................................................................................... 274 La solution ............................................................................................................................................................................................................... 274 Quelques Polyfills importants .................................................................................................................................................................................. 274 Introduction aux Wrappers ...................................................................................................................................................................................... 276 La problmatique .................................................................................................................................................................................................... 276 La solution ............................................................................................................................................................................................................... 276
Partie 4 : L'change de donnes avec Ajax .................................................................................... 2811) AJAX : qu'est-ce que c'est ? ..................................................................................................................................... 281Introduction au concept ........................................................................................................................................................................................... Prsentation ............................................................................................................................................................................................................ Fonctionnement ...................................................................................................................................................................................................... Les formats de donnes .......................................................................................................................................................................................... Prsentation ............................................................................................................................................................................................................ Utilisation ................................................................................................................................................................................................................. 281 282 282 282 283 283
2) XMLHttpRequest ....................................................................................................................................................... 285L'objet XMLHttpRequest ......................................................................................................................................................................................... 285 Prsentation ............................................................................................................................................................................................................ 286 XMLHttpRequest, versions 1 et 2 ............................................................................................................................................................................ 286
www.siteduzero.com
Sommaire
5/369287 287 289 292 294 295 296 299 299 300 302 303
Premire version : Les bases .................................................................................................................................................................................. Prparation et envoi de la requte .......................................................................................................................................................................... Rception des donnes .......................................................................................................................................................................................... Mise en pratique ...................................................................................................................................................................................................... Rsoudre les problmes d'encodage ...................................................................................................................................................................... L'encodage pour les nuls ........................................................................................................................................................................................ AJAX et l'encodage des caractres ........................................................................................................................................................................ Deuxime version : Usage avanc ......................................................................................................................................................................... Les requtes cross-domain ..................................................................................................................................................................................... Nouvelles proprits et mthodes ........................................................................................................................................................................... Quand les vnements s'affolent ............................................................................................................................................................................ L'objet FormData .....................................................................................................................................................................................................
3) Upload via une iframe ............................................................................................................................................... 305Manipulation des iframes ........................................................................................................................................................................................ 305 Les iframes .............................................................................................................................................................................................................. 306 Accder au contenu ................................................................................................................................................................................................ 306 Chargement de contenu .......................................................................................................................................................................................... 307 Charger une iframe ................................................................................................................................................................................................. 307 Dtecter le chargement ........................................................................................................................................................................................... 307 Rcuprer du contenu ............................................................................................................................................................................................. 310 Rcuprer des donnes Javascript ......................................................................................................................................................................... 310 Exemple complet ..................................................................................................................................................................................................... 310 Le systme d'upload ................................................................................................................................................................................................ 311 Le code ct serveur : upload.php .......................................................................................................................................................................... 312
4) Dynamic Script Loading ............................................................................................................................................ 313Un 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 .............................................................................................................................................................................................. 313 314 316 316 317 318 319 319 319 319 321 322 322 325 332
5) TP : Un systme d'auto-compltion .......................................................................................................................... 318
Partie 5 : Javascript et HTML 5 ....................................................................................................... 3331) Qu'est-ce que l'HTML 5 ............................................................................................................................................. 334Rappel 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 ...................................................................................................................................................................................................... 334 335 335 335 336 336 336 338 339 340 341 341 342 345
2) L'API File ................................................................................................................................................................... 338
Partie 6 : Annexe ............................................................................................................................. 3481) Dboguer votre code ................................................................................................................................................ 349Le dbogage : qu'est-ce que c'est ? ........................................................................................................................................................................ 350 Les consoles d'erreurs ............................................................................................................................................................................................ 350 Mozilla Firefox ......................................................................................................................................................................................................... 351 Internet Explorer ...................................................................................................................................................................................................... 351 Opera ...................................................................................................................................................................................................................... 352 Google Chrome ....................................................................................................................................................................................................... 353 Safari ....................................................................................................................................................................................................................... 353 Les bugs les plus courants ...................................................................................................................................................................................... 354 Les kits de dveloppement ..................................................................................................................................................................................... 356
2) Les closures .............................................................................................................................................................. 358Les variables et leurs accs .................................................................................................................................................................................... 359 Comprendre le problme ........................................................................................................................................................................................ 360 Premier exemple ..................................................................................................................................................................................................... 361 Un cas concret ........................................................................................................................................................................................................ 361 Explorer les solutions .............................................................................................................................................................................................. 362 Une autre utilit, les variables statiques .................................................................................................................................................................. 365 Partager ................................................................................................................................................................................................................... 368 Lire aussi ................................................................................................................................................................................................................. 368
www.siteduzero.com
Dynamisez vos sites web avec Javascript !
6/369
Dynamisez vos sites web avec Javascript !
Par
Sbastien de la Marck (Thunderseb) et
Johann Pardanaud
(Nesquik69) Mise jour : 28/01/2012 Difficult : Intermdiaire 63 631 visites depuis 7 jours, class 7/794 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 ! Retour en haut Retour en haut
www.siteduzero.com
Partie 1 : Les bases du Javascript
7/369
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. Retour en haut
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. Et comme l'histoire intresse quand mme pas mal de monde, vous avez mme le droit une partie consacre l'histoire de ce langage !
www.siteduzero.com
Partie 1 : Les bases du Javascript
8/369
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 Dans 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. 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 objet
www.siteduzero.com
Partie 1 : Les bases du Javascript
9/369
Il reste un dernier fragment analyser : orient objet. Ce concept est assez compliqu dfinir maintenant et sera approfond
