oki Dynamisez vos sites web avec Javascript ! Par Nesquik69 et..
ajouté par ciosi
Dynamisez vos sites web avec Javascript !
Par Nesquik69 et Thunderseb
www.siteduzero.com
Dernière mise à jour le 7/09/2011
Sommaire
1/305
Sommaire
Sommaire ........................................................................................................................................... 1 Informations sur le tutoriel ................................................................................................................... 4 Dynamisez vos sites web avec Javascript ! ........................................................................................ 6
Informations sur le tutoriel ................................................................................................................................................. 6
Partie 1 : Les bases du Javascript ...................................................................................................... 7
Introduction au Javascript ................................................................................................................................................. 7
Qu'est-ce que le Javascript ? ...................................................................................................................................................................................... 7 Définition ..................................................................................................................................................................................................................... 8 Javascript, le langage de scripts ................................................................................................................................................................................. 9 Javascript, pas que le Web ......................................................................................................................................................................................... 9 Petit historique du langage ........................................................................................................................................................................................ 11
Premiers pas en Javascript ............................................................................................................................................. 12
Afficher une boîte de dialogue .................................................................................................................................................................................. Le Hello World! .......................................................................................................................................................................................................... Les nouveautés ......................................................................................................................................................................................................... La boîte de dialogue alert .......................................................................................................................................................................................... La syntaxe Javascript ................................................................................................................................................................................................ Les instructions ......................................................................................................................................................................................................... Les espaces .............................................................................................................................................................................................................. Les commentaires ..................................................................................................................................................................................................... Les fonctions ............................................................................................................................................................................................................. Où placer le code dans la page ................................................................................................................................................................................ Le Javascript "dans la page" ..................................................................................................................................................................................... Le Javascript externe ................................................................................................................................................................................................ Positionner l'élément ................................................................................................................................................................................... Quelques aides ......................................................................................................................................................................................................... Qu'est-ce qu'une variable ? ....................................................................................................................................................................................... Déclarer une variable ................................................................................................................................................................................................ Les types de variables .............................................................................................................................................................................................. Tester l'existence de variables avec "typeof" ............................................................................................................................................................ Les opérateurs arithmétiques .................................................................................................................................................................................... Quelques calculs simples .......................................................................................................................................................................................... Simplifier encore plus vos calculs ............................................................................................................................................................................. Initiation à la concaténation et à la conversion des types ......................................................................................................................................... La concaténation ....................................................................................................................................................................................................... Interagir avec l'utilisateur ........................................................................................................................................................................................... Convertir une chaîne de caractères en nombre ........................................................................................................................................................ Convertir un nombre en chaîne de caractères .......................................................................................................................................................... 12 13 13 14 14 15 15 17 18 18 19 20 20 21 23 24 25 26 27 27 28 29 29 29 30 31
Les variables ................................................................................................................................................................... 23
Les conditions ................................................................................................................................................................. 32
La base de toute condition : les booléens ................................................................................................................................................................. 32 Les opérateurs de comparaison ................................................................................................................................................................................ 33 Les opérateurs logiques ............................................................................................................................................................................................ 34 Combiner les opérateurs ........................................................................................................................................................................................... 35 La condition "if - else" ................................................................................................................................................................................................ 37 La structure "if" pour dire "si" ..................................................................................................................................................................................... 37 Petit intermède : la fonction confirm .......................................................................................................................................................................... 38 La structure "else" pour dire "sinon" .......................................................................................................................................................................... 38 La structure "else if" pour dire "sinon si" ................................................................................................................................................................... 39 La condition "switch" ................................................................................................................................................................................................. 40 Les ternaires .............................................................................................................................................................................................................. 42 Les conditions sur les variables ................................................................................................................................................................................ 44 Tester l'existence de contenu d'une variable ............................................................................................................................................................ 45 Le cas de l'opérateur OU .......................................................................................................................................................................................... 45 Un petit exercice pour la forme ! ............................................................................................................................................................................... 46 Présentation de l'exercice ......................................................................................................................................................................................... 46 Correction .................................................................................................................................................................................................................. 46
Les boucles ..................................................................................................................................................................... 47
L'incrémentation ........................................................................................................................................................................................................ 48 Le fonctionnement ..................................................................................................................................................................................................... 48 L'ordre des opérateurs .............................................................................................................................................................................................. 48 La boucle while ......................................................................................................................................................................................................... 49 Répéter tant que... ..................................................................................................................................................................................................... 50 Exemple pratique ...................................................................................................................................................................................................... 51 Quelques améliorations ............................................................................................................................................................................................ 51 La boucle do while .................................................................................................................................................................................................... 53
www.siteduzero.com
Sommaire
2/305
La boucle for .............................................................................................................................................................................................................. 53 for, la boucle pour l'incrémentation ........................................................................................................................................................................... 54 Reprenons notre exemple ......................................................................................................................................................................................... 54
Les fonctions ................................................................................................................................................................... 56
Concevoir des fonctions ............................................................................................................................................................................................ 56 Créer sa première fonction ........................................................................................................................................................................................ 57 Un exemple concret .................................................................................................................................................................................................. 58 La portée des variables ............................................................................................................................................................................................. 59 La portée des variables ............................................................................................................................................................................................. 60 Les variables globales ............................................................................................................................................................................................... 60 Les variables globales ? Avec modération ! .............................................................................................................................................................. 61 Les arguments et les valeurs de retour ..................................................................................................................................................................... 63 Les arguments ........................................................................................................................................................................................................... 63 Les valeurs de retour ................................................................................................................................................................................................. 67 Les fonctions anonymes ........................................................................................................................................................................................... 68 Les fonctions anonymes : les bases ......................................................................................................................................................................... 69 Retour sur l'utilisation des points-virgules ................................................................................................................................................................. 69 Les fonctions anonymes : Isoler son code ................................................................................................................................................................ 70
Les objets et les tableaux ................................................................................................................................................ 73
Introduction aux objets .............................................................................................................................................................................................. 73 Que contiennent les objets ? ..................................................................................................................................................................................... 74 Exemple d'utilisation .................................................................................................................................................................................................. 75 Objets natifs déjà rencontrés .................................................................................................................................................................................... 75 Les tableaux .............................................................................................................................................................................................................. 77 Les indices ................................................................................................................................................................................................................ 77 Déclarer un tableau ................................................................................................................................................................................................... 77 Récupérer et modifier des valeurs ............................................................................................................................................................................ 78 Opérations sur les tableaux ...................................................................................................................................................................................... 78 Ajouter et supprimer des items ................................................................................................................................................................................. 79 Chaînes de caractères et tableaux ........................................................................................................................................................................... 79 Parcourir un tableau .................................................................................................................................................................................................. 80 Parcourir avec for ...................................................................................................................................................................................................... 81 Attention à la condition .............................................................................................................................................................................................. 81 Les objets littéraux .................................................................................................................................................................................................... 82 La syntaxe d'un objet ................................................................................................................................................................................................ 83 Accès aux items ........................................................................................................................................................................................................ 84 Ajouter des items ...................................................................................................................................................................................................... 84 Parcourir un objet avec for in .................................................................................................................................................................................... 84 Utilisation des objets littéraux .................................................................................................................................................................................... 85 Exercice récapitulatif ................................................................................................................................................................................................. 86 Énoncé ...................................................................................................................................................................................................................... 86 Correction .................................................................................................................................................................................................................. 86
TP : Convertir un nombre en toutes lettres ..................................................................................................................... 87
Présentation de l'exercice ......................................................................................................................................................................................... La marche à suivre .................................................................................................................................................................................................... L'orthographe des nombres ...................................................................................................................................................................................... Tester et convertir les nombres ................................................................................................................................................................................. Il est temps de se lancer ! ......................................................................................................................................................................................... Correction .................................................................................................................................................................................................................. Le corrigé complet ..................................................................................................................................................................................................... Les explications ......................................................................................................................................................................................................... Conclusion ................................................................................................................................................................................................................ 87 88 88 88 90 91 91 92 99
Partie 2 : Modeler vos pages web ..................................................................................................... 99
Manipuler le code HTML (Partie 1/2) ............................................................................................................................ 100
Le Document Object Model ..................................................................................................................................................................................... 101 Petit historique ........................................................................................................................................................................................................ 101 L'objet window ......................................................................................................................................................................................................... 101 Le document ............................................................................................................................................................................................................ 102 Naviguer dans le document .................................................................................................................................................................................... 103 La structure DOM .................................................................................................................................................................................................... 103 Accéder aux éléments ............................................................................................................................................................................................. 104 Accéder aux éléments grâce aux technologies récentes ........................................................................................................................................ 105 L'héritage des propriétés et des méthodes ............................................................................................................................................................. 107 Editer les éléments HTML ....................................................................................................................................................................................... 108 Les attributs ............................................................................................................................................................................................................. 108 Le contenu : innerHTML .......................................................................................................................................................................................... 110 innerText et textContent .......................................................................................................................................................................................... 111 innerText ................................................................................................................................................................................................................. 112 textContent .............................................................................................................................................................................................................. 112
Manipuler le code HTML (Partie 2/2) ............................................................................................................................ 114
Naviguer entre les noeuds ....................................................................................................................................................................................... La propriété parentNode ......................................................................................................................................................................................... nodeType et nodeName .......................................................................................................................................................................................... Lister et parcourir des noeuds enfants .................................................................................................................................................................... 115 115 115 116
www.siteduzero.com
Sommaire
3/305
Attention aux noeuds vides ...................................................................................................................................................................................... 119 Créer et insérer des éléments ................................................................................................................................................................................. 120 Ajouter des éléments HTML .................................................................................................................................................................................... 121 Ajouter des noeuds textuels .................................................................................................................................................................................... 123 Notions sur les références ...................................................................................................................................................................................... 127 Les références ......................................................................................................................................................................................................... 127 Cloner, remplacer, supprimer... ............................................................................................................................................................................... 129 Cloner un élément ................................................................................................................................................................................................... 129 Remplacer un élément par un autre ........................................................................................................................................................................ 129 Supprimer un élément ............................................................................................................................................................................................. 130 Autres actions ......................................................................................................................................................................................................... 130 Vérifier la présence d'éléments enfants .................................................................................................................................................................. 131 Insérer à la bonne place : insertBefore() ................................................................................................................................................................. 131 Une bonne astuce : insertAfter() ............................................................................................................................................................................. 131 Minis-TD : recréer une structure DOM .................................................................................................................................................................... 132 Premier exercice ..................................................................................................................................................................................................... 133 Deuxième exercice .................................................................................................................................................................................................. 135 Troisième exercice .................................................................................................................................................................................................. 137 Quatrième exercice ................................................................................................................................................................................................. 139 Conclusion des TD .................................................................................................................................................................................................. 141
Les événements ............................................................................................................................................................ 141
Que sont les événements ? .................................................................................................................................................................................... La théorie ................................................................................................................................................................................................................ La pratique .............................................................................................................................................................................................................. Les événements au travers du DOM ...................................................................................................................................................................... Le DOM-0 ................................................................................................................................................................................................................ Le DOM-2 ................................................................................................................................................................................................................ Les phases de capture et de bouillonnement ......................................................................................................................................................... L'objet Event ............................................................................................................................................................................................................ Généralités sur l'objet Event ................................................................................................................................................................................... Les fonctionnalités de l'objet Event ......................................................................................................................................................................... Déclencher soi-même les événements ................................................................................................................................................................... La procédure standard ............................................................................................................................................................................................ La procédure selon Internet Explorer < 9 ................................................................................................................................................................ Les attributs ............................................................................................................................................................................................................. Un attribut classique : value .................................................................................................................................................................................... Les booléens avec : disabled, checked et readonly ................................................................................................................................................ Les listes déroulantes avec : selectedIndex et options ........................................................................................................................................... Les méthodes et un retour sur quelques événements ............................................................................................................................................ Les méthodes spécifiques à l'élément ........................................................................................................................................................ La gestion du focus et de la sélection ..................................................................................................................................................................... Explications sur l'événement change ...................................................................................................................................................................... 143 143 144 146 147 147 150 153 153 153 160 160 163 165 165 165 166 167 168 168 169
Les formulaires .............................................................................................................................................................. 164
Manipuler le CSS .......................................................................................................................................................... 169
Éditer les propriétés CSS ........................................................................................................................................................................................ 171 Quelques rappels sur le CSS .................................................................................................................................................................................. 171 Éditer les styles CSS d'un élément ......................................................................................................................................................................... 171 Récupérer les propriétés CSS ................................................................................................................................................................................. 174 La fonction getComputedStyle() .............................................................................................................................................................................. 174 Les attributs de type "offset" .................................................................................................................................................................................... 175 Votre premier script interactif ! ................................................................................................................................................................................ 180 Présentation de l'exercice ....................................................................................................................................................................................... 180 Correction ................................................................................................................................................................................................................ 181
TP : Un formulaire interactif .......................................................................................................................................... 184
Présentation de l'exercice ....................................................................................................................................................................................... Correction ................................................................................................................................................................................................................ Le corrigé au grand complet : HTML, CSS et Javascript ........................................................................................................................................ Les explications ....................................................................................................................................................................................................... 185 186 187 193
Partie 3 : Les objets ........................................................................................................................ 199
Les objets ...................................................................................................................................................................... 199
Petite problématique ............................................................................................................................................................................................... Objet constructeur ................................................................................................................................................................................................... Ajouter des méthodes ............................................................................................................................................................................................. Ajouter une méthode ............................................................................................................................................................................................... Ajouter des méthodes aux objets natifs .................................................................................................................................................................. Ajout de méthodes .................................................................................................................................................................................................. Remplacer des méthodes ....................................................................................................................................................................................... Limitations ............................................................................................................................................................................................................... Les namespaces ..................................................................................................................................................................................................... Définir un namespace ............................................................................................................................................................................................. Un style de code ..................................................................................................................................................................................................... L'emploi de this ....................................................................................................................................................................................................... Vérifier l'unicité du namespace ............................................................................................................................................................................... Le cas des constructeurs ........................................................................................................................................................................................ 199 200 204 204 205 206 207 207 209 209 209 210 211 211
www.siteduzero.com
Informations sur le tutoriel
4/305
Modifier le contexte d'une méthode ........................................................................................................................................................................ 214
Les chaînes de caractères ............................................................................................................................................ 216
Les types primitifs ................................................................................................................................................................................................... 216 L'objet String ........................................................................................................................................................................................................... 218 Propriétés ................................................................................................................................................................................................................ 219 Méthodes ................................................................................................................................................................................................................. 219 La casse et les caractères ...................................................................................................................................................................................... 221 toLowerCase() et toUpperCase() ............................................................................................................................................................................ 221 Accéder aux caractères .......................................................................................................................................................................................... 221 Supprimer les espaces blancs avec trim() .............................................................................................................................................................. 222 Rechercher, couper et extraire ................................................................................................................................................................................ 223 Connaître la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 224 Extraire une chaîne avec substring(), substr() et slice() .......................................................................................................................................... 224 Couper une chaîne en un tableau avec split() ........................................................................................................................................................ 225 Tester l'existence d'une chaîne de caractères ........................................................................................................................................................ 226
Les expressions régulières [Partie 1] ............................................................................................................................ 227
Les regex en Javascript .......................................................................................................................................................................................... Utilisation ................................................................................................................................................................................................................. Recherches de mots ............................................................................................................................................................................................... Début et fin de chaîne ............................................................................................................................................................................................. Les caractères et leurs classes ............................................................................................................................................................................... Les intervalles de caractères .................................................................................................................................................................................. Trouver un caractère quelconque ........................................................................................................................................................................... Les quantificateurs .................................................................................................................................................................................................. Les 3 symboles quantificateurs ............................................................................................................................................................................... Les accolades ......................................................................................................................................................................................................... Les métacaractères ................................................................................................................................................................................................. Les métacaractères au sein des classes ................................................................................................................................................................ Types génériques et assertions .............................................................................................................................................................................. Les types génériques .............................................................................................................................................................................................. Les assertions ......................................................................................................................................................................................................... 228 228 229 231 231 232 232 233 233 233 235 235 237 237 237
Les expressions régulières [Partie 2] ............................................................................................................................ 237
Construire une regex ............................................................................................................................................................................................... 238 L'objet RegExp ........................................................................................................................................................................................................ 240 Méthodes ................................................................................................................................................................................................................. 241 Propriétés ................................................................................................................................................................................................................ 241 Les parenthèses capturantes .................................................................................................................................................................................. 242 Les recherches non-greedy ..................................................................................................................................................................................... 243 Rechercher et remplacer ......................................................................................................................................................................................... 245 L'option g ................................................................................................................................................................................................................. 246 Rechercher et capturer ............................................................................................................................................................................................ 247 Utiliser une fonction pour le remplacement ............................................................................................................................................................. 248 Autres recherches ................................................................................................................................................................................................... 250 Rechercher la position d'une occurrence ................................................................................................................................................................ 250 Récupérer toutes les occurrences .......................................................................................................................................................................... 250 Couper avec une regex ........................................................................................................................................................................................... 250
Les données numériques .............................................................................................................................................. 251
L'objet Number ........................................................................................................................................................................................................ L'objet Math ............................................................................................................................................................................................................. Les attributs ............................................................................................................................................................................................................. Les méthodes .......................................................................................................................................................................................................... Les inclassables ...................................................................................................................................................................................................... Les fonctions de conversion .................................................................................................................................................................................... Les fonctions de contrôle ........................................................................................................................................................................................ Le système de datation ........................................................................................................................................................................................... Introduction aux systèmes de datation .................................................................................................................................................................... L'objet Date ............................................................................................................................................................................................................. Mise en pratique : Calculer le temps d'exécution d'un script .................................................................................................................................. Les fonctions temporelles ....................................................................................................................................................................................... Utiliser setTimeout() et setInterval() ........................................................................................................................................................................ Annuler une action temporelle ................................................................................................................................................................................ Mise en pratique : Les animations ! ........................................................................................................................................................................ 252 254 254 254 257 258 258 261 261 261 263 264 264 265 266
La gestion du temps ...................................................................................................................................................... 260
Les tableaux .................................................................................................................................................................. 267
L'objet Array ............................................................................................................................................................................................................ 269 Le constructeur ........................................................................................................................................................................................................ 269 Les propriétés .......................................................................................................................................................................................................... 269 Les méthodes .......................................................................................................................................................................................................... 271 Concaténer deux tableaux ...................................................................................................................................................................................... 271 Parcourir un tableau ................................................................................................................................................................................................ 271 Rechercher un élément dans un tableau ................................................................................................................................................................ 272 Trier un tableau ....................................................................................................................................................................................................... 273 Extraire une partie d'un tableau .............................................................................................................................................................................. 276 Remplacer une partie d'un tableau ......................................................................................................................................................................... 276
www.siteduzero.com