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.
Commençons par une rapide révision des notions des sujets précédents.
Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?
/abcd/
Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?
/abcd$/
Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?
/^[abcd]$/
Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?
/^menu-[0-5]$/
Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?
/^a+b+$/
Quelles sont les chaînes qui correspondent à l'expression régulière suivante ?
/^a[0-9]*$/
É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")
<h1>bonjour</h1>
document.querySelector('h1').addEventListener('click',ma_fonction);
function ma_fonction()
{
console.log('hello');
}
Quelle formulation est vraie ?
document.querySelector('h1').addEventListener('click',ma_fonction);Comment s’appelle en français le rôle de la fonction ma_fonction ?
...
<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>
...
...L'utilisateur ouvre la page et clique 5 fois sur le h1.
<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>
...
v.addEventListener('click',XYZ);Quel est le type attendu pour le deuxième paramètre (XYZ) de addEventListener ?
let x=a;
b(x);
function a()
{
return 123;
}
function b(y)
{
let z=y();
console.log(z);
}
Qu'est affiché sur la console ?
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)
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 ?
Que faut-il écrire pour créer un tableau contenant les nombres 100, 200 et 300 ?
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:
...
<p id="p1" class="important">bonjour</p>
<script>
let o=document.getElementById('p1');
o.style.color="red";
o.className="";
</script>
Il est fréquent de confondre "textContent" et "value".
Voyons la différence
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>
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";
<input id="nom" type="text" value="Karim" />
<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 ?
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:
<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>
Vous êtes sur la bonne voie! Ça commence bien par parentNode
<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 ?
Vous êtes sur la bonne voie.
this.querySelector('.prix') est bien le span (prix).
Dans les pages suivantes on va écrire ensemble un programme JS permettant de gérer un tableau de joueurs.
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)
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:
let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
});
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.
let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
console.log('Click');
ajouter_joueur();
});
function ajouter_joueur()
{
console.log('ajouter_joueur');
}
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.
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:
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);
}
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:
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);
}
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)
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)
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);
}
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:
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='';
});
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.
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)
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 ?
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
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:
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);
}
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:
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.
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.
.
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.
<!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);
<!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() {
...
}
(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> ?
(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 ?
Il y a bien 3 fonctions enregistrées sur le <h1>:
Cliquez sur le « Cliquez-mi » et vérifiez sur la console que ces trois fonctions ont bien été appelées.
<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 ?