Dynamisez vos sites web avec Javascript PDF
Preview Dynamisez vos sites web avec Javascript
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 2/376 Sommaire Sommaire ........................................................................................................................................... 2 Lire aussi ............................................................................................................................................ 6 Dynamisez vos sites web avec Javascript ! ....................................................................................... 8 Partie 1 : Les bases du Javascript ...................................................................................................... 9 Introduction au Javascript ............................................................................................................................................... 10 Qu'est-ce que le Javascript ? .................................................................................................................................................................................... 10 Qu'est-ce que c'est ? ................................................................................................................................................................................................. 10 Le Javascript, le langage de scripts .......................................................................................................................................................................... 11 Le Javascript, pas que le Web .................................................................................................................................................................................. 12 Petit historique du langage ........................................................................................................................................................................................ 12 L'ECMAScript et ses dérivés ..................................................................................................................................................................................... 13 Les versions du Javascript ........................................................................................................................................................................................ 13 Un logo inconnu ........................................................................................................................................................................................................ 13 Premiers pas en Javascript ............................................................................................................................................. 15 Afficher une boîte de dialogue ................................................................................................................................................................................... 15 Le Hello World! .......................................................................................................................................................................................................... 15 Les nouveautés ......................................................................................................................................................................................................... 16 La boîte de dialogue alert() ....................................................................................................................................................................................... 16 La syntaxe du Javascript ........................................................................................................................................................................................... 16 Les instructions ......................................................................................................................................................................................................... 16 Les espaces .............................................................................................................................................................................................................. 17 Les commentaires ..................................................................................................................................................................................................... 18 Les fonctions ............................................................................................................................................................................................................. 19 Où placer le code dans la page ................................................................................................................................................................................ 19 Le Javascript « dans la page » ................................................................................................................................................................................. 20 Le Javascript externe ................................................................................................................................................................................................ 20 Positionner l'élément <script> ................................................................................................................................................................................... 21 Quelques aides ......................................................................................................................................................................................................... 22 Les variables ................................................................................................................................................................... 24 Qu'est-ce qu'une variable ? ....................................................................................................................................................................................... 24 Déclarer une variable ................................................................................................................................................................................................ 24 Les types de variables ............................................................................................................................................................................................... 25 Tester l'existence de variables avec typeof ............................................................................................................................................................... 26 Les opérateurs arithmétiques .................................................................................................................................................................................... 27 Quelques calculs simples .......................................................................................................................................................................................... 27 Simplifier encore plus vos calculs ............................................................................................................................................................................. 27 Initiation à la concaténation et à la conversion des types ......................................................................................................................................... 28 La concaténation ....................................................................................................................................................................................................... 28 Interagir avec l'utilisateur ........................................................................................................................................................................................... 29 Convertir une chaîne de caractères en nombre ........................................................................................................................................................ 30 Convertir un nombre en chaîne de caractères .......................................................................................................................................................... 31 Les conditions ................................................................................................................................................................. 32 La base de toute condition : les booléens ................................................................................................................................................................. 32 Les opérateurs de comparaison ................................................................................................................................................................................ 32 Les opérateurs logiques ............................................................................................................................................................................................ 33 Combiner les opérateurs ........................................................................................................................................................................................... 34 La condition « if else » .............................................................................................................................................................................................. 35 La structure if pour dire « si » .................................................................................................................................................................................... 35 Petit intermède : la fonction confirm() ....................................................................................................................................................................... 36 La structure else pour dire « sinon » ......................................................................................................................................................................... 36 La structure else if pour dire « sinon si » .................................................................................................................................................................. 37 La condition « switch » .............................................................................................................................................................................................. 38 Les ternaires .............................................................................................................................................................................................................. 40 Les conditions sur les variables ................................................................................................................................................................................ 41 Tester l'existence de contenu d'une variable ............................................................................................................................................................. 41 Le cas de l'opérateur OU .......................................................................................................................................................................................... 42 Un petit exercice pour la forme ! ............................................................................................................................................................................... 42 Présentation de l'exercice ......................................................................................................................................................................................... 42 Correction .................................................................................................................................................................................................................. 43 Les boucles ..................................................................................................................................................................... 44 L'incrémentation ........................................................................................................................................................................................................ 45 Le fonctionnement ..................................................................................................................................................................................................... 45 L'ordre des opérateurs .............................................................................................................................................................................................. 45 La boucle while .......................................................................................................................................................................................................... 46 Répéter tant que… .................................................................................................................................................................................................... 47 Exemple pratique ...................................................................................................................................................................................................... 47 Quelques améliorations ............................................................................................................................................................................................ 48 La boucle do while ..................................................................................................................................................................................................... 48 La boucle for .............................................................................................................................................................................................................. 49 for, la boucle conçue pour l'incrémentation ............................................................................................................................................................... 49 Reprenons notre exemple ......................................................................................................................................................................................... 49 Les fonctions ................................................................................................................................................................... 51 Concevoir des fonctions ............................................................................................................................................................................................ 52 Créer sa première fonction ........................................................................................................................................................................................ 52 Un exemple concret .................................................................................................................................................................................................. 53 www.siteduzero.com Sommaire 3/376 La portée des variables ............................................................................................................................................................................................. 54 La portée des variables ............................................................................................................................................................................................. 54 Les variables globales ............................................................................................................................................................................................... 55 Les variables globales ? Avec modération ! .............................................................................................................................................................. 55 Les arguments et les valeurs de retour ..................................................................................................................................................................... 56 Les arguments .......................................................................................................................................................................................................... 56 Les valeurs de retour ................................................................................................................................................................................................. 60 Les fonctions anonymes ........................................................................................................................................................................................... 61 Les fonctions anonymes : les bases ......................................................................................................................................................................... 61 Retour sur l'utilisation des points-virgules ................................................................................................................................................................. 62 Les fonctions anonymes : isoler son code ................................................................................................................................................................ 63 Les objets et les tableaux ................................................................................................................................................ 67 Introduction aux objets .............................................................................................................................................................................................. 67 Que contiennent les objets ? ..................................................................................................................................................................................... 67 Exemple d'utilisation .................................................................................................................................................................................................. 68 Objets natifs déjà rencontrés .................................................................................................................................................................................... 68 Les tableaux .............................................................................................................................................................................................................. 68 Les indices ................................................................................................................................................................................................................ 69 Déclarer un tableau ................................................................................................................................................................................................... 69 Récupérer et modifier des valeurs ............................................................................................................................................................................ 70 Opérations sur les tableaux ....................................................................................................................................................................................... 70 Ajouter et supprimer des items ................................................................................................................................................................................. 70 Chaînes de caractères et tableaux ............................................................................................................................................................................ 71 Parcourir un tableau .................................................................................................................................................................................................. 71 Parcourir avec for ...................................................................................................................................................................................................... 72 Attention à la condition .............................................................................................................................................................................................. 72 Les objets littéraux .................................................................................................................................................................................................... 73 La syntaxe d'un objet ................................................................................................................................................................................................ 73 Accès aux items ........................................................................................................................................................................................................ 74 Ajouter des items ...................................................................................................................................................................................................... 74 Parcourir un objet avec for in .................................................................................................................................................................................... 75 Utilisation des objets littéraux .................................................................................................................................................................................... 75 Exercice récapitulatif ................................................................................................................................................................................................. 76 Énoncé ...................................................................................................................................................................................................................... 76 Correction .................................................................................................................................................................................................................. 76 TP : convertir un nombre en toutes lettres ...................................................................................................................... 78 Présentation de l'exercice ......................................................................................................................................................................................... 78 La marche à suivre .................................................................................................................................................................................................... 78 L'orthographe des nombres ...................................................................................................................................................................................... 78 Tester et convertir les nombres ................................................................................................................................................................................. 78 Il est temps de se lancer ! ......................................................................................................................................................................................... 80 Correction .................................................................................................................................................................................................................. 80 Le corrigé complet ..................................................................................................................................................................................................... 80 Les explications ......................................................................................................................................................................................................... 81 Conclusion ................................................................................................................................................................................................................ 88 Partie 2 : Modeler vos pages Web .................................................................................................... 88 Manipuler le code HTML (partie 1/2) ............................................................................................................................... 89 Le Document Object Model ....................................................................................................................................................................................... 89 Petit historique .......................................................................................................................................................................................................... 89 L'objet window ........................................................................................................................................................................................................... 89 Le document ............................................................................................................................................................................................................. 91 Naviguer dans le document ...................................................................................................................................................................................... 91 La structure DOM ...................................................................................................................................................................................................... 91 Accéder aux éléments ............................................................................................................................................................................................... 93 Accéder aux éléments grâce aux technologies récentes .......................................................................................................................................... 94 L'héritage des propriétés et des méthodes ............................................................................................................................................................... 95 Éditer les éléments HTML ......................................................................................................................................................................................... 96 Les attributs ............................................................................................................................................................................................................... 96 Le contenu : innerHTML ............................................................................................................................................................................................ 98 innerText et textContent ............................................................................................................................................................................................ 99 innerText .................................................................................................................................................................................................................... 99 textContent .............................................................................................................................................................................................................. 100 Manipuler le code HTML (partie 2/2) ............................................................................................................................. 101 Naviguer entre les nœuds ....................................................................................................................................................................................... 102 La propriété parentNode ......................................................................................................................................................................................... 102 nodeType et nodeName .......................................................................................................................................................................................... 102 Lister et parcourir des nœuds enfants .................................................................................................................................................................... 103 Attention aux nœuds vides ...................................................................................................................................................................................... 106 Créer et insérer des éléments ................................................................................................................................................................................. 107 Ajouter des éléments HTML .................................................................................................................................................................................... 107 Ajouter des nœuds textuels .................................................................................................................................................................................... 109 Notions sur les références ....................................................................................................................................................................................... 111 Les références ......................................................................................................................................................................................................... 111 Cloner, remplacer, supprimer… ............................................................................................................................................................................... 112 Cloner un élément ................................................................................................................................................................................................... 112 Remplacer un élément par un autre ........................................................................................................................................................................ 113 Supprimer un élément ............................................................................................................................................................................................. 113 Autres actions .......................................................................................................................................................................................................... 114 Vérifier la présence d'éléments enfants .................................................................................................................................................................. 114 Insérer à la bonne place : insertBefore() ................................................................................................................................................................. 114 Une bonne astuce : insertAfter() .............................................................................................................................................................................. 115 Mini-TP : recréer une structure DOM ....................................................................................................................................................................... 115 www.siteduzero.com Sommaire 4/376 Premier exercice ...................................................................................................................................................................................................... 115 Deuxième exercice .................................................................................................................................................................................................. 117 Troisième exercice .................................................................................................................................................................................................. 119 Quatrième exercice ................................................................................................................................................................................................. 121 Conclusion des TP .................................................................................................................................................................................................. 123 Les événements ............................................................................................................................................................ 124 Que sont les événements ? .................................................................................................................................................................................... 124 La théorie ................................................................................................................................................................................................................ 124 La pratique .............................................................................................................................................................................................................. 125 Les événements au travers du DOM ....................................................................................................................................................................... 127 Le DOM-0 ................................................................................................................................................................................................................ 127 Le DOM-2 ................................................................................................................................................................................................................ 128 Les phases de capture et de bouillonnement ......................................................................................................................................................... 131 L'objet Event ............................................................................................................................................................................................................ 132 Généralités sur l'objet Event ................................................................................................................................................................................... 133 Les fonctionnalités de l'objet Event ......................................................................................................................................................................... 133 Résoudre les problèmes d'héritage des événements ............................................................................................................................................. 139 Le problème ............................................................................................................................................................................................................ 139 La solution ............................................................................................................................................................................................................... 140 Les formulaires .............................................................................................................................................................. 143 Les propriétés .......................................................................................................................................................................................................... 144 Une propriété classique : value ............................................................................................................................................................................... 144 Les booléens avec disabled, checked et readonly .................................................................................................................................................. 144 Les listes déroulantes avec selectedIndex et options ............................................................................................................................................. 145 Les méthodes et un retour sur quelques événements ............................................................................................................................................ 146 Les méthodes spécifiques à l'élément <form> ........................................................................................................................................................ 146 La gestion du focus et de la sélection ..................................................................................................................................................................... 147 Explications sur l'événement change ...................................................................................................................................................................... 147 Manipuler le CSS .......................................................................................................................................................... 148 Éditer les propriétés CSS ........................................................................................................................................................................................ 149 Quelques rappels sur le CSS .................................................................................................................................................................................. 149 Éditer les styles CSS d'un élément ......................................................................................................................................................................... 149 Récupérer les propriétés CSS ................................................................................................................................................................................. 151 La fonction getComputedStyle() .............................................................................................................................................................................. 151 Les propriétés de type offset ................................................................................................................................................................................... 152 Votre premier script interactif ! ................................................................................................................................................................................. 156 Présentation de l'exercice ....................................................................................................................................................................................... 156 Correction ................................................................................................................................................................................................................ 157 TP : un formulaire interactif ........................................................................................................................................... 162 Présentation de l'exercice ....................................................................................................................................................................................... 162 Correction ................................................................................................................................................................................................................ 163 Le corrigé au grand complet : HTML, CSS et Javascript ........................................................................................................................................ 163 Les explications ....................................................................................................................................................................................................... 169 Partie 3 : Les objets : conception et utilisation ................................................................................ 174 Les objets ...................................................................................................................................................................... 175 Petite problématique ............................................................................................................................................................................................... 175 Objet constructeur ................................................................................................................................................................................................... 176 Ajouter des méthodes ............................................................................................................................................................................................. 178 Ajouter une méthode ............................................................................................................................................................................................... 178 Ajouter des méthodes aux objets natifs .................................................................................................................................................................. 180 Ajout de méthodes .................................................................................................................................................................................................. 180 Remplacer des méthodes ....................................................................................................................................................................................... 182 Limitations ............................................................................................................................................................................................................... 182 Les namespaces ..................................................................................................................................................................................................... 182 Définir un namespace ............................................................................................................................................................................................. 183 Un style de code ...................................................................................................................................................................................................... 183 L'emploi de this ....................................................................................................................................................................................................... 184 Vérifier l'unicité du namespace ............................................................................................................................................................................... 185 Modifier le contexte d'une méthode ........................................................................................................................................................................ 185 Les chaînes de caractères ............................................................................................................................................ 187 Les types primitifs ................................................................................................................................................................................................... 188 L'objet String ........................................................................................................................................................................................................... 189 Propriétés ................................................................................................................................................................................................................ 189 Méthodes ................................................................................................................................................................................................................. 190 La casse et les caractères ...................................................................................................................................................................................... 190 toLowerCase() et toUpperCase() ............................................................................................................................................................................ 190 Accéder aux caractères ........................................................................................................................................................................................... 191 Supprimer les espaces avec trim() .......................................................................................................................................................................... 192 Rechercher, couper et extraire ................................................................................................................................................................................ 192 Connaître la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 192 Extraire une chaîne avec substring(), substr() et slice() .......................................................................................................................................... 194 Couper une chaîne en un tableau avec split() ......................................................................................................................................................... 195 Tester l'existence d'une chaîne de caractères ......................................................................................................................................................... 195 Les expressions régulières (1/2) ................................................................................................................................... 197 Les regex en Javascript .......................................................................................................................................................................................... 197 Utilisation ................................................................................................................................................................................................................. 197 Recherches de mots ............................................................................................................................................................................................... 198 Début et fin de chaîne ............................................................................................................................................................................................. 199 Les caractères et leurs classes ............................................................................................................................................................................... 200 Les intervalles de caractères .................................................................................................................................................................................. 200 Trouver un caractère quelconque ........................................................................................................................................................................... 201 www.siteduzero.com Sommaire 5/376 Les quantificateurs .................................................................................................................................................................................................. 201 Les trois symboles quantificateurs .......................................................................................................................................................................... 201 Les accolades ......................................................................................................................................................................................................... 202 Les métacaractères ................................................................................................................................................................................................. 202 Les métacaractères au sein des classes ................................................................................................................................................................ 203 Types génériques et assertions ............................................................................................................................................................................... 203 Les types génériques .............................................................................................................................................................................................. 203 Les assertions ......................................................................................................................................................................................................... 204 Les expressions régulières (partie 2/2) ......................................................................................................................... 206 Construire une regex ............................................................................................................................................................................................... 206 L'objet RegExp ........................................................................................................................................................................................................ 207 Méthodes ................................................................................................................................................................................................................. 207 Propriétés ................................................................................................................................................................................................................ 208 Les parenthèses ...................................................................................................................................................................................................... 208 Les parenthèses capturantes .................................................................................................................................................................................. 208 Les parenthèses non capturantes ........................................................................................................................................................................... 209 Les recherches non-greedy ..................................................................................................................................................................................... 209 Rechercher et remplacer ......................................................................................................................................................................................... 211 L'option g ................................................................................................................................................................................................................. 211 Rechercher et capturer ............................................................................................................................................................................................ 212 Utiliser une fonction pour le remplacement ............................................................................................................................................................. 213 Autres recherches ................................................................................................................................................................................................... 214 Rechercher la position d'une occurrence ................................................................................................................................................................ 214 Récupérer toutes les occurrences .......................................................................................................................................................................... 214 Couper avec une regex ........................................................................................................................................................................................... 215 Les données numériques .............................................................................................................................................. 215 L'objet Number ........................................................................................................................................................................................................ 216 L'objet Math ............................................................................................................................................................................................................. 216 Les propriétés .......................................................................................................................................................................................................... 217 Les méthodes .......................................................................................................................................................................................................... 217 Les inclassables ...................................................................................................................................................................................................... 219 Les fonctions de conversion .................................................................................................................................................................................... 219 Les fonctions de contrôle ........................................................................................................................................................................................ 220 La gestion du temps ...................................................................................................................................................... 223 Le système de datation ........................................................................................................................................................................................... 223 Introduction aux systèmes de datation .................................................................................................................................................................... 223 L'objet Date ............................................................................................................................................................................................................. 223 Mise en pratique : calculer le temps d'exécution d'un script ................................................................................................................................... 225 Les fonctions temporelles ....................................................................................................................................................................................... 225 Utiliser setTimeout() et setInterval() ........................................................................................................................................................................ 226 Annuler une action temporelle ................................................................................................................................................................................ 227 Mise en pratique : les animations ! .......................................................................................................................................................................... 228 Les tableaux .................................................................................................................................................................. 229 L'objet Array ............................................................................................................................................................................................................. 230 Le constructeur ........................................................................................................................................................................................................ 230 Les propriétés .......................................................................................................................................................................................................... 230 Les méthodes .......................................................................................................................................................................................................... 231 Concaténer deux tableaux ...................................................................................................................................................................................... 231 Parcourir un tableau ................................................................................................................................................................................................ 232 Rechercher un élément dans un tableau ................................................................................................................................................................ 233 Trier un tableau ....................................................................................................................................................................................................... 233 Extraire une partie d'un tableau .............................................................................................................................................................................. 236 Remplacer une partie d'un tableau ......................................................................................................................................................................... 236 Tester l'existence d'un tableau ................................................................................................................................................................................ 237 Les piles et les files ................................................................................................................................................................................................. 237 Retour sur les méthodes étudiées .......................................................................................................................................................................... 237 Les piles .................................................................................................................................................................................................................. 238 Les files ................................................................................................................................................................................................................... 238 Quand les performances sont absentes : unshift() et shift() ................................................................................................................................... 239 Les images .................................................................................................................................................................... 240 L'objet Image ........................................................................................................................................................................................................... 241 Le constructeur ........................................................................................................................................................................................................ 241 Propriétés ................................................................................................................................................................................................................ 241 Événements ............................................................................................................................................................................................................ 241 Particularités ........................................................................................................................................................................................................... 242 Mise en pratique ...................................................................................................................................................................................................... 242 Les polyfills et les wrappers .......................................................................................................................................... 246 Introduction aux polyfills .......................................................................................................................................................................................... 247 La problématique .................................................................................................................................................................................................... 247 La solution ............................................................................................................................................................................................................... 247 Quelques polyfills importants .................................................................................................................................................................................. 247 Introduction aux wrappers ....................................................................................................................................................................................... 248 La problématique .................................................................................................................................................................................................... 248 La solution ............................................................................................................................................................................................................... 248 Partie 4 : L'échange de données avec l'AJAX ................................................................................. 252 L'AJAX : qu'est-ce que c'est ? ....................................................................................................................................... 253 Introduction au concept ........................................................................................................................................................................................... 253 Présentation ............................................................................................................................................................................................................ 253 Fonctionnement ...................................................................................................................................................................................................... 253 Les formats de données .......................................................................................................................................................................................... 253 Présentation ............................................................................................................................................................................................................ 253 www.siteduzero.com Sommaire 6/376 Utilisation ................................................................................................................................................................................................................. 254 XMLHttpRequest ........................................................................................................................................................... 256 L'objet XMLHttpRequest ......................................................................................................................................................................................... 257 Présentation ............................................................................................................................................................................................................ 257 XMLHttpRequest, versions 1 et 2 ............................................................................................................................................................................ 257 Première version : les bases ................................................................................................................................................................................... 257 Préparation et envoi de la requête .......................................................................................................................................................................... 257 Réception des données .......................................................................................................................................................................................... 260 Mise en pratique ...................................................................................................................................................................................................... 263 Résoudre les problèmes d'encodage ...................................................................................................................................................................... 265 L'encodage pour les nuls ........................................................................................................................................................................................ 265 L'AJAX et l'encodage des caractères ...................................................................................................................................................................... 266 Deuxième version : usage avancé .......................................................................................................................................................................... 269 Les requêtes cross-domain ..................................................................................................................................................................................... 269 Nouvelles propriétés et méthodes ........................................................................................................................................................................... 270 Quand les événements s'affolent ............................................................................................................................................................................ 273 L'objet FormData ..................................................................................................................................................................................................... 273 Upload via une iframe ................................................................................................................................................... 275 Manipulation des iframes ........................................................................................................................................................................................ 276 Les iframes .............................................................................................................................................................................................................. 276 Accéder au contenu ................................................................................................................................................................................................ 276 Chargement de contenu .......................................................................................................................................................................................... 276 Charger une iframe ................................................................................................................................................................................................. 277 Détecter le chargement ........................................................................................................................................................................................... 277 Récupérer du contenu ............................................................................................................................................................................................. 279 Récupérer des données Javascript ......................................................................................................................................................................... 279 Exemple complet ..................................................................................................................................................................................................... 279 Le système d'upload ............................................................................................................................................................................................... 280 Le code côté serveur : upload.php .......................................................................................................................................................................... 281 Dynamic Script Loading (DSL) ...................................................................................................................................... 282 Un concept simple ................................................................................................................................................................................................... 283 Un premier exemple ................................................................................................................................................................................................ 283 Avec des variables et du PHP ................................................................................................................................................................................. 284 Le DSL et le format JSON ....................................................................................................................................................................................... 284 Charger du JSON .................................................................................................................................................................................................... 284 Petite astuce pour le PHP ....................................................................................................................................................................................... 285 TP : un système d'auto-complétion ............................................................................................................................... 286 Présentation de l'exercice ....................................................................................................................................................................................... 287 Les technologies à employer .................................................................................................................................................................................. 287 Principe de l'auto-complétion .................................................................................................................................................................................. 287 Conception .............................................................................................................................................................................................................. 287 C'est à vous ! ........................................................................................................................................................................................................... 289 Correction ................................................................................................................................................................................................................ 290 Le corrigé complet ................................................................................................................................................................................................... 290 Les explications ....................................................................................................................................................................................................... 293 Idées d'améliorations .............................................................................................................................................................................................. 300 Partie 5 : Javascript et HTML5 ........................................................................................................ 301 Qu'est-ce que le HTML5 ? ............................................................................................................................................ 302 Rappel des faits ...................................................................................................................................................................................................... 302 Accessibilité et sémantique ..................................................................................................................................................................................... 302 Applications Web et interactivité ............................................................................................................................................................................. 302 Concurrencer Flash (et Silverlight) .......................................................................................................................................................................... 302 Les API Javascript ................................................................................................................................................................................................... 303 Anciennes API désormais standardisées ou améliorées ........................................................................................................................................ 303 Nouvelles API .......................................................................................................................................................................................................... 303 Nouvelles API que nous allons étudier .................................................................................................................................................................... 305 L'audio et la vidéo ......................................................................................................................................................... 305 L'audio ..................................................................................................................................................................................................................... 306 Contrôles simples .................................................................................................................................................................................................... 306 Contrôle du volume ................................................................................................................................................................................................. 308 Barre de progression et timer .................................................................................................................................................................................. 308 Améliorations .......................................................................................................................................................................................................... 309 Afficher le temps écoulé .......................................................................................................................................................................................... 309 Rendre la barre de progression cliquable ............................................................................................................................................................... 310 La vidéo ................................................................................................................................................................................................................... 312 L'élément Canvas .......................................................................................................................................................... 313 Premières manipulations ......................................................................................................................................................................................... 314 Principe de fonctionnement ..................................................................................................................................................................................... 314 Le fond et les contours ............................................................................................................................................................................................ 315 Effacer ..................................................................................................................................................................................................................... 316 Formes géométriques ............................................................................................................................................................................................. 316 Les chemins simples ............................................................................................................................................................................................... 317 Les arcs ................................................................................................................................................................................................................... 317 Les courbes de Bézier ............................................................................................................................................................................................ 319 Images et textes ...................................................................................................................................................................................................... 320 Les images .............................................................................................................................................................................................................. 320 Le texte .................................................................................................................................................................................................................... 323 Lignes et dégradés .................................................................................................................................................................................................. 323 Les styles de lignes ................................................................................................................................................................................................. 323 Les dégradés ........................................................................................................................................................................................................... 324 Opérations ............................................................................................................................................................................................................... 327 www.siteduzero.com Lire aussi 7/376 L'état graphique ....................................................................................................................................................................................................... 327 Les translations ....................................................................................................................................................................................................... 327 Les rotations ............................................................................................................................................................................................................ 328 Animations .............................................................................................................................................................................................................. 328 Une question de « framerate » ................................................................................................................................................................................ 329 Un exemple concret ................................................................................................................................................................................................ 329 L'API File ....................................................................................................................................................................... 332 Première utilisation .................................................................................................................................................................................................. 332 Les objets Blob et File ............................................................................................................................................................................................. 333 L'objet Blob .............................................................................................................................................................................................................. 333 L'objet File ............................................................................................................................................................................................................... 333 Lire les fichiers ........................................................................................................................................................................................................ 334 Mise en pratique ...................................................................................................................................................................................................... 336 Upload de fichiers avec l'objet XMLHttpRequest .................................................................................................................................................... 339 Le Drag & Drop ............................................................................................................................................................. 341 Aperçu de l'API ........................................................................................................................................................................................................ 342 Rendre un élément déplaçable ............................................................................................................................................................................... 342 Définir une zone de « drop » ................................................................................................................................................................................... 343 Mise en pratique ...................................................................................................................................................................................................... 346 Partie 6 : Annexe ............................................................................................................................. 353 Déboguer votre code ..................................................................................................................................................... 354 Le débogage : qu'est-ce que c'est ? ........................................................................................................................................................................ 354 Les bugs .................................................................................................................................................................................................................. 354 Le débogage ........................................................................................................................................................................................................... 354 Les consoles d'erreurs ............................................................................................................................................................................................ 355 Mozilla Firefox ......................................................................................................................................................................................................... 355 Internet Explorer ...................................................................................................................................................................................................... 355 Opera ...................................................................................................................................................................................................................... 356 Google Chrome ....................................................................................................................................................................................................... 357 Safari ....................................................................................................................................................................................................................... 357 Les bugs les plus courants ...................................................................................................................................................................................... 358 Noms de variables et de fonctions mal orthographiés ............................................................................................................................................ 358 Confusion entre les différents opérateurs ............................................................................................................................................................... 358 Mauvaise syntaxe pour les tableaux et les objets ................................................................................................................................................... 358 Créer une boucle infinie .......................................................................................................................................................................................... 358 Exécuter une fonction au lieu de la passer en référence à une variable ................................................................................................................ 359 Les kits de développement ..................................................................................................................................................................................... 359 Éditer le code HTML dynamique ............................................................................................................................................................................. 360 Utiliser les points d'arrêt .......................................................................................................................................................................................... 360 Une alternative à alert() : console.log() ................................................................................................................................................................... 361 Les closures .................................................................................................................................................................. 362 Les variables et leurs accès .................................................................................................................................................................................... 363 Comprendre le problème ........................................................................................................................................................................................ 364 Premier exemple ..................................................................................................................................................................................................... 364 Un cas concret ........................................................................................................................................................................................................ 365 Explorer les solutions .............................................................................................................................................................................................. 365 Une autre utilité, les variables statiques .................................................................................................................................................................. 368 Aller plus loin ................................................................................................................................................................. 371 Récapitulatif express ............................................................................................................................................................................................... 371 Ce qu'il vous reste à faire ........................................................................................................................................................................................ 371 Ce que vous ne devez pas faire .............................................................................................................................................................................. 371 Ce qu'il faut retenir .................................................................................................................................................................................................. 372 Étendre le Javascript ............................................................................................................................................................................................... 372 Diverses applications du Javascript ........................................................................................................................................................................ 374 www.siteduzero.com Lire aussi 8/376 Dynamisez vos sites web avec Javascript ! Par Sébastien de la Marck (Thunderseb) et Johann Pardanaud (Nesquik69) Mise à jour : 16/05/2012 Difficulté : Intermédiaire Durée d'étude : 2 mois, 15 jours 953 visites depuis 7 jours, classé 26/788 Bienvenue à tous, Vous voici sur la page d'accueil du cours traitant du langage Web Javascript ! Au cours de la lecture de ce cours vous apprendrez comment dynamiser vos pages Web et les rendre beaucoup plus attrayantes pour vos visiteurs. Ce cours traitera de nombreux sujets, en partant des bases. Vous apprendrez à réaliser des animations, des applications complexes et à utiliser ce langage conjointement avec le HTML5, la nouvelle version du fameux langage de balisage du W3C ! Ce cours va principalement aborder l'usage du Javascript dans l'environnement d'un navigateur Web, il est donc de rigueur que vous sachiez coder à la fois en HTML et en CSS. Le PHP peut être un plus, mais vous n'en aurez réellement besoin que lorsque nous aborderons la partie AJAX, qui traite des communications entre le Javascript et un serveur. Voici quelques exemples de ce qui est réalisable grâce au Javascript : De gauche à droite, vous pouvez trouver : Une vidéo affichée en HTML5 (sans Flash) sur Youtube, l'usage du Javascript y est intensif ; Un jeu basé sur le concept de Tetris, nommé Torus, qui utilise la célèbre balise <canvas> ; Une modélisation 3D d'une Lamborghini affichée grâce à l'API WebGL et à la bibliothèque Three.js. Nous espérons vous avoir convaincus de vous lancer dans l'apprentissage de ce fabuleux langage qu'est le Javascript ! Sur ce, bonne lecture ! Ce cours vous plaît ? Si vous avez aimé ce cours, vous pouvez retrouver le livre "Dynamisez vos sites web avec JavaScript" des mêmes auteurs, en vente sur le Site du Zéro, en librairie et dans les boutiques en ligne. Vous y trouverez ce cours adapté au format papier. Plus d'informations www.siteduzero.com Dynamisez vos sites web avec Javascript ! 9/376 www.siteduzero.com Partie 1 : Les bases du Javascript 10/376 Partie 1 : Les bases du Javascript Comme tout langage de programmation, le Javascript possède quelques particularités : sa syntaxe, son modèle d'objet, etc. En clair, tout ce qui permet de différencier un langage d'un autre. D'ailleurs, vous découvrirez rapidement que le Javascript est un langage relativement spécial dans sa manière d'aborder les choses. Cette partie est indispensable pour tout débutant en programmation et même pour ceux qui connaissent déjà un langage de programmation car les différences avec les autres langages sont nombreuses. Introduction au Javascript Avant d'entrer directement dans le vif du sujet, ce chapitre va vous apprendre ce qu'est le Javascript, ce qu'il permet de faire, quand il peut ou doit être utilisé et comment il a évolué depuis sa création en 1995. Nous aborderons aussi plusieurs notions de bases telles que les définitions exactes de certains termes. Qu'est-ce que le Javascript ? Qu'est-ce que c'est ? Citation : Définition Le Javascript est un langage de programmation de scripts orienté objet. Dans cette description un peu barbare se trouvent plusieurs éléments que nous allons décortiquer. Un langage de programmation Tout d'abord, un langage de programmation est un langage qui permet aux développeurs d'écrire du code source qui sera analysé par l'ordinateur. Un développeur, ou un programmeur, est une personne qui développe des programmes. Ça peut être un professionnel (un ingénieur, un informaticien ou un analyste programmeur) ou bien un amateur. Le code source est écrit par le développeur. C'est un ensemble d'actions, appelées instructions, qui vont permettre de donner des ordres à l'ordinateur afin de faire fonctionner le programme. Le code source est quelque chose de caché, un peu comme un moteur dans une voiture : le moteur est caché, mais il est bien là, et c'est lui qui fait en sorte que la voiture puisse être propulsée. Dans le cas d'un programme, c'est pareil, c'est le code source qui régit le fonctionnement du programme. En fonction du code source, l'ordinateur exécute différentes actions, comme ouvrir un menu, démarrer une application, effectuer une recherche, enfin bref, tout ce que l'ordinateur est capable de faire. Il existe énormément de langages de programmation, la plupart étant listés sur cette page. Programmer des scripts Le Javascript permet de programmer des scripts. Comme dit plus haut, un langage de programmation permet d'écrire du code source qui sera analysé par l'ordinateur. Il existe trois manières d'utiliser du code source : Langage compilé : le code source est donné à un programme appelé compilateur qui va lire le code source et le convertir dans un langage que l'ordinateur sera capable d'interpréter : c'est le langage binaire, fait de 0 et de 1. Les langages comme le C ou le C++ sont des langages dits compilés. Langage précompilé : ici, le code source est compilé partiellement, généralement dans un code plus simple à lire pour l'ordinateur, mais qui n'est pas encore du binaire. Ce code intermédiaire devra être lu par ce que l'on appelle une « machine virtuelle », qui exécutera ce code. Les langages comme le C# ou le Java sont dits précompilés. Langage interprété : dans ce cas, il n'y a pas de compilation. Le code source reste tel quel, et si on veut exécuter ce code, on doit le fournir à un interpréteur qui se chargera de le lire et de réaliser les actions demandées. www.siteduzero.com
Description:The list of books you might like
