Utilizzate i comportamenti JavaScript in Adobe Dreamweaver per inserire codice JavaScript nei documenti per consentire ai visitatori di modificare una pagina web o di eseguire determinate operazioni.

I comportamenti di Adobe Dreamweaver inseriscono codice JavaScript nei documenti per consentire ai visitatori di modificare la pagina Web in vari modi oppure per far sì che vengano eseguite determinate operazioni. Un comportamento è una combinazione di un evento e un'azione attivata da quell'evento. Nel pannello Comportamenti, potete aggiungere un comportamento a una pagina specificando sia un'azione che l'evento che la determina.

Nota:

il codice del comportamento è un codice JavaScript client-side, ovvero viene eseguito nei browser e non sui server.

Gli eventi sono, praticamente, messaggi generati dai browser che indicano che un visitatore della pagina ha eseguito una determinata operazione. Ad esempio, quando un visitatore sposta il puntatore sopra un collegamento, il browser genera un evento onMouseOver per quel collegamento; quindi verifica se, in risposta all'evento, deve chiamare del codice JavaScript presente nella pagina visualizzata. Eventi differenti vengono definiti per elementi diversi della pagina. Ad esempio, nella maggior parte dei browser, onMouseOver e onClick sono eventi associati ai collegamenti, mentre onLoad è un evento associato alle immagini e alla sezione body del documento.

Un'azione non è altro che un codice JavaScript che esegue un'operazione specifica, ad esempio l'apertura della finestra di un browser, la visualizzazione o la disattivazione di un elemento PA, la riproduzione di un suono o l'interruzione di un filmato Adobe Shockwave. Le azioni fornite con Dreamweaver garantiscono la massima compatibilità con tutti i browser.

Dopo che un comportamento è stato associato a un elemento di pagina, il comportamento chiama l'azione (codice JavaScript) associata a un evento ogni volta che questo evento viene generato per l'elemento. Gli eventi che possono attivare una determinata azione variano a seconda del browser utilizzato. Ad esempio, se associate l'azione Messaggio popup a un collegamento e specificate che l'azione verrà generata dall'evento onMouseOver, ogni volta che un visitatore della pagina colloca il puntatore del mouse su quel collegamento, viene visualizzato il messaggio associato.

Lo stesso evento può attivare più azioni diverse e potete specificare l'ordine di esecuzione di queste azioni.

In Dreamweaver sono incorporate circa due dozzine di azioni e molte altre sono disponibili sul sito web Exchange all'indirizzo www.adobe.com/go/dreamweaver_exchange_it e sui siti di sviluppatori di terze parti. Inoltre, se avete una conoscenza approfondita del linguaggio JavaScript, potete creare azioni personalizzate.

Nota:

i termini comportamento e azione sono specifici di Dreamweaver, non sono termini HTML. Dal punto di vista del browser, un'azione non è altro che una qualunque porzione di codice JavaScript.

Panoramica sul pannello Comportamenti

Utilizzate il pannello Comportamenti (Finestra > Comportamenti) per applicare comportamenti agli elementi di pagina (più specificamente, ai tag) e per modificare i parametri dei comportamenti associati in precedenza.

I comportamenti che sono già stati associati all'elemento di pagina selezionato sono visualizzati nell'elenco dei comportamenti (area principale del pannello), in ordine alfabetico di evento. Se lo stesso evento è associato a più azioni, queste ultime vengono eseguite nell'ordine in cui sono visualizzate nell'elenco. Se a un elemento selezionato non è associato alcun comportamento, l'elenco è vuoto.

Il pannello Comportamenti contiene le seguenti opzioni:

Mostra eventi impostati

Visualizza solo gli eventi che sono stati applicati al documento corrente. Gli eventi sono organizzati in categorie client-side o server-side. Ciascun evento di categoria è contenuto in un elenco comprimibile. Mostra eventi impostati è la vista predefinita.

Mostra tutti gli eventi

Visualizza tutti gli eventi di una data categoria in ordine alfabetico.

Aggiungi comportamento (+)

Visualizza un menu di azioni che possono essere applicate all'elemento selezionato. Quando selezionate un'azione da questo elenco, viene visualizzata una finestra di dialogo che consente di specificare i parametri dell'azione. Se tutte le azioni risultano disattivate (visualizzate in grigio), non è possibile generare alcun evento per l'elemento selezionato.

Rimuovi evento (–)

Rimuove l'evento e l'azione selezionati dall'elenco dei comportamenti.

Pulsanti freccia su e freccia giù

Spostano l'azione selezionata verso l'alto o il basso nell'elenco dei comportamenti. Potete modificare l'ordine delle azioni solo per un particolare evento; ad esempio, potete cambiare l'ordine in cui si verificano diverse azioni per l'evento onLoad, ma tutte le azioni onLoad rimangono insieme nell'elenco dei comportamenti. I pulsanti freccia sono disattivati per le azioni di cui non è possibile cambiare la posizione nell'elenco.

Eventi

È un menu a comparsa, visibile solo quando è selezionato un evento, di tutti gli eventi che possono generare l'azione (il menu appare quando fate clic sul pulsante freccia accanto al nome dell'evento selezionato). Gli eventi visualizzati variano a seconda dell'oggetto selezionato. Se l'elenco non contiene gli eventi previsti, verificate di aver selezionato l'elemento di pagina o il tag corretto. Per selezionare un tag specifico, utilizzate l'apposito selettore visualizzato nell'angolo inferiore sinistro della finestra del documento.

Nota:

i nomi di eventi visualizzati tra parentesi sono disponibili solo per i collegamenti; se ne viene selezionato uno, all'elemento di pagina viene automaticamente aggiunto un collegamento nullo, e il comportamento viene associato al collegamento, invece che all'elemento stesso. Il collegamento nullo viene specificato come a href="javascript:;" nel codice HTML.

Informazioni sugli eventi

Ciascun browser offre eventi che possono essere applicati alle azioni presenti nel menu Azioni (+) del pannello Comportamenti. Quando un visitatore interagisce con una pagina Web, ad esempio facendo clic su un'immagine, il browser genera degli eventi specifici; tali eventi possono richiamare le funzioni JavaScript che producono una determinata azione. In Dreamweaver sono disponibili molte azioni comuni che possono essere attivate da questi eventi.

Per i nomi e le descrizioni degli eventi offerti da ciascun browser, visitate il Centro di assistenza per Dreamweaver all'indirizzo www.adobe.com/go/dreamweaver_support_it.

Nel menu Eventi vengono visualizzati eventi differenti a seconda dell'oggetto selezionato. Per verificare quali eventi sono supportati da un particolare browser per un determinato elemento di pagina, inserite l'elemento in questione nel documento e associate ad esso un comportamento, quindi aprite il menu Eventi nel pannello Comportamenti. (Per impostazione predefinita, gli eventi vengono ricavati dall'elenco degli eventi HTML 4.01 e sono supportati dalla maggior parte dei browser attualmente in uso.) È possibile che alcuni eventi appaiano disabilitati (inattivi) se gli oggetti associati non sono stati creati oppure se all'oggetto selezionato non possono essere associati degli eventi. Se non vengono visualizzati gli eventi previsti, verificate di aver selezionato l'oggetto corretto.

Se state applicando un comportamento a un'immagine, alcuni eventi come ad esempio onMouseOver appaiono tra parentesi. Questi eventi, infatti, sono disponibili solo per i collegamenti. Se scegliete uno di questi eventi, Dreamweaver associa un tag <a> all'immagine per definire un collegamento nullo (fittizio). Tale collegamento è rappresentato dall'indicazione javascript:; nella casella Collegamento della finestra di ispezione Proprietà. Potete cambiare il valore per trasformare il collegamento fittizio in un collegamento reale a una pagina specifica, ma se eliminate il collegamento JavaScript senza sostituirlo con un altro collegamento, il comportamento viene eliminato.

Per sapere quali tag possono essere utilizzati con un determinato evento in un browser specifico, cercate l'evento in questione in uno dei file contenuti nella cartella Dreamweaver/Configuration/Behaviors/Events.

Applicare un comportamento

I comportamenti possono essere applicati a tutto il corpo del documento (ovvero al tag <body>) oppure ai collegamenti, alle immagini, agli elementi dei moduli e a numerosi altri elementi HTML.

I browser di destinazione selezionati determinano quali eventi sono disponibili per un particolare elemento.

Potete specificare più di un'azione per ciascun evento. Le azioni vengono eseguite nell'ordine in cui sono elencate nella colonna Azioni del pannello Comportamenti; tuttavia potete modificare questo ordine.

  1. Selezionate un elemento della pagina, ad esempio un'immagine o un collegamento.

    Per applicare un comportamento a tutta la pagina, fate clic sul tag <body> nel selettore situato nell'angolo inferiore sinistro della finestra del documento.

  2. Scegliete Finestra > Comportamenti.
  3. Fate clic sul pulsante più (+) e selezionate un'azione dal menu Aggiungi comportamento.

    Le azioni che appaiono inattive nel menu non possono essere selezionate: è possibile che nel documento corrente manchi un oggetto necessario. Ad esempio, l'azione Controlla Shockwave o SWF è inattiva se il documento non contiene file Shockwave o SWF.

    Quando si seleziona un'azione, viene visualizzata una finestra di dialogo che mostra le istruzioni e i parametri relativi all'azione prescelta.

  4. Inserite i parametri da applicare all'azione e fate clic su OK.

    Tutte le azioni disponibili in Dreamweaver funzionano con gli attuali browser, ma non tutte funzionano con i browser meno recenti (anche se non generano errori).

    Nota:

    gli elementi di destinazione devono avere un ID univoco. Ad esempio, se volete applicare il comportamento Scambia immagine a un'immagine, quest'ultima deve avere un ID. Se non specificate un ID per l'elemento, Dreamweaver ne aggiunge uno automaticamente.

  5. Nella colonna Eventi viene visualizzato l'evento predefinito dell'azione. Se l'evento predefinito non corrisponde a quello desiderato, selezionate un altro evento dal menu a comparsa Eventi. (Per aprire il menu Eventi, selezionate un evento o un'azione dal pannello Comportamenti, quindi fate clic sulla freccia nera rivolta verso il basso che è visualizzata tra il nome dell'evento e quello dell'azione).

Modificare o eliminare un comportamento

Dopo aver applicato un comportamento, potete modificare l'evento che attiva l'azione e aggiungere, eliminare o modificare i parametri delle azioni.

  1. Selezionate un oggetto a cui è stato precedentemente applicato un comportamento.
  2. Scegliete Finestra > Comportamenti.
  3. Apportate le modifiche desiderate:
    • Per modificare i parametri di un'azione, fate doppio clic sul relativo nome oppure selezionatela e premete Invio. Quindi, modificate i parametri nella finestra di dialogo e fate clic su OK.

    • Per modificare l'ordine di esecuzione delle azioni associate a un evento, selezionate un'azione e fate clic sulla freccia su o giù. Alternativamente, potete selezionate l'azione e copiarla e incollarla nella posizione desiderata tra le altre azioni.

    • Per eliminare un comportamento, selezionatelo e fate clic sul pulsante meno (-) o premete Canc.

Aggiornare un comportamento

  1. Selezionate un elemento a cui è stato applicato il comportamento.
  2. Scegliete Finestra > Comportamenti e fate doppio clic sul comportamento.
  3. Apportate le modifiche desiderate e fate clic su OK nella finestra di dialogo del comportamento.

    Tutte le occorrenze del comportamento nella pagina vengono aggiornate. Se altre pagine contengono tale comportamento, è necessario aggiornarle una a una.

Scaricare e installare comportamenti di terze parti

Molte estensioni sono disponibili sul sito web Exchange per Dreamweaver (www.adobe.com/go/dreamweaver_exchange_it).

  1. Scegliete Finestra > Comportamenti e selezionate Richiama altri comportamenti dal menu Aggiungi comportamento.

    Viene aperto il browser principale e viene visualizzato il sito Exchange.

  2. Consultate i pacchetti disponibili.
  3. Scaricate e installate il pacchetto di estensione desiderato.

Per ulteriori informazioni, vedete Aggiungere e gestire le estensioni in Dreamweaver.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online