Cambiar el color del fondo dinmicamente

Ejemplo 12. Cambiar el color del fondo.

Seguimos con los ejemplos prcticos en Javascript. En este segundo documento sern claramente
ms complejos pero tambin ms interesantes.
En este ejemplo, lo que haremos es cambiar el color de fondo de la pgina dinmicamente, es
decir, mientras se est viendo la pgina, a travs de unos botones situados en ella.
Al pulsar cada botn se llama a la funcin creada en Javascript
llamada poner_color_fondo(), pasndole como parmetro el nombre de un color.
Poner_color_fondo(color) asigna a la propiedad document.bgColor (que representa el color de
fondo de la pgina) el valor del parmetro color.
Este ejemplo aunque sencillo pone de manifiesto la potencia de Javascript y abre la gran idea de la
personalizacin de las pginas por parte de los usuarios como ellos gusten (claro est, siempre
aadiendo una interfaz sencilla, como muestra la del ejemplo, con botones), ya que Javascript no
solo permite modificar el color de fondo, sino que cualquier elemento que est presente en dichas
pginas.

Emplazar a diferentes pginas segn la resolucin del monitor

Ejemplo 13. Cambiar de pgina segn la resolucin de la pantalla.

A veces, los diseadores de pginas realizan una misma web con diferentes resoluciones, para
que se pueda adaptar a diferentes tamaos de monitores y resoluciones de pantalla y de esta
manera, se consiga un mayor nmero de pblico para la misma, es lo que se conoce como
accesibilidad.
Con Javascript, se puede preguntar que resolucin tenemos actualmente en la pantalla y as
realizar diferentes acciones segn la que tengamos. Las instrucciones en Javascript que indican la
resolucin son las siguientes:
screen.width: para la resolucin del ancho de la pantalla en pxeles.
screen.height: para la resolucin del alto de la pantalla en pxeles.

Arrastrar imgenes por la ventana con el ratn

Ejemplo 14 . Arrastrar una imagen por la pantalla con el ratn.

Vamos ahora con un ejemplo que tiene un cdigo un poco complicado. En determinadas ocasiones
nos podra ser til colocar elementos en la pgina Web que se puedan arrastrar por todo ella.
Como primer uso prctico a esto podra ser el de tener una pgina Web, con varios de estos
elementos (por ejemplo, pequeas notas en forma de recordatorios) para que puedan ser
colocados donde ms nos guste, para as ver otros con ms claridad.
Tambin se podra usar para hacer pequeas interacciones o juegos con el usuario de tal forma,
que coloque una serie de objetos en unas determinadas posiciones.
Esto consigue una mayor interactividad de la pgina con el usuario y tambin su aspecto final es
ms impactante.
Pese a que el cdigo es un poco complejo podrs entenderlo con la explicacin.
En primer lugar, definimos el objeto que vamos a mover. En este caso es un grfico que como se
puede apreciar en el cdigo (el que est al final) se le identifica con el nombre de IMG. Este grfico
se le mete en un bloque DIV identificado con el nombre de OuterDiv.
Para arrastrar esta imagen, deberemos situarnos en ella con el ratn, pulsar el botn izquierdo sin
soltarlo y mover el ratn por la ventana. Cuando queramos dejar de moverla soltaremos el botn
izquierdo del ratn.
Esto se traduce en Javascript en cuatro eventos que se van ejecutando segn vamos haciendo el
proceso anterior:
Existen cuatro eventos asociados al movimiento de un objeto por la ventana.
document.onmousedown: Cuando pulsamos el botn izquierdo del ratn.
document.ondragstart: Cuando se empieza a arrastrar el objeto.
document.onmousemove: Cuando se mueve el ratn por la ventana.
document.onmouseup: Cuando se suelta el botn izquierdo del ratn.
Cuando sucede un evento se ejecuta una funcin que trata cada uno, enfocadas al movimiento de
la imagen. Estos son, doMouseDown(), doDragStart(), DoMouseMove() y DoMouseUp().
En doMouseDown() se comprueba si se ha pulsado el botn izquierdo y si se ha hecho sobre la
imagen.
En doDragStart() se dice que el evento no devuelve nada (nada ms que comentar aqu).
Despus, en DoMouseMove() , se actualiza la posicin de la imagen con la que tuviera en ese
momento el ratn (y tambin con la posicin correspondiente al bloque DIV que contiene a la
imagen) y por ltimo, en document.onmouseup se indica que no existe nada para mover.
Destacamos la instruccin event.Cancelbubble = true que lo hace es indicar al navegador que no
transmita el movimiento a otros elementos de la pgina, solamente a la imagen que estamos
tratando.
Realizar una bsqueda en los buscadores ms importantes
 Ejemplo 15. Realizar una bsqueda con ayuda de Google y Yahoo!
Presentamos un ejemplo que es muy sencillo pero a la par muy prctico. Con este ejemplo
veremos como se usa un formulario de entrada de datos desde Javascript. En l, tendremos una
caja de texto, donde meteremos la cadena a buscar en los buscadores Yahoo! y Google.
El formulario (identificado con el nombre engines) presenta una serie de botones que podemos
chequear o no, que representan a los buscadores yahoo y google, y una caja de texto
(llamado TEXT) en el que introduciremos, el contenido que exploraremos en dichos buscadores.
As, de esta forma cuando pulsemos el botn Buscar, se ejecutar la funcin buscar(engines) que
har lo siguiente:
Recoger el texto presente en la caja de texto TEXT, de la siguiente forma:
TEXT=formname.TEXT.value;

Determinar si se han clickeado sobre los botones Checkbox:

f1=formname.google.checked; // Devuelve true o false
g1=formname.yahoo.checked; //Devuelve true o false

Y si es as se abrir una nueva pgina por cada buscador chequeado aadindole a su motor de
bsqueda el texto a encontrar (Ejemplo de Yahoo!):
g2="http://search.yahoo.com/bin/search?p="+TEXT;
newWindow=window.open(g2,"y2","toolbars=no,scrollbars=yes")

Texto que sigue al cursor en forma de Cola de Cometa

 Ejemplo 16. Crear un efecto de cola de cometa para un texto.
Para finalizar este documento, veremos un efecto espectacular. Es el efecto de un texto que sigue
siempre al cursor del ratn en forma de cola de cometa.
Como habrs visto, el cdigo es muy extenso, pero no es tan complejo como pueda parecer en un
primer momento. Lo explicaremos poco a poco, adems dos partes de l son casi idnticas,
simplemente est diferenciando el cdigo que se necesita para utilizarlo en Netscape y en Internet
Explorer.
En primer lugar, lo que se hace en la barra de estado del navegador, es ir escribiendo un texto en
que cada vez una letra de dicho texto se va poniendo en maysculas. Esto en realidad es un truco
para meter un pequeo retraso en la visualizacin, aparte, de la cola de cometa, ya que si no
hiciramos esto, se vera dicha cola demasiado rpida.
Despus se define el estilo que tendr la cola de cometa en la etiqueta <style>.
A continuacin lo que se hace es definir el texto a mover en la variable message y declarar la
separacin que habr en pxeles por cada letra del texto (en este caso hay -50 pxeles).
Lo que a continuacin se ejecuta, es el ltimo script que aparece en el cdigo, que lo que hace es
definir una seccin por cada letra del texto, que posteriormente se tratarn en Javascript para
concretar la posicin de cada letra.
Despus se ejecuta la funcin makesnake() continuamente, que esperar el cambio de posicin
del cursor del ratn para mover el texto (la funcin handlerMM() actualiza las variables x e y que
es la posicin origen que siempre tendr el texto - a la del cursor).
Para que tenga el efecto de la cola de cometa, lo que se hace es que cada letra del texto que
seguir al cursor se le coloca en una posicin concreta de la pantalla segn la posicin actual del
ratn y adems cada letra tendr en ese momento, la posicin que tuviera la que est justamente
delante suya. Si por ejemplo, tenemos la palabra Si , la letra S , al mover el ratn
continuamente, se situar en la posicin del ratn y la letra i en la posicin que tuviera la letra
S en el momento justamente anterior.
Vemos como ejecuta esto el cdigo (se ver el cdigo especfico para Internet Explorer, el de
Netscape es prcticamente idntico):
1 PARTE
Como se puede apreciar, en el primer for recorrer el mensaje y situar la posicin de cada letra en
la posicin de la letra que est justamente delante de ella.
2 PARTE
Despus hace lo propio con la primera letra del texto, que en este caso tendr como posicin la del
cursor (ms un pequeo aumento step, para que el texto no se junte con el cursor).
3 PARTE
Ya en la tercera parte se aplica cada posicin nueva a cada letra del texto presentado en la pgina
Web (recordamos que esta presente cada letra en una seccin <span> de html)
Javascript es muy potente y lo que se ha visto aqu es solo una pequea parte del mismo.