Deux applications HTML5

Chaque application se traduit concrètement par un document HTML contenant du HTML, du CSS interne et un script jQuery.

La boite aux couleurs

Rendu de cette application dans un iframe

Grâce à cette application vous pouvez composer la couleur de votre choix en jouant sur les quatre curseurs puis vous récuperez le code RGBA correspondant pour l'insérer dans vos pages web.

Le code HTML

...
<script src ="jquery.js"></script>
</head></body>
...
<form>
...
	<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.
Tutoriel JS & jQuery
Le formulaire se contente de gérer les entrées et sorties (pour se substituer aux boites de dialogue prompt & alert) ; il ne s'agit pas d'un formulaire de soumission donc pas d'attributs action & method dans la balise FORM.
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 via les curseurs.
Un input type = "text" en lecture seule pour afficher le code RGBA produit par les curseurs.
une 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.

Une calculette

Rendu de cette application dans un iframe

Le code HTML de cette page (extrait)

...
<script src ="jquery.js"></script>
</head>
<body>
	...
	<br>addition, soustraction, multiplication, division, 1er puissance 2ième, racine carrée du 1er </p>
<form style ="border : none;">
	<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 script en jQuery donc il faut charger ce framework.
Concernant l'élément FORM : même remarque que pour l'application précédente.

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).

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

La spécification HTML 5

Des API HTML utiles très pratiques

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

Deux applications HTML5

La boite aux couleurs

Rendu de cette application dans un iframe

Le code HTML

Le script

Une calculette

Rendu de cette application dans un iframe

Le code HTML de cette page (extrait)

Le code JavaScript