JavaScript - Linguagem de Programação Web

O JavaScript torna suas páginas web interativas e dinâmicas!

O que é JavaScript?

JavaScript é uma linguagem de programação que permite adicionar interatividade às suas páginas web. Se HTML é o esqueleto e CSS é a aparência, JavaScript é o cérebro que faz tudo funcionar!

// Este é um comentário JavaScript
console.log("Olá, mundo!"); // Mostra mensagem no console

// Variáveis
let nome = "João";
let idade = 25;

// Função simples
function cumprimentar(nome) {
  return "Olá, " + nome + "!";
}

console.log(cumprimentar(nome)); // Olá, João!

Conceitos Fundamentais

Variáveis

Armazenam dados que podem ser usados e modificados durante o programa.

let nome = "Maria";
const PI = 3.14;
var idade = 30;

// Tipos de dados
let numero = 42;
let texto = "JavaScript é legal!";
let booleano = true;

Condicionais

Executam código baseado em condições (if, else if, else).

let idade = 18;

if (idade >= 18) {
  console.log("Você é maior de idade!");
} else {
  console.log("Você é menor de idade.");
}

Loops

Repetem código várias vezes (for, while, do-while).

// Loop for
for (let i = 0; i < 5; i++) {
  console.log("Número: " + i);
}

// Loop while
let contador = 0;
while (contador < 3) {
  console.log("Contador: " + contador);
  contador++;
}

Funções

Blocos de código reutilizáveis que realizam tarefas específicas.

// Declaração de função
function somar(a, b) {
  return a + b;
}

// Arrow function
const multiplicar = (a, b) => a * b;

console.log(somar(5, 3)); // 8
console.log(multiplicar(4, 2)); // 8

Arrays

Listas ordenadas de elementos que podem ser acessados por índice.

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

console.log(frutas[0]); // "maçã"
console.log(frutas.length); // 3

// Adicionar elemento
frutas.push("manga");

// Percorrer array
frutas.forEach(fruta => {
  console.log(fruta);
});

Eventos

Responde a ações do usuário como cliques, teclas pressionadas, etc.

// Evento de clique
button.addEventListener('click', function() {
  alert('Botão clicado!');
});

// Evento de tecla
document.addEventListener('keydown', function(event) {
  console.log('Tecla pressionada: ' + event.key);
});

Manipulando o DOM

O DOM (Document Object Model) permite que o JavaScript acesse e modifique elementos HTML:

Selecionando Elementos

// Por ID
let titulo = document.getElementById('meu-titulo');

// Por classe
let botoes = document.getElementsByClassName('botao');

// Por seletor CSS
let paragrafo = document.querySelector('p');
let divs = document.querySelectorAll('div');

Modificando Elementos

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

// Mudar HTML interno
div.innerHTML = "
Novo conteúdo
";

// Mudar estilo
elemento.style.color = "red";
elemento.style.fontSize = "20px";

// Adicionar/remover classes
elemento.classList.add("destaque");
elemento.classList.remove("oculto");

Exercício Prático

Crie uma Página Interativa

Vamos criar uma página que responda a cliques do usuário:

  1. Crie um arquivo HTML com um botão e um parágrafo
  2. Adicione um arquivo JavaScript com o código abaixo
  3. Teste clicando no botão!

HTML:

<button id="meu-botao">Clique em mim!</button>
<p id="mensagem">Mensagem inicial</p>

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

JavaScript (script.js):

// Seleciona elementos
let botao = document.getElementById('meu-botao');
let mensagem = document.getElementById('mensagem');
let contador = 0;

// Adiciona evento de clique
botao.addEventListener('click', function() {
  contador++;
  mensagem.textContent = 'Botão clicado ' + contador + ' vezes!';
  
  // Muda cor aleatoriamente
  let cores = ['red', 'blue', 'green', 'purple', 'orange'];
  let corAleatoria = cores[Math.floor(Math.random() * cores.length)];
  mensagem.style.color = corAleatoria;
});

Demonstração Interativa

Teste Aqui Mesmo!

Clique no botão abaixo para ver JavaScript em ação:

Mensagem inicial

Contador: 0

Dicas de JavaScript

  • Sempre declare variáveis: Use let ou const, evite var
  • Use console.log(): Para debugar e entender o código
  • Teste incrementalmente: Vá testando partes do código
  • Entenda os erros: Leia as mensagens do console
  • Pratique: Crie pequenos projetos para aplicar o que aprendeu
Voltar: CSS Próximo: Python