afficher

prompt(), alert(), document.write()

Pour afficher les résultats de nos calculs dans la page, nous nous sommes servis jusque là de document.write() (qui écrit dans la page html). On peut également utiliser alert() (qui ouvre une "fenêtre popup" de message).

Pour demander à l'utilisateur d'entrer une donnée, nous nous sommes servis de prompt().

Si ces fonctions sont pratiques pour tester de petits programmes, elles ne sont pas adaptées en général à une page html puisqu'elles en pertubent le flux et l'affichage.

Nous allons voir dans cette page comment procéder plus directement à l'aide d'éléments html du DOM de la page.

Éléments de formulaire

Pour demander d'entrer une donnée (un nombre, un texte) à l'utilisateur, on peut prévoir un élément input dans la page html.

Pour afficher le résultat de l'opération effectuée sur cette donnée, on prévoit également un élément html (par exemple un élément p ou un élément span) et on inscrit le résultat dans cet élément à l'aide de innerHTML ou à l'aide de textContent.

Premier exemple

Dans ce premier exemple, on utilise onchange qui permet de déclencher une fonction lorsque le contenu de l'élément de formulaire input est modifié par l'utilisateur.

Nous rentrerons un peu plus dans le détail de la définition de fonction dans une feuille de cours ultérieure.

Lisez le code ci-dessous et les commentaires. Puis testez. N'hésitez pas à faire quelques modifications pour bien comprendre le rôle de chaque ligne du code.

<!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" onchange="affiche()">
		 <!-- PS:  modifier step="1" par step="4" par exemple,
		  puis cliquer sur les flèches dans le champ input, vous
		comprendrez immédiatement le rôle de step -->
		
		
		<!-- 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>
		
        <script>
		function affiche(){
			//on récupère la valeur entrée dans l'élément input d'identifiant "nombre" par le code suivant:
			const nb = document.getElementById("nombre").value;
			
			//on modifie maintenant le contenu des éléments span:
			document.getElementById("valeurEntree").textContent = nb;
			document.getElementById("carre").textContent = nb*nb;			   
		}
        </script>
    </body>
</html>

Le mot clef const est utilisé pour déclarer une variable dont la valeur ne sera pas modifiée après son affectation initiale (il s'agit donc d'une constante). Pour une variable dont la valeur sera modifiée dans le script, on utilise le mot clef let lors de la déclaration.

Il est également possible d'attacher l'événement "change" à l'élément html input dans le script plutôt que dans le code de l'élément input :

<!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">
		
		
		<!-- 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>
		
        <script>
			
		// On récupère l'élément input d'identifiant "nombre".
		// On utilise ici  querySelector
		// mais on pourrait aussi utiliser getElementById.
		const entree = document.querySelector("#nombre"); 
		
		
		function affiche(){
			// On récupère la valeur entrée dans l'élément input d'identifiant "nombre".
			const nb = entree.value;
			
			// on modifie maintenant le contenu des éléments span.
			// On utilise donc querySelector ou getElementById.
			document.querySelector("#valeurEntree").textContent = nb;
			document.querySelector("#carre").textContent = nb*nb;			   
		}
		
		
		// lancement de la fonction affiche lorsque le contenu de l'élément input est modifié: 
		entree.addEventListener('change', affiche);
		
        </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>
        <style>
        #presentationResultat{margin:1rem;}
        </style>
    </head>
    <body>
		
		<label for="nombre">Entrez un nombre :</label>
		<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"> 
			Affichage des carrés.
		</p>
		
        <script>
		const entree = document.querySelector("#nombre"); 
		
		function affiche(){
			 
			const nb = entree.value;
			
			// on définit le texte de présentation du résultat dans le script :
			const chaine = `${nb}<sup>2</sup> =  ${nb*nb}.`;
			 
			// on modifie maintenant le contenu de l'élément p :
			document.getElementById("presentationResultat").innerHTML = chaine;			 			   
		}
		
		entree.addEventListener('change', affiche);
        </script>
    </body>
</html>

On a utilisé dans le code précédent innerHTML au lieu de textContent:

On utilise textContent lorsqu'on ne cherche qu'à afficher (ou à récupérer) du texte (une chaîne de caractères).
On utilise innerHTML lorsqu'on cherche à modifier (ou à récupérer) un contenu d'élément pouvant lui-même contenir d'autres éléments html.

Pour bien comprendre ce qui vient d'être lu sur la différence entre innerHTML et textContent, essayez ci-dessous le même code que précédemment mais avec textContent au lieu de innerHTML:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carré </title>
        <style>
        #presentationResultat{margin:1rem;}
        </style>
    </head>
    <body>
		

		<label for="nombre">Entrez un nombre :</label>
		<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"> 
			Affichage des carrés.
		</p>
		
        <script>
		let entree = document.querySelector("#nombre"); 
		
		function affiche(){
			const nb = entree.value;
			const chaine = `${nb}<sup>2</sup> =  ${nb*nb}.`;
			document.getElementById("presentationResultat").textContent = chaine;			 			   
		}
		
		entree.addEventListener('change', affiche);
        </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>
        <style>
        #presentationResultat{margin:1rem;}
        </style>
    </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"> 
			Bientôt ici affichage de carrés d'entiers!
		</p>
		
        <script>
		function affiche(){
			const nb = document.getElementById("nombre").value;
			const chaine = `${nb}<sup>2</sup> =  ${nb*nb}.`; 
			document.querySelector("#presentationResultat").innerHTML = chaine;			 			   
		}
		
		document.querySelector("#bouton").addEventListener('click', affiche);
        </script>
    </body>
</html>

select

On peut vouloir offrir un choix parmi des possibilités fixées à l'avance. Pour cela, on utilisera la balise select.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> film </title>
        <style>body{min-height: 8rem;}</style>
    </head>
    <body>
		
		
		<p>Quel film préférez-vous? </p>
		
		
		<!-- les choix proposés : -->
		<select id="choixFilm">
			<option value="indifferent">Choisir dans cette liste</option>
			<option value="Tolkien">Le Seigneur des Anneaux</option>
			<option value="Lucas">Star Wars</option>
			<option value="Rowling">Harry Potter</option>
		</select>
		
		 
		
		<!-- on définit maintenant des éléments html pour afficher la réponse -->
		<p id="presentationResultat"> 
			 
		</p>
		
        <script>
		 
		const choixFilm = document.getElementById("choixFilm");
		const presentationResultat = document.getElementById("presentationResultat");
		
		function afficheReponse()
		{	
			let i = 0;
			const filmChoisi = choixFilm.value;
			
			if(filmChoisi === "Tolkien") {
				i = 1;
			}
			else if(filmChoisi === "Lucas") {
				i = 2;
			}
			else if(filmChoisi === "Rowling") {
				i = 3;
			}
			presentationResultat.textContent =  `Votre préférence : ${choixFilm.options[`${i}`].text}.`;
		}
		
		choixFilm.addEventListener( "change", afficheReponse );
		 
        </script>
    </body>
</html>

Les tests du cas présenté peuvent s'abréger en:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> film </title>
        <style>body{min-height: 8rem;}</style>
    </head>
    <body>
		
		
		<p>Quel film préférez-vous? </p>
		
		
		<!-- les choix proposés : -->
		<select id="choixFilm">
			<option value="indifferent">Choisir dans cette liste</option>
			<option value="Tolkien">Le Seigneur des Anneaux</option>
			<option value="Lucas">Star Wars</option>
			<option value="Rowling">Harry Potter</option>
		</select>
		
		 
		
		<!-- on définit maintenant des éléments html pour afficher la réponse -->
		<p id="presentationResultat"> 
			 
		</p>
		
        <script>
		 
		const choixFilm = document.getElementById("choixFilm");
		const presentationResultat = document.getElementById("presentationResultat");
		
		function afficheReponse()
		{	
			const filmChoisi = choixFilm.value;
			
			for(let i = 1; i < choixFilm.options.length; i++)
			{
				if(filmChoisi === choixFilm.options[i].value) {
					presentationResultat.textContent = `Votre préférence : ${choixFilm.options[`${i}`].text} de ${choixFilm.options[`${i}`].value}.`;
				}
			}
		}
		
		choixFilm.addEventListener( "change", afficheReponse );
		 
        </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 :