JavaScript do Zero: Guia Completo com Exemplos Práticos 2026

Por Que JavaScript é Essencial em 2026?

Se você quer trabalhar com desenvolvimento web, JavaScript é indispensável. É a única linguagem que roda nativamente nos navegadores, tornando-a essencial para criar sites interativos e dinâmicos.

Mas JavaScript vai muito além do navegador! Com Node.js, você pode usar JavaScript no servidor (back-end), criar aplicativos mobile com React Native, aplicações desktop com Electron, e até programar IoT. É uma linguagem verdadeiramente universal.

"JavaScript é a linguagem mais usada no mundo segundo o Stack Overflow Developer Survey, presente em 98% dos websites."

O que torna JavaScript especial?

Roda no navegador: Sem precisar instalar nada, você já pode começar
Fácil de começar: Sintaxe acessível para iniciantes
Comunidade gigante: Milhões de desenvolvedores e recursos
Ecossistema rico: NPM com mais de 2 milhões de pacotes
Mercado aquecido: Uma das habilidades mais demandadas

Configurando seu Ambiente de Desenvolvimento

O que você vai precisar?

A boa notícia: você provavelmente já tem tudo instalado!

Navegador moderno: Chrome, Firefox, Edge ou Safari
Editor de código: VS Code (recomendado), Sublime Text ou qualquer editor
Node.js: Para executar JavaScript fora do navegador (baixe em nodejs.org)

Seu primeiro código JavaScript

Crie um arquivo chamado index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Meu Primeiro JavaScript</title>
</head>
<body>
    <h1>Olá, JavaScript!</h1>

    <script>
        console.log("Meu primeiro código JavaScript!");
        alert("Bem-vindo ao JavaScript!");
    </script>
</body>
</html>

Abra este arquivo no navegador e veja a mágica acontecer! Pressione F12 para abrir o Console do Desenvolvedor e ver a mensagem.

Variáveis: Armazenando Dados

Em JavaScript, temos três formas de declarar variáveis: var, let e const.

let - Para valores que podem mudar

let nome = "João";
let idade = 25;
let salario = 3500.50;

console.log(nome);  // "João"

// Você pode mudar o valor depois
nome = "João Silva";
idade = 26;

const - Para valores constantes

const PI = 3.14159;
const PAIS = "Brasil";
const CPF = "123.456.789-00";

// Isto causaria erro:
// PI = 3.14;  // Erro! Não pode modificar const

Boa prática: Use const por padrão. Só use let quando o valor realmente precisar mudar. Evite var (é legado).

Tipos de Dados

// String (texto)
let nome = "Maria";
let frase = "Olá, mundo!";
let template = `Meu nome é ${nome}`;  // Template string

// Number (números)
let idade = 30;
let preco = 99.90;
let negativo = -10;

// Boolean (verdadeiro/falso)
let ativo = true;
let logado = false;

// Array (lista)
let frutas = ["maçã", "banana", "laranja"];
let numeros = [1, 2, 3, 4, 5];

// Object (objeto)
let pessoa = {
    nome: "Ana",
    idade: 28,
    profissao: "Desenvolvedora"
};

// Undefined e Null
let indefinido;  // undefined
let nulo = null;

Operadores: Fazendo Cálculos e Comparações

Operadores Aritméticos

let a = 10;
let b = 3;

console.log(a + b);   // 13 (soma)
console.log(a - b);   // 7 (subtração)
console.log(a * b);   // 30 (multiplicação)
console.log(a / b);   // 3.333... (divisão)
console.log(a % b);   // 1 (resto da divisão)
console.log(a ** b);  // 1000 (potência: 10³)

// Incremento e decremento
let contador = 0;
contador++;  // 1
contador--;  // 0

Operadores de Comparação

console.log(5 == "5");   // true (compara valor)
console.log(5 === "5");  // false (compara valor E tipo)
console.log(5 != "5");   // false
console.log(5 !== "5");  // true

console.log(10 > 5);     // true
console.log(10 < 5);     // false
console.log(10 >= 10);   // true
console.log(10 <= 5);    // false

Importante: Sempre use === (triplo igual) ao invés de ==. O triplo igual compara tipo e valor, evitando bugs sutis.

Estruturas Condicionais: Tomando Decisões

if, else if, else

let idade = 20;

if (idade < 18) {
    console.log("Menor de idade");
} else if (idade < 60) {
    console.log("Adulto");
} else {
    console.log("Idoso");
}

// Operador ternário (forma curta)
let status = idade >= 18 ? "Maior" : "Menor";
console.log(status);

switch - Múltiplas opções

let diaSemana = 3;
let nomeDia;

switch (diaSemana) {
    case 1:
        nomeDia = "Segunda";
        break;
    case 2:
        nomeDia = "Terça";
        break;
    case 3:
        nomeDia = "Quarta";
        break;
    case 4:
        nomeDia = "Quinta";
        break;
    case 5:
        nomeDia = "Sexta";
        break;
    default:
        nomeDia = "Fim de semana";
}

console.log(nomeDia);  // "Quarta"

Loops: Repetindo Ações

for - Loop tradicional

// Contar de 1 a 5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// Percorrer array
let frutas = ["maçã", "banana", "laranja"];

for (let i = 0; i < frutas.length; i++) {
    console.log(frutas[i]);
}

for...of - Loop moderno para arrays

let numeros = [10, 20, 30, 40];

for (let numero of numeros) {
    console.log(numero);
}

while - Loop com condição

let contador = 0;

while (contador < 5) {
    console.log("Contagem:", contador);
    contador++;
}

Funções: Organizando seu Código

Função tradicional

function saudar(nome) {
    return "Olá, " + nome + "!";
}

console.log(saudar("Maria"));  // "Olá, Maria!"

// Função com múltiplos parâmetros
function calcularArea(largura, altura) {
    return largura * altura;
}

let area = calcularArea(5, 3);
console.log(area);  // 15

Arrow Function (função moderna)

// Sintaxe curta
const saudar = (nome) => "Olá, " + nome + "!";

// Com múltiplas linhas
const calcularIMC = (peso, altura) => {
    const imc = peso / (altura * altura);
    return imc.toFixed(2);
};

console.log(calcularIMC(70, 1.75));  // "22.86"

Arrays: Trabalhando com Listas

Métodos essenciais de arrays

let numeros = [1, 2, 3, 4, 5];

// map - transformar cada elemento
let dobrados = numeros.map(n => n * 2);
console.log(dobrados);  // [2, 4, 6, 8, 10]

// filter - filtrar elementos
let pares = numeros.filter(n => n % 2 === 0);
console.log(pares);  // [2, 4]

// reduce - reduzir a um único valor
let soma = numeros.reduce((total, n) => total + n, 0);
console.log(soma);  // 15

// find - encontrar elemento
let primeiro = numeros.find(n => n > 3);
console.log(primeiro);  // 4

// forEach - executar para cada elemento
numeros.forEach(n => console.log(n));

// Outros métodos úteis
numeros.push(6);        // adiciona no final
numeros.pop();          // remove do final
numeros.unshift(0);     // adiciona no início
numeros.shift();        // remove do início
console.log(numeros.includes(3));  // true
console.log(numeros.length);       // tamanho

Objetos: Estruturas de Dados Complexas

// Criando objeto
let pessoa = {
    nome: "João Silva",
    idade: 30,
    profissao: "Desenvolvedor",
    skills: ["JavaScript", "React", "Node.js"],

    // Método do objeto
    apresentar: function() {
        return `Olá, sou ${this.nome}`;
    }
};

// Acessando propriedades
console.log(pessoa.nome);           // "João Silva"
console.log(pessoa["idade"]);       // 30
console.log(pessoa.apresentar());   // "Olá, sou João Silva"

// Adicionando propriedades
pessoa.email = "joao@email.com";

// Deletando propriedades
delete pessoa.idade;

// Destructuring (extrair valores)
const { nome, profissao } = pessoa;
console.log(nome);  // "João Silva"

Manipulando o DOM: Interagindo com HTML

O DOM (Document Object Model) é como JavaScript se comunica com a página HTML.

Selecionando elementos

// Por ID
const titulo = document.getElementById("titulo");

// Por classe
const botoes = document.getElementsByClassName("botao");

// Por tag
const paragrafos = document.getElementsByTagName("p");

// Query selector (mais moderno)
const primeiro = document.querySelector(".item");
const todos = document.querySelectorAll(".item");

Modificando conteúdo

// Mudar texto
titulo.textContent = "Novo título";

// Mudar HTML
titulo.innerHTML = "Título em negrito";

// Mudar estilo
titulo.style.color = "blue";
titulo.style.fontSize = "24px";

// Adicionar/remover classes
titulo.classList.add("destaque");
titulo.classList.remove("antigo");
titulo.classList.toggle("ativo");

Eventos: Respondendo a ações do usuário

const botao = document.querySelector("#meuBotao");

// Click
botao.addEventListener("click", function() {
    alert("Botão clicado!");
});

// Com arrow function
botao.addEventListener("click", () => {
    console.log("Clique detectado!");
});

// Eventos comuns
input.addEventListener("input", (e) => {
    console.log(e.target.value);
});

form.addEventListener("submit", (e) => {
    e.preventDefault();  // Impede envio padrão
    console.log("Formulário enviado");
});

Projeto Prático: Contador Interativo

<!DOCTYPE html>
<html>
<head>
    <title>Contador</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial;
        }
        #contador {
            font-size: 72px;
            font-weight: bold;
            margin: 20px;
        }
        button {
            padding: 15px 30px;
            margin: 5px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Contador Interativo</h1>
    <div id="contador">0</div>
    <div>
        <button id="diminuir">-</button>
        <button id="zerar">Zerar</button>
        <button id="aumentar">+</button>
    </div>

    <script>
        let valor = 0;
        const contadorElement = document.getElementById("contador");
        const btnDiminuir = document.getElementById("diminuir");
        const btnZerar = document.getElementById("zerar");
        const btnAumentar = document.getElementById("aumentar");

        function atualizarDisplay() {
            contadorElement.textContent = valor;

            // Mudar cor baseado no valor
            if (valor > 0) {
                contadorElement.style.color = "green";
            } else if (valor < 0) {
                contadorElement.style.color = "red";
            } else {
                contadorElement.style.color = "black";
            }
        }

        btnAumentar.addEventListener("click", () => {
            valor++;
            atualizarDisplay();
        });

        btnDiminuir.addEventListener("click", () => {
            valor--;
            atualizarDisplay();
        });

        btnZerar.addEventListener("click", () => {
            valor = 0;
            atualizarDisplay();
        });
    </script>
</body>
</html>

Projeto Prático: Lista de Tarefas

<!DOCTYPE html>
<html>
<head>
    <title>Lista de Tarefas</title>
    <style>
        body {
            max-width: 600px;
            margin: 50px auto;
            font-family: Arial;
        }
        input {
            width: 70%;
            padding: 10px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            padding: 15px;
            margin: 10px 0;
            background: #f0f0f0;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }
        .concluida {
            text-decoration: line-through;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <h1>📝 Minhas Tarefas</h1>

    <div>
        <input type="text" id="inputTarefa" placeholder="Digite uma tarefa...">
        <button id="btnAdicionar">Adicionar</button>
    </div>

    <ul id="listaTarefas"></ul>

    <script>
        const input = document.getElementById("inputTarefa");
        const btnAdicionar = document.getElementById("btnAdicionar");
        const lista = document.getElementById("listaTarefas");

        function adicionarTarefa() {
            const texto = input.value.trim();

            if (texto === "") {
                alert("Digite uma tarefa!");
                return;
            }

            // Criar elemento li
            const li = document.createElement("li");

            // Criar span com texto
            const span = document.createElement("span");
            span.textContent = texto;
            span.style.cursor = "pointer";

            // Click no texto marca como concluída
            span.addEventListener("click", () => {
                li.classList.toggle("concluida");
            });

            // Criar botão remover
            const btnRemover = document.createElement("button");
            btnRemover.textContent = "❌";
            btnRemover.style.background = "none";
            btnRemover.style.border = "none";
            btnRemover.style.cursor = "pointer";
            btnRemover.style.fontSize = "18px";

            btnRemover.addEventListener("click", () => {
                li.remove();
            });

            // Montar estrutura
            li.appendChild(span);
            li.appendChild(btnRemover);
            lista.appendChild(li);

            // Limpar input
            input.value = "";
            input.focus();
        }

        // Adicionar ao clicar no botão
        btnAdicionar.addEventListener("click", adicionarTarefa);

        // Adicionar ao pressionar Enter
        input.addEventListener("keypress", (e) => {
            if (e.key === "Enter") {
                adicionarTarefa();
            }
        });
    </script>
</body>
</html>

Assincronismo: Fetch API e Promises

JavaScript é assíncrono, permitindo executar código sem travar a página.

// Buscar dados de uma API
fetch("https://api.github.com/users/github")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Erro:", error);
    });

// Com async/await (mais limpo)
async function buscarUsuario() {
    try {
        const response = await fetch("https://api.github.com/users/github");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Erro:", error);
    }
}

buscarUsuario();

Próximos Passos

Agora que você domina o básico, pode avançar para:

ES6+ moderno: Destructuring, spread operator, modules
Frameworks: React, Vue ou Angular
Node.js: JavaScript no servidor
TypeScript: JavaScript com tipos
APIs: Consumir e criar APIs REST

Dica final: A melhor forma de aprender JavaScript é construindo projetos. Comece pequeno e vá aumentando a complexidade!

JavaScript do Zero: Aprenda a Linguagem Mais Popular da Web com Exemplos Práticos

Por Que JavaScript é Essencial em 2026?

O que torna JavaScript especial?

Configurando seu Ambiente de Desenvolvimento

O que você vai precisar?

Seu primeiro código JavaScript

Variáveis: Armazenando Dados

let - Para valores que podem mudar

const - Para valores constantes

Tipos de Dados

Operadores: Fazendo Cálculos e Comparações

Operadores Aritméticos

Operadores de Comparação

Estruturas Condicionais: Tomando Decisões

if, else if, else

switch - Múltiplas opções

Loops: Repetindo Ações

for - Loop tradicional

for...of - Loop moderno para arrays

while - Loop com condição

Funções: Organizando seu Código

Função tradicional

Arrow Function (função moderna)

Arrays: Trabalhando com Listas

Métodos essenciais de arrays

Objetos: Estruturas de Dados Complexas

Manipulando o DOM: Interagindo com HTML

Selecionando elementos

Modificando conteúdo

Eventos: Respondendo a ações do usuário

Projeto Prático: Contador Interativo

Projeto Prático: Lista de Tarefas

Assincronismo: Fetch API e Promises

Próximos Passos

Quer aprender programação profissionalmente?

JavaScript do Zero: Aprenda a Linguagem Mais Popular da Web com Exemplos Práticos

Por Que JavaScript é Essencial em 2026?

O que torna JavaScript especial?

Configurando seu Ambiente de Desenvolvimento

O que você vai precisar?

Seu primeiro código JavaScript

Variáveis: Armazenando Dados

let - Para valores que podem mudar

const - Para valores constantes

Tipos de Dados

Operadores: Fazendo Cálculos e Comparações

Operadores Aritméticos

Operadores de Comparação

Estruturas Condicionais: Tomando Decisões

if, else if, else

switch - Múltiplas opções

Loops: Repetindo Ações

for - Loop tradicional

for...of - Loop moderno para arrays

while - Loop com condição

Funções: Organizando seu Código

Função tradicional

Arrow Function (função moderna)

Arrays: Trabalhando com Listas

Métodos essenciais de arrays

Objetos: Estruturas de Dados Complexas

Manipulando o DOM: Interagindo com HTML

Selecionando elementos

Modificando conteúdo

Eventos: Respondendo a ações do usuário

Projeto Prático: Contador Interativo

Projeto Prático: Lista de Tarefas

Assincronismo: Fetch API e Promises

Próximos Passos

Artigos Relacionados

JavaScript vs Python: Qual Linguagem Aprender Primeiro em 2026?

React vs Vue.js: Qual Framework JavaScript Escolher em 2026?

Git e GitHub: Guia Definitivo para Controle de Versão e Colaboração

Quer aprender programação profissionalmente?