Use comportamentos JavaScript no Adobe Dreamweaver para colocar código JavaScript em documentos, de modo que os visitantes possam alterar uma página da Web ou iniciar determinadas tarefas.

Os comportamentos do Adobe Dreamweaver colocam o código JavaScript nos documentos de modo que os visitantes possam alterar uma página da Web de várias maneiras ou iniciar algumas tarefas. Um comportamento é uma combinação de um evento e uma ação acionada por esse evento. No painel Comportamentos, adicione um comportamento a uma página especificando uma ação e, em seguida, especificando o evento que aciona essa ação.

Observação:

O código Comportamento é um código JavaScript do cliente, isto é, um código executado nos navegadores, não nos servidores.

Eventos são mensagens geradas com eficiência pelos navegadores que indicam que um visitante da página realizou alguma ação. Por exemplo, quando um visitante move o ponteiro sobre um link, o navegador gera um evento onMouseOver para esse link; em seguida, o navegador verifica se é necessário chamar algum código JavaScript (especificado na página que está sendo visualizada) em resposta. Eventos diferentes são definidos para diferentes elementos de página; por exemplo, na maioria dos navegadores, os eventos onMouseOver e onClick são associados a links, enquanto onLoad é um evento associado a imagens e à seção body do documento.

Uma ação é um código JavaScript gravado anteriormente para executar uma tarefa, como abrir a janela de um navegador, mostrar ou ocultar um elemento da API, reproduzir um som ou parar um filme do Adobe Shockwave. As ações disponíveis no Dreamweaver são compatíveis com vários navegadores.

Depois de ser anexado a um elemento da página, o comportamento chama a ação (código JavaScript) associada a um evento sempre que esse evento ocorre para o elemento em questão. (Os eventos que podem ser usados para acionar uma determinada ação variam de acordo com o navegador.) Por exemplo, se você anexar a ação Mensagem pop-up a um link e especificar que essa ação será acionada pelo evento onMouseOver, sua mensagem aparecerá sempre que algum usuário colocar um ponteiro nesse link.

Um único evento pode acionar diversas ações diferentes e você pode especificar a ordem de ocorrência dessas ações.

O Dreamweaver fornece aproximadamente 24 ações; ações adicionais podem ser encontradas no site do Exchange em www.adobe.com/go/dreamweaver_exchange_br bem como em sites de desenvolvedores de terceiros. Você pode gravar suas próprias ações se tiver experiência em JavaScript.

Observação:

Os termos comportamento e ação são termos do Dreamweaver, não termos HTML. Do ponto de vista do navegador, uma ação é como qualquer outra parte do código JavaScript.

Visão geral do painel Comportamentos

Você pode usar o painel Comportamentos (Janela > Comportamentos) para anexar comportamentos aos elementos da página (mais especificamente às tags) e para modificar parâmetros de comportamentos anexados anteriormente.

Os comportamentos que já foram anexados ao elemento da página selecionado atualmente aparecem na lista de comportamentos (área principal do painel), relacionados em ordem alfabética por evento. Se diversas ações estiverem listadas para o mesmo evento, elas serão executadas na ordem em que aparecem na lista. Se nenhum comportamento aparecer na lista, isso indica que nenhum comportamento foi anexado ao elemento selecionado atualmente.

O painel Comportamentos tem as seguintes opções:

Mostrar eventos definidos

Exibe somente os eventos que foram anexados ao documento atual. Os eventos são organizados em categorias do cliente e do servidor. Os eventos de cada categoria estão em uma lista que pode ser expandida. Mostrar eventos definidos é a visualização padrão.

Mostrar todos os eventos

Exibe uma lista em ordem alfabética de todos os eventos de uma determinada categoria.

Adicionar comportamento (+)

Exibe um menu de ações que podem ser anexadas ao elemento selecionado atualmente. Quando uma ação é selecionada nessa lista, uma caixa de diálogo aparece na qual é possível especificar parâmetros para a ação. Se todas as ações estiverem esmaecidas, nenhum evento poderá ser gerado pelo elemento selecionado.

Remover evento (–)

Remove o evento e a ação selecionados da lista de comportamentos.

Botões de seta para cima e para baixo

Mova a ação selecionada para cima ou para baixo na lista de comportamentos para um evento específico. Você pode alterar a ordem das ações somente para um evento específico; por exemplo, é possível alterar a ordem em que várias ações ocorrem para o evento onLoad, mas todas as ações de onLoad permanecem juntas na lista de comportamentos. Os botões de seta estão desativados para ações que não podem ser movidas para cima ou para baixo na lista.

Eventos

Exibe um menu pop-up, exibido somente quando um evento é selecionado, de todos os eventos que podem acionar a ação (esse menu aparece quando você clica no botão de seta ao lado do nome do evento selecionado). Eventos diferentes podem aparecer dependendo do objeto selecionado. Se os eventos esperados não aparecerem, verifique se o elemento de página ou tag correto está selecionado. (Para selecionar uma tag específica, use o seletor de tags no canto inferior esquerdo da janela Documento.)

Observação:

Os nomes de evento entre parênteses estão disponíveis somente para links; a seleção de um desses nomes de evento adiciona automaticamente um link nulo ao elemento de página selecionado e anexa o comportamento a esse link e não ao elemento propriamente dito. O link nulo é especificado como href="javascript:;" no código HTML.

Sobre eventos

Cada navegador fornece um conjunto de eventos que podem ser associados às ações listadas no menu Ações (+) do painel Comportamento. Quando um visitante de sua página da Web interage com a página (por exemplo, clicando em uma imagem), o navegador gera eventos; esses eventos podem ser usados para chamar funções JavaScript que executam uma ação. O Dreamweaver fornece muitas ações comuns que podem ser acionadas por esses eventos.

Para obter os nomes e as descrições dos eventos fornecidos por cada navegador, acesse o Centro de suporte do Dreamweaver em www.adobe.com/go/dreamweaver_support_br.

Eventos diferentes podem aparecer no menu Eventos dependendo do objeto selecionado. Para saber quais eventos são suportados por um determinado navegador para um determinado elemento de página, insira o elemento de página no seu documento e anexe um comportamento a ele; em seguida, observe o menu Eventos no painel Comportamentos. (Por padrão, os eventos são da lista de eventos do HTML 4.01 e são suportados pela maioria dos navegadores modernos.) Os eventos podem ser desativados se os objetos relevantes ainda não existirem na página ou se o objeto selecionado não puder receber eventos. Se os eventos esperados não aparecerem, você deverá verificar se o objeto correto está selecionado.

Se você estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecerão entre parênteses. Esses eventos estão disponíveis somente para links. Quando um deles é selecionado, o Dreamweaver coloca uma tag <a> antes e depois da imagem para definir um link nulo. O link nulo é representado por javascript:; na caixa Link do Inspetor de propriedades. Você pode alterar o valor do link se desejar transformá-lo em um link real para outra página, mas se o link do JavaScript for excluído sem ser substituído por outro link, o comportamento será removido.

Para ver quais tags podem ser usadas com um determinado evento em um determinado navegador, procure o evento em um dos arquivos da pasta Dreamweaver/Configuração/Comportamentos/Eventos.

Aplicar um comportamento

Você pode anexar comportamentos ao documento inteiro (isto é, à tag <body>) ou a links, imagens, elementos de formulário e diversos outros elementos HTML.

O navegador de destino selecionado determina quais eventos são suportados para um determinado elemento.

É possível especificar mais de uma ação para cada evento. As ações ocorrem na ordem em que estão listadas na coluna Ações do painel Comportamentos, mas essa ordem pode ser alterada.

  1. Selecione um elemento na página, como uma imagem ou um link.

    Para anexar um comportamento à página inteira, clique na tag <body> no seletor de tags, no canto inferior esquerdo da janela Documento.

  2. Escolha Janela > Comportamentos.
  3. Clique no botão de adição (+) e selecione uma ação no menu Adicionar comportamento.

    As ações que estão desativadas no menu não podem ser escolhidas. Elas podem estar desativadas porque um objeto necessário não existe no documento atual. Por exemplo, a ação Controlar Shockwave ou SWF estará desativada se o documento não contiver nenhum arquivo SWF ou Shockwave.

    Quando uma ação é selecionada, uma caixa de diálogo aparece exibindo parâmetros e instruções para a ação.

  4. Insira os parâmetros da ação e clique em OK.

    Todas as ações disponíveis no Dreamweaver funcionam em navegadores modernos. Algumas ações não funcionam em navegadores mais antigos, mas não provocarão erros.

    Observação:

    Os elementos de destino requerem uma ID exclusiva. Por exemplo, se desejar aplicar o comportamento Trocar imagem em uma imagem, será necessário fornecer uma ID. Se você não especificar uma ID para o elemento, o Dreamweaver especificará uma automaticamente.

  5. O evento padrão que acionará a ação aparece na coluna Eventos. Se não for o evento desejado, selecione outro no menu pop-up Eventos. (Para abrir o menu Eventos, selecione um evento ou uma ação no painel Comportamentos e clique na seta para baixo preta que aparece entre o nome do evento e o nome da ação.)

Alterar ou excluir comportamentos

Depois de anexar um comportamento, você pode alterar o evento que aciona a ação, adicionar ou remover ações e alterar parâmetros de ações.

  1. Selecione um objeto com um comportamento anexado.
  2. Escolha Janela > Comportamentos.
  3. Faça as alterações:
    • Para editar os parâmetros de uma ação, clique duas vezes no nome da ação ou selecione-a e pressione Enter (Windows) ou Return (Macintosh); em seguida, altere os parâmetros na caixa de diálogo e clique em OK.

    • Para alterar a ordem das ações de um determinado evento, selecione uma ação e clique na seta para cima ou para baixo. Se preferir, selecione a ação e corte e cole-a no local desejado entre as outras ações.

    • Para excluir um comportamento, selecione-o e clique no botão de subtração (–) ou pressione Excluir.

Atualizar um comportamento

  1. Selecione um elemento que apresenta o comportamento anexado a ele.
  2. Escolha Janela > Comportamentos e clique duas vezes no comportamento.
  3. Faça as alterações e clique em OK na caixa de diálogo do comportamento.

    Todas as ocorrências desse comportamento na página serão atualizadas. Se outras páginas do site tiverem esse comportamento, atualize-as uma por uma.

Baixar e instalar comportamentos de terceiros

Muitas extensões estão disponíveis no Exchange para o site do Dreamweaver (www.adobe.com/go/dreamweaver_exchange_br).

  1. Escolha Janela > Comportamentos e selecione Obter mais comportamentos no menu Adicionar comportamento.

    O navegador primário se abre e o site do Exchange é exibido.

  2. Procure os pacotes.
  3. Baixe e instale o pacote de extensão desejado.

Para obter mais informações, consulte Adicionar e gerenciar extensões no Dreamweaver.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online