top of page
  • Foto do escritorFábio Henrique

Do zero a iniciante - Javascript manipulando dados

Atualizado: 18 de jul. de 2020

Para ficar claro o que dá para fazer com o Javascript, neste post eu criei um exemplo prático com o qual você poderá interagir. A ideia aqui é analisar o código e entender como ele funciona, logo você ira usar muito seu vscode


É pré-requisito aqui que você saiba HTML, CSS e Bootstrap!


Hands On


No exemplo abaixo temos um formulário simples. Informe o ano em que nasceu depois clique em Calcular Idade que o resultado será exibido.



Vamos ver e analisar o código. A análise irá cobrir apenas os pontos referentes ao funcionamento. O layout é basicamente Bootstrap e você pode olhar na documentação do mesmo


<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
 integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                Calcular Idade
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <form>
                            <div class="form-group">
                                <label for="anoNascimento">Ano de nascimento</label>
                                <input id="anoNascimento" type="text" class="form-control" />
                                <small class="form-text text-muted">Iremos dizer sua idade.</small>
                            </div>
                            <div id="idade" class="alert alert-success" role="alert">

                            </div>
                            <button type="button" class="btn btn-primary" onclick="calcularIdade();">Calcular
                                Idade</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

 const calcularIdade = () => {
 let anoAtual = 2020;
 let anoNascimento = document.getElementById("anoNascimento").value;

 let idade = anoAtual - anoNascimento;
 document.getElementById("idade").innerHTML = `Você tem ${idade} anos de idade`;
        };

 </script>
</body>

</html>

Análise HTML


<label for="anoNascimento">Ano de nascimento</label>
<input id="anoNascimento" type="text" class="form-control" />

A tag label apenas exibe o texto "Ano de nascimento". Esta tag possui o atributo for que tem o valor "anoNascimento" repare que este valor é idêntico ao id da tag input. Isto é feito para criar um vinculo entre label e input, quando você clicar no texto do label verá que o foco irá para o input


<button 
type="button" class="btn btn-primary" onclick="calcularIdade();">
Calcular Idade
</button>

Na tag button temos o atributo onclick. Este atributo serve para dar uma ação ao clique do botão. Basicamente ele "disparar" um determinado código Javascript que você tenha criado.


<div id="idade" class="alert alert-success" role="alert"></div>

Esta div irá servir apenas como container para exibir o resultado do calculo da idade, por isto ela não tem nenhum conteúdo. Repare que o fato de usar esta div vazia deixa uma linha verde tosca no formulário acima, vamos corrigir isso mais adiante.


Análise Javascript


const calcularIdade = () => {
 let anoAtual = 2020;
 let anoNascimento = document.getElementById("anoNascimento").value;

 let idade = anoAtual - anoNascimento;
 document.getElementById("idade").innerHTML = `Você tem ${idade} anos de idade`;
};

O código Javascript, como disse no post anterior, fica dentro da tag <script> quando usamos a abordagem internal.


Função


Temos aqui o que chamamos de função. Que nada mais é do que uma série de instruções para se chegar a um resultado desejado.


A função calcularIdade é "disparada" toda vez que clicamos no botão "Calcular Idade", definido anteriormente no HTML.


Criar funções em Javascript é bem simples. Primeiro você deve escolher um nome que faça sentido para ela. No exemplo dado, queremos calcular a idade de uma pessoa baseado no ano de nascimento da mesma. Logo faz todo sentido chamar a função de calcularIdade.


Na programação criamos os nomes de funções e variáveis como uma palavra só sem espaços. No Javascript é um boa prática iniciar o nome de funções e variáveis com letras minúsculas


Uma vez que escolheu um nome basta declarar a função de acordo com a sintaxe do Javascript


const nome_da_minha_funcao = () => {};

O que uma função de fato irá fazer é definido entre os sinais de chaves { }


Vamos pensar agora. Como saber a idade de alguém baseado no ano em que ela nasceu? É uma conta simples de subtração, pegamos o ano atual e subtraímos o ano do nascimento.


Variável


Pense na variável como um lugar que você pode guardar um valor qualquer para poder usá-lo quando for necessário.


Não se pode ter duas variáveis com o mesmo nome!


let anoAtual = 2020;
let anoNascimento = document.getElementById("anoNascimento").value;
let idade = anoAtual - anoNascimento;

No exemplo acima temos 3 variáveis distintas cada uma guardando um valor diferente. Use a seguinte sintaxe para criar uma variável


let nomeDaVariavel;

O sinal de igual após o nome da variável indica que você está colocando uma valor dentro dela. Você pode atribuir um valor à uma variável no momento da criação da mesma ou no momento que você achar melhor


Para usar o valor que você armazenou em uma variável basta usar o nome dela.


let idade = anoAtual - anoNascimento;

Às variáveis anoAtual e anoNascimento foram declaradas e devidamente setadas antes de usá-las.


A linha de código acima diz o seguinte:

Crie uma variável com o nome idade e o valor dela será a o que tem dentro de anoAtual subtraído do que tem dentro de anoNascimento


document.getElementById("anoNascimento").value

O código acima pega o valor que o usuário digitou no campo Ano de nascimento


document.getElementById("idade").innerHTML = `Você tem ${idade} anos de idade`;

Como você já sabe o Javascript consegue manipular elementos do HTML e a linha de código acima faz exatamente isso.


Primeiro usamos o document.getElementById e informamos o id do elemento que queremos manipular. Depois usamos .innerHTML que permite alterar o conteúdo de um elemento HTML


`Você tem ${idade} anos de idade`;

O código acima é a mensagem que é exibida após o calculo da idade estar completo. Ele está entre crase porque utilizei um conceito chamado Interpolation. Este Interpolation foi utilizado porque tem uma informação dinâmica no meio da mensagem, no caso a variável idade. Qualquer informação dinâmica, no Interpolation, deve estar entre ${}


Refinando o código


Agora vamos nos livrar da linha verde tosca. Para isso teremos que fazer algumas alterações no código.


Adicione a classe "d-none", presente no Bootstrap, à tag responsável por exibir a mensagem.

"d-none" é uma abreviação de display none


<div id="idade" class="alert alert-success d-none" role="alert">
</div>

Adicione esta linha ao final da função calcularIdade


document.getElementById("idade").classList.remove("d-none");

Seu Javascript deverá estar assim


const calcularIdade = () => {

 let anoAtual = 2020;
 let anoNascimento = document.getElementById("anoNascimento").value;
 let idade = anoAtual - anoNascimento;
 
 document.getElementById("idade").innerHTML = `Você tem ${idade} anos de idade`;
 document.getElementById("idade").classList.remove("d-none");
 
};

Vamos entender o que foi feito. A classe "d-none" faz com que o elemento fique invisível por padrão. E a instrução Javascript acima remove a classe "d-none" o significa que o elemento voltará a ficar visível, exibindo a mensagem corretamente.



 


Observações


As instruções Javascript devem terminar em ponto e vírgula ";"


No Javascript, faz parte das boas práticas criar variáveis e funções usando Camel Case. O Camel Case é a prática de escrever palavras compostas ou frases de modo que cada palavra ou abreviatura no meio da frase comece com uma letra maiúscula, exceto a primeira palavra que deve começar com letra minúscula. Exemplo: ninjaDevSpace


O código segue uma ordem lógica. Não é possível calcular a idade de uma pessoa sem antes ter o valor do ano atual e o valor do ano em que ela nasceu.


O mesmo vale para exibição da div com a mensagem. A mesma só deve ser exibida depois da mensagem ter sido setada através do .innerHTML


 

Exercício


Baseado em tudo que foi ensinado até agora crie um formulário que funcione como o exemplo abaixo


 

Deixe seus elogios, críticas e dúvidas nos comentários!


83 visualizações2 comentários

Posts recentes

Ver tudo

2 Comments


Fábio Henrique
Fábio Henrique
Jul 18, 2020

Boa observação Gabriel, já atualizei o conteúdo

Like

Gabriel Orgo
Gabriel Orgo
Jul 18, 2020

Senti falta de uma nomenclatura quando a camelCase foi mencionada

Like
bottom of page