Pour ce deuxi\u00e8me gloubi tuto, on s\u2019attaque \u00e0 un script qui a eu son petit succ\u00e8s sur Skyblog : le texte \u00ab arc-en-ciel \u00bb (en d\u00e9grad\u00e9s).<\/p>\n\n\n\n
Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre N\u00e9m\u00e9sis<\/a> dans la deuxi\u00e8me guerre du gloubi.<\/p>\n\n\n\n Le script fonctionne comme suit :<\/p>\n\n\n\n Avant d\u2019appeler la principale fonction de notre script, on construit un tableau de correspondance d\u00e9cimal vers hexad\u00e9cimal \u00e0 l\u2019aide de deux boucles imbriqu\u00e9es.<\/p>\n\n\n\n\n\n\n Vient ensuite la fonction principale du script. Celle-ci prend deux param\u00e8tres d\u2019entr\u00e9es: le texte \u00e0 colorer et les couleurs \u00e0 utiliser.<\/p>\n\n\n On commence par construire un tableau qui contient les codes RGB (avec des valeurs allant de 0 \u00e0 255) des diff\u00e9rentes couleurs. Les couleurs individuelles sont s\u00e9par\u00e9es \u00e0 l\u2019aide de la m\u00e9thode Ce traitement est assur\u00e9 par les fonctions Tandis que Ensuite on traite le texte caract\u00e8re par caract\u00e8re. Pour chacun de ces caract\u00e8res, on d\u00e9termine selon sa position dans la cha\u00eene les deux couleurs entre lesquelles celui-ci se situe (fonctions La premi\u00e8re modification majeure apport\u00e9e est la signature de la fonction principale. Celle-ci ne prend plus qu\u2019un seul param\u00e8tre, l\u2019\u00e9l\u00e9ment du DOM cibl\u00e9 pour l\u2019arc-en-cielisation.<\/p>\n\n\n Le texte utilis\u00e9 est celui contenu dans l\u2019\u00e9l\u00e9ment du DOM (r\u00e9cup\u00e9r\u00e9 via la propri\u00e9t\u00e9 Deuxi\u00e8me changement relativement important, j\u2019ai supprim\u00e9 le tableau de correspondance d\u00e9cimal\/hexad\u00e9cimal et la double boucle pour le remplir. En effet, pas besoin de construire une table de correspondance, pour convertir un entier d\u00e9cimal en hexad\u00e9cimal on peut utiliser la m\u00e9thode La conversion des codes hexad\u00e9cimaux en composantes d\u00e9cimale a \u00e9t\u00e9 rapatri\u00e9e dans la fonction principale et l\u00e9g\u00e8rement modifi\u00e9e : le premier tableau (celui des codes hexad\u00e9cimaux) est construit en utilisant la m\u00e9thode split(), et dans la boucle de conversion, plut\u00f4t qu\u2019utiliser une structure if, else if (selon que le code hexad\u00e9cimal commence ou pas par un #), j\u2019utilise une variable d\u2019offset.<\/p>\n\n\n Dans la boucle principale, les changements sont : trois lignes suppl\u00e9mentaires pour la conversion d\u00e9cimal vers hexad\u00e9cimal, avec ajout d\u2019un z\u00e9ro si nombre \u00e0 un chiffre, et l\u2019utilisation de Les m\u00e9thodes Comme d\u2019habitude, le r\u00e9sultat final<\/a> et le code complet sont visibles dans la section d\u00e9monstration<\/a> du site.<\/p>\n\n\n\n Mais je n\u2019en ai pas fini avec les textes multicolores\u00a0! En effet, il est maintenant possible avec CSS3 de produire un effet similaire. Restez \u00e0 l\u2019\u00e9coute pour en savoir plus\u00a0!<\/p>\n","protected":false},"excerpt":{"rendered":" Pour ce deuxi\u00e8me gloubi tuto, on s\u2019attaque \u00e0 un script qui a eu son petit succ\u00e8s sur Skyblog : le texte \u00ab arc-en-ciel \u00bb (en d\u00e9grad\u00e9s). Script original et explication Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous … Continuer la lecture \nvar tohex = new Array(256);\nvar hex = "0123456789ABCDEF";\nvar count = 0;\nfor (x=0; x<16; x++) {\n for (y=0; y<16; y++) {\n tohex[count] = hex.charAt(x) + hex.charAt(y);\n count++;\n }\n}\n<\/pre><\/div>\n\n\n\nfunction gradient (thetext,thecolors) { ... }\n<\/pre><\/div>\n\n\nsubstring()<\/code> des objets de type string. Chaque couleur est ensuite trait\u00e9e par paire de chiffres hexad\u00e9cimaux, chaque paire \u00e9tant convertie en base 10 avec la fonction parseInt()<\/code>.<\/p>\n\n\n\nColorList()<\/code> et ColorCode()<\/code> du script original.<\/p>\n\n\n\nColorList()<\/code> se charge de la s\u00e9paration des couleurs individuelles :<\/p>\n\n\n\nfunction ColorList(hexcodes) {\n var i = 0;\n var c = 0;\n this.codes = new Array(Math.round(hexcodes.length\/7));\n while (i < hexcodes.length) {\n if (isNaN(parseInt(hexcodes.substring(i,i+6),16))) ++i;\n else {\n this.codes[c] = new ColorCode(hexcodes.substring(i,i+6));\n i += 7;\n ++c;\n }\n }\n this.len = c;\n}\n<\/pre><\/div>\n\n\nColorCode()<\/code> se charge de la conversion en composantes RGB :<\/p>\n\n\n\nfunction ColorCode(hexcode) {\n if (hexcode.length == 7) {\n this.r = parseInt(hexcode.substring(1,3),16);\n this.g = parseInt(hexcode.substring(3,5),16);\n this.b = parseInt(hexcode.substring(5,7),16);\n }\n else if (hexcode.length == 6) {\n this.r = parseInt(hexcode.substring(0,2),16);\n this.g = parseInt(hexcode.substring(2,4),16);\n this.b = parseInt(hexcode.substring(4,6),16);\n }\n else {\n this.r = this.g = this.b = 0;\n alert("Error: ColorCode constructor failed");\n }\n if (isNaN(this.r)||isNaN(this.g)||isNaN(this.b))\n alert("Error: ColorCode constructor failed");\n}\n<\/pre><\/div>\n\n\nlowcolorindex()<\/code> et highcolorindex()<\/code>) et \u00e0 partir de ces deux couleurs et de l\u2019emplacement dans la cha\u00eene on utilise une fonction d\u2019interpolation (interpolate()<\/code>) pour d\u00e9terminer une valeur pour chacune des composantes (red, green, blue) de la couleur du caract\u00e8re.<\/p>\n\n\n\nfunction interpolate (x1, y1, x3, y3, x2) {\n if (x3 == x1) return y1\n else return (x2-x1)*(y3-y1)\/(x3-x1) + y1\n}\n\nfunction lowcolorindex (x, y, z) {\n if (y == 1) return 0\n else return Math.floor( (x*(z-1))\/(y-1) )\n}\n\nfunction hicolorindex (x, y, z, low) { \n if ( low*(y-1) == x*(z-1) ) return low\n else if (y == 1) return 0\n else return Math.floor( (x*(z-1))\/(y-1) + 1 )\n}\n<\/pre><\/div>\n\n\n\n\n\n\nMes modifications<\/h2>\n\n\n\n
\nfunction colorText(target) { ... }\n<\/pre><\/div>\n\n\ninnerHTML<\/code>), et pour les couleurs, celles-ci sont renseign\u00e9es dans un attribut ‘data-colors’ de la cible, et pour les r\u00e9cup\u00e9rer, on utilise la m\u00e9thode getAttribute<\/a><\/code>.<\/p>\n\n\n\nvar text = target.innerHTML;\nvar colors = target.getAttribute('data-colors');\n<\/pre><\/div>\n\n\ntoString()<\/a><\/code> des objets de type nombre.<\/p>\n\n\n\n\nvar colorsHex = colors.split(' ');\nvar colorsRgb = new Array(); \n\ncolorsHex.forEach((c) => {\n let color = new Object();\n\n let offset = 0;\n\n if(c.charAt(0) == '#'){\n offset = 1;\n }\n\n color.r = parseInt(c.substring(0+offset,2+offset), 16);\n color.g = parseInt(c.substring(2+offset,4+offset), 16);\n color.b = parseInt(c.substring(4+offset), 16); \n\n colorsRgb.push(color);\n});\n<\/pre><\/div>\n\n\n<span><\/code> plut\u00f4t que la balise <font><\/code>, maintenant d\u00e9pr\u00e9ci\u00e9e.<\/p>\n\n\n\nfor (i=0; i<numchars; ++i) {\n let lci = lowcolorindex(i, numchars, numcolors);\n let hci = hicolorindex(i, numchars, numcolors, lci);\n\n let rr = Math.round(interpolate( lci\/(numcolors-1), colorsRgb[lci].r, hci\/(numcolors-1), colorsRgb[hci].r, i\/(numchars-1)));\n let gg = Math.round(interpolate( lci\/(numcolors-1), colorsRgb[lci].g, hci\/(numcolors-1), colorsRgb[hci].g, i\/(numchars-1)));\n let bb = Math.round(interpolate( lci\/(numcolors-1), colorsRgb[lci].b, hci\/(numcolors-1), colorsRgb[hci].b, i\/(numchars-1)));\n\n let r = (rr.toString(16).length == 1?'0':'')+rr.toString(16);\n let g = (gg.toString(16).length == 1?'0':'')+gg.toString(16);\n let b = (bb.toString(16).length == 1?'0':'')+bb.toString(16);\n\n coloredText += '<span style="color:#'+r+g+b+';">'+text.charAt(i)+'<\/span>';\n}\n<\/pre><\/div>\n\n\ninterpolate()<\/code>, hicolorindex()<\/code> et lowcolorindex()<\/code> sont quant-\u00e0 elles gard\u00e9es en l\u2019\u00e9tat.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n