O objetivo desse artigo é permitir que você crie uma página html local e possa testar valores próprios para validar sua solução e melhorar seu código a página html contém uma caixa de texto e único botão, mas você pode melhorar de acordo com a sua necessidade.
O segundo objetivo é calcular apenas a soma de 2 números, evitando assim o calculo de 3 números ou mais, e para isso, serão usado conceitos de ES6 para explorar a sua manipulação.
Let's code.
<!-- Código html 5 --> <!DOCTYPE html> <html lang="pt-br"> <script src="teste.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>integrando</title> </head> <body> <input type="text" name="" id="input-texto"> <button type="submit" onclick="teste1()">Clique aqui</button> </body> </html>
Obs: o script funciona também se colocar no elemento body, mas lembre-se que o código carrega primeiro no head e depois no body, portanto verifique se a função vai funcionar antes de a página ser carregada ou após de carregada(body).
Entretanto
<input type="text" name="" id="input-texto">
Estou inserindo um input do tipo text(string) e seu id respectivamente.
<button type="submit" onclick="teste1()">Clique aqui</button>
Inserção de um botão pode ser através da tag button ou a tag input type submit, porém input do tipo submit é muito mais dificil estilizar no CSS.
O metodo do botão onclick="teste1()" ativará o código java script carregado na página pela função criada de teste1()
Então vamos ao javascript.
Obs: criei um arquivo teste.js dentro da mesma pasta do index.html no sentido de facilitar o entendimento da implementação.
let teste1 = () => {
campo = document.getElementById("input-texto").value;
[a,b] = campo.split(" ",2).map(Number);
total = a + b
alert(total);
}
A variavel campo recebe um objeto DOM do html e é referenciado pelo:
document.getElementById("input-texto")
Onde o javascript procura o id ''input-texto" no corpo do html e por isso temos que colocar o metodo .value onde ele vai pegar o valor inserido no campo do html.
Confesso que código abaixo foi refatorado ou seja a solução foi construida com muitas mais linhas de código porém esse ficou mais simples de entender
[a,b] = campo.split(" ",2).map(Number);
A variável [a] irá receber a primeira string digitada e a variável [b] vai receber a segunda string digitada.
( lembrando que o campo irá receber apenas números) desde que um espaço entre elas no campo de texto do html, pois a função .split a transformará a variável campo em um array de string.
Portanto não podemos somar strings de números exceto se usamos o método reduce que não vem ao caso nesse exemplo.
Poderiamos usar a função parseInt(campo[0]) e parseInt(campo[1]). obs: A função parseInt tem um desempenho pior de recursos de maquinas( memoria ) em caso de outros navegadores exceto Firefox.
Sendo parseFloat > Number > parseInt
Continuando
A método .map tem o objetivo de alterar a array do tipo string para numeros usando a palavra reservada do javascript Number.
A variável Total recebe a soma de a + b
Alert("Total") mostra na página o resultado da operação.
Apesar de ser meu primeiro artigo e justamente longo... espero de coração ajudar a comunidade e caso queira fazer alguma sugestão para alterar alguma bobagem escrita fique a vontade.
Caso ache uma solução mais fácil e queira compartilhar fique a vontade também.
Faça parte da nossa comunidade!
Domine as tecnologias utilizadas pelas empresas mais inovadoras do mundo e encare seu novo desafio profissional, evoluindo em comunidade com os melhores experts.
