Handboek Annuleren

JavaScript-gedrag gebruiken (algemene instructies)

 

 

Gebruik JavaScript-gedrag in Adobe Dreamweaver om JavaScript-code in documenten te plaatsen, zodat bezoekers in staat zijn een webpagina te wijzigen of bepaalde taken te starten.

Met gedrag van Adobe Dreamweaver plaatst u JavaScript-code in documenten die bezoekers in staat stelt een webpagina op diverse manieren te wijzigen of bepaalde taken te starten. Met gedrag wordt een combinatie aangeduid van een gebeurtenis en een actie die door die gebeurtenis wordt geactiveerd. In het deelvenster Gedrag kunt u een gedrag aan een pagina toevoegen door een actie op te geven en vervolgens de gebeurtenis op te geven die de desbetreffende actie moet activeren.

Opmerking:

De code van een gedrag is JavaScript-code aan de client-kant. Dit houdt in dat de code in browsers en niet op servers wordt uitgevoerd.

Gebeurtenissen zijn in feite berichten die worden gegenereerd door browsers en die aangeven dat een bezoeker van uw webpagina een handeling heeft uitgevoerd op de pagina. Wanneer een bezoeker bijvoorbeeld de aanwijzer op een koppeling plaatst, genereert de browser een onMouseOver-gebeurtenis voor die koppeling. De browser controleert vervolgens of er als antwoord bepaalde JavaScript-code moet worden aangeroepen (aangegeven op de pagina die wordt weergegeven). Voor de verschillende pagina-elementen worden verschillende gebeurtenissen gedefinieerd. Zo zijn onMouseOver en onClick in de meeste browsers gebeurtenissen die aan koppelingen zijn gekoppeld, terwijl onLoad een gebeurtenis is die is gekoppeld aan afbeeldingen en aan de hoofdsectie van het document.

Een actie is vooraf geschreven JavaScript-code voor het uitvoeren van een taak, zoals het openen van een browservenster, het tonen of verbergen van een AP-element, het afspelen van een geluid of het stopzetten van een Adobe Shockwave-filmpje. De acties die bij Dreamweaver worden geleverd, zijn compatibel met vrijwel alle browsers.

Nadat u een gedrag aan een pagina-element hebt gekoppeld, roept dat gedrag telkens de actie (JavaScript-code) aan die aan een gebeurtenis is gekoppeld, op het moment dat die gebeurtenis voor dat element plaatsvindt. (De gebeurtenissen die u kunt gebruiken om een bepaalde actie te activeren, verschillen van browser tot browser.) Als u bijvoorbeeld de actie Pop-upbericht toevoegt aan een koppeling en opgeeft dat deze wordt geactiveerd door de onMouseOver-gebeurtenis, wordt uw bericht weergegeven wanneer iemand de aanwijzer op die koppeling plaatst.

Eén gebeurtenis kan meerdere verschillende acties activeren en u kunt opgeven in welke volgorde deze acties moeten plaatsvinden.

Bij eXchange worden ongeveer twee dozijn acties geleverd. Extra acties vindt u op de Exchange-website op www.adobe.com/go/dreamweaver_exchange_nl en ook op websites voor ontwikkelaars van derden. U kunt ook uw eigen acties schrijven als u ervaring hebt in het werken met JavaScript.

Opmerking:

De termen gedrag en actie zijn Dreamweaver-termen en geen HTML-termen. Vanuit de browser gezien verschilt een actie in geen enkel opzicht van andere stukjes JavaScript-code.

Overzicht van het deelvenster Gedrag

U kunt het deelvenster Gedrag (Venster > Gedrag) gebruiken om gedrag aan pagina-elementen (of om precies te zijn aan tags) te koppelen en om parameters van gedrag dat u al eerder hebt gekoppeld, te wijzigen.

Gedragingen die al zijn gekoppeld aan het op dat moment geselecteerde pagina-element, worden in de lijst met gedragingen (het hoofdgedeelte van het paneel) weergegeven en alfabetisch gerangschikt op gebeurtenis. Als er voor één gebeurtenis meerdere acties worden weergegeven, worden deze acties uitgevoerd in de volgorde waarin ze in de lijst worden weergegeven. Als er geen gedragingen in de lijst met gedragingen worden weergegeven, zijn er geen gedragingen aan het op dat moment geselecteerde element gekoppeld.

In het deelvenster Gedrag kunt u de volgende opties selecteren:

Ingestelde gebeurtenissen weergeven

Hiermee geeft u alleen die gebeurtenissen weer die aan het huidige document zijn gekoppeld. Gebeurtenissen zijn onderverdeeld in client-kant- en server-kantcategorieën. De gebeurtenissen in beide categorieën bevinden zich in een uitvouwbare lijst. Ingestelde gebeurtenissen weergeven is de standaardweergave.

Alle gebeurtenissen tonen

Hiermee geeft u een alfabetisch gerangschikte lijst van alle gebeurtenissen voor een bepaalde categorie weer.

Gedrag toevoegen (+)

Hiermee geeft u een menu weer met acties die aan het op dat moment geselecteerde element kunnen worden gekoppeld. Als u in deze lijst een actie selecteert, wordt er een dialoogvenster weergegeven waarin u de parameters voor de actie kunt opgeven. Als alle acties lichter gekleurd worden weergegeven (niet beschikbaar zijn), kunnen er geen gebeurtenissen worden gegenereerd door het geselecteerde element.

Gebeurtenis verwijderen (–)

Hiermee verwijdert u de geselecteerde gebeurtenis en actie uit de lijst met gedragingen.

De knoppen pijl-omhoog en pijl-omlaag

Hiermee plaatst u de geselecteerde actie hoger of lager in de lijst met gedragingen voor een bepaalde gebeurtenis. U kunt de volgorde van acties alleen voor een bepaalde gebeurtenis wijzigen—u kunt bijvoorbeeld de volgorde wijzigen waarin bepaalde acties worden uitgevoerd voor de gebeurtenis onLoad, maar de acties voor de gebeurtenis onLoad blijven bij elkaar in de lijst met gedragingen. Voor acties die niet hoger of lager in de lijst kunnen worden geplaatst, zijn de pijlknoppen uitgeschakeld.

Gebeurtenissen

Hiermee geeft u een pop‑upmenu weer dat alleen zichtbaar is wanneer er een gebeurtenis is geselecteerd en dat alle gebeurtenissen bevat die de actie kunnen activeren (dit menu verschijnt wanneer u op de pijlknop naast de naam van de geselecteerde gebeurtenis klikt). Welke gebeurtenissen worden weergegeven, hangt af van het object dat is geselecteerd. Als er andere gebeurtenissen worden weergegeven dan u had verwacht, moet u controleren of u wel het juiste pagina-element of de juiste tag hebt geselecteerd. (Als u een specifieke tag wilt selecteren, moet u de tagkiezer gebruiken, die zich in de linkerbenedenhoek van het documentvenster bevindt.)

Opmerking:

Gebeurtenisnamen tussen haakjes zijn alleen beschikbaar voor koppelingen. Als u een van deze gebeurtenisnamen selecteert, wordt er automatisch een lege koppeling aan het geselecteerde pagina-element toegevoegd en wordt het gedrag aan deze koppeling gekoppeld in plaats van aan het element zelf. De lege koppeling is gespecificeerd als href="javascript:;" in de HTML-code.

Over gebeurtenissen

Elke browser biedt een reeks gebeurtenissen die u kunt koppelen aan de acties die in het menu Acties (+) van het deelvenster Gedrag worden weergegeven. Wanneer een bezoeker van uw webpagina ergens op de pagina tekst invoert of ergens op klikt (bijvoorbeeld op een afbeelding), genereert de browser gebeurtenissen. Deze gebeurtenissen kunnen worden gebruikt om JavaScript-functies aan te roepen die een actie uitvoeren. In Dreamweaver zijn vele gangbare acties beschikbaar die u met deze gebeurtenissen kunt activeren.

In het Dreamweaver Support Center op www.adobe.com/go/dreamweaver_support_nl vindt u namen en beschrijvingen van de gebeurtenissen die bij elke browser worden geleverd.

Welke gebeurtenissen worden weergegeven in het menu Gebeurtenissen, hangt af van het object dat is geselecteerd. Als u wilt weten welke gebeurtenissen een bepaalde browser ondersteunt voor een bepaald pagina-element, voegt u het desbetreffende pagina-element in uw document in, koppelt u een gedrag aan het element en kijkt u vervolgens in het menu Gebeurtenissen in het deelvenster Gedrag. (Standaard worden gebeurtenissen uit de lijst met HTML 4.01-gehaald en worden deze door de meeste moderne browsers ondersteund.) Gebeurtenissen kunnen uitgeschakeld zijn (ze worden dan lichter gekleurd weergegeven) als de relevante objecten nog niet op de pagina aanwezig zijn of als het geselecteerde object geen gebeurtenissen kan ontvangen. Als er andere gebeurtenissen worden weergegeven dan u had verwacht, moet u controleren of u het juiste object hebt geselecteerd.

Als u een gedrag aan een afbeelding koppelt, worden sommige gebeurtenissen (zoals onMouseOver) tussen haakjes weergegeven. Deze gebeurtenissen zijn alleen beschikbaar voor koppelingen. Wanneer u een van deze gebeurtenissen selecteert, plaatst Dreamweaver een <a>-tag rondom de afbeelding om een null-koppeling te definiëren. De lege koppeling wordt in het vak Koppeling van de eigenschappencontrole vertegenwoordigd door javascript:;. U kunt de waarde van de koppeling wijzigen als u deze in een echte koppeling naar een andere pagina wilt veranderen, maar als u de JavaScript-koppeling verwijdert, zonder deze te vervangen door een andere koppeling, verwijdert u het gedrag.

Als u wilt weten welke tags u kunt gebruiken in combinatie met een bepaalde gebeurtenis in een bepaalde browser, zoekt u naar de gebeurtenis in een van de bestanden in de map Dreamweaver/Configuratie/Gedrag/Gebeurtenissen.

Een gedrag toepassen

U kunt gedrag koppelen aan het gehele document (dat wil zeggen aan de <body>-tag) of aan koppelingen, afbeeldingen, formulierelementen en verscheidene andere HTML-elementen.

De doelbrowser die u selecteert, bepaalt welke gebeurtenissen worden ondersteund voor een bepaald element.

U kunt meer dan één actie voor elke gebeurtenis opgeven. Acties worden uitgevoerd in de volgorde waarin ze in de kolom Acties van het deelvenster Gedrag worden weergegeven, maar u kunt die volgorde wijzigen.

  1. Selecteer een element op de pagina, zoals een afbeelding of koppeling.

    Als u een gedrag aan de volledige pagina wilt koppelen, klikt u op de <body>-tag in de tagkiezer in de linkerbenedenhoek van het documentvenster.

  2. Kies Venster > Gedrag.
  3. Klik op de plusknop (+) en selecteer een actie in het menu Gedrag toevoegen.

    Acties in dit menu die lichter gekleurd worden weergegeven, kunnen niet worden gekozen. Mogelijk worden deze acties lichter gekleurd weergegeven, omdat een vereist object niet in het huidige document aanwezig is. De actie Shockwave of SWF beheren wordt bijvoorbeeld lichter gekleurd weergegeven als het document geen Shockwave- of SWF-bestanden bevat.

    Als u een actie selecteert, wordt er een dialoogvenster weergegeven met de parameters en instructies voor de actie.

  4. Voer parameters in voor de actie en klik op OK.

    Alle acties in Dreamweaver werken in moderne browsers. Sommige acties werken niet in oudere browsers, maar ze zullen geen fouten veroorzaken.

    Opmerking:

    Doelelementen vereisen een unieke id. Als u bijvoorbeeld het gedrag Afbeelding verwisselen wilt toepassen op een afbeelding, heeft de afbeelding een id nodig. Als u geen id voor het element hebt opgegeven, geeft Dreamweaver er automatisch een voor u op.

  5. De standaardgebeurtenis voor het activeren van de actie wordt in de kolom Gebeurtenissen weergegeven. Als dit niet de gewenste activeringsgebeurtenis is, selecteert u een andere gebeurtenis in het pop-upmenu Gebeurtenissen. (Als u het menu Gebeurtenissen wilt openen, selecteert u een gebeurtenis of actie in het deelvenster Gedrag en klikt u op de zwarte, naar beneden wijzende pijl die tussen de naam van de gebeurtenis en de naam van de actie wordt weergegeven.)

Gedrag wijzigen of verwijderen

Nadat u een gedrag hebt gekoppeld, kunt u de gebeurtenis wijzigingen waarmee de actie wordt geactiveerd, acties toevoegen of verwijderen en parameters voor acties wijzigen.

  1. Selecteer een object waaraan een gedrag is gekoppeld.
  2. Kies Venster > Gedrag.
  3. Breng de wijzigingen aan:
    • Als u de parameters van een actie wilt bewerken, dubbelklikt u op de naam van de actie of selecteert u de naam en drukt u op Enter (Windows) of Return (Macintosh). Vervolgens wijzigt u de parameters in het dialoogvenster en klikt u op OK.

    • Als u de volgorde van acties voor een bepaalde gebeurtenis wilt wijzigen, selecteert u een actie en klikt u op de knop pijl-omhoog of pijl-omlaag. U kunt in plaats daarvan ook de actie selecteren en deze met knippen en plakken op de gewenste locatie tussen de andere acties neerzetten.

    • Als u een gedrag wilt verwijderen, selecteert u dit gedrag en klikt u op de minknop (–) of drukt u op Delete.

Een gedrag bijwerken

  1. Selecteer een element waaraan het gedrag is gekoppeld.
  2. Kies Venster > Gedrag en dubbelklik op het gedrag.
  3. Breng de wijzigingen aan en klik in het dialoogvenster van het gedrag op OK.

    Overal waar het gedrag op die pagina voorkomt, wordt het bijgewerkt. Als datzelfde gedrag ook op andere pagina's van uw website voorkomt, moet u het gedrag per pagina bijwerken.

Gedrag van derden downloaden en installeren

Er zijn vele uitbreidingen beschikbaar op de website Exchange for Dreamweaver (www.adobe.com/go/dreamweaver_exchange_nl).

  1. Kies Venster > Gedrag en selecteer Meer gedrag ophalen in het menu Gedrag toevoegen.

    De primaire browser wordt geopend en de Exchange-website wordt weergegeven.

  2. Ga op zoek naar de gewenste pakketten door te bladeren of gericht te zoeken.
  3. Download en installeer het gewenste uitbreidingspakket.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?