Et si on ne le sait pas, et bien il faut faire des recherches pour savoir comment ça marche et quelle est la syntaxe exacte de ce que l'on veut pouvoir modifier, pour le moment je vous le donne tout cuit, mais la prochaine fois, il faudra retrousser vos manches.

Il va falloir faire aussi deux routines, une pour convertir le décimal en hexa, et une autre pour convertir l'hexa en décimal, jusque là ça va, mais après ?

C'est là ou l'expérience de la programmation devient précieuse, car on bénéficie de nombreuses années du travail et du phosphore des autres, peut-être auriez vous fini par trouver au bout d'un jour ou deux comment accomplir cela, mais vous auriez drôlement souffert, voici une solution élégante:

• Pour convertir de l'hexadécimal en décimal dont la séquence de numérotation est: 0 1 2 3 4 5 6 7 8 9 A B C D E F", il suffit tout simplement de chercher quelle position occupe le nombre/caractère dans la position de la chaîne suivante: "0123456789ABCDEF", puisque l'on part de zéro et que la première position vaut 0.
  On effectue cette recherche pour les unités, puis sur les "seizeines" (la colonne des dizaines en décimal) que l'on multiplie tout simplement par 16 pour lui rendre sa valeur et on l'ajoute aux unités.
  CQFD.
• Pour convertir du décimal en hexadécimal, on essaie d'abord de voir si le nombre est divisible par 16 (et combien de fois), le reste de la division donnant les unités, puis on fait exactement le contraire que ci-dessus, c'est à dire que l'on retourne tout simplement le nombre/caractère que l'on a à la position trouvée.
  Soit par exemple pour 0 seizeines et 15 unités dans la chaîne "0123456789ABCDEF", "0" et "F", donc "0F" (qui donne 15 en décimal).
  Re-CQFD.

Je sais, c'est dur pour un premier exemple, si je trouve une idée plus simple et utile, je corrigerais le tir, vous n'avez qu'à m'aider à la trouver...

Nous avons déjà utilisé la méthode .indexOf() dans la validation de formulaire, qui donne la position d'un caractère, je vais vous donner les autres, car nous n'avons pas encore abordé la façon de trouver ces fonctions, mais si vous le souhaitez vous pouvez les chercher vous-même à titre d'exercice.

Pour la recherche voir String et Math, opérateurs, et pour les détails voir la référence.

Une fois cette recherche effectuée (ou non, mais pour la dernière fois), on obtient: le caractère en position X est donné par .charAt(), l'entier inférieur est donné par la fonction Math.floor(), le reste de la division est donné par l'opérateur "%".

• Fonction 1: nom hexadec, en paramètre le code (dans la variable code) , en fin de routine les trois valeurs dans les variables rouge vert bleu. Le travail dans la fonction:
  • Ignorer le "#" du début du code, séparer les trois valeurs dans des variables r, v, et b (je l'avais oublié ça, j'utiliserais .substring() voir String voir la référence pour les détails, et pas besoin de revoir ma stratégie pour un truc aussi simple, mais à vous de voir quand ça vous arrive).
  • Appeler trois fois de suite une routine de conversion hexa en décimal de nom hd et lui passant la valeur correspondante et stocker la valeur de retour dans la variable correspondante (rouge, vert, et bleu)
    • La routine hd retourne simplement la position du caractère envoyé en paramètre dans la chaîne "0123456789ABCDEF" mise dans la variable hexa et utilise les variables temporaires x, y, et z.
• Fonction 2: nom dechexa, en paramètres les trois couleurs, en retour de routine le code de couleur, comme il n'y a qu'une seule valeur à retourner contrairement à hexadec, on peut le faire comme ça. Le travail dans la fonction:
  • Fabriquer le code en concaténant "#", la conversion du rouge, du vert, et du bleu par la routine dh.
    • La routine dh retourne la valeur hexadécimale du nombre donné en entrée et utilise la variable temporaire x.
• Initialiser en premier les variables r, v, b, rouge, vert, bleu, et code avec un onLoad="".
• Déclarer ensuite les routines hd et dh, puis hexadec et enfin dechexa.

<SCRIPT LANGUAGE="Javascript">
<!-- ;
function initialisation() // comme le nom l'indique
{
  rouge=0; vert=0; bleu=0;
  code="#000000";
  r="00"; v="00"; b="00";
  hexa="0123456789ABCDEF";
  x=0; y=0; z=0;
}
function hd(x) // Convertit un chiffre hexa en décimal
{
  y=hexa.indexOf(x.charAt(0))*16; // Seizeines
  z=hexa.indexOf(x.charAt(1));    // Unités
  return(y+z);
}
function dh(x) // Convertit un chiffre décimal en hexa
{
  y=Math.floor(x/16); // Seizeines
  z=x%16            ; // Unités
  return(hexa.charAt(y)+hexa.charAt(z));
}
function hexadec(code) // Convertit un code en trois couleurs
{
  r=code.substring(1,3); // rr du code
  v=code.substring(3,5); // vv du code
  b=code.substring(5,7); // bb du code
  rouge=hd(r);           // convertit rouge
  vert=hd(v);            // convertit vert
  bleu=hd(b);            // convertit bleu
}
function dechexa(rouge,vert,bleu) // Convertir trois couleurs en code
{
  return "#"+dh(rouge)+dh(vert)+dh(bleu);
}
// -->
</SCRIPT>

Et ne pas oublier de lancer l'initialisation avec <BODY onLoad="initialisation();">

Et comme je ne suis pas égoïste, voici en exclusivité mondiale, la façon de réaliser ceci en HTML et les scripts qui y sont attachés.

<FORM><TT>

Rouge:&nbsp;<INPUT TYPE="TEXT" NAME="ROUGE" SIZE="3" VALUE="0" onChange="frouge(this)"><BR>

Vert:&nbsp;&nbsp;<INPUT TYPE="TEXT" NAME="VERT" SIZE="3" VALUE="0" onChange="fvert(this)"><BR>

Bleu:&nbsp;&nbsp;<INPUT TYPE="TEXT" NAME="BLEU" SIZE="3" VALUE="0" onChange="fbleu(this)"><BR>

Code:&nbsp;&nbsp;<INPUT TYPE="TEXT" NAME="CODE" SIZE="7" VALUE="#000000" onChange="fcode(this)">

</TT></FORM>

Dans l'initialisation rajouter: rr=0; vv=0; bb=0; cd="#000000";, et entre <SCRIPT> et </SCRIPT>:

function frouge(x) {rr=x.value; dechexa(rr,vv,bb); rouge=rr; refresh();}
function fvert(x) {vv=x.value; dechexa(rr,vv,bb); vert=vv; refresh();}
function fbleu(x) {bb=x.value; dechexa(rr,vv,bb); bleu=bb; refresh();}
function fcode(x) {cd=x.value; hexadec(cd); rr=rouge; vv=vert; bb=bleu; refresh();}
function refresh()
{
  document.forms[0].ROUGE.value=rouge;
  document.forms[0].VERT.value=vert;
  document.forms[0].BLEU.value=bleu;
  document.forms[0].CODE.value=dechexa(rr,vv,bb);
}

Il devrait maintenant vous être très facile de comprendre comment cela fonctionne.

Quoi ? Vous voulez encore des explications ? Bon, mais je serais bref cette fois, alors voilà:

• Chaque champ du formulaire appelle en cas de changement de contenu une routine qui porte le nom de la couleur ou du code à changer en lui passant "this" qui est le nom de l'objet en question. (le "f" devant le nom, c'est parce que j'ai déjà des variables de nom rouge, vert et bleu et que je veut éviter la confusion).
• Chaque routine change la valeur de la variable de couleur courante, puis dans le cas des 3 couleurs converti ces couleurs en code, et remet ces valeurs en place dans les champs grâce à la routine refresh.
• Dans le cas du changement de code, on place le code dans la variable, on recalcule les trois couleurs et on les place dans les variables, puis on les remet dans les champs grâce à la routine refresh.

J'ai choisi d'utiliser quatre nouvelles variables (rr,vv,bb,cd) pour ne pas interférer avec les routines et pour ne pas avoir à lire tous les champs pour faire le calcul. Il est bien clair que l'initialisation de ces variable doit contenir la même valeur que l'option VALUE="" de chaque champ, on peut ainsi démarrer aussi avec des valeurs non nulles.

Note pour ceux qui veulent faire l'exercice: Pour les trois premiers champs il suffit de tester si il y a un nombre et s'il est compris entre 0 et 255, voir validation de formulaire, par contre pour le code, c'est un peu plus compliqué, il faut tester qu'il y aie bien 7 caractères, que le premier soit "#", que les autres soient des chiffres ou des lettres de "A-F" et les passer en majuscules au besoin, rien de compliqué mais ça demande déjà d'appliquer les règles ci-dessus. Et en voici le corrigé.

Même une page qui fonctionne bien, n'est pas garantie à vie (et même pas à six mois), si vous constatez une erreur, dites le moi pour que je corrige, en tout cas pour le moment, il n'y a rien à débuger ici.