CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr" class="no-js"> <head> <meta charset="utf-8" /> <title>devel:javascript [DokuWiki]</title> <meta name="generator" content="DokuWiki"/> <meta name="theme-color" content="#008800"/> <meta name="robots" content="index,follow"/> <meta name="keywords" content="devel,javascript"/> <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="DokuWiki"/> <link rel="start" href="/"/> <link rel="contents" href="/devel:javascript?do=index" title="Sitemap"/> <link rel="manifest" href="/lib/exe/manifest.php"/> <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php"/> <link rel="alternate" type="application/rss+xml" title="Current namespace" href="/feed.php?mode=list&ns=devel"/> <link rel="edit" title="Edit this page" href="/devel:javascript?do=edit"/> <link rel="alternate" type="text/html" title="Plain HTML" href="/_export/xhtml/devel:javascript"/> <link rel="alternate" type="text/plain" title="Wiki Markup" href="/_export/raw/devel:javascript"/> <link rel="canonical" href="https://www.dokuwiki.org/devel:javascript"/> <link rel="stylesheet" href="/lib/exe/css.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e"/> <link rel="alternate" hreflang="ja" href="https://www.dokuwiki.org/ja:devel:javascript"/> <link rel="alternate" hreflang="ru" href="https://www.dokuwiki.org/ru:devel:javascript"/> <link rel="alternate" hreflang="x-default" href="https://www.dokuwiki.org/devel:javascript"/> <script >var NS='devel';var JSINFO = {"plugins":{"edittable":{"default columnwidth":""}},"id":"devel:javascript","namespace":"devel","ACT":"show","useHeadingNavigation":0,"useHeadingContent":0};(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer="defer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" defer="defer"></script> <script src="/lib/exe/js.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e&lang=en" defer="defer"></script> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/lib/tpl/dokuwiki/images/favicon.ico" /> <link rel="apple-touch-icon" href="/lib/tpl/dokuwiki/images/apple-touch-icon.png" /> <meta name="verify-v1" content="OVxl3gsCv2MhZqh1cBQyl0JytWXSwXMjyvwc+4w3WtA=" /> <meta name="google-site-verification" content="YhTVK69hW94ZXUtc2zSLPxTkZKbZIn0zK67mz5WQB-E" />  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83791-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83791-1', { 'anonymize_ip': true }); </script> </head> <body> <div id="dokuwiki__site"><div id="dokuwiki__top" class="site dokuwiki mode_show tpl_dokuwiki showSidebar hasSidebar">  <header id="dokuwiki__header"><div class="pad group"> <div class="headings group"> <ul class="a11y skip"> <li><a href="#dokuwiki__content">skip to content</a></li> </ul> <h1 class="logo"><a href="/start" accesskey="h" title="Home [h]"><img src="/lib/tpl/dokuwiki/images/logo.png" width="64" height="64" alt="" /><span>DokuWiki</span></a></h1> <p class="claim">It's better when it's simple</p> </div> <div class="tools group">  <div id="dokuwiki__usertools"> <h3 class="a11y">User Tools</h3> <ul> <li class="action login"><a href="/devel:javascript?do=login&sectok=" title="Log In" rel="nofollow"><span>Log In</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 17.25V14H3v-4h7V6.75L15.25 12 10 17.25M8 2h9a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-4h2v4h9V4H8v4H6V4a2 2 0 0 1 2-2z"/></svg></a></li> </ul> </div>  <div id="dokuwiki__sitetools"> <h3 class="a11y">Site Tools</h3> <form action="/start" method="get" role="search" class="search doku_form" id="dw__search" accept-charset="utf-8"><input type="hidden" name="do" value="search" /><input type="hidden" name="id" value="devel:javascript" /><div class="no"><input name="q" type="text" class="edit" title="[F]" accesskey="f" placeholder="Search" autocomplete="on" id="qsearch__in" value="" /><button value="1" type="submit" title="Search">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form> <div class="mobileTools"> <form action="/doku.php" method="get" accept-charset="utf-8"><div class="no"><input type="hidden" name="id" value="devel:javascript" /><select name="do" class="edit quickselect" title="Tools"><option value="">Tools</option><optgroup label="Page Tools"><option value="edit">Edit this page</option><option value="revisions">Old revisions</option><option value="backlink">Backlinks</option></optgroup><optgroup label="Site Tools"><option value="recent">Recent Changes</option><option value="media">Media Manager</option><option value="index">Sitemap</option></optgroup><optgroup label="User Tools"><option value="login">Log In</option></optgroup></select><button type="submit">></button></div></form> </div> <ul> <li class="action recent"><a href="/devel:javascript?do=recent" title="Recent Changes [r]" rel="nofollow" accesskey="r">Recent Changes</a></li><li class="action media"><a href="/devel:javascript?do=media&ns=devel" title="Media Manager" rel="nofollow">Media Manager</a></li><li class="action index"><a href="/devel:javascript?do=index" title="Sitemap [x]" rel="nofollow" accesskey="x">Sitemap</a></li> </ul> </div> </div>  <div class="breadcrumbs"> <div class="trace"><span class="bchead">Trace:</span> <span class="bcsep">•</span> <span class="curid"><bdi><a href="/devel:javascript" class="breadcrumbs" title="devel:javascript">javascript</a></bdi></span></div> </div> <hr class="a11y" /> </div></header> <div class="wrapper group">  <nav id="dokuwiki__aside" aria-label="Sidebar"><div class="pad aside include group"> <h3 class="toggle">Sidebar</h3> <div class="content"><div class="group"> <div class="plugin_translation is-dropdown"><span class="title">Translations of this page<sup><a href="/localization" class="wikilink1" title="localization" data-wiki-id="localization">?</a></sup>: </span><ul><li class="span"><span class="wikilink1" title="English">English (en)</span></li><li class="a"><a class="wikilink2" title="|العربية" href="/ar:devel:javascript">|العربية (ar)</a></li><li class="a"><a class="wikilink2" title="Català" href="/ca:devel:javascript">Català (ca)</a></li><li class="a"><a class="wikilink2" title="Česky" href="/cs:devel:javascript">Česky (cs)</a></li><li class="a"><a class="wikilink2" title="Dansk" href="/da:devel:javascript">Dansk (da)</a></li><li class="a"><a class="wikilink2" title="Deutsch" href="/de:devel:javascript">Deutsch (de)</a></li><li class="a"><a class="wikilink2" title="Ελληνικά" href="/el:devel:javascript">Ελληνικά (el)</a></li><li class="a"><a class="wikilink2" title="Esperanto" href="/eo:devel:javascript">Esperanto (eo)</a></li><li class="a"><a class="wikilink2" title="Español" href="/es:devel:javascript">Español (es)</a></li><li class="a"><a class="wikilink2" title="فارسی" href="/fa:devel:javascript">فارسی (fa)</a></li><li class="a"><a class="wikilink2" title="Français" href="/fr:devel:javascript">Français (fr)</a></li><li class="a"><a class="wikilink2" title="עברית" href="/he:devel:javascript">עברית (he)</a></li><li class="a"><a class="wikilink2" title="Magyar" href="/hu:devel:javascript">Magyar (hu)</a></li><li class="a"><a class="wikilink2" title="Italiano" href="/it:devel:javascript">Italiano (it)</a></li><li class="a"><a class="wikilink1" title="日本語" href="/ja:devel:javascript">日本語 (ja)</a></li><li class="a"><a class="wikilink2" title="한국어" href="/ko:devel:javascript">한국어 (ko)</a></li><li class="a"><a class="wikilink2" title="Lietuvių Kalba" href="/lt:devel:javascript">Lietuvių Kalba (lt)</a></li><li class="a"><a class="wikilink2" title="Nederlands" href="/nl:devel:javascript">Nederlands (nl)</a></li><li class="a"><a class="wikilink2" title="Norsk" href="/no:devel:javascript">Norsk (no)</a></li><li class="a"><a class="wikilink2" title="Polski" href="/pl:devel:javascript">Polski (pl)</a></li><li class="a"><a class="wikilink2" title="Português" href="/pt-br:devel:javascript">Português (pt-br)</a></li><li class="a"><a class="wikilink2" title="Română" href="/ro:devel:javascript">Română (ro)</a></li><li class="a"><a class="wikilink1" title="Русский" href="/ru:devel:javascript">Русский (ru)</a></li><li class="a"><a class="wikilink2" title="Српски Језик" href="/sr:devel:javascript">Српски Језик (sr)</a></li><li class="a"><a class="wikilink2" title="Svenska" href="/sv:devel:javascript">Svenska (sv)</a></li><li class="a"><a class="wikilink2" title="ไทย" href="/th:devel:javascript">ไทย (th)</a></li><li class="a"><a class="wikilink2" title="Українська" href="/uk:devel:javascript">Українська (uk)</a></li><li class="a"><a class="wikilink2" title="中文" href="/zh:devel:javascript">中文 (zh)</a></li><li class="a"><a class="wikilink2" title="繁體中文" href="/zh-tw:devel:javascript">繁體中文 (zh-tw)</a></li></ul></div> <p> <strong>Learn about DokuWiki</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/features" class="wikilink1" title="features" data-wiki-id="features">Features</a> & <a href="/blogroll" class="wikilink1" title="blogroll" data-wiki-id="blogroll">reviews</a> </div> </li> <li class="level1"><div class="li"> <a href="/install" class="wikilink1" title="install" data-wiki-id="install">Installation guide</a></div> </li> <li class="level1"><div class="li"> <a href="/manual" class="wikilink1" title="manual" data-wiki-id="manual">User manual</a> & <a href="/wiki:syntax" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">syntax</a></div> </li> <li class="level1"><div class="li"> <a href="/changes" class="wikilink1" title="changes" data-wiki-id="changes">Release notes</a></div> </li> <li class="level1"><div class="li"> <a href="/faq" class="wikilink1" title="faq" data-wiki-id="faq">FAQ</a></div> </li> </ul> <p> <strong>Advanced Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/extensions" class="wikilink1" title="extensions" data-wiki-id="extensions">Extensions</a></div> </li> <li class="level1"><div class="li"> <a href="/development" class="wikilink1" title="development" data-wiki-id="development">Development manual</a></div> </li> </ul> <p> <strong>Corporate Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/faq:support" class="wikilink1" title="faq:support" data-wiki-id="faq:support">Get support</a></div> </li> <li class="level1"><div class="li"> <a href="/donate" class="wikilink1" title="donate" data-wiki-id="donate">Donations</a></div> </li> </ul> <p> <strong>Our Community</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/teams:getting_involved" class="wikilink1" title="teams:getting_involved" data-wiki-id="teams:getting_involved">Get involved</a></div> </li> <li class="level1"><div class="li"> <a href="/dokuinstall" class="wikilink1" title="dokuinstall" data-wiki-id="dokuinstall">Users</a></div> </li> <li class="level1"><div class="li"> <a href="http://forum.dokuwiki.org" class="urlextern" title="http://forum.dokuwiki.org">User forum</a></div> </li> <li class="level1"><div class="li"> <a href="/mailinglist" class="wikilink1" title="mailinglist" data-wiki-id="mailinglist">Development mailinglist</a></div> </li> </ul> <hr /> <p> Follow us on <a href="https://phpc.social/@dokuwiki" class="urlextern" title="https://phpc.social/@dokuwiki">Mastodon</a> and other <a href="/social" class="wikilink1" title="social" data-wiki-id="social">social networks</a>. </p> <p> <a href="/privacy" class="wikilink1" title="privacy" data-wiki-id="privacy">Our Privacy Policy</a> </p> </div></div> </div></nav>  <main id="dokuwiki__content"><div class="pad group"> <div class="pageId"><span>devel:javascript</span></div> <div class="page group">   <div id="dw__toc" class="dw__toc"> <h3 class="toggle">Table of Contents</h3> <div> <ul class="toc"> <li class="level1"><div class="li"><a href="#javascript">JavaScript</a></div> <ul class="toc"> <li class="level2"><div class="li"><a href="#javascript_loading">JavaScript Loading</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#all_js_is_delivered_as_one_file">All JS is delivered as one file</a></div></li> <li class="level3"><div class="li"><a href="#js_caching">JS Caching</a></div></li> <li class="level3"><div class="li"><a href="#js_loading_order">JS Loading Order</a></div></li> <li class="level3"><div class="li"><a href="#how_to_define_your_own_scripts">How to define your own scripts?</a></div></li> <li class="level3"><div class="li"><a href="#deferred_loading">Deferred Loading</a></div></li> <li class="level3"><div class="li"><a href="#include_syntax">Include Syntax</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#coding_guidelines">Coding Guidelines</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#validate_your_code">Validate your Code</a></div></li> <li class="level3"><div class="li"><a href="#use_unobtrusive_javascript">Use unobtrusive JavaScript</a></div></li> <li class="level3"><div class="li"><a href="#avoid_inappropriate_mixing">Avoid Inappropriate Mixing</a></div></li> <li class="level3"><div class="li"><a href="#using_ids">Using IDs</a></div></li> <li class="level3"><div class="li"><a href="#inline_scripts">Inline scripts</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#jquery">jQuery</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#no">No $()</a></div></li> <li class="level3"><div class="li"><a href="#prefix_jquery_object_variables">Prefix jQuery object variables</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#dokuwiki_javascript_environment">DokuWiki JavaScript Environment</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#predefined_global_variables">Predefined Global Variables</a></div></li> <li class="level3"><div class="li"><a href="#jsinfo">JSINFO</a></div></li> </ul></li> </ul></li> </ul> </div> </div>  <h1 class="sectionedit1" id="javascript">JavaScript</h1> <div class="level1"> <p> DokuWiki makes use of <a href="https://en.wikipedia.org/wiki/JavaScript" class="interwiki iw_wp" title="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a> to enhance the user experience. Like for <a href="/devel:css" class="wikilink1" title="devel:css" data-wiki-id="devel:css">stylesheets</a> all JavaScript files are delivered through a single dispatcher to minimize HTTP requests, for caching and <a href="/config:compress" class="wikilink1" title="config:compress" data-wiki-id="config:compress">compression</a>. </p> <p> This page gives you an overview how JavaScript is loaded from DokuWiki core, <a href="/plugins" class="wikilink1" title="plugins" data-wiki-id="plugins">plugins</a> and <a href="/template" class="wikilink1" title="template" data-wiki-id="template">templates</a>. It also gives some info about event handling and coding style when writing JavaScript for use in DokuWiki. </p> </div> <div class="secedit editbutton_section editbutton_1"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[JavaScript] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="javascript" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1-485" /><button type="submit" title="JavaScript">Edit</button></div></form></div> <h2 class="sectionedit2" id="javascript_loading">JavaScript Loading</h2> <div class="level2"> </div> <div class="secedit editbutton_section editbutton_2"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[JavaScript Loading] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="javascript_loading" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="486-517" /><button type="submit" title="JavaScript Loading">Edit</button></div></form></div> <h3 class="sectionedit3" id="all_js_is_delivered_as_one_file">All JS is delivered as one file</h3> <div class="level3"> <p> All JavaScript code is collected from all found files and concatenated as one block of code. It is then whitespace compressed (if <a href="/config:compress" class="wikilink1" title="config:compress" data-wiki-id="config:compress">compress</a> is enabled) and delivered as one file. As a live example you can view the JavaScript file that is in effect on this website <a href="https://www.dokuwiki.org/lib/exe/js.php" class="interwiki iw_this" title="https://www.dokuwiki.org/lib/exe/js.php">lib/exe/js.php</a>. </p> </div> <div class="secedit editbutton_section editbutton_3"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[All JS is delivered as one file] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="all_js_is_delivered_as_one_file" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="518-876" /><button type="submit" title="All JS is delivered as one file">Edit</button></div></form></div> <h3 class="sectionedit4" id="js_caching">JS Caching</h3> <div class="level3"> <p> This file will be cached in the DokuWiki cache at <code>[dokuwiki folder]/data/cache</code> and DokuWiki also instructs browsers to cache this file. So when you are developing new JavaScript, make sure to refresh those caches (hitting Shift-F5, Shift+CTRL+R or similar), whenever your script was updated. </p> </div> <div class="secedit editbutton_section editbutton_4"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[JS Caching] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="js_caching" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="877-1195" /><button type="submit" title="JS Caching">Edit</button></div></form></div> <h3 class="sectionedit5" id="js_loading_order">JS Loading Order</h3> <div class="level3"> <p> DokuWiki loads the JavaScript files from the following locations and in this order: </p> <ul> <li class="level1"><div class="li"> autogenerated JavaScript (language strings, config settings, <a href="/toolbar" class="wikilink1" title="toolbar" data-wiki-id="toolbar">toolbar</a>)</div> </li> <li class="level1"><div class="li"> <code>lib/scripts/*.js</code></div> </li> <li class="level1"><div class="li"> <code>lib/plugins/*/script.js</code></div> </li> <li class="level1"><div class="li"> <code>lib/tpl/<currenttemplate>/script.js</code></div> </li> <li class="level1"><div class="li"> <code>conf/userscript.js</code> (placed at the end of the entire code block)</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_5"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[JS Loading Order] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="js_loading_order" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1196-1561" /><button type="submit" title="JS Loading Order">Edit</button></div></form></div> <h3 class="sectionedit6" id="how_to_define_your_own_scripts">How to define your own scripts?</h3> <div class="level3"> <p> As you can see you can provide JavaScript with your <a href="/template" class="wikilink1" title="template" data-wiki-id="template">templates</a> and <a href="/plugins" class="wikilink1" title="plugins" data-wiki-id="plugins">plugins</a> (through a <code>script.js</code> file) and can define your own scripts in <code>conf/userscript.js</code> (just create this file if it does not yet exist). </p> </div> <div class="secedit editbutton_section editbutton_6"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[How to define your own scripts?] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="how_to_define_your_own_scripts" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1562-1828" /><button type="submit" title="How to define your own scripts?">Edit</button></div></form></div> <h3 class="sectionedit7" id="deferred_loading">Deferred Loading</h3> <div class="level3"> <p> All JavaScript is loaded with the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer" class="urlextern" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">defer</a> attribute. <a href="https://flaviocopes.com/javascript-async-defer/" class="urlextern" title="https://flaviocopes.com/javascript-async-defer/">Here's more information about deferred loading</a>. </p> <p> If you load JavaScript through other means than the recommended methods below and that JavaScript has dependencies on any DokuWiki provided code, you need to ensure it is deferred as well. This also means that you cannot use <code>document.write</code> that relies on DokuWiki-loaded scripts. </p> <p> From the 2020 Hogfather version onwards, all javascript must be load in a deferred way. To update your existing templates javascript to work in this version, you can add the <code>defer</code> attribute to the <code><script></code> tag. </p> <p> Temporary, the feature flag <a href="/config:defer_js" class="wikilink1" title="config:defer_js" data-wiki-id="config:defer_js">defer js</a> is available, which allows disabling. </p> </div> <div class="secedit editbutton_section editbutton_7"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Deferred Loading] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="deferred_loading" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1829-2680" /><button type="submit" title="Deferred Loading">Edit</button></div></form></div> <h3 class="sectionedit8" id="include_syntax">Include Syntax</h3> <div class="level3"> <p> DokuWiki's JavaScript dispatcher allows you to use special JavaScript comments to include other script files. This is useful for cases where usually only a single JavaScript file would be parsed, e.g. in templates or plugins. </p> <p> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> Included files are not checked for updates by the cache logic. You need to touch the master file for updating the cache. </p> <p> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> Includes are <strong>not</strong> supported inside included files to avoid any circular references. </p> <p> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> Includepath may only consist of letter,digit, underscore, “/” and “.”. </p> </div> <h4 id="include">include</h4> <div class="level4"> <pre class="code">/* DOKUWIKI:include somefile.js */</pre> <p> This syntax will include the given file where the comment is placed. The filename is relative to the file containing the include markup unless it starts with a slash which indicates an absolute <abbr title="Uniform Resource Locator">URL</abbr> path. </p> </div> <h4 id="include_once">include_once</h4> <div class="level4"> <pre class="code">/* DOKUWIKI:include_once common_library.js */</pre> <p> This syntax will include the given file where the comment is placed. The filename is relative to the file containing the include markup unless it starts with a slash which indicates an absolute <abbr title="Uniform Resource Locator">URL</abbr> path. </p> <p> The file will only be included if not a file of the same base name was previously loaded through the include_once statement. This name is shared over all script files (from all plugins), so you should use a meaningful file name. </p> <p> Using this statement makes sense if you write multiple independent <a href="/plugins" class="wikilink1" title="plugins" data-wiki-id="plugins">plugins</a> all using the same JavaScript library. Including it with <code>include_once</code> using the same basename will make sure the library is loaded only once even if multiple of your plugins are installed. </p> </div> <div class="secedit editbutton_section editbutton_8"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Include Syntax] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="include_syntax" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="2681-4293" /><button type="submit" title="Include Syntax">Edit</button></div></form></div> <h2 class="sectionedit9" id="coding_guidelines">Coding Guidelines</h2> <div class="level2"> <p> When writing JavaScript for the use within DokuWiki you should follow a few rules. Because of the nature of JavaScript, failing to do so might result in not only breaking your script but all scripts in DokuWiki. </p> </div> <div class="secedit editbutton_section editbutton_9"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Coding Guidelines] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="coding_guidelines" /><input type="hidden" name="codeblockOffset" value="2" /><input type="hidden" name="range" value="4294-4537" /><button type="submit" title="Coding Guidelines">Edit</button></div></form></div> <h3 class="sectionedit10" id="validate_your_code">Validate your Code</h3> <div class="level3"> <p> As mentioned above, DokuWiki will shrink the JavaScript code when the <a href="/config:compress" class="wikilink1" title="config:compress" data-wiki-id="config:compress">compress</a> option is enabled (which it is by default). To do this without introducing syntax errors, the JavaScript has to be checked more strictly than it might be when run uncompressed. </p> <p> To check your code you should use the <a href="http://www.jslint.com/" class="urlextern" title="http://www.jslint.com/">JSLint</a> online service. </p> <ul> <li class="level1"><div class="li"> debug your code with <a href="/config:compress" class="wikilink1" title="config:compress" data-wiki-id="config:compress">compress</a> disabled but</div> </li> <li class="level1"><div class="li"> verify your code still works with <a href="/config:compress" class="wikilink1" title="config:compress" data-wiki-id="config:compress">compress</a> enabled</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_10"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Validate your Code] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="validate_your_code" /><input type="hidden" name="codeblockOffset" value="2" /><input type="hidden" name="range" value="4538-5049" /><button type="submit" title="Validate your Code">Edit</button></div></form></div> <h3 class="sectionedit11" id="use_unobtrusive_javascript">Use unobtrusive JavaScript</h3> <div class="level3"> <p> Do not assume people have JavaScript enabled, when writing new DokuWiki functionality. Instead use JavaScript as enhancement of the user interface only, when JavaScript is not available your code should fallback to normal page reload based behavior. </p> <p> jQuery makes this very easy. </p> </div> <div class="secedit editbutton_section editbutton_11"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Use unobtrusive JavaScript] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="use_unobtrusive_javascript" /><input type="hidden" name="codeblockOffset" value="2" /><input type="hidden" name="range" value="5050-5369" /><button type="submit" title="Use unobtrusive JavaScript">Edit</button></div></form></div> <h3 class="sectionedit12" id="avoid_inappropriate_mixing">Avoid Inappropriate Mixing</h3> <div class="level3"> <p> The old way of doing things is to embed JavaScript directly in the <abbr title="HyperText Markup Language">HTML</abbr>. However, JavaScript and (X)<abbr title="HyperText Markup Language">HTML</abbr> shouldn't be mixed, and indeed with DokuWiki there are many cases where they <em>cannot</em> be mixed. Here are some examples of <strong>INAPPROPRIATE MIXING</strong><sup><a href="#fn__1" id="fnt__1" class="fn_top">1)</a></sup>: </p> <pre class="code html4strict"><span class="sc2"><<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a> <span class="kw3">onload</span><span class="sy0">=</span><span class="st0">"refreshPage()"</span>></span>   <span class="sc2"><<a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>some HTML<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>   <span class="sc2"><<a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a> <span class="kw3">language</span><span class="sy0">=</span><span class="st0">"JavaScript"</span>></span> doSomethingHere(); <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a>></span>   <span class="sc2"><<a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>more <span class="sc2"><<a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://example.com"</span> <span class="kw3">onclick</span><span class="sy0">=</span><span class="st0">"doSomethingElse()"</span>></span>HTML<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a>><<span class="sy0">/</span><a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>   <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></pre> <p> This isn't just a matter of philosophical purity: some of the JavaScript may not work. In the above example, it turns out that both DokuWiki and the <code><body></code> tag are trying to assign the page's <code>onload</code> handler to different JavaScript functions. Browsers cannot handle this conflict and the results are unpredictable. </p> <p> Strictly speaking, it is possible to embed JavaScript in your <abbr title="HyperText Markup Language">HTML</abbr>, but only if you know that the JavaScript has no conflict with DokuWiki. Because this requires knowledge of DokuWiki's implementation, and because DokuWiki's implementation can change, this is still not a good idea. It's wiser to be philosophically pure. </p> </div> <div class="secedit editbutton_section editbutton_12"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Avoid Inappropriate Mixing] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="avoid_inappropriate_mixing" /><input type="hidden" name="codeblockOffset" value="2" /><input type="hidden" name="range" value="5370-6696" /><button type="submit" title="Avoid Inappropriate Mixing">Edit</button></div></form></div> <h3 class="sectionedit13" id="using_ids">Using IDs</h3> <div class="level3"> <p> To modify a DOM object the JavaScript must be able to locate the object. The easiest way to locate the object is to give the associated <abbr title="HyperText Markup Language">HTML</abbr> tag an ID. This ID must be unique among all IDs on the page so that referencing this ID produces exactly the right DOM object. </p> <p> When you are producing your own <abbr title="HyperText Markup Language">HTML</abbr> (e.g. from a template or plugin) that should be accessed from JavaScript later, be sure that the ID does not conflict with an existing ID. In particular, be sure that it won't conflict with the IDs automatically assigned to section headers. The easiest way to ensure this is to use two adjacent underscores (<code>__</code>) in your ID. Because section IDs are always valid <a href="/pagename" class="wikilink1" title="pagename" data-wiki-id="pagename">pagenames</a>, they will never contain adjacent underscores. </p> </div> <div class="secedit editbutton_section editbutton_13"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Using IDs] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="using_ids" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="6697-7456" /><button type="submit" title="Using IDs">Edit</button></div></form></div> <h3 class="sectionedit14" id="inline_scripts">Inline scripts</h3> <div class="level3"> <p> As said before you should avoid mixing JavaScript and <abbr title="HyperText Markup Language">HTML</abbr>. However if you need to use inline JavaScript, you should use the <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=tpl_inlineScript&path=" class="interwiki plugin_xref plugin_xref_err" title="unknown definition">tpl_inlineScript()</a> method (<a href="/devel:develonly" class="wikilink1" title="devel:develonly" data-wiki-id="devel:develonly">develonly</a>). </p> <pre class="code php">tpl_inlineScript<span class="br0">(</span><span class="st_h">' alert("This is inline script code"); '</span><span class="br0">)</span><span class="sy0">;</span></pre> <p> Using this method will create the appropriate script tag including a nonce attribute if needed. </p> <p> If you need to add inline JavaScript to the <head> section you should write an <a href="/devel:action_plugins" class="wikilink1" title="devel:action_plugins" data-wiki-id="devel:action_plugins">action_plugin</a> and handle the <a href="/devel:event:tpl_metaheader_output" class="wikilink1" title="devel:event:tpl_metaheader_output" data-wiki-id="devel:event:tpl_metaheader_output">TPL_METAHEADER_OUTPUT</a> event. When you define only some variables see the <a href="#jsinfo" title="devel:javascript ↵" class="wikilink1">JSINFO</a> variable below. </p> </div> <div class="secedit editbutton_section editbutton_14"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Inline scripts] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="inline_scripts" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="7457-8098" /><button type="submit" title="Inline scripts">Edit</button></div></form></div> <h2 class="sectionedit15" id="jquery">jQuery</h2> <div class="level2"> <p> Since the October 2011 release “Angua”, DokuWiki ships with the jQuery and jQuery UI libraries. </p> <p> Please follow these coding conventions when working with jQuery in DokuWiki. Please also refer to our <a href="/devel:jqueryfaq" class="wikilink1" title="devel:jqueryfaq" data-wiki-id="devel:jqueryfaq">JQuery FAQ for Plugin Developers</a>. </p> </div> <div class="secedit editbutton_section editbutton_15"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[jQuery] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="jquery" /><input type="hidden" name="codeblockOffset" value="4" /><input type="hidden" name="range" value="8099-8372" /><button type="submit" title="jQuery">Edit</button></div></form></div> <h3 class="sectionedit16" id="no">No $()</h3> <div class="level3"> <p> jQuery is only used in compatibility mode. There is no <code>$()</code> method<sup><a href="#fn__2" id="fnt__2" class="fn_top">2)</a></sup>. Use the <code>jQuery()</code> method instead. </p> <p> Do not map <code>$()</code> to <code>jQuery()</code>, not even within your own (anonymous) functions. </p> </div> <div class="secedit editbutton_section editbutton_16"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[No $()] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="no" /><input type="hidden" name="codeblockOffset" value="4" /><input type="hidden" name="range" value="8373-8643" /><button type="submit" title="No $()">Edit</button></div></form></div> <h3 class="sectionedit17" id="prefix_jquery_object_variables">Prefix jQuery object variables</h3> <div class="level3"> <p> To make it clear that a variable contains an instance of the jQuery object all these variables should be prefixed by a <code>$</code> character: </p> <pre class="code javascript"><span class="kw1">var</span> $obj <span class="sy0">=</span> jQuery<span class="br0">(</span><span class="st0">'#some__id'</span><span class="br0">)</span><span class="sy0">;</span></pre> </div> <div class="secedit editbutton_section editbutton_17"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Prefix jQuery object variables] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="prefix_jquery_object_variables" /><input type="hidden" name="codeblockOffset" value="4" /><input type="hidden" name="range" value="8644-8882" /><button type="submit" title="Prefix jQuery object variables">Edit</button></div></form></div> <h2 class="sectionedit18" id="dokuwiki_javascript_environment">DokuWiki JavaScript Environment</h2> <div class="level2"> </div> <div class="secedit editbutton_section editbutton_18"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[DokuWiki JavaScript Environment] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="dokuwiki_javascript_environment" /><input type="hidden" name="codeblockOffset" value="5" /><input type="hidden" name="range" value="8883-8927" /><button type="submit" title="DokuWiki JavaScript Environment">Edit</button></div></form></div> <h3 class="sectionedit19" id="predefined_global_variables">Predefined Global Variables</h3> <div class="level3"> <p> DokuWiki defines certain JavaScript variables for the use in your script: </p> <ul> <li class="level1"><div class="li"> <code>DOKU_BASE</code> – the full webserver path to the DokuWiki installation</div> </li> <li class="level1"><div class="li"> <code>DOKU_TPL</code> – the full webserver path to the used <a href="/template" class="wikilink1" title="template" data-wiki-id="template">Template</a></div> </li> <li class="level1 node"><div class="li"> <code>DOKU_COOKIE_PARAM</code> – parameters required to set similar cookies as in PHP </div> <ul> <li class="level2"><div class="li"> <code>path</code> – cookie path</div> </li> <li class="level2"><div class="li"> <code>secure</code> – whether secure cookie</div> </li> </ul> </li> <li class="level1"><div class="li"> <code>LANG</code> – <a href="/devel:localization#template_localization" class="wikilink1" title="devel:localization" data-wiki-id="devel:localization">an array of languagestrings</a></div> </li> <li class="level1"><div class="li"> <code>JSINFO</code> – an array of useful page info (see the section below)</div> </li> <li class="level1"><div class="li"> <code>NS</code> – $INFO['namespace'] passed through the function <code>tpl_metaheaders()</code></div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_19"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[Predefined Global Variables] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="predefined_global_variables" /><input type="hidden" name="codeblockOffset" value="5" /><input type="hidden" name="range" value="8928-9583" /><button type="submit" title="Predefined Global Variables">Edit</button></div></form></div> <h3 class="sectionedit20" id="jsinfo">JSINFO</h3> <div class="level3"> <p> DokuWiki passes the global <a href="/devel:environment#jsinfo" class="wikilink1" title="devel:environment" data-wiki-id="devel:environment">$JSINFO</a> to JavaScript (see <a href="http://www.freelists.org/post/dokuwiki/INFO,44" class="urlextern" title="http://www.freelists.org/post/dokuwiki/INFO,44">mailinglist discussion</a>). This variable is an associative array usually containing the keys: </p> <ul> <li class="level1"><div class="li"> <code>id</code> – the current page's ID</div> </li> <li class="level1"><div class="li"> <code>namespace</code> – the current namespace.</div> </li> </ul> <p> And after 2018-04-05: </p> <ul> <li class="level1"><div class="li"> <code>ACT</code> – the current mode</div> </li> <li class="level1"><div class="li"> <code>useHeadingNavigation</code> – whether to use the first title for Navigation links (the former global constant <code>DOKU_UHN</code> has been deprecated)</div> </li> <li class="level1"><div class="li"> <code>useHeadingContent</code> – whether to use the first title for Content links (the former global constant <code>DOKU_UHC</code> has been deprecated)</div> </li> </ul> <p> Other keys can easily be added from within PHP code. The usual way is using an <a href="/devel:action_plugins" class="wikilink1" title="devel:action_plugins" data-wiki-id="devel:action_plugins">action plugin</a> like this: </p> <pre class="code php"><span class="kw2">public</span> <span class="kw2">function</span> register<span class="br0">(</span>EventHandler <span class="re0">$controller</span><span class="br0">)</span> <span class="br0">{</span> <span class="re0">$controller</span><span class="sy0">-></span><span class="me1">register_hook</span><span class="br0">(</span><span class="st_h">'DOKUWIKI_STARTED'</span><span class="sy0">,</span> <span class="st_h">'AFTER'</span><span class="sy0">,</span> <span class="re0">$this</span><span class="sy0">,</span> <span class="st_h">'addUser'</span><span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">public</span> <span class="kw2">function</span> addUser<span class="br0">(</span>Event <span class="re0">$event</span><span class="sy0">,</span> <span class="re0">$param</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw2">global</span> <span class="re0">$JSINFO</span><span class="sy0">,</span> <span class="re0">$INPUT</span><span class="sy0">;</span> <span class="re0">$JSINFO</span><span class="br0">[</span><span class="st_h">'user'</span><span class="br0">]</span> <span class="sy0">=</span> <span class="re0">$INPUT</span><span class="sy0">-></span><span class="me1">server</span><span class="sy0">-></span><span class="me1">str</span><span class="br0">(</span><span class="st_h">'REMOTE_USER'</span><span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span></pre> <p> If you want to make sure that your plugin's data don't interfere with other plugins or DokuWiki itself consider using <code>plugin_<pluginName></code> as prefix/top-level key. </p> <p> The contents of the <code>$JSINFO</code> php variable are sent to the browser in the <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=tpl_metaheaders&path=" class="interwiki plugin_xref" title="view definition for tpl_metaheaders()">tpl_metaheaders()</a> function which is called from within the used <a href="/devel:templates" class="wikilink1" title="devel:templates" data-wiki-id="devel:templates">template</a>. </p> <p> If you need JSINFO in the <a href="/media_manager" class="wikilink1" title="media_manager" data-wiki-id="media_manager">pop-up media manager</a> or in the <a href="/devel:templates:detail.php" class="wikilink1" title="devel:templates:detail.php" data-wiki-id="devel:templates:detail.php">media detail page</a> you have to use respectively <a href="/devel:event:mediamanager_started" class="wikilink1" title="devel:event:mediamanager_started" data-wiki-id="devel:event:mediamanager_started">MEDIAMANAGER_STARTED</a> or <a href="/devel:event:detail_started" class="wikilink1" title="devel:event:detail_started" data-wiki-id="devel:event:detail_started">DETAIL_STARTED</a> in stead of <a href="/devel:event:dokuwiki_started" class="wikilink1" title="devel:event:dokuwiki_started" data-wiki-id="devel:event:dokuwiki_started">DOKUWIKI_STARTED</a>. </p> <p> Also see: Javascript in <a href="/devel:plugin_programming_tips#adding_javascript" class="wikilink1" title="devel:plugin_programming_tips" data-wiki-id="devel:plugin_programming_tips">Tips for Programming Plugins</a> </p> </div> <div class="secedit editbutton_section editbutton_20"><form class="button btn_secedit" method="post" action="/devel:javascript"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1728142733" /><input type="hidden" name="summary" value="[JSINFO] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="jsinfo" /><input type="hidden" name="codeblockOffset" value="5" /><input type="hidden" name="range" value="9584-" /><button type="submit" title="JSINFO">Edit</button></div></form></div><div class="footnotes"> <div class="fn"><sup><a href="#fnt__1" id="fn__1" class="fn_bot">1)</a></sup> <div class="content">Please note as well that there is no <code>language</code> attribute of the <code>script</code> tag! Instead use <code>type=“text/javascript”</code> to be standards compliant.</div></div> <div class="fn"><sup><a href="#fnt__2" id="fn__2" class="fn_bot">2)</a></sup> <div class="content">it might be defined but will <strong>not</strong> do what you expect</div></div> </div>  </div> <div class="docInfo"><bdi>devel/javascript.txt</bdi> · Last modified: <time datetime="2024-10-05T17:38:53+0200">2024-10-05 17:38</time> by <bdi>michaelsy</bdi></div> <hr class="a11y" /> </div></main>  <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> <h3 class="a11y" id="dokuwiki__pagetools__heading">Page Tools</h3> <div class="tools"> <ul> <li class="edit"><a href="/devel:javascript?do=edit" title="Edit this page [e]" rel="nofollow" accesskey="e"><span>Edit this page</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg></a></li><li class="revs"><a href="/devel:javascript?do=revisions" title="Old revisions [o]" rel="nofollow" accesskey="o"><span>Old revisions</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg></a></li><li class="backlink"><a href="/devel:javascript?do=backlink" title="Backlinks" rel="nofollow"><span>Backlinks</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg></a></li><li class="top"><a href="#dokuwiki__top" title="Back to top [t]" rel="nofollow" accesskey="t"><span>Back to top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg></a></li> </ul> </div> </nav> </div>  <footer id="dokuwiki__footer"><div class="pad"> <div class="license">Except where otherwise noted, content on this wiki is licensed under the following license: <bdi><a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license" class="urlextern">CC Attribution-Share Alike 4.0 International</a></bdi></div> <div class="buttons"> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license"><img src="/lib/images/license/button/cc-by-sa.png" alt="CC Attribution-Share Alike 4.0 International" /></a> <a href="https://www.dokuwiki.org/donate" title="Donate" ><img src="/lib/tpl/dokuwiki/images/button-donate.gif" width="80" height="15" alt="Donate" /></a> <a href="https://php.net" title="Powered by PHP" ><img src="/lib/tpl/dokuwiki/images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a> <a href="//validator.w3.org/check/referer" title="Valid HTML5" ><img src="/lib/tpl/dokuwiki/images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a> <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" ><img src="/lib/tpl/dokuwiki/images/button-css.png" width="80" height="15" alt="Valid CSS" /></a> <a href="https://dokuwiki.org/" title="Driven by DokuWiki" ><img src="/lib/tpl/dokuwiki/images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> </div> <div style="margin-top: 2em; font-size:90%" class="dokuwiki"><div style="float:right"><a href="http://www.splitbrain.org/personal#imprint" style="float:right; text-decoration: none; color:#333">Imprint</a></div></div> <style type="text/css"> @media screen { body { padding-top: 30px; } #global__header { position: absolute; top: 0; left: 0; text-align: left; vertical-align: middle; line-height: 1.5; background-color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.5); width: 100%; margin: 0; padding: 5px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } #global__header h2 { position: absolute; left: -99999em; top: 0; overflow: hidden; display: inline; } #global__header ul, #global__header li { margin: 0; padding: 0; list-style: none; display: inline; line-height: 1.5; } #global__header a { color: #bbb; text-decoration: none; margin-right: 20px; font-size: 14px; font-weight: normal; } #global__header a:hover, #global__header a:active, #global__header a:focus { color: #fff; text-decoration: underline; } #global__header form { float: right; margin: 0 0 0 20px; } #global__header input { background-color: #333; background-image: none; border: 1px solid #bbb; color: #fff; box-shadow: none; border-radius: 2px; margin: 0; line-height: normal; padding: 1px 0 1px 0; height: auto; } #global__header input.button { border: none; color: #bbb; } #global__header input.button:hover, #global__header input.button:active, #global__header input.button:focus { color: #fff; text-decoration: underline; } } /* /@media */ @media only screen and (min-width: 601px) { /* changes specific for www.dokuwiki.org */ #dokuwiki__header { padding-top: 3em; } #dokuwiki__usertools { top: 3em; } /* changes specific for bugs.dokuwiki.org */ div#container div#showtask { top: 40px; } } /* /@media */ @media only screen and (max-width: 600px) { body { padding-top: 0; } #global__header { position: static; white-space: normal; overflow: auto; } #global__header form { float: none; display: block; margin: 0 0 .4em; } } /* /@media */ @media print { #global__header { display: none; } } /* /@media */ </style> <div id="global__header"> <h2>Global DokuWiki Links</h2> <form method="get" action="https://search.dokuwiki.org/" target="_top"> <input type="text" name="q" title="Search all DokuWiki sites at once" class="input" /> <input type="submit" title="Search all DokuWiki sites at once" value="Search" class="button" /> </form> <ul> <li><a href="https://download.dokuwiki.org" title="Download the latest release" target="_top">Download</a></li> <li><a href="https://www.dokuwiki.org" title="Read the DokuWiki documentation" target="_top">Wiki</a></li> <li><a href="https://forum.dokuwiki.org" title="Ask questions in the DokuWiki forum" target="_top">Forum</a></li> <li><a href="https://irc.dokuwiki.org" title="Check IRC chat logs or join the chat" target="_top">IRC</a></li> <li><a href="https://github.com/splitbrain/dokuwiki/issues" title="Report and track bugs" target="_top">Bugs</a></li> <li><a href="https://translate.dokuwiki.org/" title="Help translating the DokuWiki interface" target="_top">Translate</a></li> <li><a href="https://github.com/splitbrain/dokuwiki" title="Access the most recent git commits" target="_top">Git</a></li> <li><a href="https://xref.dokuwiki.org/reference/dokuwiki/" title="Cross-Reference of the DokuWiki source code" target="_top">XRef</a></li> <li><a href="https://codesearch.dokuwiki.org/" title="Search through the sources of DokuWiki, plugins and templates" target="_top">Code Search</a></li> </ul> </div>  </div></footer> </div></div> <div class="no"><img src="/lib/exe/taskrunner.php?id=devel%3Ajavascript&1733034703" width="2" height="1" alt="" /></div> <div id="screen__mode" class="no"></div></body> </html>