Criando um ambiente de teste para desafios da DIO

22/12/2020 18:03

Thiago Saraiva

Thiago Saraiva

Brasil

Estudante de Ciência de dados

  • #HTML
  • #JavaScript

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.

1

Certificado

Artigo relacionado

Comentários

    Nenhum comentário