CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="nl" dir="ltr"> <head> <meta charset="UTF-8"> <title>HTML-scripting - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )nlwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":[",\t.",".\t,"],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december"],"wgRequestId":"12623ba8-482f-438f-b321-667291f5a6f2","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"HTML-scripting","wgTitle":"HTML-scripting","wgCurRevisionId":64484813,"wgRevisionId":64484813,"wgArticleId":166622,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["HTML","JavaScript"],"wgPageViewLanguage":"nl","wgPageContentLanguage":"nl","wgPageContentModel":"wikitext","wgRelevantPageName":"HTML-scripting","wgRelevantArticleId":166622,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{ "pageLanguageCode":"nl","pageLanguageDir":"ltr","pageVariantFallbacks":"nl"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":true,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":8000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q2109265","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading", "skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.Direct-link-to-Commons","ext.gadget.ProtectionTemplates","ext.gadget.InterProjectLinks","ext.gadget.hoofdbetekenis-titelwijziging","ext.gadget.switcher","ext.gadget.OpenStreetMapFrame","ext.gadget.subpages","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions", "wikibase.client.vector-2022","ext.checkUser.clientHints","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=nl&modules=ext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=nl&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=nl&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="HTML-scripting - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//nl.m.wikipedia.org/wiki/HTML-scripting"> <link rel="alternate" type="application/x-wiki" title="Bewerken" href="/w/index.php?title=HTML-scripting&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (nl)"> <link rel="EditURI" type="application/rsd+xml" href="//nl.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://nl.wikipedia.org/wiki/HTML-scripting"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.nl"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom-feed" href="/w/index.php?title=Speciaal:RecenteWijzigingen&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-HTML-scripting rootpage-HTML-scripting skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Naar inhoud springen</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Hoofdmenu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Hoofdmenu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Hoofdmenu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">naar zijbalk verplaatsen</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">verbergen</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigatie </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage" class="mw-list-item"><a href="/wiki/Hoofdpagina" title="Naar de hoofdpagina gaan [z]" accesskey="z"><span>Hoofdpagina</span></a></li><li id="n-zoekartikel" class="mw-list-item"><a href="/wiki/Portaal:Navigatie"><span>Vind een artikel</span></a></li><li id="n-today" class="mw-list-item"><a href="/wiki/28_november"><span>Vandaag</span></a></li><li id="n-Etalage" class="mw-list-item"><a href="/wiki/Wikipedia:Etalage"><span>Etalage</span></a></li><li id="n-categories" class="mw-list-item"><a href="/wiki/Categorie:Alles"><span>Categorieën</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Speciaal:RecenteWijzigingen" title="Een lijst met recente wijzigingen in deze wiki. [r]" accesskey="r"><span>Recente wijzigingen</span></a></li><li id="n-newpages" class="mw-list-item"><a href="/wiki/Speciaal:NieuwePaginas"><span>Nieuwe artikelen</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Speciaal:Willekeurig" title="Een willekeurige pagina bekijken [x]" accesskey="x"><span>Willekeurige pagina</span></a></li> </ul> </div> </div> <div id="p-navigation2" class="vector-menu mw-portlet mw-portlet-navigation2" > <div class="vector-menu-heading"> Informatie </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Portaal:Gebruikersportaal" title="Informatie over het project: wat u kunt doen, waar u dingen kunt vinden"><span>Gebruikersportaal</span></a></li><li id="n-Snelcursus" class="mw-list-item"><a href="/wiki/Wikipedia:Snelcursus"><span>Snelcursus</span></a></li><li id="n-help" class="mw-list-item"><a href="/wiki/Portaal:Hulp_en_beheer" title="Hulpinformatie over deze wiki"><span>Hulp en contact</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Hoofdpagina" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="de vrije encyclopedie" src="/static/images/mobile/copyright/wikipedia-tagline-nl.svg" width="120" height="13" style="width: 7.5em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Speciaal:Zoeken" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Doorzoek Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Zoeken</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Doorzoek Wikipedia" aria-label="Doorzoek Wikipedia" autocapitalize="sentences" title="Doorzoek Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Speciaal:Zoeken"> </div> <button class="cdx-button cdx-search-input__end-button">Zoeken</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Persoonlijke hulpmiddelen"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Uiterlijk"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="De lettergrootte, breedte en kleur van de pagina wijzigen" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Uiterlijk" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Uiterlijk</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_nl.wikipedia.org&uselang=nl" class=""><span>Doneren</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Speciaal:GebruikerAanmaken&returnto=HTML-scripting" title="Registreer u vooral en meld u aan. Dit is echter niet verplicht." class=""><span>Account aanmaken</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Speciaal:Aanmelden&returnto=HTML-scripting" title="U wordt van harte uitgenodigd om aan te melden, maar dit is niet verplicht [o]" accesskey="o" class=""><span>Aanmelden</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Meer opties" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Persoonlijke hulpmiddelen" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Persoonlijke hulpmiddelen</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="Gebruikersmenu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_nl.wikipedia.org&uselang=nl"><span>Doneren</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Speciaal:GebruikerAanmaken&returnto=HTML-scripting" title="Registreer u vooral en meld u aan. Dit is echter niet verplicht."><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Account aanmaken</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Speciaal:Aanmelden&returnto=HTML-scripting" title="U wordt van harte uitgenodigd om aan te melden, maar dit is niet verplicht [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Aanmelden</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pagina's voor uitgelogde redacteuren <a href="/wiki/Help:Inleiding" aria-label="Meer leren over bewerken"><span>meer lezen</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Speciaal:MijnBijdragen" title="Bijdragen IP-adres [y]" accesskey="y"><span>Bijdragen</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Speciaal:MijnOverleg" title="Overlegpagina van de anonieme gebruiker van dit IP-adres [n]" accesskey="n"><span>Overleg</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Inhoud" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Inhoud</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">naar zijbalk verplaatsen</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">verbergen</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Top</div> </a> </li> <li id="toc-Inleiding" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Inleiding"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Inleiding</span> </div> </a> <ul id="toc-Inleiding-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Browsers_en_scripts" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Browsers_en_scripts"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Browsers en scripts</span> </div> </a> <ul id="toc-Browsers_en_scripts-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Toepassingen_van_scripts_in_HTML" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Toepassingen_van_scripts_in_HTML"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Toepassingen van scripts in HTML</span> </div> </a> <ul id="toc-Toepassingen_van_scripts_in_HTML-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Events_en_bubbling" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Events_en_bubbling"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Events en bubbling</span> </div> </a> <ul id="toc-Events_en_bubbling-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Sandbox_security_model" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Sandbox_security_model"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Sandbox security model</span> </div> </a> <ul id="toc-Sandbox_security_model-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Zie_ook" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Zie_ook"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Zie ook</span> </div> </a> <ul id="toc-Zie_ook-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Inhoud" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Inhoudsopgave omschakelen" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Inhoudsopgave omschakelen</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">HTML-scripting</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Ga naar een artikel in een andere taal. Beschikbaar in 4 talen" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-4" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">4 talen</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ia mw-list-item"><a href="https://ia.wikipedia.org/wiki/Programmation_de_scripts_pro_HTML" title="Programmation de scripts pro HTML – Interlingua" lang="ia" hreflang="ia" data-title="Programmation de scripts pro HTML" data-language-autonym="Interlingua" data-language-local-name="Interlingua" class="interlanguage-link-target"><span>Interlingua</span></a></li><li class="interlanguage-link interwiki-pa mw-list-item"><a href="https://pa.wikipedia.org/wiki/%E0%A8%90%E0%A8%9A.%E0%A8%9F%E0%A9%80.%E0%A8%90%E0%A8%AE.%E0%A8%90%E0%A8%B2._%E0%A8%B8%E0%A8%95%E0%A9%8D%E0%A8%B0%E0%A8%BF%E0%A8%AA%E0%A8%9F%E0%A8%BF%E0%A9%B0%E0%A8%97" title="ਐਚ.ਟੀ.ਐਮ.ਐਲ. ਸਕ੍ਰਿਪਟਿੰਗ – Punjabi" lang="pa" hreflang="pa" data-title="ਐਚ.ਟੀ.ਐਮ.ਐਲ. ਸਕ੍ਰਿਪਟਿੰਗ" data-language-autonym="ਪੰਜਾਬੀ" data-language-local-name="Punjabi" class="interlanguage-link-target"><span>ਪੰਜਾਬੀ</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D1%8B_%D0%B2_HTML" title="Скрипты в HTML – Russisch" lang="ru" hreflang="ru" data-title="Скрипты в HTML" data-language-autonym="Русский" data-language-local-name="Russisch" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/%D0%A1%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8_%D0%B2_HTML" title="Скрипти в HTML – Oekraïens" lang="uk" hreflang="uk" data-title="Скрипти в HTML" data-language-autonym="Українська" data-language-local-name="Oekraïens" class="interlanguage-link-target"><span>Українська</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q2109265#sitelinks-wikipedia" title="Taalkoppelingen bewerken" class="wbc-editpage">Koppelingen bewerken</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Naamruimten"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/HTML-scripting" title="Inhoudspagina bekijken [c]" accesskey="c"><span>Artikel</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Overleg:HTML-scripting" rel="discussion" title="Overleg over deze pagina [t]" accesskey="t"><span>Overleg</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Taalvariant wijzigen" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Nederlands</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Weergaven"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/HTML-scripting"><span>Lezen</span></a></li><li id="ca-ve-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HTML-scripting&veaction=edit" title="Deze pagina bewerken [v]" accesskey="v"><span>Bewerken</span></a></li><li id="ca-edit" class="collapsible vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HTML-scripting&action=edit" title="Broncode van deze pagina bewerken [e]" accesskey="e"><span>Brontekst bewerken</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HTML-scripting&action=history" title="Eerdere versies van deze pagina [h]" accesskey="h"><span>Geschiedenis weergeven</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Paginahulpmiddelen"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Hulpmiddelen" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Hulpmiddelen</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Hulpmiddelen</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">naar zijbalk verplaatsen</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">verbergen</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="Meer opties" > <div class="vector-menu-heading"> Handelingen </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/HTML-scripting"><span>Lezen</span></a></li><li id="ca-more-ve-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HTML-scripting&veaction=edit" title="Deze pagina bewerken [v]" accesskey="v"><span>Bewerken</span></a></li><li id="ca-more-edit" class="collapsible vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HTML-scripting&action=edit" title="Broncode van deze pagina bewerken [e]" accesskey="e"><span>Brontekst bewerken</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HTML-scripting&action=history"><span>Geschiedenis weergeven</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> Algemeen </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Speciaal:VerwijzingenNaarHier/HTML-scripting" title="Lijst met alle pagina's die naar deze pagina verwijzen [j]" accesskey="j"><span>Links naar deze pagina</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Speciaal:RecenteWijzigingenGelinkt/HTML-scripting" rel="nofollow" title="Recente wijzigingen in pagina's waar deze pagina naar verwijst [k]" accesskey="k"><span>Gerelateerde wijzigingen</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard?uselang=nl" title="Bestanden uploaden [u]" accesskey="u"><span>Bestand uploaden</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Speciaal:SpecialePaginas" title="Lijst met alle speciale pagina's [q]" accesskey="q"><span>Speciale pagina's</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=HTML-scripting&oldid=64484813" title="Permanente koppeling naar deze versie van deze pagina"><span>Permanente koppeling</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=HTML-scripting&action=info" title="Meer informatie over deze pagina"><span>Paginagegevens</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Speciaal:Citeren&page=HTML-scripting&id=64484813&wpFormIdentifier=titleform" title="Informatie over hoe u deze pagina kunt citeren"><span>Deze pagina citeren</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Speciaal:UrlShortener&url=https%3A%2F%2Fnl.wikipedia.org%2Fwiki%2FHTML-scripting"><span>Verkorte URL verkrijgen</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Speciaal:QrCode&url=https%3A%2F%2Fnl.wikipedia.org%2Fwiki%2FHTML-scripting"><span>QR-code downloaden</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Afdrukken/exporteren </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Speciaal:Boek&bookcmd=book_creator&referer=HTML-scripting"><span>Boek aanmaken</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Speciaal:DownloadAsPdf&page=HTML-scripting&action=show-download-screen"><span>Downloaden als PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=HTML-scripting&printable=yes" title="Printvriendelijke versie van deze pagina [p]" accesskey="p"><span>Afdrukversie</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In andere projecten </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q2109265" title="Koppeling naar item in verbonden gegevensrepository [g]" accesskey="g"><span>Wikidata-item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Paginahulpmiddelen"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Uiterlijk"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Uiterlijk</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">naar zijbalk verplaatsen</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">verbergen</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">Uit Wikipedia, de vrije encyclopedie</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="nl" dir="ltr"><p>Met <b>HTML-scripting</b> (of soms <b>client-side-scripting</b>) worden <a href="/wiki/Scripttaal" title="Scripttaal">scripts</a> (meestal <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a>) aangeduid die in de <a href="/wiki/HyperText_Markup_Language" title="HyperText Markup Language">HTML</a>-code van een document staan. De scripts zorgen ervoor dat de <a href="/wiki/Webpagina" title="Webpagina">webpagina</a> interactief wordt. Het is daartoe echter noodzakelijk dat de gebruikte <a href="/wiki/Webbrowser" title="Webbrowser">webbrowser</a> de scripttaal ondersteunt. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Inleiding">Inleiding</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML-scripting&veaction=edit&section=1" title="Bewerk dit kopje: Inleiding" class="mw-editsection-visualeditor"><span>bewerken</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML-scripting&action=edit&section=1" title="De broncode bewerken van de sectie: Inleiding"><span>brontekst bewerken</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In 1995 werd de <a href="/wiki/Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a>-versie 2.0 uitgebracht, die als eerste browser ondersteuning bood voor scripts in HTML-documenten. De gebruikte scripttaal werd aanvankelijk <i>Livescript</i> en later JavaScript genoemd. </p><p>Met de introductie van JavaScript werd het mogelijk om de statische HTML-documenten een zekere interactiviteit te geven. Dit heeft in latere jaren geleid tot de lancering van <a href="/wiki/Dynamic_HTML" title="Dynamic HTML">Dynamic HTML</a> en daarna tot nog verdere vergroting van de interactiviteit van HTML-documenten. </p><p><a href="/wiki/Microsoft" title="Microsoft">Microsoft</a> kon in deze ontwikkeling niet achterblijven, en voorzag <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a> van een vergelijkbare scripttaal. Omdat er toch kleine verschillen waren, bracht Microsoft de scripttaal uit onder de naam <a href="/wiki/JScript" title="JScript">JScript</a>. Vanaf versie 3.0, ondersteunt Internet Explorer niet alleen JScript, maar ook <a href="/wiki/VBScript" title="VBScript">VBScript</a> en (tot versie 5.x) perlscript. </p><p>De scripttalen die gebruikt worden in HTML-documenten, worden ook in andere toepassingen gebruikt. De talen worden elk besproken in hun eigen lemma. </p> <div class="mw-heading mw-heading2"><h2 id="Browsers_en_scripts">Browsers en scripts</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML-scripting&veaction=edit&section=2" title="Bewerk dit kopje: Browsers en scripts" class="mw-editsection-visualeditor"><span>bewerken</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML-scripting&action=edit&section=2" title="De broncode bewerken van de sectie: Browsers en scripts"><span>brontekst bewerken</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Scripts kunnen overal in een HTML-document worden geplaatst. Er is een speciale HTML-<i>tag</i> die aangeeft dat het om een script gaat. In die <i>tag</i> kan worden aangegeven welke scripttaal wordt gebruikt, als er niets wordt aangegeven, wordt ervan uitgegaan dat het om JavaScript gaat. </p><p>De scripts in HTML-documenten communiceren met de browser (dus niet direct met het document). De meeste browsers hebben de optie om ondersteuning voor JavaScript uit te zetten. Omdat webpagina's soms scripts bevatten die de browser vragen om <a href="/wiki/Pop-up_(internet)" title="Pop-up (internet)">pop-ups</a> te openen (meestal met reclame), kiest een deel van de gebruikers er voor om ondersteuning voor scripts uit te zetten. </p><p>De ondersteuning voor scripts moet in de browser zijn ingebouwd. Alle geavanceerde browsers ondersteunen JavaScript. De ondersteuning voor VBScript is beperkt tot Internet Explorer. Onder <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Windows</a> gebruikt Internet Explorer de standaard <a href="/wiki/Interpreter" title="Interpreter">interpreters</a> die in Windows zijn ingebouwd (<i>jscript.dll</i> en <i>vbscript.dll</i>). In andere gevallen is de interpreter onderdeel van de installatie. Er zijn enkele onderlinge verschillen tussen de browsers in de interpretatie van JavaScript. Een andere mogelijke bron van verschillen in interpretatie van scripts is gelegen in gebruik van een ander model van het document door de browser (zie <a href="/wiki/Document_Object_Model" title="Document Object Model">Document Object Model</a>). </p> <div class="mw-heading mw-heading2"><h2 id="Toepassingen_van_scripts_in_HTML">Toepassingen van scripts in HTML</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML-scripting&veaction=edit&section=3" title="Bewerk dit kopje: Toepassingen van scripts in HTML" class="mw-editsection-visualeditor"><span>bewerken</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML-scripting&action=edit&section=3" title="De broncode bewerken van de sectie: Toepassingen van scripts in HTML"><span>brontekst bewerken</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Scripts geven de browser opdracht om iets te doen. De browser kan daar op reageren door bijvoorbeeld een waarschuwing (<i>alert</i>) te tonen. De krachtige toepassingen liggen in opdrachten die betrekking hebben op het getoonde document. Via het <i>Document Object Model</i> kan de browser namelijk eigenschappen van dat document opvragen en aanpassen. Veel gebruikte toepassingen zijn: </p> <ul><li>Controleren van een ingevuld formulier of validatie. Met een script kunnen de ingevulde gegevens in een <a href="/wiki/HTML-formulier" title="HTML-formulier">formulier</a> in een webpagina worden gecontroleerd voordat het formulier wordt verstuurd. Omdat deze controle op de computer van de gebruiker plaatsvindt, gaat dit veel sneller dan controle op de <a href="/wiki/Webserver" title="Webserver">webserver</a> na het versturen. Bovendien wordt de server minder belast, waardoor het ook voor andere gebruikers ondertussen sneller gaat. Overigens blijft controle op de webserver vaak nodig, omdat niet elke gebruiker de ondersteuning voor scripts heeft geactiveerd. Bovendien zijn een aantal gegevens alleen op de webserver te controleren, bijvoorbeeld of een ingevuld <a href="/wiki/E-mail" title="E-mail">e-mailadres</a> al eens eerder is gebruikt.</li> <li>Gebruik van cookies. Met scripts kunnen <a href="/wiki/Cookie_(internet)" title="Cookie (internet)">cookies</a> in de browser worden geplaatst en weer teruggelezen.</li> <li>Ophalen van nieuwe informatie. Scripts kunnen de browser opdracht geven om nieuwe informatie op te halen van de webserver. Dat gebeurt vaak door een nieuw venster te openen, met daarin een nieuw document. Maar het is ook mogelijk dat de nieuwe informatie wordt opgeslagen als een variabele, en die vervolgens in het bestaande document wordt verwerkt.</li> <li>Aanpassingen van de stijl. De <a href="/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets">stijl</a> van elementen van het document kan door middel van scripts worden aangepast. De toepassingen hiervan zijn legio.</li> <li>Dynamische menu's (als voorbeeld van aanpassing van stijl). Veel webpagina's maken gebruik van dynamische menu's, zodat de gebruiker nieuwe (onderliggende) keuzes ziet verschijnen als de muis over een hoofdkeuze wordt gezet.</li></ul> <p>Een interessante oefening in HTML-scripting is <i>Wolfenstein 5k</i>, een <a href="/wiki/Driedimensionaal" title="Driedimensionaal">driedimensionale</a> <a href="/wiki/First-person_shooter" title="First-person shooter">first-person shooter</a> geschreven in JavaScript met een code van slechts 5119 <a href="/wiki/Byte" title="Byte">bytes</a> (dat is vergelijkbaar met een middellang Wikipedia-artikel). Het was een inzending in de competitie van de <a href="/w/index.php?title=5k_organisatie&action=edit&redlink=1" class="new" title="5k organisatie (de pagina bestaat niet)">5k organisatie</a> in 2002. Deze organisatie had genoeg van te grote webpagina's vol met filmpjes en plaatjes, en daagde iedereen uit om een goede webpagina te maken die kleiner was dan 5 <a href="/wiki/Kilobyte" title="Kilobyte">kilobyte</a>. </p> <div class="mw-heading mw-heading2"><h2 id="Events_en_bubbling">Events en bubbling</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML-scripting&veaction=edit&section=4" title="Bewerk dit kopje: Events en bubbling" class="mw-editsection-visualeditor"><span>bewerken</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML-scripting&action=edit&section=4" title="De broncode bewerken van de sectie: Events en bubbling"><span>brontekst bewerken</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>De interactiviteit die door HTML-scripts wordt geboden, is gebaseerd op het opvangen van gebeurtenissen (naar het Engels meestal <i>events</i> genoemd). Er zijn twee veroorzakers van <i>events</i>: de gebruiker en de browser. De <i>events</i> van de gebruiker worden veroorzaakt door <i>input</i> via muis en toetsenbord. De <i>events</i> van de browser zijn gerelateerd aan het ophalen van nieuwe documenten (bijvoorbeeld "het document is nu geladen" of "het document wordt nu afgesloten"). Zie ook <a href="/wiki/Lijst_van_HTML-events" title="Lijst van HTML-events">Lijst van HTML-events</a>. </p><p>De afzonderlijke elementen van een document kunnen gevoelig gemaakt worden voor de verschillende <i>events</i>. Op het moment dat zo'n <i>event</i> dan plaatsvindt, reageert het element door een taak uit te voeren die met de scripttaal is aangegeven. </p><p>Het begrip <i>bubbling</i> komt van pas in situaties waar een element van het document gelegen is in een ander element. Als de gebruiker klikt op een plaatje dat in een tabel staat, is dat dan een klik op het plaatje of een klik op de tabel? Het is in eerste instantie een klik op het plaatje, maar de klik wordt doorgegeven aan alle bovengelegen (<i>parent</i>) elementen. Dat proces van doorgeven heet <i>bubbling</i>. In het geval dat deze <i>bubbling</i> ongewenst is, kan het met code worden gestopt. </p> <div class="mw-heading mw-heading2"><h2 id="Sandbox_security_model">Sandbox security model</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML-scripting&veaction=edit&section=5" title="Bewerk dit kopje: Sandbox security model" class="mw-editsection-visualeditor"><span>bewerken</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML-scripting&action=edit&section=5" title="De broncode bewerken van de sectie: Sandbox security model"><span>brontekst bewerken</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>HTML-scripts staan in documenten die meestal van het internet worden binnengehaald. Om de gebruiker te beschermen tegen ongewenste code, hebben zulke scripts slechts beperkte rechten. Ze mogen scripts bijvoorbeeld niets op de <a href="/wiki/Harde_schijf" title="Harde schijf">harde schijf</a> van de gebruiker lezen of aanpassen, zijn netwerkvoorzieningen alleen indirect beschikbaar en geldt wat de browser en webpagina's zelf betreft het "same origin" beginsel. Dit is belangrijk, omdat de gebruikte talen wel volledige <a href="/wiki/Programmeertaal" title="Programmeertaal">programmeertalen</a> zijn. Als zelfstandig programma hebben ze voldoende mogelijkheden om bestanden te lezen en aan te passen. Een dergelijke bescherming wordt een <i>sandbox</i> (zandbak) genoemd: de scripts krijgen een terrein toegewezen waar ze geen kwaad kunnen. Ook <a href="/wiki/Plug-in" title="Plug-in">plug-ins</a> die bij browsers kunnen worden geïnstalleerd draaien in zo'n <i>sandbox</i>. De meeste veiligheidsproblemen van browsers hebben te maken met lekken in deze <i>sandbox</i>. </p> <div class="mw-heading mw-heading2"><h2 id="Zie_ook">Zie ook</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=HTML-scripting&veaction=edit&section=6" title="Bewerk dit kopje: Zie ook" class="mw-editsection-visualeditor"><span>bewerken</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=HTML-scripting&action=edit&section=6" title="De broncode bewerken van de sectie: Zie ook"><span>brontekst bewerken</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/Floater_(HTML)" title="Floater (HTML)">Floater (HTML)</a></li></ul> <style data-mw-deduplicate="TemplateStyles:r67837862">.mw-parser-output .navigatie{position:relative;clear:both;overflow:auto;margin:1em auto -0.5em;padding:2px;background-color:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);text-align:center;font-size:87%}.mw-parser-output .navigatie-bewerken{margin-left:0.5em}.mw-parser-output .navigatie-bewerken .mw-ui-icon::before{background-size:0.9em}.mw-parser-output .navigatie-afb-links,.mw-parser-output .navigatie-afb-rechts{position:absolute}.mw-parser-output .navigatie-afb-rechts{right:2px}.mw-parser-output .navigatie-afb-groot{float:right;padding-left:0.5em}.mw-parser-output .navigatie-titel{background-color:#ddeef8;padding:2px 5.5em;font-weight:bold}.mw-parser-output .navigatie-inhoud{padding:0.5em}.mw-parser-output .navigatie-inhoud p:first-child{margin:0}.mw-parser-output .navigatie div[style*="background-color"],.mw-parser-output .navigatie div[style*="background"]{color:inherit}@media screen{html.skin-theme-clientpref-night .mw-parser-output .navigatie-titel{background-color:var(--background-color-interactive,#eaecf0)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navigatie-titel{background-color:var(--background-color-interactive,#eaecf0)!important}}</style> <div class="navigatie" role="navigation" aria-labelledby="Webdesign"> <div class="navigatie-afb-links noviewer"><div class="navigatie-bewerken show-autoconfirmed nomobile"><span class="nowrap skin-invert-image"><span typeof="mw:File"><a href="/wiki/Sjabloon:Navigatie_webdesign" title="Sjabloon:Navigatie webdesign"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c4/OOjs_UI_icon_article-ltr.svg/16px-OOjs_UI_icon_article-ltr.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c4/OOjs_UI_icon_article-ltr.svg/24px-OOjs_UI_icon_article-ltr.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c4/OOjs_UI_icon_article-ltr.svg/32px-OOjs_UI_icon_article-ltr.svg.png 2x" data-file-width="20" data-file-height="20" /></a></span> · <span typeof="mw:File"><a href="https://en.wikipedia.org/wiki/nl:Overleg_sjabloon:Navigatie_webdesign" title="Overleg sjabloon"><img alt="Overleg sjabloon" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/40/OOjs_UI_icon_speechBubbles-ltr.svg/16px-OOjs_UI_icon_speechBubbles-ltr.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/40/OOjs_UI_icon_speechBubbles-ltr.svg/24px-OOjs_UI_icon_speechBubbles-ltr.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/40/OOjs_UI_icon_speechBubbles-ltr.svg/32px-OOjs_UI_icon_speechBubbles-ltr.svg.png 2x" data-file-width="20" data-file-height="20" /></a></span> · <span typeof="mw:File"><a href="//nl.wikipedia.org/w/index.php?title=Sjabloon:Navigatie_webdesign&action=edit" title="Sjabloon bewerken"><img alt="Sjabloon bewerken" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr.svg/16px-OOjs_UI_icon_edit-ltr.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr.svg/24px-OOjs_UI_icon_edit-ltr.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr.svg/32px-OOjs_UI_icon_edit-ltr.svg.png 2x" data-file-width="20" data-file-height="20" /></a></span></span></div></div> <div id="Webdesign" class="navigatie-titel"><a href="/wiki/Webdesign" title="Webdesign">Webdesign</a></div> <div class="navigatie-inhoud"> <style data-mw-deduplicate="TemplateStyles:r67785531">.mw-parser-output .navigatie-tabel{margin:0 auto 0 auto;text-align:left}.mw-parser-output .navigatie-tabel .links{text-align:right}.mw-parser-output .navigatie-tabel .rechts{padding-left:0.5em}@media screen and (max-width:640px){.mw-parser-output .navigatie-tabel tr{display:grid;grid-template-columns:1fr;width:100%;margin-bottom:0.5em}.mw-parser-output .navigatie-tabel tr:last-of-type{margin-bottom:0}.mw-parser-output .navigatie-tabel .links{text-align:unset}.mw-parser-output .navigatie-tabel .rechts{padding:unset}}</style><table class="navigatie-tabel vatop" cellpadding="0" cellspacing="0" style=""><tbody><tr><td class="links" style=""><b><a href="/wiki/Opmaaktaal" title="Opmaaktaal">Opmaaktaal</a>:</b></td><td class="rechts"><a href="/wiki/HyperText_Markup_Language" title="HyperText Markup Language">HTML</a> · <a href="/wiki/HTML5" title="HTML5">HTML5</a> · <a href="/wiki/Extensible_Markup_Language" title="Extensible Markup Language">XML</a> · <a href="/wiki/Extensible_HyperText_Markup_Language" title="Extensible HyperText Markup Language">XHTML</a> · <a href="/wiki/Compact_HTML" title="Compact HTML">Compact HTML</a> · <a href="/wiki/Wireless_Markup_Language" title="Wireless Markup Language">WML</a> · <a href="/wiki/XHTML_Basic" title="XHTML Basic">XHTML Basic</a></td></tr><tr><td class="links"><b>Design:</b></td><td class="rechts"><a href="/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a> · <a href="/wiki/XSL_Formatting_Objects" title="XSL Formatting Objects">XSL-FO</a> · <a href="/wiki/Extensible_Stylesheet_Language_Transformations" title="Extensible Stylesheet Language Transformations">XSLT</a></td></tr><tr><td class="links"><b>Interactie:</b></td><td class="rechts"><a href="/wiki/Document_Object_Model" title="Document Object Model">Document Object Model</a> · <a href="/wiki/HTML-event" title="HTML-event">event</a> · <a class="mw-selflink selflink">scripting</a> · <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> · <a href="/wiki/Asynchronous_JavaScript_and_XML" title="Asynchronous JavaScript and XML">AJAX</a> · <a href="/wiki/Dynamic_HTML" title="Dynamic HTML">dynamic HTML</a></td></tr><tr><td class="links"><b>Referentie:</b></td><td class="rechts"><a href="/wiki/Lijst_van_HTML-kleuren" title="Lijst van HTML-kleuren">HTML-kleuren</a> · <a href="/wiki/HTML-element" title="HTML-element">HTML-tags</a> · <a href="/wiki/Lijst_van_HTML-entiteiten" title="Lijst van HTML-entiteiten">HTML-entiteiten</a> · <a href="/wiki/Lijst_van_HTML-events" title="Lijst van HTML-events">HTML-events</a></td></tr><tr><td class="links"><b>Details:</b></td><td class="rechts"><a href="/wiki/Browser_sniffing" title="Browser sniffing">browser sniffing</a> · <a href="/wiki/Useragent" title="Useragent">useragent</a> · <a href="/wiki/Cookie_(internet)" title="Cookie (internet)">(magic) cookie</a> · <a href="/wiki/Metatag" title="Metatag">metatag</a> · <a href="/wiki/Document_type_definition" title="Document type definition">DTD</a> · <a href="/wiki/Broodkruimelnavigatie" title="Broodkruimelnavigatie">broodkruimelnavigatie</a> · <a href="/wiki/Inline_image" title="Inline image">inline image</a> · <a href="/wiki/Java-applet" title="Java-applet">Java-applet</a> · <a href="/wiki/Adobe_Flash" title="Adobe Flash">Adobe Flash</a> · <a href="/wiki/HTML-formulier" title="HTML-formulier">HTML-formulier</a> · <a href="/wiki/Favicon" title="Favicon">favicon</a> · <a href="/wiki/Frame_(HTML)" title="Frame (HTML)">frames</a> · <a href="/wiki/Scalable_Vector_Graphics" title="Scalable Vector Graphics">SVG</a> · <a href="/wiki/Web_Accessibility_Initiative" title="Web Accessibility Initiative">WAI</a></td></tr><tr><td class="links"><span class="nowrap"><b>Editor (code):</b></span></td><td class="rechts"><a href="/wiki/Amaya" title="Amaya">Amaya</a> · <a href="/wiki/Bluefish" title="Bluefish">Bluefish</a> · <a href="/wiki/Quanta_Plus" title="Quanta Plus">Quanta Plus</a> · <a href="/wiki/Notepad%2B%2B" title="Notepad++">Notepad++</a></td></tr><tr><td class="links"><span class="nowrap"><b>Editor (<a href="/wiki/Wysiwyg" title="Wysiwyg">wysiwyg</a>):</b></span></td><td class="rechts"><a href="/wiki/Adobe_Dreamweaver" title="Adobe Dreamweaver">Dreamweaver</a> · <a href="/wiki/BlueGriffon" title="BlueGriffon">BlueGriffon</a> · <a href="/wiki/KompoZer" title="KompoZer">KompoZer</a> · <a href="/wiki/Microsoft_FrontPage" title="Microsoft FrontPage">FrontPage</a> · <a href="/wiki/Microsoft_Expression_Web" title="Microsoft Expression Web">Expression Web</a> · <a href="/wiki/Nvu_(webpagina-editor)" title="Nvu (webpagina-editor)">Nvu</a> · <a href="/wiki/SeaMonkey" title="SeaMonkey">SeaMonkey Composer</a></td></tr><tr><td class="links"><b>Verwant:</b></td><td class="rechts"><a href="/wiki/Webdevelopment" title="Webdevelopment">webdevelopment</a> · <a href="/wiki/Wereldwijd_web" title="Wereldwijd web">wereldwijd web</a> · <a href="/wiki/Webbrowser" title="Webbrowser">webbrowser</a> · <a href="/wiki/Webserver" title="Webserver">webserver</a> · <a href="/wiki/Grafisch_programma" title="Grafisch programma">grafisch programma</a> · <a href="/wiki/Teksteditor" title="Teksteditor">teksteditor</a> · <a href="/wiki/HTML-editor" title="HTML-editor">HTML-editor</a></td></tr></tbody></table> </div></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Overgenomen van "<a dir="ltr" href="https://nl.wikipedia.org/w/index.php?title=HTML-scripting&oldid=64484813">https://nl.wikipedia.org/w/index.php?title=HTML-scripting&oldid=64484813</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Categorie:Alles" title="Categorie:Alles">Categorieën</a>: <ul><li><a href="/wiki/Categorie:HTML" title="Categorie:HTML">HTML</a></li><li><a href="/wiki/Categorie:JavaScript" title="Categorie:JavaScript">JavaScript</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> Deze pagina is voor het laatst bewerkt op 13 jun 2023 om 20:03.</li> <li id="footer-info-copyright">De tekst is beschikbaar onder de licentie <a rel="nofollow" class="external text" href="//creativecommons.org/licenses/by-sa/4.0/deed.nl">Creative Commons Naamsvermelding/Gelijk delen</a>, er kunnen aanvullende voorwaarden van toepassing zijn. Zie de <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use/nl">gebruiksvoorwaarden</a> voor meer informatie.<br /> Wikipedia® is een geregistreerd handelsmerk van de <a rel="nofollow" class="external text" href="https://www.wikimediafoundation.org">Wikimedia Foundation, Inc.</a>, een organisatie zonder winstoogmerk.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacybeleid</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia">Over Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:Algemeen_voorbehoud">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Gedragscode</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Ontwikkelaars</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/nl.wikipedia.org">Statistieken</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookieverklaring</a></li> <li id="footer-places-mobileview"><a href="//nl.m.wikipedia.org/w/index.php?title=HTML-scripting&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobiele weergave</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-57488d5c7d-mqx48","wgBackendResponseTime":123,"wgPageParseReport":{"limitreport":{"cputime":"0.054","walltime":"0.074","ppvisitednodes":{"value":402,"limit":1000000},"postexpandincludesize":{"value":12178,"limit":2097152},"templateargumentsize":{"value":5614,"limit":2097152},"expansiondepth":{"value":10,"limit":100},"expensivefunctioncount":{"value":1,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":2004,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 40.736 1 Sjabloon:Navigatie_webdesign","100.00% 40.736 1 -total"," 87.15% 35.502 1 Sjabloon:Navigatie"," 35.85% 14.603 1 Sjabloon:Navigatie/Tabel"," 10.22% 4.163 1 Sjabloon:Bewerklinks"," 5.33% 2.173 2 Sjabloon:Nowrap"]},"cachereport":{"origin":"mw-web.eqiad.main-67876799fc-d7g95","timestamp":"20241127161342","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"HTML-scripting","url":"https:\/\/nl.wikipedia.org\/wiki\/HTML-scripting","sameAs":"http:\/\/www.wikidata.org\/entity\/Q2109265","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q2109265","author":{"@type":"Organization","name":"Bijdragers aan Wikimedia-projecten"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2005-04-06T19:39:23Z","dateModified":"2023-06-13T19:03:58Z"}</script> </body> </html>