JavaScript

Apresentação

Este módulo introduz o estudante ao JavaScript, linguagem responsável pelo comportamento, pela interação e pela dinamicidade das páginas Web. Enquanto o HTML organiza a estrutura e o CSS define a apresentação visual, o JavaScript permite que a página responda a ações do usuário, manipule elementos da interface, valide dados, processe informações e altere o conteúdo em tempo real.

Nesta proposta, os exemplos foram organizados de forma integrada ao arquivo index.html, de modo que o estudante compreenda com clareza:

onde o código JavaScript pode ser inserido;
como o navegador executa scripts;
como o JavaScript interage com os elementos HTML;
como eventos, variáveis, funções e manipulação do DOM se articulam na prática.

Objetivos da aula

Ao final desta aula, o estudante deverá ser capaz de:

compreender o papel do JavaScript no desenvolvimento Web;
integrar scripts ao arquivo index.html;
declarar variáveis e utilizar tipos de dados básicos;
escrever comandos condicionais e estruturas de repetição introdutórias;
criar e chamar funções;
manipular elementos HTML por meio do DOM;
responder a eventos do usuário;
aplicar validações e interações simples em páginas Web.

Competências desenvolvidas

relação entre estrutura, estilo e comportamento na Web;
leitura e escrita de scripts básicos;
integração entre HTML e JavaScript;
desenvolvimento de interações elementares no navegador;
construção de raciocínio lógico aplicado à interface Web.

Metodologia

Aula expositivo-prática, com codificação progressiva no editor e teste imediato no navegador. Recomenda-se que o professor trabalhe com:

um arquivo index.html;
em alguns momentos, um arquivo script.js.

A cada exemplo, o ideal é mostrar:

o trecho no HTML;
o trecho JavaScript correspondente;
o comportamento produzido na página ou no console do navegador.

Usem o Console do Navegador como ferramenta de apoio didático, pois ele ajuda a observar saídas e diagnosticar erros.

Recursos necessários

computador com editor de código, preferencialmente VS Code;
navegador atualizado;
projetor ou tela para demonstração;
pasta contendo o arquivo index.html;
opcionalmente, arquivo script.js.

Conceitos fundamentais do JavaScript

JavaScript é a linguagem que permite tornar a página interativa. Com ela, é possível:

reagir a cliques e teclas;
alterar textos, imagens e estilos;
validar formulários;
mostrar mensagens;
criar cálculos e comportamentos dinâmicos;
comunicar-se com recursos externos em níveis mais avançados.

No navegador, o JavaScript pode ser incluído de diferentes formas, mas em projetos organizados recomenda-se o uso de arquivo externo.

Exemplo 1 — Inserindo JavaScript diretamente no `index.html`

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Interno</title>
</head>
<body>
    <h1>Aula de JavaScript</h1>

    <script>
        alert("Olá! Este é o primeiro script JavaScript.");
    </script>
</body>
</html>

Explicação detalhada

Nesse exemplo, o código JavaScript foi escrito diretamente dentro da tag <script> no próprio arquivo HTML.

A instrução:

alert("Olá! Este é o primeiro script JavaScript.");

faz o navegador abrir uma caixa de mensagem. Esse exemplo é útil para mostrar ao aluno que:

o navegador executa comandos JavaScript;
o script pode ficar dentro do HTML;
o JavaScript é interpretado em tempo de execução.

Didaticamente, esse é um bom ponto de partida, mas para projetos maiores o melhor é separar o script em arquivo externo.

Exemplo 2 — Ligando o arquivo `script.js` ao `index.html`

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Externo</title>
</head>
<body>
    <h1>Integração com script.js</h1>

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

Arquivo `script.js`

alert("O arquivo script.js foi carregado com sucesso.");

Explicação detalhada

Aqui o JavaScript está em um arquivo separado, chamado script.js, que é carregado pela linha:

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

Essa forma é recomendada porque:

separa estrutura e comportamento;
facilita manutenção;
permite reaproveitar scripts;
melhora organização do projeto.

O posicionamento do <script> no final do <body> também é didaticamente interessante, pois o HTML já foi carregado antes da execução do script.

Exemplo 3 — Exibindo mensagem no console

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Console do Navegador</title>
</head>
<body>
    <h1>Saída no console</h1>

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

Arquivo `script.js`

console.log("Mensagem exibida no console do navegador.");

Explicação detalhada

O comando console.log() envia informações para o console do navegador. Isso é extremamente útil para:

testar valores;
acompanhar execução;
depurar programas;
ensinar lógica passo a passo.

Ao estudante, para abrir o console no navegador, geralmente com F12 ou Ctrl + Shift + I.

Exemplo 4 — Diferença entre HTML estático e comportamento dinâmico

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Comportamento Dinâmico</title>
</head>
<body>
    <h1>Página Web</h1>
    <p>O JavaScript pode adicionar comportamento a esta página.</p>

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

Arquivo `script.js`

document.body.style.backgroundColor = "lightyellow";

Explicação detalhada

Nesse exemplo, o JavaScript altera dinamicamente a cor de fundo da página após o carregamento do HTML.

A expressão:

document.body

faz referência ao corpo da página. Em seguida:

.style.backgroundColor = "lightyellow";

modifica a propriedade visual correspondente.

Esse exemplo é importante porque mostra o que o JavaScript pode atuar sobre os elementos já existentes na interface.

Exemplo 5 — Comentários em JavaScript

Arquivo `script.js`

// Este é um comentário de uma linha

/*
Este é um comentário
de múltiplas linhas
*/
console.log("Comentários ajudam a documentar o código.");

Explicação detalhada

Comentários servem para registrar explicações no código e não são executados pelo navegador.

Há dois formatos principais:

// para comentário de uma linha;
/* ... */ para comentário em bloco.

São úteis para documentação, ensino e manutenção.

Exemplo 6 — Instruções terminadas com ponto e vírgula

Arquivo `script.js`

console.log("Primeira instrução");
console.log("Segunda instrução");

Explicação detalhada

O ponto e vírgula em JavaScript muitas vezes é opcional, mas seu uso é pedagogicamente recomendável em estágios iniciais porque ajuda a marcar com clareza o fim de cada instrução.

Exemplo 7 — Sensibilidade a maiúsculas e minúsculas

Arquivo `script.js`

let nome = "Carlos";
console.log(nome);

Explicação detalhada

JavaScript diferencia letras maiúsculas de minúsculas. Isso significa que:

nome
Nome
NOME

são identificadores distintos. Esse ponto é importante para evitar erros de digitação e compreensão.

Exemplo 8 — Palavra reservada não pode ser usada como nome de variável

Arquivo `script.js`

let cidade = "Recife";
console.log(cidade);

Explicação detalhada

O nome de variáveis deve respeitar as regras da linguagem. Não se deve usar palavras reservadas, como if, for, function, return, entre outras, como nomes de variáveis.

Observações

1. Regras de Sintaxe (Obrigatórias)

Caracteres Permitidos: Nomes podem conter letras (a-z, A-Z), números (0-9), sublinhados (_) e cifrões ($).
Início do Nome: Deve começar com uma letra, um sublinhado (_) ou um cifrão ($). Não pode começar com um número.
Case-Sensitive: O JavaScript diferencia maiúsculas de minúsculas. minhaVariavel e minhavariavel são duas variáveis diferentes.
Palavras Reservadas: Não é permitido usar palavras reservadas da linguagem como nomes, tais como let, var, const, if, for, function, class, etc.
Espaços: Não são permitidos espaços em branco nos nomes.

2. Convenções e Boas Práticas

Camel Case: O padrão mais utilizado na comunidade JavaScript é o camelCase, onde a primeira letra é minúscula e a primeira letra de cada palavra subsequente é maiúscula (ex: totalPrice, userLoginStatus).
Descritividade: Escolha nomes que descrevam o propósito da variável, evitando nomes genéricos ou apenas letras isoladas (ex: use firstName em vez de fn).
Evite Abreviações: Fuja de abreviações excessivas ou obscuras que dificultem o entendimento do código.
Inglês: É uma prática comum, embora não obrigatória, nomear variáveis em inglês para facilitar a colaboração internacional.
Uso de _ e $: Geralmente, sublinhados (_) são usados para variáveis privadas ou internas, e cifrões ($) são usados para referenciar elementos do DOM.

Exemplo:

✅ Correto: let nomeCompleto;, let $container;, let _userId;, let totalItens;
❌ Incorreto: let 1primeiroNome; (não pode começar com número), let nome-completo; (hífen não é permitido), let let; (palavra reservada).

Resumo das declarações:

let: Usado para variáveis que podem mudar de valor.
const: Usado para variáveis que não serão reatribuídas (constantes).
var: Forma antiga de declarar variáveis (evite em projetos modernos).

Exemplo 9 — Ordem de execução do script

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Ordem de Execução</title>
</head>
<body>
    <h1 id="titulo">Título original</h1>

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

Arquivo `script.js`

document.getElementById("titulo").textContent = "Título alterado pelo JavaScript";

Explicação detalhada

O JavaScript localiza o elemento cujo id é titulo e altera seu conteúdo textual.

O comando:

document.getElementById("titulo")

procura no HTML um elemento com esse identificador. Em seguida:

.textContent = "Título alterado pelo JavaScript";

substitui o texto interno do elemento.

Exemplo 10 — Relação entre HTML, CSS e JavaScript

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Integração Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 id="titulo">Tecnologias Web</h1>
    <button onclick="mudarTexto()">Clique aqui</button>

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

Arquivo `style.css`

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
}

Arquivo `script.js`

function mudarTexto() {
    document.getElementById("titulo").textContent = "Texto alterado com JavaScript";
}

Explicação detalhada

Esse exemplo reúne as três camadas fundamentais da Web:

HTML: estrutura a página;
CSS: define a aparência;
JavaScript: responde à ação do usuário e modifica o conteúdo.

O botão dispara a função mudarTexto() por meio do atributo onclick.

Variáveis, tipos de dados e operadores

Variáveis são estruturas usadas para armazenar valores temporariamente na memória durante a execução do programa.

No JavaScript moderno, recomenda-se trabalhar principalmente com:

let para valores que podem mudar;
const para valores que não devem ser alterados.

Exemplo 1 — Declarando variável com `let`

Arquivo `index.html`

<body>
    <h1>Variáveis</h1>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let nome = "Fernandes";
console.log(nome);

Explicação detalhada

A variável nome recebe uma string, isto é, um texto.

let declara a variável;
nome é o identificador;
"Fernandes" é o valor armazenado.

Depois, o valor é exibido no console.

Exemplo 2 — Declarando constante com `const`

Arquivo `script.js`

const escola = "IFPE";
console.log(escola);

Explicação detalhada

const é usado quando o valor não deve ser reatribuído ao longo da execução. Didaticamente, é importante mostrar ao estudante que algumas informações são tratadas como constantes.

Exemplo 3 — Número inteiro

Arquivo `script.js`

let idade = 17;
console.log(idade);

Explicação detalhada

Nesse caso, o valor armazenado é numérico. O JavaScript trata números de forma dinâmica, sem exigir que o tipo seja explicitamente declarado.

Exemplo 4 — Número decimal

Arquivo `script.js`

let nota = 8.5;
console.log(nota);

Explicação detalhada

O valor 8.5 é um número com parte decimal. Em JavaScript, números inteiros e decimais pertencem à categoria numérica geral.

Exemplo 5 — Valor booleano

Arquivo `script.js`

let aprovado = true;
console.log(aprovado);

Explicação detalhada

Os valores booleanos representam dois estados lógicos:

true = verdadeiro;
false = falso.

São essenciais em comparações e decisões.

Exemplo 6 — Concatenação de textos

Arquivo `script.js`

let nome = "Ana";
let sobrenome = "Silva";
let nomeCompleto = nome + " " + sobrenome;

console.log(nomeCompleto);

Explicação detalhada

O operador + pode unir textos. Esse processo é chamado de concatenação. O espaço entre aspas foi incluído para separar adequadamente nome e sobrenome.

Exemplo 7 — Soma numérica

Arquivo `script.js`

let a = 10;
let b = 5;
let soma = a + b;

console.log(soma);

Explicação detalhada

Nesse caso, o operador + realiza soma, pois os operandos são numéricos. É importante comparar esse exemplo com o anterior para mostrar que o mesmo operador pode ter comportamentos distintos conforme o tipo de dado.

Exemplo 8 — Operadores aritméticos

Arquivo `script.js`

let x = 20;
let y = 4;

console.log(x + y);
console.log(x - y);
console.log(x * y);
console.log(x / y);

Explicação detalhada

O exemplo demonstra os principais operadores aritméticos:

+ soma;
- subtração;
* multiplicação;
/ divisão.

Essa é a base para cálculos em scripts.

Exemplo 9 — Operadores de comparação

Arquivo `script.js`

let idade = 18;

console.log(idade > 17);
console.log(idade < 18);
console.log(idade === 18);

Explicação detalhada

Os operadores de comparação produzem valores booleanos:

> maior que;
< menor que;
=== estritamente igual.

O operador === é preferível didaticamente porque compara valor e tipo.

Observações

A principal diferença é que = atribui um valor, == compara valores convertendo tipos (igualdade ampla) e === compara valor e tipo sem conversão (igualdade estrita). O uso de === é recomendado para evitar comportamentos inesperados causados pela conversão automática de tipos (coerção).

= (Atribuição): Define ou atualiza o valor de uma variável.
- Exemplo: let x = 10; (x agora é 10).
== (Igualdade Ampla): Compara se os valores são iguais, convertendo os tipos automaticamente se necessário.
- Exemplo: 5 == "5" retorna true (pois converte a string para número).
=== (Igualdade Estrita): Compara se os valores e os tipos de dados são iguais.
- Exemplo: 5 === "5" retorna false (pois um é número e o outro é string).

Tabela Comparativa:

Operador	Nome	Compara Valor?	Compara Tipo?	Conversão de Tipo (Coerção)?
`=`	Atribuição	N/A	N/A	N/A
`==`	Igualdade Ampla	Sim	Não	Sim
`===`	Igualdade Estrita	Sim	Sim	Não

Exemplos Adicionais:

0 == false // true (coerção)
0 === false // false (tipos diferentes)
null == undefined // true
null === undefined // false

Exemplo 10 — Exibindo resultado no HTML

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Resultado no HTML</title>
</head>
<body>
    <p id="resultado"></p>

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

Arquivo `script.js`

let valor1 = 12;
let valor2 = 8;
let total = valor1 + valor2;

document.getElementById("resultado").textContent = "A soma é: " + total;

Explicação detalhada

Aqui o resultado não vai para o console, mas para um elemento da página.

A linha:

document.getElementById("resultado").textContent = "A soma é: " + total;

localiza o parágrafo com id="resultado" e substitui seu conteúdo textual pelo resultado do cálculo. Esse tipo de exemplo é importante porque aproxima o aluno da construção de interfaces reais.

Estruturas condicionais e de repetição

Programas precisam tomar decisões e, em muitos casos, repetir instruções. Em JavaScript, isso é feito com estruturas como if, else e for.

Exemplo 1 — Condicional simples com `if`

Arquivo `script.js`

let idade = 20;

if (idade >= 18) {
    console.log("Usuário maior de idade.");
}

Explicação detalhada

A estrutura if executa o bloco entre chaves apenas se a condição for verdadeira.

Nesse caso, como idade >= 18 é verdadeira, a mensagem será exibida.

Exemplo 2 — Condicional com `if` e `else`

Arquivo `script.js`

let nota = 6;

if (nota >= 7) {
    console.log("Aprovado.");
} else {
    console.log("Não aprovado.");
}

Explicação detalhada

A estrutura else oferece um caminho alternativo quando a condição do if não é satisfeita.

Exemplo 3 — Condicional com múltiplos casos

Arquivo `script.js`

let media = 5;

if (media >= 7) {
    console.log("Aprovado.");
} else if (media >= 5) {
    console.log("Recuperação.");
} else {
    console.log("Reprovado.");
}

Explicação detalhada

A estrutura else if permite tratar múltiplas faixas de decisão. Esse modelo é muito útil em avaliações, classificações e fluxos lógicos graduais.

Exemplo 4 — Comparação de texto

Arquivo `script.js`

let turno = "manhã";

if (turno === "manhã") {
    console.log("Turma do turno da manhã.");
}

Explicação detalhada

Condições não servem apenas para números; também podem testar textos e outros valores.

Exemplo 5 — Condição ligada ao HTML

Arquivo `index.html`

<body>
    <p id="mensagem"></p>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let temperatura = 32;

if (temperatura > 30) {
    document.getElementById("mensagem").textContent = "O dia está quente.";
} else {
    document.getElementById("mensagem").textContent = "A temperatura está amena.";
}

Explicação detalhada

O resultado da decisão passa a ser exibido diretamente na interface. Isso reforça a relação entre lógica e apresentação.

Exemplo 6 — Laço `for`

Arquivo `script.js`

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

Explicação detalhada

A estrutura for repete um bloco de código. Ela possui três partes:

inicialização: let i = 1
condição: i <= 5
incremento: i++

O código será executado cinco vezes.

Exemplo 7 — Soma com repetição

Arquivo `script.js`

let soma = 0;

for (let i = 1; i <= 4; i++) {
    soma = soma + i;
}

console.log(soma);

Explicação detalhada

O laço acumula os valores de 1 até 4 em uma variável chamada soma. Esse padrão é muito comum em lógica de programação.

Exemplo 8 — Repetição sobre lista simples

Arquivo `script.js`

let tecnologias = ["HTML", "CSS", "JavaScript"];

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

Explicação detalhada

Aqui aparece uma estrutura de dados simples, um vetor, e um laço que percorre todos os seus elementos. O uso de .length indica o tamanho da lista.

Exemplo 9 — Gerando conteúdo no HTML com repetição

Arquivo `index.html`

<body>
    <ul id="lista"></ul>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let lista = document.getElementById("lista");

for (let i = 1; i <= 3; i++) {
    lista.innerHTML += "<li>Item " + i + "</li>";
}

Explicação detalhada

Esse exemplo cria dinamicamente itens dentro de uma lista HTML.

A expressão:

lista.innerHTML += "<li>Item " + i + "</li>";

acrescenta novos elementos à estrutura já existente. É um bom exemplo introdutório de geração dinâmica de conteúdo.

Exemplo 10 — Mensagem final após laço

Arquivo `script.js`

for (let i = 1; i <= 3; i++) {
    console.log("Executando passo " + i);
}

console.log("Laço concluído.");

Explicação detalhada

Esse exemplo ajuda o aluno a perceber que o fluxo do programa continua normalmente após o encerramento da estrutura de repetição.

Funções

Funções são blocos de código reutilizáveis, criados para executar tarefas específicas. Elas tornam o programa mais organizado, legível e modular.

Exemplo 1 — Função simples

Arquivo `script.js`

function saudacao() {
    console.log("Bem-vindo ao estudo de JavaScript.");
}

saudacao();

Explicação detalhada

A função é declarada com a palavra-chave function. Depois, ela é executada com seu nome seguido de parênteses.

Exemplo 2 — Função com parâmetro

Arquivo `script.js`

function cumprimentar(nome) {
    console.log("Olá, " + nome + "!");
}

cumprimentar("Carlos");

Explicação detalhada

O parâmetro nome funciona como uma entrada da função. Assim, a função pode ser reutilizada com diferentes valores.

Exemplo 3 — Função com retorno

Arquivo `script.js`

function somar(a, b) {
    return a + b;
}

let resultado = somar(4, 6);
console.log(resultado);

Explicação detalhada

A palavra-chave return devolve um valor ao ponto onde a função foi chamada. Isso permite usar o resultado em variáveis, cálculos e interfaces.

Exemplo 4 — Função ligada ao botão

Arquivo `index.html`

<body>
    <button onclick="mostrarMensagem()">Clique aqui</button>

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

Arquivo `script.js`

function mostrarMensagem() {
    alert("Botão clicado com sucesso.");
}

Explicação detalhada

Quando o usuário clica no botão, a função mostrarMensagem() é chamada. Esse é um exemplo claro de associação entre interface e comportamento.

Exemplo 5 — Função alterando texto na página

Arquivo `index.html`

<body>
    <p id="texto">Texto original.</p>
    <button onclick="alterarTexto()">Alterar</button>

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

Arquivo `script.js`

function alterarTexto() {
    document.getElementById("texto").textContent = "Texto alterado por uma função JavaScript.";
}

Explicação detalhada

A função encapsula a lógica de alteração do conteúdo do parágrafo. Isso reforça a ideia de reutilização e organização do código.

Exemplo 6 — Função com cálculo

Arquivo `script.js`

function calcularDobro(numero) {
    return numero * 2;
}

console.log(calcularDobro(7));

Explicação detalhada

A função recebe um número e devolve o seu dobro. É um exemplo simples, mas útil para consolidar os conceitos de parâmetro e retorno.

Exemplo 7 — Função com decisão interna

Arquivo `script.js`

function verificarIdade(idade) {
    if (idade >= 18) {
        return "Maior de idade";
    } else {
        return "Menor de idade";
    }
}

console.log(verificarIdade(16));

Explicação detalhada

Funções podem conter estruturas condicionais, tornando-se blocos lógicos completos.

Exemplo 8 — Função chamada várias vezes

Arquivo `script.js`

function exibirNumero(numero) {
    console.log("Número informado: " + numero);
}

exibirNumero(1);
exibirNumero(2);
exibirNumero(3);

Explicação detalhada

O mesmo bloco de código pode ser reaproveitado diversas vezes com entradas diferentes. Esse é um dos principais ganhos do uso de funções.

Exemplo 9 — Função gerando conteúdo no HTML

Arquivo `index.html`

<body>
    <div id="saida"></div>
    <button onclick="mostrarCurso()">Mostrar curso</button>

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

Arquivo `script.js`

function mostrarCurso() {
    document.getElementById("saida").textContent = "Curso: Técnico em Informática para Internet";
}

Explicação detalhada

A função é chamada pelo clique do usuário e modifica o conteúdo de um elemento da interface.

Exemplo 10 — Função com múltiplos parâmetros

Arquivo `script.js`

function apresentar(nome, curso) {
    return nome + " estuda no curso de " + curso + ".";
}

console.log(apresentar("João", "ADS"));

Explicação detalhada

Uma função pode receber mais de um parâmetro, o que aumenta sua flexibilidade e capacidade de modelar situações reais.

DOM e manipulação de elementos HTML

O DOM (Document Object Model) é a representação da página como uma estrutura manipulável pelo JavaScript. Em termos didáticos, ele permite que o script:

localize elementos HTML;
leia conteúdo;
altere textos;
modifique atributos;
insira novos elementos;
remova partes da interface.

Esse é um dos tópicos centrais do JavaScript no navegador.

Exemplo 1 — Selecionando elemento por ID

Arquivo `index.html`

<body>
    <h1 id="titulo">Título da página</h1>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let titulo = document.getElementById("titulo");
console.log(titulo);

Explicação detalhada

O método getElementById() procura um elemento pelo valor de seu atributo id. O resultado pode ser armazenado em variável para manipulação posterior.

Exemplo 2 — Alterando texto com `textContent`

Arquivo `script.js`

document.getElementById("titulo").textContent = "Novo título da página";

Explicação detalhada

A propriedade textContent altera o texto interno de um elemento, sem interpretar HTML interno. É a forma mais segura e direta de modificar conteúdo textual.

Exemplo 3 — Alterando HTML interno

Arquivo `index.html`

<body>
    <div id="caixa"></div>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

document.getElementById("caixa").innerHTML = "<strong>Texto em negrito</strong>";

Explicação detalhada

A propriedade innerHTML insere conteúdo interpretado como HTML. Ela é muito útil, mas deve ser usada com critério, pois insere marcação diretamente.

Exemplo 4 — Alterando estilo por JavaScript

Arquivo `index.html`

<body>
    <p id="paragrafo">Texto para alteração visual.</p>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let paragrafo = document.getElementById("paragrafo");
paragrafo.style.color = "blue";
paragrafo.style.fontSize = "24px";

Explicação detalhada

O JavaScript pode alterar estilos diretamente por meio da propriedade .style. Esse mecanismo é útil para interações dinâmicas e respostas visuais a eventos.

Exemplo 5 — Alterando atributo de imagem

Arquivo `index.html`

<body>
    <img id="foto" src="imagem1.jpg" alt="Imagem inicial">
    <script src="script.js"></script>
</body>

Arquivo `script.js`

document.getElementById("foto").src = "imagem2.jpg";

Explicação detalhada

Nesse caso, o JavaScript altera o valor do atributo src, trocando a imagem exibida.

Exemplo 6 — Selecionando vários elementos

Arquivo `index.html`

<body>
    <p class="item">Primeiro item</p>
    <p class="item">Segundo item</p>
    <p class="item">Terceiro item</p>

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

Arquivo `script.js`

let itens = document.querySelectorAll(".item");

for (let i = 0; i < itens.length; i++) {
    itens[i].style.color = "green";
}

Explicação detalhada

O método querySelectorAll() seleciona todos os elementos que correspondem ao seletor informado. Nesse caso, todos os elementos com classe .item foram modificados.

Exemplo 7 — Inserindo novo conteúdo no final

Arquivo `index.html`

<body>
    <ul id="lista"></ul>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let lista = document.getElementById("lista");
lista.innerHTML += "<li>Novo item criado com JavaScript</li>";

Explicação detalhada

O operador += adiciona novo conteúdo ao HTML já existente no elemento.

Exemplo 8 — Criando elemento com `createElement`

Arquivo `index.html`

<body>
    <div id="container"></div>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let novoParagrafo = document.createElement("p");
novoParagrafo.textContent = "Parágrafo criado dinamicamente.";

document.getElementById("container").appendChild(novoParagrafo);

Explicação detalhada

Esse é um modo mais estruturado de criar conteúdo:

cria-se o elemento;
define-se seu conteúdo;
insere-se o elemento em um ponto da página.

É uma técnica mais robusta do que montar HTML em texto.

Exemplo 9 — Removendo elemento

Arquivo `index.html`

<body>
    <p id="remover">Este texto será removido.</p>
    <script src="script.js"></script>
</body>

Arquivo `script.js`

let elemento = document.getElementById("remover");
elemento.remove();

Explicação detalhada

O método remove() retira o elemento do DOM, fazendo-o desaparecer da interface.

Exemplo 10 — Exemplo integrado de manipulação do DOM

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>DOM Integrado</title>
</head>
<body>
    <h1 id="titulo">Curso Web</h1>
    <p id="descricao">Descrição inicial.</p>
    <button onclick="atualizarConteudo()">Atualizar conteúdo</button>

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

Arquivo `script.js`

function atualizarConteudo() {
    document.getElementById("titulo").textContent = "Curso de JavaScript";
    document.getElementById("descricao").textContent = "O conteúdo foi atualizado dinamicamente.";
}

Explicação detalhada

Quando o botão é pressionado, a função modifica dois elementos diferentes do HTML. Isso mostra como o JavaScript pode reorganizar a apresentação da informação em tempo real.

Eventos e formulários

Eventos são ocorrências detectadas pelo navegador, como:

clique;
digitação;
envio de formulário;
movimento do mouse;
carregamento da página.

Eles tornam possível reagir às ações do usuário.

Exemplo 1 — Evento de clique com `onclick`

Arquivo `index.html`

<body>
    <button onclick="clicarBotao()">Clique aqui</button>

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

Arquivo `script.js`

function clicarBotao() {
    alert("O botão foi clicado.");
}

Explicação detalhada

O atributo onclick faz com que a função seja executada no momento do clique.

Exemplo 2 — Evento associado a mudança de texto

Arquivo `index.html`

<body>
    <p id="mensagem">Mensagem original</p>
    <button onclick="mudarMensagem()">Mudar mensagem</button>

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

Arquivo `script.js`

function mudarMensagem() {
    document.getElementById("mensagem").textContent = "Mensagem alterada após o clique.";
}

Explicação detalhada

O evento aciona uma função que altera diretamente a interface.

Exemplo 3 — Evento com `addEventListener`

Arquivo `index.html`

<body>
    <button id="botao">Clique</button>

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

Arquivo `script.js`

let botao = document.getElementById("botao");

botao.addEventListener("click", function () {
    alert("Evento registrado com addEventListener.");
});

Explicação detalhada

O método addEventListener() é uma forma mais organizada e flexível de registrar eventos. Em nível introdutório, é importante apresentá-lo como alternativa ao onclick.

Exemplo 4 — Evento de entrada em campo

Arquivo `index.html`

<body>
    <input type="text" id="nome" placeholder="Digite seu nome">
    <p id="saida"></p>

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

Arquivo `script.js`

let campo = document.getElementById("nome");

campo.addEventListener("input", function () {
    document.getElementById("saida").textContent = "Você digitou: " + campo.value;
});

Explicação detalhada

O evento input ocorre cada vez que o conteúdo do campo muda. A propriedade .value recupera o valor digitado pelo usuário.

Exemplo 5 — Leitura de valor de formulário

Arquivo `index.html`

<body>
    <input type="number" id="numero1" placeholder="Primeiro número">
    <input type="number" id="numero2" placeholder="Segundo número">
    <button onclick="somar()">Somar</button>

    <p id="resultado"></p>

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

Arquivo `script.js`

function somar() {
    let numero1 = Number(document.getElementById("numero1").value);
    let numero2 = Number(document.getElementById("numero2").value);
    let resultado = numero1 + numero2;

    document.getElementById("resultado").textContent = "Resultado: " + resultado;
}

Explicação detalhada

Esse exemplo é didaticamente muito importante.

A propriedade .value sempre retorna texto. Por isso, utiliza-se Number() para converter o valor em número antes da soma. Caso contrário, o operador + poderia concatenar os valores como texto.

Exemplo 6 — Validação simples de campo vazio

Arquivo `index.html`

<body>
    <input type="text" id="usuario" placeholder="Digite o nome">
    <button onclick="validarCampo()">Validar</button>
    <p id="resposta"></p>

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

Arquivo `script.js`

function validarCampo() {
    let usuario = document.getElementById("usuario").value;

    if (usuario === "") {
        document.getElementById("resposta").textContent = "O campo está vazio.";
    } else {
        document.getElementById("resposta").textContent = "Nome informado: " + usuario;
    }
}

Explicação detalhada

O script verifica se o campo foi deixado vazio. Esse é um primeiro passo para o ensino de validação de formulários.

Exemplo 7 — Evento de envio de formulário

Arquivo `index.html`

<body>
    <form id="formulario">
        <input type="text" id="nomeAluno" placeholder="Digite seu nome">
        <button type="submit">Enviar</button>
    </form>

    <p id="mensagem"></p>

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

Arquivo `script.js`

let formulario = document.getElementById("formulario");

formulario.addEventListener("submit", function (event) {
    event.preventDefault();

    let nomeAluno = document.getElementById("nomeAluno").value;
    document.getElementById("mensagem").textContent = "Formulário recebido de: " + nomeAluno;
});

Explicação detalhada

Esse exemplo introduz um conceito central:

event.preventDefault();

Sem esse comando, o formulário tentaria ser enviado e a página poderia ser recarregada. Ao impedir o comportamento padrão, o JavaScript assume o controle da operação, permitindo validações e tratamentos locais.

Exemplo 8 — Mudança visual em resposta a evento

Arquivo `index.html`

<body>
    <button id="modo">Ativar destaque</button>
    <p id="texto">Texto que mudará de aparência.</p>

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

Arquivo `script.js`

document.getElementById("modo").addEventListener("click", function () {
    let texto = document.getElementById("texto");
    texto.style.backgroundColor = "yellow";
    texto.style.fontWeight = "bold";
});

Explicação detalhada

O clique dispara uma alteração visual imediata no elemento. É um bom exemplo para mostrar interação de interface.

Exemplo 9 — Evento de carregamento da página

Arquivo `script.js`

window.addEventListener("load", function () {
    console.log("A página foi carregada completamente.");
});

Explicação detalhada

O evento load ocorre quando toda a página foi carregada. É útil quando se deseja garantir que os elementos já existam antes da manipulação.

Exemplo 10 — Exemplo integrado com formulário e resposta dinâmica

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Formulário com JavaScript</title>
</head>
<body>
    <h1>Cadastro de Interesse</h1>

    <form id="cadastro">
        <label for="nome">Nome:</label><br>
        <input type="text" id="nome" name="nome"><br><br>

        <label for="curso">Curso:</label><br>
        <input type="text" id="curso" name="curso"><br><br>

        <button type="submit">Enviar</button>
    </form>

    <p id="retorno"></p>

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

Arquivo `script.js`

let cadastro = document.getElementById("cadastro");

cadastro.addEventListener("submit", function (event) {
    event.preventDefault();

    let nome = document.getElementById("nome").value;
    let curso = document.getElementById("curso").value;

    if (nome === "" || curso === "") {
        document.getElementById("retorno").textContent = "Preencha todos os campos.";
    } else {
        document.getElementById("retorno").textContent = nome + " demonstrou interesse no curso de " + curso + ".";
    }
});

Explicação detalhada

Esse exemplo sintetiza vários conceitos do módulo:

seleção de elementos;
captura do evento de envio;
uso de preventDefault();
leitura de valores dos campos;
validação condicional;
atualização do conteúdo HTML.

Pedagogicamente, é um excelente exercício de fechamento porque aproxima o aluno de um comportamento real de aplicação Web.

8. Exercício prático integrador

Proposta

Solicitar que os estudantes criem um index.html com JavaScript integrado para realizar as seguintes tarefas:

exibir um título e uma breve descrição;
possuir um botão que altere o texto de um elemento;
possuir dois campos numéricos e um botão para somar os valores;
possuir um pequeno formulário com validação de campos;
mostrar mensagens dinâmicas no próprio HTML.

Estrutura mínima esperada no `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Prática com JavaScript</title>
</head>
<body>
    <h1 id="titulo">Prática com JavaScript</h1>
    <p id="descricao">Descrição inicial da página.</p>
    <button onclick="alterarDescricao()">Alterar descrição</button>

    <hr>

    <input type="number" id="n1" placeholder="Número 1">
    <input type="number" id="n2" placeholder="Número 2">
    <button onclick="somarValores()">Somar</button>
    <p id="resultadoSoma"></p>

    <hr>

    <form id="formAluno">
        <input type="text" id="aluno" placeholder="Nome do aluno">
        <button type="submit">Enviar</button>
    </form>
    <p id="mensagemFinal"></p>

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

Estrutura mínima esperada no `script.js`

function alterarDescricao() {
    document.getElementById("descricao").textContent = "A descrição foi alterada com JavaScript.";
}

function somarValores() {
    let n1 = Number(document.getElementById("n1").value);
    let n2 = Number(document.getElementById("n2").value);

    document.getElementById("resultadoSoma").textContent = "Soma: " + (n1 + n2);
}

document.getElementById("formAluno").addEventListener("submit", function (event) {
    event.preventDefault();

    let aluno = document.getElementById("aluno").value;

    if (aluno === "") {
        document.getElementById("mensagemFinal").textContent = "Informe o nome do aluno.";
    } else {
        document.getElementById("mensagemFinal").textContent = "Cadastro recebido para: " + aluno;
    }
});

Explicação da proposta

Esse exercício integra os conteúdos centrais da aula:

função simples;
leitura de valores de campos;
conversão numérica;
evento de clique;
evento de envio;
validação condicional;
modificação do DOM.

Encerramento

Ao final desta aula, o estudante deve compreender que o JavaScript é o componente que transforma uma página estática em uma interface interativa.

O domínio de:

integração entre index.html e script.js;
variáveis e operadores;
condições e repetições;
funções;
manipulação do DOM;
eventos e formulários

constitui a base necessária para avançar para tópicos mais sofisticados, como consumo de dados, programação assíncrona, componentes dinâmicos e integração com backend.

Referências para aprofundamento

MDN Web Docs. JavaScript. Mozilla. Documentação oficial.
W3Schools. JavaScript Tutorial. Material introdutório amplamente utilizado em ensino inicial.
Flanagan, David. JavaScript: The Definitive Guide. O’Reilly Media.
Simpson, Kyle. You Don’t Know JS Yet. Série de aprofundamento em JavaScript.

Observação técnica final

Os exemplos apresentados neste módulo foram organizados com foco didático e executam em navegador moderno, desde que os arquivos estejam corretamente nomeados e no mesmo diretório quando houver uso de script.js.

Fim da aula 03

Linguagem e Técnica de Programação II – Aula 03

JavaScript

Apresentação

Objetivos da aula

Competências desenvolvidas

Metodologia

Recursos necessários

Conceitos fundamentais do JavaScript

Exemplo 1 — Inserindo JavaScript diretamente no index.html

Arquivo index.html

Explicação detalhada

Exemplo 2 — Ligando o arquivo script.js ao index.html

Arquivo index.html

Arquivo script.js

Explicação detalhada

Exemplo 3 — Exibindo mensagem no console

Arquivo index.html

Arquivo script.js

Explicação detalhada

Exemplo 4 — Diferença entre HTML estático e comportamento dinâmico

Arquivo index.html

Arquivo script.js

Explicação detalhada

Exemplo 5 — Comentários em JavaScript

Arquivo script.js

Explicação detalhada

Exemplo 6 — Instruções terminadas com ponto e vírgula

Arquivo script.js

Explicação detalhada

Exemplo 7 — Sensibilidade a maiúsculas e minúsculas

Arquivo script.js

Explicação detalhada

Exemplo 8 — Palavra reservada não pode ser usada como nome de variável

Arquivo script.js

Explicação detalhada

Observações

Exemplo 9 — Ordem de execução do script

Arquivo index.html

Arquivo script.js

Explicação detalhada

Exemplo 10 — Relação entre HTML, CSS e JavaScript

Arquivo index.html

Arquivo style.css

Arquivo script.js

Explicação detalhada

Variáveis, tipos de dados e operadores

Exemplo 1 — Declarando variável com let

Arquivo index.html

Arquivo script.js

Explicação detalhada

Exemplo 2 — Declarando constante com const

Arquivo script.js

Explicação detalhada

Exemplo 3 — Número inteiro

Arquivo script.js

Explicação detalhada

Exemplo 4 — Número decimal

Arquivo script.js

Explicação detalhada

Exemplo 5 — Valor booleano

Arquivo script.js

Explicação detalhada

Exemplo 6 — Concatenação de textos

Arquivo script.js

Explicação detalhada

Exemplo 7 — Soma numérica

Arquivo script.js

Explicação detalhada

Exemplo 8 — Operadores aritméticos

Arquivo script.js

Explicação detalhada

Exemplo 9 — Operadores de comparação

Arquivo script.js

Explicação detalhada

Observações

Exemplo 10 — Exibindo resultado no HTML

Arquivo index.html

Arquivo script.js

Explicação detalhada

Estruturas condicionais e de repetição

Exemplo 1 — Inserindo JavaScript diretamente no `index.html`

Arquivo `index.html`

Exemplo 2 — Ligando o arquivo `script.js` ao `index.html`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `style.css`

Arquivo `script.js`

Exemplo 1 — Declarando variável com `let`

Arquivo `index.html`

Arquivo `script.js`

Exemplo 2 — Declarando constante com `const`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Exemplo 1 — Condicional simples com `if`

Arquivo `script.js`

Exemplo 2 — Condicional com `if` e `else`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Exemplo 6 — Laço `for`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `script.js`