Código e Guia da Ordem de Execução JavaScript

O design da sua página da Web usando JavaScript requer atenção à ordem em que seu código aparece e se você está encapsulando código em funções ou objetos, os quais afetam a ordem na qual o código corre.

Como o JavaScript em sua página é executado com base em certos fatores, vamos considerar onde e como adicionar JavaScript a uma página da Web.

Existem basicamente três locais aos quais podemos anexar JavaScript:

• Diretamente no cabeçalho da página
• Diretamente no corpo da página
• De um manipulador / ouvinte de evento

Não faz diferença se o JavaScript é dentro da página da web em si ou em arquivos externos vinculados à página. Também não importa se os manipuladores de eventos são codificados na página ou adicionados pelo próprio JavaScript (exceto que eles não podem ser acionados antes de serem adicionados).

O que significa dizer que o JavaScript é diretamente na cabeça ou no corpo da página? Se o código não estiver entre uma função ou objeto, ele estará diretamente na página. Nesse caso, o código é executado sequencialmente assim que o arquivo que contém o código foi carregado o suficiente para que o código seja acessado.

O código que está dentro de uma função ou objeto é executado apenas quando essa função ou objeto é chamado.

Basicamente, isso significa que qualquer código dentro do cabeçalho e do corpo da página que não esteja dentro de uma função ou objeto será executado enquanto a página estiver sendo carregada - assim que a página foi carregado o suficiente para acessar esse código.

Esse último bit é importante e afeta a ordem em que você coloca o código na página: qualquer código colocado diretamente na página que precise interagir com os elementos da página deve aparecer depois de os elementos na página da qual depende.

Em geral, isso significa que, se você usar código direto para interagir com o conteúdo da sua página, esse código deverá ser colocado na parte inferior do corpo.

Código dentro de funções e objetos

Um código dentro de funções ou objetos é executado sempre que essa função ou objeto é chamado. Se for chamado a partir do código diretamente no cabeçalho ou no corpo da página, seu lugar no ordem de execução é efetivamente o ponto em que a função ou objeto é chamado a partir do diretório código.

A atribuição de uma função a um manipulador de eventos ou ouvinte não resulta na execução da função no ponto em que é atribuída - desde que você esteja realmente atribuindo a própria função e não está funcionando a função e atribuindo o valor retornado. (É por isso que você geralmente não vê o () no final do nome da função quando ela está sendo atribuída a um evento desde a adição do parênteses executa a função e atribui o valor retornado em vez de atribuir a função próprio).

As funções anexadas aos manipuladores e ouvintes de eventos são executadas quando o evento ao qual estão anexados é acionado. A maioria dos eventos é acionada pelos visitantes que interagem com sua página. Existem algumas exceções, no entanto, como o carga evento na própria janela, que é acionado quando a página termina de carregar.

Funções anexadas a eventos nos elementos da página

Quaisquer funções anexadas a eventos em elementos dentro da própria página serão executadas de acordo com as ações de cada visitante individual - esse código será executado somente quando ocorrer um evento específico para acioná-lo. Por esse motivo, não importa se o código nunca é executado para um determinado visitante, pois esse visitante obviamente não executou a interação que exige isso.

Tudo isso, é claro, pressupõe que seu visitante tenha acessado sua página com um navegador que possui Javascript ativado.

Alguns usuários instalaram scripts especiais que podem interagir com sua página da web. Esses scripts são executados após todo o seu código direto, mas antes qualquer código anexado ao manipulador de eventos de carregamento.

Como sua página não sabe nada sobre esses scripts de usuário, você não tem como saber o que esses scripts externos podem fazer: eles podem substituir todo ou qualquer código anexado aos vários eventos aos quais você atribuiu em processamento. Se esse código substituir os manipuladores ou ouvintes de eventos, a resposta aos gatilhos de eventos executará o código definido pelo usuário em vez de, ou em adição ao seu código.

O ponto principal aqui é que você não pode assumir que o código projetado para ser executado após o carregamento da página poderá executar da maneira que você a criou. Além disso, esteja ciente de que alguns navegadores têm opções que permitem desativar alguns manipuladores de eventos no diretório navegador, nesse caso, um acionador de evento relevante não iniciará o manipulador / ouvinte de evento correspondente no seu código.