miércoles, 12 de julio de 2017

Comenzar la ejecución de un programa en Javascript al ir a una página

Existen dos posibilidades que permiten comenzar la ejecución de un script al abrir una página.
  • window.onload
  • document.onload

window.onload

Lo adecuado es llamar al archivo de Javascript desde el head, pero esto supone que en ocasiones se pueden llegar a ejecutar las instrucciones del script antes de que se haya terminado de cargar toda la página y si alguna línea del script que se está ejecutando necesita que exista algún elemento del body que aún no se ha cargado puede dar lugar a un error. Esto se podría solucionar llamando al archivo js justo al final del body, con ello nos aseguramos que ya se han cargado todas las estructuras html del body y que no se producirá ese tipo de error. Pero esto último no es una solución adecuada ya que el body se ha de reservar para la estructura html y no para llamar al script, cosa que se ha de hacer desde el head. Esto se soluciona poniendo la llamada al fichero js desde el head y usando window.onload que permite ejecutar la función que le indiquemos justo después de haber cargado en memoria todo el código html del body.

window.onload = nombre_funcion;

Si existen varias funciones que deseamos lanzar lo que procede es pedir a window.onload que ejecute una función principal y ésta se encargará de ir lanzando las demás en el orden adecuado.

 function principal(){  
     funcion1();  
     funcion2();  
     funcion3();  
   }  
 window.onload = principal;  

document.onload

Es similar al anterior. La diferencia estriba en que window.onload se activa cuando se ha cargado completamente el código html y se han llamado a todos los archivos externos, imágenes incluidas, lo cual puede tardar tiempo en algunos casos.

Por el contrario, document.onload se activa cuando se ha cargado el DOM y aún no se han cargado todos los archivos externos, imágenes incluidas. De esta forma se gana tiempo, ya que trabaja sin esperar a que lleguen todas las imágenes y demás archivos externos.

En algunos navegadores actualmente window.onload se dispara en cuanto se carga el DOM al igual que hace document.onload.

usando <body onload="myFunction()">

Puede ver un ejemplo en:

con el evento load

Ponemos la llamada al archivo de scipt en el head y luego en el código JS envolvemos todo el código entre las siguientes líneas.

Con una función de callback.

 window.addEventListener('load', function(){  
  //aquí va el código JS  
 });  

También se puede escribir lo anterior con formato de función de flecha.

 window.addEventListener('load', () => {  
  //aquí va el código JS  
 });  

De esta forma la ejecución del código JS se realizará después de que se hubiera cargado todo el DOM, y por lo tanto podemos hacer la llamada al archivo JS en el head del código HTML.

con jQuery

Es preferible trabajar con la librería jQuery que consigue el mismo objetivo y ellos se encargan de que sea compatible con todos los navegadores. Para ver como funciona consulte la siguiente entrada.

Conseguiremos nuestro objetivo que consiste en poder llamar al script desde el head y que éste se ejecute después de haberse mostrado completamente el documento DOM, para que el código JavaScript pueda interactuar con las etiquetas, los id y las claeses que ya han sido cargadas.

lunes, 10 de julio de 2017

Algoritmo por dicotomía para obtener la raíz cuadrada de un número en Javascript

Vamos a calcular la raíz cuadrada de un número usando un algoritmo por dicotomía.

Se denomina por dicotomía ya que lo que se hace es dividir el intervalo en dos mitades y analizar en cuál de las dos mitades debería estar el valor buscado, y luego volver a dividir esa mitad en dos mitades y así sucesivamente.

Primero lo vamos a ver paso a paso en la hoja de cálculo de Google. Este es el enlace:

Para calcular la raíz cuadrada de un número introducimos éste en la celda de color rosa (B3). Creamos una tabla con 100 iteraciones. Veamos cada columna.

  • inf. Es el valor inferior del intervalo en el que se encuentra la raíz del número buscado. Inicialmente es cero, ya que al raíz de un número positivo siempre tendrá como valor inferior el cero.
  • sup. Es el valor superior del intervalo donde estamos buscando la raíz del número buscado.  Inicialmente usamos como límite superior del ese intervalo el propio valor x. Si x es 2 y estamos buscando calcular la raíz de 2, el límite superior inicialmente será 2.
  • med. Es la media. Es el valor medio entre el límite inferior y el límite superior. med = (inf+sup)/2. Este valor se supone que a medida que aumenten las iteraciones irá tendiendo a la raíz de x.
  • med^2. Es la media al cuadrado. Este valor se supone que a medida que se sucedan las iteraciones irá tendiendo al valor de x.
Si x=2 quiere decir que estamos intentando calcular la raíz cuadrada de 2.

Veamos como se calcula el valor inf y sup de las siguientes iteraciones. Se calcula utilizando condicionales IF.

  • Si med^2 es menor que x entonces inf=med. Vea la fórmula de la celda E5: =if(H4<$B$3;G4;E4)
  •  Si med^2 es mayor que x entonces sup=med. Vea la fórmula de la celda E6: =if(H4>$B$3;G4;F4)

Veamos el resultado si x=40.
Veamos el resultado si x=400.

Vamos a implementar este algoritmo en Javascript.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Algoritmo de cálculo de la Raíz cuadrada en Javascript</title>  
  </head>  
  <body>  
   <script>  
    var x=Math.floor(prompt("Indique el número",40));  
    var inf=0;  
    var sup=x;  
    var media=(inf+sup)/2;  
    var ciclos=0;  
    console.log("x: "+x);  
    while(Math.abs(Math.pow(media,2)-x)>1e-16 && ciclos<1000){  
    console.log("inf: "+inf);  
    console.log("sup: "+sup);  
    console.log("media: "+media);  
    console.log("_____________");  
    if (Math.pow(media,2)<x){  
     inf=media;  
    }else{  
     sup=media;  
    }  
    media=(inf+sup)/2;  
    ciclos++; //ciclos evita que se quede pillado el código por haber pedido una precisión tan fina  
    //se podría haber quitado ciclos si la precisión fuera 1e-14  
    }  
    document.write(media +" valor calculado"+"<br>");  
    document.write(Math.sqrt(x,2)+" raiz cuadrada"+"<br>");  
    document.write(Math.abs(Math.sqrt(x,2)-media)+" Error");  
   </script>  
  </body>  
 </html>  


El enlace para ver el programa es el siguiente. Vea la consola (pulsando F12 y Console, en Chrome) para comprobar cómo se ha ido produciendo la convergencia.
Después de ejecutar el programa puede ver el código pulsando Control+u.