JS - Javascript no browser

A partir de agora vamos ver exemplos de como usar nosso código Javascript em páginas web, hoje veremos as possibilidades para isso e também aproveitaremos o momento para exemplificar a questão do escopo de variáveis.

Estrutura minima do html

Sabemos que a estrutura base para uma página web são as tags "html", dentro dela "head" e "body", nosso código Javascript deve estar na tag "script".

A tag "script" pode ser incluída tanto dentro da tag "head" quanto dentro da tag "body", a diferença é que, quando nosso código estiver na "head" ele será carregado antes do conteúdo da página e quando nosso código estiver no "body" primeiro serão carregados os elementos "html" para em seguida nosso Javascript ser carregado.

Como podemos imaginar o forma mais indicada atualmente é a inclusão no "body", pois caso nossos scripts sejam "pesados" eles não impactarão no carregamento de nossa página.

Bom, afirmamos que nosso código Javascript vai na tag "script", podemos tanto digitar nosso código dentro da tag como podemos realizar uma referencia a um arquivo externo, sendo mais indicado a última forma, pois assim temos uma organização melhor, podendo dividir nosso código em arquivos diferentes, de acordo com seu propósito.

Para exemplificar, criaremos um arquivo "index.html", um diretório "js" e dentro desse diretório criaremos o "main.js" e o "exemplo.js". No "index.html" teremos a estrutura base de uma página e a importação desses dois arquivos de script (atentar para o detalhe da importação do script, que se dá por meio da propriedade "src" da tag "script"):

Exemplificando o escopo

Na postagem sobre IIFE - immediatley-invoked function expression nós vimos as funções autoexecutáveis e ressaltamos sua importância para proteger o escopo de variáveis, agora veremos isso na prática, primeiro criaremos uma variável no script "main.js" e mostraremos seu conteúdo no script "exemplo.js", como resultado o valor atribuído em uma classe estará disponível na outra classe, e pior, podemos alterar esse valor na outra classe:

Em "main.js"

console.log('main.js');

var nome = 'Teresa';

console.log('main.js', 'nome', nome);

Em "exemplo.js"

console.log('exemplo.js');

console.log('exemplo.js', 'nome', nome);

nome = 'Adamastor';

console.log('exemplo.js', 'nome', nome);

Como resultado

Como podemos ver, as consequências para isso podem ser catastróficas, podemos ter variáveis de um script sendo alteradas em outro e quando menos percebermos teremos uma série de anomalias no comportamento de nossa aplicação e teremos dificuldades para a solução.

Resolvendo o problema do escopo

Simples, basta usarmos o conceito da IIFE, nossas funções autoexecutáveis protegerão nossas variáveis e o problema de escopo estará resolvido:

Em "main.js"

(function() {

    console.log('main.js');

    var nome = 'Teresa';

    console.log('main.js', 'nome', nome);

})();

Em "exemplo.js"

(function() {

    console.log('exemplo.js');

    nome = 'Adamastor';

    console.log('exemplo.js', 'nome', nome);

})();

Como resultado

Podemos concluir, com tudo que foi visto aqui, que devemos escrever nosso código Javascript em arquivos a parte da página, que devemos importar esses arquivos na tag "script", e que a tag "script" deve estar dentro da tag "body" e que devemos mais do que nunca usar o conceito da IIFE para evitar problemas de escopo.