Ejecución de scripts

Ejecutar programas

Habitualmente cuando quieres ejecutar un programa basta con buscar el archivo que lo contiene y hacer un doble click de ratón o pulsar la tecla enter. O, en modo consola, se escribe un nombre de archivo ejecutable y pulsas enter.

¿Pero que pasa con los programas escritos con JavaScript?. Pues que no son programas de escritorio, su entorno es la página web.

Los guiones o scripts forman parte de la págna web, se encuentran en ella:

Escritos con el código HTML:


<script>

    window.alert("hola")

</script>

importados desde archivos externos:


<script src="archivo.js">

</script>

Pueden colocarse en cualquier parte de la página web, pero es aconsejable situarlo en la sección head o al final (justo delante de </body>).

Como es lógico para integrar programas en tus páginas es bueno conocer como se contruyen las páginas web, te puede servir este tutorial sobre HTML y CSS

Cuando el navegador va leyendo la página y encuentra instrucciones de programa las ejecuta. O bien, ejecuta los scripts cuando se produce un evento..

Otro palabro, los eventos. ¿Y qué son los eventos?

son señales que lanza el navegador cuando se produce algún cambio en la página web que está mostrando.

Algunos eventos que pueden producirse en la página web:

se termina de cargar una página
se hace click con el ratón
se hace un scroll
acaba una transición CSS
se termina de cargar una imagen

Lo puedes ver en algo tan común en una página como los enlaces: si pulsas en un link se produce un evento, de forma predeterminada el navegador responde llevándote al lugar señalado por el enlace.

Esos eventos son los que se aprovechan para que se ejecuten las instrucciones que nosotros escribimos en los scripts.

A cada evento se le puede asociar una función para que haga algo predeterminado por nosotros.

Por ejemplo pasa el ratón por encima de este párrafo a ver que ocurre.

Al pasar el ratón por encima se ha producido un evento y el script asociado a él provoca que se cambien los colores.

Javascript representa los eventos como objetos, o sea, poseen métodos y propiedades. Gracias a eso cuando se produce un evento podemos saber quien lo dispara, en que posición de la pantalla se ha disparado y otras propiedades dependientes de cada caso concreto.

Eventos

Cuando el navegador muestra una página web no está en reposo, si no que responde a cada modificación que se produce en el entorno mediante los eventos

Por ejemplo: si mueves el ratón se produce un evento, si haces scroll se produce un evento, si pulsas con el ratón se produce un evento.

Ejecución secuencial

Cuando se va a ejecutar un script el navegador empieza a leerlo desde la primera linea de código hasta la última: lee, traduce y ejecuta. Es un orden de ejecución lineal.

Esta linealidad se puede alterar, cambiar el orden de ejecución o incluso evitar que se ejecuten algunas instrucciones.

Por ejemplo, quiero que mi página muestre la fecha en la pantalla. Pero si es Domingo no debe mostrar la fecha, sino que debe mostrar solo que es festivo. Esto quiere decir que el programa no debe seguir un flujo lineal. Unas veces mostrará la fecha y otras no la muestra. La ejecución del programa cambia según una condición.

Esto se consigue mediante una instrucción condicional para controlar el flujo del programa. Todos los lenguajes de programación incorporan al menos una instrucción condicional para control del flujo.

En pseudo lenguaje este ejemplo sería algo así:

Obtener el día de la semana

si dia no es domingo

escribir fecha

sino

escribir "es festivo"

¿Ves la lógica del script? Simplemente se trata de comprobar el día de la semana (la condición) y según el resultado de la comparación se hace una cosa u otra.

Lo tienes en el lateral por si quieres probarlo en el editor o en tu página. No te preocupes si no entiendes el código. Ahora mismo eso no es importante.

A veces tenemos que repetir una acción una número determinado de veces, también se rompe el flujo lineal de ejecución. Se trata de instrucciones de bucles

Por ejemplo: quieres que tu programa recorra todas las imágenes de tu página y vaya cambiando su contenido. No vas a escribir el mismo código una y otra vez, sería poco prácitco y nada eficaz..

El funcionamiento de los bucles es muy simple:

Inicio del bucle
Si se cumple una condición ejecutar un código
Si no se cumple seguir por el paso 5
Volver al pun to 2
seguir ejecución del programa

Cualquier lenguaje de programación proporciona al menos una instrucción para ejecutar bucles.

En el lateral te dejo un ejemplo para calcular una potencia, verás que se comprueba una condición y mientras (while) sea cierta se repite el cuerpo del bucle. Cuando no es cierta se acaba la repetición.

Te repito, no importa si no entiendes el código, debes entender el concepto de bucle: repetición si se da una condición determinada.

Ejemplos

Una ejecución condiconal del código.

function ponFecha() {

var fecha = new Date();

var diaSem = d.getDay();

if (diaSem==0)
document.write( "Hoy es Festivo") else

document.write( "Hoy es " + fecha.toDateString());

}

Un bucle para calcular 2 elevado a 4

var i=0;

var res=1;

var n=2;

while (i<4){

res=n*res;

i= i+1;

}

document.write(res)

Sincrono, asíncrono

En los ejemplos de ejecución del código las instrucciones que forman el script se ejecutan de manera lineal, una tras otra. Cuando se termina de ejecutar una instrucción el navegador pasa a la siguiente.

Es decir el navegador espera a que se termine cada instrucción para continuar.

Esta forma de ejecutar un programa se denomina síncrona.

A veces esto no interesa. Puede ocurrir que una instrucción tarde tiempo y paralize la ejecución del programa. Para evitar esta situación Javascript puede ejecutar tareas de manera asíncrona.

Esto es un poco complicadillo. En la página web hay un formulario que el usuario debe rellenar, los datos se envian a un programa para verificar datos. Si las datos son correctos se muestra un mensaje y sino lo son se muestra una advertencia.

Si el script se queda esperando, el resto de la página deja de responder hasta que no se resuelve el formulario. Esto no es deseable.

La ejecución asíncrona permite que el programa siga funcionando y cuando se resuelva el formulario se retoma el programa en el punto de comprobación y se actúa en consecuencia: muestra de error, muestra de gracias.

Un simil cotidiano que te puede ayudar a comrpender la diferencia entre ejecución sincrona y asíncrona.

Has llamado a un amigo para quedar a tomar unas cervezas, pero tu amigo te dice que te llamará mas tarde para darte una respuesta. El modo asíncrono significa que tu sigues haciendo tus tareas y cuando recibes la llamada, respondes. El modo síncrono sería que te quedas esperando junto al teléfono hasta que tu amigo te llame.

La ejecuación asíncrona se usa en los banners de publicidad. Las páginas se cargan e interaccionan con el usuario mientras la carga de los banners publicitarios siguen su curso.

En resumen

En la ejecución síncrona cada sentencia debe ejecutarse cuando acabe la anterior.

Si lees un archivo tienes que esperar a que termine la lectura para seguir, aunque lo que siga no dependa del archivo.

En la ejecución asíncrona un programa no tiene que esperar necesariamente a que termine una operación para continuar ejecutándose.

Puedes enviar una orden apra leer un archivo, eguir haciendo otras operaciones y cuando termine de leer el archivo hacer con él lo que sea necesario.

En una página web si la carga de una imagen fuera síncrona la carga se detiene hasta finalizar

Pero si la carga de una imagen fuera asíncrona la pagina no espera a terminar la carga de la imagen, seguirá cargándose y cuando termine de llegar la imagen la pondrá en su lugar.