Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Dynamisez vos sites web avec Javascript ! Par Nesquik69 et Thunderseb www.sited

Dynamisez vos sites web avec Javascript ! Par Nesquik69 et Thunderseb www.siteduzero.com Dernière mise à jour le 12/08/2011 Sommaire 1 Sommaire ........................................................................................................................................... 3 Informations sur le tutoriel ................................................................................................................... 5 Dynamisez vos sites web avec Javascript ! ........................................................................................ 5 Informations sur le tutoriel ................................................................................................................................................. 6 Partie 1 : Les bases du Javascript ...................................................................................................... 6 Introduction au Javascript ................................................................................................................................................. 6 Qu'est-ce que le Javascript ? ...................................................................................................................................................................................... 7 Définition ..................................................................................................................................................................................................................... 8 Javascript, le langage de scripts ................................................................................................................................................................................. 8 Javascript, pas que le Web ......................................................................................................................................................................................... 10 Petit historique du langage ........................................................................................................................................................................................ 11 Premiers pas en Javascript ............................................................................................................................................. 12 Afficher une boîte de dialogue .................................................................................................................................................................................. 12 Le Hello World! .......................................................................................................................................................................................................... 12 Les nouveautés ......................................................................................................................................................................................................... 13 La boîte de dialogue alert .......................................................................................................................................................................................... 14 La syntaxe Javascript ................................................................................................................................................................................................ 14 Les instructions ......................................................................................................................................................................................................... 14 Les espaces .............................................................................................................................................................................................................. 16 Les commentaires ..................................................................................................................................................................................................... 17 Les fonctions ............................................................................................................................................................................................................. 18 Où placer le code dans la page ................................................................................................................................................................................ 18 Le Javascript "dans la page" ..................................................................................................................................................................................... 19 Le Javascript externe ................................................................................................................................................................................................ 19 Positionner l'élément <script> ................................................................................................................................................................................... 20 Quelques aides ......................................................................................................................................................................................................... 22 Les variables ................................................................................................................................................................... 22 Qu'est-ce qu'une variable ? ....................................................................................................................................................................................... 23 Déclarer une variable ................................................................................................................................................................................................ 24 Les types de variables .............................................................................................................................................................................................. 25 Tester l'existence de variables avec "typeof" ............................................................................................................................................................ 26 Les opérateurs arithmétiques .................................................................................................................................................................................... 26 Quelques calculs simples .......................................................................................................................................................................................... 27 Simplifier encore plus vos calculs ............................................................................................................................................................................. 28 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 ................................................................................................................................................................................ 33 Les opérateurs logiques ............................................................................................................................................................................................ 34 Combiner les opérateurs ........................................................................................................................................................................................... 35 La condition "if - else" ................................................................................................................................................................................................ 36 La structure "if" pour dire "si" ..................................................................................................................................................................................... 37 Petit intermède : la fonction confirm .......................................................................................................................................................................... 37 La structure "else" pour dire "sinon" .......................................................................................................................................................................... 38 La structure "else if" pour dire "sinon si" ................................................................................................................................................................... 39 La condition "switch" ................................................................................................................................................................................................. 41 Les ternaires .............................................................................................................................................................................................................. 43 Les conditions sur les variables ................................................................................................................................................................................ 44 Tester l'existence de contenu d'une variable ............................................................................................................................................................ 44 Le cas de l'opérateur OU .......................................................................................................................................................................................... 45 Un petit exercice pour la forme ! ............................................................................................................................................................................... 45 Présentation de l'exercice ......................................................................................................................................................................................... 45 Correction .................................................................................................................................................................................................................. 46 Les boucles ..................................................................................................................................................................... 47 L'incrémentation ........................................................................................................................................................................................................ 47 Le fonctionnement ..................................................................................................................................................................................................... 47 L'ordre des opérateurs .............................................................................................................................................................................................. 49 La boucle while ......................................................................................................................................................................................................... 49 Répéter tant que... ..................................................................................................................................................................................................... 50 Exemple pratique ...................................................................................................................................................................................................... 50 Quelques améliorations ............................................................................................................................................................................................ 51 La boucle do while .................................................................................................................................................................................................... Sommaire 1/273 www.siteduzero.com 52 La boucle for .............................................................................................................................................................................................................. 53 for, la boucle pour l'incrémentation ........................................................................................................................................................................... 53 Reprenons notre exemple ......................................................................................................................................................................................... 55 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 ............................................................................................................................................................................................. 59 Les variables globales ............................................................................................................................................................................................... 60 Les variables globales ? Avec modération ! .............................................................................................................................................................. 62 Les arguments et les valeurs de retour ..................................................................................................................................................................... 62 Les arguments ........................................................................................................................................................................................................... 66 Les valeurs de retour ................................................................................................................................................................................................. 68 Les fonctions anonymes ........................................................................................................................................................................................... 68 Les fonctions anonymes : les bases ......................................................................................................................................................................... 68 Retour sur l'utilisation des points-virgules ................................................................................................................................................................. 69 Les fonctions anonymes : Isoler son code ................................................................................................................................................................ 72 Les objets et les tableaux ................................................................................................................................................ 73 Introduction aux objets .............................................................................................................................................................................................. 73 Que contiennent les objets ? ..................................................................................................................................................................................... 74 Exemple d'utilisation .................................................................................................................................................................................................. 74 Objets natifs déjà rencontrés .................................................................................................................................................................................... 75 Les tableaux .............................................................................................................................................................................................................. 76 Les indices ................................................................................................................................................................................................................ 76 Déclarer un tableau ................................................................................................................................................................................................... 77 Récupérer et modifier des valeurs ............................................................................................................................................................................ 77 Opérations sur les tableaux ...................................................................................................................................................................................... 78 Ajouter et supprimer des items ................................................................................................................................................................................. 78 Chaînes de caractères et tableaux ........................................................................................................................................................................... 79 Parcourir un tableau .................................................................................................................................................................................................. 80 Parcourir avec for ...................................................................................................................................................................................................... 80 Attention à la condition .............................................................................................................................................................................................. 81 Les objets littéraux .................................................................................................................................................................................................... 82 La syntaxe d'un objet ................................................................................................................................................................................................ 83 Accès aux items ........................................................................................................................................................................................................ 83 Ajouter des items ...................................................................................................................................................................................................... 83 Parcourir un objet avec for in .................................................................................................................................................................................... 84 Utilisation des objets littéraux .................................................................................................................................................................................... 85 Exercice récapitulatif ................................................................................................................................................................................................. 85 Énoncé ...................................................................................................................................................................................................................... 85 Correction .................................................................................................................................................................................................................. 86 TP : Convertir un nombre en toutes lettres ..................................................................................................................... 86 Présentation de l'exercice ......................................................................................................................................................................................... 87 La marche à suivre .................................................................................................................................................................................................... 87 L'orthographe des nombres ...................................................................................................................................................................................... 87 Tester et convertir les nombres ................................................................................................................................................................................. 89 Il est temps de se lancer ! ......................................................................................................................................................................................... 90 Correction .................................................................................................................................................................................................................. 90 Le corrigé complet ..................................................................................................................................................................................................... 91 Les explications ......................................................................................................................................................................................................... 98 Conclusion ................................................................................................................................................................................................................ 98 Partie 2 : Modeler vos pages web ..................................................................................................... 99 Manipuler le code HTML (Partie 1/2) .............................................................................................................................. 100 Le Document Object Model ..................................................................................................................................................................................... 100 Petit historique ........................................................................................................................................................................................................ 100 L'objet window ......................................................................................................................................................................................................... 101 Le document ............................................................................................................................................................................................................ 102 Naviguer dans le document .................................................................................................................................................................................... 102 La structure DOM .................................................................................................................................................................................................... 103 Accéder aux éléments ............................................................................................................................................................................................. 104 L'héritage des propriétés et des méthodes ............................................................................................................................................................. 105 Editer les éléments HTML ....................................................................................................................................................................................... 106 Les attributs ............................................................................................................................................................................................................. 108 Le contenu : innerHTML .......................................................................................................................................................................................... 109 innerText et textContent .......................................................................................................................................................................................... 110 innerText ................................................................................................................................................................................................................. 110 textContent .............................................................................................................................................................................................................. 112 Manipuler le code HTML (Partie 2/2) ............................................................................................................................ 113 Naviguer entre les nœuds ....................................................................................................................................................................................... 113 La propriété parentNode ......................................................................................................................................................................................... 113 nodeType et nodeName .......................................................................................................................................................................................... 114 Lister et parcourir des nœuds enfants .................................................................................................................................................................... 117 Attention aux nœuds vides ...................................................................................................................................................................................... Sommaire 2/273 www.siteduzero.com 119 Créer et insérer des éléments ................................................................................................................................................................................. 119 Ajouter des éléments HTML .................................................................................................................................................................................... 121 Ajouter des nœuds textuels .................................................................................................................................................................................... 124 Notions sur les références ...................................................................................................................................................................................... 125 Les références ......................................................................................................................................................................................................... 126 Cloner, remplacer, supprimer... ............................................................................................................................................................................... 127 Cloner un élément ................................................................................................................................................................................................... 127 Remplacer un élément par un autre ........................................................................................................................................................................ 128 Supprimer un élément ............................................................................................................................................................................................. 128 Autres actions ......................................................................................................................................................................................................... 129 Vérifier la présence d'éléments enfants .................................................................................................................................................................. 129 Insérer à la bonne place : insertBefore() ................................................................................................................................................................. 129 Une bonne astuce : insertAfter() ............................................................................................................................................................................. 130 Minis-TD : recréer une structure DOM .................................................................................................................................................................... 131 Premier exercice ..................................................................................................................................................................................................... 133 Deuxième exercice .................................................................................................................................................................................................. 135 Troisième exercice .................................................................................................................................................................................................. 137 Quatrième exercice ................................................................................................................................................................................................. 139 Conclusion des TD .................................................................................................................................................................................................. 139 Les événements ............................................................................................................................................................ 141 Que sont les événements ? .................................................................................................................................................................................... 141 La théorie ................................................................................................................................................................................................................ 142 La pratique .............................................................................................................................................................................................................. 145 Les événements au travers du DOM ...................................................................................................................................................................... 145 Le DOM-0 ................................................................................................................................................................................................................ 145 Le DOM-2 ................................................................................................................................................................................................................ 148 Les phases de capture et de bouillonnement ......................................................................................................................................................... 151 L'objet Event ............................................................................................................................................................................................................ 151 Généralités sur l'objet Event ................................................................................................................................................................................... 151 Les fonctionnalités de l'objet Event ......................................................................................................................................................................... 158 Déclencher soi-même les événements ................................................................................................................................................................... 158 La procédure standard ............................................................................................................................................................................................ 161 La procédure selon Internet Explorer < 9 ................................................................................................................................................................ 162 Les formulaires .............................................................................................................................................................. 162 Les attributs ............................................................................................................................................................................................................. 163 Un attribut classique : value .................................................................................................................................................................................... 163 Les booléens avec : disabled, checked et readonly ................................................................................................................................................ 164 Les listes déroulantes avec : selectedIndex et options ........................................................................................................................................... 166 Les méthodes et un retour sur quelques événements ............................................................................................................................................ 166 Les méthodes spécifiques à l'élément <form> ........................................................................................................................................................ 166 La gestion du focus et de la sélection ..................................................................................................................................................................... 167 Explications sur l'événement change ...................................................................................................................................................................... 167 Manipuler le CSS .......................................................................................................................................................... 168 Éditer les propriétés CSS ........................................................................................................................................................................................ 169 Quelques rappels sur le CSS .................................................................................................................................................................................. 169 Éditer les styles CSS d'un élément ......................................................................................................................................................................... 171 Récupérer les propriétés CSS ................................................................................................................................................................................. 172 La fonction getComputedStyle() .............................................................................................................................................................................. 173 Les attributs de type "offset" .................................................................................................................................................................................... 177 Votre premier script interactif ! ................................................................................................................................................................................ 178 Présentation de l'exercice ....................................................................................................................................................................................... 179 Correction ................................................................................................................................................................................................................ 182 TP : Un formulaire interactif .......................................................................................................................................... 183 Présentation de l'exercice ....................................................................................................................................................................................... 185 Correction ................................................................................................................................................................................................................ 185 Le corrigé au grand complet : HTML, CSS et Javascript ........................................................................................................................................ 191 Les explications ....................................................................................................................................................................................................... 196 Partie 3 : Les objets ........................................................................................................................ 197 Les objets ...................................................................................................................................................................... 198 Petite problématique ............................................................................................................................................................................................... 198 Objet constructeur ................................................................................................................................................................................................... 202 Ajouter des méthodes ............................................................................................................................................................................................. 202 Ajouter une méthode ............................................................................................................................................................................................... 204 Ajouter des méthodes aux objets natifs .................................................................................................................................................................. 204 Ajout de méthodes .................................................................................................................................................................................................. 205 Remplacer des méthodes ....................................................................................................................................................................................... 205 Limitations ............................................................................................................................................................................................................... 207 Les namespaces ..................................................................................................................................................................................................... 207 Définir un namespace ............................................................................................................................................................................................. 207 Un style de code ..................................................................................................................................................................................................... 208 L'emploi de this ....................................................................................................................................................................................................... 209 Vérifier l'unicité du namespace ............................................................................................................................................................................... 209 Le cas des constructeurs ........................................................................................................................................................................................ 211 Les chaînes de caractères ............................................................................................................................................ Informations sur le tutoriel 3/273 www.siteduzero.com 211 Les types primitifs ................................................................................................................................................................................................... 213 L'objet String ........................................................................................................................................................................................................... 214 Propriétés ................................................................................................................................................................................................................ 214 Méthodes ................................................................................................................................................................................................................. 215 La casse et les caractères ...................................................................................................................................................................................... 216 toLowerCase() et toUpperCase() ............................................................................................................................................................................ 216 Accéder aux caractères .......................................................................................................................................................................................... 217 Supprimer les espaces blancs avec trim() .............................................................................................................................................................. 219 Rechercher, couper et extraire ................................................................................................................................................................................ 219 Connaître la position avec indexOf() et lastIndexOf() ............................................................................................................................................. 219 Extraire une chaîne avec substring(), substr() et slice() .......................................................................................................................................... 220 Couper une chaîne en un tableau avec split() ........................................................................................................................................................ 221 Tester l'existence d'une chaîne de caractères ........................................................................................................................................................ 222 Les expressions régulières [Partie 1] ............................................................................................................................ 222 Les regex en Javascript .......................................................................................................................................................................................... 223 Utilisation ................................................................................................................................................................................................................. 224 Recherches de mots ............................................................................................................................................................................................... 226 Début et fin de chaîne ............................................................................................................................................................................................. 226 Les caractères et leurs classes ............................................................................................................................................................................... 227 Les intervalles de caractères .................................................................................................................................................................................. 227 Trouver un caractère quelconque ........................................................................................................................................................................... 228 Les quantificateurs .................................................................................................................................................................................................. 228 Les 3 symboles quantificateurs ............................................................................................................................................................................... 228 Les accolades ......................................................................................................................................................................................................... 230 Les métacaractères ................................................................................................................................................................................................. 230 Les métacaractères au sein des classes ................................................................................................................................................................ 232 Types génériques et assertions .............................................................................................................................................................................. 232 Les types génériques .............................................................................................................................................................................................. 232 Les assertions ......................................................................................................................................................................................................... 232 Les expressions régulières [Partie 2] ............................................................................................................................ 234 Construire une regex ............................................................................................................................................................................................... 236 L'objet RegExp ........................................................................................................................................................................................................ 236 Méthodes ................................................................................................................................................................................................................. 236 Propriétés ................................................................................................................................................................................................................ 236 Les parenthèses capturantes .................................................................................................................................................................................. 238 Les recherches non-greedy ..................................................................................................................................................................................... 241 Rechercher et remplacer ......................................................................................................................................................................................... 241 L'option g ................................................................................................................................................................................................................. 242 Rechercher et capturer ............................................................................................................................................................................................ 243 Utiliser uploads/Histoire/ dynamisez-vos-sites-web-avec-javascript 1 .pdf