Javascript do básico ao intermediário - if else

Gunnar CorreaGunnar Correa16/03/2016 às 12:10:41 - 8.422 acessos

Veja como usar as estruturas condicionais de estruturas e usa-las para validações.


Estruturas condicionais nos permitem validar diversos tipos de informações, ela funciona como uma pergunta que espera uma resposta e a partir dela executa uma operação. Para entendermos melhor sua funcionalidade, imagine uma determina aplicação que validade se um determinado usuário pode entrar em um evento, para que ele possa entrar sua idade deve ter ou ser maior que dezoito anos, caso seja menor o mesmo não poderá entrar.

Veja na imagem abaixo como isto ficaria em uma aplicação real.

Estrutura Condicional if e else no Javascript aulas 

Toda condição tem duas alternativas, podendo ser verdadeiras ou falsas, assim como podemos verificar se algo é falso ao invés de verdadeiro invertendo as ordens. Para ficar mais claro, veja as duas condições e sintaxe (forma de como se usa) do IF e ELSE abaixo, neste exemplo verificamos a idade do usuário.

Código 01:

<script>
	var idade = 17;
			
	//Exemplo 1
	if(idade >= 18){
		alert("Permitido");
	}else{
		alert("Negado");
	}
			
	//Exemplo 2
	if(idade < 18){
		alert("Negado");
	}else{
		alert("Permitido");
	}	
</script>

Se a condição do IF não for satisfeita o ELSE é chamado, mas você pode simplesmente ignorar o else, como mostrado no exemplo abaixo.

Código 02:

<script>
			var idade = 17;
			
			//Exemplo 1
			if(idade >= 18){
				alert("Permitido");
			}else
			//Exemplo 2
			if(idade < 18){
				alert("Negado");
			}
</script>

Dentro do IF ficam nossas condições, podendo haver quantas forem necessárias, ou seja, ao invés de perguntar apenas a idade, podemos perguntar se o usuário pagou a entrada, então ficaria como mostrado abaixo.

Código 03:

<script>
			var idade = 18;
			var pagamento = true;
			
			if(idade >= 18 && pagamento == true){
				alert("Permitido");
			}else{
				alert("Negado");
			}
</script>

Estruturas de Comparações

Assim como em todas as linguagens o IF contém as estruturas de comparações, assim como usamos algumas nos exemplos acima, elas servem para informar qual tipo de verificação que estamos tentando reproduzir. Veja na tabela abaixo os tipos de comparações.

Expressão

Resultado

Expressão

Menor.

If (idade < 18){true}

Maior.

If (idade < 18){true}

<=

Menor ou igual.

If (idade <=< 18){true}

>=

Maior ou igual.

If (idade >= 18){true}

!=

Diferente.

If (idade != 18){true}

==

Igual.

If (idade == 18){true}

 

Podemos fazer diversas comparações com as condições acima, usando qualquer valor em qualquer situação. Até agora comparamos apenas números, mas podemos comparar string (texto) e outros resultados. Veja o exemplo abaixo.

Código 04:

<script>
			var sexo = 'M';
			
			if((13 * 7) > 50){
				alert("Maior que 50");
			}else{
				alert("Menor que 50");
			}
			
			if(sexo == 'M'){
				alert("Homem");
			}else{
				alert("Mulher");
			}
</script>

Operadores lógicos

Acima usamos mais de uma condição dentro do IF para verificar a total integridade da nossa regra de negócio, assim como mencionado, podemos usar quantas condições forem necessárias. Podemos usar três tidos de operadores lógicos, como mostra a tabela abaixo.

Expressão

Resultado

Expressão

&&

E, As duas condições devem ser satisfeitas.

If (idade < 18 && sexo == ‘F’)

||

Ou, se uma não passar tenta a outra.

If (idade > 18 || sexo == ‘f’)

!

Não, nega a condição. Verdadeiro vira falso.

If (!sexo) {true}

Código 05:

<script>
			var idade  = 18;
			var sexo = 'M';
			var pagamento = true;

			if(idade < 18 && sexo == 'F'){
				alert("Permitido");
			}else{
				alert("Negado");
			}
			
			if(idade < 18 || sexo == 'F'){
				alert("Permitido");
			}else{
				alert("Negado");
			}
			
			if(!sexo){
				alert("Pago");
			}else{
				alert("Pendente");
			}
</script>

Podemos usar as entradas do usuário, retorno de um JSON, AJAX entre outros métodos de retorno dentro do IF, veja abaixo um exemplo que executa a operação de acordo com a condição do usuário.

Código 06:

		<script>
			var idade = prompt("Qual sua idade? ");

			if(idade >= 18){
				alert("Permitido");
			}else{
				alert("Negado");
			}
</script>

Basicamente a utilização do IF é esta, não há dificuldade muito menos complicação. Recomendo a leitura dos links abaixo para fixar melhor o conteúdo apresentado aqui.

Até a próxima!



if else operadores javascript programação aulas tutoriais desenvolvimento web navegador estrutura comparação estrutura condição.

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários