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").valueO 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
Boa observação Gabriel, já atualizei o conteúdo
Senti falta de uma nomenclatura quando a camelCase foi mencionada