Podemos usar o elemento <script> para incluir código javascript em uma página html.
Há duas formar de fazer isso:
- Script Inline
O código JS é escrito no próprio arquivo html.
<script>
console.log('Hello World!');
</script>
Script Externo
O código JS é escrito em um arquivo separado, com a extensão .js
e importado no arquivo html através do atributo src.
<script src="./assets/js/script.js"></script>
Algumas informações sobre o elemento <script>:
- Conteúdo Permitido: Script dinâmico, como "text/javascript".
- Omissão de tag: None, both the starting and ending tag are mandatory.
- Pais permitidos: Qualquer elemento que aceite
conteúdo de metadados ou
conteúdo fraseado.
- Regras ARIA permitidas: None.
- Interface DOM: HTMLScriptElement
O script externo pode ser incluído no elemento <head> ou <body> do documento HTML.
Render blocking (Bloqueio de renderização)
O browser lê o documento HTML linha por linha, de cima para baixo.
Quando a leitura do código chega numa tag script,
o broswer fica "travado" na linha até que o arquivo seja BAIXADO e EXECUTADO.
Os elementos HTML somente são inseridos no DOM após serem lidos.
Isso significa que para acessarmos eles via JavaScript,
eles precisam ser carregados antes dos scrips.
<div id="acessivel"></div>
<script src="script.js"></script>
<div id="inacessivel"></div>
Atributos do elemento <script>
Atributo src
Atributo text
Atributo type
Atributo integrity
Atributo nomodule
Atributo crossorigin
Atributo defer
Esse atributo Boolean é usado para indicar ao navegador que o script deve ser executado depois que o
documento tenha sido parseado, mas antes de disparar o evento DOMContentLoaded
(en-US).
Scripts com o atributo defer vão impedir que o evento DOMContentLoaded seja disparado até que o script seja
carregado e tenha terminado de ser avaliado. Neste caso, o browser começa a baixar o arquivo sem gerar
render blocking, ou seja, ele continua lendo o html, e o script é executado somente depois que todos
os elementos html já estão no DOM.
<script src="script.js" defer></script>
IMPORTANTE:
- Esse atributo não deve ser usado se o atibuto src estiver ausente (ex. scripts inline), nesse
caso ele não vai ter efeito.
- Scripts com o atributo defer vão ser executados na ordem em que aparecem no document.
- Para conseguir um efeito similar para scripts inseridos dinamicamente use async=false.
Atributo async
NOTAS:
- Scripts sem atributos async ou def, bem como scripts embutidos, são buscados e
executados imediatamente, antes que o navegador continue a analisar a página
- The script should be served with the text/javascript MIME type, but browsers are lenient and
only block them if the script is served with an image type (image/*), a video type (video/*), an
audio (audio/*) type, or text/csv.
If the script is blocked, an error (en-US) is sent to the element, if not a success (en-US) event is
sent.