Com as estruturas de programação apresentadas até aqui, você pode criar longas sequências de instruções, lendo valores e produzindo resultados, mas a sequência será sempre executada na mesma ordem, do início ao fim. Esta é a estrutura mais simples de um programa, mas tem muitas limitações. No nosso dia a dia, sempre tomamos decisões, e agimos de forma diferente de acordo com alguma condição. Como um exemplo muito simplificado, você poderia pensar: "Neste Sábado, se fizer sol, vou à praia. Senão, vou estudar Javascript." Em Inglês, as palavras 'se' e 'senão' têm por tradução 'if' e 'else', respectivamente. Em Javascript, estas duas palavras são comandos da linguagem. Nenhuma variável pode ser declarada com esses nomes especiais. Diz-se que são palavras reservadas. Com os comandos if e else, podemos criar uma estrutura de execução condicional de comandos, na forma:
if (<condição>) {
<bloco de comandos 1>
}
else {
<bloco de comandos 2>
}if (<condição1>) {
<bloco de comandos 1>
}
else if (<condição2>) {
<bloco de comandos 2>
}
else if (<condição3>) {
<bloco de comandos 3>
}
else {
<bloco de comandos 4>
}if (<condição1>) {
<bloco de comandos 1>
}
O primeiro teste cuja condição for verdadeira causará a execução do bloco de comandos correspondente. A execução continua depois de todas as condições. Se nenhuma das condições for verdadeira, o bloco correspondente ao else será executado (se existir).
Vejamos um exemplo, que explicaremos a seguir:
Expressões Lógicas
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Exemplo Javascript - Condições if/else</title>
</head>
<body>
<p>Bom dia!</p>
<p>
<label for="tx-largura">Qual é sua idade? </label>
<input type="text" name="idade" id="tx-idade" />
</p>
<p><button type="button" onclick="testarIdade()">
Clique aqui para uma mensagem!</button>
</p>
<p id="resultado"> </p>
</body>
<script type="text/javascript">
var linhasMensagem = [];
/* Utilitário para imprimir uma mensagem na tela.
*/
function mostrarMensagem(msg) {
linhasMensagem = [];
linhasMensagem.push(msg.toString());
document.getElementById('resultado').innerHTML =
linhasMensagem.join('<br />');
}
</script>
<script type="text/javascript">
// Escondendo detalhes do HTML
const txtIdade = document.getElementById('tx-idade');
const minhaIdade = 25;
function testarIdade() {
let suaIdade = parseInt(txtIdade.value);
let mensagem = "";
if (suaIdade > minhaIdade) {
mostrarMensagem("Eu sou mais novo que você. " +
"A diferença é de " +
(suaIdade - minhaIdade).toString() + " anos.");
} else {
mostrarMensagem("Eu sou mais velho que você.");
}
}
</script>
</html>
O programa começa com uma atribuição, criando a variável minhaIdade com o valor 25 (inalterável, por ser declarada como const). Dentro da função, uma outra variável é criada, contendo o texto da resposta do usuário convertido para um número inteiro. Dessa vez, usamos um outro tipo de declaração, iniciada com let. Com isso, a variável só vale dentro do bloco em que foi declarada. Uma outra variável é declarada, contendo uma mensagem vazia.
Aqui começa a novidade. Usamos o comando if. A condição é uma operação de comparação, como você aprendeu nas aulas de matemática. Vamos falar dessas operações mais adiante. Se o resultado da comparação for verdadeiro, o bloco de comandos que vem entre chaves é executado.
No exemplo, para continuar o programa usamos o a cláusula else, que determina que o bloco seguinte só será executado se a condição testada no if for falsa. Você pode encadear diversos blocos condicionais.
Veja abaixo como ficaria esta parte do programa:
if (suaIdade > minhaIdade) {
mostrarMensagem("Eu sou mais novo que você. " +
"A diferença é de " +
(suaIdade - minhaIdade).toString() + " anos.");
} else if (suaIdade == minhaIdade) {
mostrarMensagem("Temos a mesma idade.");
} else {
mostrarMensagem("Eu sou mais velho que você."); }
Na linha do else if, utilizamos uma comparação de igualdade. Note que são dois sinais de '=' seguidos, para distinguir esse operador da atribuição, em que se usa apenas um '='.
Se até aqui você não teve nenhum problema escrevendo seus programas, você tem sido muito atencioso com todos os detalhes dos programas que digitou. Quando você escreve um recado para alguém em Português, se esquecer uma vírgula, ou errar a grafia de alguma palavra, é muito provável que quem está lendo o recado nem vá perceber, ou que entenda o recado assim mesmo. Com Javascript, não ocorre o mesmo. Qualquer erro de digitação ou omissão de algum símbolo vai gerar um erro.
Pela simplicidade dos exemplos apresentados, onde o foco é apenas explorar o conceito em questão, você também pode ter encontrado erros de execução. Como exemplo, tente executar o programa do último exemplo respondendo à pergunta com o texto "trinta anos". O programa espera um texto com dígitos formando um número inteiro válido, e não sabe converter trinta em 30. No caso, o resultado será zero, e a mensagem obtida pode ser inesperada. Nos programas da vida real, é necessário validar cada informação recebida, de forma a evitar esses erros de execução.
Expressões Lógicas
Nos últimos dois exemplos, em que foi usado o comando if, você teve que utilizar para a condição que segue o comando um tipo de expressão diferente, que não gera resultado numérico. Essas expressões, ao serem avaliadas, tem por resultado um valor verdadeiro ou falso. Em Javascript, true ou false, respectivamente (mais duas palavras reservadas). Os operadores que utilizamos para formá-las são ditos operadores lógicos.
Veja os exemplos mais importantes na tabela abaixo:
Operador Exemplo Resultado
< x < 5 true se x é menor que 5, false nos outros casos
> y > 5.7 true se y é maior que 5.7, false nos outros casos
== x == 19 true se o valor de x é igual a 19, false nos outros casos
!= x != y true se o valor de x é diferente do valor de y.
Os operadores na tabela acima funcionam com valores numéricos. Os dois últimos também funcionam com texto (exemplo: nome == "João").
O resultado de uma operação lógica é mais um tipo de dado do Javascript (Boolean), e você pode criar variáveis com esses valores:
feriado = false
saldoPositivo = (saldo > 0)Para combinar resultados lógicos em expressões mais complexas, você vai precisar dos seguintes operadores (a e b podem ser variáveis, literaos ou outras expressões lógicas):
Operador Exemplo Nome Resultado
! ! (x < 5) Not (não) true se a expressão é falsa, e vice-versa
&& a && b And (e) true apenas quando tanto a como b valem true,
false nos outros casos
|| a || b Or (ou) false apenas quando tanto a como b valem false,
true nos outros casos
Veja um exemplo mais completo, assumindo que a variável feriado tem valor true ou false, e que saldo tem um valor numérico indicando seu saldo no banco:
if (feriado && (saldo > 50.00)) { mostrarMensagem("Vamos à praia!!!"); }
Note que destacamos as palavras reservadas no código, bem como os valores literais. Como explicamos antes, alguns editores de texto especializados em criar programas em Javascript vão ajudá-lo com esses destaques, tornando mais fácil identificar erros de digitação.
Há mais operadores lógicos, e detalhes sobre o que é considerado verdadeiro ou falso em Javascript. Para saber, consulte uma referência da linguagem, ou o texto principal que você está usando para aprender a linguagem.
Nenhum comentário:
Postar um comentário