Páginas web con FrontPage Express

8. JavaScript

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

8.1 Funcionamiento básico de JavaScript

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:

Actividad8.2 Actividad nº8: Ejemplos de scripts

8.2.1 Ventana de alerta

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:

Alert

8.2.2 Menú desplegable

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:

Menú desplegable

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:

Menú desplegable

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

Atributos extendidos

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:

Propiedades del formulario


8.2.3 El rollover

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:

Hola HolaHola

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.

Propiedades de imagen

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.

Atributos extendidos


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3