Realizamos um simples script em Javascript para realizar uma moldura com informação dinâmica, que muda com cada impressão da página. O exercício consiste em uma tabela HTML que mostra uma informação que muda, utilizando Javascript para que nos proporcione um texto aleatório, que logo imprimiremos dentro da tabela HTML.

Para começar veremos como obter um texto aleatório. A idéia a desenvolver é bem simples. Criamos um array com os diferentes textos, entre os que se escolherá um aleatoriamente. Obtemos um valor numérico aleatório entre 0 e máximo índice do array e se imprime o texto que há no array nessa posição aleatória.

function texto_aleatorio(){
   var textos = new Array()
   textos[0] = "Temos os melhores produtos do mercado, com controles de    qualidade intensivos."
   textos[1] = "Distribuímos em todo o mundo com os melhores tempos de    entrega e confiança nos envios."
   textos[2] = "Não temos concorrentes que nos superem. Contrate    conosco e comprove. É muito fácil."
   textos[3] = "Disponha do melhor serviço de atenção ao cliente e uma    resposta rápida aos seus problemas."
   textos[4] = "Os melhores serviços, produtos e, claro, os menores    preços. Tudo são vantagens."

   aleat = Math.random() * (textos.length)
   aleat = Math.floor(aleat)

document.write(textos[aleat])
}

Na primeira linha se cria o array e nas seguintes se iniciam seus diferentes campos com textos variados. Tal como fizemos o exercício, o número de campos que tiver o array é indiferente, portanto poderíamos aumentar seus campos, introduzindo novas frases, e así as possibilidades de textos serão mais variadas.

Mais adiante na função se obtém um número aleatório. Para obtê-lo utilizamos a classe Math, mais concretamente o método random(). Random devolve um valor decimal aleatório entre 0 e 1. Algo como 0.453. Se multiplicarmos esse valor pelo número de campos do array obteremos um número entre 0 e o número de campos, porém ainda têm valores decimais e nós desejamos que seja inteiro para poder utiliza-lo como índice no array. Para converter esse valor a inteiro, o arredondamos para baixo com floor(), que devolve o número mais próximo, arredondamos por baixo.

Nas últimas linhas de função se imprime o valor aleatório.

O código HTML da moldura

<table width="180" border="0" cellspacing="1" cellpadding="2" bgcolor="000000">
   <tr>
   <td class="barra" bgcolor="993333"><font color="#FFFFFF"><b>Nossas vantagens</b></font></td>
   </tr>
   <tr>
    <td class="fuente8" bgcolor="#FFFFFF"><script language=javascript>texto_aleatorio()</script></td>
   </tr>
</table>

É uma tabela HTML muito simples. Simplesmente mostra uma célula com o cabeçalho ou titular da caixa e uma segunda célula na que simplesmente há uma chamada à função que escreve o texto aleatório.

O resultado pode ser visto em uma página a parte. Tenha em conta que há que atualizar a página para ver como vão se mostrando diferentes mensagens, entre todas as que configuramos.

Podemos complicar este exemplo em tudo que desejarmos para criar páginas dinâmicas que mudem os conteúdos entre diferentes acessos do visitante. Poderíamos fazer que se incluam diferentes elementos aleatórios, como imagens, animações, links, etc.