Folha 1
Primeiros comandos e variáveis
🗣️ Comunicando com o usuário
O JavaScript no navegador tem três jeitos simples de mostrar ou perguntar algo:
- window.alert('mensagem') → exibe um aviso (só OK).
- window.confirm('pergunta') → caixa com OK/Cancelar (retorna true/false).
- window.prompt('pergunta') → abre campo para digitar; retorna o texto.
// exemplo prático:
let cidade = window.prompt("Em que cidade você mora?");
window.alert("Que legal, " + cidade + "!");
📦 Variáveis: regras de nomenclatura
✅ Podem começar com letra, $ ou _
❌ Não podem começar com número
✅ Aceitam acentos e símbolos
❌ Sem espaços (use _ ou camelCase)
❌ Evite palavras reservadas (function, var, alert...)
💡 Dica: Use nomes significativos! let nomeUsuario é melhor que let n.
Folha 2
Manipulação de Strings
Depois de capturar um texto (string), podemos explorá-lo e modificá-lo.
let nome = window.prompt("Qual seu nome?");
// .length → mostra o número de letras
document.write(`Olá ${nome}! Seu nome tem ${nome.length} letras.
`);
// toUpperCase() → tudo maiúsculo
document.write(`Maiúsculo: ${nome.toUpperCase()}
`);
// toLowerCase() → tudo minúsculo
document.write(`Minúsculo: ${nome.toLowerCase()}`);
- .length → conta os caracteres (espaços contam).
- .toUpperCase() → transforma em CAIXA ALTA.
- .toLowerCase() → transforma em caixa baixa.
📟 Exemplo: "Rafael" .length = 6, .toUpperCase() = RAFAEL
Folha 3
Template strings (placeholders)
Concatenação tradicional usa + , mas fica confuso com muitas variáveis.
Template string (com crases ` ) deixa o texto mais limpo.
// jeito antigo (menos prático):
let texto = 'O aluno ' + nome + ' com ' + idade + ' anos tirou ' + nota;
// COM PLACEHOLDER (use crases) ⭐
let textoMelhor = `O aluno ${nome} com ${idade} anos tirou a nota ${nota}`;
⚠️ Atenção: template strings exigem ` (crase) e não aspas simples.
Dentro de ${} você pode colocar qualquer expressão JS.
Folha 4
Conversão de tipos (casting)
⚠️ Importante: window.prompt sempre retorna texto (string).
Se você quer somar números, precisa converter.
let idade = window.prompt("Qual sua idade?"); // retorna string
let idadeNumero = Number(idade); // converte para número
// ou direto:
let anoNasc = Number(window.prompt("Ano de nascimento?"));
// soma funciona como número
let resultado = idadeNumero + 10;
- Number.parseInt(n) → força inteiro (ex: 15.7 vira 15)
- Number.parseFloat(n) → mantém decimais
- Number(n) → "melhor escolha", JS decide
- String(n) ou n.toString() → volta a ser texto
Folha 5
Formatação de números e moedas
Deixar números bonitos para o usuário: casas decimais, vírgula, cifrão.
let preco = 1545.5;
// duas casas decimais
preco.toFixed(2); // "1545.50"
// trocar ponto por vírgula
preco.toFixed(2).replace('.', ','); // "1545,50"
// moeda brasileira (R$)
preco.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'}); // "R$ 1.545,50"
// dólar
preco.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); // "$1,545.50"
Folha 6
Operadores e precedência
➕ Operações matemáticas: + (soma), - , * , / , % (resto), ** (potência)
Ordem de precedência (lembre como PEMDAS):
1º: ( ) parênteses
2º: ** potência
3º: * / % (esquerda p/ direita)
4º: + - (esquerda p/ direita)
let calc = 2 + 5 * 3 ** 2;
// 3**2 = 9, depois 5*9 =45, depois 2+45 = 47
console.log(calc); // 47
Folha 7
Auto-atribuição e incremento
Atalhos para modificar a própria variável.
x += 5 → x = x + 5
x -= 2 → x = x - 2
x *= 3 → x = x * 3
x /= 2 → x = x / 2
x **= 2 → x = x²
x %= 3 → resto da divisão
➕ Incremento: x++ equivale a x = x + 1 (pós-incremento).
++x (pré-incremento) incrementa antes de usar.
let contador = 0; contador++; // contador = 1
Folha 8
Operadores relacionais e lógicos
Comparações: servem para tomar decisões (verdadeiro ou falso).
- > maior, < menor, >= maior igual, <= menor igual
- == igual (valor) ex: 5 == "5" → true
- === idêntico (valor E tipo) → 5 === "5" → false
- != diferente (valor)
- !== estritamente diferente (valor e tipo)
🧠 Lógicos: combinam condições.
&& (E) → tudo verdade
|| (OU) → pelo menos um verdade
! (NÃO) → inverte o valor
let idade = 22;
let temCarteira = true;
// Pode dirigir?
if (idade >= 18 && temCarteira) {
console.log("✅ Pode dirigir");
} else {
console.log("❌ Não pode dirigir");
}
! nega: !true é false.