Los objetivos de la octava lección son:
8.1 Conocer el funcionamiento básico de JavaScript
8.2 Actividad nº 8: Ejemplos de scripts:
8.2.1 Ventana de
alerta en JavaScript
8.2.2 Menú desplegable
8.2.3 El rollover
JavaScript es el hermano menor del lenguaje Java.
Se utiliza mucho en la creación de páginas web para
conseguir que éstas sean más
dinámicas. JavaScript está basado en
scripts que se introducen en las etiquetas de una
página web para producir los comportamientos que desea su
creador. No hay que saber programar con este lenguaje para poder
utilizar de forma gratuita los muchos scripts que se
encuentran en páginas de Internet. Sólo hay que
saber dónde ponerlos dentro del código fuente del
documento. Las posibilidades que tiene el lenguaje JavaScript son
amplísimas y se utilizan mucho en la Red.
A veces estos scripts se encuentran en un archivo externo con extensión JS (de JavaScript), y entonces hay que escribir una llamada en la cabecera del documento donde queremos que funcione:
<SCRIPT SRC="buscadores"></SCRIPT>
Pero en esta lección vamos a comentar varios
scripts de JavaScript que se encuentran incrustados en el
mismo documento. El primero de ellos se utiliza mucho en
páginas web y consiste en abrir una ventana de un
tamaño y características concretas al pulsar un
botón. Parte del código tiene que estar en la
cabecera del documento, delimitado por las etiquetas
<head> de cierre y de apertura:
<SCRIPT LANGUAGE="JavaScript">
<!--
function abre_ventana() {
open("ejemplos/index2.htm", "Ventana", "width=500,height=400,scrollbars=yes,toolbar=no");
}
//-->
</SCRIPT>
Con la primera expresión indicamos que el lenguaje de scripts utilizado es JavaScript. Después se introduce una función que llamamos abre_ventana y que consiste en abrir (open) una ventana de un tamaño determinado (500 píxeles de ancho por 400 de alto) que, además, tendrá disponibles las barras de desplazamiento (scrollbars=yes). Esa función tendrá efecto cuando el usuario pulse el botón que se ha introducido en otra parte del documento. Dentro de la etiqueta del botón tiene que haber, por tanto, una llamada a esa función, lo que se consigue de esta manera:
<input type="button" name="ventana" value="Página
del Monstruo" onClick="abre_ventana()">
Al pulsar el botón (evento onClick), llamamos a la función abre_ventana definida en la cabecera del documento. Veamos el botón:
Vamos a realizar ahora una sencilla actividad que nos ilustra las
posibilidades de JavaScript en la creación de
páginas web. Se trata de introducir un script en
nuestro documento para que aparezca una ventanita dando las
gracias al usuario cuando pulse el botón Enviar de
la encuesta. El script lo incluimos dentro de la cabecera
(<head>) del archivo monstruo.htm para que el
navegador lo lea nada más cargar el documento:
<script language="JavaScript">
<!--
function gracias(){
alert('Gracias por enviarme tus comentarios');
}
//-->
</script>
Después, tenemos que introducir la llamada a la función "gracias" desde el formulario, es decir, cuando el usuario pulsa el botón Enviar se origina el evento onSubmit, que hay que incluir dentro de la etiqueta del formulario (<form>) y que consiste en que aparecerá una ventana de aviso (alert) con una frase de agradecimiento:
<form action="mailto:avaler3@fresno.pntic.mec.es" method="POST"
enctype="TEXT/PLAIN" name="Formulario" OnSubmit="gracias()">
Cuando el usuario rellene el formulario y pulse el botón Enviar, surgirá la siguiente ventana:
Un script muy utilizado en Internet es el menú
desplegable, que puede contener opciones tales como las
direcciones de las secciones más importantes de una
página web concreta o las direcciones de otras
páginas de Internet. Se utiliza generalmente para ahorrar
espacio dentro de un documento y ofrecer al usuario una forma
rápida de llegar a algunos contenidos de un sitio. Un
ejemplo podría ser el siguiente:
Vamos a crear un menú desplegable que contenga la dirección de nuestro archivo de fotos y las tres direcciones de las páginas que hemos considerado como enlaces de interés. El siguiente código, que corresponde al menú desplegable, lo podemos incluir en cualquier parte de nuestro documento, es decir entre las etiquetas <body> de apertura y cierre.
<form name="buscar">
<select name="lista" size="1">
<option value="colec2.htm">Mi colección de fotos</option>
<option value="http://alirburia.8m.com">Halloween.com</option>
<option value="http://www.halloween.com">Alirburia</option>
<option value="http://www.museoceramadrid.com">Museo
de cera de Madrid</option>
</select>
<input type="button" value="Vamos" onClick="busqueda()">
</form>
Dentro del código del botón hemos escrito, como se ve más arriba, la llamada a esta función utilizando el evento onClick (onClick="busqueda()"), que ocurre cuando el usuario hace un clic con el ratón sobre un objeto.
Y en la cabecera de la página (<head>) tenemos que colocar el siguiente script para que funcione este menú desplegable al pulsar el botón Vamos:
<script language="JavaScript">
<!--
function busqueda() {
location=document.buscar.lista.options[document.buscar.lista.selectedIndex].value;
}
//-->
</script>
Este menú también lo podemos crear con FrontPage Express tal y como lo hicimos en la lección de los formularios. Esta vez hay que escribir la dirección de Internet en el campo donde se tiene que especificar el valor:
El botón lo crearemos como hicimos en la lección de hipervínculos, pero ahora habrá que introducirle el código de llamada a la función que está en la cabecera. Para ello hay que pulsar el botón cuya etiqueta es Extendido...; entonces se abre la ventana de Atributos extendidos y pulsamos el botón Agregar... para introducir en la ventana que aparece el nombre del atributo (onClick) y el valor que tiene (busqueda()).
Sólo queda un pequeño detalle: nombrar el formulario para que el script funcione adecuadamente. Introducimos el cursor del ratón dentro del triángulo de línea discontinua que indica el formulario, pulsamos el botón derecho del ratón y elegimos las Propiedades del formulario. En el campo Nombre del formulario escribimos lo siguiente: "buscar", tal y como se muestra en esta imagen:
Otro script que se utiliza constantemente en las páginas
web es el llamado rollover, que consiste en
sustituir una imagen por otra cuando el usuario coloca el puntero
del ratón encima de la primera imagen que aparece en el
documento, y se suele emplear como hipervínculo. El
código en sí es muy sencillo. En la cabecera del
documento colocamos las dos funciones que tenemos que
utilizar:
<script language="JavaScript">
<!--
function encima() {
document.dibujo.src="imagenes/hola2.gif"
}
function fuera() {
document.dibujo.src="imagenes/hola.gif"
}
//-->
</script>
La primera función sirve para cuando el puntero del ratón se encuentra encima de la imagen (en nuestro caso la función encima, que después incluiremos en el evento onMouseOver), que hace que se vea la segunda imagen, y otra para cuando el ratón está fuera de la imagen (fuera, incluida en el evento OnMouseOut), que hace que se vea la primera imagen. En este caso se trata de un botón de color amarillo y de borde y texto rojos (primera imagen) cuyo color de fondo cambiará al verde cuando el usuario ponga el ratón encima:
![]() |
![]() ![]() |
Además, este botón servirá de hipervínculo: cuando el usuario haga clic encima de él, será conducido a otro documento; en nuestro caso, a la página del Monstruo. Para ello habrá que colocar la imagen en cualquier parte de la página y hacer un doble clic sobre ella para que se abra la ventana de Propiedades de imagen. A continuación escribiremos la ruta del archivo que queremos que se abra al pulsar la imagen, y eso lo haremos en el campo de texto llamado Ubicación. También tendremos que dar un nombre a la imagen (no al archivo, que ya lo tiene) para que el script la identifique, y para ello pulsamos el botón Extendido y agregamos name (tiene que estar en inglés) como nombre del atributo y dibujo, por ejemplo, como su valor. Allí lo escribiremos todo sin las comillas.
Sólo queda por escribir las llamadas a las dos funciones desde el código del hipervínculo de la imagen:
<a href="index.htm" onMouseOver="encima()" onMouseOut=
"fuera()">
<img src="imagenes/hola.gif" name="dibujo" border=0 width="89" height="34"></a>
Esto lo podremos hacer directamente sobre el código fuente o haciendo click sobre la imagen y abriendo la ventana de Modificar hipervínculos. Una vez allí pulsamos el botón Extendido... y agregamos los nombres de atributos y sus valores.