Des applications avec jQuery

Je vais vous montrer qu'en combinant HTML5 et jQuery on peut produire facilement des applications pratiques.
Vous devez être capable de compléter les scripts.

La boîte à couleurs


Essayez cette application !

Le code HTML

... <script src ="jquery.js"></script> <style> div {width : 200px ; height : 200px ; margin: 10px auto 10px auto ; border : 1px solid black ;} .etroit {display : inline-block ; margin :10px ; width :200px } </style> </head> <h1>La boîte à couleurs</h1> <form> <p class ="remarque">Grâce à cette application vous pouvez déterminer une couleur 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" /> <label>saisir intensité de vert : </label><input type = 'range' min = '0' max = '255' step = '5' class ="curseur"/> <label>saisir intensité de bleu : </label><input type = 'range' min = '0' max = '255' step = '5' class ="curseur" /> <label>saisir alpha : </label> <input type = 'range' min = '0' max = '1' step = '0.1' class ="curseur"/> <h3>La couleur correspondante : </h3> <div></div> <h3>Le code RGBA de cette couleur : </h3> <p>A utiliser comme valeur de la propriété CSS background ou color ! <input type ="text" readonly /> </form> ...

Il ne faut oublier de charger le framework jQuery !

Pour saisir les quatre paramètres d'un code RGBA emploi de quatre input de type range.
Une boîte DIV pour afficher la couleur correspondant à la saisie.
Un input type text en lecture seule pour afficher le code RGBA généré par les curseurs.

Le script (à compléter)

$("input.curseur").change(function(){... }); function afficher_couleur() { var rouge = $("input:eq(0)").val(); var vert = ... var bleu = ... var alpha = ... var couleur = 'rgba(' + rouge + ',' + vert + ',' + bleu +','+ alpha + ')'; $('div').css("background",... ); $("input:text").val(... ); }

Pour tout changement de l'un des curseurs (balises input de type range et 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 en concaténant les valeurs de quatre variables (rouge, vert, bleu,alpha).
Cette chaîne devient la nouvelle valeur de la propriété background de la boîte DIV et le contenu de l'input type text en lecture seule (readonly).

La calculette


Essayez cette application !

Le code HTML

<xmp> ... <script src ="jquery.js"></script> </head> <body> <h1>Calculette</h1> <p class ="remarque">Effectue les opérations suivantes : <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> ...

Il ne faut oublier de charger le framework jQuery !

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.

Le script(à compléter)

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

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 avec la liste déroulante (identifiée operation) et on effectue le traitement correspondant.
Attention les valeurs saisies avec des champs de formulaire sont toujours de type string (même si elles sont au format numérique). Donc 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 JavaScript qui convertit d'office.
Dans la fonction fcalcul on utilise plusieurs fois l'objet Math (voir partie du tutoriel JavaScript sur les objets).
Le résultat d'une opération est affecté à la variable vresultat puis il y a transfert de cette valeur vers le champ en lecture seule (identifié resultat).
Retour menu