JavaScript

Introdução ao JavaScript

O JavaScript é uma linguagem de programação utilizada para adicionar interatividade às páginas web. Enquanto o HTML define a estrutura do conteúdo e o CSS define a aparência visual, o JavaScript permite criar comportamentos dinâmicos, responder a ações do usuário e manipular elementos da página em tempo real.

Com JavaScript podemos, por exemplo:

Responder a cliques de botões.
Validar formulários.
Atualizar conteúdos da página sem recarregar.
Realizar cálculos e operações.
Alterar estilos e elementos do HTML dinamicamente.

Diferenças entre Java e JavaScript

Apesar dos nomes semelhantes, Java e JavaScript são linguagens diferentes, com propósitos distintos.

Java	JavaScript
Linguagem de programação completa.	Linguagem de script executada no navegador.
Usada em aplicações desktop, mobile e sistemas corporativos.	Usada principalmente em páginas web.
Precisa ser compilada.	Executada diretamente no navegador.
Baseada em classes.	Linguagem dinâmica e interpretada.

Formas de incluir JavaScript no HTML

Existem duas maneiras de adicionar JavaScript a uma página HTML.

1) JavaScript interno

O JavaScript interno é escrito diretamente dentro do arquivo HTML.

<script>
  console.log("Script executado");
</script>

2) JavaScript externo

Também é possível escrever o JavaScript em um arquivo separado, geralmente com extensão .js.

Essa abordagem é considerada uma boa prática, pois organiza melhor o código.

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

Carregar JavaScript externo no final do <body> (antes de </body>) é a melhor prática para performance. Isso evita que o navegador interrompa a renderização do HTML para baixar e executar scripts, resultando em carregamento mais rápido.

Exemplos

Exemplo 1: Alterar texto

 <!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<title>Exemplo 1</title>
	</head>
	<body>
		<h1>Interagindo com JavaScript</h1>
		<p id="mensagem">Clique no botão para mudar o texto</p>
		<button onclick="mudarTexto()">Clique aqui</button>
		
		<script>
			function mudarTexto() {
				document.getElementById("mensagem").innerHTML = "Texto alterado com JavaScript!";
			}
		</script>
	</body>
</html>

Exemplo 2: Mudando cor da página

 <!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<title>Exemplo 2</title>
	</head>
	<body>
		<h1>Mudar cor de fundo</h1>
		<button onclick="mudarCor()">Mudar cor</button>

		<script>
			function mudarCor() {
				let cores = ["red", "blue", "green", "yellow", "purple"];
				let corAleatoria = cores[Math.floor(Math.random() * cores.length)];
				document.body.style.backgroundColor = corAleatoria;
			}
		</script>
	</body>
</html>

Exemplo 3: Capturando valor do input e exibindo alert


<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<title>Exemplo Input JS</title>
	</head>
	<body>
		<h1>Digite seu nome</h1>
		<input type="text" id="nome" placeholder="Digite seu nome">
		<button onclick="mostrarNome()">Enviar</button>
		
		<script>
			function mostrarNome() {
				let nomeDigitado = document.getElementById("nome").value;
				alert("Olá, " + nomeDigitado + "!");
			}
		</script>
	</body>
</html>

Eventos

Eventos são ações que ocorrem na página e podem ser capturadas pelo JavaScript. Esses eventos normalmente são gerados pela interação do usuário.

Exemplos de eventos:

Clicar em um botão
Passar o mouse sobre um elemento
Pressionar uma tecla
Enviar um formulário

Principais Eventos em JavaScript

onclick
onmousedown
onmouseup
ondblclick

Evento onclick

O evento onclick é executado quando o usuário clica em um elemento.

<button onclick="alert('Botão clicado')">
Clique aqui
</button>

Evento onmousedown

Executado quando o botão do mouse é pressionado.

<button onmousedown="alert('Mouse pressionado')">
Pressione
</button>

Evento onmouseup

Executado quando o botão do mouse é liberado.

<button onmouseup="alert('Mouse liberado')">
Solte o botão
</button>

Evento ondblclick

Executado quando o usuário dá dois cliques em um elemento.

<button ondblclick="alert('Duplo clique')">
Duplo clique
</button>

Funções

Funções são blocos de código que executam uma tarefa específica e podem ser reutilizados em diferentes partes do programa.

<button onclick="mostrarMensagem()">
Executar função
</button>

function mostrarMensagem(){
  alert("Função externa executada");
}

Métodos

O JavaScript possui diversos métodos para acessar e modificar elementos da página HTML.

getElementById()

O método getElementById() permite acessar um elemento HTML utilizando seu identificador (id).

document.getElementById("titulo")

innerHTML

A propriedade innerHTML permite alterar o conteúdo de um elemento HTML.

document.getElementById("titulo").innerHTML = "Novo título";

value

A propriedade value permite consultar ou alterar o valor de um input no HTML.

document.getElementById("numero").value;
document.getElementById("numero").value = 10;

Exercício Guiado - Calculadora

Etapa 1

Crie a pasta para o projeto e abra-a no Visual Studio Code. A pasta deve conter um arquivo HTML, com a estrutura básica completa, e um arquivo JavaScript. O arquivo JavaScript deve ser referenciado no arquivo HTML.

Etapa 2

No arquivo HTML, acrescente um título "Minha Calculadora Pessoal".

No arquivo HTML, usando o elemento form, crie:

Um campo input do tipo number com id "numero-1"
Um campo input do tipo number com id "numero-2"
Um campo de lista suspensa (select) com id "operacao", contendo as opções:
- adição - option com value "add"
- subtração - option com value "sub"
- multiplicação - option com value "mult"
- divisão - option com value "div"
Um botão button do tipo button e conteúdo "Calcular"

Etapa 3

No arquivo JavaScript, crie a função calcular(). A ação dessa função deve ser um alert, com texto "Função executada".

Etapa 4

No arquivo HTML, adicione o atributo onclick ao botão, chamando a função calcular() criada anteriormente.

Até aqui temos duas caixas de entrada de dados na página, um campo de seleção para escolher a operação e um botão para executar a função. No entanto, a função ainda não realiza nenhum cálculo, apenas exibe uma mensagem de alerta.

Etapa 5

No arquivo JavaScript, implemente a lógica da função calcular() para realizar os cálculos com base nos valores inseridos e na operação selecionada.

Pegue o valor do campo de entrada 1 e o armazene em uma variável. Atenção, converta o valor para um número usando a função parseFloat().

Pegue o valor do campo de entrada 2 e o armazene em uma variável. Atenção, converta o valor para um número usando a função parseFloat().

Pegue o valor do campo de seleção e o armazene em uma variável.

Crie uma variável resultado, inicializada com o valor 0.

let num1 = parseFloat(document.getElementById("numero-1").value);
let num2 = parseFloat(document.getElementById("numero-2").value);
let operacao = document.getElementById("operacao").value;
let resultado = 0;

Faça um alert imprimindo as variáveis e teste para verificar se estão pegando os valores corretamente.

Etapa 6

Após consultar os valores e armazená-los em variáveis, vamos fazer uma avaliação condicional para realizar o cálculo com base na operação selecionada.

Se a operação for "add", some os valores e armazene o resultado na variável resultado.
Se a operação for "sub", subtraia os valores e armazene o resultado na variável resultado.
Se a operação for "mult", multiplique os valores e armazene o resultado na variável resultado.
Se a operação for "div", divida os valores e armazene o resultado na variável resultado.

O código abaixo apresenta a estrutura de verificação da operação. Implemente as operações matemáticas nos blocos correspondentes:

 if (operacao === "add") {
	// aqui somar
} else if (operacao === "sub") {
	// aqui subtrair
} else if (operacao === "mult") {
	// aqui multiplicar
} else if (operacao === "div") {
	// aqui dividir
}

Etapa 7

Exiba o resultado em um alerta no formato: "O resultado da operação é [resultado]."