PROGRAMME CODE
TA RT
I S
DIG
JS
1
Rappels
Nous avons appris jusqu’à présent comment
manipuler les données que nous recevons :
modifier des valeurs, boucler dessus, jouer avec
leurs propriétés.
Nous allons à présent apprendre à récupérer les
données que nous voulons manipuler.
2
Fonctions
QUIZ
Quel sera le retour de la ligne
désignée ?
function addOne(number) {
return number + 1;
}
addOne("1");
3
Fonctions
QUIZ
Quel sera le retour de la ligne
désignée ?
function addOne(number) {
return number + 1;
}
11 ! addOne("1");
L’argument “1” est de type String.
4
Objet
QUIZ - Quel est la valeur finale de mon objet movie ?
{
title: "Wonderland",
country: "USA",
let movie = { };
title: "Wonderland",
country: "USA", {
}; title: "Wonderland",
[Link] = "James Cox"; country: "USA",
director: "James Cox",
};
5
Objet
QUIZ - Quel est la valeur finale de mon objet movie ?
{
title: "Wonderland",
country: "USA",
let movie = { };
title: "Wonderland",
country: "USA", {
}; title: "Wonderland",
[Link] = "James Cox"; country: "USA",
director: "James Cox",
Nous avons ajouté un };
couple clé / valeur à notre
objet initial. 6
Plan de la séance
Le DOM
1. Le DOM (Document Object Model)
2. Les événements
3. Projet
7
1 Le DOM (Document
Object Model)
8
Le DOM
Qu’est-ce que c’est ?
Le DOM, Document Object Model, veut dire :
DOCUMENT : Une page web affichée dans un navigateur est un document. Elle
commence par une balise !DOCTYPE suivi de la balise <html> dans laquelle se trouve
le reste du document.
OBJECT : Le DOM est un objet qui comporte des propriétés et des méthodes.
MODEL : Un modèle sert à représenter quelque chose, comme le plan d'une ville.
Le DOM représente le document qui se trouve dans le navigateur, en ARBRE.
9
Le DOM
Qu’est-ce qu’une représentation en arbre ?
Le DOM, c’est notre document HTML représenté en arbre. Cela va
permettre de manipuler les données, comme pour tout objet.
Par exemple : Devient :
<body>
document
<h1>L'instruction for</h1>
<p>Une boucle for répète des
instructions jusqu'à ce <body>
qu'une condition donnée
ne soit plus vérifiée.</p>
<h1> <p>
</body>
10
Le DOM
Qu’est-ce qu’une représentation en arbre ?
Chaque élément de l’arbre a ses propriétés. Il n’est pas nécessaire
de toutes les connaître par cœur, mais voici les principales :
Le DOCUMENT
● getElementById(“unId”)
document ● getElementsByClassName(“uneClasse”)
● getElementsByTagName(“monTagName”)
● ...
<body> LES ELEMENTS
● style
● className
● innerHTML
● ...
<h1> <p>
11
Le DOM
Le document pour accéder et écrire dans le HTML
Le document est accessible dans JavaScript. Cela veut dire que le
mot document est un mot réservé que JavaScript comprendra
sans avoir à le déclarer.
Grâce à ce document, je vais pouvoir récupérer des éléments du
document HTML (get), et les modifier (set).
12
Le DOM
Get - accéder document
<body id=”container”>
<h1 class=”content”> <p class=”content”>
Pour accéder à mon h1, je peux faire:
let content = [Link]("content");
let monH1 = content[0];
Je peux aussi faire :
let h1s = [Link]("h1");
let monH1 = content[0]; // même s'il n'y en a qu'un !
Ou encore :
let body = [Link]("body");
let monH1 = [Link]("h1")[0]; 13
Le DOM
Set - modifier le texte
HTML :
<body> Nouveau HTML après
<h1>L'instruction for</h1> manipulation du DOM :
<p>Une boucle for répète des
instructions jusqu'à ce <body>
qu'une condition donnée <h1>L'instruction for</h1>
ne soit plus vérifiée.</p> <p>Mon nouveau texte</p>
</body> </body>
JS :
let content = [Link]("content");
let monH1 = content[0];
Maintenant que j’ai récupérer mon élément, je peux faire ceci :
[Link] = "Mon nouveau texte";
14
Le DOM
Set - modifier le style CSS
HTML :
Il est également possible <body>
<h1>L'instruction for</h1>
de modifier ou d’ajouter le <p>Une boucle for répète des
style de l’élément que l’on instructions jusqu'à ce
qu'une condition donnée
a récupéré : ne soit plus vérifiée.</p>
</body>
JS :
let content = [Link]("content");
let monH1 = content[0];
[Link] = "red"; // style est un objet aussi
[Link] = "green"; // en camelCase
15
Rappels et Notions utiles
Set - modifier le style CSS - autre exemple
display est la propriété CSS permettant de gérer la façon dont
l’élément est affiché.
En CSS :
#monId {
<p id="monId">Cache moi !</p>
display: none;
}
En JS
[Link]("monId").[Link] = "none";
16
Boucles for
Exercices
EXERCICE MEMO
Dans le dossier cours 9 :
fichier [Link], faites
<button id="buttonId">Coucou</button>
les TODO 1 à 6
let buttonElement =
[Link]("buttonId");
[Link] = "none";
// Cache le bouton “buttonId”
let myParagraphs =
[Link]("p");
let firstParagraph = myParagraphs[0];
// Récupère le premier paragraphe
17
2 Les événements
18
Événements - introduction
Un événement se déclenche suite à une action de
l’utilisateur : lorsqu’il clique, qu’il passe la souris sur un
élément, ou encore qu’il tape quelque chose au clavier.
Ces événements ont des noms en anglais.
Pour un clique, on aura l’événement click.
Pour le survol d’un événement avec la souris, mouseover.
Pour l’appui d’une touche de clavier, keydown.
Retrouvez toute la liste ici.
19
Événements - introduction
En pseudo-code, on peut donc dire :
Lorsque l’utilisateur clique sur le bouton,
lui afficher une alerte le félicitant.
Lorsque l’utilisateur appuie sur une touche du clavier,
afficher le code de la lettre dans la console.
Nous allons voir deux façons d’attacher un événement dans
notre code.
20
Événements en attributs HTML
Il existe des attributs que l’on place sur les balises HTML. On
les appelle des écouteurs d’événement, ou event listeners.
Par exemple, pour attacher un événement “click” sur un
bouton, on aura :
<button onclick="testButton()">TEST</button>
La fonction testButton() va être cherchée dans le
JavaScript, donc dans la balise <script>.
21
Événements en attributs HTML
HTML :
<button onclick="testButton()">TEST</button>
JS : function testButton() {
alert("Le bouton a été cliqué !");
}
22
L’objet event reçu
HTML : <button onclick="testButton()">TEST</button> Même si vous ne le
voyez pas, il y a un
JS : function testButton() { objet qui peut être
alert("Le bouton a été cliqué !"); envoyé en
} argument ici !
On pourrait écrire cela :
<button onclick="testButton(event);">TEST</button>
function testButton(event) { Quand on n’utilise
pas l’argument event
alert("Le bouton a été cliqué !");
dans la fonction, on
} ne l’envoie pas.
23
L’objet event reçu
<button onclick="testButton(event);">TEST</button>
Chaque écouteur d’événement envoie un objet
“event” différent.
function testButton(event) {
[Link](event);
}
24
Boucles for
Exercices : les événements
EXERCICE MEMO
Dans le dossier cours 9 : <button onclick="sayHello()">
fichier [Link], faites TEST
les TODO 7 et 8 </button>
function testButton() {
alert("Click !");
}
let button =
[Link]("buttonId");
25
Événements ajoutés en JS
On peut également tout faire en JavaScript. La méthode
addEventListener nous permet d’attacher un événement à un
élément du DOM.
HTML : <button onclick="maFonction()">CLIQUEZ-MOI !</button>
la même fonction, mais
qui change de syntaxe !
En JS : [Link]("click", maFonction);
type d’événement.
Quelques exemples :
document OU "click" "mouseleave"
[Link] ...
"keydown" "keyup" "resize"
26
Événements ajoutés en JS
On a travaillé avec l’event listener "click" mais il y en a d’autres. Le
"click" est souvent rattaché à un élément du DOM, sur lequel on
clique.
Par contre, d’autres event listeners tels que "keydown" peuvent être
rattachés directement au document ou à la window.
[Link](
"keydown", maFonction);
function maFonction(event) {
[Link](event);
}
27
Pour en savoir plus sur l’event keyDown
Le code d’une touche clavier
Chaque touche du clavier est
associée à un nombre unique.
Grâce à ce nombre, le
développeur peut savoir sur
quelle touche l’utilisateur a tapé.
[Link] permet de
récupérer le code de la touche qui
vient d’être frappée.
[Link]
28
Événements ajoutés en JS
On a travaillé avec les event listeners "click" et "keydown", nous
allons maintenant voir "resize", qui sera appelé lorsque l’utilisateur
va changer la taille de la fenêtre.
Cet event listener va donc être rattaché à la window.
[Link]("resize", maFonction);
function maFonction() { Propriété de window
permettant de
[Link]([Link]);
connaître la largeur de
} la fenêtre.
29
Récapitulatif
● La manipulation du DOM nous permet d’aller récupérer des
éléments dans notre HTML, grâce à des méthodes sur le
document. ([Link]() par exemple)
● Une fois ces éléments récupérés, nous pouvons :
○ Manipuler les données (modifier une valeur, rajouter des
noeuds dans le DOM)
○ Ajouter des écouteurs d’événement sur ces noeuds
récupérés
30
3 Projet
31
Projet
Objectifs du jour
- Incrémenter les variables concernées quand
l’utilisateur clique sur un produit
- Afficher le prix total et le faire changer quand
l’utilisateur clique sur un produit
32