Médiaforma

codes-couleur-en-javascript

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Nous allons mettre en pratique ce qui a été vu dans les rubriques précédentes pour afficher une couleur en fournissant ses composantes RVB. Les valeurs Rouge, Vert et Bleu seront saisies dans des zones de texte. Un bouton de commande affichera le code hexadécimal correspondant et affectera ce code à l’attribut CSS background-color d’une balise <div> :

Examinons le code HTML, entre les lignes 29 et 38.

  • La ligne 30 définit la balise <div> d’identifiant div1. Cette balise sera utilisée pour représenter la couleur dont les composantes RVB sont spécifiées par l’utilisateur.
  • Les lignes 32 à 34 définissent les zones de texte d’identifiant rouge, vert et bleu.
  • La ligne 35 définit une deuxième balise <div> d’identifiant hexa. Cette balise sera utilisée pour afficher le code hexadécimal correspondant aux composantes décimales RVB saisies par l’utilisateur.
  • Enfin, la ligne 36 définit un bouton de commande et lui associe la fonction événementielle couleur(). Cette fonction sera exécutée à chaque clic sur le bouton de commande.

Examinons le code CSS, entre les lignes 4 et 11. Ce code est identique à celui des rubriques précédentes. Il définit la couleur d’arrière-plan (ici noir) et les dimensions de la balise <div> d’identifiant div1.

Examinons le code de la fonction JavaScript couleur(), entre les lignes 13 et 25.

  • Les lignes 15 à 17 récupèrent les valeurs numériques décimales qui se trouvent dans les zones de texte rouge, vert et bleu et les stockent dans les variables r, v et b.
  • La ligne 19 utilise ces trois valeurs pour calculer le code la couleur. Ce code est obtenu en multipliant la composante Rouge par 256*256, en y ajoutant la composante Vert multipliée par 256 et en y ajoutant la composante Bleu. Si cette technique ne vous est pas familière, sachez qu’elle permet d’obtenir une valeur unique composée à partir de trois valeurs codées entre 0 et 255.
  • La ligne 20 affecte le code de la couleur à la propriété backgroundColor de la balise <div>. Remarquez l’utilisation de la fonction parseInt() qui fournit une valeur entière à la propriété backgroundColor. Sans cette fonction, la valeur passée serait interprétée comme une chaîne de caractères et la propriété backgroundColor ne serait pas bien initialisée.
  • Il ne reste plus qu’à modifier le contenu de la balise <div> d’identifiant hexa. La ligne 22 définit la variable h et la relie à la balise <div> d’identifiant hexa.
  • La ligne 23 affiche la valeur hexadécimale de la couleur dans la balise <div> d’identifiant hexa. La conversion en hexadécimal est obtenue avec la fonction toString(16) appliquée à la variable codeCouleur.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply