javascript - couleurs html RGB
publicité
J AVA S C R I P T (Programmation Internet) Pour Débutants J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818 [email protected] INTRODUCTION : Quand je confectionne mes pages ou le texte de mes publications, je préfère choisir les couleurs de façon aléatoire, quitte à les modifier légèrement pour améliorer le contraste. Ci-dessous, un programme qui génère des couleurs aléatoires en hexadécimale (p.e. #EC2200). Ensuite il décompose le code de la couleur hexadécimale en ses composantes RGB : Ce qui permet de saisir cette couleur dans la variable de couleur dans le fichier HTML ou JavaScript, ou dans le panneau des couleurs du traitement de textes comme ci-dessous : J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II Point de départ : On commence par sélectionner la zone dont on doit modifier le fond : On appelle le menu « bordures & trames » : Palettes couleurs Hexa - 2 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II On continue selon la procédure habituelle : Palettes couleurs Hexa - 3 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II À partir d’ici, à la fin de chaque étape il faut valider en cliquant sur < OK > pour confirmer les options choisies. Palettes couleurs Hexa - 4 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu Palettes couleurs Hexa JavaScript Tome-II - 5 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu Palettes couleurs Hexa JavaScript Tome-II - 6 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II À ce niveau on active l’encadrement en cliquant sur Encadrement, et le panneau de droite donne instantanément l’aperçu qu’on valide avec < OK > : Palettes couleurs Hexa - 7 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II Voici le code qui génère ainsi les couleurs HTML aléatoires et affiche l’échantillon. Il utilise les balises < div >, avec les styles « font-family », « width » et « height » et l’attribut « id » référé avec « getElementById("") », une array de digits hexadécimaux de0 à F, l’accès indexé aux éléments de cette array, l’utilisation dans une chaîne de caractères de la notation hexadécimale des nombres, , les méthodes « substring » et « substr » de l’objet « String », l’attribut « . innerHTML », la méthode « . padEnd ( ) » de « String », la fonction « eval »… : Palettes couleurs Hexa - 8 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II <div style="font-family:consolas" id="outp"></div> <div style="height:100;width:200" id="disp"></div> <script> let outp=document.getElementById("outp"); var v=[ '0','1','2','3','4','5','6','7','8','9', 'A','B','C','D','E','F' ]; let col="#"; for(k=0;k<6;k++) col+=v[Math.round(Math.random()*15)]; outp.innerHTML+=col; const red=`0x${col.substr(1,2)}`, green=`0x${col.substring(3,5)}`, blue=`0x${col.substr(5,2)}`; outp.innerHTML+= `<div style="font-family:'consolas'">`; outp.innerHTML+= `<br>${"RED".padEnd(7,".")} = ${red} = ${eval(red)} , `; outp.innerHTML+= `<br>${"GREEN".padEnd(7,".")} = ${green} = ${eval(green)} , `; outp.innerHTML+= `<br>${"BLUE".padEnd(7,".")} = ${blue} = ${eval(blue)}`; outp.innerHTML+=`</div>`; document.getElementById("disp") .style.backgroundColor=col; </script> Quelques Exécutions : Une palette de quelques couleurs pour le choix de la couleur de votre maison ou de votre voiture ou vos meubles... Palettes couleurs Hexa - 9 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II Kinshasa, le mardi 26 mars 2019 - 2:00:12 PM Mots-clés : couleurs HTML aléatoires, échantillon. Balises, div, styles, fontfamily, width, height, attribut, getElementById, array, digits hexadécimaux, accès indexé, éléments, chaîne de caractères, notation hexadécimale, nombres, méthodes, substring, substr, objet, String, innerHTML, padEnd fonction eval. DIASOLUKA Nz. Luyalu Docteur en Médecine, Chirurgie & Accouchements (1977), CNOM : 0866 - Spécialiste en ophtalmologie (1980) Études humanités : Scientifique - Mathématiques & Physique. Informaticien-amateur, Programmeur et WebMaster. Chercheur indépendant, autonome et autofinancé, bénévole, sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte promotionnelle avec qui qu’il soit ou quelqu’organisme ou institution / organisation que ce soit, étatique, paraétatique ou privé, industriel ou commercial en relation avec le sujet présenté. +243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818 [email protected] Palettes couleurs Hexa - 16 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II Autre Lecture : https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation D’autres publications pouvant aussi intéresser : • https://www.scribd.com/document/377036251/Le-DosageDes-Medicaments-en-Cac-Cas • https://www.scribd.com/document/377035454/Le-HasardDes-Thermometres-Non-contact-a-Infrarouge • https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript • https://www.scribd.com/document/376221919/La-Foi-enJesus-Christ-Pour-Quoi-Faire • https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire • https://www.scribd.com/document/375349851/La-variableThis • https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS • https://www.scribd.com/document/374789297/FormatInterne-Des-Objets-JavaScript • https://www.scribd.com/document/374788758/Iterations-enJavaScript • https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation • https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka • https://www.scribd.com/document/373847209/PropertyDescriptors Palettes couleurs Hexa - 17 / 18 - mardi, 26. mars 2019 (2:00 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II • https://www.scribd.com/document/373833282/l-ObjetGlobal-Window • https://www.scribd.com/document/372665249/JavascriptTome-II • https://www.scribd.com/document/355291488/motiliteoculaire-2 • https://www.scribd.com/document/355291239/motiliteoculaire-I • https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs • https://www.scribd.com/document/321168468/Renseignement s-Id-et-Anthropometriques • https://www.scribd.com/document/320856721/Emission-31Jul-2016 • https://www.scribd.com/document/318182982/ComplicationVisuelle-du-Traitement-de-La-Malaria • https://www.scribd.com/document/318180637/RapportEntre-Oxymetrie-Et-Type-Respiration • https://www.scribd.com/document/315746265/ClassificationDes-Medicaments • https://www.scribd.com/document/315745909/IncongruencesHeresies-et-Heterodoxies-de-la-Notion-de-Laboratoire • https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration Palettes couleurs Hexa - 18 / 18 - mardi, 26. mars 2019 (2:00 )
