Neste tutorial aprenderá como incluir JavaScript num documento HTML.
Trabalhar com Client-side Script
Client-side scripting refere-se ao tipo de programas de computador que são executados pelo navegador web do utilizador. JavaScript (JS) é a linguagem de scripting do lado do cliente mais popular na web.
O elemento <script> é utilizado para incorporar ou referenciar JavaScript dentro de um documento HTML para adicionar interactividade às páginas web e proporcionar uma experiência significativamente melhor ao utilizador.
alguns dos usos mais comuns do JavaScript são validação de formulários, geração de mensagens de alerta, criação de galeria de imagens, mostrar conteúdo oculto, manipulação de DOM, e muitos mais.
Adicionar JavaScript a páginas HTML
JavaScript pode ser incorporado directamente dentro da página HTML ou colocado num ficheiro de script externo e referenciado dentro da página HTML. Ambos os métodos utilizam o elemento <script>.
Embedding JavaScript
Para incorporar JavaScript num ficheiro HTML, basta adicionar o código como conteúdo de um <script> element.
O JavaScript no exemplo seguinte escreve uma cadeia de texto para uma página web.
Exemplo
Experimente este código ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Embedding JavaScript</title></head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script></body></html>Tip: Idealmente, os elementos do script devem ser colocados na parte inferior da página, antes da etiqueta do corpo de fecho, ou seja </body>, porque quando o browser encontra um script, pára a renderização do resto da página até analisar o script que pode ter um impacto significativo no desempenho do seu site.
Chamada de ficheiro JavaScript externo
Também pode colocar o seu código JavaScript num ficheiro separado (com uma extensão .js), e chamar esse ficheiro no seu documento HTML através da extensão src atributo da tag <script>.
Isto é útil se quiser o mesmo script disponível para vários documentos. Poupa-lhe de repetir a mesma tarefa vezes sem conta e torna o seu sítio web muito mais fácil de manter.
O exemplo seguinte demonstra como ligar um ficheiro JS externo em HTML.
Exemplo
Experimente este código ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Linking External JavaScript</title></head><body> <div></div> <script src="hello.js"></script></body></html>Nota: Quando o atributo src é especificado, o elemento <script> deve estar vazio. Isto significa simplesmente que não pode usar o mesmo elemento <script> tanto para incorporar o JavaScript como para ligar a um ficheiro JavaScript externo num documento HTML.
Tip: Os ficheiros JavaScript são ficheiros de texto normais com .js extensão, tal como “olá.js”. Além disso, o ficheiro JavaScript externo contém apenas declarações JavaScript; não contém o elemento <script>...</script> como JavaScript incorporado.
O elemento HTML noscript
O elemento <noscript> é utilizado para fornecer um conteúdo alternativo para os utilizadores que têm o JavaScript desactivado no seu browser ou que têm um browser que não suporta scripts do lado do cliente.
Este elemento pode conter qualquer elemento HTML, para além de <script>, que pode ser incluído no elemento <body> de uma página HTML normal. Vamos ver um exemplo:
Exemplo
Experimente este código ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Noscript Demo</title> </head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript></body></html>Nota: O conteúdo dentro do elemento noscript só será exibido se o navegador do utilizador não suportar scripting, ou se o scripting estiver desactivado no navegador.