Diseñar su página web usando JavaScript requiere atención al orden en que aparece su código y si está encapsulando código en funciones u objetos, todo lo cual afecta el orden en que el código carreras.
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 hace ninguna diferencia si JavaScript es dentro de la página web en sí mismo 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: cualquier código colocado directamente en la página que necesita interactuar con elementos dentro de la página debe aparecer después Los elementos de 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 cuerpo de la página, entonces su lugar en el el orden de ejecución es efectivamente el punto en el que se llama a la función u objeto desde el directo código.
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 desde la adición de los paréntesis ejecutan la función y asignan el valor devuelto en lugar de asignar la función sí mismo.)
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 propia ventana, que se activa cuando la página termina de cargarse.
Funciones adjuntas a eventos en elementos de página
Todas las funciones adjuntas a eventos en elementos dentro de la página se ejecutarán de acuerdo con las acciones de cada visitante individual; este código se ejecuta solo cuando se produce un evento particular para activarlo. Por esta razón, no importa si el código nunca se ejecuta para un visitante dado, ya que ese visitante obviamente no ha realizado la interacción que lo requiere.
Todo esto, por supuesto, supone que su visitante ha accedido a su página con un navegador que tiene JavaScript habilitado
Scripts de usuario visitante personalizados
Algunos usuarios han instalado scripts especiales que pueden interactuar con su página web. Estos scripts se ejecutan después de todo su código directo, pero antes de cualquier código adjunto al controlador de eventos de carga.
Como su página no sabe nada acerca de estos scripts de usuario, no tiene forma de saber qué podrían hacer estos scripts externos: podrían anular cualquiera o todo el código que ha adjuntado a los diversos eventos a los que ha asignado Procesando. Si este código anula los controladores u oyentes de eventos, la respuesta a los desencadenantes de eventos ejecutará el código definido por el usuario en lugar de, o además de, su código.
El punto clave aquí es que no puede asumir que el código diseñado para ejecutarse después de que la página se haya cargado se ejecutará de la manera en que lo diseñó. Además, tenga en cuenta que algunos navegadores tienen opciones que permiten deshabilitar algunos controladores de eventos dentro de navegador, en cuyo caso un activador de evento relevante no iniciará el controlador / escucha de eventos correspondiente en su código.