Salve Galerinha!!! Desta vez o tutorial é de Javascript. Não, eu não estou ficando louco. apesar do meu foco maior é a parte de Design hoje eu resolvi mudar e parti pra programação web.

Hoje vamos ver como definir a cor de um plano de fundo quando o usuário digita um hexadecimal em uma caixa de texto de formulário, usando Javascript!! Vamos usar o Bloco de Notas do Windows para a criação desta página.

Primeiro, crie a estrutura base de uma página HTML seguindo a imagem abaixo.

index1

A princípio nada de mais. Apenas as tags de definição de cabeçalho com título da página (<head> e <title> e o corpo (<body>). Salve como index.html.

Vamos começar a incluir um formulário em nossa página (<form>). Dentro do formulário inclua a tag de criação de caixa de texto (<input type=”text”>).  Repare que foi definido um nome, tanto para o formulário quanto para a caixa de texto (hexa e cor, respectivamente). Atenção também para o fato que eu defini o nome usando letra minúscula (lembre-se que Javascript faz distinção entre letras maiúsculas e minúsculas. Ou seja, é uma Case Sensitive). Repare também na propriedade maxlength. Ela define a quantidade máxima de caracteres que poderá ser digitada na caixa de texto. No nosso caso, poderá ter  no máximo seis caracteres.

index2

Veja como está ficando no navegador.

pag1

Vamos incluir um botão que processe nossas informações. Siga o modelo da imagem abaixo. Repare que na tag <input type=”button”> foi inserido um value “Processar” (apenas para ter um rótulo no botão) e uma chamada de evento Javascript (onClick). O que é um evento? É uma chamada para uma determinada função com vários comandos. Ou seja, quando o usuário clicar no botão processar (onClick) ele irá chamar uma função chamada cores(). Fique atento para a letra maiúscula no onClick.

index3

Veja como está ficando no navegador.

pag2

Pra finalizar, vamos ao Javascript. Lembre-se das suas aulas de lógica, para que eu possa ter uma cor diferente toda vez que o usuário digitar um hexadecimal na caixa de texto, será preciso declarar uma variável. No nosso caso eu declarei com o valor “x”. Uma variável pode ser tipo texto, número, função etc. No nosso caso, eu declarei que o valor da variável é o que será digitado dentro da caixa de texto. Como o Javascript trabalha em cima dos objetos que formam uma página web, deve ser declarado os objetos usados para a formação da página.

x = document.hexa.cor.value

document = O documento na qual estamos trabalhando

hexa = O nome do formulário (lebra da name=”hexa” que foi inserido na tag form?

cor = O nome dado a caixa de texto onde é digitado o hexadecimal

value = O valor que vai ser inserido no objeto especificado.

Abaixo da declaração da variável vai a especificação da cor do documento.

document.bgColor = x

document.bgColor = Especifica a cor de plano de fundo do documento em Javascript .

x = Variável declarada anteriormente.

Para chamar este comando que está dentro das tags <head> foi declarado uma função (function) chamada cores(). O botão chama a função através do evento onClick=cores().

Ou seja, ao clicar sobre o botão ele ativa a função cores() que executa o comando que declara uma variável x cujo valor está dentro do formulário que contém uma caixa de texto e após ser definido o valor da variável ele mostra o plano de fundo de acordo com o valor de x.

Veja como vai ficar o código abaixo.

index4

Veja como fica no navegador.

pag3

Espero que tenham gostado deste tuto e até a próxima galera.