Code source du projet de code couleur en JavaScript

Voir le résultat Retour à la page du projet

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title>Calculette T.T.C.</title>
<style>

L'interface utilisateur est incluse dans un élément div, dont l'id est fond, nous définissons ici une règle CSS pour cette div :

padding:10px : le contenu est à 10 pixels du bord,
border:1px solid blue : la bordure est bleue en trait plein de 1 pixel d'épaisseur,
background-color:lightblue : la couleur de fond est en bleu pâle.

	#fond{
		padding:10px;
		border:1px solid blue;
		background-color:lightblue;
	}
</style>
</head>
<body>

Interface utilisateur

L'ensemble de l'interface figure dans un élément div et comporte :

un zone d'entrée,
un bouton de validation,
un élément span dans lequel le résultat est affiché.

<div id="fond">
<p>Prix H.T. : <input id="entree" type="text" /></p>
<p><input id="boutonValider" type="button" value="Calculer" /></p>
<p>Résultat : <span id="resultat"></span></p>
</div>

Code JavaScript du programme

<script>

Pour pouvoir interagir avec les éléments de l'interface utilisateur nous devons y faire référence en définissant des variables avec la commande document.getElementById.

	var entree=document.getElementById("entree");
	var boutonValider=document.getElementById("boutonValider");
	var resultat=document.getElementById("resultat");

Nous définissons sur le bouton un gestionnaire d'événement pour l'événement onclick.

Cela signifie que chaque fois que l'utilisateur clique sur le bouton, la fonction du gestionnaire est appelée ce qui entraîne :

l'appel de la fonction afficheTTC pour calculer et afficher le résultat,
la réaffectation du curseur d'entrée à la zone de saisie (entree.focus()).

	boutonValider.onclick=function(){
		afficheTTC();
		entree.focus();
	}

Nous définissons sur la zone de saisie un gestionnaire d'événement onkeypress.

Chaque fois que l'utilisateur appuie sur une touche depuis la zone de saisie les instructions suivantes sont exécutées :

la zone d'affichage du résultat est vidée,
dans le cas où la touche "entrée" est appuyée (keyCode égal à 13), le résultat est affiché de la même façon que si l'utilisateur appuie sur le bouton.

	entree.onkeypress=function(event){
		resultat.innerHTML="";
		if(event.keyCode==13){
			afficheTTC();
		}
	}

Cette fonction s'occupe de calculer et afficher le résultat.

	function afficheTTC(){

Pour calculer la somme T.T.C. nous récupérons le contenu de la zone de saisie : il s'agit d'une chaîne de caractères, en appliquant la fonction parseFloat nous obtenons le nombre saisi.

Dans le cas où un utilisateur malicieux n'a pas saisi un nombre, la fonction parseFloat retourne la valeur spéciale NaN : Not a Number.

Nous multiplions la valeur par 120 et arrondissons le résultat, en divisant le tout par 100 nous obtenons un résultat arrondi au centième.

		var sommeTTC=Math.round(parseFloat(entree.value)*120)/100;

Dans le cas où l'utilisateur n'a pas rentré un nombre, sommeTTC contient NaN, le test qui figure ici permet alors d'afficher le message : "Erreur de saisie". Dans le cas contraire le résultat est affiché.

A noter que l'affichage du message/résultat consiste à définir le contenu de l'élément span de l'interface utilisateur en définissant sa propriété innerHTML.

		if(isNaN(sommeTTC)){
			resultat.innerHTML="Erreur de saisie";
		} else {    	
			resultat.innerHTML=sommeTTC;
		}
	}

Dès le chargement de la page la zone d'entrée reçoit le curseur.

	entree.focus();
</script>
</body>
</html>