🔧 Tipos e Estruturas

📊 4. Tipos de Dados em JavaScript

🎯 Objetivo: Entender os fundamentos sobre os tipos de dados em JavaScript, abrangendo valores literais, variáveis, constantes e os diferentes operadores.

4.1 Valores Literais

Literais são dados fixos atribuídos diretamente às variáveis, como números, textos, booleanos, arrays e objetos.

42                // número literal
"texto"           // string literal
true, false       // booleanos literais
[1, 2, 3]         // array literal
{ nome: "Ana" }   // objeto literal

Demonstração: Tipos de Literais

Clique para ver os diferentes tipos de literais...

4.2 Variáveis

Variáveis armazenam valores que podem mudar durante a execução do programa.

let idade = 30;
var nome = "Lucas";

Palavra-chave	Escopo	Reatribuível	Hoisting
`var`	função	sim	sim
`let`	bloco	sim	não
`const`	bloco	não	não

⚠️ Recomendação: Evite var em novos projetos — prefira let ou const pela previsibilidade de escopo.

4.3 Constantes

Constantes são valores imutáveis, definidos com const. Devem ser inicializadas no momento da declaração.

const pi = 3.14159;

Teste: Diferenças entre let, const e var

Vamos ver as diferenças entre os tipos de declaração...

4.4 Operadores

4.4.1 Operadores Aritméticos

+  // adição
-  // subtração
*  // multiplicação
/  // divisão
%  // módulo (resto da divisão)
** // exponenciação

4.4.2 Operadores de Atribuição

=   // atribuição simples
+=  // adição e atribuição
-=  // subtração e atribuição
*=  // multiplicação e atribuição
/=  // divisão e atribuição

4.4.3 Operadores de Comparação

==   // igualdade (valor)
===  // igualdade estrita (valor e tipo)
!=   // diferente (valor)
!==  // diferente estrito (valor e tipo)
>    // maior que
>=   // maior ou igual
<    // menor que
<=   // menor ou igual

⚠️ Importante: Prefira === e !== para evitar coerções implícitas de tipo.

⚖️ Demonstração: Comparações

Vamos ver a diferença entre == e ===...

4.4.4 Operadores Lógicos

&&  // e lógico (AND)
||  // ou lógico (OR)
!   // negação (NOT)

4.4.5 Operador Ternário

O operador ternário é uma forma concisa de escrever uma estrutura if...else:

condicao ? valorSeVerdadeiro : valorSeFalso;

🎛️ Calculadora de Operadores

Número 1:

Operador:

Número 2:

Resultado aparecerá aqui...

🤔 5. Estruturas Condicionais em JavaScript

🎯 Objetivo: Compreender como controlar o fluxo de execução de um programa em JavaScript por meio de decisões lógicas com if, else, else if e switch.

5.1 if

A estrutura if permite executar um bloco de código se uma condição for verdadeira.

let idade = 18;
if (idade >= 18) {
  console.log("Você é maior de idade.");
}

5.2 if...else

Permite executar um bloco caso a condição seja verdadeira e outro bloco caso seja falsa.

let idade = 16;
if (idade >= 18) {
  console.log("Maior de idade");
} else {
  console.log("Menor de idade");
}

5.3 else if

Permite verificar múltiplas condições em sequência.

let nota = 7;
if (nota >= 9) {
  console.log("Excelente");
} else if (nota >= 6) {
  console.log("Aprovado");
} else {
  console.log("Reprovado");
}

🎓 Verificador de Notas

Digite sua nota (0-10):

Digite uma nota e clique para verificar...

5.4 switch

O switch avalia uma expressão e executa o bloco de código correspondente ao case correspondente.

let fruta = "banana";
switch (fruta) {
  case "maçã":
    console.log("Você escolheu maçã");
    break;
  case "banana":
    console.log("Você escolheu banana");
    break;
  default:
    console.log("Fruta não reconhecida");
}

💡 Importante: Sempre inclua o break após cada case, ou o JavaScript continuará executando os próximos blocos!

🍎 Seletor de Frutas

Escolha uma fruta:

Escolha uma fruta para ver a informação...

🔄 6. Estruturas de Repetição em JavaScript

🎯 Objetivo: Aprender a utilizar laços de repetição para executar trechos de código várias vezes, com diferentes estruturas como for, while, do...while, além das instruções break e continue.

6.1 for

Usado quando se sabe exatamente quantas vezes o loop deve executar.

for (let i = 0; i < 5; i++) {
  console.log("Repetição número " + i);
}

6.2 while

Executa o bloco de código enquanto a condição for verdadeira.

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

6.3 do...while

Executa ao menos uma vez, pois a condição é verificada após a execução.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

🔢 Gerador de Sequências

Tipo de loop:

Número de repetições:

Configure e execute o loop...

6.4 for...in e for...of

for...in itera sobre as chaves (índices ou nomes) de um objeto ou array:

let pessoa = { nome: "Ana", idade: 25 };
for (let chave in pessoa) {
  console.log(chave + ": " + pessoa[chave]);
}

for...of itera sobre os valores de estruturas iteráveis (arrays, strings, etc):

let frutas = ["maçã", "banana", "uva"];
for (let fruta of frutas) {
  console.log(fruta);
}

6.5 break e continue

break interrompe a execução do laço atual:

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}

continue pula a iteração atual e segue para a próxima:

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}

🎯 Demonstração: Break e Continue

Veja como break e continue funcionam...

✅ Resumo da Parte 2

Variáveis (let, var) armazenam valores mutáveis; const define valores imutáveis
Operadores realizam cálculos, comparações e atribuições de forma clara e poderosa
Use if para condições simples, switch para múltiplas possibilidades fixas
for para repetições com contagem conhecida, while para condições dinâmicas
break interrompe loops, continue pula uma iteração

🎯 Perguntas de Revisão

1. Qual a diferença entre let, var e const?

2. Por que é melhor usar === ao invés de ==?

3. Quando usar switch ao invés de múltiplos if?

🚀 Próximos Passos

Agora que você domina tipos de dados e estruturas de controle, está pronto para explorar funções, eventos e manipulação do DOM!

⚡ Continuar para Funções & Eventos →