CREACIÓN DE PÁGINAS WEB CON KOMPOzER

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 web. 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:

Actividad 8.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.html 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á un cuadro de diálogo parecido a éste:

Ventana emergente

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 o lista de opciones 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="coleccion.html">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 nuestro editor Kompozer 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 con el menú Insertar -> Formulario -> Definir botón, y elegimos el tipo Botón.Ppero 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 Edición avanzada; entonces se abre la ventana de Editor avanzado de propiedades y pulsamos la pestaña Eventos de JavaScript. En la parte inferior derecha elegimos el atributo onclick del menú deplegable y escribimos la palabra busqueda en el campo de texto del valor; automáticamnete se escribirá dentro del cuadro de la pestaña.

Script de búsqueda

Sólo queda un pequeño detalle: nombrar el formulario para que el script funcione adecuadamente. Introducimos el cursor del ratón dentro del rectángulo de línea discontinua que indica el formulario y hacemos doble clic para que aparezca la ventana de Propiedades del formulario. En el campo Nombre del formulario escribimos buscar, tal y como se muestra en esta imagen:

Nombre 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. 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 Edición avanzada y agregamos el atributo HTML name, cuyo valor es dibujo, por ejemplo.

Imagen con rollover

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 abriendo la pestaña Eventos de Javascript y configurando los atributos onmouseout y onmouseover con los valores fuera y encima respectivamente, como muestra la imagen anterior.


Anterior Arriba Siguiente


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