Conhecendo JavaScript - Estrutura de Controle If /else

Estrutura de Controle IF/ Else

A estrutura de controle ou estrutura de decisão if / else é bem simples de ser utilizada e traz muito do conceito de fluxo de programa, através de uma condição onde avalia um resultado, uma logica, que possa ser testada ou verificada. Como em outras linguagens no javascript é igual, vou apresentar um pouco da sintaxe.

IF
A forma de escrita simples com apenas if ( no português SE ), escreve-se if abre e fecha parenteses ( _ ) depois abre e fecha chaves { }. Dentro dos parenteses é efeito o teste, e dentro das chaves fica a instrução que vai ser executada se for verdadeiro o teste, ou seja, passar no teste caso contrario o fluxo do programa não passa por essa parte do código.

if ( condição) { // se for verdadeiro passa }

IF / ELSE
Em uma leitura bem simplificada if significa SE e else OUTRO, pode se pensar assim... SE algo for verdadeiro faça isso, caso não satisfaça siga para OUTRO código, O else no final é opcional usado somente quando necessário fazer algo no caso de ser falsa a condição do if.

if ( condição) {
// bloco de codigo
}else{
// caso o bloco de cima seja falso esse bloco é executado
}

Encadeamento de IFs
E pode-se fazer também o encadeamento de ifs, pode traduzir assim... SE algo for verdadeiro execute o código, caso seja falso vai para OUTRO código e verifique SE condição, e caso não passe, vai para OUTRO código e verifique SE condição, caso seja falso também vá para OUTRO código e finalize.

E assim podemos adicionar mais OUTRO SEs ou outros Ifs sempre acompanhado do else , como já visto o else é opcional no final, agora indo para realidade da programação e repassar o que esta acima para compreensão.

if ( verdadeiro ){
//execute o código

} if else (outro_Teste){
//outro código

} if else (outra_Verificação){
//outro código

} else{
// não passou em nenhum termina aqui esse If encadeado

}

Operadores de Comparação

Seguindo o estudo veremos Operadores de Comparação também chamado de Operadores Relacionais, são operações capazes de formar expressões que usaremos dentro do if, para fazer testes e verificações. No JavaScript existem 9 segue tabela abaixo.

Tabela de Operadores JavaScript

OPERADOR	NOME	FUNÇÃO
==	IGUAL	valores são iguais
===	Idêntico	valores são iguais e do mesmo tipo
!=	Diferente	valores são diferentes
<>	Diferente	valores são diferentes
!==	Não Idêntico	valores são diferentes e ou de tipos diferentes
<	Menor que	valor da esquerda é menor que o valor da direita
>	Maior que	valor da esquerda é maior que o valor da direita
<=	Menor igual	valor da esquerda é menor ou igual ao valor da direita
>=	Maior igual	valor da esquerda maior ou igual ao valor da direita

Assim através dos operadores de comparação escrevemos condições onde teremos como retorno verdadeiro ou falso em nossas verificações, dessa maneira alterando o fluxo do if na nossa aplicação

Agora que já temos compreensão suficiente para aplicar os Operadores de comparação em nossos if vamos a prática.

No NetBeans vamos Criar um novo arquivo.html para registrar e fazer nossos testes, relembrando apertar com o botão direito do mouse na raiz do site/ novo / arquivo.html, adicionar a tag script e o type para javascritp.

Operador Igual ==

Vou criar duas variáveis para serem comparadas;

var NumeroRua_Sul = 3;
var NumeroRua_Norte = 5;

Mesmo já sabendo que são diferentes vamos criar nosso teste

relembrando sintaxe:

if ( condição ){ }

Verificar se é igual:

if (NumeroRua_Sul == NumeroRua_norte){
alert (''Estamos dentro do if'');
}
alert(''Estamos fora do if'');

Resultado:

Agora vamos deixar as variáveis iguais

var NumeroRua_Sul = 30;
var NumeroRua_Norte = 30;

if (NumeroRua_Sul == NumeroRua_norte){
alert (''Estamos dentro do if'');
}
alert(''Estamos fora do if'');

Resultado:

Observe que no primeiro teste apresenta o alert que esta fora e no próximo o que esta dentro do if primeiro, depois segue o fluxo e mostra o próximo alert fora do if.

Vamos agora adicionar o else.

var NumeroRua_Sul = 10;
var NumeroRua_Norte = 30;

if (NumeroRua_Sul == NumeroRua_norte){
alert (''Numero da rua são iguais'');

}else{
alert(''Numero da rua não são iguais'');
}

O resultado como esperado é a exibição do alert dentro do else.

Foi utilizada duas variáveis para comparação, mais poderiamos inserir diretamente esses numeros para serem comparados no if, segue exemplo

if (10 == 30){}

Operador Idêntico ===

O operador Idêntico verifica a igualdade de tipos e valores ao mesmo tempo. Simplificando ele verifica se o valor é do mesmo tipo e igual no caso do nosso exemplo os numeros são do tipo inteiro, mas se for colocado entre aspas o numero ele é do tipo String.

Se realizarmos o mesmo teste onde as variáveis são iguais e inserirmos as aspas no valor inteiro '30', segue exemplo;

var NumeroRua_Sul = 30;
var NumeroRua_Norte = '30';

if (NumeroRua_Sul == NumeroRua_norte){
alert (''verdadeiro'');

}else{
alert(''falso'');
}

O resultado é verdadeiro pois são iguais os valores, porem seus tipos são diferentes.

Agora realizando o teste com === .

if ( 30 === '30' ){
document.write('verdadeiro ');
}else{
document.write('falso');

}

O resultado, será:

Operador Diferente != ou <>

Como o próprio nome sugere ele é contrario do igual == , e segue o mesmo para os tipos nesse caso um exemplo, um inteiro 10 e uma string "10" são avaliados como sendo iguais e apresentado falso, pois para esse operador não são diferentes os valores.

if ( 10 != '10' ){
document.write('verdadeiro ');
}else{
document.write('falso');

}

Operador não Idêntico !==

Este operador verifica se valores não são idênticos no tipo e no valor, é o contrario de idêntico.

if ( 10 !== '10' ){
document.write('verdadeiro ');
}else{
document.write('falso');

}

Operador Menor <

Este operador verifica se o valor que esta a esquerda é menor que o dá direita, um exemplo pode ser uma expressão simples como, 10 menor é que 20 ,(10 < 20 ), nesse caso apresenta verdadeiro.

if ( 10 < 20 ){
document.write('verdadeiro ');
}else{
document.write('falso');

}

Operador Menor Igual <=

Este operador verifica se o valor é menor ou igual;

if ( 10 <= 20 ){
document.write('verdadeiro ');
}else{
document.write('falso');

}

Operador Maior >

Este operador é o contrario do Menor, ele verifica se o valor a esquerda é maior que o dá direita,

if ( 10 >20 ){
document.write('verdadeiro ');
}else{
document.write('falso');

}

Operador Maior >=

Este operador verifica se o valor a esquerda é maior ou igual que o dá direita,

if ( -10 >=20 ){
document.write('verdadeiro ');
}else{
document.write('falso');

}

Exercício de Fixação.

Criar Script para receber 3 notas e fazer divisão por 3, verificar se é maior ou igual a média 6, detalhes do script as notas serão passadas em array e serão somadas e verificadas, neste desafio os valores são convertidos em objeto dentro do array e depois pode-se somar eles e fazer a divisão, no final apresentar o resultado no browser.

<script type="text/javascript">
/* Exercicío de Fixação if/else
* Neste exemplo vou apresentar a soma, divisão e comparação de notas para media*/

var nota1,nota2,nota3;
var media = 6, total_notas;

nota1 = prompt("Digite a primeira nota");
nota2 = prompt("Digite a segunda nota");
nota3 = prompt("Digite a terceira nota");

var lista_notas = Array(nota1,nota2,nota3);

total_notas = parseInt(lista_notas[0]);
total_notas = total_notas+parseInt(lista_notas[1]);
total_notas = total_notas+parseInt(lista_notas[2]);

total_notas = total_notas / 3;

if(total_notas >= media){

document.write("Aluno Aprovado,"+""+"Sua media Final foi:"+total_notas);

}else{
document.write("Aluno Reprovado,"+""+"Sua media Final foi:"+total_notas);
}

</script>

Continuando, vamos ver agora operadores lógicos.

Operadores Lógicos

Operadores Lógicos ou Operadores Booleanos são operadores que juntam as expressões para fazer comparações entre elas, ou seja. verificar duas ou mais expressões. Com os operadores lógicos temos um maior controle de fluxo.

O java Script tem 3 Operadores Lógicos, segue tabela;

OPERADOR	NOME	FUNÇÃO
&&	E	Verdadeiro se todas as expressões forem verdadeiras
\| \|	Ou	Verdadeiro se pelo menos umas das expressões for verdadeira
!	Negação	inverte o resultado da expressão

Operador &&

Este operador usa o && comercial no meio entre duas expressões , ele só apresenta verdadeiro caso os dois lado da expressão sejam verdadeiros.

Exemplo;

if ( 5 == 5 && 'A' == "A" ){

alert("verdadeiro");

}

Caso umas das expressões seja falsa, mesmo que uma esteja retornando verdadeiro ele avalia como falso. segue exemplo.

if ( 15 <= 5 && 'A' == "A" ){

alert("verdadeiro");

}else{

alert("falso");

}

O resultado é falso pois uma expressão 15 é menor que 5 é falsa.

Operador | |

Este operador é chamado de Ou, uso de 2 pipes | | , ele apresenta verdadeiro se ou menos uma expressão for verdadeira,ou seja, enquanto o operador && avalia se são ambas verdadeiras no Operador somente uma precisa é necessária.

if ( 'Casa' !== 'CASA' | | 10 == 10 ){

alert("verdadeiro");

}else{

alert("falso");

}

Resultado é verdadeiro.

Operador ! Negação

O operador de negação faz com que a expressão tenha seu conteúdo ao contrario, se a expressão for retornar verdadeiro ela transforma para falso. segue exemplo simples.

if (!( 'Casa' !== 'CASA') && 10 == 10 ){

alert("verdadeiro");

}else{

alert("falso");

}

O Resultado é Falso pois a expressão a esquerda retorna verdadeiro mas ela recebeu uma negação. dessa forma será falso, como foi utilizado o operador E será retornado falso.

Exercício de Fixação.

Nesse exercício iremos atualizar o script do ultimo exercício contemplando o que foi visto,

Desafio é atualizar o script para receber faltas do aluno, onde se o aluno passar de 20 faltas esta reprovado, usar os operadores lógicos para verificar falta e media para a aprovação, detalhe a quantidade faltas deve ser mostrada no browser. exemplo: (Aulo reprovado por falta: x faltas);

Terminamos esse post, no próximo post estarei estudando o Comando Switch, espero ter ajudado e até mais.

Pesquisar este blog

JStudioMesanino

Conhecendo JavaScript - Estrutura de Controle If /else

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Botões Bootstrap Exemplos.

Conhecendo JavaScript - Eventos

Conhecendo JavaScript - HTML DOM