Tutorial Anterior > Introdução Ao Javascript Parte 3
Uma das utilizações mais constantes do javascript é na validação de formulários. Formulários são chatos e validá-los utilizando javascript torna o processo mais tranquilo. Toda validação necessita da comparação de valores. E neste tutorial veremos os operadores de comparação, e blocos condicionais.
Ao final você vai entender como criar e utilizar funções.
if
A maior parte do javascript somente entra em ação como resposta a um evento. O clicar em um botão/link/imagem, sair de um campo de formulário e assim por diante. Ele obedece a uma condição para acontecer. A mais conhecida e utilizada em nosso próprio dia-a-dia, é o SE. Se chover abro o guarda-chuva, caso contrário não. No javavascript e nas outras linguagens de programão, a estrutura é a mesma:
If (condição){
// codigo
} else {
// codigo
}
Na condição entram os operadores de comparação (e, ou, igual a, menor, maior). Vejamos um exemplo simples.
var num = 9;
if (num === 9)
{
document.write('Igual a nove');
} else {
document.write('Diferente de nove');
}
Uma verificação bastante simples. Se o valor da variável for igual a 9 no navegador será mostrado isso, caso contrário informa que é diferente.
Veja que para comparar valores, você utiliza três sinais de igual consecutivamente, poderiam ser apenas dois que funcionaria, já que se você utilizar apenas um estará populando a variável com aquele valor.
Operadores
Segue uma lista dos operadores:
=== – igual a;
!= – diferente de
|| – ou
> – maior que
< – menor que
>= – maior ou igual
=< – menor ou igual
&& – e
Vamos fazer mais algumas verificações para exemplificar o uso dos operadores.
var num = 10;
if (num < 10)
{
document.write('Menor que dez.');
}
if (num >= 10)
{
document.write('Maior ou igual a dez.');
}
if (num != '')
{
document.write('Variável não esta vazia');
}
if (num != '' && num > 0)
{
document.write('Valor positivo.');
}
switch
Se a verificação precisa percorrer um grande número de possibilidades, ao invés utilizar if..else diversas vezes, a melhor escolha é aplicar o switch.
A sintaxe é a seguinte:
switch(variável)
{
case “valor1”:
bloco de execução
break;
case “valor2”:
bloco de execução
break;
default:
bloco de execução se nenhum dos dois casos forem verdadeiros
}
Vamos a um exemplo.
var cor = 'azul';
switch(cor){
case "azul":
document.write('Céu.');
break;
case "vermelho":
document.write('Sangue.');
break;
default:
document.write ('Nenhuma das duas cores.');
}
Informa no início qual a variável será verificada. Em cada case é posto um possível valor desta variável, se ele retornar verdadeiro o código é excecutado e a rotina é quebrada com a palavra break para não continuar desnecessariamente.
Se quiser, pode definir um comportamento padrão caso nenhuma das verificações retorne verdadeiro. A palavra reservada para isso é a default, e sendo a última linha da condição, não precisa do break.
for
Para execuções repetitivas de código, como adicionar um ao valor, podemos usar o for. Ele é especialmente útil quando sabemos de antemão quantas vezes as linhas deverão ser executadas.
A sintaxe do for é:
for (variável=valorinicial; variável<=valorfinal; variável++) { //codigo }
Para escrever de 0 a 10 na tela:
for (i=0; i<11; i++) { document.write(i); }
A variável recebe um valor inicial e o laço de código é executado até que a condição (i<11) retorne verdadeiro. Sendo que, cada vez que o ponteiro de execução retorna para o inicio do laço, o valor é acrescido em uma unidade (i++).
while e do...while
O while tem o funcionamento bastante parecido com o for. As diferenças são que ele somente verifica a condição e a incrementação é feita ao final do laço.
Vejamos a sintaxe:
while (condição)
{
//codigo
}
Um exemplo:
var numero = 0;
while (numero <= 3)
{
document.write(numero);
numero++;
}
Enquanto utilizando while pode ser que o código não seja executado sequer uma vez caso a verificação não retorne verdadeiro, existe uma variante do while onde o código é executado ao menos uma vez, e depois é feita a verificação.
do{
//código
}
while (verificação);
Vamos modificar o código acima escrito somente com while:
var numero = 3;
do
{
document.write(numero);
numero++;
}
while (numero <= 2)
O valor da variável é mostrado na tela e somado mais um e somente depois é feita a verificação para saber se ele é menor ou igual a dois.
Notação Ternária
Para encurtar a escrita e possivelmente o tamanho dos arquivos, podemos utilizar a notação ternária. Ela é composta por três partes como muitas das expressões condicionais vistas acima, com a diferença de fazer tudo em uma única linha.
(condição) ? ação1 : ação2;
Traduzindo: se a condição for verdadeira, então (?) ação um será executada, senão (:) ação dois. Vamos para a prática:
var num = 1;
(num===1) ? msg='Um': msg='Diferente de um';
document.write(msg);
Muitos usam a notação ternária no lugar do if...else já que são correspondentes. Existe muita discussão sobre a utilização da notação ternária. Alguns acham que complica o código colocar tanta informação junta e argumentam que o ganho na redução do tamanho do arquivo é pequeno demais para justificar sua utilização.
Por isso é bastante pessoal a escolha por utilizar esta forma de escrita.
Funções
Além das funções nativas do javascript, você pode criar as suas. Muito úteis para melhorar a organização e evitar repetição do código.
Não existem muitas limitações para isso, basta seguir as seguintes diretrizes:
function nomeFuncao(variáveis){
//codigo
}
Para nomear a função é indicado que você use o camelCase, com o início em minúsculas e as palavras restantes iniciando com maiúscula, sem espaço entre elas.
No código abaixo, um exemplo prático de como criar uma função e chama-la.
function mostraNome(nome)
{
document.write(nome);
}
mostraNome('Maicon');
Você não precisa passar uma variável em toda função, ela pode ter um código a ser executado toda vez que chamada independente de valores. Assim como, se você quiser passar cinco variáveis para a função também pode, com a necessidade de separá-las por virgula.
function mostraNome(nome, sobrenome)
{
document.write(nome + ‘ ‘ + sobrenome);
}
mostraNome('Maicon', ‘Sobczak’);
Dentro da função você pode fazer verificações e todo tipo de operação. E se o resultado do código dentro desta função precisar ser guardado para operações futuras, por exemplo, dentro do bloco utilizamos a palavra return.
function mostraNome(nome)
{
return nome;
}
var retorno = mostraNome('Maicon');
Ao rodar esse código no navegador nada acontecerá a princípio já que o valor é apenas retornado pela função. Mas utilize um alert() na variável ‘retorno’ e você verá que é mostrado o resultado da função.
Conclusão
O que vimos neste tutorial serve não somente para programar em javascript, mas para quase todas as outras linguagens de programação web e desktop. São estruturas essenciais para todo código e apesar de não serem complicadas, precisam ser completamente entendidas.
Próximo Tutorial > Introdução Ao Javascript Parte 5
