javascript Tabela De Cores Com Javascript

[GM Netox 0]

Uma tabela que mostra as cores puras em todas as definições. Está construída com Javascript adicionando três loops.

 

Em HTML construímos qualquer cor misturando o vermelho, verde e azul (RGB) nas proporções que desejarmos. Isto é um fato que deveria saber antes de ler este artigo. Explicamos com detalhes a construção de cores no artigo As cores e HTML. Será necessário que, aquele que não estiver familiarizado com este assunto, leia o artigo.

 

Além de como construir cores, o artigo As cores e HTML mostra também quais são as cores puras, que se vêem sem problemas em todas as profundidades de cor que possa ter a configuração dos computadores dos visitantes. Para a construção de cores puras misturamos as cores RGB sempre nestas quantidades 00, 33, 66, 99, CC, FF. Novamente, para quem não conhece isto deve ler a reportagem assinalada anteriormente.

 

O exemplo que pretendemos construir tem a ver com as cores puras em tyodas as definições. Trata-se de construir uma tabela em uma página web que contenha todos as cores puras, além do código RGB de cada cor. Esta tabela pode servir para selecionar uma cor que pretendemos utilizar em uma página web. Se nos limitarmos somente a utilizar as cores da tabela teremos a segurança que nossa paleta será respeitada em todos os casos.

 

Para gerar todos as cores puras vamos utilizar três arrays Javascript com os possíveis valores para cada uma das cores RGB. Portanto, teremos três arrays como os que podem ser vistos a seguir:

 

var r = new Array("00","33","66","99","CC","FF"); 
var g = new Array("00","33","66","99","CC","FF"); 
var b = new Array("00","33","66","99","CC","FF");

 

Para escrever a tabela na página web, faremos um percorrido a estes três arrays. Para isso, vamos utilizar loops aninhados, que são loops dentro de outros loops.

 

Vamos tratar de explicar porque necessitamos os loops aninhados; se fizermos as contas das cores que devemos ir gerando obteremos uma lista como a que segue:

 

#000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF...

 

Então, vemos que no início os três valores de RGB valem 00 e como em sucessivas repetições se vai aumentando o valor de B (o valor atribuído ao azul) até chegarmos a FF. Para continuar, aumenta-se o valor de G e voltamos a realizar a conta com B. É como se contássemos e as unidades fossem os valores de RBG.

 

O caso é que realizamos a conta com o valor B, quando chegamos a FF aumentamos o valor de G e quando chegarmos a FF em G aumentaremos em um valor R. Assim, pode-se ver a estrutura em pseudocódigo como esta.

 

Contamos desde 00 até FF com o valor R{ 
Contamos desde 00 até FF com o valor G{ 
   Contamos desde 00 até FF com o valor R{ 
	  Imprimimos o valor atual de RGB 
   } 
} 
}

 

Esta estrutura imprime todos as cores puras, e já é próxima a nossa solução, embora ainda não esteja escrita em Javascript e falte colocar todas as etiquetas HTML que necessitamos para mostrar uma tabela em uma página web.

 

Como não importa ir um pouco mais devagar contanto que todo o mundo entenda o problema, vamos escrever em Javascript este loop para que simplesmente liste as cores puras, sem introduzi-las ainda em uma tabela. Será interessante para ver um pouco melhor o funcionamento de loops aninhados.

 

//criamos os arrays 
var r = new Array("00","33","66","99","CC","FF"); 
var g = new Array("00","33","66","99","CC","FF"); 
var b = new Array("00","33","66","99","CC","FF"); 

//fazemos o loop aninhado 
for (i=0;i<r.length;i++) { 
for (j=0;j<g.length;j++) { 
   for (k=0;k<b.length;k++) { 
	  //creamos el color 
	  var nuevoc = "#" + r[i] + g[j] + b[k]; 
	  //imprimimos a cor 
	  document.write(novoc + "<br>"); 
   } 
} 
}

 

Para percorrer um array os loops se criam com um índice que servirá para acessar à posição atual do array. Os índices em arrays começam em 0, é por isso que nossos loops for contém uma iniciação a 0 da variável que vai servir de índice. Ademais o índice deve crescer de um em um até chegar à última posição do array, que se obtém acessando a sua propriedade length (que salva a longitude ou o número de elementos do array).

 

Colocando um loop dentro de outro poderemos realizar essa conta. O loop mais externo será o que menos vezes se executar, portanto com o loop exterior levaremos a conta de R. O loop do meio será para levar a conta de G e o mais interno (o que mais vezes se repetirá) para levar a conta de B, que é o valor que vai mudando constantemente.

 

Podemos vê-la em funcionamento neste link.

 

A tabela das cores completa

 

Para terminar, vamos ver o exemplo completo, com todas as linhas de código que incluem os textos HTML necessários para que a tabela saia convenientemente formatada e com as cores de fundo em cada uma das células iguais à cor atual.

 

Para isso, o primeiro que faremos é escrever o cabeçalho da tabela e a finalização da mesma, que ficam fora da estrutura de loops. Dentro dos loops realizaremos as sentenças para imprimir cada uma das filas e células da tabela.

 

Nossa tabela vai ter em cada fila um conjunto de cores, onde os valores RG não mudam e o valor B varia entre todos os possíveis. Na seguinte fila se incrementaria em um o valor G e faríamos outra vez a conta de valores B... assim até terminarmos com todos os valores R, G e B possíveis.

 

O código é o seguinte:

 

<table width="80%"> 
<script language="javascript"> 
var r = new Array("00","33","66","99","CC","FF"); 
var g = new Array("00","33","66","99","CC","FF"); 
var b = new Array("00","33","66","99","CC","FF"); 

for (i=0;i<r.length;i++){ 
for (j=0;j<g.length;j++) { 
   document.write("<tr>"); 
   for (k=0;k<b.length;k++) { 
	  var novoc = "#" + r[i] + g[j] + b[k]; 
	  document.write("<td bgcolor=\"" + novoc + "\" align=center>"); 
	  document.write(novoc); 
	  document.write("</td>"); 
   } 
   document.write("</tr>"); 
} 
} 
</script> 
</table>

 

Vemos que antes de começar o loop mais interno, cria-se uma nova célula com <TR> e que quando se acaba, termina também a célula com </TR>. Ademais, dentro do loop mais interno se compõe primeiro a cor atual e logo se escreve uma célula com o atributo bgcolor atribuído a essa cor atual e dentro dela o texto da cor atual.

--

Crédito:

CraiarWeb

--

Espero ter ajudado

[xdtibia16 10]

Eu acho que já olhei essse Javascript em um site.

Editado Agosto 11, 2010 por Aluxes