Eu sempre quis ver um artigo legal que me ensinasse Javascript, porque tudo o que vi até hoje escrito com ele é fantástico, claro que tem umas baboseiras que não valem a pena, mas a linguagem em si é show. Eu clico em um botão e aparece um formulário, eu passo para o campo seguinte do formulário e o dado é validado, eu mostro conteúdo, eu escondo conteúdo, etc, e o AJAX? é genial.
Quando eu falo em artigo legal me refiro a ele ser prático, rápido e fácil pegar a idéia da coisa. Nada de textos e mais textos teóricos e exemplos complicados, nem muito menos ficar copiando, colando e adaptando scripts que os outros fizeram, eu queria algo que me fizesse sair implementando minhas próprias coisas, do meu jeito. Até que tive no meu trabalho a oportunidade de fazer um enorme formulário com uma validação no cliente que não tinha mais tamanho, e tudo em Javascript, então… Bum! foi paixão à primeira vista, e desde então tenho fuçado a linguagem cada dia mais.
Preparado? então vamos lá… Vou falar de forma bem simples
1. Um pouco de teoria apenas
O Javascript é uma linguagem de script orientada à eventos criada pela empresa Netscape porque era de interese dela que as páginas da Internet tivessem maior dinamicidade e movimento. Não tem nada a ver com Java, exceto semelhança uma leve na sintaxe, só a nomearam assim porque o Java estava na moda na época.
Como em tempos de webstandard nada na Web é só alegria, existem coisas que funcionam para uns navegadores e coisas que não funcionam para outros. É importante se manter o código enxuto o suficiente para que eles funcionem até na geladeira de sua casa.
2. Vamos à prática então
Primeiro um bloco de código JS é declarado assim assim:
<script type=”text/javascript”>
/* aqui vem o script */
</script>
Isso é o mesmo que o <% %> do asp ou o <? ?> do PHP. Mas esse bloco do Javascript deve ficar entre as tags <head></head> por convenção da W3C. Obedeçam isso 
O ideal é explorar bastante o uso de funções (function) pra organizar as coisas, é fácil de pegar o jeito, um exemplo:
<script type=”text/javascript”>
function escrevaMeuNome() {
document.getElementById(’divDoNome’).innerHTML = ‘Henrique’;
}
</script>
Esta função claramente diz que ao ser chamada ela escreverá meu nome dentro do DIV de id “divDoNome”. Como chama-la? assim:
<input type=”buttom” value=”Meu Nome” onclick=”escrevaMeuNome()” />
<div id=”divDoNome”></div>
Vamos lá, eu tenho um DIV como elemento HTML que o Javascript vai usar para exibir meu nome. Sim, eu preciso ter isso porque do contrário onde ele vai imprimir?
O Javacript é orientado à eventos como eu disse no começo, ou seja, algum componente HTML precisa dispará-lo para que ele seja executado (interpretado). Quem disparou a função “escrevaMeuNome()” neste caso foi o botão, através do “onclick=escrevaMeuNome()”.
A função tem uma linha apenas de código. Ela chama cada objeto pela hierarquia:
* Document = o documento HTML atual;
* getElementById(’divDoNome’) = aqui é a função que Document tem para apanhar elementos pelo id, bastante claro, não? e quem estamos pegando é o nosso div “divDoNome”;
* innerHTML = Quando pegamos um elemento, podemos usar o método innerHTML que permite imprimir algum HTML nele;
Eu gosto muito de usar essas funções do Javascript como getElementById, getElementByDivName (pegar pelo nome da DIV), getElementByName, etc.. elas são praticamente mágicas porque como elas mesmo nos deixa entender, podemos pegar o nome de uma tag, o nome de um objeto HTML qualquer, etc, e com isso em mãos podemos fazer o que bem entender. Vamos à outro exemplo.
Um form:
<form name=”cadastro”>
<input type=”text” name=”nome” value=”" onblur=”validaCampoVazio(’nome’)”>
<label id=”label_nome”></label>
</form>
Este exemplo faz com que o campo “sobrenome” somente apareça se o campo “nome” tiver preenchido com algum valor. O campo ”nome” verifica isso assim que o mouse é clicado fora. Se o campo ficar em branco, uma mensagem de erro é exibida no label ”label_nome”.
Eu concluí que com Javascript a ordem é generalizar quando se trata de formulários. Então nada de sair aplicando funcionalidades específicas ao seu campo de texto ou etc, as funções devem ser aplicáveis à qualquer componente HTML e não à este ou aquele campo.
<script type=”text/javascript”>
function validaCampoVazio(campo) { //função validaCampoVazio (qualquer campo), que recebe um valor, que é o nome do campo que queremos validar.
var valorcampo; //declara opcionalmente a variável que receberá o valor do campo.
valorcampo = document.cadastro['nome'].value; // document.nomedoformulario['camponome'].ovalordele (hierarquia de objetos). Isto resgata o valor daquele campo no momento em que foi chamada a função em questão.
if (valorcampo == ”) { //se o valor do campo for nulo.
mostraMsgErro(campo); //chama a função que vai mostrar mensagem de erro, passando o mesmo NOME DO CAMPO (veja bem, nao é o valor, é o nome!). Apartir do nome do campo podemos tirar o que quisermos dele: valor, estilo, etc.
escondaSobreNome(); //chama a função que vai esconder o campo e o label do sobrenome.
} else {
mostraMsgOk(campo); //chama a função que vai mostrar mensagem de ok.
mostraSobreNome(); //aqui mostra o label e o campo sobrenome.
}
function mostraMsgErro(campo) {
var msgErro = campo + ‘ inválido(a) ou vazio(a)’; //a variável msgerro aqui recebe o nome do campo e concatena com a mensagem.
var labelErro = document.getElementById(’label_’ + campo) //aqui resgata-se o nome do label que mostrará a mensagem.
labelErro.innerHTML = msgErro; //e manda-se imprimir a mensagem no label.
}
function mostraMsgOk(campo) { //aqui faz-se praticamente a mesma coisa de ali acima mas nao se exibe nada no label.
var labelOk = document.getElementById(’label_’ + campo)
labelOk.innerHTML = ”;
}
function mostraSobreNome() { //esta função mostrará o campo sobrenome.
document.getElementById(’sobrenome’).style.display = ‘block’; //aqui mostra-se o label, acessa-se o atributo “style” e depois o “display” e dá-se um block!
document.cadastro['sobrenome'].style.display = ‘block’; //e aqui o campo.
}
function escondaSobreNome() { //esta função é o contrário da mostraSobreNome() de cima.
document.getElementById(’sobrenome’).style.display = ‘none’; // acessa-se o atributo “style” e depois o “display” e esconde.
document.cadastro['sobrenome'].style.display = ‘none’; //e aqui o campo.
}
}
</script>
O que é brilhante é a maneira como os objetos se hierarquizam, de forma que posso ir acessando atributos e sub-atributos como no caso do “objeto.style.display” ou do “objeto.value”. Assim posso manipular com o que quiser.
Falta muito? falta. Tem coisas muito interessantes como o tratamento de erro com “Try” e “Catch”, AJAX,.. etc, etc, etc, etc. Isso aqui foi apenas uma idéia de como as coisas funcionam. Com um pouco de exercício você que já conhece programação pra Web vai conseguir tirar coisas interessantes desses exemplos que eu dei.
Introduzam ou retomem o Javascript em suas vidas e me contem como foi!
Tela de instalação, com opção de instalara as versões que se desejar.
