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