PROGRAMAÇÃO DE COMPUTADORES II

Fundamentos de JavaScript

Da teoria à prática: conceitos, sintaxe, interação, controle de fluxo, funções e validação de formulários — tudo com exemplos que você pode testar no navegador.

2º MTEC Informática ETEC Cachoeira Paulista · Piquete

1 Conceito e definições

JavaScript (JS) é uma linguagem de programação interpretada, de alto nível e com tipagem dinâmica. Criada em 1995 por Brendan Eich, nasceu para dar interatividade às páginas web e hoje roda também em servidores (Node.js), aplicativos móveis e desktop.

Java ≠ JavaScript. Apesar do nome parecido (jogada de marketing da época), são linguagens diferentes, com propósitos e sintaxes distintas.

Podemos incluir JavaScript em uma página HTML de três formas:

Inline: dentro de um atributo do elemento (ex.: onclick). Pouco recomendado.
Interno: dentro de uma tag <script> no próprio HTML.
Externo: em um arquivo .js separado, ligado por <script src="script.js"></script>. É a boa prática.

<!-- Script interno -->
<script>
  console.log("Olá, mundo!");
</script>

<!-- Script externo (recomendado) -->
<script src="script.js"></script>

2 Elementos da linguagem

Elementos básicos que formam qualquer programa em JavaScript:

Comandos (statements): instruções encerradas por ponto e vírgula ;.
Comentários: // linha ou /* bloco */.
Sensível a maiúsculas/minúsculas: nome, Nome e NOME são diferentes.
Identificadores: nomes de variáveis e funções. Não podem começar com número nem usar palavras reservadas.
Console: console.log() exibe mensagens no console do navegador (tecla F12).

// Isto é um comentário de linha
/* Comentário
   de bloco */
let mensagem = "Bem-vindo!";
console.log(mensagem); // exibe no console

3 Interação com o usuário

JavaScript oferece funções nativas para dialogar com o usuário diretamente no navegador:

alert()

Exibe uma mensagem em uma caixa de aviso.

prompt()

Lê um valor digitado pelo usuário (retorna texto).

confirm()

Pergunta OK/Cancelar e retorna true/false.

let nome = prompt("Qual é o seu nome?");
alert("Olá, " + nome + "!");

let continuar = confirm("Deseja continuar?");
console.log(continuar); // true ou false

Atenção: prompt() sempre retorna texto (string). Para cálculos, converta com Number() ou parseInt().

4 Variáveis, atributos, métodos e operadores

Declaração de variáveis

var — forma antiga, escopo de função (evite em código novo).
let — variável de escopo de bloco (pode mudar de valor).
const — constante: o valor não pode ser reatribuído.

let idade = 17;          // número
const PI = 3.14;         // constante
let nome = "Ana";         // string
let ativo = true;         // boolean
let notas = [8, 7, 9];    // array

Atributos (propriedades) e métodos

Objetos e valores possuem atributos (características, acessadas sem parênteses) e métodos (ações, chamadas com parênteses).

let texto = "JavaScript";
console.log(texto.length);          // atributo → 10
console.log(texto.toUpperCase());     // método  → "JAVASCRIPT"
console.log(texto.charAt(0));        // método  → "J"

Operadores

Tipo	Operadores	Exemplo
Aritméticos	`+ - * / % **`	`10 % 3 → 1`
Atribuição	`= += -= *= /=`	`x += 5`
Relacionais	`== === != > < >= <=`	`5 === "5" → false`
Lógicos	`&& \|\| !`	`(a > 0 && b > 0)`

== vs ===: o == compara só o valor; o === compara valor e tipo. Prefira sempre ===.

5 Estruturas de controle

Condicionais

let media = 7.5;

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

// switch: escolha entre vários casos
switch (dia) {
  case 1: console.log("Domingo"); break;
  case 2: console.log("Segunda"); break;
  default: console.log("Outro dia");
}

Repetição (laços)

// for: número conhecido de repetições
for (let i = 1; i <= 5; i++) {
  console.log("Contagem: " + i);
}

// while: repete enquanto a condição for verdadeira
let n = 1;
while (n <= 3) {
  console.log(n);
  n++;
}

6 Funções

Uma função é um bloco de código reutilizável. Pode receber parâmetros (entradas) e devolver um valor com return.

// Declaração tradicional
function somar(a, b) {
  return a + b;
}
console.log(somar(4, 6)); // 10

// Arrow function (forma moderna)
const dobrar = (x) => x * 2;
console.log(dobrar(8)); // 16

Por que usar funções? Evitam repetição de código, organizam o programa e facilitam a manutenção.

7 O DOM e a seleção de elementos

O que é o DOM?

Quando o navegador carrega uma página, ele lê o HTML e monta uma representação em forma de árvore de todos os elementos: é o DOM (Document Object Model, ou Modelo de Objetos do Documento). Cada tag HTML vira um objeto (um "nó") que o JavaScript pode acessar, ler e modificar.

Esse acesso acontece pelo objeto document, que representa a página inteira. É por meio dele que conseguimos mudar textos, cores e conteúdos em tempo real — o que torna a página realmente interativa.

Ideia central: HTML descreve a estrutura; o DOM é essa estrutura "viva" na memória do navegador; o JavaScript usa o document para conversar com ela.

Elementos HTML e seus atributos

Os elementos são as tags da página (<h1>, <p>, <div>, <input>, <button>...). Para localizá-los, usamos principalmente dois atributos:

id: identificador único — deve existir só um por página. Ideal para selecionar um elemento específico.
class: pode repetir em vários elementos. Ideal para agrupar e selecionar vários de uma vez.

<h1 id="titulo">Bem-vindo</h1>
<p class="aviso">Primeira mensagem</p>
<p class="aviso">Segunda mensagem</p>
<button>Clique aqui</button>

Selecionando elementos

Existem quatro formas muito comuns de "pegar" um elemento do HTML pelo JavaScript:

Método	Seleciona por	Retorna
`getElementById`	o `id` (único)	um elemento
`getElementsByClassName`	a `class`	uma coleção (vários)
`getElementsByTagName`	o nome da tag	uma coleção (vários)
`querySelector`	um seletor CSS	o primeiro que casar

// Por ID — retorna 1 elemento
let titulo = document.getElementById("titulo");

// Por CLASSE — retorna uma coleção (lista)
let avisos = document.getElementsByClassName("aviso");
console.log(avisos.length);     // 2
console.log(avisos[0]);           // primeiro <p class="aviso">

// Por TAG — todos os <p> da página
let paragrafos = document.getElementsByTagName("p");

// querySelector — usa seletor CSS (#id, .classe, tag)
let primeiro = document.querySelector(".aviso"); // 1º .aviso
let botao    = document.querySelector("button");

Coleção não é uma única tag. getElementsByClassName e getElementsByTagName devolvem uma lista: use índice ([0], [1]...) ou um laço para acessar cada elemento. Já getElementById e querySelector devolvem um elemento só.

Lendo e alterando um elemento

Depois de selecionar, podemos ler ou mudar o conteúdo, o valor de um campo e até o estilo:

// Alterar texto e estilo
titulo.textContent = "Novo título!";
titulo.style.color = "green";

// Ler o valor digitado em um campo de formulário
let nome = document.getElementById("campoNome").value;
console.log(nome);

Para ler o que o usuário digitou em um <input>, use a propriedade .value. É exatamente isso que faremos no próximo tópico para validar formulários.

8 Validação de formulários

Um uso clássico do JavaScript é validar dados antes de enviar um formulário: verificar campos vazios, formato de e-mail, tamanho mínimo de senha, etc. Assim evitamos enviar dados inválidos ao servidor.

function validar() {
  let nome  = document.getElementById("nome").value;
  let email = document.getElementById("email").value;

  // Campo obrigatório
  if (nome === "") {
    alert("Preencha o nome!");
    return false;
  }

  // E-mail precisa conter @
  if (!email.includes("@")) {
    alert("E-mail inválido!");
    return false;
  }

  return true; // libera o envio
}

Ligamos a função ao formulário com <form onsubmit="return validar()">. Se a função retorna false, o envio é cancelado.

Experimente

Validação ao vivo

Digite um nome e um e-mail e clique em validar.

Calculadora

Digite dois números nos campos, escolha a operação e clique em Calcular. Os valores são lidos diretamente dos <input> pela propriedade .value.

Operação:

9 Entendendo a calculadora

A calculadora que você testou acima reúne quase tudo o que estudamos: seleção de elementos no DOM, leitura de campos com .value, conversão com Number(), um evento de clique, o switch das estruturas de controle e os operadores aritméticos. Vamos destrinchar o código, parte por parte.

O HTML: cada elemento tem um id

O JavaScript precisa localizar os campos. Por isso, cada elemento recebe um id único, e cada <option> guarda no atributo value um "apelido" da operação.

<input type="number" id="ctiCalcN1">
<input type="number" id="ctiCalcN2">

<select id="ctiCalcOp">
  <option value="soma">Soma (+)</option>
  <option value="sub">Subtração (−)</option>
</select>

<button id="ctiCalcBtn">Calcular</button>
<div id="ctiCalcResult"></div>

Passo 1 — Detectar o clique no botão

Com addEventListener, dizemos ao navegador: "quando o botão for clicado, execute esta função". Tudo acontece dentro dela.

var btn = document.getElementById("ctiCalcBtn");

btn.addEventListener("click", function() {
  // o código do cálculo fica aqui dentro
});

Passo 2 — Ler os valores dos campos

Pegamos o que foi digitado com .value. Como o .value sempre devolve texto, convertemos para número com Number() — o mesmo cuidado que tomamos com o prompt() na seção 3.

var campo1 = document.getElementById("ctiCalcN1").value;
var campo2 = document.getElementById("ctiCalcN2").value;

var num1 = Number(campo1);  // texto -> número
var num2 = Number(campo2);

Passo 3 — Validar a entrada

Antes de calcular, conferimos se os campos não estão vazios e se realmente são números. A função isNaN() (is Not a Number) devolve true quando o valor não é um número válido.

if (campo1 === "" || campo2 === "" || isNaN(num1) || isNaN(num2)) {
  res.textContent = "Digite dois números válidos.";
  return;  // interrompe aqui se algo estiver errado
}

Passo 4 — Descobrir a operação e calcular

O value do <select> nos diz qual operação foi escolhida ("soma", "sub"...). O switch testa cada caso e aplica o operador aritmético correspondente. Repare no cuidado especial com a divisão por zero.

var op = document.getElementById("ctiCalcOp").value;
var resultado, simbolo;

switch (op) {
  case "soma": resultado = num1 + num2; simbolo = "+"; break;
  case "sub":  resultado = num1 - num2; simbolo = "−"; break;
  case "mult": resultado = num1 * num2; simbolo = "×"; break;
  case "div":
    if (num2 === 0) {
      res.textContent = "Não é possível dividir por zero.";
      return;
    }
    resultado = num1 / num2; simbolo = "÷"; break;
}

Passo 5 — Mostrar o resultado na página

Por fim, escrevemos a resposta de volta no DOM usando .textContent, montando a frase com concatenação (+).

res.textContent = num1 + " " + simbolo + " " + num2 + " = " + resultado;
// Ex.: 10 × 3 = 30

Resumo: cada conceito dentro da calculadora

Conceito da aula	Onde aparece na calculadora
Seleção no DOM (seção 7)	`getElementById(...)` nos campos e no botão
Ler campo com `.value`	`...N1").value` e `...Op").value`
Conversão de tipos (seção 3)	`Number(campo1)`
Operadores aritméticos (seção 4)	`+`, `-`, `*`, `/`
Estruturas de controle (seção 5)	`if` da validação e o `switch`
Alterar o DOM	`res.textContent = ...`

Desafio: tente adicionar as operações de resto (%) e potência (**). Basta criar dois novos <option> e dois novos case no switch.

Pesquisar este blog

[Piquete] PCII - Fundamentos JavaScript