Visualizar por pantalla un mensaje de bienvenida
Ejemplo 1 . Visualizar por pantalla un mensaje de bienvenida a la página 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 página Web. Cada vez más, las páginas Webs muestran un mensaje de este tipo para dar la bienvenida cuando se entran en ellas.
Como se puede apreciar el código Javascript se coloca (o se embebe) dentro de uno de HTML, encerrándolo entre las etiquetas < script>< /script>.
Abre el bloc de Notas, copia el código anterior y guárdalo como Ejemplo01.html. (Si no te apetece hacer esto puedes abrir el mismo desde el directorio Ejemplos I). Después, ejecútalo pulsando doble clic con el ratón.
Botón para volver hacia atrás
Ejemplo 2. Botón que al ser pulsado vuelve a la página anterior de la que hubiera en ese momento.
Se trata de un botón para volver hacia atrás, a semejanza del que tenemos en la barra de herramientas del navegador. Al pulsar el botón se realiza una instrucción Javascript.
Dicha instrucción Javascript, llamada history.go(-1), se encuentra dentro de un atributo de HTML, onclick, lo cual indica que esa instrucción SOLAMENTE se ejecutará cuando se realice la pulsación del botón, representado por la etiqueta HTML 
. Un poco más técnico, el evento es pulsar el botón (onclick) y la acción (history.go(-1)) es volver a la página anterior en el historial de navegación. Para verlo correctamente, ejecuta primero Ejemplo01.html! (Necesita el Ejemplo02 alguna página para volver para atrás).
. Un poco más técnico, el evento es pulsar el botón (onclick) y la acción (history.go(-1)) es volver a la página anterior en el historial de navegación. Para verlo correctamente, ejecuta primero Ejemplo01.html! (Necesita el Ejemplo02 alguna página para volver para atrás).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 según lo que se haya introducido (muy útil por ejemplo para los accesos de los usuarios a las páginas). En este ejemplo, la variable que definimos, nom nos servirá para guardar lo que introduzcamos por teclado a través de la función prompt de Javascript.
Pedir confirmación para visitar una página
Ejemplo 4. Ejemplo que pide confirmación para visitar una página.
En algunas páginas Webs cuando accedemos a ellas nos piden que confirmemos que somos mayores de edad para que podamos entrar en ellas. Esta confirmación lo podemos hacer con Javascript. La función confirm visualiza una ventana emergente de confirmación (con el texto que le indiquemos) cuyas opciones que nos da son Aceptar o Cancelar dicha confirmación. Devolverá dicha función un “trae” (si pulsamos Aceptar) o un “false” (si pulsamos Cancelar) y en el ejemplo solamente visitaremos la página 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 botón no se abren más.
A continuación mostramos un ejemplo de cómo abrir ventanas emergentes (o también llamadas pop-up) cada cierto tiempo automáticamente. Este ejemplo es muy útil para abrir ventanas de publicidad aparte de la principal.
En el ejemplo se define un intervalo de ejecución en Javascript con la función setInterval que lo que hará es ejecutar la función abrir_ventana() cada 3 segundos (3000 milisegundos). La función abrir_ventana() contiene la función window.open que lo que hará es abrir una nueva página conteniendo la web del Ministerio de Educación. Al pulsar sobre el botón se ejecutará el código Javascript clearTimeout que detendrá el intervalo de ejecución de abrir ventanas continuamente.
Visualizar un reloj digital en la página web
Ejemplo 6. Ejemplo que visualiza un reloj digital.
Este ejemplo es muy útil para visualizar en una página html un reloj dígital que se va actualizando cada 500 milisegundos. Como se puede apreciar, se crea un intervalo de ejecución de 500 milisegundos de la función “Ver_Hora.” Ver_Hora() recoge la hora, la formatea con la representación 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 html, a su vez en el único formulario 
existente y definitivamente en un botón en forma de texto .
existente y definitivamente en un botón en forma de texto .
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 página que lo contuviera sería de la siguiente manera:
| document.forms[0].mireloj.value |
Esto es lo que se denomina anidamiento de objetos (dentro de unos hay otros).
Crear una galería de imágenes
Ejemplo 7. Ejemplo que muestra una galería de imágenes.
Este es un ejemplo práctico de cómo crear una galería de imágenes con Javascript.
Tenemos una etiqueta <img> en html denominada también con el nombre “img” que iremos cambiando, según lo que elijamos dentro del formulario imágenes en las opciones de selección <select> llamados conjuntamente imagen.
Al cambiar (onChange) de selección, se ejecutará la función ver_imagen() que cargará en el objeto llamado img ( document.images.img.src) el contenido del valor (value, en este caso contienen ficheros de imágenes – 1.jpg,2.jpg…) de la opción que en ese momento hayamos seleccionado (document.imagenes.imagen.selectedIndex) del objeto imagen:
| document.imagenes.imagen.options[document.imagenes.imagen.selectedIndex].value |
Deshabilitar el botón derecho del ratón
Ejemplo 8. Ejemplo que deshabilita el botón derecho del ratón.
Al pulsar con el botón derecho del ratón sobre una página Web podríamos seleccionar cualquier gráfico o texto que contuviera este y guardarlo en nuestro ordenador. Es posible que los diseñadores de dichas páginas sean muy reticentes a esto. Deshabilitando el botón derecho se solucionaría, aunque hay que decir que por otros medios (más complejos), se conseguiría igualmente guardar el contenido, aún así esta es una buena y rápida solución para aquellos usuarios menos avanzados.
Hay que tener en cuenta que el script hace diferencia entre los navegadores de Netscape e Internet Explorer ya que estos tratan de forma diferente los eventos de pulsar los botones del ratón.
Básicamente este script, cuando se pulsa un botón del ratón (document.onmousedown o window.onmousedown) lo que hace es ejecutar la función boton_derecho() que a su vez, lo que hace, es comprobar si se ha pulsado el derecho (ejemplo event.button == 2 || event.button == 3) y entonces lo que genera es visualizar una alerta.
Imprimir una página Web
Ejemplo 9. Ejemplo que al pulsar un botón se imprime la página Web.
Este ejemplo es tan sencillo como práctico. Con Javascript también podemos imprimir una página Web. Simplemente ejecutando la función "window.print()" se imprimirá todo el contenido de la página actual.
En este caso, hemos incluido un botón que al pulsarlo (onClick) se realiza la acción de imprimir la página.
que al pulsarlo (onClick) se realiza la acción de imprimir la página.
Este ejemplo es muy útil para incluir en páginas que no incluyen las barras típicas del explorador (por decisión del diseñador) y que por lo tanto en ellas no se puede ejecutar la opción típica de Archivoà Imprimir… propia del Navegador. De esta forma se podría meter un botón que imprimiera el contenido de dicha página tal como muestra el ejemplo.
| ¿Sabias que…? Java y Javascript son dos lenguajes totalmente diferentes, que solo tienen en común la primera parte del nombre. Además de que Java fue creado por Sun Microsystems (Javascript por Netscape) dicho lenguaje es más general, pudiéndose realizar grandes aplicaciones de gestión para empresas. |
Mostrar mensajes en movimiento en la barra de estado del navegador
Ejemplo 10. Ejemplo que muestra un mensaje en movimiento en la barra de estado del navegador.
Cuando se accede a una página Web cualquier método es válido para captar la atención del usuario.
En algunas ocasiones te habrás fijado que emergen mensajes que se van moviendo en la barra de estado del navegador, la que está justamente debajo de la página que se ve. Esto recurso es muy útil para captar rápidamente la atención del usuario y principalmente sirven para mostrar mensajes cortos que se usan para dar alguna información especifica de la página (cual es el tema principal de la página, algún enlace de interés dentro de la página, etc). El código Javascript que se presenta aunque pueda parecer muy complejo en realidad no lo es.
Pasemos a explicarlo.
Cuando se carga la página (onLoad) se ejecuta la función scroll_start() que lo que hace, en primer lugar, es definir el texto a escribir en la barra. Después, realiza un truquillo. Añade al mensaje 100 caracteres en blanco. La razón 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 añadir unos caracteres en blanco, deje la parte izquierda de la barra “libre” para visualizar el texto (si no ves clara la explicación prueba a comentar las líneas de código de la siguiente forma -añadiendo los caracteres // al principio de cualquier linea Javascript el Navegador no ejecutará dicha línea- y entenderás mejor) :
| // for (i=0;i<space;i++) |
| // msg=" "+msg; |
Después se ejecuta continuamente la función scrollmsg(pos), a través de un intervalo de ejecución (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 posición 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 electrónico
Ejemplo 11. Ejemplo que construye un correo electrónico para ser mandado.
Un ejemplo muy práctico. Podemos construir un correo electrónico en Javascript simplemente generando un string con la estructura siguiente:
mailto:correo@destino?subject=Asunto del correo&body=Cuerpo
Y después asignar a la siguiente función de Javascript location.href el string que hubiésemos construido. Al ejecutar esto último, se abrirá nuestro gestor de correo predeterminado con el correo que quisiésemos mandar, ya totalmente completado y listo para ser enviado.
TOMADO DE: http://recursostic.educacion.es/observatorio/web/gl/software/programacion/490-lorena-arranz
TOMADO DE: http://recursostic.educacion.es/observatorio/web/gl/software/programacion/490-lorena-arranz
