Cambiar el color del fondo dinámicamente

Transcripción

1 En este artículo encontrarás más ejemplos para que aprendas fácilmente este lenguaje script. Ejemplos prácticos de Javascript (II) Cambiar el color del fondo dinámicamente Ejemplo 12. Cambiar el color del fondo. 1 / 9

2 Seguimos con los ejemplos prácticos en Javascript. En este segundo documento serán claramente más complejos pero también más interesantes. En este ejemplo, lo que haremos es cambiar el color de fondo de la página dinámicamente, es decir, mientras se está viendo la página, a través de unos botones situados en ella. Al pulsar cada botón se llama a la función creada en Javascript llamada poner_color_fondo(), pasándole como parámetro el nombre de un color. Poner_color_fondo(color) asigna a la propiedad document.bgcolor (que representa el color de fondo de la página) el valor del parámetro color. Este ejemplo aunque sencillo pone de manifiesto la potencia de Javascript y abre la gran idea de la personalización de las páginas por parte de los usuarios como ellos gusten (claro está, siempre añadiendo 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 páginas. Emplazar a diferentes páginas según la resolución del monitor 2 / 9

3 Ejemplo A que manera, accesibilidad. Con realizar indican screen.width: screen.height: veces, se Javascript, pueda la diferentes se los 13. resolución consiga diseñadores Cambiar adaptar para acciones puede la la un son resolución a mayor diferentes las página de preguntar según siguientes: páginas número según del la tamaños ancho alto que realizan de la resolución tengamos. público de de de la una la monitores pantalla para misma tenemos Las de la la misma, instrucciones web y pantalla. píxeles. resoluciones actualmente con diferentes lo que de en Javascript se pantalla la resoluciones, conoce pantalla y que como de y esta así para Arrastrar imágenes por la ventana con el ratón 3 / 9

4 Ejemplo Vamos ocasiones todo de ser También forma, Pese En gráfico OuterDiv. Para sin botón Esto el ahora 14 Existen proceso estos ella. elementos Como nos. Arrastrar con podría primer un (por ejemplo ser una uso ejemplo, útil imagen práctico colocar que tiene por a elementos esto la un pantalla podría código notas en ser un con la poco página forma el ratón. más puede primer soltarlo colocados consigue arrastrar a izquierdo que impactante. cuatro traduce se apreciar lugar, anterior: y coloque podría mete mover código esta donde una eventos del definimos mayor imagen, usar Javascript ratón. una el más es el ratón asociados código serie para bloque interactividad nos el poco deberemos por objeto hacer en guste, (el la DIV objetos cuatro complejo al ventana. pequeñas identificado movimiento para está situarnos eventos vamos así podrás la Cuando al unas página ver final) interacciones a con de que determinadas mover. en otros entenderlo se un queramos ella con se le objeto nombre con van con En identifica el complicado. tener usuario más o ejecutando este Web el por con juegos dejar recordatorios) ratón, posiciones. claridad. una caso la que con y ventana. explicación. de también página con pulsar se el En moverla según nombre el un puedan determinadas usuario el Web, gráfico para vamos botón soltaremos aspecto arrastrar con que que IMG. izquierdo haciendo varios tal puedan como final Este por - document.onmousedown: document.ondragstart: Cuando Cuando se empieza pulsamos a el arrastrar botón izquierdo el objeto. del ratón. el 4 / 9

5 Cuando de la En Después, momento DIV que - la imagen. document.onmousemove: document.onmouseup: sucede Estos un evento son, domousedown(), Cuando ejecuta Cuando una suelta función dodragstart(), mueve el botón que el ratón trata izquierdo DoMouseMove() por cada la uno, ventana. document.onmouseup domousedown() comprueba ha pulsado el botón izquierdo del ratón. Destacamos no estamos imagen. indica transmita dodragstart() contiene tratando. que el ratón el la DoMouseMove() a no movimiento la instrucción existe imagen) (y también dice nada que y event.cancelbubble a por para con otros el, último, evento la mover. actualiza elementos posición en no devuelve la correspondiente posición = la true página, nada que de (nada lo la solamente hace imagen al bloque más es con indicar que enfocadas a y la si la comentar imagen se y que al DoMouseUp(). ha navegador tuviera hecho al que movimiento aquí). sobre que ese Realizar una búsqueda en los buscadores más importantes 5 / 9

6 6 / 9

7 Ejemplo Presentamos veremos una El chequear yahooy google, ) Así, Recogerá caja de como 15. texto, Realizar un se ejemplo usa donde una meteremos formulario búsqueda es muy de con la sencillo entrada cadena ayuda pero a de buscar datos a Google la par en desde y muy los Yahoo! TEXT=formname.TEXT.value; y en formulario una hará el de que caja esta lo o el introduciremos, no, siguiente: de forma texto (identificado texto que presente cuando representan (llamado con pulsemos el contenido el la nombre a caja los el de buscadores botón que engines) texto exploraremos Buscar, TEXT, presenta de la ejecutará siguiente una dichos buscadores Javascript. práctico. serie la forma: buscadores. función de botones Con En Yahoo! buscar(engines) este él, que tendremos ejemplo y Google. Determinará han clickeado sobre los botones Checkbox: podemos f1=formname.google.checked; g1=formname.yahoo.checked; Y de g2=" newwindow=window.open(g2,"y2","toolbars=no,scrollbars=yes") si búsqueda es así el abrirá texto una a encontrar nueva página //Devuelve (Ejemplo por cada de true Yahoo!): buscador o false chequeado añadiéndole a su motor Texto que sigue al cursor en forma de Cola de Cometa 7 / 9

8 8 / 9

9 Ejemplo Para sigue Como simplemente Internet En un que A separación Lo Después posición handlermm() actualiza cursor). finalizar siempre habrás 16. momento. Crear este visto, al cursor documento, un Lo código efecto del explicaremos ratón de es veremos cola muy forma extenso, poco un cometa a efecto poco, cola pero para espectacular. además no un cometa. texto. Para seguirá del justamente ratón la continuación definir truco que primer concretar no cada a Explorer. para del continuación se las una hiciéramos lugar, que define cursor variables vez está meter sección habrá lo una posición que diferenciando del un la esto, letra estilo por x se función ratón se pequeño e hace píxeles ejecuta, y cada de se para cada dicho vería que makesnake() letra tendrá el retraso por definir mover código letra. dicha texto del cada la barra la último texto, en el cola que letra texto de va continuamente, visualización, demasiado script estado se que poniendo del a origen (la cometa necesita mover posteriormente texto función que del que aparece (en navegador, rápida. tan para siempre dos aparte, mayúsculas. que este complejo variable etiqueta utilizarlo partes Es esperará en caso se el de el tendrá tratarán efecto código, hay de message como <style>. ir cola Esto él escribiendo el -50 el Netscape son de cambio pueda de texto en que píxeles). un casi cometa, y Javascript realidad declarar texto - parecer a idénticas, que y un en que Vemos Netscape letra ratón que continuamente, S como al y tenga es cursor además delante prácticamente ejecuta momento efecto suya. cada esto se coloca situará de letra Si justamente idéntico): por la código tendrá cola ejemplo, una la (se en posición cometa, anterior. verá ese tenemos momento, el concreta del lo código que ratón la palabra se específico de y hace posición letra pantalla Si, i para letra según cada Internet tuviera la S, posición letra la la posición Explorer, al del que mover que texto está actual tuviera el del texto que ya hace es de laen 1ª Como letra 2ª Después del 3ª Ya página Javascript PARTE en cursor en la se Web la tercera hace puede (más posición es (recordamos muy lo un apreciar, parte propio potente pequeño de se la con letra aplica que en y lo la aumento el que esta que primera cada está presente posición step, ha for letra justamente visto recorrerá para del cada nueva aquí texto, que letra delante es a que mensaje solo cada texto de una letra no este ella. sección y pequeña situará del caso junte texto <span> tendrá la con parte presentado posición el como del cursor). html) mismo. de posición en cada la la 9 / 9