Dynamisez vos sites web avec Javascript !Par Nesquik69 et Thunderseb

www.siteduzero.com

Dernire mise jour le 12/12/2011

Sommaire

1/359

SommaireSommaire ........................................................................................................................................... 1 Informations sur le tutoriel ................................................................................................................... 5 Dynamisez vos sites web avec Javascript ! ........................................................................................ 7Informations sur le tutoriel ................................................................................................................................................. 7

Partie 1 : Les bases du Javascript ...................................................................................................... 8Introduction au Javascript ................................................................................................................................................. 8Qu'est-ce que le Javascript ? ...................................................................................................................................................................................... 8 Dfinition ..................................................................................................................................................................................................................... 9 Javascript, le langage de scripts ............................................................................................................................................................................... 10 Javascript, pas que le Web ....................................................................................................................................................................................... 10 Petit historique du langage ........................................................................................................................................................................................ 11

Premiers pas en Javascript ............................................................................................................................................. 13Afficher une bote de dialogue .................................................................................................................................................................................. Le Hello World! .......................................................................................................................................................................................................... Les nouveauts ......................................................................................................................................................................................................... La bote de dialogue alert .......................................................................................................................................................................................... La syntaxe Javascript ................................................................................................................................................................................................ Les instructions ......................................................................................................................................................................................................... Les espaces .............................................................................................................................................................................................................. Les commentaires ..................................................................................................................................................................................................... Les fonctions ............................................................................................................................................................................................................. O placer le code dans la page ................................................................................................................................................................................ Le Javascript "dans la page" ..................................................................................................................................................................................... Le Javascript externe ................................................................................................................................................................................................ Positionner l'lment ................................................................................................................................................................................... Quelques aides ......................................................................................................................................................................................................... Qu'est-ce qu'une variable ? ....................................................................................................................................................................................... Dclarer une variable ................................................................................................................................................................................................ Les types de variables .............................................................................................................................................................................................. Tester l'existence de variables avec "typeof" ............................................................................................................................................................ Les oprateurs arithmtiques .................................................................................................................................................................................... Quelques calculs simples .......................................................................................................................................................................................... Simplifier encore plus vos calculs ............................................................................................................................................................................. Initiation la concatnation et la conversion des types ......................................................................................................................................... La concatnation ....................................................................................................................................................................................................... Interagir avec l'utilisateur ........................................................................................................................................................................................... Convertir une chane de caractres en nombre ........................................................................................................................................................ Convertir un nombre en chane de caractres .......................................................................................................................................................... 14 14 14 15 15 16 16 18 19 19 20 21 21 22 25 25 26 27 28 28 29 30 30 30 31 32

Les variables ................................................................................................................................................................... 24

Les conditions ................................................................................................................................................................. 33La base de toute condition : les boolens ................................................................................................................................................................. 33 Les oprateurs de comparaison ................................................................................................................................................................................ 34 Les oprateurs logiques ............................................................................................................................................................................................ 35 Combiner les oprateurs ........................................................................................................................................................................................... 36 La condition "if - else" ................................................................................................................................................................................................ 37 La structure "if" pour dire "si" ..................................................................................................................................................................................... 38 Petit intermde : la fonction confirm .......................................................................................................................................................................... 39 La structure "else" pour dire "sinon" .......................................................................................................................................................................... 39 La structure "else if" pour dire "sinon si" ................................................................................................................................................................... 40 La condition "switch" ................................................................................................................................................................................................. 41 Les ternaires .............................................................................................................................................................................................................. 44 Les conditions sur les variables ................................................................................................................................................................................ 45 Tester l'existence de contenu d'une variable ............................................................................................................................................................ 46 Le cas de l'oprateur OU .......................................................................................................................................................................................... 46 Un petit exercice pour la forme ! ............................................................................................................................................................................... 47 Prsentation de l'exercice ......................................................................................................................................................................................... 47 Correction .................................................................................................................................................................................................................. 47

Les boucles ..................................................................................................................................................................... 48L'incrmentation ........................................................................................................................................................................................................ 48 Le fonctionnement ..................................................................................................................................................................................................... 49 L'ordre des oprateurs .............................................................................................................................................................................................. 49 La boucle while ......................................................................................................................................................................................................... 50 Rpter tant que... ..................................................................................................................................................................................................... 51 Exemple pratique ...................................................................................................................................................................................................... 52 Quelques amliorations ............................................................................................................................................................................................ 52 La boucle do while .................................................................................................................................................................................................... 53

www.siteduzero.com

Sommaire

2/359

La boucle for .............................................................................................................................................................................................................. 55 for, la boucle pour l'incrmentation ........................................................................................................................................................................... 55 Reprenons notre exemple ......................................................................................................................................................................................... 55

Les fonctions ................................................................................................................................................................... 57Concevoir des fonctions ............................................................................................................................................................................................ 58 Crer sa premire fonction ........................................................................................................................................................................................ 58 Un exemple concret .................................................................................................................................................................................................. 59 La porte des variables ............................................................................................................................................................................................. 61 La porte des variables ............................................................................................................................................................................................. 61 Les variables globales ............................................................................................................................................................................................... 61 Les variables globales ? Avec modration ! .............................................................................................................................................................. 62 Les arguments et les valeurs de retour ..................................................................................................................................................................... 63 Les arguments ........................................................................................................................................................................................................... 64 Les valeurs de retour ................................................................................................................................................................................................. 68 Les fonctions anonymes ........................................................................................................................................................................................... 69 Les fonctions anonymes : les bases ......................................................................................................................................................................... 70 Retour sur l'utilisation des points-virgules ................................................................................................................................................................. 70 Les fonctions anonymes : Isoler son code ................................................................................................................................................................ 71

Les objets et les tableaux ................................................................................................................................................ 74Introduction aux objets .............................................................................................................................................................................................. 74 Que contiennent les objets ? ..................................................................................................................................................................................... 75 Exemple d'utilisation .................................................................................................................................................................................................. 76 Objets natifs dj rencontrs .................................................................................................................................................................................... 76 Les tableaux .............................................................................................................................................................................................................. 77 Les indices ................................................................................................................................................................................................................ 78 Dclarer un tableau ................................................................................................................................................................................................... 78 Rcuprer et modifier des valeurs ............................................................................................................................................................................ 79 Oprations sur les tableaux ...................................................................................................................................................................................... 80 Ajouter et supprimer des items ................................................................................................................................................................................. 80 Chanes de caractres et tableaux ........................................................................................................................................................................... 80 Parcourir un tableau .................................................................................................................................................................................................. 81 Parcourir avec for ...................................................................................................................................................................................................... 82 Attention la condition .............................................................................................................................................................................................. 82 Les objets littraux .................................................................................................................................................................................................... 83 La syntaxe d'un objet ................................................................................................................................................................................................ 84 Accs aux items ........................................................................................................................................................................................................ 85 Ajouter des items ...................................................................................................................................................................................................... 85 Parcourir un objet avec for in .................................................................................................................................................................................... 85 Utilisation des objets littraux .................................................................................................................................................................................... 86 Exercice rcapitulatif ................................................................................................................................................................................................. 86 nonc ...................................................................................................................................................................................................................... 87 Correction .................................................................................................................................................................................................................. 87

TP : Convertir un nombre en toutes lettres ..................................................................................................................... 88Prsentation de l'exercice ......................................................................................................................................................................................... 88 La marche suivre .................................................................................................................................................................................................... 89 L'orthographe des nombres ...................................................................................................................................................................................... 89 Tester et convertir les nombres ................................................................................................................................................................................. 89 Il est temps de se lancer ! ......................................................................................................................................................................................... 91 Correction .................................................................................................................................................................................................................. 91 Le corrig complet ..................................................................................................................................................................................................... 92 Les explications ......................................................................................................................................................................................................... 93 Conclusion .............................................................................................................................................................................................................. 100

Partie 2 : Modeler vos pages web ................................................................................................... 100Manipuler le code HTML (Partie 1/2) ............................................................................................................................ 101Le Document Object Model ..................................................................................................................................................................................... 102 Petit historique ........................................................................................................................................................................................................ 102 L'objet window ......................................................................................................................................................................................................... 102 Le document ............................................................................................................................................................................................................ 103 Naviguer dans le document .................................................................................................................................................................................... 103 La structure DOM .................................................................................................................................................................................................... 104 Accder aux lments ............................................................................................................................................................................................. 105 Accder aux lments grce aux technologies rcentes ........................................................................................................................................ 106 L'hritage des proprits et des mthodes ............................................................................................................................................................. 107 Editer les lments HTML ....................................................................................................................................................................................... 108 Les attributs ............................................................................................................................................................................................................. 109 Le contenu : innerHTML .......................................................................................................................................................................................... 111 innerText et textContent .......................................................................................................................................................................................... 113 innerText ................................................................................................................................................................................................................. 113 textContent .............................................................................................................................................................................................................. 113

Manipuler le code HTML (Partie 2/2) ............................................................................................................................ 114Naviguer entre les nuds ....................................................................................................................................................................................... La proprit parentNode ......................................................................................................................................................................................... nodeType et nodeName .......................................................................................................................................................................................... Lister et parcourir des nuds enfants .................................................................................................................................................................... 116 116 116 117

www.siteduzero.com

Sommaire

3/359

Attention aux nuds vides ...................................................................................................................................................................................... 120 Crer et insrer des lments ................................................................................................................................................................................. 121 Ajouter des lments HTML .................................................................................................................................................................................... 122 Ajouter des nuds textuels .................................................................................................................................................................................... 124 Notions sur les rfrences ...................................................................................................................................................................................... 127 Les rfrences ......................................................................................................................................................................................................... 128 Cloner, remplacer, supprimer... ............................................................................................................................................................................... 129 Cloner un lment ................................................................................................................................................................................................... 130 Remplacer un lment par un autre ........................................................................................................................................................................ 130 Supprimer un lment ............................................................................................................................................................................................. 131 Autres actions ......................................................................................................................................................................................................... 132 Vrifier la prsence d'lments enfants .................................................................................................................................................................. 132 Insrer la bonne place : insertBefore() ................................................................................................................................................................. 132 Une bonne astuce : insertAfter() ............................................................................................................................................................................. 132 Minis-TD : recrer une structure DOM .................................................................................................................................................................... 133 Premier exercice ..................................................................................................................................................................................................... 134 Deuxime exercice .................................................................................................................................................................................................. 136 Troisime exercice .................................................................................................................................................................................................. 138 Quatrime exercice ................................................................................................................................................................................................. 140 Conclusion des TD .................................................................................................................................................................................................. 142

Les vnements ............................................................................................................................................................ 142Que sont les vnements ? .................................................................................................................................................................................... La thorie ................................................................................................................................................................................................................ La pratique .............................................................................................................................................................................................................. Les vnements au travers du DOM ...................................................................................................................................................................... Le DOM-0 ................................................................................................................................................................................................................ Le DOM-2 ................................................................................................................................................................................................................ Les phases de capture et de bouillonnement ......................................................................................................................................................... L'objet Event ............................................................................................................................................................................................................ Gnralits sur l'objet Event ................................................................................................................................................................................... Les fonctionnalits de l'objet Event ......................................................................................................................................................................... Dclencher soi-mme les vnements ................................................................................................................................................................... La procdure standard ............................................................................................................................................................................................ La procdure selon Internet Explorer < 9 ................................................................................................................................................................ Les 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 ...................................................................................................................................................................... 143 144 145 147 148 148 151 154 154 154 160 161 164 165 166 166 167 168 169 169 170

Les formulaires .............................................................................................................................................................. 165

Manipuler le CSS .......................................................................................................................................................... 170diter les proprits CSS ........................................................................................................................................................................................ 171 Quelques rappels sur le CSS .................................................................................................................................................................................. 172 diter les styles CSS d'un lment ......................................................................................................................................................................... 172 Rcuprer les proprits CSS ................................................................................................................................................................................. 174 La fonction getComputedStyle() .............................................................................................................................................................................. 175 Les attributs de type "offset" .................................................................................................................................................................................... 176 Votre premier script interactif ! ................................................................................................................................................................................ 180 Prsentation de l'exercice ....................................................................................................................................................................................... 181 Correction ................................................................................................................................................................................................................ 182

TP : Un formulaire interactif .......................................................................................................................................... 185Prsentation de l'exercice ....................................................................................................................................................................................... Correction ................................................................................................................................................................................................................ Le corrig au grand complet : HTML, CSS et Javascript ........................................................................................................................................ Les explications ....................................................................................................................................................................................................... 185 188 188 194

Partie 3 : Les objets ........................................................................................................................ 199Les objets ...................................................................................................................................................................... 200Petite problmatique ............................................................................................................................................................................................... Objet constructeur ................................................................................................................................................................................................... Ajouter des mthodes ............................................................................................................................................................................................. Ajouter une mthode ............................................................................................................................................................................................... Ajouter des mthodes aux objets natifs .................................................................................................................................................................. Ajout de mthodes .................................................................................................................................................................................................. Remplacer des mthodes ....................................................................................................................................................................................... Limitations ............................................................................................................................................................................................................... Les namespaces ..................................................................................................................................................................................................... Dfinir un namespace ............................................................................................................................................................................................. Un style de code ..................................................................................................................................................................................................... L'emploi de this ....................................................................................................................................................................................................... Vrifier l'unicit du namespace ............................................................................................................................................................................... Le cas des constructeurs ........................................................................................................................................................................................ 200 202 205 205 207 207 209 209 210 210 210 211 212 212

www.siteduzero.com

Sommaire

4/359

Modifier le contexte d'une mthode ........................................................................................................................................................................ 213

Les chanes de caractres ............................................................................................................................................ 216Les types primitifs ................................................................................................................................................................................................... 216 L'objet String ........................................................................................................................................................................................................... 218 Proprits ................................................................................................................................................................................................................ 219 Mthodes ................................................................................................................................................................................................................. 219 La casse et les caractres ...................................................................................................................................................................................... 221 toLowerCase() et toUpperCase() ............................................................................................................................................................................ 221 Accder aux caractres .......................................................................................................................................................................................... 221 Supprimer les espaces blancs avec trim() .............................................................................................................................................................. 222 Rechercher, couper et extraire ................................................................................................................................................................................ 222 Connatre la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 223 Extraire une chane avec substring(), substr() et slice() .......................................................................................................................................... 223 Couper une chane en un tableau avec split() ........................................................................................................................................................ 224 Tester l'existence d'une chane de caractres ........................................................................................................................................................ 224

Les expressions rgulires [Partie 1] ............................................................................................................................ 226Les 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 ......................................................................................................................................................................................................... Les mtacaractres ................................................................................................................................................................................................. Les mtacaractres au sein des classes ................................................................................................................................................................ Types gnriques et assertions .............................................................................................................................................................................. Les types gnriques .............................................................................................................................................................................................. Les assertions ......................................................................................................................................................................................................... 227 227 229 230 230 231 231 232 232 232 233 234 235 236 236

Les expressions rgulires [Partie 2] ............................................................................................................................ 236Construire une regex ............................................................................................................................................................................................... 238 L'objet RegExp ........................................................................................................................................................................................................ 240 Mthodes ................................................................................................................................................................................................................. 240 Proprits ................................................................................................................................................................................................................ 240 Les parenthses capturantes .................................................................................................................................................................................. 240 Les recherches non-greedy ..................................................................................................................................................................................... 243 Rechercher et remplacer ......................................................................................................................................................................................... 244 L'option g ................................................................................................................................................................................................................. 245 Rechercher et capturer ............................................................................................................................................................................................ 246 Utiliser une fonction pour le remplacement ............................................................................................................................................................. 247 Autres recherches ................................................................................................................................................................................................... 249 Rechercher la position d'une occurrence ................................................................................................................................................................ 249 Rcuprer toutes les occurrences .......................................................................................................................................................................... 249 Couper avec une regex ........................................................................................................................................................................................... 249

Les donnes numriques .............................................................................................................................................. 250L'objet Number ........................................................................................................................................................................................................ L'objet Math ............................................................................................................................................................................................................. Les attributs ............................................................................................................................................................................................................. Les mthodes .......................................................................................................................................................................................................... Les inclassables ...................................................................................................................................................................................................... Les fonctions de conversion .................................................................................................................................................................................... Les fonctions de contrle ........................................................................................................................................................................................ Le systme de datation ........................................................................................................................................................................................... Introduction aux systmes de datation .................................................................................................................................................................... L'objet Date ............................................................................................................................................................................................................. Mise en pratique : Calculer le temps d'excution d'un script .................................................................................................................................. Les fonctions temporelles ....................................................................................................................................................................................... Utiliser setTimeout() et setInterval() ........................................................................................................................................................................ Annuler une action temporelle ................................................................................................................................................................................ Mise en pratique : Les animations ! ........................................................................................................................................................................ 251 252 253 253 257 257 257 260 260 260 262 263 263 264 265

La gestion du temps ...................................................................................................................................................... 259

Les tableaux .................................................................................................................................................................. 267L'objet Array ............................................................................................................................................................................................................ 267 Le constructeur ........................................................................................................................................................................................................ 268 Les proprits .......................................................................................................................................................................................................... 268 Les mthodes .......................................................................................................................................................................................................... 269 Concatner deux tableaux ...................................................................................................................................................................................... 270 Parcourir un tableau ................................................................................................................................................................................................ 270 Rechercher un lment dans un tableau ................................................................................................................................................................ 271 Trier un tableau ....................................................................................................................................................................................................... 272 Extraire une partie d'un tableau .............................................................................................................................................................................. 275 Remplacer une partie d'un tableau ......................................................................................................................................................................... 275

www.siteduzero.com

Informations sur le tutoriel

5/359276 277 277 277 278 278

Tester l'existence d'un tableau ................................................................................................................................................................................ Les piles et les files ................................................................................................................................................................................................. Retour sur les mthodes tudies .......................................................................................................................................................................... Les piles .................................................................................................................................................................................................................. Les files ................................................................................................................................................................................................................... Quand les performances sont absentes : unshift() et shift() ...................................................................................................................................

Les images .................................................................................................................................................................... 279L'objet Image ........................................................................................................................................................................................................... 280 Le constructeur ........................................................................................................................................................................................................ 280 Proprits ................................................................................................................................................................................................................ 280 vnements ............................................................................................................................................................................................................ 280 Particularits ........................................................................................................................................................................................................... 281 Mise en pratique ...................................................................................................................................................................................................... 281

Les Polyfills et les Wrappers ......................................................................................................................................... 285Introduction aux Polyfills ......................................................................................................................................................................................... 286 La problmatique ..................................................................................................................................................................................................... 287 La solution ............................................................................................................................................................................................................... 287 Quelques Polyfills importants .................................................................................................................................................................................. 287 Introduction aux Wrappers ...................................................................................................................................................................................... 288 La problmatique ..................................................................................................................................................................................................... 289 La solution ............................................................................................................................................................................................................... 289

Partie 4 : L'AJAX ............................................................................................................................. 294AJAX : qu'est-ce que c'est ? .......................................................................................................................................... 294Introduction au concept ........................................................................................................................................................................................... 294 Prsentation ............................................................................................................................................................................................................ 295 Fonctionnement ....................................................................................................................................................................................................... 295 Les formats de donnes .......................................................................................................................................................................................... 296 Prsentation ............................................................................................................................................................................................................ 296 Utilisation ................................................................................................................................................................................................................. 296

XMLHttpRequest ........................................................................................................................................................... 298L'objet XMLHttpRequest ......................................................................................................................................................................................... Prsentation ............................................................................................................................................................................................................ XMLHttpRequest, versions 1 et 2 ........................................................................................................................................................................... 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 ..................................................................................................................................................................................................... Manipulation 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 ....................................................................................................................................................................................................... 299 299 299 299 300 302 305 307 308 309 311 312 313 316 317 318 319 319 319 320 321 322 323 323 324 326 327 329 329 330 331 332 332 333 333 333 335 336 337 340

Upload via une iframe ................................................................................................................................................... 318

Dynamic Script Loading ................................................................................................................................................ 326

TP : Un systme d'auto-compltion .............................................................................................................................. 332

www.siteduzero.com

Informations sur le tutoriel

6/359

Ides d'amliorations .............................................................................................................................................................................................. 347

Partie 5 : Annexe ............................................................................................................................ 349Dboguer votre code ..................................................................................................................................................... 349Le dbogage : qu'est-ce que c'est ? ........................................................................................................................................................................ 349 Les consoles d'erreurs ............................................................................................................................................................................................ 350 Mozilla Firefox ......................................................................................................................................................................................................... 351 Internet Explorer ...................................................................................................................................................................................................... 351 Opera ...................................................................................................................................................................................................................... 352 Google Chrome ....................................................................................................................................................................................................... 352 Safari ....................................................................................................................................................................................................................... 353 Les bugs les plus courants ...................................................................................................................................................................................... 355 Les kits de dveloppement ..................................................................................................................................................................................... 356

www.siteduzero.com

Dynamisez vos sites web avec Javascript !

7/359

Dynamisez vos sites web avec Javascript !Bienvenue tous, Vous 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. Voici quelques exemples de ce qui est ralisable grce au Javascript :

Informations sur le tutorielAuteurs : Johann Pardanaud (Nesquik69) Sbastien de la Marck (Thunderseb) Difficult : Licence :

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

8/359

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.

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

9/359

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.

www.siteduzero.com

Partie 1 : Les bases du Javascript

10/359

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 nous-mme des objets pour nous faciliter la vie et obtenir un code source plus clair (facile lire) et une manire de programmer beaucoup plus intuitive (logique). Il est bien probable que vous n'ayez rien compris ce passage si vous n'avez jamais fait de programmation, mais ne vous en faites pas : vous comprendrez bien assez vite comment tout cela fonctionne .

Javascript, le langage de scriptsLe Javascript est ce jour utilis majoritairement sur Internet, conjointement aux pages Web (HTML ou XHTML). Le Javascript s'inclut directement dans la page Web (ou dans un fichier externe) et permet de dynamiser une page HTML, en ajoutant des interactions avec l'utilisateur, des animations, de l'aide la navigation, comme par exemple : afficher/masquer du texte faire dfiler des images crer un diaporama avec un aperu "en grand" des images crer des infobulles ...

Javascript est un langage dit client-side, c'est--dire que les scripts sont excuts par le navigateur chez l'internaute (le client). Cela diffre des langages de scripts dits server-side qui sont excuts par le serveur Web. C'est le cas des langages tel que PHP. C'est important, car la finalit des scripts client-side et server-side n'est pas la mme. Un script server-side va s'occuper de "crer" la page Web qui sera envoye au navigateur. Ce dernier va alors afficher la page, et ensuite, excuter les scripts clientside tels que Javascript. Voici un schma reprenant ce fonctionnement :

Javascript, pas que le WebSi Javascript a t conu pour tre utilis conjointement avec le HTML, le langage a depuis volu vers d'autres destines. Javascript est rgulirement utilis pour raliser des extensions pour diffrents programmes, un peu comme les scripts cods en

www.siteduzero.com

Partie 1 : Les bases du JavascriptLua ou en Python.

11/359

Javascript peut aussi tre utilis pour raliser des applications. Mozilla Firefox est l'exemple le plus connu : l'interface du navigateur est cre avec une sorte de HTML appel XUL et c'est Javascript qui est utilis pour "motoriser" l'interface. D'autres logiciels reposent aussi sur cette technologie, comme TomTom HOME qui sert grer votre GPS TomTom via votre PC.

A gauche, le navigateur Firefox 4 et droite, le gestionnaire TomTom HOME

www.siteduzero.com

Partie 1 : Les bases du Javascript

12/359

Petit historique du langageEn 1995, Brendan Eich travaille chez Netscape Communication Corporation, la socit qui ditait le clbre navigateur Netscape Navigator, alors principal concurrent d'Internet Explorer. Brendan dveloppe LiveScript, un langage de script qui s'inspire du langage Java, et qui est destin tre install sur les serveurs dvelopps par Netscape. Netscape se met dvelopper une version client de LiveScript, qui sera renomme JavaScript en hommage au langage Java cr par la socit Sun Microsystems. En effet, cette poque, le langage Java tait de plus en plus populaire, et appeler LiveScript JavaScript tait une manire de faire de la publicit, et Java, et JavaScript lui-mme. Mais attention, au final, ces deux langages sont radicalement diffrents ! N'allez pas confondre Java et Javascript car ces deux langages n'ont clairement pas le mme fonctionnement. La graphie de base est JavaScript, avec un S majuscule. Il est cependant courant de lire Javascript, comme ce sera le cas dans ce tutoriel.

Brendan Eich Javascript sort en dcembre 1995 et est embarqu dans le navigateur Netscape 2. De par la popularit du langage, Javascript est un succs, si bien que Microsoft dveloppe une version semblable, appele JScript, qu'il embarque dans Internet Explorer 3, en 1996. Netscape dcide d'envoyer sa version de Javascript l'Ecma International pour que le langage soit standardis, c'est--dire pour qu'une rfrence du langage soit cre et que le langage puisse ainsi tre utilis par d'autres personnes et embarqu dans d'autres logiciels. L'ECMA standardise le langage sous le nom d'ECMAScript. Depuis, les versions de l'ECMAScript ont volu. La version la plus connue et mondialement utilise est la version ECMAScript 1.5, parue en 1999.

L'ECMAScript et ses drivsL'ECMAScript est la rfrence de base. De cette rfrence dcoulent des implmentations. On peut videmment citer Javascript qui est implment dans la plupart des navigateurs, mais encore : JScript : qui est l'implmentation embarque dans Internet Explorer. C'est aussi le nom de linterprteur d'Internet Explorer ; JScript.NET : qui est embarqu dans le framework .NET de Microsoft ; ActionScript : qui est l'implmentation faite par Adobe au sein de Flash ; EX4 : qui est l'implmentation de la gestion du XML d'ECMAScript au sein de SpiderMonkey, l'interprteur Javascript de Firefox.

Les versions de JavascriptJa