Orden de ejecución de JavaScript

El diseño de su página web usando JavaScript requiere atención al orden en que aparece su código y si está encapsulando el código en funciones u objetos, todo lo cual afecta el orden en que se ejecuta el código. 

La ubicación de JavaScript en su página web

Dado que el JavaScript en su página se ejecuta en función de ciertos factores, consideremos dónde y cómo agregar JavaScript a una página web. 

Básicamente hay tres ubicaciones en las que podemos adjuntar JavaScript:

• Directamente en el encabezado de la página
• Directamente en el cuerpo de la página.
• De un manejador de eventos / oyente

No importa si JavaScript está dentro de la página web o en archivos externos vinculados a la página. Tampoco importa si los controladores de eventos están codificados en la página o si los agrega el propio JavaScript (excepto que no se pueden activar antes de agregarlos).

Código directamente en la página

¿Qué significa decir que JavaScript es directamente en la cabecera o cuerpo de la página? Si el código no está encerrado en una función u objeto, está directamente en la página. En este caso, el código se ejecuta secuencialmente tan pronto como el archivo que contiene el código se haya cargado lo suficiente como para acceder a ese código.

El código que está dentro de una función u objeto se ejecuta solo cuando se llama a esa función u objeto.

Básicamente, esto significa que cualquier código dentro del encabezado y el cuerpo de su página que no esté dentro de una función u objeto se ejecutará mientras se carga la página, tan pronto como la página se ha cargado lo suficiente como para acceder a ese código.

Ese último bit es importante e impacta el orden en el que coloca su código en la página: debe aparecer cualquier código colocado directamente en la página que necesite interactuar con elementos dentro de la página. después los elementos en la página de los que depende.

En general, esto significa que si usa código directo para interactuar con el contenido de su página, dicho código debe colocarse en la parte inferior del cuerpo.

Código dentro de funciones y objetos

Un código dentro de funciones u objetos se ejecuta cada vez que se llama a esa función u objeto. Si se llama desde un código que está directamente en el encabezado o el cuerpo de la página, entonces su lugar en el orden de ejecución es efectivamente el punto en el que se llama a la función u objeto desde el código directo.

Código asignado a controladores de eventos y oyentes

Asignar una función a un controlador de eventos u oyente no da como resultado que la función se ejecute en el punto en el que está asignada, siempre que esté realmente asignando la función misma y no corras la función y la asignación del valor devuelto. (Es por eso que generalmente no ve el () al final del nombre de la función cuando se asigna a un evento, ya que la adición de paréntesis ejecuta la función y asigna el valor devuelto en lugar de asignar la función en sí.)

Las funciones que se adjuntan a los controladores y escuchas de eventos se ejecutan cuando se activa el evento al que están vinculados. La mayoría de los eventos son provocados por visitantes que interactúan con su página. Sin embargo, existen algunas excepciones, como el carga evento en la ventana en sí, que se activa cuando la página termina de cargarse.

Funciones adjuntas a eventos en elementos de página