SdevLab – Tutorial | JavaScript – Onde colocar os Scripts?

Fala galera!
Dando continuidade ao post anterior, este explica onde colocar os blocos de script.

Boa leitura!

ATUALIZAÇÃO (24/08/2015): Este post foi escrito com base nos tutoriais do W3C para JavaScript ECMA-262 (dei um curso de linguagens web em 2010 mais ou menos e foi deste curso que surgiu a série de posts). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para a versão ECMAScript 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

Onde colocar seus Scripts

JavaScript é executado pelo navegador assim que a página é carregada, então é uma boa idéia colocar os scripts (que podem ser vários, não existe limite de script por página) em um local adequado (sim, existe mais de um).
Este local pode ser entre as tags <body> e </body>, <head> e </head> ou ainda você tem a opção de escrever um arquivo somente com o script, salvá-lo com a extensão .js e então inserir o  endereço deste arquivo na sua página para utilizar os scripts deste arquivo externo.

JavaScript em <body>

Blocos de script no meio da página são bastante simples de se entender, bastando para isto o exemplo abaixo:


<html>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>

document.getElementById("demo").innerHTML=Date();

</body>
</html>

Como você pode ver, o exemplo simplesmente coloca o conteúdo do parágrafo que tem id=”demo”. Inicialmente vazio.

JavaScript em <head>

Se você optou por colocar seu script entre as tags <head> e </head> significa que talvez você não deseja que seu script seja imediatamente executado pelo navegador, então este script deve ser uma função, que vai estar esperando para ser executada (um dos estilos mais comuns de script…).

Para mostrar melhor, exemplo:


<html>
<head>

function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}

</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display  Date</button>
</body>
</html>

Neste exemplo tem um botão, que tem como ação chamar a função displayDate() quando pressionado. Funções JavaScript serão abordadas posteriormente.

Scripts Externos

Para finalizar, se você quer escrever várias funções que vai usar sempre, de repente é uma boa idéia juntar todas elas em um arquivo externo e somente colocar o endereço deste arquivo como referência na página, como é comum se fazer com css.

A única regra para isto é que seu arquivo deve ter a extensão .js e não pode conter as tags !

Exemplo:


<html>
<head>
http://xxx.js
</head>
<body>
</body>
</html>

Juntando tudo

Agora que já sabemos que modalidades de scripts podemos usar, vem a parte mais interessante, não precisa ser uma ou outra, podemos usar scripts em body, head e ainda ter um arquivo de scripts anexado, funcionando tudo junto!

Tente experimentar, cuidado pra não confundir!

Até a próxima!
xD

Fonte: w3schools.com

Um comentário sobre “SdevLab – Tutorial | JavaScript – Onde colocar os Scripts?

  1. Pingback: SdevLab – Curso | Aprenda JavaScript ECMA-262 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s