Scribd
Carregar
19 visualizações2 páginas

Caso Pratico JavaScript Explicado

O documento apresenta um exercício prático para criar uma calculadora simples em JavaScript que permite ao usuário somar dois números inseridos em um formulário. O JavaScript é utilizado para capturar os valores, validar a entrada e exibir o resultado na página sem recarregá-la. Além disso, são propostas tarefas e desafios extras para expandir a funcionalidade da calculadora e melhorar a interface com CSS.

Enviado por

Bernaldino Fernandes
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
19 visualizações2 páginas

Caso Pratico JavaScript Explicado

O documento apresenta um exercício prático para criar uma calculadora simples em JavaScript que permite ao usuário somar dois números inseridos em um formulário. O JavaScript é utilizado para capturar os valores, validar a entrada e exibir o resultado na página sem recarregá-la. Além disso, são propostas tarefas e desafios extras para expandir a funcionalidade da calculadora e melhorar a interface com CSS.

Enviado por

Bernaldino Fernandes
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 2

Caso Prático: Calculadora Simples com JavaScript

O que é o JavaScript?
JavaScript é uma linguagem de programação utilizada principalmente para adicionar
interatividade e dinamismo a páginas web. Enquanto o HTML define a estrutura da página e
o CSS define o estilo, o JavaScript permite manipular o conteúdo de forma dinâmica, como
responder a ações do utilizador, validar formulários, criar animações, entre outros.

O que está a fazer o JavaScript neste caso?


Neste exercício, o JavaScript é utilizado para:​
1. Capturar os números inseridos pelo utilizador nos campos de entrada.​
2. Verificar se os valores inseridos são números válidos.​
3. Calcular a soma dos dois números.​
4. Exibir o resultado directamente na página.​
Esta funcionalidade permite ao utilizador obter o resultado sem necessidade de recarregar a
página.

Descrição do Exercício:
Vai criar uma página web simples que:​
1. Pede ao utilizador para inserir dois números.​
2. Calcula a soma desses dois números quando o botão 'Somar' é clicado.​
3. Exibe o resultado diretamente na página.

Passo a passo:
1. Crie um ficheiro HTML chamado index.html.​
2. Inclua um pequeno formulário com dois campos de texto para inserir números e um
botão para somar.​
3. Adicione um script em JavaScript para realizar o cálculo da soma e exibir o resultado.

Código de exemplo:

index.html
​
<!DOCTYPE html>​
<html lang="pt">​
<head>​
<meta charset="UTF-8">​
<meta name="viewport" content="width=device-width, initial-scale=1.0">​
<title>Calculadora Simples</title>​
</head>​
<body>​
<h1>Calculadora Simples</h1>​
<p>Insira dois números para calcular a soma:</p>​
​
<form id="calculator">​
<label for="number1">Número 1:</label>​
<input type="number" id="number1" required><br><br>​
​
<label for="number2">Número 2:</label>​
<input type="number" id="number2" required><br><br>​
​
<button type="button" onclick="calculateSum()">Somar</button>​
</form>​
​
<h2 id="result"></h2>​
​
<script>​
function calculateSum() {​
const num1 = parseFloat(document.getElementById('number1').value);​
const num2 = parseFloat(document.getElementById('number2').value);​
​
if (isNaN(num1) || isNaN(num2)) {​
document.getElementById('result').innerText = "Por favor, insira números válidos.";​
} else {​
const sum = num1 + num2;​
document.getElementById('result').innerText = "Resultado: " + sum;​
}​
}​
</script>​
</body>​
</html>​

Tarefa para os Alunos:


1. Copie o código acima e cole no ficheiro index.html.​
2. Abra o ficheiro no navegador.​
3. Teste o funcionamento inserindo dois números e clicando no botão 'Somar'.

Desafio Extra:
1. Modifique o código para adicionar outras operações: subtracção, multiplicação e divisão.​
2. Melhore a interface com estilos básicos usando CSS.

Você também pode gostar