Javascript no intrusivo, un ejemplo mágico.

Javascript no intrusivo, un ejemplo mágico.

Navegando por Internet he encontrado un curioso ejemplo de javascript no intrusivo que por su sencillez y espectacularidad me gustaría compartir con ustedes. Creo que antes de comenzar con ninguna explicación lo mejor será que lo prueben:

  • Para ello vaya a su navegador favorito (google) y accedan a la sección de búsqueda de imágenes.
  • Realicen la búsqueda que prefieran, por ejemplo «hellogoogle» y pulse en buscar para ver todos los resultados.
  • Una vez llegado a este punto copie la siguiente linea de código y péguela en su navegador (Como si se tratara de la dirección de una web):


    javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

  • Pulse enter…¿Sorprendido?

Aunque a pesar de su sencillez es un efecto muy espectacular, no se trata de ningún truco de prestidigitación. La explicación hay que buscarla en el javascript no intrusivo, si analizamos el código para ver cómo se consigue este efecto puede sacar algunas conclusiones interesantes:

  • En primer lugar hay que tener presente que el código javascript se ejecuta después haber cargado una página web en el navegador. En nuestro caso era la página de resultados de una búsqueda de imágenes.
  • Cuando un navegador web carga una página crea una estructura de objetos en memoria denominada DOM (Document Object Model). Esta modelo de objetos puede ser consultado e incluso modificado a través de un lenguaje de scripting como javascript.
  • Por ejemplo en el array document.images se almacena una referencia a cada imagen del documento:
    DI=document.images //Array con las imagenes del DOM

  • Podemos determinar fácilmente la longitud de este Array con el atributo length para poder recorrerlo con un bucle for:
    DIL=DI.length
    for(i=0; i-DIL; i++)
    {
    ...
    }
  • Los atributos de cada una de las imágenes de la página puede ser modificado con javascript accediendo al DOM:
    DIS=DI[ i ].style; // Obtenemos una referencia al atributo style
  • Así podemos modificar el atributo position que por defecto es block a absolute . Un elemento con posicionamiento absolute puede ser posicionado en cualquier coordinada de la página a través de los atributos top y left:

    DIS.position='absolute'; //Modificamos el posicionamiento a absolute
    DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; //Actualizamos el atributo left
    DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++} /Actualizamos el atributo top
  • Por último se crea de un temporizador con la función setInterval que ejecuta cada 5 milisegundos la función A que es la que realiza el movimiento de las imágenes modificando sus atributos top y left:
    setInterval('A()',5); void(0);
  • nota: Aunque no tiene relación directa con el javascript no intrusivo la función que realiza el movimiento de las imágenes es una función helicoidal. Variando los parámetros de la función podemos conseguir que las imágenes describan otros parábolas:

    javascript:R=0; x1=.01; y1=.005; x2=.025; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300;y5=200;DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

La utilidad del javascript no intrusivo no se limitan a este tipo de ejemplos curiosos, si no que es una herramienta de gran importancia a la hora de realizar webs accedibles que no dependan de que el navegador del visitante soporte o no javascript. Esto lo veremos sin duda en próximos artículos.

Fuente de la noticia original: This is freaking insane.

Nota: Este artículo ha sido indexado por Google en 4 minutos, nunca dejarás de sorprenderme baby.

8 thoughts on “Javascript no intrusivo, un ejemplo mágico.”

  1. Hola.

    En el caso de un blog alojado bajo blogspot no estoy seguro que puedas conseguirlo al no tener un acceso completo al servidor. En cualquier caso te comento cómo hacerlo porque es bastante sencillo, sigue estos pasos:

    1. Crea tu icono con cualquier utilidad tipo http://www.genfavicon.com/es/

    Encontrarás muchas herramnientas de este tipo si le preguntas a Google: http://www.google.es/search?hl=es&q=favicon+online&btnG=Buscar+con+Google&meta=

    2. Una vez que hayas generado la imagen favicon.ico subela a tu servidor y alójalo en alguna carpeta.

    3. Incluye en tu página la siguiente meta-información:

    <link rel="shortcut icon" href="(url donde hayas alojado tu favicon.ico)" />

    Coméntame si pudiste oonseguirlo. Suerte!

  2. Bueno, de momento he creado el icono y lo he alojado en imageshack, he creado la meta-información y la he incluido. Ahora creo que debo localizar la meta-informacion predefinida para cambiarla, pero ahora no hay tiempo. Seguiré informando. Gracias

  3. Hola, puedes aplicarlo a cualquier elemento de una página. Lo único que necesitas en inlcuir en el array «DI» una referencia a aquellos elementos que quieras desplazar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *