Código do Vídeo:
// Se (comparação ou booelano for verdadeiro){
//código a executar
//}
// Senão Se (comparação ou booelano for verdadeiro){
//código a executar
//}
//Senão{
//código a executar
//}
if(num1 == 2){
console.log("num1: 2");
}
else if(num1 == 1){
console.log("num1: 1");
}else{
console.log("num1:" + num1)
}
Como funciona o IF?
if(num1 == 2){
console.log("num1: 2");
}
O “if” (se em inglês) é uma estrutura simples de entender. Se a condição entre parênteses após a palavra if retornar true (verdadeiro) então o código dentro das chaves será executado. Do contrário ele pulará esse trecho de código e seguirá adiante.
const num1 = 1;
if(num1 == 2){
console.log("só execturá se num for igual a 2");
}
console.log("sempe executará");
if(num1 == 1){
console.log("só execturá se num for igual a 1");
}
console.log("sempe executará");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="numero">12</p>
<script>
let numero = document.getElementById("numero").innerText;
if(numero % 2 == 0){
alert("O número é par");
}
</script>
</body>
</html>
Lembrando que você pode fazer outras comparações que retornem true ou false dentro do IF. Para mais detalhes, reveja o tutorial de booleanos
const num1 = 1;
const str1 = "olá"
const bool1 = true
if(num1 == 2){
// se num1 for igual a 2
}
if(str1 == "olá"){
// se str1 for igual a 'olá'
}
if(bool1 == true){
// se bool1 for igual a true
}
if(bool1){
// mesmo que o anterior, apenas testa se a variavel retorna true
}
Podemos também fazer testes mais complexos ou vários em um único IF.
let dinheiroConta = 500;
let salario = 1200;
let custoViagem = 800;
let carroEstaNoConserto = true;
// Se seu dinheito em conta mais seu salario forem maiores que suas despesas de viagem
if(dinheiroConta + salario > custoViagem){
console.log("Você tem dinheiro suficiente para pagar a viagem");
}
// Se seu dinheito em conta mais seu salario forem maiores que suas despesas de viagem
// E seu carro NÃO está no conserto
if((dinheiroConta + salario > custoViagem) && !carroEstaNoConserto){
console.log("Por algum motivo você não poderá viajar");
}
Else e Else If
Caso você queira testar mais de uma condição ou fazer um desvio quando apenas duas lógicas diferentes se aplicam, pode fazêlo utilizando os comandos complementares else if (senão se) e else (senão). Eles são muito úteis em diversos casos, como por exemplo:
let numero = 13;
// informar algo se uma condição for verdadeira e outra coisa se ela for falsa.
// se 'numero' dividido por 2 não sobrar(restar),
if(numero % 2 == 0){
//então dizer que ele é par
console.log("Este número é par");
}
// senão,
else{
// informar que o número é impar
console.log("Este número é impar");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="nome">Alexandre</p>
<p id="idade">18</p>
<hr/>
<p id="ola"></p>
<p id="acesso"></p>
<script>
let nome = document.getElementById("nome").innerText;
let idade = document.getElementById("idade").innerText;
document.getElementById("ola").innerText = "Olá " + nome;
if(idade >= 18){
document.getElementById("acesso").innerText = "Seja bem-vindo!";
}else{
document.getElementById("acesso").innerText = "Você não tem a idade mínima para acessar esta tela";
}
</script>
</body>
</html>
Nos 2 exemplos acima, precisamos mostrar mensagens diferentes para casos diferentes, e esta é exatamente a utilização do IF/ELSE na sua forma mais simples.
Agora, caso você tenha mais de 2 opções, uma alternativa é utilizar o formato IF/ELSE IF/ELSE, que basicamente se resume a ideia a lógica “se condição”, senão se “outra condição”, senão. Veja o exemplo abaixo:
let nome = "Pedro";
let cargo;
// se o nome for igual a Paulo
if (nome == "Paulo"){
cargo = "Engenheiro";
// Senão, se nome for igual a Pedro
}else if(nome == "Pedro"){
cargo = "Médico";
// Senão, qualquer outro nome
}else{
cargo = "Outro"
}
console.log(nome);
É importante observar que você pode ter quantos ELSE IFs quiser, mas iremos falar do switch que torna mais legível este tipo de estrutura.
let nome = "Pedro";
let cargo;
if (nome == "Paulo"){
cargo = "Engenheiro";
}else if(nome == "Pedro"){
cargo = "Médico";
}else if(nome == "Maria"){
cargo = "Professora";
}else if(nome == "José"){
cargo = "Corretor";
}else{
cargo = "Outro"
}
console.log(nome);
Exercícios
- Copie e complete o código abaixo para fazer os seguintes testes:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p id="num"></p> <script> //Não mexa neste trecho de código document.getElementById("num").innerText = Math.floor(Math.random() * 1000); /////////////// // Seu código aqui </script> </body> </html>- Informe se o número é par ou ímpar
- Informe se o número é quantos digitos tem o número (4 = 1, 50 = 2, 135 = 3)
- Se for divisível por 3, informe “é divisível por 3”. Se for divisível por 4, informe “é divisível por 4”. Se for divisível por 3 e 4, informe “É divisível tanto por 3 quanto por 4”.
- Com base no código abaixo:
let valorNumerico = 1; let valorNumTexto = "2"; let texto = "bom dia"; let lista = [true, false, true]; if(valorNumerico > 1){ if(texto == "bom dia"){ console.log(1); } else if(valorNumTexto == 2){ console.log(2); }else{ if(valorNumerico == 1 && lista[0]){ if(lista[1] || lista[2]){ console.log(3); } } } }else{ if(valorNumTexto === 2){ console.log(4); } else if(texto == "bom dia"){ if(valorNumerico == 1 && lista[0]){ if(lista[1] || lista[2]){ console.log(5); } else{ console.log(6); } }else{ console.log(7); } } }Sem executá-lo no navegador, você consegue dizer qual número aparecerá no console?