Ejemplos Practicos De Javascript

Ejemplos prácticos de Javascript

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).

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  .

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

...