Utilizando Javascript com HTML

Como já vimos em outros posts aqui no site, para criar páginas web usamos a linguagem HTML. Hoje veremos como unimos ela com o Javascript (também apresentado em um post anteriror), acessando e manipulando elementos da tela.

Motivação

Quando a web nasceu, no início dos anos 90, a ideia era possibilitar a troca de arquivos entre máquinas. Quando acessamos um site como http://lipsum.com/index.html estamos pedindo para uma máquina (chamada servidor) baixar o arquivo index.html para nossa máquina (que pode ser chamada de cliente). Toda essa comunicação é feita por um conjunto de regras de conexão chamada HTTP.

Qualquer programa que implemente essas regras do HTTP poderia baixar esse arquivo. O tipo mais comum de programa é o navegador web, que não só baixa o arquivo do jeito que ele foi escrito, como também interpreta-o e o apresenta na tela com representações gráficas como botões, imagens e links.

Com o passar do tempo, a internet foi evoluindo, as pessoas criaram necessidades de criar sites com comportamentos mais dinâmicos. Por exemplo, aparecer uma mensagem de senha fraca a medida que se digita num campo. Dessa necessidade nasceu o Javascript, a linguagem foi feita para rodar em conjunto com arquivos HTML.

Adicionando Javascripts

Existem algumas formas de adicionar códigos Javascripts no html, hoje vamos usar uma onde você escreve o javascript no mesmo arquivo de texto que o html. Para isso você precisa da tag <script> como mostramos a seguir em um exemplo.

<!DOCTYPE html>
<html>
   <head>
       <script type="text/javascript">
       <!-- Todo o código javascript deve ser escrito aqui--> 
       </script>
   </head>
   <body>
       
   </body>
<html>

 

Todo nosso código javascript será escrito entre as tags da linha 4 e 6. É importante entender que o navegador interpreta o arquivo de cima pra baixo (como fazemos nossa leitura), quando ele passa pela tag <script> ele irá rodar o código JS assim como se estivéssemos executando no Scratchpad do Firefox. Escreva o exemplo abaixo em um arquivo chamado index.html e abra esse arquivo pelo navegador.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <script type="text/javascript">
       alert("Olá mundo! Estamos executando de dentro de um página web!")
   </script>
   <body>
   </body>
</html>

Se você está acompanhando nossa série de textos sobre JS, pode se perguntar “mas nós já fizemos isso no nosso primeiro post sobre Javascript, porque estamos voltando nesse passo?”. Bom, naquele momento usamos o editor de texto do Firefox para rodar código javascript em cima da página que estava aberta no momento. Agora estamos criando um página do zero que executa o código JS no seu próprio carregamento <3 .

Acessando elementos do HTML via JS

É importante citarmos um importante modelo que acessa html via Javascript chamado DOM, mas nosso foco hoje é apenas conhecer alguns exemplos de como utilizá-lo.

<!DOCTYPE html> 
<html>
    <head>
    </head>
    <body>
        <form>
            <input id="nome" placeholder="Nome" type="text" />
            <input id="email" placeholder="email" type="email" />
            <input id="senha" placeholder="senha" type="password" />
            <button>Cadastrar</button>
        </form>
    </body>
</html>

Nesse novo documento (retirado de um post sobre como criamos um formulário simples em HTML) temos nas linhas 7, 8 e 9 inputs com o atributo id, que basicamente marca cada tag com uma identificação única no documento, como se fosse um CPF.

Veja abaixo alguns exemplos de manipulação a partir desse arquivos html.

var inputNome = document.getElementById("nome");
alert(inputNome.value);
inputNome.value = "Texto novo"; 

Basicamente, na linha 1 temos o código document.getElementById(“Nome”), o que ele faz pra quem não entende muito inglês é, pegar o elemento na tela que tenha o id “Nome”. A variável inputNome acaba ficando com esse valor. Graças ao DOM, temos que a variável pode ser entendida como o pŕoprio input, e com isso conseguimos ler e editar propriedades html dela. Por exemplo na segunda linha, onde inputNome.value é na verdade o valor que está escrito dentro da caixa de texto do input. Com isso, tentamos na ultima linha, editar esse valor com Javascript.

Eventos

Quando estamos navegando na internet, nós carregamos páginas, clicamos em links, escrevemos textos em inputs, passamos o mouse sob algum elemento e etc. Cada uma dessas ações podem ser chamadas de um evento. Com javascript você consegue criar códigos que apenas rodem como consequência de eventos.

No tópico anterior terminamos conhecendo um pouco sobre como manipular html, a primeira coisa que pensamos em fazer é colar o código javascript dentro da tag corretamente, como no exemplo abaixo.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <script type="text/javascript">
       var inputNome = document.getElementById("nome");
       alert(inputNome.value);
       inputNome.value = "Texto novo"; 
   </script>
   <body>
       <form>
            <input id="nome" placeholder="Nome" type="text" />
            <input id="email" placeholder="email" type="email" />
            <input id="senha" placeholder="senha" type="password" />
            <button id="cadastrarBotao">Cadastrar</button>
        </form>
   </body>
</html>

Mas como sabemos que o navegador roda os códigos sequencialmente, vamos aprender como definir códigos que rodem como consequência a eventos.

var button = document.getElementById("cadastrarBotao");
button.onclick = function () {
    var inputNome = document.getElementById("nome");
    alert(inputNome.value);
    inputNome.value = "Texto novo";  
}

Na linha 1 guardamos o elemento de id cadastrarBotao em uma variável. Na linha dois, usamos essa variável para definir um bloco de código (function) sempre que o evento onClick (ao clicar) rodar.

Se você colar esse código dentro da área javascript no seu arquivo html e rodar, vai perceber que ao cliar no botao, um alerta aparece com o texto digitado no primeiro input. Logo em seguida a página será recarregada pois esse é o comportamento padrão de um botão dentro de um form. Logo nosso código que deveria definir um novo valor pro input, não está funcionando e deixaremos isso para um próximo post, enquanto isso tente explorar novos eventos ou até mesmo criar novos códigos com o evento que usamos anteriormente.