HTML com Javascript

  1. Script interno
  2. Script externo
  3. Formas de carregamento
    1. Carregamento síncrono
    2. Carregamento assíncrono
    3. Carregamento deferido
  4. A tag noscript

Se você acompanhou os tutoriais anteriores de HTML, já sabe que o propósito do HTML é definir a estrutura de uma página web, enquanto o CSS foi feito para definir a aparência dela. O Javascript (muitas vezes chamado apenas de JS) completa o trio de tecnologias universais da web. Ele também tem um propósito claro: definir o comportamento de uma página web. Ele é usado para coisas simples, como criação de pop-ups, e também para coisas mais complexas, como jogos.

Script interno

Assim como acontece com o CSS, há mais de uma forma de se incluir código Javascript em uma página. Uma delas é usando o elemento <script>:

<script>
  document.write("Hello, world!");
</script>

Veja que, nessa forma, basta colocar o código Javascript dentro do elemento, de forma análoga ao que é feito para incluir estilo no elemento <style>. Esse método tem os mesmos problemas do <style>. Ele dificulta o reaproveitamento do código e não dá pra cachear o Javascript de forma isolada.

Script externo

O segundo método é a inclusão de um arquivo de Javascript no elemento <script>. O exemplo de uso mais simples apenas informa o caminho do arquivo (que pode ser absoluto ou relativo) que se quer incluir no atributo src:

<script src="calculos/imc.js"></script>

Algumas pessoas também usam o atributo type="text/javascript", que informa o MIME Type do script, mas seu uso é opcional. Esse MIME Type é assumido implicitamente, se não for informado de forma explícita.

O elemento <script> pode ser colocado no <head> ou no <body>. Quando se opta por colocar os scripts no <body>, eles geralmente são colocados no fim dele. Isso faz com que o site carregue mais rapidamente, para que o Javascript não atrase o carregamento da página.

Formas de carregamento

Carregamento síncrono

Scripts são carregados de forma síncrona por padrão. Isso quer dizer que, ao ver uma tag script, o navegador para tudo o que está fazendo, faz uma request para obter o script, e só depois que o script for completamente baixado e interpretado, ele prossegue com o parsing do restante do HTML. Parsing de HTML ou Javascript nada mais é do que a análise da marcação ou do código deles feita pelo navegador.

O carregamento síncrono foi a principal motivação para mover as tags <script> para o fim do body, para que os carregamentos dos scripts não bloqueassem a renderização da página, prejudicando a experiência do usuário.

Carregamento assíncrono

Apesar do comportamento padrão ser carregar o JS de forma síncrona, é muito simples mudar isso. Basta usar o atributo async, que é um atributo booleano:

<script src="calculos/imc.js" async></script>

Carregar scripts de forma assíncrona acelera o carregamento da página. O browser não espera um script ser baixado para baixar o seguinte. Ele vai fazendo as requests uma atrás da outra, sem depender da resposta da última request para iniciar a request seguinte.

Quando um script é baixado, o navegador interrompe o parsing do HTML para parsear o script JS baixado. Esse parsing é feito mesmo que o parsing do script anterior ainda não tenha sido feito. Por isso, esse método é assíncrono tanto ao baixar os scripts, como ao parsear os mesmos.

Carregamento deferido

Há também os scripts deferidos (deferred). Eles são como se fossem um híbrido entre os scripts síncronos e assíncronos. Assim como acontece com os assíncronos, não é necessário esperar o carregamento de scripts anteriores para que a request do script seja feita. Ou seja, várias requests são disparadas simultaneamente, assim como acontece com os scripts assíncronos. Porém, há algumas novidades:

  • O parsing dos scripts só é realizado depois do parsing do HTML.
  • Os scripts são parseados de forma síncrona, embora sejam baixados de forma assíncrona. É um comportamento diferente de scripts que tem o atributo async, que são assíncronos em tudo.

A tag noscript

É possível que o browser não suporte JS ou tenha desabilitado ele. Para avisar aos usuários que um código JS seria executado na página, você pode usar a tag <noscript>. Seu conteúdo é exibido quando o Javascript está desabilitado ou não é suportado. Exemplo:

<p><noscript>O seu navegador está com o Javascript desabilitado ou não o suporta.</noscript></p>