JavaScript - příklad č. 6

Generování bezpečných barev.

(Text přejat z http://www.kit.vslib.cz/~satrapa/www/clrsamp/)
Paleta bezpečných barev má 216 položek. Jedná se o barvy, které by měl mít k dispozici libovolný WWW klient v libovolném operačním systému, podporujícím 256 barev. Díky tomu nedochází k ditheringu (nahrazení barvy směsí různobarevných teček, které vytvářejí dojem původní barvy).Pro každou barevnou složku máte k dispozici jen šest hodnot: 00, 33, 66, 99, CC a FF (v šestnáctkové soustavě).

Zdroj části této stránky:

<BODY> <form name="formular"> //obyčejný formulář <select name="barva" size="1"> <option value="RR"> Red </option> <option value="GG"> Green </option> <option value="BB"> Blue </option> </select> <select name="hodnota" size="1"> <option value="00"> 00 </option> <option value="33"> 33 </option> <option value="66"> 66 </option> <option value="99"> 99 </option> <option value="CC"> CC </option> <option value="FF"> FF </option> </select> <input type="button" name="generuj" value="Generuj" onclick="vytvor(document.forms.formular.barva.value,document.forms.formular.hodnota.value)"> //po kliknutí se spustí script "vytvor" a přenesou se do něj hodnoty obou roletek <br><br> <input name="pis" type="text" size="50" value="" style="text-align: center;"> </form> <script language="JavaScript"> function vytvor(a,b) { i = "<html>\n\t<head>\n\t<title>Dynamický vzorník</title>\n\t<meta http-equiv=\"content-type\" content=\"text/html; charset=windows-1250\">\n\t"; i += "<style type=\"TEXT/CSS\">\n\tth {width: 60px; height: 60px;}\n\tcaption { font-size: 25px; font-weight: bold; color: #000000;}\n\t</style>\n</head>\n"; i += "<body>\n\t<table border=\"0\" frame=\"box\" align=\"CENTER\">\n\t"; //pod proměnou "i" je začátek generované stránky j = "<caption>Vzorník bezpečných barev pro Red "+b+"</caption>\n\t"; j += "<tr><th><th>BB 00<th>BB 33<th>BB 66<th>BB 99<th>BB CC<th>BB FF\n\t"; j += "<tr><th>GG 00<td bgcolor=\"#"+b+"0000\"><td bgcolor=\"#"+b+"0033\"><td bgcolor=\"#"+b+"0066\"><td bgcolor=\"#"+b+"0099\"><td bgcolor=\"#"+b+"00CC\"><td bgcolor=\"#"+b+"00FF\">\n\t"; j += "<tr><th>GG 33<td bgcolor=\"#"+b+"3300\"><td bgcolor=\"#"+b+"3333\"><td bgcolor=\"#"+b+"3366\"><td bgcolor=\"#"+b+"3399\"><td bgcolor=\"#"+b+"33CC\"><td bgcolor=\"#"+b+"33FF\">\n\t"; j += "<tr><th>GG 66<td bgcolor=\"#"+b+"6600\"><td bgcolor=\"#"+b+"6633\"><td bgcolor=\"#"+b+"6666\"><td bgcolor=\"#"+b+"6699\"><td bgcolor=\"#"+b+"66CC\"><td bgcolor=\"#"+b+"66FF\">\n\t"; j += "<tr><th>GG 99<td bgcolor=\"#"+b+"9900\"><td bgcolor=\"#"+b+"9933\"><td bgcolor=\"#"+b+"9966\"><td bgcolor=\"#"+b+"9999\"><td bgcolor=\"#"+b+"99CC\"><td bgcolor=\"#"+b+"99FF\">\n\t"; j += "<tr><th>GG CC<td bgcolor=\"#"+b+"CC00\"><td bgcolor=\"#"+b+"CC33\"><td bgcolor=\"#"+b+"CC66\"><td bgcolor=\"#"+b+"CC99\"><td bgcolor=\"#"+b+"CCCC\"><td bgcolor=\"#"+b+"CCFF\">\n\t"; j += "<tr><th>GG FF<td bgcolor=\"#"+b+"FF00\"><td bgcolor=\"#"+b+"FF33\"><td bgcolor=\"#"+b+"FF66\"><td bgcolor=\"#"+b+"FF99\"><td bgcolor=\"#"+b+"FFCC\"><td bgcolor=\"#"+b+"FFFF\">\n\t"; //pod proměnou "j" je pokračování stránky pro červenou barvu (RED) k = "<caption>Vzorník bezpečných barev pro Green "+b+"</caption>\n\t"; k += "<tr><th><th>BB 00<th>BB 33<th>BB 66<th>BB 99<th>BB CC<th>BB FF\n\t"; k += "<tr><th>RR 00<td bgcolor=\"#00"+b+"00\"><td bgcolor=\"#00"+b+"33\"><td bgcolor=\"#00"+b+"66\"><td bgcolor=\"#00"+b+"99\"><td bgcolor=\"#00"+b+"CC\"><td bgcolor=\"#00"+b+"FF\">\n\t"; k += "<tr><th>RR 33<td bgcolor=\"#33"+b+"00\"><td bgcolor=\"#33"+b+"33\"><td bgcolor=\"#33"+b+"66\"><td bgcolor=\"#33"+b+"99\"><td bgcolor=\"#33"+b+"CC\"><td bgcolor=\"#33"+b+"FF\">\n\t"; k += "<tr><th>RR 66<td bgcolor=\"#66"+b+"00\"><td bgcolor=\"#66"+b+"33\"><td bgcolor=\"#66"+b+"66\"><td bgcolor=\"#66"+b+"99\"><td bgcolor=\"#66"+b+"CC\"><td bgcolor=\"#66"+b+"FF\">\n\t"; k += "<tr><th>RR 99<td bgcolor=\"#99"+b+"00\"><td bgcolor=\"#99"+b+"33\"><td bgcolor=\"#99"+b+"66\"><td bgcolor=\"#99"+b+"99\"><td bgcolor=\"#99"+b+"CC\"><td bgcolor=\"#99"+b+"FF\">\n\t"; k += "<tr><th>RR CC<td bgcolor=\"#CC"+b+"00\"><td bgcolor=\"#CC"+b+"33\"><td bgcolor=\"#CC"+b+"66\"><td bgcolor=\"#CC"+b+"99\"><td bgcolor=\"#CC"+b+"CC\"><td bgcolor=\"#CC"+b+"FF\">\n\t"; k += "<tr><th>RR FF<td bgcolor=\"#FF"+b+"00\"><td bgcolor=\"#FF"+b+"33\"><td bgcolor=\"#FF"+b+"66\"><td bgcolor=\"#FF"+b+"99\"><td bgcolor=\"#FF"+b+"CC\"><td bgcolor=\"#FF"+b+"FF\">\n\t"; //pod proměnou "k" je pokračování stránky pro zelenou barvu (GREEN) l = "<caption>Vzorník bezpečných barev pro Blue "+b+"</caption>\n\t"; l += "<tr><th><th>GG 00<th>GG 33<th>GG 66<th>GG 99<th>GG CC<th>GG FF\n\t"; l += "<tr><th>RR 00<td bgcolor=\"#0000"+b+"\"><td bgcolor=\"#0033"+b+"\"><td bgcolor=\"#0066"+b+"\"><td bgcolor=\"#0099"+b+"\"><td bgcolor=\"#00CC"+b+"\"><td bgcolor=\"#00FF"+b+"\">\n\t"; l += "<tr><th>RR 33<td bgcolor=\"#3300"+b+"\"><td bgcolor=\"#3333"+b+"\"><td bgcolor=\"#3366"+b+"\"><td bgcolor=\"#3399"+b+"\"><td bgcolor=\"#33CC"+b+"\"><td bgcolor=\"#33FF"+b+"\">\n\t"; l += "<tr><th>RR 66<td bgcolor=\"#6600"+b+"\"><td bgcolor=\"#6633"+b+"\"><td bgcolor=\"#6666"+b+"\"><td bgcolor=\"#6699"+b+"\"><td bgcolor=\"#66CC"+b+"\"><td bgcolor=\"#66FF"+b+"\">\n\t"; l += "<tr><th>RR 99<td bgcolor=\"#9900"+b+"\"><td bgcolor=\"#9933"+b+"\"><td bgcolor=\"#9966"+b+"\"><td bgcolor=\"#9999"+b+"\"><td bgcolor=\"#99CC"+b+"\"><td bgcolor=\"#99FF"+b+"\">\n\t"; l += "<tr><th>RR CC<td bgcolor=\"#CC00"+b+"\"><td bgcolor=\"#CC33"+b+"\"><td bgcolor=\"#CC66"+b+"\"><td bgcolor=\"#CC99"+b+"\"><td bgcolor=\"#CCCC"+b+"\"><td bgcolor=\"#CCFF"+b+"\">\n\t"; l += "<tr><th>RR FF<td bgcolor=\"#FF00"+b+"\"><td bgcolor=\"#FF33"+b+"\"><td bgcolor=\"#FF66"+b+"\"><td bgcolor=\"#FF99"+b+"\"><td bgcolor=\"#FFCC"+b+"\"><td bgcolor=\"#FFFF"+b+"\">\n\t"; //pod proměnou "l" je pokračování stránky pro modrou barvu (BLUE) m = "</table>\n</body>\n</html>"; //pod proměnou "m" je konec generované stránky x = i + j + m; y = i + k + m; z = i + l + m; //zde se části stránek spojí v celek (x pro červenou, y pro zelenou, z pro modrou) if (a == "RR") { tabulka = window.open("","","left=10,top=10,width=600,height=500,menubar=yes,directories=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes"); tabulka.document.write(x); document.forms.formular.pis.value = "HOTOVO! Vytvořeno nové okno pro "+a+""+b+""; }; if (a == "GG") { tabulka = window.open("","","left=10,top=10,width=600,height=500,menubar=yes,directories=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes"); tabulka.document.write(y); document.forms.formular.pis.value = "HOTOVO! Vytvořeno nové okno pro "+a+""+b+""; }; if (a == "BB") { tabulka = window.open("","","left=10,top=10,width=600,height=500,menubar=yes,directories=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes"); tabulka.document.write(z); document.forms.formular.pis.value = "HOTOVO! Vytvořeno nové okno pro "+a+""+b+""; }; }; //tato podmínka rozhodne o tom jaký celek se vygeneruje </script> </BODY>

Popis:

Ve formulářových roletkách vyberete barvu a její hodnotu, od které chcete vygenerovat vzorník bezpečných barev.
Formulářové políčko slouží pouze pro informaci o vygenerování vzorníku.

Poznámky:

Na našich stránkách naleznete ještě propracovanější generátor bezpečných barev, ten je ale naprogramován pomocí PHP.
Naleznete ho: Podpora výuky -> IVT - příklady -> sekce PHP

Jaroslav "Nexis" Kálal
Gymnázium, Milevsko, Masarykova 183
2004