🏛️ HTML
O HTML é a linguagem de Estrutura. Ele define quais elementos existem na página (o "esqueleto").
1. Relação Fundamental (A Tríade da Web)
HTML: Define a Estrutura e o conteúdo (ex: <p>, <h1>, <img>).
CSS: Define o Estilo e a aparência visual (ex: cores, fontes, layout).
JavaScript: Define o Comportamento e a interatividade (ex: o que acontece ao clicar, operações
lógicas).
o Conceito-Chave: O JavaScript é necessário porque o HTML sozinho é estático e não pode executar
lógica ou interatividade.
2. Tags Essenciais para Scripts e Estilos
<script> (Para JavaScript):
o Arquivo Externo: <script src="caminho/para/[Link]"></script>
o Código Interno (Inline): Pode ser usado diretamente no <body> ou <head> para escrever código JS.
<link> (Para CSS):
o Arquivo Externo: <link rel="stylesheet" href="caminho/para/[Link]">
<a> (Âncora/Link):
o Forma Correta de Chamar JS: <a href="javascript:minhaFuncao();">Clique aqui</a>
o Forma Incorreta (Não Existe): <a script="...">
3. Validação de Formulários (HTML5)
O HTML5 introduziu atributos que fazem validações simples sem precisar de JavaScript.
min e max: Usados para definir valores numéricos ou limites de data (ex: em type="date").
maxlength: Define o número máximo de caracteres em um type="text". (Não confundir com max, que é
para valores numéricos).
required: O campo não pode estar vazio.
o Pegadinha: Um campo com apenas espaços em branco (" ") é considerado VÁLIDO pelo required.
pattern: Valida o campo contra uma Expressão Regular (RegEx).
o Sintaxe: A repetição usa chaves {}. Ex: CEP pattern="[0-9]{5}-[0-9]{3}".
🎨 CSS
O CSS é a linguagem de Estilo. Ele define como os elementos HTML devem parecer.
1. O Box Model (Modelo de Caixa)
Todo elemento HTML é visto como uma caixa composta por 4 camadas, de dentro para fora:
1. content (Conteúdo): Onde o texto e imagens ficam.
2. padding (Preenchimento): O espaço dentro da borda (entre o conteúdo e a borda).
3. border (Borda): A linha ao redor do padding e conteúdo.
4. margin (Margem): O espaço fora da borda (empurra outros elementos para longe)2.
o Conceito-Chave: As propriedades width e height definem o tamanho da camada content, elas não são
camadas do Box Model.
2. Propriedades de Estilo Comuns
Cor de Fundo: background-color: blue
Cor do Texto: color: red; (Nota: font-color não é uma propriedade CSS válida).
Remover Sublinhado: text-decoration: none;
Arredondar Cantos: border-radius: 10px;
Mudar a Fonte: font-family: "Arial", sans-serif;
Tamanho da Fonte: font-size: 16px;
Espaço entre Letras: letter-spacing: 2px;
Esconder Elemento: visibility: hidden;
3. Seletores CSS
Como o CSS "encontra" elementos HTML para aplicar estilos.
Por ID: #meuId (seleciona <div id="meuId">)
Por Classe: .minhaClasse (seleciona <p class="minhaClasse">)
Por Tag: p (seleciona todos os <p>)
Descendente: div p (seleciona qualquer <p> que esteja dentro de uma <div>, seja filho, neto, etc.)
Filho Direto: div > p (seleciona apenas o <p> que for filho imediato de uma <div>)
Irmão Adjacente: div + p (seleciona o <p> que vem imediatamente após uma <div> no mesmo nível)
4. Layout (Flexbox, Grid e Outros)
display: flex;: Transforma um elemento em um "flex container". É mais indicado para layouts em uma
dimensão (linha ou coluna).
o Valores Padrão (Default) do Container em display Flex:
flex-direction: row (filhos alinhados em linha)
flex-wrap: nowrap (filhos não quebram a linha)
justify-content: flex-start (filhos alinhados no início/esquerda)
align-items: stretch (filhos esticam para preencher a altura)
o Propriedade dos Filhos (Itens):
O padrão de um item é flex: 0 1 auto; (não cresce, pode encolher, tamanho automático).
flex: auto; é um atalho para flex: 1 1 auto; (pode crescer, pode encolher, tamanho automático).
CSS Grid: Adequado para layouts complexos em duas dimensões (linhas e colunas).
float: Técnica mais antiga que posiciona elementos à esquerda ou direita.
position: Define comportamentos de posicionamento (ex: static, relative, absolute).
💡 JavaScript: Conceitos Fundamentais
O JavaScript é a linguagem de Comportamento. Ele adiciona lógica e interatividade.
1. Variáveis e Tipos
Comentários:
o // é usado para comentários de linha única.
o /* ... */ é usado para comentários de múltiplas linhas (tudo que estiver entre o /* e o */ é ignorado).
let: Declara uma variável que pode ser alterada.
const: Declara uma constante que não pode ser reatribuída.
o Deve ter seu valor atribuído no momento da declaração.
o Tentar reatribuir um valor (ex: y = 25;) gera um Uncaught TypeError.
Tipagem Dinâmica: Você não precisa declarar o tipo (ex: string, int). O JS descobre sozinho.
2. Operadores e Coerção de Tipo
== (Igualdade Solta): Compara apenas o Valor. Faz coerção (conversão) de tipo.
o 100 == "100" → true
=== (Igualdade Estrita): Compara Valor E Tipo. Não faz coerção.
o 100 === "100" → false
o null === undefined → false
Operador + (Adição e Concatenação):
o Se qualquer lado for uma string, o + vira concatenação.
o "321" + 10 → "32110"
o "35" + 2 * 7 + "1" (multiplicação ocorre primeiro) → "35" + 14 + "1" → "3514" + "1" → "35141"
Operador - (Subtração):
o Sempre tenta converter os lados para number.
o "321" - 10 → 321 - 10 → 311
Operador Ternário (Atalho para if/else):
o condição ? valorSeVerdadeiro : valorSeFalso
o Ex: let status = (idade >= 18) ? "Adulto" : "Menor";
Operadores Inválidos (Pegadinhas):
o := (Não existe em JS)
o b = c ! 10 (Não existe; o correto é !=)
3. Funções e Estruturas de Controle
Declaração: function dobrar(x) { return x * 2; }
Invocação (Chamada): dobrar(10);
Passagem de Parâmetros (por Valor):
o Primitivos (números, strings) são passados por valor.
o Alterar o parâmetro dentro da função (ex: var r = a+b;) não altera a variável original (x) que foi passada
de fora787878. (Ex: soma(7, 8, x); onde x=0, imprime 15 / 0).
Laços de Repetição (for, while):
o continue: Interrompe a iteração atual e passa para a próxima.
o break: Interrompe e sai do laço completamente.
4. Arrays (Listas)
Criação:
o let cores = ["red", "green", "blue"];
o let arr = new Array(1, 7, 4); (cria array com os elementos 1, 7, 4)
o let arr = new Array(3); (cria array vazio de 3 posições)
o Forma Inválida: new Array(3) {1, 7, 4}
Tamanho: Use a propriedade .length (ex: [Link]). Não use .size ou .size().
Loop Padrão: for (let i = 0; i < [Link]; i++) { ... }
o Pegadinha: Cuidado se o loop começar com i = 1. Isso pula o primeiro item (índice 0).
Métodos Úteis:
o .push(item): Adiciona um ou mais itens ao final do array.
o .pop(): Remove o último item do array (e o retorna).
o .shift(): Remove o primeiro item do array (e o retorna).
o .unshift(item): Adiciona um ou mais itens ao início do array.
o .indexOf(item): Retorna o primeiro índice (posição) em que um item é encontrado (ou -1 se não for).
o .lastIndexOf(item): Retorna o último índice (posição) em que um item é encontrado (ou -1 se não for).
o .slice(inicio, fim): Retorna uma cópia de uma parte do array (sem modificar o original).
o .forEach(funcao): Executa uma função para cada item do array (não retorna um novo array).
o .reverse(): Inverte a ordem dos itens no array (modifica o original).
o .reduce(): "Reduz" um array a um único valor (ex: somar todos os itens).
o .filter(): Retorna um novo array contendo apenas os elementos que passam em um teste (sem alterar
o original).
5. Objetos e Coleções Especiais
Tipos de Objetos:
o Embutidos (Built-in): String, Array, Date, Math.
o Do Browser (BOM/DOM): window, document, navigator.
o Do Usuário: Criados com class ou {}.
Classes (ES6):
o Herança: class Pato extends Ave { ... }
o Construtor: constructor(nome) { super(nome); } (super chama o construtor da classe-pai Ave).
o Polimorfismo: Classes diferentes (Pato, Galinha) que herdam da mesma classe-pai (Ave) podem ter
implementações diferentes para o mesmo método (ex: som()).
Set (Coleção de Valores Únicos):
o O Set é um objeto especial do ES6 que armazena uma coleção de valores sem permitir elementos
repetidos.
o Se você tentar adicionar um valor que já existe, o Set ignora a adição.
o Uso comum: Remover itens duplicados de um Array.
JavaScript
let listaComDuplicatas = [1, 2, 2, 3, 4, 4];
let listaUnica = [...new Set(listaComDuplicatas)]; // Resultado: [1, 2, 3, 4]
🖱️ JavaScript: DOM e Eventos
Como o JavaScript interage e modifica o HTML.
1. Seleção de Elementos (DOM)
O Conceito Singular vs. Plural:
o getElement... (Singular): Retorna UM elemento.
o getElements... (Plural): Retorna uma LISTA (Coleção) de elementos.
Métodos Principais:
o [Link]("meuId"): Retorna um elemento.
o [Link]("classe"): Retorna uma lista.
o [Link]("p"): Retorna uma lista. (Nota: Cuidado com definições incorretas
em provas que misturam TagName com seletores CSS).
Métodos Modernos (QuerySelector):
o [Link]("#meuId"): Retorna o primeiro elemento que bate com o seletor CSS.
o [Link](".minhaClasse"): Retorna uma lista.
IMPORTANTE: getElementsBy... (plural) retorna uma lista. Você deve usar um índice (ex: [0]) ou um
loop for para alterá-los.
2. Manipulação de Elementos (DOM)
Uma vez que você seleciona um elemento (let elem = ...), você pode alterá-lo:
Mudar o HTML interno: [Link] = "Novo <b>texto</b>";
o Usado também para inserir elementos, como uma imagem em uma célula de tabela: [Link] =
"<img src='[Link]'/>";.
Mudar o Valor (em formulários): [Link] = "Novo valor";
Mudar a Fonte (em imagens): [Link] = "[Link]";
Mudar o Estilo CSS: [Link] = "blue"; (Note: background-color vira
backgroundColor em JS).
Adicionar/Remover Classes: [Link]("visible"); (Adiciona se não tiver, remove se tiver).
3. Eventos
Ações que o usuário toma (cliques, digitação, etc.).
Eventos de Página/Janela:
o load (página e todos os recursos carregados)
o DOMContentLoaded (apenas o HTML carregado, mais rápido)
o unload / beforeunload (usuário está saindo da página)
Eventos de Formulário/Mouse:
o onclick (clique do mouse)
o onchange (valor de um campo mudou e o campo perdeu foco)
o onsubmit (formulário está sendo enviado)
o onreset (formulário está sendo resetado)
Eventos de Foco (Dupla Finalidade):
o focus: Dispara quando um elemento (<input>) ou a janela (window) ganha foco.
o blur: Dispara quando um elemento (<input>) ou a janela (window) perde foco.
this em Eventos:
o Em um evento HTML (inline), this refere-se ao próprio elemento que disparou o evento.
o <input onchange="verifica(this)">: this é o próprio <input>.
o <button onclick="calcula([Link])">: this é o botão; [Link] é o formulário-pai do botão.
4. O Objeto window (BOM - Browser Object Model)
Caixas de Diálogo:
o alert("Mensagem"); (Apenas "OK". Retém a execução do código até ser fechado).
o confirm("Você tem certeza?"); ("OK" e "Cancelar", retorna true ou false).
o prompt("Qual seu nome?"); (Caixa de texto, retorna a string ou null).
Navegação:
o [Link]("url", "nome", "specs"); (Abre uma nova janela popup).
o [Link] = "[Link] (Redireciona a página atual).
o [Link](); (Fecha a janela popup).
[Link]:
o Pegadinha: Atribuir um novo cookie (ex: [Link] = "preco=45.5";) NÃO apaga o anterior. A
leitura (alert([Link])) mostrará todos os cookies do site (ex: "produto=doce; preco=45.5").