Ejemplos prcticos de Javascript (I)

SOFTWARE - Programacin
divendres, 13 de juliol de 2007 11:01

Tweet There are no translations available. Aprende fcilmente a travs de ejemplos este lenguaje script que se utiliza para incluir contenido dinmico a las pginas web.

Ejemplos prcticos de Javascript (I)

1. Introduccin
Los lenguajes Script sirven principalmente para aadir contenido dinmico a las pginas Web. El contenido dinmico es, bsicamente, aquel contenido de una pgina Web (grficos, textos y dems) que puede cambiar en el tiempo, segn las iteraciones que realiza el usuario a lo largo de su ejecucin. En una pgina Web HTML que no contiene cdigo Script el contenido no puede cambiar a lo largo del que el contenido que contiene se le llama esttico . Javascript es un lenguaje de programacin Script, creado por la empresa Netscape, y cuya contenido dinmico a las pginas web. tiempo, es por eso

principal funcin es incluir

La mejor forma de aprender un lenguaje de estas caractersticas es a travs de ejemplos prcticos. Y esto es justamente lo que haremos a lo largo de este documento. A lo largo de este artculo desarrollaremos Javascript en diversos ejemplos prcticos que mostrarn distintas funcionabilidades del mismo. Estos ejemplos sern muy tiles para incluirlos en pginas Webs, ya que realizan acciones que nicamente seran imposibles de crear. Se irn explicando uno por uno que es lo que hacen exactamente. Para una mayor diferenciados. comprensin de los ejemplos se identificarn las partes tanto de HTML como de con HTML

Javascript con colores

Tambin puedes probar los ejemplos, simplemente abriendo la carpeta Ejemplos de este mismo directorio y ejecutar uno por uno para comprobar sus efectos.

NOTA IMPORTANTE para usuarios de Windows: Si cuando ejecutas navegador Internet Explorer el siguiente mensaje:

cualquier ejemplo te sale en la parte de arriba del

No te preocupes, no hay riesgo. Hay que decir que con Javascript, desgraciadamente, se pueden generar, como en muchos otros lenguajes, pequeos programas que vulneran algn agujero de seguridad del sistema operativo. En cualquier caso, los ejemplos que veremos aqu no tienen nada de peligrosos. Cuando visites pginas Web que no te resulten de confianza el navegador te avisar con la alerta anterior. En ese caso deja las cosas como estn; el propio navegador te proteger de posibles cdigos no deseables. Para este pequeo tutorial y al ser los cdigos que veremos totalmente inofensivos, cuando te salga est alerta (si te sale), pulsa con el ratn en el mensaje y a continuacin pulsa la opcin del men Permitir contenido bloqueado como se muestra en la imagen siguiente.

Sabias que ? Los autores inicialmente tuvieron en mente el nombre (un tanto ridculo) de Mocha y ms tarde LiveScript para ser posteriormente rebautizado como JavaScript, en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.

2. Ejemplos
Visualizar por pantalla un mensaje de bienvenida

Ejemplo 1 . Visualizar

por pantalla un mensaje de bienvenida a la pgina Web.

En nuestro primer ejemplo, simplemente, crearemos un Javascript que lo que har es visualizar un mensaje de bienvenida cuando el usuario entre a la pgina Web. Cada vez ms, las pginas Webs muestran un mensaje de este tipo para dar la bienvenida cuando se entran en ellas. Como se puede apreciar el cdigo Javascript se coloca (o se embebe) dentro de uno de HTML, encerrndolo etiquetas < script>< /script>. entre las

Abre el bloc de Notas, copia el cdigo anterior y gurdalo como Ejemplo01.html. (Si no te apetece hacer esto puedes abrir el mismo desde el directorio Ejemplos I). Despus, ejectalo pulsando doble clic con el ratn.

Botn para volver hacia atrs

Ejemplo 2. Botn que al ser pulsado vuelve a la pgina

anterior de la que hubiera en ese momento. herramientas del navegador. Al

Se trata de un botn para volver hacia atrs, a semejanza del que tenemos en la barra de pulsar el botn se realiza una instruccin Javascript.

Dicha instruccin Javascript, llamada history.go(-1), se encuentra dentro de un atributo de HTML, onclick, lo cual indica que esa instruccin SOLAMENTE se ejecutar cuando se realice la pulsacin del botn, representado por la etiqueta HTML . Un poco ms tcnico, el evento es pulsar el botn (onclick) y la accin (history.go(-1)) es volver a la pgina anterior en el historial de navegacin. Para verlo correctamente, ejecuta primero Ejemplo01.html! (Necesita el Ejemplo02 alguna pgina para volver para atrs).

Recoger

un dato por teclado y visualizarlo

Ejemplo 3. Visualiza

por pantalla el nombre introducido por teclado

En muchas ocasiones ser de gran utilidad recoger un dato por teclado y guardarlo para posteriormente tomar decisiones segn lo que se haya introducido (muy til por ejemplo para los accesos de los usuarios a las pginas). En este ejemplo, la variable que definimos, nom nos servir para guardar lo que introduzcamos por teclado a travs de la funcin prompt de Javascript.

Pedir

confirmacin para visitar una pgina

Ejemplo 4. Ejemplo que

pide confirmacin para visitar una pgina.

En algunas pginas Webs cuando accedemos a ellas nos piden que confirmemos que somos mayores de edad para que podamos entrar en ellas. Esta confirmacin lo podemos hacer con Javascript. La funcin confirm visualiza una ventana emergente de confirmacin (con el texto que le indiquemos) cuyas opciones que nos da son Aceptar o Cancelar dicha confirmacin. Devolver dicha funcin un trae (si pulsamos Aceptar) o un false (si pulsamos Cancelar) y en el ejemplo solamente visitaremos la pgina oficial de la saga tan famosa de Star Wars cuando al pulsar sobre el enlace hayamos pulsado Aceptar.

Abrir

una ventana pop-up cada cierto tiempo

Ejemplo 5. Ejemplo que

abre una ventana emergente cada 3 segundos. Pulsando el botn no se abren ms.

A continuacin mostramos un ejemplo de cmo abrir ventanas emergentes (o tambin llamadas pop-up) cada cierto tiempo automticamente. Este ejemplo es muy til para abrir ventanas de publicidad aparte de la principal. En el ejemplo se define un intervalo de ejecucin en Javascript con la funcin setInterval que lo que har es ejecutar la funcin abrir_ventana() cada 3 segundos (3000 milisegundos). La funcin abrir_ventana() contiene la funcin window.open que lo que har es abrir una nueva pgina conteniendo la web del Ministerio de Educacin. Al pulsar sobre el botn se ejecutar el cdigo Javascript clearTimeout que detendr el intervalo de ejecucin de abrir ventanas

continuamente.

Visualizar

un reloj digital en la pgina web

Ejemplo 6. Ejemplo que Este ejemplo es muy til para

visualiza un reloj digital.

visualizar en una pgina html un reloj dgital que se va actualizando cada

500 milisegundos. Como se puede apreciar, se crea un intervalo de ejecucin de 500 milisegundos de la funcin Ver_Hora. Ver_Hora() recoge la hora, la formatea con la representacin hh:mm:ss (hora, minutos, segundos) y la visualiza dentro del objeto del html, identificado con el nombre de mireloj . Dicho objeto, se encuentra dentro del documento de texto . html, a su vez en el nicoformulario existente y definitivamente en un botn en forma de

Es por esto que al referenciarlo para escribir en l la hora Javascript lo haga de la siguiente forma: document.forms[0].mireloj.value Si hubiera otro formulario en la pgina que lo contuviera sera de la document.forms[0].mireloj.value Esto es lo que se denomina siguiente manera:

anidamiento de objetos (dentro de unos hay otros).

Crear una galera de imgenes

Ejemplo 7. Ejemplo que Este es un

muestra una galera de imgenes.

ejemplo prctico de cmo crear una galera de imgenes con Javascript.

Tenemos una etiqueta <img> en html denominada tambin con el nombre img que iremos cambiando, segn lo que elijamos dentro del formulario imgenes en las opciones de seleccin <select> llamados conjuntamente imagen.

Al cambiar (onChange) de seleccin, se ejecutar la funcin ver_imagen() que cargar en el objeto llamado img (document.images.img.src) el contenido del valor (value, en este caso contienen ficheros de imgenes 1.jpg,2.jpg ) de la opcin que en ese momento hayamos seleccionado (document.imagenes.imagen.selectedIndex) del objeto imagen: document.imagenes.imagen.options[document.imagenes.imagen.selectedIndex].value

Deshabilitar

el botn derecho del ratn

Ejemplo 8. Ejemplo que

deshabilita el botn derecho del ratn.

Al pulsar con el botn derecho del ratn sobre una pgina Web podramos seleccionar cualquier grfico o texto que contuviera este y guardarlo en nuestro ordenador. Es posible que los diseadores de dichas pginas sean muy reticentes a esto. Deshabilitando el botn derecho se solucionara, aunque hay que decir que por otros medios (ms complejos), se conseguira igualmente guardar el contenido, an as esta es una buena y rpida solucin para aquellos usuarios menos avanzados.

Hay que tener en cuenta que el script hace diferencia entre los navegadores de Netscape estos tratan de forma diferente los eventos de pulsar los botones del ratn.

e Internet Explorer ya que

Bsicamente este script, cuando se pulsa un botn del ratn (document.onmousedown o window.onmousedown) lo que hace es ejecutar la funcin boton_derecho() que a su vez, lo que hace, es comprobar si se ha pulsado el derecho (ejemploevent.button == 2 || event.button == 3) y entonces lo que genera es visualizar una alerta.

Imprimir

una pgina Web

Ejemplo 9. Ejemplo que al pulsar un botn se imprime la pgina Web. Este ejemplo es tan sencillo como prctico. Con Javascript tambin podemos imprimir una ejecutando la funcin "window.print()" se imprimir todo el contenido de la pgina actual. En este caso, hemos incluido un botn que al pulsarlo (onClick) se realiza pgina Web. Simplemente

la accin de imprimir la pgina.

Este ejemplo es muy til para incluir en pginas que no incluyen las barras tpicas del explorador (por decisin del diseador) y que por lo tanto en ellas no se puede ejecutar la opcin tpica de Archivo Imprimirpropia del Navegador. De esta forma se podra meter un botn que imprimiera el contenido de dicha pgina tal como muestra el ejemplo.

Sabias que ? Java y Javascript son dos lenguajes totalmente diferentes, que solo tienen en comn la primera parte del nombre. Adems de que Java fue creado por Sun Microsystems (Javascript por Netscape) dicho lenguaje es ms general, pudindose realizar grandes aplicaciones de gestin para empresas.

Mostrar

mensajes en movimiento en la barra de estado del navegador

Ejemplo 10. Ejemplo que Cuando

muestra un mensaje en movimiento en la barra de estado del navegador. del usuario.

se accede a una pgina Web cualquier mtodo es vlido para captar la atencin

En algunas ocasiones te habrs fijado que emergen mensajes que se van moviendo en la barra de estado del navegador, la que est justamente debajo de la pgina que se ve. Esto recurso es muy til para captar rpidamente la atencin del usuario y principalmente sirven para mostrar mensajes cortos que se usan para dar alguna informacin especifica de

la pgina (cual es el tema principal de la pgina, algn enlace de inters dentro de la pgina, etc). El cdigo Javascript que se presenta aunque pueda parecer muy complejo en realidad no lo es. Pasemos a explicarlo. Cuando se carga la pgina (onLoad) se ejecuta la funcin scroll_start() que lo que hace, en primer lugar, es definir el texto a escribir en la barra. Despus, realiza un truquillo. Aade al mensaje 100 caracteres en blanco. La razn a esto es que si no lo hacemos, el mensaje se ajustar totalmente a la izquierda de la barra y no se podr ver con claridad. De esta forma, le estamos diciendo que al aadir unos caracteres en blanco, deje la parte izquierda de la barra libre para visualizar el texto (si no ves clara la explicacin prueba a comentar las lneas de cdigo de la siguiente forma aadiendo los caracteres // al principio de cualquier linea Javascript el Navegador no ejecutar dicha lnea- y entenders mejor) : // for (i=0;i<space;i++) // msg=" "+msg; Despus se ejecuta continuamente la funcin scrollmsg(pos), a travs de un intervalo de ejecucin (setTimeOut es muy parecida a setInterval con la diferencia que se ejecuta solo una vez, es por lo que como se ve hay que volver a ejecutarla cada vez), que lo que har es visualizar en la barra de estado el substring que se obtenga de la posicin pos de la cadena a visualizar hasta el final de la misma. As de esta forma se consigue el efecto scroll deseado.

Crear un correo electrnico

Ejemplo 11. Ejemplo que construye un correo electrnico para ser mandado. Un ejemplo muy prctico. Podemos construir un correo electrnico en Javascript simplemente estructura siguiente: mailto:correo@destino?subject=Asunto del correo&body=Cuerpo generando un string con la

Y despus asignar a la siguiente funcin de Javascript location.href el string que hubisemos construido. Al ejecutar esto ltimo, se abrir nuestro gestor de correo predeterminado con el correo que quisisemos mandar, ya totalmente completado y listo para ser enviado.