JavaScript: Introdução ao JavaScript
JavaScript é a linguagem de programação da web — ela dá vida às páginas HTML estáticas.
Este tutorial foi pensado para iniciantes absolutos. Vamos começar com variáveis e funções, e avançar até construir um aplicativo completo de lista de tarefas sozinho.
1. O Que Você Vai Aprender
- Sintaxe básica e conceitos fundamentais do JavaScript
- Trabalhar com arrays, objetos e funções
- Manipulação do DOM e tratamento de eventos
- Programação assíncrona e módulos
- Prática com projetos reais
▶ Exemplo
// Exemplo de código desta seção
const message = "Olá, Mundo!";
console.log(message);
Este é o exemplo mais simples; as seções seguintes explicarão em detalhes.## 2. Pré-requisitos
Antes de começar este tutorial, você deve estar familiarizado com:
- HTML básico (tags, atributos, formulários)
- CSS básico (seletores, modelo de caixa)
3. O Que É JavaScript
JavaScript é uma linguagem de script que roda diretamente no navegador — sem necessidade de compilação. O navegador lê e executa o código JS linha por linha.
O JS foi criado originalmente apenas para navegadores, mas seu alcance se expandiu para servidores (Node.js), aplicativos desktop (Electron) e até aplicativos móveis (React Native). Neste tutorial, vamos focar em como o JS funciona em páginas web.
4. O Que o JavaScript Pode Fazer
O JS cuida de praticamente todos os aspectos da interação web:
- Alterar conteúdo HTML — substituir texto na página ao clicar em um botão
- Responder a eventos — executar lógica quando o usuário clica, rola ou digita
- Validar formulários — verificar formato de e-mail e tamanho de senha antes do envio
- Manipular CSS — alterar estilos dinamicamente e criar animações
- Se comunicar com servidores — buscar dados sem recarregar a página (AJAX)
Resumindo: HTML monta a estrutura, CSS estiliza e JavaScript torna tudo interativo.
5. JavaScript e HTML/CSS — O Relacionamento
Pense em uma página web como uma pessoa:
- HTML é o esqueleto — define a estrutura da página
- CSS é a pele e as roupas — controla a aparência
- JavaScript é os músculos — faz a página se mover e reagir
Cada um tem seu papel. O JS altera a aparência e o comportamento da página manipulando elementos HTML e estilos CSS.
6. Uma Breve História do JavaScript
Em 1995, Brendan Eich, na Netscape, escreveu a primeira versão do JavaScript em apenas 10 dias. Sim, a linguagem que hoje domina a web nasceu em menos de duas semanas.
Alguns equívocos comuns:
- JavaScript e Java são duas linguagens completamente diferentes — apesar de compartilharem o nome, isso é tudo
- O JS se chamava originalmente Mocha, depois foi renomeado para LiveScript e, por fim, para JavaScript para surfar na popularidade do Java
- Em 1997, o JS foi submetido à ECMA para padronização. Seu nome oficial passou a ser ECMAScript (ES). O ES6 que você ouve falar é a sexta edição, lançada em 2015
7. Como os Navegadores Executam JavaScript
Todo navegador possui um mecanismo JS embutido que traduz seu código em instruções de máquina:
- Chrome / Edge: mecanismo V8
- Firefox: mecanismo SpiderMonkey
- Safari: mecanismo JavaScriptCore
O processo é simples: o navegador carrega o HTML → encontra uma tag script → o mecanismo JS analisa e executa linha por linha → os resultados aparecem na página.
▶ Exemplo: Alterando Texto da Página com JavaScript
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Introdução JS - Alterando Texto</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
#msg { font-size: 24px; color: #333; transition: all 0.3s; }
button { padding: 12px 28px; font-size: 16px; cursor: pointer; border: none; border-radius: 6px; background: #4CAF50; color: #fff; }
button:hover { background: #45a049; }
</style>
</head>
<body>
<p id="msg">Olá, Mundo!</p>
<button id="changeBtn">Clique para Alterar o Texto</button>
<script>
document.getElementById("changeBtn").onclick = function() {
document.getElementById("msg").textContent = "O JavaScript dá vida à página!";
document.getElementById("msg").style.color = "#e91e63";
};
</script>
</body>
</html>
▶ Exemplo: JavaScript Respondendo a Eventos do Usuário
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Introdução JS - Tratamento de Eventos</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
.card { display: inline-block; padding: 40px; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; transition: all 0.3s; }
.card:hover { border-color: #2196F3; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.card.active { border-color: #e91e63; background: #fce4ec; }
#info { margin-top: 20px; font-size: 18px; color: #555; }
</style>
</head>
<body>
<div class="card" id="myCard">
<p>Passe o mouse sobre este cartão</p>
</div>
<p id="info"></p>
<script>
var card = document.getElementById("myCard");
var info = document.getElementById("info");
card.onmouseenter = function() {
info.textContent = "Você entrou na área do cartão!";
card.classList.add("active");
};
card.onmouseleave = function() {
info.textContent = "Você saiu da área do cartão!";
card.classList.remove("active");
};
</script>
</body>
</html>
▶ Exemplo: Validação de Formulário com JavaScript
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Introdução JS - Validação de Formulário</title>
<style>
body { font-family: Arial, sans-serif; max-width: 400px; margin: 60px auto; }
label { display: block; margin-top: 16px; font-weight: bold; }
input { width: 100%; padding: 8px; margin-top: 4px; border: 2px solid #ddd; border-radius: 4px; box-sizing: border-box; }
input:focus { outline: none; border-color: #2196F3; }
button { margin-top: 20px; padding: 10px 24px; border: none; border-radius: 6px; background: #2196F3; color: #fff; cursor: pointer; font-size: 16px; }
button:hover { background: #1976D2; }
.error { color: #e91e63; font-size: 14px; margin-top: 4px; display: none; }
.success { color: #4CAF50; font-size: 16px; margin-top: 12px; display: none; }
</style>
</head>
<body>
<h2>Cadastro de Usuário</h2>
<label for="username">Nome de Usuário</label>
<input type="text" id="username" placeholder="Mínimo 3 caracteres">
<p class="error" id="usernameError">O nome de usuário deve ter pelo menos 3 caracteres</p>
<label for="email">E-mail</label>
<input type="text" id="email" placeholder="Digite seu e-mail">
<p class="error" id="emailError">Por favor, insira um endereço de e-mail válido</p>
<button id="submitBtn">Enviar</button>
<p class="success" id="successMsg">Validação aprovada — enviado com sucesso!</p>
<script>
document.getElementById("submitBtn").onclick = function() {
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var valid = true;
if (username.length < 3) {
document.getElementById("usernameError").style.display = "block";
valid = false;
} else {
document.getElementById("usernameError").style.display = "none";
}
if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
document.getElementById("emailError").style.display = "block";
valid = false;
} else {
document.getElementById("emailError").style.display = "none";
}
if (valid) {
document.getElementById("successMsg").style.display = "block";
} else {
document.getElementById("successMsg").style.display = "none";
}
};
</script>
</body>
</html>
❓ Perguntas Frequentes
P：JavaScript e Java são a mesma linguagem? R：De forma alguma. Compartilham o nome, mas são completamente diferentes — Java é uma linguagem compilada usada para backends e desenvolvimento Android, enquanto JavaScript é uma linguagem de script interpretada usada principalmente em páginas web. A semelhança no nome é apenas uma coincidência de marketing.
P：Preciso dominar HTML e CSS antes de aprender JS? R：Não precisa dominar, mas deve entender o básico. O JS trabalha principalmente manipulando elementos HTML e estilos CSS, então se você não consegue ler tags e seletores, aprender JS será uma batalha ladeira acima.
P：O JS só pode ser usado no navegador? R：Não. O Node.js permite que o JS rode em servidores, o Electron permite criar aplicativos desktop e o React Native permite criar aplicativos móveis. Mas o navegador continua sendo o principal palco do JS.
📖 Resumo
- JavaScript é a linguagem de script do navegador — interpreta e executa o código linha por linha sem etapa de compilação
- Principais capacidades do JS: alterar conteúdo, responder a eventos, validar formulários, manipular estilos, se comunicar com servidores
- HTML/CSS/JS têm papéis claros — estrutura, apresentação e comportamento
- O JS foi criado por Brendan Eich em 1995 em 10 dias e depois padronizado pela ECMA como ECMAScript
- Os navegadores executam o código por meio de mecanismos JS embutidos, como o V8
📝 Exercícios
- Iniciante: Crie uma página HTML com um botão e um parágrafo. Ao clicar no botão, altere o texto do parágrafo para "Eu aprendi JavaScript!" e torne a cor do texto azul.
- Intermediário: Crie uma página com dois botões — "Aumentar" e "Diminuir" — que aumentam ou diminuem o tamanho da fonte de um texto em 2px a cada clique.
- Desafio: Crie uma página simples de validação de senha. A senha deve ter pelo menos 6 caracteres e conter pelo menos um dígito. Exiba uma mensagem de erro em vermelho abaixo do campo de entrada quando as condições não forem atendidas.
