HTML com Javascript
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>