Tutoriel HTML - sommaire

Deux micro applications HTML5-JS

Chaque micro application est en fait une page web avec du HTML, du CSS mais aussi du JavaScript.
Chaque document HTML comprend entre autres un formulaire et un script pour une certaine interaction.
Dans chaque application j'emploie les nouveaux types de champs (number, range) afin de simpliifier sensiblement la programmation JavaScript.

La feuille de style commune aux deux applications

Chaque page web comprend une feuille de style interne afin d'être une application monofichier.

Contenu de la feuille de style interne identique pour les deux documents :

	body {font-size : 20px; width : 90% ; margin : 10px auto;  }
	div {width : 30% ; height : 200px ; margin: 10px auto ; border : 1px solid black ;}
	input, label {width : 20% ; height ; 50px ; margin : 10px; }
	h1,h3 {text-align : center ; margin : 10px auto; }
	h1 {line-height : 2em ; font-size : 1.6 em ; background : gray; }
	h3 {line-height : 1.6em ; font-size : 1.3 em ; background : lavender; } 

La "boite aux couleurs"

Je désigne par cette expression un composeur de couleurs très utile pour un développeur web.
Via une interface graphique l'utilisateur compose une couleur (intensités de Rouge,Vert et bleu et degré de transparence) et en retour l'application affiche le code RGBA de la couleur retenue ainsi qu'une boite ayant en couleur de fond cette couleur.
Compte tenu du "step" de 5 dans chaque curseur, il y a 132 650 couleurs possibles (51 * 51 *51) sans tenir compte de l'apha ...
Le développeur web, utilisateur de cette application, peut ensuite insérer le code RGBA de la couleur retenue dans les règles de style relatives aux couleurs.

Rendu de cette application

La saisie des intensité de couleurs et d'opacité se fait via des curseurs (input type='range').

Le code HTML

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.
Notez le nombre impressionnant d'attributs : min, max, value, name, step, onchange.
Un input type = "text" en lecture seule affiche le code RGBA découlant de la composition des quatre curseurs.
Une boite DIV a pour couleur de fond celle découlant de la composition faite par l'utilisateur.

Le script

function fcouleur()
{
	var rouge = f1.rouge.value ; 
	var vert = f1.vert.value;
	var bleu = f1.bleu.value;
	var alpha = f1.alpha.value; 
	var couleur = 'rgba(' + rouge + ',' + vert + ',' + bleu +','+ alpha + ')'; 
	document.getElementById('rendu').style.background = couleur ; 
	document.getElementById('code').value = couleur ; 
}

Notez la façon classique (mais toujours valide) de nommer les zones de texte dans le script : nomFormulaire.nomChamp
C'est plus succinct que "document.getElementById()" et aussi l'attribut devient facultatif ...

Une calculette

Rendu de cette application

Le code HTML de cette page (extrait)

J'utilise des champs de type number pour saisir les opérandes.
Ce nouveau type de champ est implémenté sur tous les navigateurs récents.
Attention pour pouvoir saisir des nombres décimaux dans un champ de type number il faut que l'attribut step soit à "any". Sinon vous ne pouvez saisir que des entiers.
Une zone de liste permet de sélectionner un type d'opération à appliquer aux nombres saisis.
Une zone numérique en lecture seule récupère le résultat de l'opération choisie.

Le script

function fcalcul()
{
	var premier = f1.premier.value;
	var deuxieme =f1.deuxieme.value;
	var operation = f1.operation.value; 
	
	if (operation =="+" )
		var resultat = parseFloat(premier) + parseFloat(deuxieme);
	if (operation =="-" )
		var resultat = parseFloat(premier) - parseFloat(deuxieme);
	if (operation =="*" )
		var resultat = premier * deuxieme;
	if (operation =="/" )
		var resultat = premier / deuxieme;
	if (operation =="p" )
		var resultat = Math.pow(premier,deuxieme) ; 
	f1.resultat.value = resultat ;
}

Notez la façon classique de référencer dans le script les contrôles de formulaire : nomFormulaire.nomControle.

Je rappelle que toute saisie dans un champ est de type string même s'il s'agit d'une suite de chiffres.
En JavaScript le signe + est ambigu et désigne une concaténation s'il s'agit de chaines. Donc pour obtenir une addition il faut au préalable convertir en décimal.
Pour les autres opérations la conversion est inutile ; elle est automatique avec JavaScript.

Micros-applications tournant en local

Cliquez sur le lien ci-dessus pour télécharger la version compressée.
Déplacer le fichier compressé dans "documents".
Extrayez du fichier zip !
Vous disposez désormais de deux documents HTML (calculette.htm & boite_couleurs.htm) prêts à tourner en local dans un navigateur.