Utilizzare i comportamenti JavaScript (istruzioni generali)

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.

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.

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:

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.

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

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.

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

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.

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

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.

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.

Aggiornare un comportamento

Scaricare e installare comportamenti di terze parti

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

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