Até o momento você aprendeu a escrever código HTML e deixá-lo bonito, seja com CSS ou usando o Bootstrap. Porém tudo que fizemos até agora foi estático, ou seja, as páginas não tinham interação alguma com o usuário e é isso que vamos aprender a fazer agora através do Javascript!
O Javascript é uma das linguagens de programação com maior demanda de mercado nos dias de hoje, então se você tem pretensão de conseguir algum emprego na área, aprender esta linguagem é um ótimo começo.
O Javascript consegue manipular os elementos do HTML o que permite fazer validações em formulários e controlar as interações de usuários em páginas da web.
Pegando valores e exibindo informações
Para pegar informações de um elemento específico no tela utilize
document.getElementById("ID_DO_SEU_ELEMENTO_HTML")O Javascript possui inúmeras outras formas de pegar e exibir valores e vamos ver algumas delas ao longo do curso!
Vamos ver um exemplo prático
<!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="row">
<form>
<div class="form-group">
<label>Ano de Nascimento</label>
<input id="anoNascimento" type="text" class="form-control" disabled />
</div>
</form>
</div>
</div>
<script>
console.log("Antes de setar ano de nascimento:", document.getElementById("anoNascimento").value);
document.getElementById("anoNascimento").value = 1990;
console.log("Depois de setar ano de nascimento:", document.getElementById("anoNascimento").value);
</script>
</body>
</html>O código acima produz o seguinte resultado
Vamos analisar o código.
Temos a presença da tag input e nela temos o atributo id, que nos permite identificá-la através do Javascript, também temos o atributo disabled que faz com que o usuário não possa alterar o conteúdo desta tag
A tag label é apenas um texto que serve para exibir a descrição da tag input. Neste caso "Ano de Nascimento
A tag script, no final do código, é onde devemos colocar o código Javascript
O id usado pelo document.getElementById é o id da tag input
O console.log é uma forma de ver o que acontece com o código passo-a-passo. Para entender melhor crie um arquivo com o código acima, abra-o no browser e aperte a tecla F12
O .value após o document.getElementById serve para retornar/setar um valor em um elemento HTML
Você deverá ver isto no seu browser
Como adicionar o Javascript
Assim como o CSS o Javascript pode ser adicionado inline, internal e external.
O inline é uma forma tosca e não recomendada então não falarei sobre ela.
Internal
O código acima é um exemplo de uso internal. Basicamente consiste em deixar o código Javascript dentro do mesmo arquivo que o HTML.
O melhor lugar para se usar scripts é no fim da página, dentro do body porém depois de todo o código HTML. Isto porque o Javascript manipula elementos do HTML logo estes precisam ser criados antes do Javascript utilizá-los para alguma coisa
External
Nesta abordagem o código Javascript é criado em uma arquivo separado com extensão .js. Uma vez criado este arquivo basta referenciá-lo no arquivo HTML desejado
Veja o mesmo código acima porém com a abordagem external
<!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="row">
<form>
<div class="form-group">
<label>Ano de Nascimento</label>
<input id="anoNascimento" type="text" class="form-control" disabled />
</div>
</form>
</div>
</div>
<script src="meuJavascript.js"></script>
</body>
</html>Deixe seus elogios, críticas e dúvidas nos comentários!
Valeu Gabriel! Os próximos terão muito mão na massa
Adorei, estou louco para nos aprofundarmos em .JS