Instruções Condicionais e laços de Repetições Com JavaScript
Como em qualquer outra linguagem de programação, no JavaScript também há as instruções condicionais e de repetições.
Se você já estudou um pouco sobre qualquer linguagem de programação, você já deve ter visto as instruções condicionais e de repetições.
Em suma, as instruções condicionais funciona da seguinte maneira, em determinado momento do código, será necessário fazer validação de uma certa informação, se essa informação estiver de acordo com um certo valor ou variável, será apresentado uma mensagem, mas, caso não esteja de acordo será apresentado outra mensagem.
Um exemplo seria o seguinte, vamos supor que há um formulário que tem um campo que estar solicitando um número que esteja entre 0 e 100.
Quando o usuário clicar em enviar, a instrução condicional vai verificar se o número estar entre o intervalo, se estiver, vai apresentar a mensagem “Número válido”.
Mas se não estiver, vai apresentar a mensagem “Número inválido”.
Já as instruções de repetições vão repetir um bloco de código até que uma condição seja falsa, se essa condição continuar retornando verdadeiro, o bloco de código vai continuar a se repetir.
Um exemplo com laços de repetições seria uma lista de produtos, através de uma estrutura de repetições, os produtos seriam listados um a baixo do outro com a mesma aparência ou não.
Sem laços de repetição seria necessário colocar os produtos um a baixo do outro de forma manual, mas, se essa lista tiver 100 produtos, vai ficar difícil fazer a listagem de forma manual, com laços de repetição você conseguirá fazer a listagem dos 100 produtos sem dificuldade e sem perder tempo.
Com o JavaScript existe algumas maneiras de você usar as instruções condicionais e de laços de repetições, portanto, continue lendo este artigo, pois você vai ver todas as opções disponíveis.
Aprenda programar e desenvolver sistemas profissionaisEstrutura base
Para colocar os exemplos em prática, crie a seguinte estrutura, o nome da pasta pode ser qualquer nome que você quiser.
- nova-pasta/index.html
- nova-pasta/main.js
No index.html, insira o seguinte código.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instruções Condicionais e Laços de Repetições com JavaScript</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>Instruções condicionais
A partir deste momento vai ser mostrado como você pode fazer estruturas de decisão com a linguagem de programação JavaScript, escolha um editor de código e um navegador de sua preferência e coloque os exemplos em prática, e também tente criar outras situações para testar as instruções condicionais.
As instruções condicionais são usadas quando você quer que o código se comporte com base na ação do usuário, caso o usuário faça uma ação qualquer, o código deve agir com base nessa ação.
As instruções condicionais são IF, ELSE, ELSE IF, SWITCH e também há o operador ternário.
Instrução IF
Vamos começar com IF, essa instrução vai verificar se uma condição é verdadeira, caso seja, será executado o código que estar dentro do bloco código do IF.
Exemplo, arquivo main.js.
window.onload = function() {
let number = 10;
if (number==10) {
document.write("O númerio estar certo");
}
}Resultado.
Se a variável number não fosse igual 10, não seria apresentado nenhuma mensagem.
Instrução ELSE
A instrução ELSE trabalha juntamente com a instrução IF, o bloco de código da instrução IF sempre vai ser executado quando uma condição for verdadeira.
Mas, se essa condição for falsa? Neste casos quando a condição é falsa, e o bloco de código do IF não é executado, o bloco de código que é executado é da instrução ELSE.
Exemplo, arquivo main.js.
window.onload = function() {
let number = 20;
if (number==10) {
document.write("O número estar certo");
} else {
document.write("O número não estar certo");
}
}Resultado.
Instrução ELSE IF
A instrução ELSE IF é semelhante à instrução IF, caso a instrução IF retorne falso, com a Instrução ELSE IF vai ser feito uma nova validação em outra condição que pode retornar verdadeiro ou falso.
A partir deste momento será construído um exemplo um pouco mais avançado, é recomendado que você tenha um conhecimento base em eventos no JavaScript.
Exemplo, arquivo main.js.
window.onload = function () {
document.getElementById('form').addEventListener("submit", function (e) {
e.preventDefault();
let number = document.getElementById("number").value;
let mensagem = document.getElementById("mensagem");
number = parseInt(number);
if (number < 100) {
mensagem.innerHTML = "O número é menor que 100";
} else if (number > 100) {
mensagem.innerHTML = "O número é maior que 100";
} else {
mensagem.innerHTML = "Você não digitou um número";
}
});
}
Agora faça a atualização do index.html.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instruções Condicionais e Laços de Repetições com JavaScript</title>
</head>
<body>
<form id="form">
<input type="text" id="number">
<button type="submit">Enviar</button>
<br>
<p id="mensagem"></p>
</form>
<script src="main.js"></script>
</body>
</html>Resultado.
Instrução SWITCH
A instrução SWITCH vai avaliar uma informação, vai comparar com cada caso, se o caso corresponder, o bloco de código desse caso vai ser executado.
Se nenhum dos casos não for correspondente com a informação validada, vai ser executado o bloco de código default.
Exemplo, arquivo main.js.
window.onload = function () {
document.getElementById("selected").addEventListener("change", function () {
// document.getElementById("box").style.backgroundColor = document.getElementById("selected").value;
let informacao = document.getElementById("selected").value;
switch (informacao) {
case "Azul":
document.getElementById("box").style.backgroundColor = "blue";
break;
case "Vermelho":
document.getElementById("box").style.backgroundColor = "red";
break;
case "Verde":
document.getElementById("box").style.backgroundColor = "green";
break;
case "Amarelo":
document.getElementById("box").style.backgroundColor = "yellow";
break;
default:
document.getElementById("box").style.backgroundColor = "black";
}
});
}
Agora faça a atualização do index.html.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instruções Condicionais e Laços de Repetições com JavaScript</title>
</head>
<body>
<form>
<select id="selected">
<option></option>
<option value="Azul">Azul</option>
<option value="Vermelho">Vermelho</option>
<option value="Verde">Verde</option>
<option value="Amarelo">Amarelo</option>
</select>
<div id="box" style="width:150px;height: 150px; border:2px solid #000"></div>
</form>
<script src="main.js"></script>
</body>
</html>Resultado.
Operador ternário
O operador ternário é uma instrução muito simples, com esse operado você poderá, resumir dois blocos de código em uma única linha, esses blocos são IF e ELSE.
Para você montar uma estrutura do operador ternário, você deve usar a seguinte estrutura.
Cond ? true : false
Se a condição (cond) retornar true, vai se executado o código que estar logo após o ponto de interrogação, mas, se essa mesma condição (cond) retornar false, vai ser executado o código que estar logo após os dois pontos.
Exemplo, arquivo main.js.
window.onload = function () {
let text = "Hello";
text=="Hello" ? document.write("hello") : document.write("False");
}
Resultado.
Aprenda programar e desenvolver sistemas profissionais
Laços de Repetições
Logo mais a baixo você vai começar ver quais são as opções que você poderá usar para criar laços de repetições, as opções são WHILE, DO / WHILE e FOR.
De maneira resumida, os laços de repetições são usados para listar os itens que estão em uma lista, existem várias situações onde será necessário usar uma estrutura de repetição.
Instrução WHILE
O bloco de código da instrução WHILE(enquanto) vai ser executado enquanto uma condição retornar verdadeiro, logo a baixo você vai encontrar a estrutura da instrução WHILE.
while(cond) {
//code
}
Exemplo, arquivo main.js.
window.onload = function () {
let content = "";
let i = 1;
while (i < 11) {
content += "<p>Linha "+i+"</p>";
i++
}
document.write(content);
}
Resultado.
No momento em que a variável for maior ou igual a 11, o ciclo de repetições vai parar, e logo depois vai ser executado as instruções que estão depois do WHILE.
Instrução DO / WHILE
A instrução DO / WHILE vai executar o bloco de código uma vez antes de fazer a validação da condição, se a condição retornar verdadeiro, o ciclo vai ser executado novamente, mas se retornar falso, o ciclo não vai se repetir novamente.
Estrutura da instrução DO / WHILE
do {
// code
}while(cond)
Exemplo, arquivo main.js.
window.onload = function () {
let content = "";
let i = 1;
do {
content+="<p>Linha "+i+"<p>";
}while(i==2);
document.write(content);
}Resultado.
Como você pode ver, só foi mostrado: linha 1, pois, foi executado o bloco de código, e depois foi feito a validação da condição, a condição retornou falso, por esse motivo não foi impresso mais linhas.
Instrução FOR
A instrução FOR agir de forma semelhante WHILE, a diferença é que será definido a variável, a condição e o incremento ou decremento na mesma linha.
Estrutura da instrução FOR.
for(variável, condição, ação){
//code
}
Resultado.
Como você pode ver, o resultado a instrução FOR foi o mesmo resultado da instrução WHILE.
Aprenda programar e desenvolver sistemas profissionaisConclusão
Foi mostrado nesse artigo as instruções condicionais e de laços de repetições, use a instrução que mais se adequa aos projetos.
Compartilhe
Artigos Relacionados
Sobre o Autor
Desvende os segredos do mundo tecnológico em nosso blog, aprenda sobre desenvolvimento web e outras tecnologias de forma descomplicada e divertida, vem com a gente desbravar esse universo digital! 💻🚀