afficher

jQuery

jQuery est une bibliothèque javascript qui simplifie l'interactivité (gestion des événements notamment, modification d'éléments html de la page...).

Pour les situations simples vues dans cette page (et que nous reprenons ici en utilisant jQuery), le gain n'est pas considérable. Mais lorsque la situation se complique (et si l'on veut écrire des scripts fonctionnant sur à peu près tous les navigateurs), le gain en lignes de code peut devenir important.

Éléments de formulaire

Nous reprenons, dans l'ordre, les exemples de cette page mais en utilisant jQuery pour l'échange de données entre l'utlisateur et la page html.

Premier exemple

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carré </title>
    </head>
    <body>
		
		<!-- l'élément label sert à mettre une "étiquette" sur l'élément input -->
		<!-- la valeur de l'attribut for sera la valeur de l'attribut id de l'élément de formulaire associé. -->
		<label for="nombre">Entrez un nombre :</label>
		<!-- on attend un nombre, l'élément input est donc de type number. -->
		<!-- on déclenche la fonction affiche() au changement de contenu de l'élément input -->
		<!-- l'attribut value   permet de donner une valeur par défaut -->
		<input id="nombre" type="number" value="0" step="1">
		
		
		<!-- on définit maintenant des éléments html pour afficher la réponse -->
		<p> 
			Le carré du nombre <span id="valeurEntree">...</span> 
			est égal à <span id="carre">...</span>.
		</p>
		
		
		<!-- lien sur jquery -->
		<script src='http://code.jquery.com/jquery-latest.min.js'></script>
        <script>
		// Lorsqu'on capte un événement change sur l'élément d'identifiant nombre
		// on apllique la fonction définie dans les parenthèses.
		$('#nombre').change(		
					function(){
						// on récupère la valeur entrée dans l'élément input 
						// d'identifiant "nombre" par le code ci-dessous
						// (this faisant référence à l'objet appelant 
						// on peut mettre ici '#nombre' à la place)
						let nb = $(this).val();
						// on modifie maintenant le contenu des éléments span :
						$('#valeurEntree').html(nb);
						$('#carre').html(nb*nb);			   
					}
		);
        </script>
    </body>
</html>

Second exemple

Nous reprenons l'exemple 1 en le modifiant un peu.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carré </title>
    </head>
    <body>
		
		<!-- l'élément label sert à mettre une "étiquette" sur l'élément input -->
		<!-- la valeur de l'attribut for sera la valeur de l'attribut id de l'élément de formulaire associé. -->
		<label for="nombre">Entrez un nombre :</label>
		<!-- on attend un nombre, l'élément input est donc de type number. -->
		<!-- on déclenche la fonction affiche() au changement de contenu de l'élément input -->
		<!-- l'attribut value   permet de donner une valeur par défaut -->
		<input id="nombre" type="number" value="0" step="1">
		
		
		<!-- on définit maintenant des éléments html pour afficher la réponse -->
		<p id="presentationResultat"> 	</p>
		
		
		<script src='http://code.jquery.com/jquery-latest.min.js'></script>
		<script>
		// Lorsqu'on capte un événement change sur l'élément d'identifiant nombre
		// on apllique la fonction définie dans les parenthèses.
		$('#nombre').change(		
			function(){
				// on récupère la valeur entrée dans l'élément input 
				// d'identifiant "nombre" par le code ci-dessous
				// (this faisant référence à l'objet appelant 
				// on peut mettre ici '#nombre' à la place)
				let nb = $(this).val();
				
				// on définit le texte de présentation du résultat dans le script :
				let chaine = " Le carré du nombre ";
				chaine += nb;
				chaine += " est égal à ";
				chaine += "<span  style=\" border : 1px solid black; padding : 3px;\">" + (nb*nb) + "</span>.";
				// on modifie maintenant le contenu de l'élément p :
				$('#presentationResultat').html(chaine);				 		   
			}
		);
        </script>
    </body>
</html>

Troisième exemple

Dans les exemples précédents, nous avons utilisé l'événément change correspondant à une modification du contenu de l'élément input pour déclencher la fonction définie pour l'affichage.

On peut également utiliser d'autres événements. Par exemple, ci-dessous, nous ajoutons un bouton et l'événement déclencheur de la fonction d'affichage sera un clic sur le bouton.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carré </title>
    </head>
    <body>
		
		
		<label for="nombre">Entrez un nombre :</label>
		<input id="nombre" type="number" value="0" step="1">
		
		<!--  Ajout d'un élément button à cliquer pour afficher les résultats -->
		<button id="bouton">puis cliquez ici !</button>
		
		
		<!-- on définit maintenant des éléments html pour afficher la réponse -->
		<p id="presentationResultat"> 	</p>
		
		<script src='http://code.jquery.com/jquery-latest.min.js'></script>
        <script>
		$('#bouton').click(
			function(){
				// on récupère la valeur entrée dans l'élément input d'identifiant "nombre" par le code suivant :
				let nb = $('#nombre').val();
				// on définit le texte de présentation du résultat dans le script :
				let chaine = " Le carré du nombre ";
				chaine += nb;
				chaine += " est égal à ";
				chaine += "<span  style=\" border : 1px solid black; padding : 3px;\">" + (nb*nb) + "</span>.";
				// on modifie maintenant le contenu de l'élément p :
				$('#presentationResultat').html(chaine);			 			   
			}
		);
        </script>
    </body>
</html>

Les événements

Nous avons, dans le paragraphe précédent, évoqué deux événements : l'événement click et l'événement change.

Il en existe d'autres dont, par exemple, l'événement mouseover (qui se déclenche lorsque la souris passe sur l'élément html ciblé) que nous illustrons en exercice.

Quelques références pour en savoir plus sur les événements avec jQuery :