JAVASCRIPT- PARTE 8

 

Objetivos:

 

Na sétima parte do tutorial sobre JavaScript mostrei como armazenar strings em JavaScript e a trabalhar com partes de strings. Também mostrei a utilizar arrays e a armazenar números ou strings neles. Agora nesta oitava parte do tutorial você aprenderá a utilizar a instrução if e outros recursos do JavaScript para testar os valores de variáveis, incluindo strings e arrays.

 

Pré-requisitos: Para acompanhar a lição você deve estudar as primeiras partes desse tutorial.

 

Introdução

 

Durante as primeiras partes do tutorial de JavaScript você aprendeu métodos e propriedades que os auxiliam quando desejam executar alguma coisa no JavaScript, exemplos que podem parece “bobos” mais que causam efeitos notáveis. Agora vamos aprender a fazer melhor utilização desses métodos e variáveis, testando e avaliando seus valores, utilizando instruções condicionadas como a instrução if.

 

A instrução if

 

Um dos recursos mais importantes de uma linguagem de programação é a capacidade de testar e comprar valores . E isto pode ser feitos através das estruturas de controle que permitem que seu programa se comporte diferentemente com base nos valores de variáveis ou com base na entrada do usuário.

 

A instrução If é a instrução condicional principal do JavaScript pois ela executa uma porção de código se a condição especificada for verdadeira. Ou seja essa instrução consiste em duas partes : uma condição e uma ação, por exemplo :

 

Se a campanhia toca, atenda-a.

 

Condiçao » Se a campanhia tocar

Açao » atenda-a .

 

No JavaScript a instruçao If trabalha de forma semelhante , por exemplo.

 

If( a = = 1 ) window.alert( “ a é igual a 1!”);

 

Essa instruçao inlcui uma condiçao ( se a for igual a 1) e uma açao ( exibe uma mensagem ). Essa instruçao verifica a variavel a e se tiver um valor de 1, imprime uma mensagem. Caso contrario não faz nada.

 

Se voce utilizar uma instruçao if como o exemplo anterior, pode utilizar uma única instrução como a açao. Voce também pode utilizar múltiplas instruções para a ação, incluindo-as em chave ( { } ) , como no exemplo abaixo:

 

If( a = = 1)

 {

   window.alert( “ a é igual a 1”) ;

   a= 0 ;

 }

 

Neste exemplo verifica a variavel a mais uma vez e se localizar o valor de 1, exibe a mensagem e configura a de volta como 0.

 

Operadores condicionais.

 

Embora a parte de ação de uma instrução if possa incluir quaisquer das instruóes de JavaScript que voce já aprendeu , a parte de condição da instrução utiliza sua propria sintaxe, isso é denominado expressão condicional. Uma expressão condicional inclui dois valores a serem comparados e esses valores podem ser variaveis, constantes ou até expressões.

 

Entre dois valores a serem comparados há um operador condicional, esse operador diz ao JavaScript como comparar os dois valores. Por exemplo o operador = = é utilizado para testar se os dois valores são iguais. Abaixo esta uma variedade de operadores condicionais mais utilizados no JavaScript:

 

» == ( igual a );

 

» ! = ( não igual a );

 

» < ( menor que );

 

» >( maior que );

 

» < = ( menor que ou igual a );

 

» > = ( maior que ou igual a ) ;

 

Nota: Não confuda o operador de igualdade ( = = ) com o operador de atribuição (=), mesmo que eles talvez seja lidos como “igual”, é bom lembrar que utiliza = quando atribui uma variavel e = = quando compara valores.

 

Condiçoes e operadores lógicos

 

Na linguagem de programaçao é comum voce querer verificar uma variavel para mais de um possivel valor ou verificar mais de uma variavel de uma vez. No JavaScript isso é possivel através de operadores lógicos, também conhecidos como operadores booleanos. Por exemplo, as duas intruçoes do exemplo abaixo verificam condiçoes diferentes e utilizam a mesma ação :

 

If( telefone = =” “ ) window.alert(“ ERRO!” );

IF( email== “ “ ) window.alert(“ ERRO!” );

 

Com a utilizaçao de um operador lógico podemos otimazar essas instruóes , combinando-as em uma única instrução

 

If ( telefone == “ “ :: email == “ “’) window.alert(“ ERRO!” );

 

Essa instruçao utiliza o operador logico Or ( :: ) para combinar as condições. Traduzindo para uma liguagem mais usual , isso seria “ se o numro de telefone ou o endereço de correio eletronico estiver em branco, exiba uma mensagem de erro”.

 

Outro operador logico que poderia ser utilizado para combinar as condiçoes seria o operador adicional ou seja o operador And ( && ), como pode ser visto no exemplo abaixo “

 

If ( telefone == “ “ && email == “ “’) window.alert(“ ERRO!” );

 

Essa instrução utiliza && ( And) em vez de :: ( Or), e com isso o mensagem de erro somente será exibida se ambos, o endereço do correio eletronico e as variaveis de numero de telefone, estiverem em branco.

 

Nota: É importante voce saber que se o interpretador de JavaScript descobrir a resposta para uma expressao condicional antes de alcançar o fim, ele não avalia o resto da condição. Por exemplo, se a primeira de duas condições separadas pelo operador && for falsa, a segunda não é avaliada, com isso voce tira proveito para aprimorar a velocidade de seu script.

 

O terceiro operador lógico é o ponto de exclamação ( ! ) , que significa Not. Ele pode ser utilizado para inverter uma expressao em outras palavras, uma expressao verdadera se tornaria falsa e um falso se tornaria verdadeiro. Por exemplo:

 

If ( telefone !== “ “ ) alert(“ o número de telefone esta correto ” );

 

Nesse caso, o operador Not é utilizado como parte do operador de não-igual. Esse operador inverte a condiçao, entao a ação da instrução if é executada somente se a variavel de numero de telefone não estiver em branco.

 

Nota: Como voces pode notar os operadores lógicos são recursos poderosos, mais que são facieis de criar uma condiçao impossivel entres eles. Por exemplo, a condiçao ( a < 5 && a >10 ) talvez pareça correta à primeira vista. Entretanto, se voce lê-la em voz alta, você obtém “ Se a é menor que 5 e a é maior que 10 “, como voce pode ver ocorreu uma impossibilidade entre a condiáo, entao nesse caso, Or( :: ) deveria Ter sido utilizado.

 

Condição else

 

Um recurso adicional da instrução if é a palavra else. O else diz ao interpretador de JavaScript o que fazer se a condição não for verdadeira. Por exemplo :

 

If( a = = 1)

 {

   window.alert( “ a é igual a 1”) ;

   a= 0 ;

 }

 

else { alert ( “Valor incorreto:” +a) ;}

Nesse exemplo , é exibido uma mensagem e redefine a variavel a se a condição for encontrada. Se a condição não for encontrada, uma mensagem diferente é exibida.

 

Utilizando expressões condicionais

 

Além da instruçao if, o JavaScrip fornece um tipo de abreviação de expressão condicional que você pode utilizar para tomar decisões rapidas. Ela utiliza uma sintaxe peculiar, que também é encontrada em outras linguagens, como C. Uma expressao condicional se parece com isso :

 

Variavel =( condição) ? if true : if false;

 

Isso atribui um de dois valores à variavel: um se a condição for verdadeira e outro se for falsa. Eis um exemplo de uma expressao condicional:

 

valor=( a== 1) ? 1 : 0;

 

Essa instruçao pode parecer confusa para voce não é verdade ? , mais esta instruçao é equivalente ao seguinte exemplo abaixo:

 

if( a== 1)

 

  valor = 1 ;

else

  valor = 0;

Como voce pode Ter percebido , o valor depois do ponto de interrogação( ?) será utilizado se a condição for verdadeira e o valor depois dos dois-pontos(:) será utilizado se a condição for falsa. Os dois-pontos representam a parte else dessa instrução e, como a parte else da instrução if, é opcional.

 

Essas expressoes abreviadas podem ser utilizadas em qualquer lugar que o JavaScript espera uma valor. Elas fornecem uma maneira fácil de tomar decisões simples sobre valores ,mais que muitas das vezes é complicado de entender não é mesmo?. Por isso utilize a forma que você acha mais facil de entender.

 

Utilizando condições com switch

 

Muitas das vezes você utilizará varias instruções if em uma linha para testa e condições diferentes, como mostrado no exemplo abaixo:

 

If( button == “next”) window.location= “next.html”;

If( button == “previous”) window.location= “prev.html”;

If( button == “home”) window.location= “home.html”;

If( button == “back”) window.location= “menu.html”;

 

Embora isso seja uma maneira correta de fazer as coisas, esse método pode ser confuso se cada instrução if tiver seu próprio bloco de código com varias instruções. Como uma alternativa, o JavaScript inclui a instrução switch, que permite combinar vários testes da mesma variável ou expressão em um único bloco de instruções. Como mostrado no exemplo abaixo:

 

switch ( button) {

 

case “next”: window.location= “next.html”;

 

break;

 

case “previous”: window.location= “prev.html”;

 

break;

 

case “home”: window.location= “home.html”;

 

break;

 

case “back”: window.location= “menu.html”;

 

break;

 

default:

 

window.alert( “ botão errado”);

 

}

 

Analisando esse exemplo podemos perceber que a instrução switch tem vários componentes :

 

» A instrução inicial switch, inclui um valor a testar( nesse caso, button) entre parênteses.

 

» As chaves ( { e } ) incluem a instrução switch, semelhante a uma função ou uma instrução if.

 

» Uma ou mais instruções case. Cada uma dessas instruções especifica um valor para comparar com o valor especificado na instrução switch.

 

Se os valores corresponderem, as instruções depois da instrução case são executadas. De modo, o próximo caso é tentado.

 

» A instrução break é utilizada para terminar cada caso.

 

» Opcionalmente, a instrução padrão pode ser incluída e seguida por um caso padrão, uma ou mais instruções que são executadas se nenhuma das instruções case foram satisfeitas.

 

Nota: Você pode utilizar múltiplas instruções depois de cada instrução case dentro da estrutura switch. Você não precisa incluí-las entre chaves. Se case corresponde, o interpretador de JavaScript executa instruções até encontrar um break ou case seguinte.

 

Avaliando a resposta do Usuário

 

Para melhor entender o exemplo anterior, vamos criar agora um exemplo prático. Nesse exemplo você vai criar uma pagina da Web que faz ao usuário uma pergunta e depois avalia a resposta do usuário para determinar o que fazer a seguir. Especificamente, você perguntará ao usuário uma palavra-chave que representa uma página da Web.

 

Se a palavra-chave corresponder a uma daquelas em seu script, o usuário será enviado para a página apropriada. Se a resposta não corresponder a uma palavra-chave predeterminadas, o usuário será enviado para uma página padrão, que pode ser a sua página em construção ou no meu caso a página do Júlio Battisti.

 

Seu script começa perguntado ao usuário a função window.prompt. Para utilizar essa função, você inclui uma instrução que faz uma solicitação ao usuário como um parâmetro e atribui o valor retornado a uma variável. Eis a instrução da solicitação:

 

pagina = window.prompt( “Que página você vai visitar hoje ?” );

 

A seguir, utilize uma instrução switch e várias instruções case para avaliar a resposta :

 

switch ( pagina) {

 

case “Netscape”:

 

window.location= “http:// www.netscape.com”;

break;

 

case “Microsoft”:

 

window.location= “http:// www.microsoft.com”;

break;

 

case “ Yahoo”:

 

window.location= “http:// www.yahoo.com.br”;

break;

 

A seguir, utilize a instrução default para enviar o usuário a uma pagina padrão, que no meu caso é a página do Júlio Battisti ;

 

default :

 

window.location= “http:// www.juliobattisti.com.br”;

 

}

 

Como esta é a ultima instrução na estrutura switch, você não precisa utilizar a instrução break. A chave final termina a instrução switch.

 

No exemplo abaixo mostra o script completo embutido em um documento de Web. Para testa-lo, carregue a página. Você deve ver um prompt, como mostrado nas Figuras logo abaixo. A seguir, insira uma das palavras-chave. Você deve ser enviada para a pagina apropriada. Se especificar uma palavra-chave desconhecida, você será enviado para a página padrão.

 

<HTML>

< HEAD><TITLE> Avaliando a resposta do Usuário</TITLE>

</HEAD>

<BODY>

<SCRIPT>

 

pagina = window.prompt( “Que página você vai visitar hoje ?” );

 

switch ( pagina) {

 

case “Netscape”:

 

window.location= “http:// www.netscape.com”;

 

break;

 

case “Microsoft”:

 

window.location= “http:// www.microsoft.com”;

break;

 

case “ Yahoo”:

 

window.location= “http:// www.yahoo.com.br”;

 

break;

 

default :

 

window.location= “http:// www.juliobattisti.com.br”;

 

}

 

</SCRIPT>

</BODY>

</HTML>

 

Depois executar o script você vai ter os mesmo resultados vistos nas Figuras abaixo.

 

 

 

 

 

 

 

 

Conclusão

 

Nesta parte do tutorial , você aprendeu a utilizar instruções JavaScript como if e else para testar e comparar valores. Você também aprendeu uma maneira rápida de testar valores com o operador ? e utilizou a instrução switch para testar um numero de valores diferentes, sem precisar utilizar o if e assim otimizando seu script. E por fim você aplicou esse conhecimento para avaliar a resposta do usuário, executando o script proposto neste tutorial e também pode ver que ao digitar uma palavra-chave que não foi definida, o script me respondeu enviando o usuario para uma pagina padrão pre-definida em código fonte da página . No próximo tutorial você aprenderá outra ferramenta de programação do JavaScript, que são a utilização dos loops, que faz com que o JavaScript desempenhe tarefas repetitivas sem precisar repetir o código varias vezes.