Javascript

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.

Compártelo: technorati Javascript no intrusivo, un ejemplo mágico. delicious Javascript no intrusivo, un ejemplo mágico. digg Javascript no intrusivo, un ejemplo mágico. facebook Javascript no intrusivo, un ejemplo mágico. yahoo Javascript no intrusivo, un ejemplo mágico. google Javascript no intrusivo, un ejemplo mágico. linkedin Javascript no intrusivo, un ejemplo mágico. twitter Javascript no intrusivo, un ejemplo mágico. es meneame Javascript no intrusivo, un ejemplo mágico. es fresqui Javascript no intrusivo, un ejemplo mágico. es blogmemes Javascript no intrusivo, un ejemplo mágico.

Enviar a un amigo Enviar a un amigo

Artículos relacionados:

  1. Un emulador de ZX Spectrum en Javascript
  2. Cómo mejorar los formularios HTML con Xhtml, Css y Javascript
  3. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
  4. Ajax Lightbox: Una ventana emergente 2.0 en su página web

Si te ha gustado este artículo y te ha sido de utilidad, Haz una Donación y colobora en el mantenimiento de esta blog.

Cada artículo está escrito con esfuerzo y dedicación, ayúdame a seguir ayudándote.

Comentarios

7 comentarios para “Javascript no intrusivo, un ejemplo mágico.”

  1. Como siempre, acudo a tu blog en busca de ayuda. He creado un blog, http://latiendadevidas.blogspot.com, y ahora quiero ponerle un logo que se vea en la barra de direcciones, como el tuyo de hg. ¿Cómo se hace? Hay alguna aplicación?¿Cómo se añade?

    Posted by Comprar vinos | Octubre 3, 2008, 02:15 | Citar
  2. 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!

    Posted by Ignacio G. | Octubre 3, 2008, 08:32 | Citar
  3. 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

    Posted by Comprar vinos | Octubre 3, 2008, 20:29 | Citar
  4. [...] Incluye javascript no intrusivo. [...]

    Posted by ¿Tengo una Web moderna? Calcule la edad de su web | Hello Google | Octubre 9, 2008, 18:20 | Citar
  5. La verdad que este efeto esta muy muy bueno !! quede maravillado !!
    EXCELENTE :-D

    Posted by walter caballero | Enero 13, 2009, 19:17 | Citar
  6. muy buen efecto solo se puede con imagenes’ o tambien se podria con texto por que me interesaria agregarlo a mi web http://directoriocolombia.co.cc/

    Para hacerla mas llamativa

    Posted by super este script | Enero 26, 2009, 06:32 | Citar
  7. 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.

    Posted by Ignacio G. | Enero 26, 2009, 10:05 | Citar

Escribir un comentario

Citar el texto seleccionado

Suscríbase a HelloGoogle

Formación Recomendada

Categorías

Mis últimos Tweets...