Accueil

Tutoriel HTML - sommaire

Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Deux applications HTML5

Dans ce chapitre je vous montre qu'en combinant HTML5, CSS3 & JavaScript on peut réaliser aisément des pages qui constituent de véritables petites applications.

Afin que ces pages puissent fonctionner en dehors de tout site, donc de façon autonome, il est préférable que la feuille de style soit interne.

Une calculette

Essayez l'application

La calculette

Le code HTML de la page

... <script src ="jquery.js"></script> </head> <body> ... <br>addition, soustraction, multiplication, division, 1er puissance 2ième, racine carrée du 1er </p> <form> <label>Saisir le premier nombre :</label><input type = 'text' > <label>Sélectionnez l'opérateur dans la liste </label> <select id ="operation"> <option value = '+'> + </option> <option value = '-'> - </option> <option value = '*'> *</option> <option value = '/'> / </option> <option value = 'p'>1er puissance 2ième</option> <option value = 'r'>racine carrée du 1er terme</option> </select> <label>Saisir le deuxième nombre :</label> <input type = 'text' > <label></label><button type ='button'>=</button> <label>Résultat : </label><input type = 'text' readonly id ="resultat" > </form> ...

Attention programmation en JS jQuery donc il faut charger ce framework.
Il y a dans ce site un tuto sur le célèbre framework de JavaScript (dans le tutoriel "JavasScript").

Sinon aucune difficulté : trois input type = text dont le dernier "readonly" (pour afficher le résultat de l'opération), une liste déroulante pour sélectionner le type d'opération et un bouton de commande pour appeler la fonction fcalcul sur clic.

Le code JavaScript

	var saisie;
	// appel de fonctions
	$("button").click(function(){fcalcul();});
	// contrôles de saisie
	$("input:text:eq(0)").blur(function()
		{saisie = $(this).val() ; if(isNaN(saisie)) alert("erreur"); });
	$("input:text:eq(1)").blur(function() 
		{saisie = $(this).val() ; if(isNaN(saisie)) alert("erreur"); });
	
	function fcalcul() 
	{	
		var vresultat; 
		// récupérer les valeurs saisies dans variables
		var vpremier = $("input:eq(0)").val();
		var vdeuxieme = $("input:eq(1)").val();
		// opérations
		if ($("#operation").val() == '+' ) 
			vresultat = parseFloat(vpremier) + parseFloat(vdeuxieme);
		if ($("#operation").val() == '-' ) 
			vresultat = vpremier - vdeuxieme;
		if ($("#operation").val() == '*' ) 
			vresultat = vpremier * vdeuxieme;
		if ($("#operation").val() == '/' ) 
			vresultat = vpremier / vdeuxieme;
		if ($("#operation").val() == 'p' ) 
			vresultat = Math.pow(vpremier,vdeuxieme) ; 
		if ($("#operation").val() == 'r'  ) 
			vresultat = Math.sqrt(vpremier);
		// affecter le résultat dans le champ de formulaire
		$("#resultat").val(vresultat);
	} // fin fonction

Emploi de jQuery pour simplifier le script !

Sur perte focus du premier ou du deuxième champ de saisie on contrôle si la valeur saisie est bien au format numérique.
Notez l'emploi du mot réservé this et de la fonction isNaN.
Ainsi si vous saisissez 12,5 il aura un message d'erreur ! En effet le séparateur décimal est bien sûr le point !
Cette erreur n'est pas bloquante !

La fonction fcalcul() est appelée lors d'un clic sur le bouton de commande unique.
Dans cette fonction on teste la valeur saisie via la liste déroulante (identifiée operation) et on effectue le traitement correspondant.
Attention les valeurs saisies via des champs de formulaire sont toujours de type string (même si elles sont au format numérique). Donc dans le cadre de l'addition, il faut convertir en réel (avec parseFloat) les valeurs sinon le "+" provoquerait une concaténation (et non pas une addition).
Pour les autres opérations la conversion n'est pas utile. Comme il n'y a pas d'ambiguïté c'est JS qui convertit d'office.
Dans la fonction fcalcul on utilise plusieurs fois l'objet Math (voir partie du tutoriel JavaScript sur les objets).
Le traitement est affecté à la variable vresultat puis il y a transfert de cette valeur vers le champ en lecture seule (identifié resultat).

La boite aux couleurs

Essayez l'application

La boite aux couleurs

Le code HTML

... <script src ="jquery.js"></script> </head></body> ... <form> <p class ="remarque">Grâce à cette application vous pouvez choisir une couleur en observant le rendu et récupérer le code RGBA correspondant ! <h3>Déplacer les curseurs jusqu'à ce que vous ayez trouvé la bonne couleur</h3> <label>saisir intensité de rouge : </label> <input type = 'range' min = '0' max = '255' step = '5' class ="curseur" value ="255" /> <label>saisir intensité de vert : </label> <input type = 'range' min = '0' max = '255' step = '5' class ="curseur" value ="0"/> <label>saisir intensité de bleu : </label> <input type = 'range' min = '0' max = '255' step = '5' class ="curseur" value ="0" /> <label>saisir alpha : </label> <input type = 'range' min = '0' max = '1' step = '0.1' class ="curseur" value ="1" /> <h3>La couleur correspondante : </h3> <div></div> <h3>Le code RGBA de cette couleur : </h3> <p class ="remarque">A utiliser comme valeur de la propriété CSS background ou color !</p> <input type ="text" readonly value ="rgba(255,0,0,1)"/> </form> ...

Attention programmation en JS jQuery donc il faut charger ce framework.
Il y a dans ce site un tuto sur le célèbre framework de JavaScript (dans le tutoriel "JavasScript").

Pour saisir les quatre paramètres d'un code RGBA emploi de quatre input type = range. Ce nouveau type de champ est implémenté sur tous les navigateurs récents.
Une boite DIV pour afficher la couleur correspondant à la saisie.

Un input type = text en lecture seule pour afficher le code RGBA produit par les curseurs.

Valeurs initiales des curseurs : 255,0,0,1 ( un rouge totalement opaque (alpha =1)).
La boite DIV remplie initialement avec cette couleur, la zone de texte affiche ce code RGBA.

Le script

$("input.curseur").change(function(){afficher_couleur();});
  
function afficher_couleur()
{
	// couleur de fond de la boîte DIV
	var rouge = $("input:eq(0)").val(); 
	var vert = $("input:eq(1)").val(); 
	var bleu = $("input:eq(2)").val(); 
	var alpha = $("input:eq(3)").val(); 
	var couleur = 'rgba(' + rouge + ',' + vert + ',' + bleu +','+ alpha + ')'; 
	$('div').css("background",couleur);
	// le code RGBA en détail
	$("input:text").val(couleur);
}

Pour tout changement de l'un des curseurs (balises input de type range affectées de la classe curseur) appel de la fonction affichage_couleur().
Dans cette fonction on produit dans la variable couleur une chaîne correspondant au code RGBA choisi par l'utilisateur.
Cette chaîne devient la nouvelle valeur de la propriété background de la boîte DIV et le contenu de la zone de texte.