Neste tutorial de nosso Curso de JavaScript Online e Gratuito, iremos aprender um pouco mais do funcionamento do JavaScript em nossos navegadores.
Veremos onde e quando os scripts são executados, onde podem ser inseridos, como usar scripts externos ao documento HTML, scripts na tag <head>, <html>, dentre outros detalhes sobre como as coisas funcionam no mundo JavaScript.
Como o JavaScript funciona no navegador
Em nosso tutorial de JavaScript sobre a tag <script> passado, colocamos o código do JavaScript dentro da tag script, que por sua vez ficou dentro da tag head, logo no início de nosso documento HTML.
Isso não é regra, nem obrigatório.
Na verdade, como veremos no decorrer de nossa apostila de JavaScript, essa é a maneira mais incomum de se inserir scripts em sites, pois podemos colocar nossos códigos JavaScript em diversas partes de um documento HTML, até mesmo fora (em um arquivo externo, de extensão .js, que vamos aprender a criar ainda neste tutorial).
Mas antes de aprender sobre o posicionamento de nossos códigos em JavaScript, é importante entender como seu navegador vai ler e interpretar eles. Aliás, é importante também entender a ordem que o browser lê aquela enorme quantidade de códigos HTML, JavaScript, PHP, etc.
A ordem de leitura e interpretação (para renderizar na tela do navegador) é feita na ordem de cima para baixo.
Se vier uma tag de imagem primeiro, ela será interpretada e exibida.
Se tiver um texto depois dessa tag de imagem, só depois esse texto vai ser exibido.
Sempre na ordem descendo.
Assim, um código de JavaScript só é interpretado e executado quando é encontrado.
Além disso, o navegador só vai prosseguir quando interpretar todo o código JavaScript!
Durante sua carreira de desenvolvedor web, vai acontecer de você programar algo errado no JavaScript, como um looping que nunca acaba, e verá que o restante de sua página não vai ser carregada, pois o navegador ficou preso em algum ponto script.
JavaScript na tag <head> do HTML
A primeira coisa que um navegador lê e interpreta, é o conteúdo da tag <head> do HTML, pois lá existe contém informações importantes do documento (página) em questão, como título, descrição, língua, dentre outras coisas.
Como fizemos no tutorial passado, colocamos nosso código JavaScript dentro da tag <script>, que ficou dentro da <head>.
Ou seja, nosso script foi executado bem no começo, antes mesmo de aparecer o conteúdo do site, pois a tag <head> vem antes da tag <body>, o corpo do site.
Colocamos nossos scripts na head sempre que desejamos que ele seja executado antes do restante da página do site.
Por exemplo, um efeito especial no seu site, um script que evite que o usuário clique com o botão direito, um script que evite que o usuário aperte “Ctrol+C” pra copiar seu conteúdo…isso deve ser interpretado e carregado antes do site aparecer.
Na head, podemos colocar nosso script dentro da tag <script>, como já ensinamos no tutorial passado, como podemos passar o endereço do arquivo de extensão .js, externo ao documento HTML (vamos aprender a fazer isso no final deste tutorial).
JavaScript na tag <body> do HTML
Muitas vezes não é necessário carregar um script na head, antes do conteúdo da página ser carregado.
Por exemplo, você pode colocar um script que seja rodado apenas quando se clica em um botão. Não há necessidade de colocar ele na head, pois talvez não seja nem preciso que ele rode (talvez o usuário nem clique no botão).
Por isso, podemos colocar nossos scripts dentro da tag <body>, assim podemos ter um controle maior sobre quando o script deve ser interpretado pelo navegador.
O código a seguir exibe a data e hora de seu computador.
Note que ela só roda quando é chamada, no corpo do site.
<body>
<h2>Curso JavaScript Progressivo - Online e Grátis</h2>
Data e Hora atual:
<div id="data" style= "display:inline"></div>
<script type="text/javascript">
document.getElementById("data").innerHTML=Date();
</script>
</body>
Ou seja, as vezes não é necessário que o script seja rodado antes.
Muitas vezes eles nem rodam, vai depender da interação do usuário, do que ele fizer.
No código acima, o trecho de JavaScript exibe a data no elemento na tag div de nome “data”.
Pode ser que queiramos colocar essa data só no final do site, ou somente quando clicarem em algum botão ou link.
Não saiam colocando scripts JS à toa, coloque somente o necessário, e onde realmente for necessário.
Lembrem-se que o Google leva em conta o tempo de carregamento de um site para rankear melhor em seus resultados de busca, e JavaScript pode deixar o carregamento de seu site bem lento!
JavaScript em arquivo externo .js
Os exemplos que demos foram bem simples, bem simples mesmo. Afinal, estamos apenas iniciando nosso curso de JavaScript. Porém, ao passo que você for estudando nossos tutoriais, você será capaz de programar scripts cada vez mais complexos e úteis.
Quando formos criar jogos em JavaScript, efeitos interessantes, aplicativos bem úteis e profissionais, veremos que facilmente o código JavaScript chega a ter dezenas ou centenas de linhas. Alguns sistemas mais complexos possuem milhares de linhas no script.
Agora você imagina o tamanho de um documento HTML, que possui centenas de código HTML e centenas de código JavaScript. Vai ser enorme, gigante e muito bagunçado. Um arquivo assim é difícil de lidar, de estudar, de fazer alguma alteração depois.
Visando organizar nossos códigos JavaScript, nós iremos colocar nosso código em um arquivo externo, um arquivo de script.
Será um simples arquivo de texto, a única diferença é que ele deve ter a extensão .js
Se tiver estudado CSS, é exatamente a mesma coisa (no caso, usamos arquivo com extensão .css).
Então mãos a obra.
Abra seu editor de textos (como o notepad++, notepad, sublime text etc), e coloque o seguinte código:
alert("Estou aprendendo a programar em JavaScript!");
Salve esse arquivo como o nome “script.js“.
Agora, para nosso site saber da existência desse arquivo de script, vamos colocar o parâmetro “src” (abreviação de source, fonte em inglês) em nossa tag <script>, que vai dizer a URL, o endereço onde se localiza esse arquivo de JavaScript.
Coloque este arquivo no mesmo diretório (pasta) que está seu documento .html, sua head deve ficar:
<head>
<title>Tutorial de JavaScript</title>
<meta name="description" content="Onde inserir o código JavaScript no HTML">
<metac harset="utf-8">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Curso JavaScript Progressivo - Online e Grátis</h2>
</body>
Agora rode seu arquivo HTML e veja o resultado.
Note que primeiro aparece a janela com o botão OK, mostrando a mensagem “Estou aprendendo a programar em JavaScript”.
E só depois que você clica em OK que aparece o corpo do site.
Como dissemos, primeiro o navegador vai rodar o que está na head.
No caso, existe um arquivo de script lá, indicado pelo endereço src=”script.js”, então esse script é inicialmente interpretado e rodado, por isso você vê primeiro a janela, e só depois que esse script termina de ser executado (quando você clica em OK) que o restante do site aparece, como havíamos dito.
Exemplo de código em JavaScript
Agora que já aprendemos bem onde posicionar nossos scripts, como o navegador os lê e como criar um arquivo de script externo ao HTML, vamos fazer alguns scripts bacanas!
Vimos que o navegador lê do começo até o fim do documento, e sai interpretando, executando e exibindo o que aparece automaticamente.
Porém, isso não é obrigatório.
Pode ser que o navegador exiba somente uma coisa, caso cliquem em algum botão, pode ser que execute algo diferente, se o usuário assim desejar…ou pode ser que nenhum script seja executado, mesmo que tenha um arquivo gigantesco de JavaScript.
Vamos lá, coloque o seguinte código em seu arquivo script.js:
function mostraData()
{
document.getElementById("data").innerHTML=Date();
}
function mostraMensagem()
{
alert('Estou aprendendo a programar em JavaScript!');
}
Agora, coloque isso em sua tag body:
<body>
<h2>Curso JavaScript Progressivo - Online e Grátis</h2>
<p id="data"></p>
<button type="button" onclick="mostraData()">Exibir data</button>
<pid="msg"></p>
<button type="button" onclick="mostraMensagem()">Exibir mensagem</button>
</body>
Rode. Vai aparecer dois botões (usamos a tag <button>).
Se clicar no primeiro, o navegador chama a função “mostraData()”, que é definida no seu arquivo .js e executa somente aquele trecho do script.
Já se você clicar no segundo botão, só vai ser executado o código dentro da função “mostraMensagem()”.
Bacana, não?
Não se estresse se não entender o que é função, document.getElementById, onclick etc, vamos te ensinar tudo com calma e sem pressa.
Por hora, apenas digite o código acima, tanto do seu script.js como da sua página HTML e rode o site, clique nos botões, veja o que vai acontecendo.
