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

Rappel : fonctions fléchées

function(){return window.location.href;}

Rappel : fonctions fléchées

Transformez cette fonction fléchée en une fonction anonyme non fléchée

(x,y)=>x+y

Rappel : fonctions fléchées

Transformez cette fonction fléchée en une fonction anonyme non fléchée

a=>a

let lis=document.querySelectorAll('li');

Utilisez une boucle forEach pour afficher en rouge tous les éléments de la page ayant class="important".
Écrivez-le en une seule ligne, sans créer de variable intermédiaire.
Utilisez une fonction fléchée, simplifiée aux maximum. Son paramètre sera appelé « i »

let scores=[143,168,3895,294,335];
let m=0;

Utilisez une boucle forEach pour calculer dans la variable « m » le meilleur score.
Utilisez une fonction fléchée. Son paramètre sera appelé « s »
Indice: vous pouvez utiliser soit une condition « if » soit la fonction Math.max (voir doc).

Essayez dans la console avant de répondre.

document.querySelector('div').addEventListener('click',()=>console.log('click'));

Sur quel(s) élément(s) est-ce que l'utilisateur peut cliquer pour afficher « click » sur la console ?

document.querySelector('body').addEventListener('click',()=>console.log('click'));

(attention: le paramètre de querySelector a changé)
Sur quel(s) élément(s) est-ce que l'utilisateur peut cliquer pour afficher « click » sur la console ?

document.querySelector('body').addEventListener('click',(event)=>console.log('click',event.target));

L'utilisateur clique sur le span.
A quel élément correspond event.target ?

document.querySelector('body').addEventListener('click',function(event){console.log('click',this);});

L'utilisateur clique sur le span.
A quel élément correspond this ?

jQuery est une librairie JavaScript utilisée sur la grande majorité des sites web (77% en 2022).
Elle simplifie l'accès aux DOM.

jQuery est une librairie, c'est à dire des fonctions et des objets écrits par les développeurs de jQuery.
jQuery n'est pas fourni par votre navigateur, vous devez l'inclure, par exemple, comme ceci:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

L'accès à jQuery se fait par un raccourcis « $ ».
$ est à la fois une fonction et un objet.

En jQuery on manipule en permanence des « listes jQuery »
Une liste jQuery contient une liste d'éléments DOM.
Vous pouvez l'imaginer comme un tableau d'éléments DOM, ou comme une NodeList.

En général, pour créer une liste jQuery, on appelle la fonction « $ » avec un sélécteur CSS:

$('.important') 

Ceci renvoie une liste jQuery contenant tous les éléments ayant class="important"

C'est très similaire à querySelectorAll:

document.querySelectorAll('.important')

let a=$('.xyz');

Créez une liste jQuery contenant tous les paragraphes de la page

Créez une liste jQuery contenant l'élément ayant id="bouton"

Une fois qu'on a une liste jQuery, on peut appeler une des nombreuses fonctions jQuery définies dessus. Il y en a plus de 140.
Les fonctions jQuery s'appliquent sur toute la liste... ce qui évite d'écrire des boucles. C'est très pratique ! 🙂

Exemple: fonction .hide()

Pour cacher tous les éléments ayant class="important"

$('.important').hide()

C'est l'équivalent de:

document.querySelectorAll('.important').forEach(d=>d.style.display='none');

Exemple: fonction .on()

$('.important').on('click',()=>console.log('bonjour'))

C'est l'équivalent de:

document.querySelectorAll('.important').forEach(d=>d.addEventListener('click',()=>console.log('bonjour')));

Variable

Si nécessaire, on peut mettre une liste jQuery dans une variable, puis appeler une fonction dessus. Par exemple, on peut décomposer :

$('.important').hide();

en :

let a=$('.important');
a.hide();

Comme vous le voyez, jQuery permet d'écrire simplement des choses qui seraient plus compliquées en DOM.

La fonction jQuery .show() permet d'afficher un élément qui est caché, par exemple, par .hide()
Que faut-il écrire pour afficher tous les éléments ayant class="important"

<span>retour</span>
<span id="ok">Cliquez ici</span>
<p>Les actualités:</p>
<p class="important">Baisse des prix</p>
<p class="important">Pluie demain</p>
<p class="important">Vague de chaleur</p>

Quand l'utilisateur clique sur le span ok, affichez  « bonjour » dans la console.
Écrivez le jQuery, en utilisant une fonction fléchée, sans paramètre.

<span>retour</span>
<span id="ok">Cliquez ici</span>
<p>Les actualités:</p>
<p class="important">Baisse des prix</p>
<p class="important">Pluie demain</p>
<p class="important">Vague de chaleur</p>

Quand l'utilisateur clique sur le span ok, cachez tous les éléments ayant  class="important"
Écrivez le jQuery, en utilisant une fonction fléchée, sans paramètre.

<p id="abc">exemple</p>

La fonction .css() permet de modifier l'attribut « style »:

Les trois approches suivantes ont le même résultat:

$('#abc').css('color','red');

document.getElementById('abc').style.color='red';

<p id="abc" style="color:red">exemple</p>

Traduisez la ligne suivante en jQuery

document.querySelectorAll('.xyz').forEach(d=>d.style.color='green');

<span>abcd</span>

La fonction .text() permet d'accéder à textContent
Les deux lignes suivantes font la même chose:

$('span').text('defg');

document.querySelector('span').textContent='defg';

Et le span devient:

<span>defg</span>

<p>Bonjour</p>

Que faut-il écrire en jQuery pour remplacer « Bonjour » par « Au revoir » ?

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

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"> 
		<title>exemple1</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<h1>Ceci est un titre</h1>
		<p>bla bla bla</p>
		<script>
			$('h1').on('click',function(){
			  $('p').css('color','red');
			  $('p').text('Hello world');
			});
		</script>
	</body>
</html>

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"> 
		<title>exemple1</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<p><input type="button" value="cacher"/></p>
		<p><img src="http://moodle.iutv.univ-paris13.fr/img/js/tux.png" alt="tux"/></p>
		<script>
		</script>
	</body>
</html>

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

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"> 
		<title>exemple1</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<p><input type="button" value="cacher"/></p>
		<p><img src="http://moodle.iutv.univ-paris13.fr/img/js/tux.png" alt="tux"/></p>
		<script>
			$('input').on('click',function(){
			  $('img').hide();
			});
		</script>
	</body>
</html>

<input type="text" />

La fonction .val() permet d’accéder à la propriété value, par exemple, d'un champs texte.

Pour lire ce que l'utilisateur à tapé dans le champs texte:

let a=$('input').val();

Pour modifier le contenu du champs texte:

$('input').val('exemple');

C'est l'équivalent de:

let a=document.querySelector('input').value;

document.querySelector('input').value='exemple';

<input type="button" value="cacher"/>

Que faut-il écrire pour que le bouton affiche "montrer" au lieu de "cacher" ?

On voudrait que l'image du pingouin soit cachée lorsque l'utilisateur appuie sur le bouton. Ensuite le bouton devrait afficher « montrer ».
Quand l'utilisateur clique à nouveau, l'image est affichée et le bouton affiche à nouveau « cacher ».

       <=>  

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

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"> 
		<title>exemple1</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<p><input type="button" value="cacher"/></p>
		<p><img src="http://moodle.iutv.univ-paris13.fr/img/js/tux.png" alt="tux"/></p>
		<script>
			$('input').on('click',function(){
			  if($('input').val()==='cacher')
			  {
				$('img').hide();
				$('input').val('montrer');
			  }
			  else                          
			  {
				$('img').show();
				$('input').val('cacher');
			  }
			});
		</script>
	</body>
</html>

On va reprendre le fichier suivant vu au Sujet-1 :

pos-click-jq.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Pos click</title>
	</head>
	<body>
		<p>
			La souris se trouve à la position 
			x=<span id="affiche-x">?</span>, 
			y=<span id="affiche-y">?</span>
		</p>
		<script>
			document.addEventListener('mousemove',fonction_a_appeler);
			function fonction_a_appeler(event)
			{
			  console.log('coucou',event.pageX,event.pageY);
			  let ax=document.querySelector('#affiche-x');
			  let ay=document.querySelector('#affiche-y');
			  ax.textContent=event.pageX;
			  ay.textContent=event.pageY;
			}
		</script>
	</body>
</html>

Traduisez le en jQuery :

• Pensez à ajouter la balise <script>  pour charger jQuery
• Pour obtenir la liste jQuery du document utilisez $(document)
  

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

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Pos click</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<p>
			La souris se trouve à la position 
			x=<span id="affiche-x">?</span>, 
			y=<span id="affiche-y">?</span>
		</p>
		<script>
			$(document).on('mousemove',fonction_a_appeler);
			function fonction_a_appeler(event)
			{
			  console.log('coucou',event.pageX,event.pageY);
			  $('#affiche-x').text(event.pageX);
			  $('#affiche-y').text(event.pageY);
			}
		</script>
	</body>
</html>

jQuery: Programmes courts

Créez le fichier suivant.

inscrits.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Inscrits</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<p>
			<input id="nom" type="text" />
			<input id="ajouter" type="button" value="ajouter" />
		</p>
		<h4>Inscrits:</h4>
		<ul id="inscrits">
		</ul>
		<script>
		</script>
	</body>
</html>

En jQuery, affichez dans la console le nom tapé dans le champs texte, quand l'utilisateur clique 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:

			$('#ajouter').on('click',function(){
			  console.log($('#nom').val());
			});

Depuis le SUjet-1, en DOM, sans jQuery, pour créer un élément, on suivait les étapes suivantes:

• Créer l'élément:
  let el=document.createElement('p');
• Renseigner ses propriétés ou son contenu.
  el.textContent='blabla';
• Insérer l'élément dans l'arbre DOM
  document.getElementById('exemple').append(el);
  

(rappel et plus de détails)

En jQuery, on suit des étapes similaires.

• Créer une liste jQuery contenant l'élément:
  let el=$('<p></p>');
• Renseigner ses propriétés ou son contenu.
  el.text('blabla');
• Insérer l'élément dans l'arbre DOM
  $('#exemple').append(el);
  

			$('#ajouter').on('click',function(){
			  let ligne=$('<li></li>');
			  ligne.text($('#nom').val());
			  $('#inscrits').append(ligne);
			  $('#nom').val('');
			});

Créez le fichier liste-selection.html :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Liste sélection</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<style>
			.choisi
			{
				background-color: green;
				color: white;
			}
		</style>
	</head>
	<body>
		<ul id="choix">
			<li>Fraise</li>
			<li>Chocolat</li>
			<li>Vanille</li>
			<li>Pistache</li>
		</ul>
		<script>
		</script>
	</body>
</html>

En jQuery, affichez « click » dans la console quand l'utilisateur clique sur un <li>
(Sans utiliser de bubbling. Rappel: jQuery permet d'installer un gestionnaire d'événements sur tous les éléments d'une liste jQuery)

			$('li').on('click',function(){
			  console.log('click');
			});

On voudrait changer la couleur de l'élément cliqué. Pour ça, il faut qu'on puisse, dans le gestionnaire d'événements, savoir quel élément a été cliqué.

Comment s'appelle, en DOM, sans jQuery, la variable contenant l'élément cliqué ?

La fonction jQuery .addClass() permet d'ajouter une classe aux éléments d'une liste jQuery.

Exemple:

<p>Tom</p>
<p>Liam</p>

$('p').addClass('exemple');

<p class="exemple">Tom</p>
<p class="exemple">Liam</p>

--

En tenant compte de ceci et de ce qu'on a vu à la page précédente, que faut-il taper pour ajouter la classe « choisi » à l'élément cliqué.
(Essayez dans votre programme avant de répondre)

La fonction .hasClass() permet de savoir si une classe est présente:

<p class="abc def'>bonjour</p>

$('p').hasClass('abc')  renvoie true
$('p').hasClass('xyz')  renvoie false

.removeClass() permet de supprimer une classe:

$('p').removeClass('abc')  transforme le paragraphe en ceci:

<p class="def'>bonjour</p>

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

			$('li').on('click',function(){
			  if($(this).hasClass('choisi')){
				$(this).removeClass('choisi');
			  }
			  else{
				$(this).addClass('choisi');
			  }
			});

Créez le fichier code.html suivant

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Code</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<style>
			#nombres
			{
				border-collapse: collapse;
				margin-left: 1em;
			}
			#nombres td
			{
				border: 1px solid black;
				width: 30px;
				height: 30px;
				text-align: center;
				cursor: pointer;
				user-select: none;
			}
			#nombres td:hover
			{
				background-color: #ffe;
			}
		</style>
	</head>
	<body>
		<p>
			<input id="code" type="text" maxlength="4"/>
			<input id="valider" type="button" value="Valider" />
			<input id="effacer" type="button" value="Effacer" />
		</p>
		<table id="nombres">
			<tr><td>7</td><td>8</td><td>9</td></tr>
			<tr><td>4</td><td>5</td><td>6</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>0</td><td></td><td></td></tr>
		</table>
		<script>
		</script>
	</body>
</html>

Quand l'utilisateur clique sur un <td>, affichez « click  » dans la console.

			$('td').on('click',function(){
			  console.log('click');
			});

Que faut-il taper en jQuery pour créer une variable « code » et y mettre le code se trouvant dans le champs texte.

En utilisant ce que l'on vient de voir et la concaténation, faites en sorte qu'on puisse cliquer sur les nombres pour remplir un code dans le champs texte.

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

			$('td').on('click',function(){
			  let code=$('#code').val();
			  let nb=$(this).text();
			  $('#code').val(code+nb);
			});

Faites en sorte de limiter le code cliqué à 4 chiffres.

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

			$('td').on('click',function(){
			  let code=$('#code').val();
			  if(code.length>=4){return;}
			  let nb=$(this).text();
			  $('#code').val(code+nb);
			});

Si l'utilisateur clique sur effacer, effacez le contenu du champs texte.

Si l'utilisateur clique sur valider, affichez un alert indiquant « Ok » si le code vaut 1234 et « Code non valide » sinon.

			$('#effacer').on('click',function(){
			  $('#code').val('');
			});
			$('#valider').on('click',function(){
			  let code=$('#code').val();
			  if(code!=='1234'){alert('Code non valide');}
			  else             {alert('Ok!');}
			});

Les événements possèdent souvent des « actions par défaut ».

Par exemple :

• l'action par défaut quand on clique sur un lien <a href="..."> est de changer de page
• l'action par défaut quand on valide un formulaire est d'envoyer les données et changer de page
• l'action par défaut quand on enfonce une touche dans un champs texte est d'afficher le caractère tapé

On peut bloquer l'action par défaut avec la fonction event.preventDefault()

Par exemple:
Quand l'utilisateur clique sur le lien, rien ne se passe:

<a href="https://exemple.com">lien</a>

$('a').on('click',function(event){
    event.preventDefault();
});

On voudrait empêcher l'utilisateur de taper autre chose que des chiffres dans le champs texte.

Ajoutez un gestionnaire d'événements keydown sur le champs texte.
Utilisez event.preventDefault() pour bloquer la saisie quand le caractère saisi n'est pas un chiffre

Rappels:

• le caractère saisi est dans event.key (voir jeu.js où on déplaçait le pingouin avec les touches)
  N'hésitez pas à afficher event.key dans la console, pour mieux comprendre.
  
• vous pouvez utiliser une expression régulière simple

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Code</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<style>
			#nombres
			{
				border-collapse: collapse;
				margin-left: 1em;
			}
			#nombres td
			{
				border: 1px solid black;
				width: 30px;
				height: 30px;
				text-align: center;
				cursor: pointer;
				user-select: none;
			}
			#nombres td:hover
			{
				background-color: #ffe;
			}
		</style>
	</head>
	<body>
		<p>
			<input id="code" type="text" maxlength="4"/>
			<input id="valider" type="button" value="Valider" />
			<input id="effacer" type="button" value="Effacer" />
		</p>
		<table id="nombres">
			<tr><td>7</td><td>8</td><td>9</td></tr>
			<tr><td>4</td><td>5</td><td>6</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>0</td><td></td><td></td></tr>
		</table>
		<script>
			$('td').on('click',function(){
			  let code=$('#code').val();
			  if(code.length>=4){return;}
			  let nb=$(this).text();
			  $('#code').val(code+nb);
			});
			$('#effacer').on('click',function(){
			  $('#code').val('');
			});
			$('#valider').on('click',function(){
			  let code=$('#code').val();
			  if(code!=='1234'){alert('Code non valide');}
			  else             {alert('Ok!');}
			});
			$('#code').on('keydown',function(event){
			  if(event.key.length===1 && !/^[0-9]$/.test(event.key)){event.preventDefault();}
			});
		</script>
	</body>
</html>