JavaScript

📚 Conteúdo Educacional

Definição - JavaScript

Linguagem de programação de alto nível
Interpretada e multiparadigma (OO, funcional, imperativa)

Executada no cliente e servidor
Browser (front-end) e Node.js (back-end)

Tipagem dinâmica
Tipos determinados em tempo de execução

Event-driven
Baseado em eventos e callbacks

Tipos de Dados
// Primitivos
let nome = "João";    // String
let idade = 30;       // Number
let ativo = true;     // Boolean
let valor;            // Undefined
let nulavel = null;   // Null

// Complexos
let pessoa = {        // Object
nome: "Maria",
idade: 25
};
let numeros = [1, 2, 3]; // Array

Dica: Use typeof para verificar tipos de variáveis

Estruturas Condicionais

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

switch
switch(diaSemana) {
case 1:
console.log("Segunda");
break;
default:
console.log("Fim de semana");
}

Funções Essenciais

Declaração
// Function Declaration
function soma(a, b) {
return a + b;
}

// Function Expression
const subtracao = function(a, b) {
return a - b;
}

// Arrow Function (ES6+)
const multiplicacao = (a, b) => a * b;

// IIFE (Auto-executável)
(function() {
console.log('Executado imediatamente!');
})();

Uso Prático
// Parâmetros padrão
function saudacao(nome = 'Visitante') {
return `Olá ${nome}!`;
}

// Função como argumento
numeros.forEach(function(num) {
console.log(num * 2);
});

// Retorno de função
function criarMultiplicador(x) {
return function(y) {
return x * y;
};
}
const dobrar = criarMultiplicador(2);
console.log(dobrar(5)); // 10

Dica: Prefira arrow functions para callbacks e funções curtas

Métodos de Array

Transformação
const numeros = [1, 2, 3];

// Map: transforma elementos
const dobrados = numeros.map(n => n * 2);

// Filter: filtra elementos
const pares = numeros.filter(n => n % 2 === 0);

// Reduce: reduz a array
const soma = numeros.reduce((acc, n) => acc + n, 0);

Iteração
// forEach: executa função para cada item
numeros.forEach(n => console.log(n));

// Find: encontra primeiro elemento
const primeiroPar = numeros.find(n => n % 2 === 0);

// Some/Every: testa elementos
const temPar = numeros.some(n => n % 2 === 0);
const todosPares = numeros.every(n => n % 2 === 0);

Melhor Prática: Use métodos funcionais (map/filter/reduce) para manipular arrays

Manipulação do DOM

Seleção de Elementos
// Seleção clássica
const elemento = document.getElementById('meuId');
const elementos = document.querySelectorAll('.classe');

// Criação
const novoElemento = document.createElement('div');

// Modificação
elemento.textContent = 'Novo texto';
elemento.style.color = 'red';
elemento.classList.add('ativo');

Eventos
// Adicionar evento
botao.addEventListener('click', function(event) {
console.log('Botão clicado!', event.target);
});

// Eventos comuns:
// - click
// - mouseover/mouseout
// - keydown/keyup
// - submit
// - load

Operações Assíncronas

Callbacks e Promises
// setTimeout (callback)
setTimeout(() => {
console.log('Executado após 1s');
}, 1000);

// Promise
fetch('https://api.exemplo.com/dados')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Async/Await
// Função assíncrona
async function buscarDados() {
try {
const response = await fetch('https://api.exemplo.com/dados');
const data = await response.json();
return data;
} catch (error) {
console.error('Falha na requisição:', error);
}
}

Importante: Sempre trate erros em operações assíncronas

Padrões Recomendados

🌟 Guia de Sobrevivência JS:

Use const por padrão e let apenas quando necessário
Prefira === em vez de == para comparações
Evite variáveis globais
Use template strings para concatenação
Modularize seu código em funções
Nomeie variáveis/funções de forma descritiva

Loops e Iteração
// For tradicional
for (let i = 0; i < 5; i++) {
console.log(i);
}

// While
let contador = 0;
while (contador < 5) {
console.log(contador);
contador++;
}

// for...of (arrays)
const frutas = ['maçã', 'banana'];
for (const fruta of frutas) {
console.log(fruta);
}

Manipulação de Objetos

Criação
const carro = {
marca: 'Ford',
ano: 2020,
buzinar() {
return 'Biiii!';
}
};

Acesso
console.log(carro.marca); // Ford
console.log(carro['ano']); // 2020
console.log(carro.buzinar()); // Biiii!

Métodos de String

const texto = " JavaScript é incrível! ";

// Métodos comuns
console.log(texto.trim());        // "JavaScript é incrível!"
console.log(texto.toUpperCase()); // " JAVASCRIPT É INCRÍVEL! "
console.log(texto.includes("é")); // true
console.log(texto.slice(1, 4));   // "ava"
console.log(texto.split(" "));    // ["", "JavaScript", "é", "incrível!", ""]

Tratamento de Erros

try {
// Código que pode gerar erro
const resultado = 10 / 0;
if (!isFinite(resultado)) {
throw new Error("Divisão por zero!");
}
} catch (erro) {
console.error("Ocorreu um erro:", erro.message);
} finally {
console.log("Execução finalizada");
}

Dica: Sempre trate erros em operações críticas

🎬 Playlist JavaScript

Conteúdo produzido e distribuído pelo Prof. Gustavo Guanabara
Direitos autorais © 2013-2023 Curso em Vídeo
Esta apresentação contém trechos da playlist oficial disponível em Curso de Javascript - Curso em Vídeo