Handboek Annuleren

JavaScript-gedrag gebruiken (algemene instructies)

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen

 

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.
Adobe-logo

Aanmelden bij je account