Uso de comportamientos de JavaScript (instrucciones generales)

Los comportamientos de Adobe Dreamweaver colocan código JavaScript en los documentos para que los visitantes puedan cambiar una página web de diversas formas o iniciar determinadas tareas. Un comportamiento es una combinación de un evento y una acción que desencadena ese evento. En el panel Comportamientos, un comportamiento se añade a una página especificando en primer lugar una acción y, a continuación, el evento que desencadena esa acción.

Los eventos son mensajes generados por los navegadores que indican que un visitante de la página ha hecho algo. Por ejemplo, cuando un visitante mueve el puntero sobre un vínculo, el navegador genera un evento onMouseOver para ese vínculo. A continuación, el navegador comprueba si hay algún código JavaScript (especificado en la página mostrada) al que deba llamar como respuesta. Los distintos elementos de la página tienen definidos diferentes eventos. Por ejemplo, en la mayoría de los navegadores onMouseOver y onClick son eventos asociados a vínculos, mientras que onLoad es un evento asociado a imágenes y a la sección body del documento.

Una acción es código JavaScript ya definido que realiza una tarea, como abrir una ventana del navegador, mostrar u ocultar un elemento PA (con posición absoluta), reproducir un sonido o detener una película Adobe Shockwave. Las acciones que incorpora Dreamweaver proporcionan la máxima compatibilidad con los distintos navegadores.

Después de adjuntar un comportamiento a un elemento de página, el comportamiento llama a la acción (código JavaScript) asociada a un evento cuando dicho evento tiene lugar para ese elemento. (Los eventos que puede utilizar para desencadenar una acción determinada varían en función del navegador de que se trate). Por ejemplo, si adjunta la acción Mensaje emergente a un vínculo y especifica que el evento onMouseOver desencadena esa acción, cada vez que alguien sitúe el puntero del ratón sobre ese vínculo, aparecerá el mensaje.

Un mismo evento puede desencadenar varias acciones distintas, y se puede especificar el orden en que esas acciones tienen lugar.

Dreamweaver incluye unas 24 acciones. Encontrará otras acciones en el sitio web de Exchange en www.adobe.com/go/dreamweaver_exchange_es, así como en los sitios web de otros desarrolladores. Si dispone de los conocimientos necesarios sobre JavaScript, puede escribir sus propias acciones.

El panel Comportamientos (Ventana > Comportamientos) sirve para adjuntar comportamientos a los elementos de una página (más concretamente, a las etiquetas) y para modificar parámetros de otros comportamientos adjuntados anteriormente.

Los comportamientos que ya se han adjuntado al elemento de página actualmente seleccionado aparecen en la lista de comportamientos (el área principal del panel), en orden alfabético por eventos. Si hay varias acciones para un mismo evento, las acciones se ejecutarán en el orden en que aparecen en la lista. Si en la lista de comportamientos no aparece ningún comportamiento, significa que no hay ningún comportamiento adjunto al elemento actualmente seleccionado.

Las opciones del panel Comportamientos son las siguientes:

Muestra solo los eventos que se han adjuntado al documento actual. Los eventos están organizados en las categorías del lado del cliente y del lado del servidor. Los eventos de cada categoría se enumeran en una lista desplegable. La vista predeterminada es Mostrar eventos establecidos.

Muestra una lista alfabética de todos los eventos de una categoría determinada.

Muestra un menú de acciones que se pueden adjuntar al elemento seleccionado actualmente. Cuando se selecciona una acción de esta lista, aparece un cuadro de diálogo en el que se pueden especificar los parámetros correspondientes a la acción. Si todas las acciones aparecen atenuadas, significa que el elemento seleccionado no puede generar ningún evento.

Elimina la acción y el evento seleccionados de la lista de comportamientos.

Desplazan la acción seleccionada hacia arriba o hacia abajo en la lista de comportamientos. El orden de las acciones se puede cambiar solamente para un evento concreto; por ejemplo, se puede cambiar el orden en que se producen varias acciones para el evento onLoad, pero todas las acciones onLoad permanecen juntas en la lista de comportamientos. Los botones de flechas están desactivados para las acciones que no se pueden desplazar arriba o abajo de la lista.

Muestra un menú emergente, que solo es visible cuando se selecciona un evento, con todos los eventos que pueden desencadenar la acción (este menú aparece al hacer clic en el botón de flecha situado junto al nombre del evento seleccionado). Aparecerán distintos eventos dependiendo del objeto seleccionado. Si no aparecen los eventos esperados, asegúrese de que esté seleccionado la etiqueta o el elemento de página correcto. (Para seleccionar una etiqueta determinada, use el selector de etiquetas, que se encuentra en la esquina inferior izquierda de la ventana de documento).

Eventos

Cada navegador proporciona un conjunto de eventos que pueden asociarse a las acciones que figuran en el menú Acciones (+) del panel Comportamientos. Cuando un visitante de la página Web interactúa con la página (por ejemplo, haciendo clic en una imagen) el navegador genera sucesos que pueden utilizarse para llamar a funciones JavaScript que, a su vez, realizan una acción. Dreamweaver proporciona numerosas acciones comunes que pueden desencadenarse utilizando estos eventos.

Para conocer los nombres y las descripciones de los eventos que proporciona cada navegador, consulte el Centro de soporte de Dreamweaver en www.adobe.com/go/dreamweaver_support_es.

En el menú Eventos aparecen distintos eventos en función del objeto seleccionado. Para conocer cuáles son los eventos que admite un navegador determinado para un elemento de página concreto, inserte el elemento de página en su documento, adjúntele un comportamiento y luego mire el menú Eventos del panel Comportamientos. (De manera predeterminada, los eventos se toman de la lista de eventos de HTML 4.01 y son compatibles con la mayoría de los navegadores modernos). Los eventos pueden aparecer atenuados si aún no existen en la página los objetos pertinentes o si el objeto seleccionado no puede recibir eventos. Si no aparecen los eventos esperados, asegúrese de que está seleccionado el objeto correcto.

Al adjuntar un comportamiento a una imagen, algunos eventos (como onMouseOver) aparecen entre paréntesis. Estos eventos solamente están disponibles para vínculos. Cuando se elige uno de ellos, Dreamweaver ajusta una etiqueta <a> alrededor de la imagen para definir un vínculo nulo. El vínculo nulo es representado por javascript:; en el cuadro Vínculos del inspector de propiedades. Puede cambiar el valor del vínculo si desea convertirlo en un vínculo real con otra página, pero si borra el vínculo JavaScript sin sustituirlo por otro vínculo, borrará el comportamiento.

Para ver las etiquetas que puede usar con un evento determinado en un navegador concreto, busque el evento en uno de los archivos de la carpeta Dreamweaver/Configuration/Behaviors/Events.

Aplicación de un comportamiento

Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta <body>) o a vínculos, imágenes, elementos de formulario o cualquier otro elemento HTML.

El navegador de destino que elija determina los eventos compatibles con un elemento determinado.

Se puede especificar más de una acción para cada evento. Las acciones tienen lugar en el orden en el que se enumeran en la columna Acciones del panel Comportamientos, pero puede cambiar dicho orden.

Cambio o eliminación de un comportamiento

Después de adjuntar un comportamiento, se puede cambiar el evento que desencadena la acción, añadir o eliminar acciones y cambiar los parámetros de las acciones.

Actualización de un comportamiento

Descarga e instalación de comportamientos de terceros

Muchas extensiones están disponibles en Exchange para el sitio web de Dreamweaver (www.adobe.com/go/dreamweaver_exchange_es).

Para obtener más información, consulte Adición y administración de extensiones en Dreamweaver.