Guía del usuario Cancelar

Uso de comportamientos de JavaScript (instrucciones generales)

 

 

Use los comportamientos de JavaScript en Adobe Dreamweaver para colocar código JavaScript en los documentos para que los visitantes puedan cambiar una página web o iniciar determinadas tareas.

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.

Nota:

El código del comportamiento es código JavaScript del lado del cliente; es decir, se ejecuta en los navegadores, no en los servidores.

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.

Nota:

Los términos comportamiento y acción son términos de Dreamweaver, no de HTML. En lo que se refiere al navegador, una acción es igual que cualquier otro elemento de código JavaScript.

Introducción al panel Comportamientos

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:

Mostrar eventos establecidos

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.

Mostrar todos los eventos

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

Añadir comportamiento (+)

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.

Quitar evento (–)

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

Botones de flechas arriba y abajo

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.

Eventos

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

Nota:

Los nombres de eventos entre paréntesis solamente están disponibles para vínculos. Al seleccionar uno de estos nombres de eventos se añade automáticamente un vínculo nulo al elemento de la página seleccionado y se adjunta el comportamiento a ese vínculo en lugar de adjuntarse al elemento propiamente dicho. En código HTML, el vínculo nulo se especifica de la siguiente forma: href="javascript:;".

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.

  1. Seleccione un elemento de la página, como una imagen o un vínculo.

    Para adjuntar un comportamiento a la página completa, haga clic en la etiqueta <body> en el selector de etiquetas, situado en la esquina inferior izquierda de la ventana de documento.

  2. Seleccione Ventana > Comportamientos.
  3. Haga clic en el botón más (+) y seleccione una acción en el menú Añadir comportamiento.

    No se pueden seleccionar las acciones que aparecen atenuadas en el menú. Pueden mostrarse atenuadas porque no exista un objeto necesario en el documento actual. Por ejemplo, la acción Controlar Shockwave o SWF aparece atenuada si el documento no contiene ningún archivo Shockwave o SWF.

    Cuando se selecciona una acción, aparece un cuadro de diálogo que muestra parámetros e instrucciones para dicha acción.

  4. Introduzca los parámetros de la acción y haga clic en Aceptar.

    Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores modernos. Algunas acciones no funcionan en los navegadores antiguos, pero no provocan errores.

    Nota:

    Los elementos de destino requieren un ID exclusivo. Por ejemplo, si desea aplicar a una imagen el comportamiento Intercambiar imagen, dicha imagen necesita un ID. Si no especifica un ID para el elemento, Dreamweaver lo especificará de forma automática.

  5. El evento predeterminado que desencadena la acción aparece en la columna Eventos. Si no es éste el evento de desencadenamiento que desea, seleccione otro en el menú emergente Eventos. (Para abrir el menú Eventos, seleccione un evento o una acción en el panel Comportamientos y haga clic en la flecha negra que señala hacia abajo y que aparece entre el nombre del evento y el nombre de la acción).

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.

  1. Seleccione un objeto con un comportamiento adjunto.
  2. Seleccione Ventana > Comportamientos.
  3. Realice los cambios:
    • Para editar los parámetros de una acción, haga doble clic en el nombre o selecciónelo y presione la tecla Intro (Windows) o Retorno (Macintosh); seguidamente, cambie los parámetros en el cuadro de diálogo y haga clic en Aceptar.

    • Para cambiar el orden de las acciones de un evento dado, seleccione una acción y haga clic en la flecha arriba o abajo. También puede seleccionar la acción, cortarla y pegarla en la posición deseada entre las otras acciones.

    • Para eliminar un comportamiento, selecciónelo y haga clic en el botón de signo menos (–) o presione Suprimir.

Actualización de un comportamiento

  1. Seleccione un elemento que tenga el comportamiento adjunto.
  2. Elija Ventana > Comportamientos y haga doble clic en el comportamiento.
  3. Realice los cambios deseados y haga clic en Aceptar en el cuadro de diálogo del comportamiento.

    Se actualizarán todas las apariciones del comportamiento en esa página. Si otras páginas del sitio tienen dicho comportamiento, deberá actualizarlos página por página.

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

  1. Elija Ventana > Comportamientos y seleccione Obtener más comportamientos en el menú Añadir comportamiento.

    Se abrirá su navegador principal y aparecerá el sitio Exchange.

  2. Examine o busque los paquetes.
  3. Descargue e instale el paquete de extensiones que desee.

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

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?