Sujet 5

  1. Bienvenue au 5e sujet
  2. Révisions
    1. RegExp: simple
    2. RegExp: ^
    3. RegExp: []
    4. RegExp: [] 2
    5. RegExp: +
    6. RegExp: *
    7. RegExp
    8. addEventListener
    9. Vocabulaire addEventListener
    10. addEventListener: Ordre
    11. Événements: nb d'appels
    12. addEventListener: type paramètre
    13. Valeur
    14. Objet: création
    15. Objet: accès propriété
    16. Tableau
  3. Élément DOM, Navigation dans l'arbre
    1. Attribut / propriété
    2. textContent / value
    3. textContent / value: question
    4. Naviguer l'arbre DOM
    5. Naviguer: question
    6. Naviguer l'arbre DOM: question 2
  4. Tableau joueurs - ajouter
    1. Fichiers
    2. Click bouton
    3. Correction
    4. Fonction ajouter_joueur()
    5. Correction
    6. Création objet
    7. Passage de paramètre
    8. Correction
    9. test
    10. Correction: valeurs formulaire
    11. Ajouter une ligne au tableau
    12. Ajouter un élément dans un autre
    13. Ajouter la ligne dans le tableau
    14. Correction: créer et ajouter ligne et td
    15. Effacer champs texte
    16. Correction : effacer nom et score
  5. Tableaux joueurs: calculer total
    1. calculer_total()
    2. calculer_total() : boucle
    3. calculer_total(): contenu
    4. calculer_total: fin
    5. Correction: calculer_total()
  6. Grandes lignes d'un programme JS
    1. Grandes lignes : question
    2. exemple.html
    3. addEventListener
    4. fonction_a_appeler
    5. Inspecter Firefox
    6. Firefox : suite
    7. Fonctions enregistrées
    8. Événements: suite

1. Bienvenue au 5e sujet

1.1 Bienvenue au 5e sujet

Pour votre progression, c'est très important de finir le sujet précédent avant de commencer celui-ci.

Vous devez travailler connectés (lien « Connexion » en haut à droite de la page). Sinon, vous rencontrerez des problèmes d'avancement et vous risquez d'être comptés absent. En étant connectés vous retrouverez l'endroit où vous en étiez à la séance suivante.


2. Révisions

2.1 Révisions

Commençons par une rapide révision des notions des sujets précédents.

Révisions

2.2 RegExp: simple

Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?

/abcd/

Révisions

2.3 RegExp: ^

Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?

/abcd$/

Révisions

2.4 RegExp: []

Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?

/^[abcd]$/

Révisions

2.5 RegExp: [] 2

Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?

/^menu-[0-5]$/

Révisions

2.6 RegExp: +

Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?

/^a+b+$/

Révisions

2.7 RegExp: *

Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?

/^a[0-9]*$/

Révisions

2.8 RegExp

Écrivez une expression régulière correspondant aux chaînes suivantes:
ref-1222123-b
ref-560911-a
ref-00352911-b
(remarquez que la dernière lettre ne peut être que "a" ou "b")

Révisions

2.9 addEventListener

<h1>bonjour</h1>
       document.querySelector('h1').addEventListener('click',ma_fonction);
function ma_fonction()
{
console.log('hello');
}

Quelle formulation est vraie ?

Révisions

2.10 Vocabulaire addEventListener

       document.querySelector('h1').addEventListener('click',ma_fonction);
Comment s’appelle en français le rôle de la fonction ma_fonction ?
Indice: en anglais c'est « Event listener »

Révisions

2.11 addEventListener: Ordre

    ...
<h1>bonjour</h1>
<script>
console.log('A');
let v=document.querySelector('h1');
console.log('B');
v.addEventListener('click',ma_fonction);
console.log('C');
function ma_fonction()
{
console.log('D');
}
console.log('E');
</script>
...
Quel est l'ordre  ?

Révisions

2.12 Événements: nb d'appels

    ...
<h1>bonjour</h1>
<script>
console.log('A');
let v=document.querySelector('h1');
v.addEventListener('click',ma_fonction);
console.log('B');
function ma_fonction()
{
console.log('C');
}
</script>
...
L'utilisateur ouvre la page et clique 5 fois sur le h1.
Combien de fois est affiché sur la console chaque message ?

Révisions

2.13 addEventListener: type paramètre

  v.addEventListener('click',XYZ);
Quel est le type attendu pour le deuxième paramètre (XYZ) de addEventListener ?

Révisions

2.14 Valeur

let x=a;
b(x);

function a()
{
  return 123;
}

function b(y)
{
  let z=y();
  console.log(z);
}

Qu'est affiché sur la console ?

Révisions

2.15 Objet: création

Que faut-il écrire pour créer un objet ayant les propriétés nom, numero et prix associées respectivement aux valeur Sandwich, 2145, 3.14 ?
(Dans cet ordre)

Révisions

2.16 Objet: accès propriété

let o={nom:'Sandwich',numero:2145,prix:3.14};
XYZ

Que faut-il écrire à la place de XYZ pour changer le prix dans o à 3.35 ?

Révisions

2.17 Tableau

Que faut-il écrire pour créer un tableau contenant les nombres 100, 200 et 300 ?

3. Élément DOM, Navigation dans l'arbre

3.1 ¤ Élément DOM, Navigation dans l'arbre

Pour pouvoir manipuler un élément DOM en JS, il faut d'abord aller le chercher.
C'est ce qu'on a fait avec querySelector et getElementById.
On obtient alors un objet (ici "v") dont on pourra manipuler les propriétés.

Vocabulaire:


Élément DOM, Navigation dans l'arbre

3.2 Attribut / propriété

...
<p id="p1" class="important">bonjour</p>
<script>
let o=document.getElementById('p1');
o.style.color="red";
o.className="";
</script>


Élément DOM, Navigation dans l'arbre

3.3 ¤ textContent / value

Il est fréquent de confondre "textContent" et "value".
Voyons la différence


textContent

La propriété textContent d'un élément DOM permet de lire et écrire le texte qui, en HTML, se trouve entre la balise ouvrante et fermante.

<p id="para1">Bonjour</p>
document.getElementById('para1').textContent="Aurevoir";

Le paragraphe devient alors:

<p id="para1">Aurevoir</p>

value

La propriété value d'un champs texte input permet de lire et écrire la valeur que l'utilisateur a pu taper dans ce champs texte.

<input id="nom" type="text" value="xyz" />

document.getElementById('nom').textContent="Karim";
Le input devient alors

<input id="nom" type="text" value="Karim" />

Élément DOM, Navigation dans l'arbre

3.4 textContent / value: question


<input id="nom" type="text"/>
<p>Nom: <span id="affiche-nom">---</span></p>
<script>
   let inputNom=document.getElementById('nom');
   inputNom.addEventListener('keyup',function(){
      document.getElementById('affiche-nom').ABC=inputNom.DEF;
   });
</script>

Quand l'utilisateur tape dans le champs texte, le nom est recopié dans le span.
Que faut-il écrire à la place de ABC et DEF ?

Élément DOM, Navigation dans l'arbre

3.5 ¤ Naviguer l'arbre DOM

On a souvent besoin de naviguer dans l'arbre DOM. C'est à dire, de partir d'un élément (ici p1) et de devoir remonter (parentNode) ou descendre (children). 

On peut aussi utiliser querySelectorAll. Jusqu'à là on l'a toujours utilisé sur document:  document.querySelectorAll(...). C'est à dire qu'on faisait partir la recherche "querySelectorAll" de "document".  "document" est la racine de l'arborescence DOM, donc on obtenait tous les résultats de la page. Parfois on veut limiter les résultats et partir d'un élément donné (ici p1). On peut alors lancer "querySelectorAll" à partir de cet élément. Donc ici: p1.querySelectorAll(...)

children et querySelectorAll() renvoient un NodeList, qui peut être utilisé comme un tableau.
Par exemple:

Remarque: tout comme querySelectorAll, querySelector peut être appliqué aussi sur un élément:
p1.querySelector('.xyz') renvoie l'élément em

Élément DOM, Navigation dans l'arbre

3.6 Naviguer: question


<ul>
    <li>Chocolat <span class="ajouter">+</span></li>
    <li>Fraise   <span class="ajouter">+</span></li>
    <li>Praliné  <span class="ajouter">+</span></li>
    ...
</ul>
<script>
let ajouter=document.querySelectorAll('.ajouter');
for(let i=0;i<ajouter.length;i++){
ajouter[i].addEventListener('click',function(){
this.XYZ='green';
});
}
</script>

Quand l'utilisateur clique sur un +, on voudrait que toute la ligne <li> correspondante soit affichée en vert.
Que faut-il écrire à la place de XYZ ?
Rappel: dans ce code, le « this » correspond au <span class="ajouter>+</span> qui vient d'être cliqué... pas au <li>

Élément DOM, Navigation dans l'arbre

3.7 Naviguer l'arbre DOM: question 2


<ul>
    <li>Cornet <span class="stock">15</span> <span class="prix">0,70</span></li>
    <li>Pot   <span class="stock">50</span> <span class="prix">0,30</span></li>
    <li>Bol   <span class="stock"> 7</span> <span class="prix">0,20</span></li>
    ...
</ul>
<script>
let lis=document.querySelectorAll('li');
for(let i=0;i<lis.length;i++){
lis[i].addEventListener('click',function(){
console.log(this.XYZ);
});
}
</script>

Quand l'utilisateur clique sur un produit (<li>), on voudrait afficher son prix dans la console.
Que faut-il écrire à la place de XYZ ?


4. Tableau joueurs - ajouter

4.1 Tableau joueurs - ajouter

Dans les pages suivantes on va écrire ensemble un programme JS permettant de gérer un tableau de joueurs.


Tableau joueurs - ajouter

4.2 Fichiers

Créez les fichiers suivants.

joueurs.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>joueurs</title>
<link type="text/css" rel="stylesheet" href="joueurs.css"/>
</head>
<body>
<!--------------------->
<h2>Joueurs :</h2>
<p id="ajouter">
<label>nom: <input id="ajout-nom" type="text"/></label>
<label>score: <input id="ajout-score" type="text"/></label>
<input id="bouton-ajouter" type="button" value="ajouter"/>
</p>
<table id="joueurs">
<tr><td class="nom">Leïla</td><td class="score">121</td></tr>
<tr><td class="nom">Driss</td><td class="score">153</td></tr>
<tr><td class="nom">Lian</td><td class="score">210</td></tr>
<tr><td class="nom">Joe</td><td class="score">32</td></tr>
<tr><td class="nom">Naïma</td><td class="score">261</td></tr>
<tr><td class="nom">Karim</td><td class="score">183</td></tr>
<tr><td class="nom">Anon.</td><td class="score">0</td></tr>
</table>
<p>
total : <span id="total" >960</span><br/>
médiane : <span id="mediane">153</span>
</p>

<!--------------------->
<script src="joueurs.js"></script>
</body>
</html>

joueurs.css

body
{
font-family: sans;
}

h2
{
font-size: 16px;
}

#joueurs
{
box-shadow: 2px 2px 4px rgba(0,0,0,.2);
border-radius: 2px;
border-collapse: collapse;
margin-left: 40px;
}

#joueurs td
{
padding: 3px 10px;
}
#joueurs tr
{
background-color: #f0f0ff;
}

#joueurs tr:nth-child(2n)
{
background-color: #efe;
}

#ajouter input[type='text']
{
width: 80px;
}

#ajout-nom
{
margin-right: 10px;
}

joueurs.js

(vide)

Tableau joueurs - ajouter

4.3 Click bouton

Dans joueurs.js, faites en sorte d'afficher « Click » dans la console lorsque l'utilisateur clique sur le bouton.
Utilisez une fonction anonyme.


Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Tableau joueurs - ajouter

4.4 Correction

joueurs.js
let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
});

Tableau joueurs - ajouter

4.5 Fonction ajouter_joueur()

Créez une fonction appelée ajouter_joueur et dans celle-ci, faites un console.log.
Dans le gestionnaire d’événements (la fonction anonyme), ajoutez un appel à la fonction ajouter_joueur.
Vérifiez que tout fonctionne.

Tableau joueurs - ajouter

4.6 Correction

let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
ajouter_joueur();
});

function ajouter_joueur()
{
console.log('ajouter_joueur');
}

Tableau joueurs - ajouter

4.7 Création objet

On voudrait passer un objet en paramètre de la fonction ajouter_joueur.
Avant de le faire, on va essayer de se rappeler la syntaxe de création d'un objet.
Que faut-il écrire pour créer un objet avec les propriétés nom et score, et ayant pour valeur Ryan et 215 et le mettre dans une variable joueur (qu'il faut créer aussi).
Le tout en une ligne.

Tableau joueurs - ajouter

4.8 Passage de paramètre

Ajoutez la ligne suivante dans le gestionnaire d'événements, avant l'appel de la fonction ajouter_joueur.

let joueur={
nom:'Ryan',
score:215
};

Ensuite passez joueur en paramètre de ajouter_joueur et affichez-y joueur dans la console.


Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Tableau joueurs - ajouter

4.9 Correction

let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
let joueur={
nom:'Ryan',
score:215
};
ajouter_joueur(joueur);
});

function ajouter_joueur(joueur)
{
console.log('ajouter_joueur',joueur);
}

Tableau joueurs - ajouter

4.10 test

Maintenant, au lieu de remplir l'objet "joueur" avec "Ryan" et 215, utilisez les vraies valeurs provenant des champs texte.
Si vous avez oublié comment lire ces valeurs: rappel

Vérifiez que le joueur que vous avez saisi s'affiche bien dans la console quand vous appuyez sur le bouton.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Tableau joueurs - ajouter

4.11 Correction: valeurs formulaire


let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
let joueur={
nom: document.getElementById('ajout-nom').value,
score: document.getElementById('ajout-score').value
};
ajouter_joueur(joueur);
});

function ajouter_joueur(joueur)
{
console.log('ajouter_joueur',joueur);
}


Tableau joueurs - ajouter

4.12 Ajouter une ligne au tableau

Dans ajouter_joueur, on voudrait ajouter une ligne au tableau.

Or une ligne du tableau est composée d'un <tr> qui contient deux <td>.
Il va falloir donc créer ces 3 éléments DOM, puis les insérer aux bons endroits.

Quelle est le nom de la fonction permettant de créer un élément DOM ?
(juste le nom)
(rappel)

Tableau joueurs - ajouter

4.13 Ajouter un élément dans un autre

Une fois crées nos trois éléments, il faudra les ajouter les uns dans les autres:
il faut ajouter les deux <td> dans le <tr>, puis il faut ajouter le <tr> dans le tableau <table>.

Quelle est le nom de la fonction permettant d'ajouter un un élément DOM dans un autre ?
(juste le nom)
(rappel)

Tableau joueurs - ajouter

4.14 Ajouter la ligne dans le tableau

Dans ajouter_joueur(...) :
(rappel)


Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Tableau joueurs - ajouter

4.15 Correction: créer et ajouter ligne et td


let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
let joueur={
nom: document.getElementById('ajout-nom').value,
score: document.getElementById('ajout-score').value
};
ajouter_joueur(joueur);
});

function ajouter_joueur(joueur)
{
console.log('ajouter_joueur',joueur);
let ligne=document.createElement('tr');
let nom =document.createElement('td');
let score=document.createElement('td');
nom.textContent=joueur.nom;
score.textContent=joueur.score;
nom.className='nom';
score.className='score';
ligne.append(nom);
ligne.append(score);
document.getElementById('joueurs').append(ligne);
}


Tableau joueurs - ajouter

4.16 Effacer champs texte

A l'endroit indiqué (ICI), faites en sorte d'effacer le contenu des deux champs texte après que l'utilisateur ait été ajouté.

let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
let joueur={
nom: document.getElementById('ajout-nom').value,
score: document.getElementById('ajout-score').value
};
ajouter_joueur(joueur);
(ICI)
});

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Tableau joueurs - ajouter

4.17 Correction : effacer nom et score


let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
let joueur={
nom: document.getElementById('ajout-nom').value,
score: document.getElementById('ajout-score').value
};
ajouter_joueur(joueur);
document.getElementById('ajout-nom').value='';
document.getElementById('ajout-score').value='';
});



5. Tableaux joueurs: calculer total

5.1 Tableaux joueurs: calculer total

On veut maintenant mettre à jour le total affiché en dessous du tableau.
Écrivez une fonction calculer_total() qui renvoie la somme de tous les scores.
Ensuite affichez ce total dans le <span id="total">...</span>

Indices:

Essayez d'abord de le faire par vous mêmes.
Ensuite, on verra ensemble une solution possible.

Tableaux joueurs: calculer total

5.2 calculer_total()

function calculer_total()
{
let total=0;
XYZ
...
return total;
}

Pour calculer le total, il faut parcourir tous les <td class="score>.
Que faut-il écrire à la place de XYZ pour mettre dans la variable "tds" une liste de toutes ces case score ?
(Dans le doute, regardez morpion.html)

Tableaux joueurs: calculer total

5.3 calculer_total() : boucle

function calculer_total()
{
let total=0;
let tds=document.querySelectorAll('.score');
XYZ {
...
}
return total;
}

Que faut-il écrire à la place de XYZ pour faire une boucle sur la variable i allant de 0 au nombre de tds ?

Tableaux joueurs: calculer total

5.4 calculer_total(): contenu

function calculer_total()
{
let total=0;
let tds=document.querySelectorAll('.score');
for(let i=0;i<tds.length;i++){
XYZ
...
}
return total;
}

Que faut-il écrire à la place de XYZ pour créer une variable score contenant un entier correspondant au contenu du td ?

Indice: Vous devez, en une seule ligne

Tableaux joueurs: calculer total

5.5 calculer_total: fin

On en est ici:

let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
let joueur={
nom: document.getElementById('ajout-nom').value,
score: document.getElementById('ajout-score').value
};
ajouter_joueur(joueur);
document.getElementById('ajout-nom').value='';
document.getElementById('ajout-score').value='';
...
});

function calculer_total()
{
let total=0;
let tds=document.querySelectorAll('.score');
for(let i=0;i<tds.length;i++){
let score=parseInt(tds[i].textContent);
...
}
return total;
}

function ajouter_joueur(joueur)
{
console.log('ajouter_joueur',joueur);
let ligne=document.createElement('tr');
let nom =document.createElement('td');
let score=document.createElement('td');
nom.textContent=joueur.nom;
score.textContent=joueur.score;
nom.className='nom';
score.className='score';
ligne.append(nom);
ligne.append(score);
document.getElementById('joueurs').append(ligne);
}

Complétez les deux endroits indiqués par "..." pour obtenir le total et l'afficher dans le <span id="total">


Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Tableaux joueurs: calculer total

5.6 Correction: calculer_total()


let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
let joueur={
nom: document.getElementById('ajout-nom').value,
score: document.getElementById('ajout-score').value
};
ajouter_joueur(joueur);
document.getElementById('ajout-nom').value='';
document.getElementById('ajout-score').value='';
document.getElementById('total').textContent=calculer_total();
});

function calculer_total()
{
let total=0;
let tds=document.querySelectorAll('.score');
for(let i=0;i<tds.length;i++){
let score=parseInt(tds[i].textContent);
total+=score;
}
return total;
}

function ajouter_joueur(joueur)
{
console.log('ajouter_joueur',joueur);
let ligne=document.createElement('tr');
let nom =document.createElement('td');
let score=document.createElement('td');
nom.textContent=joueur.nom;
score.textContent=joueur.score;
nom.className='nom';
score.className='score';
ligne.append(nom);
ligne.append(score);
document.getElementById('joueurs').append(ligne);
}


6. Grandes lignes d'un programme JS

6.1 ¤ Grandes lignes d'un programme JS

Exemple HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Exemple</title>
</head>
<body>
<h1>Cliquez-moi!</h1>
<p>Bonjour!</p>
<script>
let titre=document.querySelector('h1');
titre.addEventListener('click',fonction_a_appeler);
function fonction_a_appeler()
{
let paragraphe=document.querySelector('p');
paragraphe.style.color='green';
}
</script>
</body>
</html>

La plupart des programmes JS qu'on écrit ici font les opérations suivantes:

1) Chercher des éléments DOM
Pour pouvoir manipuler en JS les éléments DOM de la page (<h1>,<p>, ...) il faut d'abord les chercher.
Par exemple:
let titre=document.querySelector('h1');
Ceci veut dire « Bonjour "document", cherche le premier h1» ... puis met ce h1 dans la variable "titre"
Maintenant, qu'on a l'élément h1 dans la variable titre on, peut faire des choses avec.

2) Enregistrer des « gestionnaires d'événements »

Les programmes JS vont réagir à des événements (click souris, touche clavier, mouvement souris ...)
Ces événements surviennent toujours sur un élément DOM (<h1>, <p>, ....) précis.
Pour réagir, on enregistre une fonction qu'on a écrit sur cet élément DOM:
Si on veut réagir à un click sur cet <h1>, il faut enregistrer notre fonction sur cet <h1>.
Exemple :
titre.addEventListener('click',fonction_a_appeler);
on enregistre la fonction fonction_a_appeler sur titre (titre est la variable qui fait référence au <h1>).
Cette opération (enregistrer la fonction) se fait, en général, au chargement de la page.

3) Réagir à un événement

Plus tard, quand le navigateur s’aperçoit d'un événement sur un élément il regarde si une fonction (gestionnaires d'événements) est enregistrée sur cet élément. Si c'est le cas, le navigateur appelle la fonction.
Exemple:
L'utilisateur clique sur <h1>. Le navigateur voit que fonction_a_appeler est enregistrée sur ce <h1>. Il appelle cette fonction.

Grandes lignes d'un programme JS

6.2 Grandes lignes : question

.

Grandes lignes d'un programme JS

6.3 exemple.html

Créez le fichier evenements.html suivant:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Événements</title>
</head>
<body>
<h1>Cliquez-moi!</h1>
<p>Bonjour!</p>
<script>
let titre=document.querySelector('h1');
titre.addEventListener('click',fonction_a_appeler);
function fonction_a_appeler() {
let paragraphe=document.querySelector('p');
paragraphe.style.color='green';
}
</script>
</body>
</html>

Ouvrez-le dans Firefox.
Cliquez sur le « Cliquez-moi » pour voir ce qu'il se passe.

Lisez ce programme pour comprendre ce qu'il fait.

Que contient la variable titre ?

Grandes lignes d'un programme JS

6.4 addEventListener

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Événements</title>
</head>
<body>
<h1>Cliquez-moi!</h1>
<p>Bonjour!</p>
<script>
let titre=document.querySelector('h1');
titre.addEventListener('click',fonction_a_appeler);
function fonction_a_appeler() {
let paragraphe=document.querySelector('p');
paragraphe.style.color='green';
}
</script>
</body>
</html>

 Quelle(s) affirmation(s) sont vraies à propos de la ligne suivante ?

titre.addEventListener('click',fonction_a_appeler);

Grandes lignes d'un programme JS

6.5 fonction_a_appeler

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Événements</title>
</head>
<body>
<h1>Cliquez-moi!</h1>
<p>Bonjour!</p>
<script>
let titre=document.querySelector('h1');
titre.addEventListener('click',fonction_a_appeler);
function fonction_a_appeler() {
let paragraphe=document.querySelector('p');
paragraphe.style.color='green';
}
</script>
</body>
</html>

 Quelle(s) affirmation(s) sont vraies à propos de la fonction suivante ?

function fonction_a_appeler() {
...
}

Grandes lignes d'un programme JS

6.6 Inspecter Firefox

(Cette question ne fonctionne que sur Firefox)

Dans Firefox, faites clique droit sur « Cliquez-moi » -> Inspecter et vérifiez que vous retrouvez bien le HTML.

Dans l'inspecteur, qu'est-ce qui est marqué à droite du <h1>...</h1> ?

Grandes lignes d'un programme JS

6.7 Firefox : suite

(Cette question ne fonctionne que sur Firefox)

L'inspecteur affiche:



« [event] » indique qu'une fonction (gestionnaire d'événements) a été enregistrée sur ce <h1>. Cliquez sur [event]
Une boite affiche : evenements.html:15
Regardez ce qui se trouve à la ligne 15 du fichier evenements.html

Maintenant, enregistrons 2 autres fonctions. Mettez à jour evenements.html avec:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Événements</title>
</head>
<body>
<h1>Cliquez-moi!</h1>
<p>Bonjour!</p>
<script>
let titre=document.querySelector('h1');
titre.addEventListener('click',fonction_a_appeler);
titre.addEventListener('click',fonction_a_appeler2);
titre.addEventListener('click',fonction_a_appeler3);
function fonction_a_appeler() {
let paragraphe=document.querySelector('p');
paragraphe.style.color='green';
}
function fonction_a_appeler2() {
console.log('fonction_a_appeler2');
}
function fonction_a_appeler3() {
console.log('fonction_a_appeler3');
}
</script>
</body>
</html>

Lisez bien le code.

Rechargez la page et cliquez à nouveau sur [event] dans l'inspecteur. Combien de lignes sont affichées dans la boite ?

Grandes lignes d'un programme JS

6.8 Fonctions enregistrées

Il y a bien 3 fonctions enregistrées sur le <h1>:

  1. fonction_a_appeler
  2. fonction_a_appeler2
  3. fonction_a_appeler3

Cliquez sur le « Cliquez-mi » et vérifiez sur la console que ces trois fonctions ont bien été appelées.

Grandes lignes d'un programme JS

6.9 Événements: suite

<p>Hello</p>
let x=document.querySelector('p');
XYZ
function exemple(){
  ...
}

Que faut-il écrire à la place de XYZ pour enregistrer la fonction exemple comme gestionnaire de l'événement click sur le paragraphe ?