Por ejemplo, digamos que queremos ejecutar la función showAlert() después de que el cuerpo de la página web esté completamente cargado. Una forma de hacerlo es añadir el atributo onload al elemento <body> de nuestra página web, así:
Prueba a añadir lo anterior a tu página web, luego carga la página y comprueba si funciona. Si no lo hace, probablemente tengas un error. Asegúrate de que has escrito todo exactamente como aparece, incluyendo las mayúsculas y la puntuación. Los lenguajes de programación pueden ser muy exigentes con los errores aparentemente pequeños. (La próxima lección hablará más sobre la depuración). Una vez que lo tengas funcionando, pasa a la siguiente sección.
Hasta ahora en esta lección, hemos llamado a la función showAlert() cuando se carga el cuerpo de la página web. Sin embargo, podríamos activarla utilizando otros eventos. Por ejemplo, podríamos mostrar la alerta sólo si el usuario hace clic en un botón. Pruebe esto:
Este nuevo código añade un botón a su página web. El botón incluye el atributo onclick, que hace que se llame a showAlert() cuando un usuario hace clic en el botón. El evento onclick también funciona para los usuarios de teclado. Si un usuario navega hasta el botón usando la tecla de tabulación, y luego presiona enter, eso también activará la alerta.
En resumen, sugiero usar jQuery. La sintaxis es tan fácil de usar como puede serlo y tiene una llamada de vuelta bien estructurada para que usted la use. También es relativamente rápido. El enfoque vainilla puede ser más rápido por unos pocos milisegundos imperceptibles, pero la sintaxis es confusa. Sólo utilizaría esto en un entorno en el que no tuviera acceso a jQuery.
Aquí está el código que utilicé para probar – es bastante rudimentario, pero los tiempos fueron muy consistentes a través de múltiples intentos, así que diría que es preciso alrededor de +- 5ms en cada caso. Las pruebas se ejecutaron en Chrome desde mi propio servidor doméstico:
Entonces recuerde que no puede “depurar” en Chrome localmente, porque XMLHttpRequest no puede cargar – Esto NO significa que no funciona, sólo significa que usted necesita para probar su código en el mismo dominio aka. su servidor
Para la programación hacen lo mismo que los kits de muebles prefabricados para la construcción de casas: es mucho más fácil coger paneles ya cortados y atornillarlos para hacer una estantería que elaborar el diseño uno mismo, ir a buscar la madera correcta, cortar todos los paneles con el tamaño y la forma adecuados, encontrar los tornillos del tamaño correcto y luego unirlos para hacer una estantería.
Cada pestaña del navegador tiene su propio cubo para ejecutar el código (estos cubos se llaman “entornos de ejecución” en términos técnicos) – esto significa que en la mayoría de los casos el código en cada pestaña se ejecuta completamente por separado, y el código en una pestaña no puede afectar directamente al código en otra pestaña – o en otro sitio web.
Aquí estamos seleccionando un párrafo de texto (línea 1), y luego adjuntando un oyente de eventos a él (línea 3) para que cuando se haga clic en el párrafo, se ejecute el bloque de código updateName() (líneas 5-8). El bloque de código updateName() (este tipo de bloques de código reutilizables se denominan “funciones”) pide al usuario un nuevo nombre, y luego inserta ese nombre en el párrafo para actualizar la pantalla.
Al encontrar este elemento en una página, los navegadores cargarán el archivo myscript.js y lo ejecutarán. Cualquier contenido dentro del propio elemento script será omitido cuando se proporcione un atributo src. El siguiente ejemplo cargará el archivo myscript.js y ejecutará el código en él, pero no ejecutará la alerta dentro del elemento script en absoluto.
Sin embargo, los beneficios de desarrollo de esto son disminuidos por el efecto que esto tiene en el rendimiento de su documento. Esto difiere ligeramente de un navegador a otro, pero el peor de los casos (que lamentablemente sigue siendo el segundo navegador más utilizado) hace lo siguiente:
Una forma de evitarlo es utilizar un script de backend para crear un único archivo a partir de todos los archivos que utilices. De este modo, se obtiene la ventaja de mantener un mantenimiento sencillo y, al mismo tiempo, se reducen los retrasos en la visualización de la página web. Hay varios scripts como este en la web – uno de ellos está escrito en PHP y disponible en Ed Eliot.
Los inconvenientes son que sus scripts retrasan la visualización del documento y que el script no tiene acceso al HTML del documento. Por lo tanto, es necesario retrasar la ejecución de cualquier script que cambie el HTML del documento hasta que el documento haya terminado de cargarse. Esto se puede hacer con un manejador onload o con una de las varias soluciones DOMready o contentAvailable que hay en la web – ninguna de las cuales es a prueba de balas y la mayoría de las cuales dependen de hacks específicos del navegador.