Equações
Faça uma página para roubar na prova de matemática resolver equações
de 2º grau! Baixe o código seminal.
Atividade
Você deve concluir a página que calcula as raízes de equações de 2º grau. Para isso, siga os exercícios.
Exercício 1: completando o HTML
Complete o arquivo HTML com outro input
para o coeficiente c e um button
"Resolver!". Eles devem estar dentro da section
#coeficientes-da-equacao
.
Veja o slide sobre como criar um input
que recebe números e
o slide sobre como criar um button
.
Agora, crie um arquivo JavaScript vazio e o inclua no arquivo HTML, logo antes do
fechamento do body
. Veja os slides sobre
como incluir um arquivo JavaScript.
Escolha um bom nome para o arquivo que vai criar. Um bom nome de arquivo JavaScript deve indicar o que o código faz e não pode usar caracteres especiais (acentos, cedilha etc.). Também é recomendado usar apenas letras minúsculas. Exemplos:
matematica.js
✅math.js
✅equacao.js
✅resolve-equacao.js
✅javascript.js
❌ (nome genérico)script.js
❌ (nome genérico)Matematica.js
❌ (usou maiúscula)matemática.js
❌ (usou acento)
Exercício 2: clique no botão
Recupere, do DOM, o elemento HTML que representa o botão Resolver! e coloque-o numa variável. Veja como recuperar um elemento do DOM.
Então, associe uma nova função (você deve criá-la) para ser
executada ao clique do botão. Dentro dela, coloque código
para exibir uma mensagem de alerta com um textinho qualquer,
usando a função window.alert('string com um texto');
.
Esse window.alert(...)
vai fazer uma janelinha aparecer quando
você clicar no botão - isso é apenas para testar se você conseguiu
criar a função e registrá-la para o evento de 'click'
.
Exercício 3: cálculo do discriminante (Δ)
Altere a função que você criou no Exercício 2 para
REMOVER o window.alert(...)
. Agora, dentro dela,
escreva código JavaScript para:
- Pegar o valor de cada coeficiente e colocá-los em variáveis
- Veja como pegar o valor escrito pelo
usuário em um elemento
input
- Veja como pegar o valor escrito pelo
usuário em um elemento
- Calcular o valor do discriminante (Δ)
- Veja os operadores em JavaScript
- Veja algumas funções matemáticas adicionais em JavaScript
- Definir o valor do
input
#resultado-delta
como o valor encontrado para o discriminante
Se você tiver criado uma função com nome (em vez de anônima), escolha um bom nome para ela. O nome de uma função deve sempre indicar uma ação. E deve seguir a notação camelo 🐪. Exemplos:
function calcula()
✅function calcular()
✅function calculaDelta()
✅function delta()
❌ (não indica uma ação)function aaa()
❌ (não faz sentido)function calc()
❌ (abreviou sem precisar)function CALCULA()
❌ (não usou notação 🐪)function Calcula()
❌ (não usou notação 🐪)
Exercício 4: cálculo das raízes
Ainda na mesma função:
- se Δ for maior ou igual a 0:
- calcular o valor de x₁ e definir devidamente o valor
do
input
correspondente ao seu resultado - fazer o mesmo para x₂
- calcular o valor de x₁ e definir devidamente o valor
do
- se Δ for menor que 0:
- definir o valor dos
input
s das raízes como uma string vazia (isto é,''
)
- definir o valor dos
Como essa função agora está fazendo mais coisas do que calcular apenas o delta, escolha outro nome para ela que indique o que ela faz.
a != 0
Desafio 1: verificando Antes de calcular o valor do discriminante, verifique se o valor do coeficiente a digitado pelo usuário é diferente de 0.
Se ele for igual a 0, a equação não é de 2º grau. Nesse caso,
exiba uma mensagem de alerta informando isso ao usuário. Além disso,
interrompa a execução da função (com um return;
) para que os
cálculos não sejam feitos.
Desafio 2: mais cálculos
Além dos valores do discriminante (Δ) e das raízes, escreva no resultado também:
- a quantidade de raízes reais diferentes (de acordo com o discriminante)
- se a parábola está virada para cima ou para baixo
- a posição (x,y) do vértice da parábola
FAQ
-
Escrevi o código JavaScript mas não está funcionando. Por quê?
- É necessário investigar. Para isso, abra a ferramenta do desenvolvedor e procure por erros no console.
-
Como "colocar a saída" em um
<input>
?- É possível recuperar, mas também definir o valor
de um
<input>
. Para isso, basta atribuir um valor à propriedadevalue
de um elemento HTML, como pode ser visto no slide sobre valores de um input.
- É possível recuperar, mas também definir o valor
de um