Do zero a iniciante - Javascript condicionais

Condicionais servem para tomar uma decisão baseada em algum critério! Vamos analisar algumas frases.

1. "Se o investimento for superior a 10 mil reais o seu rendimento será de 12% ao ano"

2. "Se o investimento for superior a 10 mil reais o seu rendimento será de 12% ao ano, senão será de 6% ano ano"

3. "Se o investimento estiver entre 10 mil e 20 mil reais o seu rendimento será de 12% ao ano, se o investimento for superior a 20 mil reais o rendimento será de 13% ao ano senão será de 6% ao ano"

Toda vez que as palavras Se e Senão estiverem presentes estamos lhe dando com condicionais. Basicamente para decidir entre uma coisa ou outra nós analisamos qual condição nos enquadramos.

• A frase 1 pressupõe que apenas investimentos acima de 10 mil terão rendimentos, pois não há nada que mencione valores abaixo disso

• A frase 2 já diz que valores abaixo de 10 mil serão remunerados também isso devido ao "senão" presente na frase

• Na frase 3 há três condições de investimento uma entre 10 mil e 20 mil outra acima de 20 mil e outra qualquer valor abaixo de 10 mil

Hands On

A representação de condições, no código, é feita através de duas palavras reservadas if e else.

A sintaxe uma condicional é

if (condicao) {
 /* Bloco de código que será executado 
    se a condição for verdadeira(true) 
    */
}

Vamos ver como ficaria a representação das 3 fases acima no código.

Representação frase 1

// Cria uma variável chamada investimento e atribui o valor 11000 à ela
let investimento = 11000;

/*
Verifica se o valor dentro da variável "investimento"
é maior que 10k e caso seja
o código dentro do bloco if será executado
*/
if(investimento > 10000)
{
 console.log("Seu investimento irá render 12% ao ano.");
}

Representação frase 2

// Cria uma variável chamada investimento e atribui o valor 11000 à ela
let investimento = 11000;

/*
Verifica se o valor dentro da variável "investimento"
é maior que 10k e caso seja
o código dentro do bloco if será executado
*/
if(investimento > 10000)
{
 console.log("Seu investimento irá render 12% ao ano.");
}
/*
Caso o valor não se enquadre na comparação acima
ou seja, se o valor for menor que 10k
o código dentro do bloco else será executado
*/
else{
 console.log("Seu investimento irá render 6% ao ano.");
}

Representação frase 3

// Cria uma variável chamada investimento e atribui o valor 11000 à ela
let investimento = 11000;

/*
Verifica se o valor dentro da variável "investimento"
é maior que 10k e caso seja
o código dentro do bloco if será executado
*/
if(investimento > 10000 && investimento < 20000)
{
 console.log("Seu investimento irá render 12% ao ano.");
}
/*
Se o valor dentro da variável "investimento"
for maior que 20k o código dentro do
bloco else if será executado
*/
else if(investimento > 20000)
{
 console.log("Seu investimento irá render 13% ao ano.");
}
/*
Caso o valor não se enquadre na comparação acima
ou seja, se o valor for menor que 10k
o código dentro do bloco else será executado
*/
else
{
 console.log("Seu investimento irá render 6% ao ano.");
}

Como você deve ter percebido, através dos exemplos acima, o código dentro de um bloco if só é executado se a condição avaliada for verdadeira (true).

O código acima representa exatamente as 3 frases do começo, porém se você analisar bem verá que há algumas falhas de lógica. Você consegue dizer quais?

---

Operadores de comparação

Para fazer comparações precisamos conhecer alguns operadores de comparação. Nos exemplos acima nos usamos apenas dois operadores > (maior) e < (menor).

Vamos ver conhecer outros operadores de comparação e como eles funcionam, para isso considere a seguinte variável com seu respectivo valor

let investimento = 5;

Uma variável pode armazenar tipos de dados diferentes. Até o presento momento trabalhamos com int (números) e com strings (textos). As strings devem ficar sempre entre aspas duplas " ou aspas simples '

---

Operadores lógicos

Operadores lógicos são usados para determinar a lógica entre variáveis ou valores. Nos exemplos acima foi utilizado o operador lógico && que significa "e"

Considere às seguinte variáveis com seus respectivos valores.

let investimento = 6;
let outroInvestimento = 3;

---

Exercício

Usando HTML, Bootstrap e Javascript crie 3 formulários que representem as 3 frases do começo do post. Identifique a falha de lógica neles e se conseguir conserte-as.

O formulário deverá ter

• Um textbox, "Investimento", onde será informado o valor do investimento.

• Um button, "Investir", que quando clicado irá executar um código Javascript que irá retornar uma mensagem informando quanto será o rendimento do investimento

Dica: O post anterior pode lhe ajudar na construção do formulário

---

Deixe seus elogios, críticas e dúvidas nos comentários!