Knowledge Programación Entornos de Programación
Este material didáctico forma parte del Curso online de Introducción a la Programación con JavaScript (UF1305)

Ejecución de un script

Cómo hemos dicho anteriormente, hay dos formas de ejecutar un script:

Directa
El script se encuentra en el cuerpo o en la cabecera de una página HTML de modo que el navegador interprete cada línea.
Respondiendo a un evento
Un evento es la acción que realiza el usuario mientras visita una página. El programa captura el evento realizado por el usuario, hace una tarea y emite una respuesta mediante el uso de manejadores de eventos.

Ejecución al cargar la página

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>

Ejecución después de producirse un evento

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.

onload()
El evento onload() se lanza cuando finaliza la carga de una ventana o de todos los marcos de un frameset. Este atributo puede utilizarse con los elementos body y frameset.
onunload()
El evento onunload() se dispara al eliminar el usuario un documento de una ventana o marco. Este atributo puede utilizarse con los elementos body y frameset.
onclick()
El evento onclick() salta cuando el dispositivo apuntador hace clic sobre un elemento. Este atributo se puede utilizar con casi todos los elementos.
ondblclick()
El evento ondblclick() ocurre cuando se hace doble clic con el ratón sobre un elemento (o doble toque con el dedo en un dispositivo móvil). Este atributo puede utilizarse con la mayoría de los elementos.
onfocus()
El evento onfocus() funciona cuando un elemento tiene el foco, ya sea con el ratón o por navegación con el tabulador. Este atributo puede utilizarse con los siguientes elementos: a, area, label, input, select, textarea y button.
onblur()
El evento onblur() reacciona cuando el elemento pierde el foco, ya sea con el ratón o por navegación con el tabulador. Se utiliza con los mismos elementos que onfocus().
onsubmit()
El evento onsubmit() responde cuando enviamos un formulario. Solo se aplica al elemento form.
onreset()
El evento onreset() produce la reinicialización de un formulario. Al igual que el anterior solo se aplica al elemento form.

Ejecución del procedimiento dentro de la página

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.
 

Ver Actividad Actividad de autoevaluación: Eventos

Tiempo de ejecución

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:

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.

Errores de ejecució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.

Errores de ejecución
 

Este contenido didáctico abierto está extraído del Curso online de Introducción a la Programación con JavaScript (UF1305).

Amplía tus conocimientos con el Curso Online de Introducción a la Programación con JavaScript (UF1305)

Puedes continuar ahora la formación matriculándote en el curso, o si lo prefieres, consultar nuestro catálogo con cerca de 400 actividades formativas acreditadas.

Este sitio web utiliza cookies de terceros con la finalidad de analizar el uso que hace de nuestra web y personalizar el contenido de los anuncios. Si continúa navegando entendemos que acepta su uso. Más información