Você sabe como usar condicionais em JavaScript? Vou te ensinar como construir a estrutura do If e ainda vamos construir um projeto do ZERO!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Fala Impressionadores! Na aula de hoje eu quero te mostrar como usar condicionais em Javascript!
Claro que antes vou te explicar o que são condicionais em Javascript para que você entenda como utilizá-las e como elas são importantes na construção de um código.
As estruturas condicionais em Javascript que vamos ver hoje são o IF e o ELSE.
São estruturas muito conhecidas e muito utilizadas em códigos, então você vai utilizá-los sempre e por isso é importante saber como usar corretamente.
O IF significa SE, ou seja, podemos verificar se uma condição está sendo satisfeita, por exemplo, se a hora atual é menor do que 12, faça isso.
A ideia é testar uma condição para que uma ação seja executada, só que no caso em que a condição é falsa, o programa vai ignorar o que está dentro dessa estrutura.
É aí que entra o ELSE, que traduzindo, seria “caso contrário”.
Então se fizermos o mesmo teste de hora atual ser menor do que 12 e após a verificação não existir uma ação, nós podemos ter um ELSE, pois se a hora não for menor do que 12, ela só poderá ser maior do que 12, então, else = caso contrário vamos executar outro código.
E aí, quer aprender mais sobre a estrutura condicional if e como ela vai te ajudar muito nos seus códigos?
Então vem comigo que eu te mostro! – Como Usar Condicionais em JavaScript
O primeiro passo é criar uma pasta e abrir com o VS Code, clique no link caso você ainda não tenha instalado o VS Code no seu computador, após isso clique em novo arquivo e nomeie como script.js
Vamos criar um código que retorne a data atual para nós:
const data = new Date();
console.log(data);Agora, podemos rodar o código usando o atalho F5 ou clicando em RUN -> Start Debugging -> Node.js.
Observe que no terminal vamos gerar a data e hora atual:
Fiz esta verificação no terminal apenas para você ver o resultado deste código.
Agora podemos programar para pegar apenas partes desse resultado, podemos pegar apenas o dia, por exemplo
console.log(data.getDate());Utilize o atalho Alt + Shift + seta para baixo para conseguir duplicar as linha de código e não precisar reescrever quando a linha é muito parecida.
const data = new Date();
console.log(data.getDate());
console.log(data.getHours());
console.log(data.getMinutes());
Resultado
13
11
49O resultado corresponde ao dia atual, hora atual e minutos atuais, podemos apagar esse código que fiz apenas para que você entenda qual a ideia que vamos utilizar e fazer um código que vai informar as horas atuais apenas, este resultado será armazenado em uma variável chamada -> horaDoDia
const data = new Date();
const horaDoDia = data.getHours();
Estrutura do IF
const data = new Date();
const horaDoDia = data.getHours();
if(horaDoDia >= 6 && horaDoDia <= 12){
console.log("Bom dia!!");
}No código acima estamos fazendo o site nos dar Bom dia contanto que a hora atual esteja entre 6 da manhã e meio-dia. Observe que se rodar o código durante este período o resultado será “Bom dia” se não estiver no horário então não vamos ter resposta.
Esta é a função do IF, estabelecer uma condição para que uma ação só aconteça se a condição for satisfeita, é muito difícil programar sem entender essa estrutura por isso vamos dar mais exemplos para ficar claro como funciona.
Observe que neste caso se a hora atual for de manhã então o código retorna o resultado, se estiver a tarde não há resposta, como fazer para que o código digite boa tarde se for a tarde?
Você poderia duplicar a estrutura mudando a condição para que a partir do meio-dia a outra estrutura passe a funcionar, mas isso não daria certo durante o tempo inteiro, porque da forma que o código está ao meio-dia os dois blocos vão satisfazer a condição e retornar verdadeiro, então acabaríamos gerando neste horário duas respostas.
const data = new Date();
const horaDoDia = data.getHours();
if(horaDoDia >= 6 && horaDoDia <= 12){
console.log("Bom dia!!");
}
if(horaDoDia >= 12 && horaDoDia <= 18){
console.log("Boa tarde!!");
}Temos que corrigir os sinais de menor ou igual e deixar apenas menor quando temos as transições de horários, também vamos precisar criar mais dois blocos, um para o horário da noite e outro para a madrugada:
const data = new Date();
const horaDoDia = data.getHours();
if(horaDoDia >= 6 && horaDoDia < 12){
console.log("Bom dia!!");
}
if(horaDoDia >= 12 && horaDoDia < 18){
console.log("Boa tarde!!");
}
if(horaDoDia >= 18 && horaDoDia < 24){
console.log("Boa Noite!!");
}
if(horaDoDia >= 0 && horaDoDia < 6){
console.log("É madrugada. Vá dormir!!");
}Observe que o código agora reage a uma condição que é a hora do dia de maneira correta, essa é uma estrutura condicional. Outra forma que é muito utilizada essa estrutura é usando o Else if e Else, veja a diferença:
const data = new Date();
const horaDoDia = data.getHours();
if(horaDoDia >= 6 && horaDoDia < 12){
console.log("Bom dia!!");
}
else if(horaDoDia >= 12 && horaDoDia < 18){
console.log("Boa tarde!!");
}
else if(horaDoDia >= 18 && horaDoDia < 24){
console.log("Boa Noite!!");
}
else {
console.log("É madrugada. Vá dormir!!");
}Neste modelo usamos o else if para a segunda e terceira condição, na última condição usamos apenas o else porque não é necessário outro IF, já que esta é a única alternativa restante.
Agora que você já entendeu como funciona o IF, vamos fazer uma aplicação usando o HTML.
No seu VS Code abra mais um arquivo e nomeie como index.html.
Escreva o ponto de exclamação e dê enter, assim a estrutura básica do código já aparece.
Observe que temos uma tag para título na estrutura, renomeie o título do site, neste caso vou chamar de Página do bom dia.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página do bom dia</title>
</head>
<body>
</body>
</html>Mais abaixo temos a tag body que corresponde ao corpo da página, vamos colocar nela outra tag chamada h1, esta tag é própria para textos, vamos colocar a tag e criar um id para ela.
Se você não estiver familiarizado com essas tags, não se preocupe, temos um Curso Básico de HTML e CSS aqui no blogue que te ensina no detalhe como construir do ZERO uma landing page e todos os conceitos básicos!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página do bom dia</title>
</head>
<body>
<h1 id="tag-bom-dia">Bom dia</h1>
</body>
</html>Com o botão direito do mouse, clique sobre o arquivo HTML e escolha a opção -> Open with Live Server
Vamos visualizar como está a nossa página
Vamos estilizar esta página usando o CSS, para isso vamos criar mais um arquivo no VS Code, vamos chamar esse arquivo de Style.css.
Coloque no HTML dois links, eles vão fazer com que o HTML reconheça as alterações que vamos fazer no CSS e no script.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página do bom dia</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 id="tag-bom-dia">Bom dia</h1>
<script src="./SCRIPT.JS"></script>
</body>
</html>CSS
No CSS vamos estilizar a página aumentando o tamanho do título e fazendo diferentes estilos para cada faze do dia.
Nosso objetivo é associarmos essas classes ao arquivo JavaScript e fazer com que a página mude de cor em cada período do dia, além disso, ela também irá exibir a mensagem correspondente ao horário do dia.
body {
height: 100dvh;
}
.manha {
background-color: rgb(0, 191, 255);
color: black;
}
.tarde {
background-color: rgb(254, 141, 100);
color: black;
}
.noite {
background-color: rgb(15, 5, 60);
color: white;
}
.madrugada {
background-color: black;
color: white;
}Já definimos o estilo de cada período, agora vamos programar para que a estrutura condicional mostre esses estilos no site durante os períodos do dia.
HTML
No arquivo Script.js vamos fazer algumas alterações na estrutura IF que fizemos, primeiro vamos criar uma variável chamada mensagem, depois vamos substituir o console por essa variável, assim as mensagens ficam armazenadas na variável.
Script.js
const data = new Date();
const horaDoDia = data.getHours();
let mensagem = " ";
if(horaDoDia >= 6 && horaDoDia < 12){
mensagem = "Bom dia!!";
}
else if(horaDoDia >= 12 && horaDoDia < 18){
mensagem = "Boa tarde!!";
}
else if(horaDoDia >= 18 && horaDoDia < 24){
mensagem = "Boa Noite!!";
}
else {
mensagem = "É madrugada. Vá dormir!!";
}Feito isso vamos ter que fazer com que o arquivo Script.js enxergue o arquivo HTML, assim conseguimos manipular o body, o primeiro passo é dar ao body um ID:
<body id="body">
<h1 id="tag-bom-dia">Bom dia</h1>
<script src="./SCRIPT.JS"></script>
</body>
</html>Agora vamos recuperar o elemento Body usando o seu ID.
Após isso vamos criar mais uma variável que vai representar as classes que criamos no CSS.
Vamos também acrescentar em cada if a classe de estilo criada do CSS, vamos atribuir no nome dado no CSS a variável que criamos. Veja abaixo:
Script.js
const data = new Date();
const horaDoDia = data.getHours();
const body = document.getElementById("body");
let mensagem = " ";
let classeCSS = " ";
if(horaDoDia >= 6 && horaDoDia < 12){
mensagem = "Bom dia!!";
classeCSS = "manha";
}
else if(horaDoDia >= 12 && horaDoDia < 18){
mensagem = "Boa tarde!!";
classeCSS = "tarde";
}
else if(horaDoDia >= 18 && horaDoDia < 24){
mensagem = "Boa Noite!!";
classeCSS = "noite";
}
else {
mensagem = "É madrugada. Vá dormir!!";
classeCSS = "madrugada";
}
body.classList.add(classeCSS);Agora vamos tratar a tag H1, nela temos a mensagem de bom dia na página HTML e ainda não está dinâmica, temos que atribuir inteligência para ela, vamos criar mais uma constante no Script.js para corrigir isso.
const data = new Date();
const horaDoDia = data.getHours();
const body = document.getElementById("body");
const h1 = document.getElementById('tag-bom-dia');
let mensagem = " ";
let classeCSS = " ";
if(horaDoDia >= 6 && horaDoDia < 12){
mensagem = "Bom dia!!";
classeCSS = "manha";
}
else if(horaDoDia >= 12 && horaDoDia < 18){
mensagem = "Boa tarde!!";
classeCSS = "tarde";
}
else if(horaDoDia >= 18 && horaDoDia < 24){
mensagem = "Boa Noite!!";
classeCSS = "noite";
}
else {
mensagem = "É madrugada. Vá dormir!!";
classeCSS = "madrugada";
}
body.classList.add(classeCSS);
h1.innerText = mensagem;Após atribuir o conteúdo da variável mensagem a tag h1 o programa já consegue identificar qual estilo mostrar em cada período do dia, então, conseguimos construir uma página dinâmica baseada em uma estrutura condicional.
Terminamos nossa página – Como Usar Condicionais em JavaScript?
Note que a cada período sua página muda de cor e de mensagem, o que não seria possível sem uma estrutura que estabelecesse estas condições! Gostou do projeto?
Nesta aula criei este pequeno projeto de uma página que modifica a cor de fundo e as mensagens conforme os períodos de manhã, tarde, noite e madrugada chegam.
Meu objetivo com isso foi ensinar de forma prática como funciona a estrutura IF, como podemos estabelecer as condições e o que podemos fazer com nossa página a partir dessa estrutura bem-feita.
Espero que tenha ficado claro a importância e uso do IF.
Eu fico por aqui. Até a próxima! Um abraço,
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador