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

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.

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.

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.

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!