1.9 - Incluindo Javascript no Documento HTML

Para incluir código javascript numa página HTML normalmente utiliza-se a tag <script>.

Analise o seguinte exemplo:

Neste caso temos a tag <script> no meio de um documento html. Esta tag contém uma linha com o comando document.write. Este comando produz uma saída que por sua vez é mesclada com o próprio documento html onde o script está inserido.

A tag <script> portanto serve para identificar para o navegador o que deve ser interpretado como commando html e o que deve ser interpretado como comando javascript. Tudo que estiver dentro da tag <script> (entre <script> e </script>) deve ser interpretado como javascript

O atributo "type" serve para especificar para o navegador qual é a linguagem de script que será utilizada. Como javascript é a linguagem padrão em praticamente todos os navegadores, muitas vezes o programador utiliza apenas <script> ao invés de <script type="text/javascript">.

Outro atributo da tag "script" é o "language" que é considerado obsoleto (deprecated) na especificação do HTML 4.01. Ainda assim, a maioria dos programadores continua utilizando esta forma uma vez que os principais navegadores continuam implementando-a.

A tag <script> pode aparecer em qualquer lugar da página, inclusive na área de cabeçalho (dentro da tag <head> ... </head>). A diferença neste caso é que, quando incluído na área de cabeçalho, o script será executado antes da página começar a ser exibida pelo navegador.



<script> aqui é executado antes da página ser exibida.


aqui é executado durante a exibição, na ordem em que
aparecer dentro do arquivo.


Dica

Navegadores que não são capazes de interpretar javascript irão representar qualquer conteúdo da tag script como se fosse um texto qualquer que faça parte do documento. Para evitar que isso aconteça é recomendável incluir qualquer código de script dentro de comentários para o html (<!-- e -->).

Existe ainda a tag <noscript> ... </noscript> para exibir uma alternativa ao código javascript em navegadores que não saibam executá-lo.

<html>
<head><title>Meu primeiro Javascript</title></head>
<body>
<h1>Meu primeiro Javascript</h1>
<script type="text/javascript">
<!--
document.write("alo mundo !!!");
-->
</script>
<noscript>
Esta página utiliza scripts e seu navegador não é capaz de interpretá-los.
</noscript>
<font size=4>acabou o script volta ao html</font>
</body>
</html>

É possível também carregar um código de script a partir de um arquivo separado do código html da página. Neste caso usamos o atributo SRC="arquivo.js" para indicar o nome do arquivo, sem colocar nada dentro da tag <script>. Por exemplo: <script language="javascript" src="global.js"></script>

<html>
<head>
</head>
<body>
<script type="text/javascript" src="global.js"> </script>
</body>
</html>

home.htm

  
document.write ("alô mundo !!!");

global.js

A prática de separar o código javascript do código HTML em arquivos diferentes, pode ser bastante útil. Imagine que o site que você está desenvolvendo tenha uma grande número de páginas parecidas que utilizam os mesmos códigos de script. Você pode neste caso tentar agrupar estes códigos num arquivo separado de forma que ele seja apenas incluído nas diversas páginas que o utilizam. Qualquer necessidade de alteração nestes procedimentos fica extrememente facilitada pois precisará ser feita em apenas um arquivo.

Para facilitar ainda mais esta separação de procedimentos veremos mais adiante o conceito de funções.

Dica

Em linguagens de programação tradicionais como C ou Java, todos os comandos da linguagem devem ser terminados por um ponto-e-vírgula. Em javascript entretanto, este ponto-e-virgula é opcional. Ele só precisa ser usado se você quiser escrever dois comandos numa mesma linha.