Skip to main content

JavaScript Fundamentos

Introdução à Programação com JavaScript​

JavaScript é a linguagem de programação que torna as páginas web interativas e dinâmicas. Enquanto HTML fornece a estrutura e CSS a apresentação, JavaScript adiciona comportamento - responde a cliques, atualiza conteúdo dinamicamente, valida formulários, faz requisições a servidores, e muito mais.

JavaScript é uma das linguagens de programação mais populares do mundo. Com JavaScript, você pode desenvolver aplicações web frontend e backend (Node.js), aplicativos mobile (React Native), desktop (Electron), e muito mais.

Como Adicionar JavaScript ao HTML​

1. JavaScript Inline (no atributo onclick)​

<button onclick="alert('Olá!')">Clique em mim</button>

2. JavaScript Interno (na tag <script>)​

<script>
    function saudacao() {
        alert('Olá, mundo!');
    }
</script>

3. JavaScript Externo (arquivo separado) ⭐ Recomendado​

<script src="script.js"></script>

E no arquivo script.js:

function saudacao() {
    alert('Olá, mundo!');
}

Variáveis: Armazenando Dados​

Variáveis são como caixas onde você armazena informações:

let nome = "João";
let idade = 25;
let ativo = true;

let vs const​

let: Usado para variáveis que podem mudar:

let contador = 0;
contador = 1;  // OK
contador = 2;  // OK

const: Usado para valores que não devem mudar:

const PI = 3.14159;
const URL_API = "https://api.exemplo.com";
// PI = 3;  // Erro! Não pode mudar uma constante

Tipos de Dados​

// String (texto)
let nome = "Maria";
let sobrenome = 'Silva';
let frase = `Olá, ${nome}!`;  // Template literal

// Number (números)
let idade = 30;
let preco = 19.99;

// Boolean (verdadeiro ou falso)
let maiorDeIdade = true;
let temCarteira = false;

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

// Object (coleção de propriedades)
let pessoa = {
    nome: "João",
    idade: 25,
    cidade: "São Paulo"
};

Operadores​

Operadores Aritméticos​

let soma = 10 + 5;          // 15
let subtracao = 10 - 5;     // 5
let multiplicacao = 10 * 5; // 50
let divisao = 10 / 5;       // 2
let resto = 10 % 3;         // 1
let potencia = 10 ** 2;     // 100

Operadores de Comparação​

10 > 5    // true (maior que)
10 < 5    // false (menor que)
10 >= 5   // true (maior ou igual)
10 === 10 // true (igual estrito)
10 !== 5  // true (diferente)

Operadores Lógicos​

true && true   // true (E)
true || false  // true (OU)
!true          // false (NÃO)

Estruturas de Controle​

Condicionais: if/else​

let idade = 18;

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

Múltiplas condições:

let nota = 85;

if (nota >= 90) {
    console.log("Excelente!");
} else if (nota >= 70) {
    console.log("Bom!");
} else if (nota >= 50) {
    console.log("Regular");
} else {
    console.log("Precisa melhorar");
}

Operador Ternário​

let idade = 20;
let status = idade >= 18 ? "Maior" : "Menor";
console.log(status);  // "Maior"

Loops: Repetindo Ações​

for: Quando você sabe quantas vezes repetir:

for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

while: Repete enquanto uma condição for verdadeira:

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

for...of: Itera sobre arrays:

let frutas = ["maçã", "banana", "laranja"];
for (let fruta of frutas) {
    console.log(fruta);
}

forEach: Método de array:

let frutas = ["maçã", "banana", "laranja"];
frutas.forEach(function(fruta) {
    console.log(fruta);
});

Funções: Reutilizando Código​

Funções são blocos de código reutilizáveis:

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

let mensagem = saudacao("Maria");
console.log(mensagem);  // "Olá, Maria!"

Arrow Functions​

Forma moderna e concisa:

const saudacao = (nome) => {
    return "Olá, " + nome + "!";
};

// Forma ainda mais concisa
const saudacao = (nome) => "Olá, " + nome + "!";

Parâmetros e Retorno​

function calcularArea(largura, altura) {
    return largura * altura;
}

let area = calcularArea(10, 5);
console.log(area);  // 50

Valores Padrão​

function saudacao(nome = "Visitante") {
    return "Olá, " + nome + "!";
}

console.log(saudacao());         // "Olá, Visitante!"
console.log(saudacao("João"));   // "Olá, João!"

Arrays: Trabalhando com Listas​

let frutas = ["maçã", "banana"];

// Adicionar elementos
frutas.push("laranja");      // Adiciona no final
frutas.unshift("uva");       // Adiciona no início

// Remover elementos
frutas.pop();                // Remove do final
frutas.shift();              // Remove do início

// Encontrar elementos
frutas.indexOf("banana");    // Retorna o índice
frutas.includes("maçã");     // Retorna true ou false

// Transformar arrays
let numeros = [1, 2, 3, 4, 5];
let dobrados = numeros.map(n => n * 2);        // [2, 4, 6, 8, 10]
let pares = numeros.filter(n => n % 2 === 0);  // [2, 4]
let soma = numeros.reduce((acc, n) => acc + n); // 15

Objetos: Organizando Dados​

let pessoa = {
    nome: "João",
    idade: 30,
    cidade: "São Paulo",
    apresentar: function() {
        return "Olá, eu sou " + this.nome;
    }
};

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

// Adicionar/modificar propriedades
pessoa.profissao = "Desenvolvedor";
pessoa.idade = 31;

Manipulação do DOM​

O DOM (Document Object Model) é a representação do HTML no JavaScript. Através do DOM, você pode acessar e modificar elementos da página.

Selecionando Elementos​

// Por ID
let elemento = document.getElementById("meuId");

// Por classe
let elementos = document.getElementsByClassName("minhaClasse");

// Por seletor CSS (retorna o primeiro)
let elemento = document.querySelector("#meuId .minhaClasse");

// Por seletor CSS (retorna todos)
let elementos = document.querySelectorAll(".minhaClasse");

Modificando Conteúdo​

let titulo = document.querySelector("h1");
titulo.textContent = "Novo Título";
titulo.innerHTML = "<strong>Novo Título</strong>";

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

Criando e Adicionando Elementos​

// Criar novo elemento
let novoParagrafo = document.createElement("p");
novoParagrafo.textContent = "Este é um novo parágrafo";

// Adicionar ao DOM
let container = document.querySelector(".container");
container.appendChild(novoParagrafo);

Eventos: Respondendo a Ações do Usuário​

Eventos são ações que acontecem na página (cliques, digitação, movimento do mouse, etc.):

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

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

Eventos Comuns​

// Clique
elemento.addEventListener("click", function() { });

// Duplo clique
elemento.addEventListener("dblclick", function() { });

// Mouse entra/sai
elemento.addEventListener("mouseenter", function() { });
elemento.addEventListener("mouseleave", function() { });

// Tecla pressionada
elemento.addEventListener("keydown", function(event) {
    console.log(event.key);  // Qual tecla foi pressionada
});

// Formulário enviado
formulario.addEventListener("submit", function(event) {
    event.preventDefault();  // Previne comportamento padrão
    // Seu código aqui
});

Exemplo Prático: Validação de Formulário​

let formulario = document.querySelector("#meuFormulario");

formulario.addEventListener("submit", function(event) {
    event.preventDefault();
    
    let email = document.querySelector("#email").value;
    
    if (email.includes("@")) {
        alert("Formulário válido!");
    } else {
        alert("Email inválido!");
    }
});

Trabalhando com APIs​

// Fazendo uma requisição GET simples
fetch('https://api.exemplo.com/dados')
    .then(response => response.json())
    .then(data => {
        console.log('Dados recebidos:', data);
    })
    .catch(error => {
        console.error('Erro:', error);
    });

Boas Práticas de JavaScript​

1. Use Nomes Descritivos​

// Bom
let numeroDeUsuarios = 10;
function calcularTotal() { }

// Ruim
let n = 10;
function calc() { }

2. Use const por Padrão, let Quando Necessário​

Prefira const sempre que possível. Use let apenas quando o valor precisa mudar.

3. Comente Código Complexo​

// Calcula o desconto baseado no valor e categoria do cliente
function calcularDesconto(valor, categoria) {
    // Lógica complexa aqui
}

4. Use console.log para Debugar​

function calcularTotal(preco, quantidade) {
    console.log("Preço:", preco);
    console.log("Quantidade:", quantidade);
    let total = preco * quantidade;
    console.log("Total:", total);
    return total;
}

Exemplo Completo: Lista de Tarefas​

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Lista de Tarefas</title>
</head>
<body>
    <h1>Minha Lista de Tarefas</h1>
    
    <input type="text" id="novaTarefa" placeholder="Digite uma tarefa">
    <button id="adicionar">Adicionar</button>
    
    <ul id="listaTarefas"></ul>
    
    <script>
        const botaoAdicionar = document.querySelector("#adicionar");
        const inputTarefa = document.querySelector("#novaTarefa");
        const lista = document.querySelector("#listaTarefas");
        
        botaoAdicionar.addEventListener("click", function() {
            const textoTarefa = inputTarefa.value;
            
            if (textoTarefa !== "") {
                const novoItem = document.createElement("li");
                novoItem.textContent = textoTarefa;
                lista.appendChild(novoItem);
                inputTarefa.value = "";
            }
        });
    </script>
</body>
</html>

Próximos Passos​

Agora você tem as três tecnologias fundamentais da web: HTML para estrutura, CSS para apresentação, e JavaScript para interatividade. Nos próximos módulos, vamos explorar as diferentes áreas do desenvolvimento web (Frontend, Backend, Fullstack) e ferramentas essenciais como Git.

Antes de continuar, pratique JavaScript criando pequenos projetos: uma calculadora, um jogo simples, um validador de formulário, ou uma lista de tarefas mais completa.

Referências​