Cómo hemos dicho anteriormente, hay dos formas de ejecutar un script:
La ejecución al cargar la página se puede realizar de varias formas. Una sería a través del evento onload() y otra sería por la ejecución inmediata de alguna de las funciones que hay creadas en nuestro programa.
Función de onload
El atributo de body onload() ejecutará todas las funciones que le tengamos asignadas separadas por punto y coma (;) cuando todos los elementos de la página estén cargados.Uso de onload
<body onload = "escribe();">
<!-- Cambia el contenido de h1, de "Texto que cambia" a "Mi página de prueba"-->
<h1 id="cabecera">Texto que cambia</h1>
<!-- Cambia el contenido de p, de "Fecha al cargar la página" a la fecha actual del objeto Date()-->
<p id="prueba">Fecha al cargar la página</p>
<script>
// esta función se ejecutará con el evento onload() de body
function escribe(){
document.getElementById('cabecera').innerHTML = "Mi página de prueba";
document.getElementById('prueba').innerHTML = Date();
}
</script>
</body>
Otra forma sería llamando a las funciones u objetos inmediatamente.
Llamada a una función
<body>
<!-- Cambia el contenido de h1, de "Texto que cambia" a "Mi página de prueba"-->
<h1 id="cabecera">Texto que cambia</h1>
<!-- Cambia el contenido de p, de "Fecha al cargar la página" a la fecha actual del objeto Date()-->
<p id="prueba">Fecha al cargar la página</p>
<script>
function escribe(){
document.getElementById('cabecera').innerHTML = "Mi página de prueba";
document.getElementById('prueba').innerHTML = Date();
}
// ejecución de la función cuando se carga la página
escribe();
</script>
</body>
Se puede asociar una acción con cada evento que ocurre cuando un usuario interactúa con un elemento. Los ?eventos intrínsecos? toman como valor un script. El script se ejecuta cada vez que el evento ocurre para ese elemento. Con esto podemos tener control sobre todo lo que está ocurriendo en nuestra página, produciendo las acciones necesarias tras la interacción con el usuario.
Aquí mostramos algunos de los eventos intrínsecos.
En las páginas Web incrustamos los scripts en el código HTML. Cuando dicho código es interpretado se crean diferentes objetos. El primer objeto que se crea es window, objeto de clase Window que representa la ventana del navegador. JavaScript utiliza objetos y cuando decimos document.write() estamos trabajando con el objeto document. Todos los objetos que se crean estarán dentro del objeto window. La ventana window contiene el objeto document.
Objetos del documento
Al crearse el elemento body se produce la creación del objeto document. Este objeto representa la página Web que se carga en el navegador. Al documento se accede con window.document. Dentro del objeto document se crean todos los elementos que tengamos definidos en la página. Algunos objetos dependerán directamente de document y otros dependerán de otros, como por ejemplo, de un formulario, que a su vez depende también de document.A estos elementos podemos incorporarles funcionalidad a través de JavaScript. De otra forma, nuestras páginas permanecerían estáticas. La funcionalidad viene proporcionada por los distintos eventos que podemos crear. Estos eventos lanzan las funciones, cambian las variables, controlan los datos y utilizan todos los objetos de JavaScript.
Denominamos tiempo de ejecución (runtime) al intervalo de tiempo en el que un script se ejecuta en un navegador. Este tiempo se inicia con la carga del programa, con lo que el navegador comienza a ejecutar sus instrucciones. El intervalo finaliza en el momento en que el script finaliza su carga, aunque puede volver a ser ejecutado o cargado por medio de alguna acción del usuario relacionada con algún evento.
Evaluación de un script
Evaluación de un script en JavaScript dentro del Timeline de Chrome:
La carga puede ser normal, cuando el script concluye sus instrucciones satisfactoriamente, o puede tener una terminación anormal, cuando el script produce algún error y el navegador fuerza su finalización.
Los errores de ejecución de JavaScript se producen cuando un script intenta realizar una acción que el navegador no puede ejecutar. Estos errores pueden aparecer al evaluar expresiones o variables.
Ocurrencia del error
Por ejemplo, se producirá un error de ejecución cuando llamamos a una función no definida. JavaScript no indica estos errores hasta que no se realiza la llamada a la función.La forma en que se presentan los errores en los navegadores puede variar. En antiguas versiones se mostraba una pequeña ventana y un botón de aceptar. En la actualidad, por lo general los errores permanecen ocultos al usuario para que no le resulte incómodo. Es por ello que normalmente no se dará cuenta de los errores.
Subsanación del error
Sin embargo, a los programadores les resultará más difícil encontrar dichos errores si se ocultan. Para ello, necesita saber la manera en que pueden ser mostrados con el fin de subsanarlos.Depurar el código JavaScript puede ser una experiencia alarmante, especialmente en aplicaciones muy complejas. Los principales navegadores Web incluyen algunas capacidades de depuración de JavaScript. Entre los programas que debiéramos considerar usar está Firebug, un complemento para Firefox. Firebug está disponible en la dirección https://getfirebug.com/.
Herramienta Firebug
Firebug es una herramienta muy importante para el desarrollo Web, sobre todo con JavaScript y AJAX. Este software permite inspeccionar todos los elementos de una página Web y ver los resultados de las llamadas AJAX y CSS, todo en tiempo real, lo que hace la depuración mucho más fácil.Al depurar JavaScript, el uso de la función alert() es bastante útil pues con ella se puede mostrar los valores contenidos en variables y lo que el programa está haciendo actualmente. Por supuesto, debido a que alert() hace que se abra un cuadro de diálogo, si se utiliza dentro de un bucle y luego erróneamente hacemos que ese bucle se ejecute interminablemente sin salir, es posible que tengamos que cerrar el navegador, tal vez usando el Administrador de tareas de Windows o terminando el proceso del navegador mediante el sistema operativo. Como alternativa, podemos hacer uso del método console.log(), que mostrará la información en la consola del navegador, en la sección de depuración.
Esta píldora formativa está extraída del Curso online de Introducción a la programación con JavaScript (UF1305).
No pierdas tu oportunidad y ¡continúa aprendiendo!
Política de privacidad
ADR Formación utiliza cookies propias y de terceros para fines analíticos anónimos, guardar las preferencias que selecciones y para el funcionamiento general de la página.
Puedes aceptar todas las cookies pulsando el botón "Aceptar" o configurarlas o rechazar su uso pulsando el botón "Configurar".
Puedes obtener más información y volver a configurar tus preferencias en cualquier momento en la Política de cookies
