Javascript

Organização dos scripts

Atualizado em 20.2.2009

As marcações de Javascript podem ser aplicadas de três maneiras diferentes, de acordo com a abrangência das suas aplicações dentro do site:

1) A partir de arquivos anexados à página entre as marcações <head> </head> localizadas em arquivos.js anexos às páginas:

<html>
<head>
<title>Exemplo de Javascript anexado</title>
<script type="text/javascript" src="exemplo.js"></script>
</head>

<body>
<input type="button" value="submit" onClick="showWindow();"/>
<p>
Parágrafo de texto
</p>
</body>
</html>

No código acima, a função "showWindow()" está localizada dentro do arquivo "exemplo.js. Quando se usa o atributo "src", o arquivo externo é usado como referência, semelhante a uma imagem ou a uma folha de estilos CSS

A marcação <script type="text/javascript" src="exemplo.js"></script>, avisa o browser que:

- Encontrou um script
- O arquivo está em formato de texto
- Deve ser interpretado como Javascript
- O código está no arquivo "exemplo.js", localizado no endereço indicado (o arquivo pode ficar em qualquer pasta no servidor, desde que o link aponte para a pasta correta)
- A marcação de fechamento, </script>, sinaliza ao browser o final do código

O uso de arquivos externos é indicado por diversos motivos:

É mais seguro (o código-fonte da página não mostra o script).

Facilita a atualização - um arquivo altera os scripts em todas as páginas ao mesmo tempo.

Acelera o tempo de carregação das páginas, porque os browsers armazenam uma imagem do arquivo e a utilizam quando encontram outra página em que o mesmo esteja presente - este é carregado apenas uma vez.

Javascripts são baixados sequencialmente, mesmo que o arquivo HTML já esteja no browser, nada aparece na tela até que o script esteja carregado.

Evita que os scripts sejam rastreados pelas ferramentas de busca - estas marcações não afetam os resultados das buscas, portanto não precisam ser registradas

2) Os scripts podem também ser aplicados diretamente entre as marcações <head> </head>:

<html>
<head>
<title>Exemplo de Javascript dentro do código da página</title>
<script language="text/javascript">
function showWindow()
{
window.open('http://www.sobreportais.com.br);
}
</script>

</head>

<body>
<input type="button" value="submit" onClick="showWindow();"/>
</body>
</html>

No código acima, a função "showWindow()" está localizadadentro do código da página.

Os scripts podem também ficar localizados no pé do código de cada página.

3) Scripts podem ser aplicados dentro das marcações de HTML

Exemplo:
<input type="button" value="Submit" onClick="window.open('http://www.sobreportais.com.br');" />

 

Referências (Recursos técnicos - para web sites)
Professional JavaScript for web developers: JavaScript in the browser, Pt. 1 (WebReference, acesso em 20.6.2005)

Avellar e Duarte no Twitter Avellar e Duarte no Facebook