375
Dynamisez vos sites web avec Javascript ! Par Johann Pardanaud (Nesquik69) et Sébastien de la Marck (Thunderseb) www.siteduzero.com Licence Creative Commons BY-NC-SA 2.0 Dernière mise à jour le 27/07/2012

Dynamisez vos sites web avec javascript

Embed Size (px)

DESCRIPTION

Dynamisez vos sites web avec javascript

Citation preview

  • Dynamisez vos sitesweb avec Javascript !

    Par Johann Pardanaud (Nesquik69) et Sbastien de la Marck (Thunderseb)

    www.siteduzero.com

    Licence Creative Commons BY-NC-SA 2.0Dernire mise jour le 27/07/2012

  • Sommaire 2Sommaire ........................................................................................................................................... 6Lire aussi ............................................................................................................................................ 8 Dynamisez vos sites web avec Javascript ! ....................................................................................... 9Partie 1 : Les bases du Javascript ......................................................................................................

    10Introduction au Javascript ............................................................................................................................................... 10Qu'est-ce que le Javascript ? .................................................................................................................................................................................... 10Qu'est-ce que c'est ? ................................................................................................................................................................................................. 11Le Javascript, le langage de scripts .......................................................................................................................................................................... 12Le Javascript, pas que le Web .................................................................................................................................................................................. 12Petit historique du langage ........................................................................................................................................................................................ 13L'ECMAScript et ses drivs ..................................................................................................................................................................................... 13Les versions du Javascript ........................................................................................................................................................................................ 13Un logo inconnu ........................................................................................................................................................................................................

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

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

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

    44Les boucles ..................................................................................................................................................................... 45L'incrmentation ........................................................................................................................................................................................................ 45Le fonctionnement ..................................................................................................................................................................................................... 45L'ordre des oprateurs .............................................................................................................................................................................................. 46La boucle while .......................................................................................................................................................................................................... 47Rpter tant que .................................................................................................................................................................................................... 47Exemple pratique ...................................................................................................................................................................................................... 48Quelques amliorations ............................................................................................................................................................................................ 48La boucle do while ..................................................................................................................................................................................................... 49La boucle for .............................................................................................................................................................................................................. 49for, la boucle conue pour l'incrmentation ............................................................................................................................................................... 49Reprenons notre exemple .........................................................................................................................................................................................

    51Les fonctions ................................................................................................................................................................... 52Concevoir des fonctions ............................................................................................................................................................................................ 52Crer sa premire fonction ........................................................................................................................................................................................ 53Un exemple concret ..................................................................................................................................................................................................

    2/376

    www.siteduzero.com

  • 54La porte des variables ............................................................................................................................................................................................. 54La porte des variables ............................................................................................................................................................................................. 55Les variables globales ............................................................................................................................................................................................... 55Les variables globales ? Avec modration ! .............................................................................................................................................................. 56Les arguments et les valeurs de retour ..................................................................................................................................................................... 56Les arguments .......................................................................................................................................................................................................... 60Les valeurs de retour ................................................................................................................................................................................................. 61Les fonctions anonymes ........................................................................................................................................................................................... 61Les fonctions anonymes : les bases ......................................................................................................................................................................... 62Retour sur l'utilisation des points-virgules ................................................................................................................................................................. 63Les fonctions anonymes : isoler son code ................................................................................................................................................................

    67Les objets et les tableaux ................................................................................................................................................ 67Introduction aux objets .............................................................................................................................................................................................. 67Que contiennent les objets ? ..................................................................................................................................................................................... 68Exemple d'utilisation .................................................................................................................................................................................................. 68Objets natifs dj rencontrs .................................................................................................................................................................................... 68Les tableaux .............................................................................................................................................................................................................. 69Les indices ................................................................................................................................................................................................................ 69Dclarer un tableau ................................................................................................................................................................................................... 70Rcuprer et modifier des valeurs ............................................................................................................................................................................ 70Oprations sur les tableaux ....................................................................................................................................................................................... 70Ajouter et supprimer des items ................................................................................................................................................................................. 71Chanes de caractres et tableaux ............................................................................................................................................................................ 71Parcourir un tableau .................................................................................................................................................................................................. 72Parcourir avec for ...................................................................................................................................................................................................... 72Attention la condition .............................................................................................................................................................................................. 73Les objets littraux .................................................................................................................................................................................................... 73La syntaxe d'un objet ................................................................................................................................................................................................ 74Accs aux items ........................................................................................................................................................................................................ 74Ajouter des items ...................................................................................................................................................................................................... 75Parcourir un objet avec for in .................................................................................................................................................................................... 75Utilisation des objets littraux .................................................................................................................................................................................... 76Exercice rcapitulatif ................................................................................................................................................................................................. 76nonc ...................................................................................................................................................................................................................... 76Correction ..................................................................................................................................................................................................................

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

    88Partie 2 : Modeler vos pages Web .................................................................................................... 89Manipuler le code HTML (partie 1/2) ............................................................................................................................... 89Le Document Object Model ....................................................................................................................................................................................... 89Petit historique .......................................................................................................................................................................................................... 89L'objet window ........................................................................................................................................................................................................... 91Le document ............................................................................................................................................................................................................. 91Naviguer dans le document ...................................................................................................................................................................................... 91La structure DOM ...................................................................................................................................................................................................... 93Accder aux lments ............................................................................................................................................................................................... 94Accder aux lments grce aux technologies rcentes .......................................................................................................................................... 95L'hritage des proprits et des mthodes ............................................................................................................................................................... 96diter les lments HTML ......................................................................................................................................................................................... 96Les attributs ............................................................................................................................................................................................................... 98Le contenu : innerHTML ............................................................................................................................................................................................ 99innerText et textContent ............................................................................................................................................................................................ 99innerText ....................................................................................................................................................................................................................

    100textContent .............................................................................................................................................................................................................. 101Manipuler le code HTML (partie 2/2) ............................................................................................................................. 102Naviguer entre les nuds ....................................................................................................................................................................................... 102La proprit parentNode ......................................................................................................................................................................................... 102nodeType et nodeName .......................................................................................................................................................................................... 103Lister et parcourir des nuds enfants .................................................................................................................................................................... 106Attention aux nuds vides ...................................................................................................................................................................................... 107Crer et insrer des lments ................................................................................................................................................................................. 107Ajouter des lments HTML .................................................................................................................................................................................... 109Ajouter des nuds textuels .................................................................................................................................................................................... 111Notions sur les rfrences ....................................................................................................................................................................................... 111Les rfrences ......................................................................................................................................................................................................... 112Cloner, remplacer, supprimer ............................................................................................................................................................................... 112Cloner un lment ................................................................................................................................................................................................... 113Remplacer un lment par un autre ........................................................................................................................................................................ 113Supprimer un lment ............................................................................................................................................................................................. 114Autres actions .......................................................................................................................................................................................................... 114Vrifier la prsence d'lments enfants .................................................................................................................................................................. 114Insrer la bonne place : insertBefore() ................................................................................................................................................................. 115Une bonne astuce : insertAfter() .............................................................................................................................................................................. 115Mini-TP : recrer une structure DOM .......................................................................................................................................................................

    Sommaire 3/376

    www.siteduzero.com

  • 115Premier exercice ...................................................................................................................................................................................................... 117Deuxime exercice .................................................................................................................................................................................................. 119Troisime exercice .................................................................................................................................................................................................. 121Quatrime exercice ................................................................................................................................................................................................. 123Conclusion des TP ..................................................................................................................................................................................................

    124Les vnements ............................................................................................................................................................ 124Que sont les vnements ? .................................................................................................................................................................................... 124La thorie ................................................................................................................................................................................................................ 125La pratique .............................................................................................................................................................................................................. 127Les vnements au travers du DOM ....................................................................................................................................................................... 127Le DOM-0 ................................................................................................................................................................................................................ 128Le DOM-2 ................................................................................................................................................................................................................ 131Les phases de capture et de bouillonnement ......................................................................................................................................................... 132L'objet Event ............................................................................................................................................................................................................ 133Gnralits sur l'objet Event ................................................................................................................................................................................... 133Les fonctionnalits de l'objet Event ......................................................................................................................................................................... 139Rsoudre les problmes d'hritage des vnements ............................................................................................................................................. 139Le problme ............................................................................................................................................................................................................ 140La solution ...............................................................................................................................................................................................................

    143Les formulaires .............................................................................................................................................................. 144Les proprits .......................................................................................................................................................................................................... 144Une proprit classique : value ............................................................................................................................................................................... 144Les boolens avec disabled, checked et readonly .................................................................................................................................................. 145Les listes droulantes avec selectedIndex et options ............................................................................................................................................. 146Les mthodes et un retour sur quelques vnements ............................................................................................................................................ 146Les mthodes spcifiques l'lment ........................................................................................................................................................ 147La gestion du focus et de la slection ..................................................................................................................................................................... 147Explications sur l'vnement change ......................................................................................................................................................................

    148Manipuler le CSS .......................................................................................................................................................... 149diter les proprits CSS ........................................................................................................................................................................................ 149Quelques rappels sur le CSS .................................................................................................................................................................................. 149diter les styles CSS d'un lment ......................................................................................................................................................................... 151Rcuprer les proprits CSS ................................................................................................................................................................................. 151La fonction getComputedStyle() .............................................................................................................................................................................. 152Les proprits de type offset ................................................................................................................................................................................... 156Votre premier script interactif ! ................................................................................................................................................................................. 156Prsentation de l'exercice ....................................................................................................................................................................................... 157Correction ................................................................................................................................................................................................................

    162TP : un formulaire interactif ........................................................................................................................................... 162Prsentation de l'exercice ....................................................................................................................................................................................... 163Correction ................................................................................................................................................................................................................ 163Le corrig au grand complet : HTML, CSS et Javascript ........................................................................................................................................ 169Les explications .......................................................................................................................................................................................................

    174Partie 3 : Les objets : conception et utilisation ................................................................................ 175Les objets ...................................................................................................................................................................... 175Petite problmatique ............................................................................................................................................................................................... 176Objet constructeur ................................................................................................................................................................................................... 178Ajouter des mthodes ............................................................................................................................................................................................. 178Ajouter une mthode ............................................................................................................................................................................................... 180Ajouter des mthodes aux objets natifs .................................................................................................................................................................. 180Ajout de mthodes .................................................................................................................................................................................................. 182Remplacer des mthodes ....................................................................................................................................................................................... 182Limitations ............................................................................................................................................................................................................... 182Les namespaces ..................................................................................................................................................................................................... 183Dfinir un namespace ............................................................................................................................................................................................. 183Un style de code ...................................................................................................................................................................................................... 184L'emploi de this ....................................................................................................................................................................................................... 185Vrifier l'unicit du namespace ............................................................................................................................................................................... 185Modifier le contexte d'une mthode ........................................................................................................................................................................

    187Les chanes de caractres ............................................................................................................................................ 188Les types primitifs ................................................................................................................................................................................................... 189L'objet String ........................................................................................................................................................................................................... 189Proprits ................................................................................................................................................................................................................ 190Mthodes ................................................................................................................................................................................................................. 190La casse et les caractres ...................................................................................................................................................................................... 190toLowerCase() et toUpperCase() ............................................................................................................................................................................ 191Accder aux caractres ........................................................................................................................................................................................... 192Supprimer les espaces avec trim() .......................................................................................................................................................................... 192Rechercher, couper et extraire ................................................................................................................................................................................ 192Connatre la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 194Extraire une chane avec substring(), substr() et slice() .......................................................................................................................................... 195Couper une chane en un tableau avec split() ......................................................................................................................................................... 195Tester l'existence d'une chane de caractres .........................................................................................................................................................

    197Les expressions rgulires (1/2) ................................................................................................................................... 197Les regex en Javascript .......................................................................................................................................................................................... 197Utilisation ................................................................................................................................................................................................................. 198Recherches de mots ............................................................................................................................................................................................... 199Dbut et fin de chane ............................................................................................................................................................................................. 200Les caractres et leurs classes ............................................................................................................................................................................... 200Les intervalles de caractres .................................................................................................................................................................................. 201Trouver un caractre quelconque ...........................................................................................................................................................................

    Sommaire 4/376

    www.siteduzero.com

  • 201Les quantificateurs .................................................................................................................................................................................................. 201Les trois symboles quantificateurs .......................................................................................................................................................................... 202Les accolades ......................................................................................................................................................................................................... 202Les mtacaractres ................................................................................................................................................................................................. 203Les mtacaractres au sein des classes ................................................................................................................................................................ 203Types gnriques et assertions ............................................................................................................................................................................... 203Les types gnriques .............................................................................................................................................................................................. 204Les assertions .........................................................................................................................................................................................................

    206Les expressions rgulires (partie 2/2) ......................................................................................................................... 206Construire une regex ............................................................................................................................................................................................... 207L'objet RegExp ........................................................................................................................................................................................................ 207Mthodes ................................................................................................................................................................................................................. 208Proprits ................................................................................................................................................................................................................ 208Les parenthses ...................................................................................................................................................................................................... 208Les parenthses capturantes .................................................................................................................................................................................. 209Les parenthses non capturantes ........................................................................................................................................................................... 209Les recherches non-greedy ..................................................................................................................................................................................... 211Rechercher et remplacer ......................................................................................................................................................................................... 211L'option g ................................................................................................................................................................................................................. 212Rechercher et capturer ............................................................................................................................................................................................ 213Utiliser une fonction pour le remplacement ............................................................................................................................................................. 214Autres recherches ................................................................................................................................................................................................... 214Rechercher la position d'une occurrence ................................................................................................................................................................ 214Rcuprer toutes les occurrences .......................................................................................................................................................................... 215Couper avec une regex ...........................................................................................................................................................................................

    215Les donnes numriques .............................................................................................................................................. 216L'objet Number ........................................................................................................................................................................................................ 216L'objet Math ............................................................................................................................................................................................................. 217Les proprits .......................................................................................................................................................................................................... 217Les mthodes .......................................................................................................................................................................................................... 219Les inclassables ...................................................................................................................................................................................................... 219Les fonctions de conversion .................................................................................................................................................................................... 220Les fonctions de contrle ........................................................................................................................................................................................

    223La gestion du temps ...................................................................................................................................................... 223Le systme de datation ........................................................................................................................................................................................... 223Introduction aux systmes de datation .................................................................................................................................................................... 223L'objet Date ............................................................................................................................................................................................................. 225Mise en pratique : calculer le temps d'excution d'un script ................................................................................................................................... 225Les fonctions temporelles ....................................................................................................................................................................................... 226Utiliser setTimeout() et setInterval() ........................................................................................................................................................................ 227Annuler une action temporelle ................................................................................................................................................................................ 228Mise en pratique : les animations ! ..........................................................................................................................................................................

    229Les tableaux .................................................................................................................................................................. 230L'objet Array ............................................................................................................................................................................................................. 230Le constructeur ........................................................................................................................................................................................................ 230Les proprits .......................................................................................................................................................................................................... 231Les mthodes .......................................................................................................................................................................................................... 231Concatner deux tableaux ...................................................................................................................................................................................... 232Parcourir un tableau ................................................................................................................................................................................................ 233Rechercher un lment dans un tableau ................................................................................................................................................................ 233Trier un tableau ....................................................................................................................................................................................................... 236Extraire une partie d'un tableau .............................................................................................................................................................................. 236Remplacer une partie d'un tableau ......................................................................................................................................................................... 237Tester l'existence d'un tableau ................................................................................................................................................................................ 237Les piles et les files ................................................................................................................................................................................................. 237Retour sur les mthodes tudies .......................................................................................................................................................................... 238Les piles .................................................................................................................................................................................................................. 238Les files ................................................................................................................................................................................................................... 239Quand les performances sont absentes : unshift() et shift() ...................................................................................................................................

    240Les images .................................................................................................................................................................... 241L'objet Image ........................................................................................................................................................................................................... 241Le constructeur ........................................................................................................................................................................................................ 241Proprits ................................................................................................................................................................................................................ 241vnements ............................................................................................................................................................................................................ 242Particularits ........................................................................................................................................................................................................... 242Mise en pratique ......................................................................................................................................................................................................

    246Les polyfills et les wrappers .......................................................................................................................................... 247Introduction aux polyfills .......................................................................................................................................................................................... 247La problmatique .................................................................................................................................................................................................... 247La solution ............................................................................................................................................................................................................... 247Quelques polyfills importants .................................................................................................................................................................................. 248Introduction aux wrappers ....................................................................................................................................................................................... 248La problmatique .................................................................................................................................................................................................... 248La solution ...............................................................................................................................................................................................................

    252Partie 4 : L'change de donnes avec l'AJAX ................................................................................. 253L'AJAX : qu'est-ce que c'est ? ....................................................................................................................................... 253Introduction au concept ........................................................................................................................................................................................... 253Prsentation ............................................................................................................................................................................................................ 253Fonctionnement ...................................................................................................................................................................................................... 253Les formats de donnes .......................................................................................................................................................................................... 253Prsentation ............................................................................................................................................................................................................

    Sommaire 5/376

    www.siteduzero.com

  • 254Utilisation ................................................................................................................................................................................................................. 256XMLHttpRequest ........................................................................................................................................................... 257L'objet XMLHttpRequest ......................................................................................................................................................................................... 257Prsentation ............................................................................................................................................................................................................ 257XMLHttpRequest, versions 1 et 2 ............................................................................................................................................................................ 257Premire version : les bases ................................................................................................................................................................................... 257Prparation et envoi de la requte .......................................................................................................................................................................... 260Rception des donnes .......................................................................................................................................................................................... 263Mise en pratique ...................................................................................................................................................................................................... 265Rsoudre les problmes d'encodage ...................................................................................................................................................................... 265L'encodage pour les nuls ........................................................................................................................................................................................ 266L'AJAX et l'encodage des caractres ...................................................................................................................................................................... 269Deuxime version : usage avanc .......................................................................................................................................................................... 269Les requtes cross-domain ..................................................................................................................................................................................... 270Nouvelles proprits et mthodes ........................................................................................................................................................................... 273Quand les vnements s'affolent ............................................................................................................................................................................ 273L'objet FormData .....................................................................................................................................................................................................

    275Upload via une iframe ................................................................................................................................................... 276Manipulation des iframes ........................................................................................................................................................................................ 276Les iframes .............................................................................................................................................................................................................. 276Accder au contenu ................................................................................................................................................................................................ 276Chargement de contenu .......................................................................................................................................................................................... 277Charger une iframe ................................................................................................................................................................................................. 277Dtecter le chargement ........................................................................................................................................................................................... 279Rcuprer du contenu ............................................................................................................................................................................................. 279Rcuprer des donnes Javascript ......................................................................................................................................................................... 279Exemple complet ..................................................................................................................................................................................................... 280Le systme d'upload ............................................................................................................................................................................................... 281Le code ct serveur : upload.php ..........................................................................................................................................................................

    282Dynamic Script Loading (DSL) ...................................................................................................................................... 283Un concept simple ................................................................................................................................................................................................... 283Un premier exemple ................................................................................................................................................................................................ 284Avec des variables et du PHP ................................................................................................................................................................................. 284Le DSL et le format JSON ....................................................................................................................................................................................... 284Charger du JSON .................................................................................................................................................................................................... 285Petite astuce pour le PHP .......................................................................................................................................................................................

    286TP : un systme d'auto-compltion ............................................................................................................................... 287Prsentation de l'exercice ....................................................................................................................................................................................... 287Les technologies employer .................................................................................................................................................................................. 287Principe de l'auto-compltion .................................................................................................................................................................................. 287Conception .............................................................................................................................................................................................................. 289C'est vous ! ........................................................................................................................................................................................................... 290Correction ................................................................................................................................................................................................................ 290Le corrig complet ................................................................................................................................................................................................... 293Les explications ....................................................................................................................................................................................................... 300Ides d'amliorations ..............................................................................................................................................................................................

    301Partie 5 : Javascript et HTML5 ........................................................................................................ 302Qu'est-ce que le HTML5 ? ............................................................................................................................................ 302Rappel des faits ...................................................................................................................................................................................................... 302Accessibilit et smantique ..................................................................................................................................................................................... 302Applications Web et interactivit ............................................................................................................................................................................. 302Concurrencer Flash (et Silverlight) .......................................................................................................................................................................... 303Les API Javascript ................................................................................................................................................................................................... 303Anciennes API dsormais standardises ou amliores ........................................................................................................................................ 303Nouvelles API .......................................................................................................................................................................................................... 305Nouvelles API que nous allons tudier ....................................................................................................................................................................

    305L'audio et la vido ......................................................................................................................................................... 306L'audio ..................................................................................................................................................................................................................... 306Contrles simples .................................................................................................................................................................................................... 308Contrle du volume ................................................................................................................................................................................................. 308Barre de progression et timer .................................................................................................................................................................................. 309Amliorations .......................................................................................................................................................................................................... 309Afficher le temps coul .......................................................................................................................................................................................... 310Rendre la barre de progression cliquable ............................................................................................................................................................... 312La vido ...................................................................................................................................................................................................................

    313L'lment Canvas .......................................................................................................................................................... 314Premires manipulations ......................................................................................................................................................................................... 314Principe de fonctionnement ..................................................................................................................................................................................... 315Le fond et les contours ............................................................................................................................................................................................ 316Effacer ..................................................................................................................................................................................................................... 316Formes gomtriques ............................................................................................................................................................................................. 317Les chemins simples ............................................................................................................................................................................................... 317Les arcs ................................................................................................................................................................................................................... 319Les courbes de Bzier ............................................................................................................................................................................................ 320Images et textes ...................................................................................................................................................................................................... 320Les images .............................................................................................................................................................................................................. 323Le texte .................................................................................................................................................................................................................... 323Lignes et dgrads .................................................................................................................................................................................................. 323Les styles de lignes ................................................................................................................................................................................................. 324Les dgrads ........................................................................................................................................................................................................... 327Oprations ...............................................................................................................................................................................................................

    Sommaire 6/376

    www.siteduzero.com

  • 327L'tat graphique ....................................................................................................................................................................................................... 327Les translations ....................................................................................................................................................................................................... 328Les rotations ............................................................................................................................................................................................................ 328Animations .............................................................................................................................................................................................................. 329Une question de framerate ................................................................................................................................................................................ 329Un exemple concret ................................................................................................................................................................................................

    332L'API File ....................................................................................................................................................................... 332Premire utilisation .................................................................................................................................................................................................. 333Les objets Blob et File ............................................................................................................................................................................................. 333L'objet Blob .............................................................................................................................................................................................................. 333L'objet File ............................................................................................................................................................................................................... 334Lire les fichiers ........................................................................................................................................................................................................ 336Mise en pratique ...................................................................................................................................................................................................... 339Upload de fichiers avec l'objet XMLHttpRequest ....................................................................................................................................................

    341Le Drag & Drop ............................................................................................................................................................. 342Aperu de l'API ........................................................................................................................................................................................................ 342Rendre un lment dplaable ............................................................................................................................................................................... 343Dfinir une zone de drop ................................................................................................................................................................................... 346Mise en pratique ......................................................................................................................................................................................................

    353Partie 6 : Annexe ............................................................................................................................. 354Dboguer votre code ..................................................................................................................................................... 354Le dbogage : qu'est-ce que c'est ? ........................................................................................................................................................................ 354Les bugs .................................................................................................................................................................................................................. 354Le dbogage ........................................................................................................................................................................................................... 355Les consoles d'erreurs ............................................................................................................................................................................................ 355Mozilla Firefox ......................................................................................................................................................................................................... 355Internet Explorer ...................................................................................................................................................................................................... 356Opera .......................