Академический Документы
Профессиональный Документы
Культура Документы
• Pour manipuler un code HTML dynamiquement, nous allons avoir besoin d’une interface qui va
nous permettre d’accéder à ce code HTML.
• Il s'agit d'une interface qui permet de standardiser les moyens d'accès à un document balisé,
notamment une page Web.
• Avec DOM, une page Web est schématisée comme une arborescence hiérarchisée. Les différentes
composantes d'une telle arborescence sont désignés comme étant des nœuds
• Une interface de programmation qui va permettre à des programmes informatiques et à des scripts
d’accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML
2
Pour manipuler les éléments de la page il faut au préalable les sélectionner. La sélection
d’éléments peut se faire:
• Par sa balise
3
2. La méthode getElementsByName permet de sélectionner les éléments portant un nom donné dans
une page
Résultat:
4
3. la méthode getElementsByTagName sélectionne les éléments dont la balise est fournie en
paramètre
5
4. la méthode querySelectorAll sélectionne les éléments retenus par le sélecteur CSS fourni en
paramètre
6
les objets éléments obtenus par sélection possèdent des propriétés manipulables :
attributs
contenu
style CSS
Pour interagir avec les attributs, l'objet Element nous fournit deux méthodes, getAttribute() et
setAttribute() permettant respectivement de récupérer et d'éditer un attribut.
7
<body>
<script>
</script>
</body>
Pour modifier la valeur d’un attribut class (ce mot est réservé en JavaScript et on ne peut donc
pas l’utiliser comme cela), il faudra utiliser la propriété className
8
9
2. manipuler le contenu
- innerHTML
- textContent
10
11
Agir sur les propriétés CSS
- La propriété style d’un élément permet de modifier les propriétés CSS pour cet élément
12
13
Naviguer entre les nœuds
- Une fois que l'on a atteint un élément, il est possible de se déplacer de façon un peu plus
précise, avec toute une série de méthodes et de propriétés
- nodeType et nodeName servent respectivement à vérifier le type d'un nœud et le nom d'un
nœud. nodeType retourne un nombre, qui correspond à un type de nœud.
15
Naviguer entre les nœuds
16
Créer et insérer des éléments
1. On crée l'élément ;
Cet élément est créé, mais n'est pas inséré dans le document, il n'est donc pas visible.
17
Créer et insérer des éléments
• Comme nous avons vu précédemment : on définit les attributs, soit avec setAttribute(), soit
directement avec les propriétés adéquates.
newLink.id= 'MyID';
• On utilise la méthode appendChild() pour insérer l'élément. Elle signifie « ajouter un enfant
», ce qui signifie qu'il nous faut connaître l'élément auquel on va ajouter l'élément créé.
Donc, pour ajouter notre élément <a> dans l'élément <p> portant l'ID myP, il suffit de
récupérer cet élément, et d'ajouter notre élément <a> via appendChild():
document.getElementById('myP').appendChild(newLink);
18
Créer et insérer des éléments
• L'élément a été inséré, seulement il manque quelque chose : le contenu textuel ! La méthode
createTextNode() sert à créer un nœud textuel
let newLinkText = document.createTextNode(« Mon site");
newLink.appendChild(newLinkText);
19
EVÉNEMENTS
Les évènements correspondent à des actions effectuées soit par un utilisateur, soit par le navigateur lui-
même. Pour réagir aux événements, nous pouvons assigner un gestionnaire (associer une fonction qui
s'exécute lorsque l’événement se déclenche). Il existe différents types d’évènements, ils caractérisent
l’action réalisée et dépendent de l’élément cible (sur lequel porte l’action).
Changement d’état
→ change, focus
etc.
20
1. La première méthode consiste à utiliser des attributs HTML de « type » évènement, et
ensuite il faut créer le code correspondant à l’action que l’on souhaite attacher à notre
évènement. Les attributs HTML de type évènements sont nombreux. Voici quelques
événements:
21
Le script suivant utilise l’attribut onclick dans une balise HTML.
L'inconvénient de cette méthode est que le javascript se retrouve mélangé avec le HTML
2. La deuxième méthode consiste à utiliser DOM HTML. Nous avons deux manières de réagir aux
évènements:
DOM-0: On utilise des propriétés qui vont assigner un gestionnaire d’événement à un élément
spécifique en HTML,
22
1. DOM-0:
Nous pouvons assigner un gestionnaire en utilisant une propriété DOM avec: on<event>
Nous pouvons aussi assigner directement une fonction en tant que gestionnaire:
Attention: - La fonction doit être assignée comme : sayThanks n’est pas sayThanks()
23
Le DOM-0 ne permet pas d’assigner plusieurs fois le même gestionnaire d’événement à un élément
HTML. Seul l'action du dernier évènement sera déclenchée, comme dans l'exemple ci-dessous
1. DOM-2: Le modèle d'événement DOM niveau 2 définit deux méthodes de l’objet Element,
addEventListener et removeEventListener, qui permettent d'attacher ou de détacher un
gestionnaire d'événement.
Syntaxe:
24
Les deux méthodes peuvent contenir trois paramètres :
phase: un booléen pour gérer la propagation (on y reviendra plus tard) : false par défaut.
Exemple:
Ou:
25
Pour détacher un gestionnaire d'événement, il faut passer à la méthode removeEventListener les
mêmes paramètres passés à addEventListener. Par exemple
Ici, le gestionnaire ne sera pas supprimé, car removeEventListener est lié a une autre fonction (même
code, mais cela n'a pas d'importance.)
26
L’un des grands avantages de la méthode addEventListener() est de pouvoir lier plusieurs
gestionnaires d’évènements de même type sur un élément HTML.
27
Le troisième argument (phase) permet de gérer le sens de propagation de l'évènement. Ce
paramètre s'avère utile lorsque les éléments HTML sont imbriqués comme dans l'exemple
suivant:
La question est de savoir le premier qui vas exécuter l'action si on applique à chacun d'eux un
évènement (un 'click', par exemple).
Si vous cliquez d'abord sur 'enfant' (le paragraphe toto), c'est l'évènement du parent qui sera exécuté
avant : c'est la phase de capture définie par la valeur true du troisième argument.
Si vous mettez false (ou si vous ne mettez pas de troisième argument), vous êtes dans la phase de
propagation par défaut, qui est celle du bouillonnement.
29
This
Le mot-clé this fait référence à l’objet actuellement en cours d'utilisation. Donc, si vous faites appel à ce
mot-clé lorsqu'un événement est déclenché, l'objet pointé sera l'élément qui a déclenché l'événement
30
L'OBJET Event
l'objet Event sert à nous fournir une multitude d'informations sur l'événement actuellement déclenché.
L'objet est passé en paramètre de la fonction qui est appelée par l'événement.
Exemple:
type : indique quel type d'évènement s'est produit ("focus", "load", etc).
currentTarget: fonctionne comme le this vu plus haut. Elle fait toujours référence à l'écouteur, c'est à
dire à celui qui déclenche l'évènement
clientX et clientY : elles sont utilisées avec des évènement souris (comme le 'click'), pour récupérer la
position x et y de la souris.
31
target : fait référence à l'élément html qui reçoit l'évènement et non pas à l'élément qui déclenche
l'évènement (l'écouteur).
32
On clique sur l'élément parent, l'objet ciblé est 'parent', mais si vous cliquez sur l'enfant, l'objet ciblé est
'enfant' puisqu'il reçoit l'événement, et non pas l'écouteur 'parent'.
33
keyCode : lorsque on utilise des évènement clavier (ex: 'keydown'), cette propriété nous permet de
récupérer le code de la touche.
34
Javascript:
jQuery:
35
Fonctionnement de base de jQuery
jQuery est une bibliothèque JavaScript libre la plus utilisée, créée pour faciliter l'écriture de scripts côté
client dans le code HTML. La bibliothèque contient les fonctionnalités suivantes :
• Etc.
36
jQuery est une bibliothèque JavaScript qui n'est pas installée dans votre navigateur. Il faut l'ajouter par
le biais d'un fichier ayant pour extension .js
Pour l’installer localement il faut télécharger jQuery sur son site officiel
(http://jquery.com/download/)
Pour l'utiliser, il faut lier le fichier jQuery par le biais de la balise script
Vous pouvez faire l'import de jQuery avant la balise de fermeture </body>. Cette technique améliore la
vitesse de chargement du site internet.
37
La manière la plus courante et aussi la plus utilisée est de passer par un CDN (Content
Delivery Network)
38
jQuery repose sur une seule et unique fonction : jQuery(), ou son alias, $(). Cette fonction
accepte un ou plusieurs paramètres et retourne un objet que nous appellerons « objet jQuery ».
39
Un des grands avantages de jQuery est d'utiliser la syntaxe des sélecteurs CSS. Pour
sélectionner les nœuds du DOM (éléments) nous utiliserons la syntaxe $(sélecteur).
40
Le tableau suivant donne quelques exemples de sélecteurs et indique à quoi ils correspondent:
41
jQuery est utilisé pour manipuler le DOM en écriture et en lecture. Prenons le cas où le DOM
n'est pas encore totalement construit lors du chargement de la page et que le script jQuery est
exécuté ; les sripts produiront des erreurs. Pour attendre que le DOM soit entièrement chargé
et ainsi éviter des erreurs:
42