Introdução ao JavaScript

JavaScript é a linguagem que dá VIDA às páginas web. Com ela, você cria interatividade!

O que JavaScript pode fazer?

Reagir a cliques e eventos
Validar formulários
Mostrar/esconder elementos
Buscar dados da internet
Criar jogos
E muito mais!

Onde escrever JavaScript?

No HTML (tag script)

html

<!DOCTYPE html><html><head>    <title>Meu Site</title></head><body>    <h1>Olá!</h1>     <script>        alert("Bem-vindo ao meu site!");    </script></body></html>

Arquivo externo (recomendado)

Crie script.js:

javascript

alert("Bem-vindo!");

Conecte no HTML (antes de fechar body):

html

<body>    <h1>Olá!</h1>    <script src="script.js"></script></body>

Console do navegador

O console é sua melhor ferramenta de aprendizado!

Abra o Chrome
Pressione F12 (ou Ctrl+Shift+I)
Clique na aba "Console"
Digite código e pressione Enter

Experimente:

javascript

console.log("Olá, mundo!");

console.log() exibe mensagens no console. Usamos MUITO para testar código!

Seu primeiro programa

javascript

// Isso é um comentário - o computador ignora // Exibir no consoleconsole.log("Estou aprendendo JavaScript!"); // Exibir uma caixa de alertaalert("Olá!"); // Fazer uma perguntalet nome = prompt("Qual seu nome?");console.log("Olá, " + nome);

Tipos de dados

JavaScript trabalha com diferentes tipos de informação:

String (texto)

javascript

let nome = "Maria";let frase = 'JavaScript é legal!';

Number (número)

javascript

let idade = 25;let preco = 99.90;

Boolean (verdadeiro/falso)

javascript

let maiorDeIdade = true;let estaChovendo = false;

Operações básicas

Matemática

javascript

let soma = 10 + 5;        // 15let subtracao = 10 - 5;   // 5let multiplicacao = 10 * 5; // 50let divisao = 10 / 5;     // 2let resto = 10 % 3;       // 1 (resto da divisão)

Texto

javascript

let primeiro = "Olá";let segundo = "Mundo";let junto = primeiro + " " + segundo; // "Olá Mundo"

Isso se chama concatenação - juntar textos.

Template Literals (jeito moderno)

Use crases (`) para incluir variáveis no texto:

javascript

let nome = "João";let idade = 25; // Jeito antigoconsole.log("Olá, " + nome + "! Você tem " + idade + " anos."); // Jeito moderno (template literal)console.log(`Olá, ${nome}! Você tem ${idade} anos.`);

Muito mais fácil de ler!

Exercício prático

Crie um arquivo script.js e um index.html:

html

<!DOCTYPE html><html><head>    <title>Aprendendo JS</title></head><body>    <h1>Abra o console (F12)</h1>    <script src="script.js"></script></body></html>

javascript

// script.js // 1. Pergunte o nomelet nome = prompt("Qual seu nome?"); // 2. Pergunte a idadelet idade = prompt("Qual sua idade?"); // 3. Calcule o ano de nascimentolet anoAtual = 2026;let anoNascimento = anoAtual - idade; // 4. Exiba os resultadosconsole.log(`Olá, ${nome}!`);console.log(`Você nasceu aproximadamente em ${anoNascimento}.`); // 5. Exiba um alerta personalizadoalert(`Bem-vindo, ${nome}!`);

Erros comuns

Esquecer aspas em strings

javascript

// Erradolet nome = Maria; // Certolet nome = "Maria";

Usar = ao invés de == ou ===

javascript

// = é atribuição (guardar valor)let x = 10; // == ou === é comparação (veremos depois)

Nome de variável inválido

javascript

// Errado - não pode começar com númerolet 1nome = "João"; // Errado - não pode ter espaçolet meu nome = "João"; // Certolet meuNome = "João";let nome1 = "João";

Boas práticas

Use nomes descritivos

javascript

// Ruimlet x = 25; // Bomlet idadeUsuario = 25;

Use camelCase

javascript

let nomeCompleto = "João Silva";let dataNascimento = "01/01/2000";

Comente código complexo

javascript

// Calcula o desconto baseado na quantidadelet desconto = quantidade > 10 ? 0.1 : 0;

Resumo

✅ JavaScript adiciona interatividade
✅ console.log() para debug
✅ Tipos: string, number, boolean
✅ Operações matemáticas e concatenação
✅ Template literals com crases

Na próxima aula, vamos aprofundar em variáveis e tipos de dados! 🚀