Modulo 3 / JavaScript

Fundamentos JavaScript

Variáveis, tipos de dados e operadores.

school Aula 12 schedule 2 horas

Introducao

O que é JavaScript?

code A linguagem da Web

▸ Única linguagem que roda nativamente no navegador
▸ Criada em 1995 por Brendan Eich (em apenas 10 dias)
▸ Hoje roda também no servidor (Node.js), mobile e desktop
▸ Linguagem interpretada, dinâmica e multiparadigma

layers HTML + CSS + JS

HTML

Estrutura O conteúdo e a marcação

CSS

Estilo A aparência visual

JS

Comportamento Interatividade e lógica

Primeiros passos

Como usar JavaScript

edit_note Inline (dentro do HTML)

<!-- Direto no HTML -->
<script>
  alert('Olá, mundo!');
</script>

description Arquivo externo (recomendado)

<!-- No final do <body> -->
<script src="js/script.js"></script>

lightbulb Sempre coloque o <script> antes de fechar o </body> para que o HTML carregue primeiro.

terminal Console do navegador

// Abra o DevTools (F12) e vá na aba Console
console.log('Testando JavaScript!');
console.log(2 + 2);  // 4

O console.log() é sua principal ferramenta de debug. Use sempre para testar e inspecionar valores.

Armazenando dados

Variáveis

block var (evitar)

var nome = 'Ana';
// Escopo de função
// Pode ser redeclarada
// Sofre hoisting

Forma antiga, pode causar bugs inesperados.

swap_horiz let (mutável)

let idade = 25;
idade = 26; // OK!

// Escopo de bloco
// Não pode redeclarar
// Reatribuição permitida

Use quando o valor precisa mudar.

lock const (imutável)

const PI = 3.14159;
PI = 3; // ERRO!

// Escopo de bloco
// Não pode redeclarar
// Não pode reatribuir

Use sempre que possível. Padrão recomendado.

lightbulb Regra prática: comece sempre com const. Se precisar mudar o valor, troque para let. Nunca use var.

Tipos primitivos

Tipos de dados

text_fields String

const nome = 'Maria';
const sobrenome = "Silva";
const frase = `Olá, ${nome}!`;

Textos entre aspas simples, duplas ou crases (template literals).

tag Number

const inteiro = 42;
const decimal = 3.14;
const negativo = -10;

Inteiros e decimais são o mesmo tipo.

toggle_on Boolean

const ativo = true;
const logado = false;

Verdadeiro ou falso, usado em condições.

do_not_disturb_on Null e Undefined

let valor;
console.log(valor); // undefined

const vazio = null;
console.log(vazio); // null

undefined = não definido, null = intencionalmente vazio.

search typeof (verificar tipo)

console.log(typeof 'texto');   // "string"
console.log(typeof 42);       // "number"
console.log(typeof true);     // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (bug histórico!)

Strings modernas

Template Literals

close Forma antiga (concatenação)

const nome = 'Carlos';
const idade = 20;

const msg = 'Olá, ' + nome +
  '! Você tem ' + idade + ' anos.';

check Forma moderna (template literal)

const nome = 'Carlos';
const idade = 20;

const msg = `Olá, ${nome}! Você tem ${idade} anos.`;

lightbulb Use crases ` ` e ${expressão} para interpolar valores.

data_object Expressões dentro de template literals

const preco = 49.90;
const qtd = 3;

console.log(`Total: R$ ${preco * qtd}`);          // "Total: R$ 149.7"
console.log(`Par? ${qtd % 2 === 0 ? 'Sim' : 'Não'}`); // "Par? Não"

Fazendo contas

Operadores aritméticos

calculate Operações básicas

console.log(10 + 5);   // 15  (soma)
console.log(10 - 5);   // 5   (subtração)
console.log(10 * 5);   // 50  (multiplicação)
console.log(10 / 3);   // 3.33... (divisão)
console.log(10 % 3);   // 1   (resto/módulo)
console.log(2 ** 10);  // 1024 (potência)

add_circle Incremento e atalhos

let x = 10;

x++;      // x = 11 (incremento)
x--;      // x = 10 (decremento)

x += 5;   // x = 15 (x = x + 5)
x -= 3;   // x = 12 (x = x - 3)
x *= 2;   // x = 24 (x = x * 2)

warning Cuidado com strings e números

console.log('5' + 3);         // "53" (concatenação!)
console.log('5' - 3);         // 2   (conversão automática)
console.log(Number('5') + 3); // 8   (conversão explícita)
console.log(parseInt('10px'));  // 10  (extrai o número)

Comparando valores

Operadores de comparação

compare_arrows Igualdade e diferença

// Igualdade estrita (recomendado)
5 === 5      // true
5 === '5'    // false (tipos diferentes)

// Igualdade abstrata (evitar)
5 == '5'     // true (converte o tipo)

// Diferença
5 !== '5'    // true
5 != '5'     // false

sort Maior, menor

10 > 5     // true
10 < 5     // false
10 >= 10   // true
5 <= 3     // false

lightbulb Sempre use === e !== para evitar surpresas com conversão de tipos.

Lógica booleana

Operadores lógicos

join_inner AND (&&)

// Ambos precisam ser true
true  && true   // true
true  && false  // false
false && true   // false

// Exemplo prático:
const idade = 20;
idade >= 18 && idade <= 65
// true

join_full OR (||)

// Pelo menos um true
true  || false  // true
false || false  // false

// Exemplo prático:
const dia = 'sábado';
dia === 'sábado' ||
  dia === 'domingo'
// true

flip_to_back NOT (!)

// Inverte o valor
!true    // false
!false   // true

// Exemplo prático:
const logado = false;
if (!logado) {
  console.log('Faça login');
}

Hora de praticar

Exercício prático

rocket_launch Calculadora de desconto

Crie variáveis para precoProduto, percentualDesconto e nome
Calcule o valor do desconto e o preço final
Use console.log com template literals para exibir o resultado
Use operadores de comparação para verificar se o preço é maior que R$ 100
Use operadores lógicos para verificar se o desconto é válido (entre 0 e 100)

Resultado esperado:

// Se precoProduto = 200, percentualDesconto = 15
"Olá, Maria! O produto custa R$ 200"
"Desconto de 15%: R$ 30"
"Preço final: R$ 170"
"Preço acima de R$ 100? true"
"Desconto válido? true"

Próxima aula

Aula 13

Estruturas de controle, funções, arrays e objetos.

task_alt O que aprendemos hoje

check_circle O que é JavaScript e como utilizar no HTML
check_circle Variáveis com let e const
check_circle Tipos de dados: string, number, boolean, null e undefined
check_circle Template literals e interpolação
check_circle Operadores aritméticos, de comparação e lógicos

Próxima aula

auto_stories Referência: MDN JavaScript Guide