Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Grâce à un script vous pouvez modifier l'aspect initial d'une page sans rechargement de celle-ci (donc sans requête HTTP).
On dit que l'on "dynamise" la page. On parlait avant de DHTML (dynamic HTML) mais le terme n'est plus à la mode.
On dit désormais que l'on modifie le DOM de la page.
Via les keyframes (modèles d'animation de CSS 3) il est possible de modifier les valeurs des propriétés CSS des balises mais pas les valeurs des attributs de ces mêmes balises. Donc JavaScript reste alors incontournable.
Le DOM est une interface de programmation qui nous permet de manipuler le code HTML & CSS d’une page web de façon dynamique
en utilisant le langage JavaScript.
Le DOM est créé automatiquement lors du chargement d’une page web par le navigateur.
Désormais tous les navigateurs génèrent le même DOM, ce qui n'était pas le cas à l'origine (d'où l'invention du framework jQuery ...)
Donc le code pour manipuler dynamiquement le HTML & CSS est désormais
indépendant du navigateur : bel effort de normalisation effectué par le W3C.
Tout dans une page web doit être considéré comme un noeud ("node" en anglais).
Le document HTML est un noeud, chaque élément HTML est un noeud, les attributs des balises sont des noeuds, le texte de chaque balise est aussi un noeud.
Sachez aussi qu’il existe plusieurs types de nœuds : le type ELEMENT (pour les balises HTML), le type de nœud TEXTE, etc.
Le DOM de cette page va être construit comme une hiérarchie de nœuds. On peut le représenter sous forme d'un arbre.
Sachez que la page HTML est le noeud le plus haut hiérarchiquement et appelé : DOCUMENT.
Toutes les balises doubles ou simples de la page constituent des noeuds de type ELEMENT (ou plus simplement élements).
Ainsi la balise double HTML est un noeud de type ELEMENT.
Le noeud HTML comprend deux "enfants" : HEAD et BODY. Pour ces deux "enfants" HTML est l'élément "parent".
L'élément HEAD contient à son tour deux enfants : TITLE et META. On peut dire aussi que TITLE et META ont pour "parent" HEAD.
L'élément BODY contient quatre enfants : H1 et trois balises P.
L'API DOM ce n'est pas uniquement la représentation de la page sous forme d'une arborescence. Le DOM c'est un ensemble de méthodes et propriétés pour accéder aux noeuds et plus précisément aux
Après avoir référencé un élément HTML il est possible d'accéder à son contenu, récupérer la valeur d'un attribut, récupérer le CSS de l'élément correspondant.
Il est également possible de modifier le contenu de l'élément, modifier la valeur d'un attribut, modifier le CSS élément.
On peut même rajouter des éléments voire supprimer certains éléments !
Avant de manipuler en JavaScript un élément HTML (une balise donc) il faut pouvoir le cibler.
Il existe plusieurs méthodes pour accéder à un élément HTML mais toutes ont un point commun : elles retournent un objet !
Donc la syntaxe générique est : variable = méthode de ciblage d'un élément HTML
Après cette instruction la variable créée n'est pas une variable simple (qui stocke une primitive) mais une variable objet qui référence dans le
script un élément HTML du document.
Il faut utiliser le DOM et en particulier les méthodes de l'objet document. Il faut distinguer les anciennes méthodes et les nouvelles introduites par HTML 5.
Ces deux nouvelles méthodes ont pour argument un sélecteur CSS.
Attention la première méthode cible un seul élément (le premier correspondant au sélecteur CSS) alors que la deuxième
méthode peut référencer une collection d'éléments sous forme d'un tableau.
Donc pour extraire un élément il faut préciser son indice dans le tableau ...
Et si vous voulez cibler la troisième balise P de la page et que cet élément n'a ni l'attribut ID ni l'attribut class comment faire ?
Il suffit d'écrire : document.querySelectorAll('p')[2]
Notez que l'on a utilisé la méthode querySelectorAll() argumentée avec 'p' mais suivie d'un indice.
En effet la méthode querySelectorAll retourne non pas un élément mais une collection d'éléments sous forme d'un tableau.
Donc il faut préciser l'indice pour cibler un seul item du tableau.
Ici la valeur de l'indice est 2 (et non pas 3) car le premier élément de la collection a l'indice 0 comme tout tableau JS.
Dans une page il y a trois images miniatures et presque transparentes. Si clic sur l'une d'elle, celle-ci s'agrandit et devient opaque.
Utilisation de la "bonne vieille" méthode getElementById.
Grâce au CSS les images chargées sont par défaut masquées : img{display : none ; }
Donc pour les démasquer il faut que pour chaque image la valeur de la propriété display passe à inline !
Il s'agit donc d'un changement de valeur d'une propriété de style pour une collection d'objets.
Il faut donc associer à chaque bouton de commande une fonction qui consiste en une boucle qui traite toute la collection d'images de la page.
Je ne vous communique qu'une fonction anonyme sur les deux. A vous de trouver le code de la seconde.
Vous devez entre autre sélectionner le deuxième bouton de commande (indice de rang 1 dans la collection des boutons).
Notez l'emploi de document.image : collection d'images de la page.
Mais j'aurais pu aussi écrire : var image_page = document.querySelectorAll('img')
La structure FOR ... IN ... est très utile pour traiter toute une collection d'objets.
Vous savez que le moyen le plus simple (et le plus efficace) de mettre en forme un élément HTML et de lui attribuer une voire plusieurs classes.
Le code CSS & HTML d'une page est le suivant :
Donc la classe "image" est déjà attribuée aux images. C'est elle qui redimensionne et positionne les images.
Objectif du script : nous voulons que le script rajoute la classe "cadre" (bordure + ombrage + coins arrondis) aux
différentes images.
La variable "collection" est un tableau qui référence toutes les images.
Il faut ensuite parcourir ce tableau et utiliser pour chaque item l'attribut className (et non pas "class").
En effet le terme "class" est déjà utilisé en JS.
Le rendu du code faux :
C'est la "cata" ! Certes la classe "cadre" est ajoutée mais la classe "image" est retirée donc les images sont affichées avec leur taille native. Il y a donc remplacement et non rajout de classe.
A première vue c'est la même instruction
Et bien non. L'instruction unique de la boucle est différente pour deux détails.
J'ai remplacé "=" par "+=" et "cadre" par " cadre". (un espace après les guillemets début).
Donc le code HTML pour chaque image devient : < img src =" ..." class ="image cadre" >
Chaque image se voit donc affectée deux classes !
Le rendu du code correct :
La nouvelle version de JavaScript a ajouté l'objet classList et c'est heureux car on peut produire un code plus robuste.
La méthode add() ajoute la classe précisée si elle n'existe déjà pas.
La méthode remove() supprime la classe précisée.
La méthode toggle() ajoute (si elle n'existe pas) la clase ou la supprime si elle existe.
La méthode replace() remplace "classe0" par "classe1".
Pour reprendre le thème de l'ajout d'une deuxième classe à chaque image on peut donc écrire :
collection[i].classList.add("cadre");
Thématique : on peut appliquer à une page différentes mise en forme selon le bouton de commande cliqué.
Certains éléments sont affectés de la classe "modif" ; classe qui n'est pas définie dans la feuille de style.
Cette classe sert seulement à créer la collection des éléments modifiables par le script.
Le rendu du code :
En cliquant deux fois de suite sur le même bouton de commande toute mise en forme est retirée.
Sachez que l'on peut encore aller plus loin dans la modification du DOM. On peut en effet ajouter de nouveaux éléments voire supprimer des éléments existants.
Pour insérer / supprimer de nouveaux éléments il faut pouvoir se déplacer dans le DOM car l'ajout se fait à partir
de l'élément parent.
Avec la méthode removeChild() la suppression se fait aussi à partir le l'élément parent.
Théme : insertion dans une page d'un lien vers une feuille de style externe puis d'une image et enfin suppression des boutons d'insertion.
La page est très moche car il n'y a pas de CSS (pas de lien vers la feuille de style externe du site).
Si clic sur le premier bouton il y a alors insertion d'une balise LINK dans la partie HEAD. Cet élément charge une feuille de style.
Si clic sur deuxième bouton il y a alors insertion dans la boite SECTION d'une belle image.
Dans les deux cas il faut d'abord créer un nouvel élément avec la méthode createElement(type de balise)
puis il faut donner des attributs à cet élément et enfin il faut insérer l'élément avec la méthode parent.appendChild(enfant)
Après avoir été cliqué chaque bouton est supprimé via la méthode parent.removeChild(enfant)
Le rendu du code :
Pour ajouter un nombre variable d'éléments de même nature il faut créer une routine et l'appeler un nombre indéterminé de fois via la méthode setInterval()
Thématique : création d'un patchwork d'images coquines.