Accueil

Traduction

Tutoriel HTML - sommaire

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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

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)

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

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