web avec Javascript ! Dynamisez vos sites - Freeprdumetz.free.fr/ISN/openclassjavascript.pdf · La...

377
Dynamisez vos sites web avec Javascript ! Par Johann Pardanaud (Nesk) et Sébastien de la Marck (Thunderseb) Ce PDF vous est offert par Découvrez des métiers plein d'envies http://www.fr.capgemini.com/carrieres/technology_services/ www.openclassrooms.com Licence Creative Commons 6 2.0 Dernière mise à jour le 9/12/2012

Transcript of web avec Javascript ! Dynamisez vos sites - Freeprdumetz.free.fr/ISN/openclassjavascript.pdf · La...

  • Dynamisez vos sitesweb avec Javascript !

    Par Johann Pardanaud (Nesk) et Sébastien de la Marck (Thunderseb)

    Ce PDF vous est offert par

    Découvrez des métiers plein d'envieshttp://www.fr.capgemini.com/carrieres/technology_services/

    www.openclassrooms.com

    Licence Creative Commons 6 2.0Dernière mise à jour le 9/12/2012

    http://www.fr.capgemini.com/carrieres/technology_services/http://www.fr.capgemini.com/carrieres/technology_services/http://www.openclassrooms.com

  • Sommaire

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

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

    15Premiers pas en Javascript ............................................................................................................................................. 15Afficher une boîte de dialogue ................................................................................................................................................................................... 15Le Hello World! .......................................................................................................................................................................................................... 16Les nouveautés ......................................................................................................................................................................................................... 16La boîte de dialogue alert() ....................................................................................................................................................................................... 16La syntaxe du Javascript ........................................................................................................................................................................................... 16Les instructions ......................................................................................................................................................................................................... 17Les espaces .............................................................................................................................................................................................................. 18Les commentaires ..................................................................................................................................................................................................... 19Les fonctions ............................................................................................................................................................................................................. 19Où placer le code dans la page ................................................................................................................................................................................ 20Le Javascript « dans la page » ................................................................................................................................................................................. 20Le Javascript externe ................................................................................................................................................................................................ 21Positionner l'élément ................................................................................................................................................................................... 22Quelques aides .........................................................................................................................................................................................................

    24Les variables ................................................................................................................................................................... 24Qu'est-ce qu'une variable ? ....................................................................................................................................................................................... 24Déclarer une variable ................................................................................................................................................................................................ 25Les types de variables ............................................................................................................................................................................................... 26Tester l'existence de variables avec typeof ............................................................................................................................................................... 27Les opérateurs arithmétiques .................................................................................................................................................................................... 27Quelques calculs simples .......................................................................................................................................................................................... 27Simplifier encore plus vos calculs ............................................................................................................................................................................. 28Initiation à la concaténation et à la conversion des types ......................................................................................................................................... 28La concaténation ....................................................................................................................................................................................................... 29Interagir avec l'utilisateur ........................................................................................................................................................................................... 30Convertir une chaîne de caractères en nombre ........................................................................................................................................................ 31Convertir un nombre en chaîne de caractères ..........................................................................................................................................................

    32Les conditions ................................................................................................................................................................. 32La base de toute condition : les booléens ................................................................................................................................................................. 32Les opérateurs de comparaison ................................................................................................................................................................................ 33Les opérateurs logiques ............................................................................................................................................................................................ 34Combiner les opérateurs ........................................................................................................................................................................................... 35La condition « if else » .............................................................................................................................................................................................. 35La structure if pour dire « si » .................................................................................................................................................................................... 36Petit intermède : la fonction confirm() ....................................................................................................................................................................... 36La structure else pour dire « sinon » ......................................................................................................................................................................... 37La structure else if pour dire « sinon si » .................................................................................................................................................................. 38La condition « switch » .............................................................................................................................................................................................. 40Les ternaires .............................................................................................................................................................................................................. 41Les conditions sur les variables ................................................................................................................................................................................ 41Tester l'existence de contenu d'une variable ............................................................................................................................................................. 42Le cas de l'opérateur OU .......................................................................................................................................................................................... 42Un petit exercice pour la forme ! ............................................................................................................................................................................... 42Présentation de l'exercice ......................................................................................................................................................................................... 43Correction ..................................................................................................................................................................................................................

    44Les boucles ..................................................................................................................................................................... 45L'incrémentation ........................................................................................................................................................................................................ 45Le fonctionnement ..................................................................................................................................................................................................... 45L'ordre des opérateurs .............................................................................................................................................................................................. 46La boucle while .......................................................................................................................................................................................................... 47Répéter tant que… .................................................................................................................................................................................................... 47Exemple pratique ...................................................................................................................................................................................................... 48Quelques améliorations ............................................................................................................................................................................................ 48La boucle do while ..................................................................................................................................................................................................... 49La boucle for .............................................................................................................................................................................................................. 49for, la boucle conçue pour l'incrémentation ............................................................................................................................................................... 49Reprenons notre exemple .........................................................................................................................................................................................

    51Les fonctions ................................................................................................................................................................... 52Concevoir des fonctions ............................................................................................................................................................................................ 52Créer sa première fonction ........................................................................................................................................................................................ 53Un exemple concret ..................................................................................................................................................................................................

    2/378

    Ce PDF vous est offert par CAPGEMINIDécouv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/

    www.openclassrooms.com

    http://www.fr.capgemini.com/carrieres/technology_services/http://www.fr.capgemini.com/carrieres/technology_services/http://www.openclassrooms.com

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

    67Les objets et les tableaux ................................................................................................................................................ 67Introduction aux objets .............................................................................................................................................................................................. 67Que contiennent les objets ? ..................................................................................................................................................................................... 68Exemple d'utilisation .................................................................................................................................................................................................. 68Objets natifs déjà rencontrés .................................................................................................................................................................................... 68Les tableaux .............................................................................................................................................................................................................. 69Les indices ................................................................................................................................................................................................................ 69Déclarer un tableau ................................................................................................................................................................................................... 70Récupérer et modifier des valeurs ............................................................................................................................................................................ 70Opérations sur les tableaux ....................................................................................................................................................................................... 70Ajouter et supprimer des items ................................................................................................................................................................................. 71Chaînes de caractères et tableaux ............................................................................................................................................................................ 71Parcourir un tableau .................................................................................................................................................................................................. 72Parcourir avec for ...................................................................................................................................................................................................... 72Attention à la condition .............................................................................................................................................................................................. 73Les objets littéraux .................................................................................................................................................................................................... 73La syntaxe d'un objet ................................................................................................................................................................................................ 74Accès aux items ........................................................................................................................................................................................................ 74Ajouter des items ...................................................................................................................................................................................................... 75Parcourir un objet avec for in .................................................................................................................................................................................... 75Utilisation des objets littéraux .................................................................................................................................................................................... 76Exercice récapitulatif ................................................................................................................................................................................................. 76Énoncé ...................................................................................................................................................................................................................... 76Correction ..................................................................................................................................................................................................................

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

    88Partie 2 : Modeler vos pages Web .................................................................................................... 89Manipuler le code HTML (partie 1/2) ............................................................................................................................... 89Le Document Object Model ....................................................................................................................................................................................... 89Petit historique .......................................................................................................................................................................................................... 89L'objet window ........................................................................................................................................................................................................... 91Le document ............................................................................................................................................................................................................. 91Naviguer dans le document ...................................................................................................................................................................................... 91La structure DOM ...................................................................................................................................................................................................... 93Accéder aux éléments ............................................................................................................................................................................................... 94Accéder aux éléments grâce aux technologies récentes .......................................................................................................................................... 95L'héritage des propriétés et des méthodes ............................................................................................................................................................... 96Éditer les éléments HTML ......................................................................................................................................................................................... 96Les attributs ............................................................................................................................................................................................................... 98Le contenu : innerHTML ............................................................................................................................................................................................ 99innerText et textContent ............................................................................................................................................................................................ 99innerText ....................................................................................................................................................................................................................

    100textContent .............................................................................................................................................................................................................. 102Manipuler le code HTML (partie 2/2) ............................................................................................................................. 103Naviguer entre les nœuds ....................................................................................................................................................................................... 103La propriété parentNode ......................................................................................................................................................................................... 103nodeType et nodeName .......................................................................................................................................................................................... 104Lister et parcourir des nœuds enfants .................................................................................................................................................................... 107Attention aux nœuds vides ...................................................................................................................................................................................... 108Créer et insérer des éléments ................................................................................................................................................................................. 108Ajouter des éléments HTML .................................................................................................................................................................................... 110Ajouter des nœuds textuels ..................................................................................................................................................................................... 112Notions sur les références ....................................................................................................................................................................................... 112Les références ......................................................................................................................................................................................................... 113Cloner, remplacer, supprimer… ............................................................................................................................................................................... 113Cloner un élément ................................................................................................................................................................................................... 114Remplacer un élément par un autre ........................................................................................................................................................................ 114Supprimer un élément ............................................................................................................................................................................................. 115Autres actions .......................................................................................................................................................................................................... 115Vérifier la présence d'éléments enfants .................................................................................................................................................................. 115Insérer à la bonne place : insertBefore() ................................................................................................................................................................. 116Une bonne astuce : insertAfter() .............................................................................................................................................................................. 116Mini-TP : recréer une structure DOM .......................................................................................................................................................................

    Sommaire 3/378

    Ce PDF vous est offert par CAPGEMINIDécouv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/

    www.openclassrooms.com

    http://www.fr.capgemini.com/carrieres/technology_services/http://www.fr.capgemini.com/carrieres/technology_services/http://www.openclassrooms.com

  • 116Premier exercice ...................................................................................................................................................................................................... 118Deuxième exercice .................................................................................................................................................................................................. 120Troisième exercice .................................................................................................................................................................................................. 122Quatrième exercice ................................................................................................................................................................................................. 124Conclusion des TP ..................................................................................................................................................................................................

    125Les événements ............................................................................................................................................................ 126Que sont les événements ? .................................................................................................................................................................................... 126La théorie ................................................................................................................................................................................................................ 127La pratique .............................................................................................................................................................................................................. 129Les événements au travers du DOM ....................................................................................................................................................................... 129Le DOM-0 ................................................................................................................................................................................................................ 130Le DOM-2 ................................................................................................................................................................................................................ 133Les phases de capture et de bouillonnement ......................................................................................................................................................... 134L'objet Event ............................................................................................................................................................................................................ 134Généralités sur l'objet Event ................................................................................................................................................................................... 135Les fonctionnalités de l'objet Event ......................................................................................................................................................................... 141Résoudre les problèmes d'héritage des événements ............................................................................................................................................. 141Le problème ............................................................................................................................................................................................................ 142La solution ...............................................................................................................................................................................................................

    146Les formulaires .............................................................................................................................................................. 146Les propriétés .......................................................................................................................................................................................................... 146Une propriété classique : value ............................................................................................................................................................................... 146Les booléens avec disabled, checked et readonly .................................................................................................................................................. 147Les listes déroulantes avec selectedIndex et options ............................................................................................................................................. 148Les méthodes et un retour sur quelques événements ............................................................................................................................................ 148Les méthodes spécifiques à l'élément ........................................................................................................................................................ 149La gestion du focus et de la sélection ..................................................................................................................................................................... 149Explications sur l'événement change ......................................................................................................................................................................

    151Manipuler le CSS .......................................................................................................................................................... 151Éditer les propriétés CSS ........................................................................................................................................................................................ 151Quelques rappels sur le CSS .................................................................................................................................................................................. 151Éditer les styles CSS d'un élément ......................................................................................................................................................................... 153Récupérer les propriétés CSS ................................................................................................................................................................................. 153La fonction getComputedStyle() .............................................................................................................................................................................. 154Les propriétés de type offset ................................................................................................................................................................................... 158Votre premier script interactif ! ................................................................................................................................................................................. 158Présentation de l'exercice ....................................................................................................................................................................................... 159Correction ................................................................................................................................................................................................................

    163TP : un formulaire interactif ........................................................................................................................................... 164Présentation de l'exercice ....................................................................................................................................................................................... 165Correction ................................................................................................................................................................................................................ 165Le corrigé au grand complet : HTML, CSS et Javascript ........................................................................................................................................ 171Les explications .......................................................................................................................................................................................................

    176Partie 3 : Les objets : conception et utilisation ................................................................................ 177Les objets ...................................................................................................................................................................... 177Petite problématique ............................................................................................................................................................................................... 178Objet constructeur ................................................................................................................................................................................................... 180Ajouter des méthodes ............................................................................................................................................................................................. 180Ajouter une méthode ............................................................................................................................................................................................... 182Ajouter des méthodes aux objets natifs .................................................................................................................................................................. 182Ajout de méthodes .................................................................................................................................................................................................. 184Remplacer des méthodes ....................................................................................................................................................................................... 184Limitations ............................................................................................................................................................................................................... 184Les namespaces ..................................................................................................................................................................................................... 185Définir un namespace ............................................................................................................................................................................................. 185Un style de code ...................................................................................................................................................................................................... 186L'emploi de this ....................................................................................................................................................................................................... 187Vérifier l'unicité du namespace ............................................................................................................................................................................... 187Modifier le contexte d'une méthode ........................................................................................................................................................................

    190Les chaînes de caractères ............................................................................................................................................ 190Les types primitifs ................................................................................................................................................................................................... 191L'objet String ........................................................................................................................................................................................................... 191Propriétés ................................................................................................................................................................................................................ 192Méthodes ................................................................................................................................................................................................................. 192La casse et les caractères ...................................................................................................................................................................................... 192toLowerCase() et toUpperCase() ............................................................................................................................................................................ 193Accéder aux caractères ........................................................................................................................................................................................... 194Supprimer les espaces avec trim() .......................................................................................................................................................................... 194Rechercher, couper et extraire ................................................................................................................................................................................ 194Connaître la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 196Extraire une chaîne avec substring(), substr() et slice() .......................................................................................................................................... 197Couper une chaîne en un tableau avec split() ......................................................................................................................................................... 197Tester l'existence d'une chaîne de caractères .........................................................................................................................................................

    198Les expressions régulières (1/2) ................................................................................................................................... 199Les regex en Javascript .......................................................................................................................................................................................... 199Utilisation ................................................................................................................................................................................................................. 200Recherches de mots ............................................................................................................................................................................................... 201Début et fin de chaîne ............................................................................................................................................................................................. 202Les caractères et leurs classes ............................................................................................................................................................................... 202Les intervalles de caractères .................................................................................................................................................................................. 203Trouver un caractère quelconque ...........................................................................................................................................................................

    Sommaire 4/378

    Ce PDF vous est offert par CAPGEMINIDécouv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/

    www.openclassrooms.com

    http://www.fr.capgemini.com/carrieres/technology_services/http://www.fr.capgemini.com/carrieres/technology_services/http://www.openclassrooms.com

  • 203Les quantificateurs .................................................................................................................................................................................................. 203Les trois symboles quantificateurs .......................................................................................................................................................................... 204Les accolades ......................................................................................................................................................................................................... 204Les métacaractères ................................................................................................................................................................................................. 205Les métacaractères au sein des classes ................................................................................................................................................................ 205Types génériques et assertions ............................................................................................................................................................................... 205Les types génériques .............................................................................................................................................................................................. 206Les assertions .........................................................................................................................................................................................................

    207Les expressions régulières (partie 2/2) ......................................................................................................................... 208Construire une regex ............................................................................................................................................................................................... 209L'objet RegExp ........................................................................................................................................................................................................ 209Méthodes ................................................................................................................................................................................................................. 210Propriétés ................................................................................................................................................................................................................ 210Les parenthèses ...................................................................................................................................................................................................... 210Les parenthèses capturantes .................................................................................................................................................................................. 211Les parenthèses non capturantes ........................................................................................................................................................................... 211Les recherches non-greedy ..................................................................................................................................................................................... 213Rechercher et remplacer ......................................................................................................................................................................................... 213L'option g ................................................................................................................................................................................................................. 213Rechercher et capturer ............................................................................................................................................................................................ 215Utiliser une fonction pour le remplacement ............................................................................................................................................................. 216Autres recherches ................................................................................................................................................................................................... 216Rechercher la position d'une occurrence ................................................................................................................................................................ 216Récupérer toutes les occurrences .......................................................................................................................................................................... 217Couper avec une regex ...........................................................................................................................................................................................

    218Les données numériques .............................................................................................................................................. 218L'objet Number ........................................................................................................................................................................................................ 218L'objet Math ............................................................................................................................................................................................................. 219Les propriétés .......................................................................................................................................................................................................... 219Les méthodes .......................................................................................................................................................................................................... 221Les inclassables ...................................................................................................................................................................................................... 221Les fonctions de conversion .................................................................................................................................................................................... 222Les fonctions de contrôle ........................................................................................................................................................................................

    224La gestion du temps ...................................................................................................................................................... 225Le système de datation ........................................................................................................................................................................................... 225Introduction aux systèmes de datation .................................................................................................................................................................... 225L'objet Date ............................................................................................................................................................................................................. 227Mise en pratique : calculer le temps d'exécution d'un script ................................................................................................................................... 227Les fonctions temporelles ....................................................................................................................................................................................... 228Utiliser setTimeout() et setInterval() ........................................................................................................................................................................ 229Annuler une action temporelle ................................................................................................................................................................................ 230Mise en pratique : les animations ! ..........................................................................................................................................................................

    231Les tableaux .................................................................................................................................................................. 232L'objet Array ............................................................................................................................................................................................................. 232Le constructeur ........................................................................................................................................................................................................ 232Les propriétés .......................................................................................................................................................................................................... 233Les méthodes .......................................................................................................................................................................................................... 233Concaténer deux tableaux ...................................................................................................................................................................................... 234Parcourir un tableau ................................................................................................................................................................................................ 235Rechercher un élément dans un tableau ................................................................................................................................................................ 235Trier un tableau ....................................................................................................................................................................................................... 238Extraire une partie d'un tableau .............................................................................................................................................................................. 238Remplacer une partie d'un tableau ......................................................................................................................................................................... 239Tester l'existence d'un tableau ................................................................................................................................................................................ 239Les piles et les files ................................................................................................................................................................................................. 239Retour sur les méthodes étudiées .......................................................................................................................................................................... 240Les piles .................................................................................................................................................................................................................. 240Les files ................................................................................................................................................................................................................... 241Quand les performances sont absentes : unshift() et shift() ...................................................................................................................................

    242Les images .................................................................................................................................................................... 243L'objet Image ........................................................................................................................................................................................................... 243Le constructeur ........................................................................................................................................................................................................ 243Propriétés ................................................................................................................................................................................................................ 243Événements ............................................................................................................................................................................................................ 244Particularités ........................................................................................................................................................................................................... 244Mise en pratique ......................................................................................................................................................................................................

    248Les polyfills et les wrappers .......................................................................................................................................... 249Introduction aux polyfills .......................................................................................................................................................................................... 249La problématique .................................................................................................................................................................................................... 249La solution ............................................................................................................................................................................................................... 249Quelques polyfills importants .................................................................................................................................................................................. 250Introduction aux wrappers ....................................................................................................................................................................................... 250La problématique .................................................................................................................................................................................................... 250La solution ...............................................................................................................................................................................................................

    254Partie 4 : L'échange de données avec l'AJAX ................................................................................. 255L'AJAX : qu'est-ce que c'est ? ....................................................................................................................................... 255Introduction au concept ........................................................................................................................................................................................... 255Présentation ............................................................................................................................................................................................................ 255Fonctionnement ...................................................................................................................................................................................................... 255Les formats de données .......................................................................................................................................................................................... 256Présentation ............................................................................................................................................................................................................

    Sommaire 5/378

    Ce PDF vous est offert par CAPGEMINIDécouv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/

    www.openclassrooms.com

    http://www.fr.capgemini.com/carrieres/technology_services/http://www.fr.capgemini.com/carrieres/technology_services/http://www.openclassrooms.com

  • 256Utilisation ................................................................................................................................................................................................................. 259XMLHttpRequest ........................................................................................................................................................... 259L'objet XMLHttpRequest ......................................................................................................................................................................................... 259Présentation ............................................................................................................................................................................................................ 259XMLHttpRequest, versions 1 et 2 ............................................................................................................................................................................ 259Première version : les bases ................................................................................................................................................................................... 259Préparation et envoi de la requête .......................................................................................................................................................................... 262Réception des données .......................................................................................................................................................................................... 265Mise en pratique ...................................................................................................................................................................................................... 267Résoudre les problèmes d'encodage ...................................................................................................................................................................... 267L'encodage pour les nuls ........................................................................................................................................................................................ 268L'AJAX et l'encodage des caractères ...................................................................................................................................................................... 271Deuxième version : usage avancé .......................................................................................................................................................................... 271Les requêtes cross-domain ..................................................................................................................................................................................... 272Nouvelles propriétés et méthodes ........................................................................................................................................................................... 275Quand les événements s'affolent ............................................................................................................................................................................ 275L'objet FormData .....................................................................................................................................................................................................

    277Upload via une iframe ................................................................................................................................................... 278Manipulation des iframes ........................................................................................................................................................................................ 278Les iframes .............................................................................................................................................................................................................. 278Accéder au contenu ................................................................................................................................................................................................ 278Chargement de contenu .......................................................................................................................................................................................... 279Charger une iframe ................................................................................................................................................................................................. 279Détecter le chargement ........................................................................................................................................................................................... 281Récupérer du contenu ............................................................................................................................................................................................. 281Récupérer des données Javascript ......................................................................................................................................................................... 281Exemple complet ..................................................................................................................................................................................................... 282Le système d'upload ............................................................................................................................................................................................... 283Le code côté serveur : upload.php ..........................................................................................................................................................................

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

    288TP : un système d'auto-complétion ............................................................................................................................... 289Présentation de l'exercice ....................................................................................................................................................................................... 289Les technologies à employer .................................................................................................................................................................................. 289Principe de l'auto-complétion .................................................................................................................................................................................. 289Conception .............................................................................................................................................................................................................. 291C'est à vous ! ........................................................................................................................................................................................................... 292Correction ................................................................................................................................................................................................................ 292Le corrigé complet ................................................................................................................................................................................................... 295Les explications ....................................................................................................................................................................................................... 302Idées d'améliorations ..............................................................................................................................................................................................

    303Partie 5 : Javascript et HTML5 ........................................................................................................ 304Qu'est-ce que le HTML5 ? ............................................................................................................................................ 304Rappel des faits ...................................................................................................................................................................................................... 304Accessibilité et sémantique ..................................................................................................................................................................................... 304Applications Web et interactivité ............................................................................................................................................................................. 304Concurrencer Flash (et Silverlight) .......................................................................................................................................................................... 305Les API Javascript ................................................................................................................................................................................................... 305Anciennes API désormais standardisées ou améliorées ........................................................................................................................................ 305Nouvelles API .......................................................................................................................................................................................................... 307Nouvelles API que nous allons étudier ....................................................................................................................................................................

    307L'audio et la vidéo ......................................................................................................................................................... 308L'audio ..................................................................................................................................................................................................................... 308Contrôles simples .................................................................................................................................................................................................... 310Contrôle du volume ................................................................................................................................................................................................. 310Barre de progression et timer .................................................................................................................................................................................. 311Améliorations ........................................................................................................................................................................................................... 311Afficher le temps écoulé .......................................................................................................................................................................................... 312Rendre la barre de progression cliquable ............................................................................................................................................................... 314La vidéo ...................................................................................................................................................................................................................

    315L'élément Canvas .......................................................................................................................................................... 316Premières manipulations ......................................................................................................................................................................................... 316Principe de fonctionnement ..................................................................................................................................................................................... 317Le fond et les contours ............................................................................................................................................................................................ 318Effacer ..................................................................................................................................................................................................................... 318Formes géométriques ............................................................................................................................................................................................. 319Les chemins simples ............................................................................................................................................................................................... 319Les arcs ................................................................................................................................................................................................................... 321Les courbes de Bézier ............................................................................................................................................................................................ 322Images et textes ...................................................................................................................................................................................................... 322Les images .............................................................................................................................................................................................................. 325Le texte .................................................................................................................................................................................................................... 325Lignes et dégradés .................................................................................................................................................................................................. 325Les styles de lignes ................................................................................................................................................................................................. 326Les dégradés ........................................................................................................................................................................................................... 329Opérations ...............................................................................................................................................................................................................

    Sommaire 6/378

    Ce PDF vous est offert par CAPGEMINIDécouv rez des métiers plein d'env ies http://www.f r.capgemini.com/carrieres/technology _serv ices/

    www.openclassrooms.com

    http://www.fr.capgemini.com/carrieres/technology_services/http://www.fr.capgemini.com/carrieres/technology_services/http://www.openclassrooms.com

  • 329L'état graphique ....................................................................................................................................................................................................... 329Les translations ....................................................................................................................................................................................................... 330Les rotations ............................................................................................................................................................................................................ 330Animations .............................................................................................................................................................................................................. 331Une question de « framerate » ................................................................................................................................................................................ 331Un exemple concret ................................................................................................................................................................................................

    334L'API File ....................................................................................................................................................................... 334Première utilisation .................................................................................................................................................................................................. 335Les objets Blob et File ............................................................................................................................................................................................. 335L'objet Blob .............................................................................................................................................................................................................. 335L'objet File ............................................................................................................................................................................................................... 336Lire les fichiers ........................................................................................................................................................................................................ 338Mise en pratique ...................................................................................................................................................................................................... 341Upload de fichiers avec l'objet XMLHttpRequest ....................................................................................................................................................

    343Le Drag & Drop ............................................................................................................................................................. 344Aperçu de l'API ............................