Lógica - Variáveis, Operadores e Condicional

Entender os princípios básicos de lógica de programação utilizando a linguagem JavaScript

JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas web — toda vez que uma página da web faz mais do que simplesmente mostrar a você informação estática — mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. — você pode apostar que o JavaScript provavelmente está envolvido. É a terceira camada do bolo das tecnologias padrões da web, duas das quais (HTML e CSS) nós falamos com muito mais detalhes em outras partes da Área de Aprendizado.

referência: MDN

A linguagem JavaScript também é utilizada para criar aplicações backend (que é o foco do nosso curso). O Node.js é um ambiente de execução Javascript server-side Você pode aprender um pouco mais sobre o que é o Node e como ele funciona aqui.

Dica 💡

HTML e CSS são linguagens de marcação. Linguagens de marcação são usadas para descrever e definir elementos dentro de um documento. JavaScript é uma linguagem de programação. Linguagens de programação são usadas para comunicar instruções a uma máquina. Elas podem ser usadas para controlar o comportamento de uma máquina e expressar algoritmos.

HipstersPontoTube

As ferramentas do desenvolvedor do Chrome são um conjunto de ferramentas de autoria e depuração internas do Google Chrome. Use as ferramentas do desenvolvedor para iterar, depurar e analisar seu site. Para saber mais, clique aqui.

Para abrir as ferramentas do desenvolvedor do Chrome, clique com o botão direito do mouse em qualquer elemento da página e selecione Inspect ou abra o menu do Chrome, no canto superior direito da janela de seu navegador, e selecione More Tools > Developer Tools. Como alternativa, você pode usar os seguintes atalhos:

Command (⌘) + Option + i (Mac)

Ctrl + Shift (⇧) + i (Windows/Linux).

Atalhos de teclado das ferramentas de desenvolvedor do Chrome

As ferramentas do desenvolvedor do Firefox permitem que você examine, edite e depure HTML, CSS e JavaScript no desktop e no celular. Além disso, você pode baixar uma versão do Firefox chamada Firefox Developer Edition, que é personalizada para desenvolvedores, apresentando os últimos recursos do Firefox e ferramentas do desenvolvedor experimentais. Para saber mais, clique aqui.

Para abrir as ferramentas do desenvolvedor do Firefox, clique com o botão direito do mouse em qualquer elemento da página e selecione Inspect Element ou abra o menu do Firefox, no canto superior direito da janela de seu navegador, e selecione Developer. Como alternativa, você pode usar os seguintes atalhos:

Command (⌘) + Option + i (Mac)

Ctrl + Shift (⇧) + i (Windows/Linux).

console.log é um comando usado para exibir conteúdo para o console do JavaScript. Rode o seguinte código no console:

console.log("Olá mundo!");

Parabéns! Você realizou a ação de log no console de depuração.

A mensagem que você registrou é "Olá mundo!". Olá mundo! é uma string (uma sequência de caracteres).

A resposta para essa pergunta é mais simples do que parece algoritmos são uma sequência de ações finitas que levam a determinado um resultado.

Ou seja, é uma forma automática de fazer as coisas, como, por exemplo, levantar da cama e se preparar para então começar um dia de trabalho ou seguir todos os dias o mesmo caminho e pegar o mesmo ônibus para chegar a um determinado ponto. É um passo a passo de ações. Assim funciona um algoritmo.

Algoritmo básico para assar um pão:

Dica 💡

Jogo para treinar algoritmos: Lighbot. Faça o robozinho andar e acender a luzinha. Você vai perceber que o computador faz apenas aquilo que você manda.😼

💡Ada Lovelace, a primeira programadora de todos os tempos

Definir um número em JavaScript é, na verdade, bem simples. O tipo de dado number inclui qualquer inteiro positivo ou negativo, bem como decimais. Inserir um número no console fará com que o mesmo valor seja retornado para você

Você também pode fazer cálculos com números de maneira bem fácil. Basicamente, digite uma expressão da mesma maneira que você a digitaria em uma calculadora.

3 + 2.1

Returns: 5.1

Insira as expressões (uma de cada) no console e determine o resultado de cada uma.

2 + 10 - 19 + 4 - 90 + 1

-20 + -19 - (-10) - (-1) + 24

(10/5) \* 4 - 20

4096 % 12

E quanto à comparação de números? Você consegue fazer isso? Mas é claro que consegue!

Assim como na matemática, você pode comparar dois números para verificar se um é maior, menor ou igual ao outro.

5 > 10

Returns: false

5 < 10

Returns: true

5 == 10

Returns: false

Comparações entre números irá resultar em verdadeiro ou falso. Veja na tabela abaixo outros exemplos de comparações que podemos fazer:

Quizz: https://app.sli.do/event/mh6zxmqx

String é uma sequência de caracteres usados para representar texto.

"Variáveis em Javascript são uma forma para se salvar dados";

"Reprograma";

"1 é um número ímpar";

Strings são uma coleção de caracteres agrupados entre aspas simples ou duplas. Você pode utilizar strings para representar dados como frases, nomes, endereços e mais.

Você sabia que é possível até mesmo somar strings? Em JavaScript, isso é chamado de concatenação. Concatenar duas strings é, na verdade, bem simples!

"Hello," + " New York City"

Retorna: "Hello, New York City"

Você verá outras maneiras de fazer concatenação e fazer até mais coisas com strings mais adiante neste curso. Mas, por agora, pratique utilizando o operador de adição +.

Quizz

é um tipo de dado lógico que pode ter apenas um de dois valores possíveis: verdadeiro ou falso.

false;
true;

representa um valor nulo ou "vazio".

var y = null;
console.log(y);

null

Uma variável é um container para um valor, como um número que podemos usar em uma operação de adição, ou uma sequência de texto que possamos usar como parte de uma frase. Mas uma coisa especial a respeito das variáveis é que seu conteúdo pode mudar.

Toda vez que precisarmos armezanar e recuperar dados utilizaremos variáveis.

No Javascript temos 3 maneiras de usar variáveis:

• var (no console vamos usar essa)
• let
• const

var numero = 1;
var texto = "Vamos reprogramar o mundo no domingo.";

Quando cria uma variável, você escreve o nome da variável utilizando camelCase (a primeira palavra em minúsculo e as palavras seguintes, em maiúsculo).

Também tente utilizar um nome de variável que, de maneira precisa, porém sucinta, descreve do que aquele dado se trata.

var totalAfterTax = 53.03; // utiliza camelCase se o nome da variável tiver múltimas palavras
var tip = 8; // utiliza letras minúsculas se o nome da variável tiver somente uma palavra
var firstName = "Pabllo";
var counter = 1;

Não utilizar camelCase no nome de suas variáveis não vai, necessariamente, danificar alguma coisa em JavaScript.

Porém, existem guias de estilo recomendados para todas as linguagens de programação que ajudam a manter o código consistente, limpo e fácil de ser lido.

Isso é especialmente importante quando trabalhamos com projetos maiores, que serão acessados por diversas pessoas desenvolvedoras.

Você pode ler mais sobre o Guia de Estilo JavaScript do Google aqui.

Um identificador JavaScript deve começar com:

• uma letra
• underline (_)
• cifrão ($)

Os caracteres subsequentes podem também ser

• números (0-9)
• letras incluem caracteres de "A" a "Z" (maiúsculos)
• caracteres de "a" a "z" (minúsculos)

Uma variável não pode ser uma palavra reservada, clique aqui para saber quais são

Exercício extra: https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis

O alert mostra uma mensagem na tela como um pop-up.

var mensagem = "Mensagem que vai aparecer no nosso alerta";
alert(mensagem);

O confirm é um pop-up que oferece uma lógica através de dois botões - o Ok (true) e o Cancel (false)`

var mensagem = "Aperte o botão ok";
confirm(mensagem);
// Se o usuário apertar Ok vai retornar true, se apertar Cancel vai retornar false

O prompt é um pop-up que nos oferece um input para coletarmos variáveis.

var pergunta = "Digite o seu nome";
prompt(pergunta);

// TODO - por que o prompt retorna string e como fizemos para tratar isso

Vamos fazer um programa que peça dois números e imprima no console a soma desses dois números.

Escreva um programa que receba um valor em metros e o exiba no console convertido em milímetros

O operador de atribuição básico é o igual (=), que atribui o valor do operando à direita ao operando à esquerda.

Exemplo:

var diaDaSemana = "domingo";

diaDaSemana = "segunda";

console.log(diaDaSemana); // segunda

Isto é, x = y atribui o valor de y a x.

const y = 7;
const x = y; // x é igual à 7

const y = 7;
const x = 3;

const resultado = y + x;
console.log(resultado); // 10

const y = 5;
const x = 2;
const resultado = y - x;
console.log(resultado); // 3

const y = 4;
const x = 5;
const resultado = y _ x
console.log(resultado) // 20

O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.

const y = 10;
const x = 2;
const resultado = y / x;
console.log(resultado); // 5

O operador módulo retorna o resto inteiro da divisão de um numero pelo outro.

const y = 10;
const x = 2;
const resultado = y % x;
console.log(resultado); // 0

Retorna verdadeiro caso os operandos sejam iguais.

3 == 3; // true
"3" == 3; // true
3 == "3"; // true

Retorna verdadeiro caso os operandos não sejam iguais.

5 != 4; // true
"4" != "3"; // true

Retorna verdadeiro caso os operandos sejam iguais e do mesmo tipo. Veja também Object.is e igualdade em JS.

3 === "3"; // false

Retorna verdadeiro caso os operandos não sejam iguais e/ou não sejam do mesmo tipo.

3 !== "3"; // true
3 !== "3"; // true

O double equals vai tentar nos ajudar na comparação, e ao notar que estamos tentando comparar tipos diferentes (string e number) ele vai tentar converter a string para number. No caso acima ele consegue e por isso temos o resultado true.

Entao por baixo dos panos o que aconteceu foi:

2 == Number("2") //true

Com o triple equals o JavaScript nunca tenta converter os valores. Por isso, o resultado false.

Sendo assim, recomenda-se usar o triple equals para evitar surpresas.

E a internet não perdoa as surpresas:

Dica

Saiba mais sobre coerção implícita do javascript

O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.

4 > 3 // true

O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.

4 >= 3 // true
3 >= 3 // true

O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.

3 < 4 // verdade

O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.

3 <= 4 // verdade

Se o primeiro valor for verdadeiro, ou puder ser considerado ou convertido pra verdadeiro retorna o segundo valor.

Se for feriado e estiver sol, vou à praia.

É feriado? Sim. Está sol? Sim. 🏖️

É feriado? Não. Está Sol? Sim. 🏠

Se o primeiro valor for falso, retorna falso.

true && "oi" // "oi"
"oi" && true // true
true && false // false

Se o primeiro valor for verdadeiro, ou puder ser considerado ou convertido pra verdadeiro retorna o primeiro valor.

Se for feriado ou estiver sol, vou à praia.

É feriado? Sim. Está sol? Não. 🏖️🌧️

É feriado? Não. Está sol? Sim. 🏖️👀

Se o primeiro valor for falso, retorna o segundo valor.

false || true // true
false || false // false
false || "oi" // "oi"
false || 0 // 0

Esse operador inverte o valor de uma expressão

Obs: Se um valor pode ser convertido para verdadeiro, este valor é chamado de truthy. Se um valor pode ser convertido para falso, este valor é chamado de falsy.

Exemplos de expressões que podem ser convertidas para falso são:

• null;
• NaN;
• 0;
• string vazia ("");
• undefined.

Todos os outros são considerados verdadeiros.

!true // false
!false // true
!'Oi' // false
!'' // true

Usamos para verificar uma condição e definir se algo deve ou não acontecer a partir da condição dada.

É a linguagem que utilizamos para nos comunicar, repare:

Se amanhã fizer sol, vou viajar para a praia.

Temos uma condição (Se amanhã fizer sol) para executar uma ação (viajar para a praia) dependendo do resultado dessa condição. Se verdadeira, a ação é executada.

// Variável booleana verdadeira
const sol = true;

// Condição
if ( sol ) {
	// Ação
	console.log('Vou viajar para a praia!');
}

// Variável booleana verdadeira
const sol = false;

// Condição
if ( sol ) {
	// Ação
	console.log('Vou viajar para a praia!');
}else{
	// Ação
	console.log('Vou ao cinema');
}

// Variável booleana verdadeira
const hora = 8;

// Condição
if ( hora <= 12 ) {
	// Ação
	console.log('Bom dia');
}else if( hora <= 18){
	// Ação
	console.log('Boa tarde');
}else{
	// Ação
	console.log('Boa noite');
}

if ( condição ) {
	// Ação
} else if ( outra condição ) {
	// Ação
} else if ( outra condição ) {
	// Ação
} else if ( outra condição ) {
	// Ação
} else if ( quantas condições quiser ) {
	// Ação
} else {
	// Ação final se nenhuma condição for verdadeira
}

switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;
    
  // include as many cases as you like

  default:
    actually, just run this code
}

Dica

Tomando decisões no seu código — condicionais

Vamos escrever um programa que receba um número digitado no prompt

Então, se o número for múltiplos de 3 o console imprimirá a palavra “Fizz” .

Se for múltiplo de 5 mostraremos “Buzz”.

Agora, se ele for múltiplo de 3 e 5 mostre “FizzBuzz”.

Receba uma palavra pelo prompt e conte o número de vogais dessa string. Imprima o resultado no console.