CriarWeb.com > Manuais > Workshop de Javascript

Vamos criar uma página que tem uma cor de fundo aleatória, de modo que, cada vez que se visite se mostre com um fundo diferente. Entretanto, como a cor da página vai ser diferente a cada vez, para certificarmos que o texto poderá ser lido corretamente, faremos com que o texto da página seja ou branco ou negro, dependendo da gama da cor de fundo: se for escuro, o texto da página será branco e se o fundo for claro, o texto se verá em negro.

Há que se dar conta que, se a cor é aleatória, às vezes sairá mais escuro e às vezes mais claro. Para que se leia bem o texto, sua cor tem que contrastar o suficiente com a cor de fundo, por isso, calcularemos a obscuridade ou a claridade do fundo para observar a cor do texto.

Pode-se ver em funcionamento o exemplo que será desenvolvido nesta página.

Em um artigo anterior do workshop de Javascript já explicamos uma maneira de conseguir uma cor aleatória em Javascript.

Apesar de no mencionado artigo já estar a função Javascript para obter uma cor aleatória transcreveremos novamente aqui, pois fizemos um par de mudanças minúsculas ao código:

function dame_numero_aleatorio(superior, inferior){
   var numPossibilidades = (superior + 1) - inferior;
   var aleat = Math.random() * numPossibilidades;
   aleat = Math.floor(aleat);
   aleat = (inferior + aleat);
   return aleat
}

function dame_cor_aleatoria(){
   color_aleat="#"
   hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
   var inferior = 0;
   var superior = hexadecimal.length-1;
   for (i=0;i<6;i++){
      color_aleat += hexadecimal[dame_numero_aleatorio(superior, inferior)];
   }
   return color_aleat
}

Agora veremos a maneira de conhecer a obscuridade ou claridade de uma cor aleatória gerada por Javascript. Para calcular a obscuridade (ou claridade) de uma cor em formato RGB hexadecimal, vamos realizar vários passos:

Temos que saber que, a maiores valores de RGB, a cor resultante será mais clara. Se os valores de RGB são mais baixos, a cor será mais escura. Os valores de R, G e B, separadamente podem ir, em decimal, desde 0 a 255. Diremos que será claro quando for maior que 255 / 2 e que é escuro quando for menor de 255 / 2. Vamos supor um umbral a partir do qual consideramos a cor mais escura ou mais clara. Digamos que se somamos separadamente os valores vermelho, verde e azul e dá mais da metade de ((255 + 255 +255) / 2), é que a cor é clara. Se estiver abaixo desse umbral, a cor é escura.

1. Separaremos os valores hexadecimais dos três componentes da cor (vermelho, verde e azul)
2. Converteremos esses valores a inteiros em base 10
3. Somamos os valores de cada cor, obtendo um número inteiro, do que vamos deduzir a claridade ou obcuridade.
4. Se o número resultado da soma for menor que ((255 + 255 + 255) / 2), então é que a cor de fundo é escura, logo a cor do texto deve ser clara. E ao contrário, se deduzimos que a cor de fundo é clara, então a cor de texto terá que ser escura.

Isto se faz da seguinte maneira, em código Javascript, tendo uma cor em um string com o formato #RRGGBB:

//obtenho uma aleatoria
colorin = dame_cor_aleatoria()

//vou extrair as tres partes da cor
rojo = colorin.substring(1,3)
verde = colorin.substring(3,5)
azul = colorin.substring(5,7)

//vou converter a inteiros os string, que tenho em hexadecimal
intvermelho = parseInt(vermelho,16)
intverde = parseInt(verde,16)
intazul = parseInt(azul,16)

//agora somo os valores
obscuridade = intvermelho + intverde + intazul

//se o valor obscuridade for menor que ((255 + 255 + 255) / 2) é que é uma cor mais escura
//se for escura, a cor do texto será branca
if (obscuridade<(255+255+255)/2)
   colortexto="#ffffff"
else
   colortexto="#000000"

Para atualizar a cor de fundo e de texto de uma página web se poderia fazer com estas linhas de código:

document.fgColor=colortexto
document.bgColor=colorin

Porém, isto dá um problema em alguns navegadores, ao mudar a cor do texto, que não se pode fazer se previamente se escreveu algo na página.

Então, vamos marcar a cor do fundo e do texto utilizando os conhecidos atributos bgcolor e text da etiqueta <body>.

Escreveremos o <body> mediante javascript, colocando os valores de cor aleatória e cor do texto que extraímos das variáveis que os contém.

document.write('<body bgcolor="' + colorin + '" text="' + colortexto + '">')

Isso é todo. Já temos a página com a cor de fundo aleatória e a cor do texto com suficiente contraste.

A página onde implementamos este exercício pode-se ver em funcionamento aqui. Podemos ver seu código fonte para obter script do exemplo completo.