Guia prático JavaScript do básico ao avançado
Aqui está um guia passo a passo para aprender JavaScript, desde o básico até o avançado.
Esse passo a passo cobre os conceitos de JavaScript para transformar um iniciante em um desenvolvedor avançado, com foco em ferramentas e práticas essenciais.
Etapa 1: Fundamentos do JavaScript
- Sintaxe Básica
- Estrutura de código, comentários (
// comentário
ou/* comentário */
). - Declaração de variáveis usando
var
,let
,const
.
javascript
Copiar código
let nome = "John";
const idade = 30;
- Tipos de Dados e Operadores
- Tipos:
string
,number
,boolean
,null
,undefined
,object
,symbol
. - Operadores: aritméticos (
+
,-
,*
,/
), lógicos (&&
,||
,!
), e de comparação (==
,===
,!=
,!==
).
javascript
Copiar código
let resultado = 5 + 3 * 2;
let isAdult = idade >= 18;
- Estruturas de Controle
- Condicionais:
if
,else if
,else
,switch
. - Loops:
for
,while
,do...while
,for...of
,for...in
.
javascript
Copiar código
for (let i = 0; i < 5; i++) {
console.log(i);
}
- Funções
- Funções declarativas, expressões de função, funções anônimas.
- Funções com parâmetros e retorno.
- Arrow functions.
javascript
Copiar código
function soma(a, b) {
return a + b;
}
const subtrai = (a, b) => a - b;
Etapa 2: Manipulação de DOM e Eventos
- Selecionando Elementos do DOM
- Métodos:
document.getElementById
,document.querySelector
,document.querySelectorAll
.
javascript
Copiar código
const botao = document.getElementById("meuBotao");
- Modificando Elementos do DOM
textContent
,innerHTML
,style
,classList
.
javascript
Copiar código
botao.textContent = "Clique aqui";
botao.style.backgroundColor = "blue";
- Eventos
- Eventos comuns:
click
,mouseover
,mouseout
,submit
. - Manipulando eventos com
addEventListener
.
javascript
Copiar código
botao.addEventListener("click", () => {
alert("Botão clicado!");
});
Etapa 3: Programação Assíncrona
- Callbacks
- Funções de callback como forma de lidar com operações assíncronas.
javascript
Copiar código
setTimeout(() => {
console.log("Executa após 2 segundos");
}, 2000);
- Promises
- Introdução ao conceito de
Promise
para tratar operações assíncronas.
javascript
Copiar código
const minhaPromise = new Promise((resolve, reject) => {
// lógica assíncrona
});
- Async/Await
- Simplificação do uso de Promises com
async
eawait
.
javascript
Copiar código
async function fetchData() {
const resposta = await fetch("https://api.exemplo.com/dados");
const dados = await resposta.json();
console.log(dados);
}
Etapa 4: Manipulação de Dados
- Arrays e Objetos
- Métodos para manipular arrays:
push
,pop
,map
,filter
,reduce
.
javascript
Copiar código
const numeros = [1, 2, 3, 4];
const dobrados = numeros.map(n => n * 2);
- Desestruturação e Operador Spread
- Desestruturação de arrays e objetos.
- Uso do operador spread (
...
) para copiar ou combinar arrays e objetos.
javascript
Copiar código
const pessoa = { nome: "John", idade: 30 };
const { nome, idade } = pessoa;
- JSON
- Parseamento de JSON com
JSON.parse
eJSON.stringify
.
javascript
Copiar código
const jsonString = '{"nome": "John", "idade": 30}';
const objeto = JSON.parse(jsonString);
Etapa 5: Classes e Orientação a Objetos
- Classes e Objetos
- Definição de classes e criação de instâncias.
- Uso de
constructor
ethis
.
javascript
Copiar código
class Pessoa {
constructor(nome, idade) {
this.nome = nome;
this.idade = idade;
}
}
- Herança e Métodos
- Herança com
extends
e uso desuper
. - Métodos estáticos e getters/setters.
javascript
Copiar código
class Funcionario extends Pessoa {
constructor(nome, idade, cargo) {
super(nome, idade);
this.cargo = cargo;
}
}
Etapa 6: Módulos e Ferramentas Modernas
- Módulos
- Importando e exportando funções, classes e variáveis usando
export
eimport
.
javascript
Copiar código
// em arquivo.js
export function soma(a, b) {
return a + b;
}
// em main.js
import { soma } from './arquivo.js';
- Babel e Webpack
- Transpilar código com Babel para compatibilidade com navegadores antigos.
- Configurar o Webpack para empacotar módulos em um único arquivo para produção.
- API Fetch e Ajax
- Realizar chamadas HTTP com
fetch
para consumir APIs REST. - Manipular respostas com
.then()
ouasync/await
.
javascript
Copiar código
fetch("https://api.exemplo.com/dados")
.then(response => response.json())
.then(dados => console.log(dados))
.catch(error => console.error("Erro:", error));
- Conhecimento em TypeScript
- Introdução ao TypeScript para melhorar a tipagem e segurança no código JavaScript.