Durante as aulas, aprendemos a estruturar o conteúdo de uma página web com HTML e a estilizá-lo com CSS, tornando o visual mais agradável e organizado.
Neste módulo, daremos um passo além: vamos aprender a tornar as páginas interativas. Isso significa que, além de criar sites estáticos, passaremos a desenvolver aplicações dinâmicas — ou seja, páginas que reagem às ações do usuário, como cliques, digitação e movimentação do mouse.

Para isso, utilizaremos o JavaScript, uma linguagem de script executada diretamente pelos navegadores modernos.

Diferença entre Java e JavaScript

Apesar do nome parecido, JavaScript não tem relação direta com Java.
Veja algumas diferenças importantes:

• Java é uma linguagem voltada para criar aplicações independentes, que podem rodar em máquinas virtuais ou dentro de navegadores (como applets).

• JavaScript roda diretamente no navegador, sem necessidade de compilação.

• Java precisa ser compilado antes da execução; JavaScript é interpretado em tempo real.

• Java é usado para sistemas completos, enquanto JavaScript é usado para interatividade em páginas web.
  
  

Os scripts JavaScript são escritos entre as tags:  <script></script>

Eles podem ser inseridos dentro de um arquivo HTML, junto de PHP ou outras linguagens.

Variáveis

Uma variável é um espaço de memória que armazena um valor temporariamente. Em JavaScript, o tipo da variável é definido automaticamente conforme o valor atribuído.

Tipos de dados principais:

• String: Textos entre aspas. Exemplo: "exemplo"

• Number: Números inteiros ou decimais. Exemplo: 10 ou 3.14

• Boolean: Valores lógicos. Exemplo: true ou false

• Array: Lista de valores. Exemplo: [1, 2, 3]

• Object: Conjunto de propriedades e métodos. Exemplo: {nome: "Leal", idade: 25}

Formas de declarar variáveis:

• var nomeAntigo = "usado antes do ES6"; // escopo de função (uso desaconselhado hoje)

• let nomeAtual = "forma moderna"; // escopo de bloco (preferencial)

• const PI = 3.14; // constante, não pode mudar (escopo de bloco)

Escopo no JavaScript: Entenda Onde Suas Variáveis Vivem

No desenvolvimento Front-end, o Escopo é um conceito crucial do JavaScript que define a acessibilidade das suas variáveis. Em termos simples, o escopo determina "de onde" no seu código uma variável pode ser lida, escrita ou modificada.

Entender o escopo é fundamental para escrever códigos limpos, eficientes e que evitam conflitos (como a sobrescrita acidental de variáveis).

O JavaScript possui dois tipos principais de escopo:

1. Escopo Global

Uma variável declarada no Escopo Global é acessível a partir de qualquer lugar em seu código.

• Definição: A variável é declarada fora de qualquer função ou bloco ({}).

• Acessibilidade: Pode ser lida e modificada por qualquer função ou script na sua página.

• Atenção: Embora seja conveniente, o uso excessivo de variáveis globais pode levar a conflitos e dificultar a manutenção do código, sendo geralmente desencorajado em projetos maiores.

2. Escopo Local

Uma variável declarada no Escopo Local é acessível apenas dentro da função ou bloco onde foi definida.

• Escopo de Função: Variáveis declaradas dentro de uma função. Elas só existem e são acessíveis enquanto a função está sendo executada.

• Escopo de Bloco (let e const): Variáveis declaradas dentro de blocos de código delimitados por chaves ({ }), como laços de repetição (for) ou condicionais (if). Esta forma de escopo é mais moderna e ajuda a evitar os problemas associados a variáveis globais.

Em resumo: O escopo é o que garante a organização e o "segredo" do seu código, assegurando que diferentes partes do seu programa não interfiram umas nas outras de maneira inesperada.

innerHTML: O Que É e Como Ele Dá Vida à Sua Página

No desenvolvimento Front-end, o innerHTML é uma das propriedades mais poderosas do JavaScript, sendo fundamental para a manipulação dinâmica da sua página web.

Essa propriedade faz parte do DOM (Document Object Model: Modelo de Objeto de Documento ), que é a representação em árvore da estrutura do HTML. Em termos simples, o innerHTML permite que você altere o conteúdo e a estrutura interna de qualquer elemento HTML (como uma div ou um p) em tempo real, após a página ter sido carregada.

Como Funciona?

O innerHTML possui uma função dupla:

1. Obter o Conteúdo: Ao ser lido (ex: elemento.innerHTML), ele retorna todo o código HTML (incluindo tags, atributos e texto) que está contido dentro do elemento selecionado.

2. Modificar o Conteúdo: Ao receber um novo valor (ex: elemento.innerHTML = "Novo HTML"), ele substitui todo o conteúdo interno do elemento por uma nova string de HTML ou texto.

Por que isso é importante?

É o que permite que sua página reaja a ações do usuário: mostrar mensagens de erro, atualizar um contador, carregar informações de um banco de dados ou trocar o design de um componente sem precisar recarregar a página inteira. É um dos pilares para criar uma experiência de usuário interativa e dinâmica.

Entrada e Saída de Dados

O JavaScript permite interagir com o usuário através de caixas de diálogo e manipular a exibição na página.

Para que o código de saída funcione, é necessário ter um contêiner no HTML, como <div id="saida"></div>, e garantir que o script seja carregado após esse elemento (usando defer ou colocando-o no final do <body>).

Existem três principais tipos de caixas de diálogo:

alert() – Exibe uma mensagem simples (somente leitura).

alert("Olá, mundo!");

prompt() – Exibe uma mensagem e permite que o usuário insira um valor. 

let nome = prompt("Digite seu nome:");

Exibir na tela

document.getElementById("saida").innerHTML = "Olá, " + nome + "!"; 

confirm() – Exibe uma mensagem com as opções “OK” e “Cancelar”. (Substituído document.write por innerHTML)

let resultado = confirm("Deseja continuar?");

let saidaElemento = document.getElementById("saida");

if (resultado) {

    saidaElemento.innerHTML = "Usuário confirmou.";

} else {

    saidaElemento.innerHTML = "Usuário cancelou.";

}

Operadores

• Incremento / Decremento: ++ e --

• Lógicos e Comparação: && (E), || (OU), != (diferente), == (igual), >=, <=

• Ternário (Condicional Simplificado):

let media = 7;

let resultado = media >= 5 ? "Aprovado" : "Reprovado"; 

// resultado será "Aprovado"

Estruturas Condicionais

Permitem tomar decisões com base em condições.

let media = 5;

if (media >= 5) {

    console.log("Aprovado");

} else {

    console.log("Reprovado");

}

 Estruturas de Repetição

Servem para executar comandos repetidamente enquanto uma condição for verdadeira.

while – repete enquanto a condição for verdadeira

let num = 1;

while (num <= 20) {

    console.log(num);

    num++;

}

do...while – executa pelo menos uma vez antes de testar a condição

let num = 0;

do {

    console.log(num);

    num++;

} while (num <= 10);

for – ideal para repetições controladas ou percorrer listas

for (let i = 0; i < 5; i++) {

    console.log(i);

}

Funções

Funções são blocos de código reutilizáveis que executam tarefas específicas.

function saudacao(nome) {

    console.log("Olá, " + nome + "!");

}

saudacao("Leal"); // Exibe no console: Olá, Leal!

• Parâmetros → variáveis que a função recebe.

• Argumentos → valores passados ao chamar a função.

Objetos e Arrays

Objetos agrupam propriedades e métodos.

JavaScript

let carro = {

    marca: 'GM',

    modelo: 'Celta',

    ano: 2025,

    ligar: function() {

        console.log('O carro está ligado');

    }

};

console.log(carro.marca); // GM

carro.cor = 'Azul';       // adiciona nova propriedade

Arrays armazenam listas de valores.

JavaScript

let frutas = ["limão", "morango", "uva"];

frutas.push("laranja");

console.log(frutas.join(" - ")); // limão - morango - uva - laranja

Métodos Comuns de Arrays:

• push(): Adiciona elemento ao final. Exemplo: frutas.push("laranja")

• pop(): Remove o último elemento e o retorna. Exemplo: frutas.pop()

• shift(): Remove o primeiro elemento e o retorna. Exemplo: frutas.shift()

• unshift(): Adiciona elementos no início. Exemplo: frutas.unshift("maçã")

• splice(): Adiciona, remove ou substitui itens. Parâmetros: splice(índice, quantos_remover, item_novo)

• slice(): Cria um novo array a partir de parte de outro. Exemplo: frutas.slice(1, 3)

• join(): Transforma o array em texto com separador. Exemplo: frutas.join(" - ")

 Conclusão

O JavaScript é o principal responsável por dar vida às páginas web, tornando-as interativas e dinâmicas. Com ele, podemos reagir a eventos, criar animações, validar formulários e construir aplicações completas dentro do navegador.

Nos próximos conteúdos, exploraremos exemplos práticos e exercícios, aplicando todos esses conceitos em situações reais de desenvolvimento. A introdução em pseudocódigo serviu apenas como base para compreender a lógica de programação — agora, colocaremos tudo em prática com o poder do JavaScript e as melhores práticas do DOM moderno.