Voltar para Wiki
Programação3 Módulos

Trilha de Javascript

Do zero ao profissional: Domine a lógica de programação, manipulação do DOM e o ecossistema moderno do JS.

1

Fundamentos da Linguagem

Variáveis e Declaração

No Javascript moderno, evitamos o uso de `var`. Utilizamos principalmente `let` (para valores que podem mudar) e `const` (para valores constantes).
javascript
// Maneira antiga (evitar)
var nome = "Jonas";

// Maneira moderna
let idade = 25; // Pode ser reatribuído
const cpf = "123.456.789-00"; // Não pode mudar

idade = 26; // OK
// cpf = "000"; // Erro!
O Javascript é case-sensitive, ou seja, `minhaVariavel` é diferente de `MinhaVariavel`.

Tipos de Dados Primitivos

O JS é uma linguagem de tipagem dinâmica. Os principais tipos são String, Number, Boolean, Null e Undefined.

Strings e Template Strings

javascript
const textoSimples = 'Olá Mundo';
const nome = "Maria";

// Template String (uso de crase) permite interpolação
const mensagem = `Bem-vinda, ${nome}!`; 
console.log(mensagem); // Saída: Bem-vinda, Maria!

Numbers e Booleans

javascript
const inteiro = 10;
const decimal = 10.5;
const estaChovendo = true;
const temCarteira = false;

Operadores Lógicos e Aritméticos

Operadores permitem realizar cálculos e comparações lógicas.
  • Aritméticos: `+` (soma), `-` (subtração), `*` (multiplicação), `/` (divisão), `%` (resto).
  • Comparação: `==` (valor igual), `===` (valor e tipo iguais - Recomendado), `!=` (diferente).
  • Lógicos: `&&` (E), `||` (OU), `!` (Negação).
javascript
const soma = 5 + 5; // 10
const resto = 10 % 3; // 1

// Comparação estrita
console.log(5 == "5"); // true (converte o tipo)
console.log(5 === "5"); // false (tipos diferentes)

// Lógica
if (soma === 10 && resto > 0) {
  console.log("Condição verdadeira");
}

Estruturas de Controle

Controlam o fluxo da aplicação baseando-se em condições (if/else) ou repetições (loops).

Condicional IF / ELSE

javascript
const hora = 14;

if (hora < 12) {
  console.log("Bom dia");
} else if (hora < 18) {
  console.log("Boa tarde");
} else {
  console.log("Boa noite");
}

Loop FOR

Utilizado quando sabemos quantas vezes queremos repetir um bloco de código.
javascript
for (let i = 0; i < 5; i++) {
  console.log(`Contagem: ${i}`);
}

Funções

Blocos de código reutilizáveis que realizam uma tarefa específica.
javascript
// Função tradicional
function somar(a, b) {
  return a + b;
}

// Arrow Function (Sintaxe moderna)
const multiplicar = (a, b) => {
  return a * b;
};

// Arrow Function reduzida (retorno implícito)
const dividir = (a, b) => a / b;

console.log(somar(2, 2)); // 4
2

Conteúdo Intermediário

Manipulação DOM

O DOM (Document Object Model) permite acessar e manipular o HTML via JS. Objetos HTML possuem propriedades como innerHTML, style, addEventListener, etc.
javascript
const element = document.querySelector('#elementSelector');
element.innerHTML += 'Hello World';
element.style.color = 'red';
Manipulação de eventos (clique, mouse, teclado):
javascript
const button = document.querySelector('.seletor');
button.addEventListener('click', () => {
  console.log('Botão pressionado!');
});

Requisições AJAX e Fetch API

O fetch é um método nativo do Javascript que permite realizar requisições HTTP sem a necessidade de bibliotecas externas. É assíncrono e retorna uma Promise.

Usando Async/Await (Recomendado)

javascript
async function buscarUsuarios() {
  try {
    const response = await fetch('https://api.exemplo.com/users');
    const dados = await response.json();
    console.log(dados);
  } catch (erro) {
    console.error("Erro ao buscar:", erro);
  }
}
🔗Documentação MDN: Fetch API

Promises e Assincronismo

Javascript é single-threaded, mas lida com operações demoradas (como ler arquivos ou acessar APIs) usando Promises para não travar a interface.
  • Pending: Estado inicial, aguardando.
  • Fulfilled: Sucesso, retorna o valor.
  • Rejected: Falha, retorna o motivo do erro.
javascript
console.log("Início");

setTimeout(() => {
  console.log("Isso roda depois de 2 segundos");
}, 2000);

console.log("Fim (roda antes do timeout)");
3

Ecossistema & Tooling

Node.js e NPM

Node.js permite rodar Javascript fora do navegador (no servidor). O NPM é o gerenciador de pacotes que instala bibliotecas de terceiros.
  • `npm init -y`: Cria o arquivo package.json.
  • `npm install react`: Instala uma dependência.
  • `npm run dev`: Executa scripts personalizados.

Transpiladores (Babel)

O Babel converte código Javascript moderno (ES6+) para versões antigas, garantindo compatibilidade com navegadores legados.
javascript
// Código Moderno (Entrada)
const soma = (a, b) => a + b;

// Código Transpilado pelo Babel (Saída)
var soma = function soma(a, b) {
  return a + b;
};