diff --git a/.gitignore b/.gitignore index 147ba21..9c0c967 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ .DS_Store .sass-cache node_modules -site tmp diff --git a/LICENSE b/LICENSE index e6eb0de..b3bb1e3 100644 --- a/LICENSE +++ b/LICENSE @@ -8,7 +8,7 @@ EXAMPLE-LICENSE-BEGIN and EXAMPLE-LICENSE-END. The documentation and site code (ie, everything but the examples) on JavaScripture are built by a community of contributors (see https://github.com/nkronlage/JavaScripture) and are available under -the terms of the Create Commons Attribution-ShareAlike license +the terms of the Creative Commons Attribution-ShareAlike license (http://creativecommons.org/licenses/by-sa/2.5/). In brief, you may copy and redistribute the documentation in any form and with any changes as long as you attribute the original page on JavaScripture and distribute your works diff --git a/README.md b/README.md index ef79697..2ae01b8 100644 --- a/README.md +++ b/README.md @@ -39,15 +39,13 @@ build the site's html files. Prerequisites for building * [Node](http://nodejs.org/download/) -* [Sass](http://sass-lang.com/install) -* [Gulp](http://gulpjs.com/) * Run: npm install To build the documentation, run: -* gulp +* node build.js -From the root folder. The generated files are in the site/ folder. +From the root folder. The generated files are in the docs/ folder. ### Documentation File Format The information for each type is stored in a .jsdoc file. This is a diff --git a/build.js b/build.js new file mode 100644 index 0000000..91047d1 --- /dev/null +++ b/build.js @@ -0,0 +1,142 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const util = require('util'); +const jsdoc = require('./jsdocparser.js'); +const ejs = require('ejs'); +const template = require('./template.js'); + +const sets = {}; + +const generateMetadata = (filename) => { + console.log(`Generating metadata for ${filename}`); + const obj = jsdoc.processFile(filename); + + if (!new RegExp(`/${obj.name}\\.jsdoc`, 'i').test(filename)) { + throw `Object ${obj.name} defined in unexpected file ${filename}`; + } + + obj.jsdocSourceFile = filename; + + const setName = path.basename(path.dirname(filename)); + + const hasDescriptions = !!obj.description || + obj.constructors.some((constructor) => !!constructor.description) || + obj.instanceMembers.some((member) => !!member.description) || + obj.prototypeMembers.some((member) => !!member.description); + + const metadata = { + name: obj.name, + setName: setName, + hasDescriptions: hasDescriptions + }; + + const addMembers = (name) => { + metadata[name] = obj[name].map((member) => ({ name: member.name, onname: member.onname })); + }; + + addMembers('instanceProperties'); + addMembers('instanceMethods'); + addMembers('instanceEvents'); + addMembers('properties'); + addMembers('methods'); + + let set = sets[setName]; + if (!set) { + set = sets[setName] = []; + } + set.push(metadata); + + const pretty = false; + const json = JSON.stringify(metadata, null, pretty ? ' ' : undefined); + + fs.writeFileSync(`./tmp/metadata/${obj.name}.json`, json, { flag: 'wx' }); + + obj.apiSet = { name: setName }; + createPage(obj); +}; + +const createPage = (obj) => { + // Validation + const errors = []; + const all = [].concat(obj.overloads, obj.constructors, obj.instanceProperties, obj.instanceMethods, obj.properties, obj.methods); + + all.forEach((member) => { + if (!member) { + errors.push(`undefined member in ${obj.name}`); + return; + } + + if (!member.spec) { + errors.push(`No spec for ${obj.name}.${member.name}`); + } + + if (!member.description) { + errors.push(`No description for ${obj.name}.${member.name}`); + } + + if (member.type === 'Function') { + // TODO: check member.parameters + } + }); + + + if (errors.length) { + console.warn(errors.join('\n')); + } + + const body = template.render('object', { obj }); + + const title = `${obj.name} JavaScript API`; + const html = template.render('page', { title, body, obj }); + + fs.writeFileSync(`./docs/${obj.name}.html`, html); +}; + +fs.rmdirSync('./tmp', { recursive: true }); +fs.mkdirSync('./tmp/metadata', { recursive: true }); + +fs.readdirSync('./docs').map((doc) => { + fs.unlinkSync(`./docs/${doc}`); +}); + +fs.readdirSync('./content').map((set) => { + fs.readdirSync(`./content/${set}/`).map((doc) => { + generateMetadata(`./content/${set}/${doc}`); + }); +}); + +for (const set of Object.values(sets)) { + set.sort((a, b) => a.name.localeCompare(b.name)); +} + +fs.writeFileSync('./tmp/apisets.json', JSON.stringify(sets)); + +const makeCustomPage = (page, extension = 'html') => { + const locals = { + apiSets: sets, + wrapInPageTemplate: true + }; + + let output = template.render(page, locals); + if (locals.wrapInPageTemplate) { + locals.body = output; + output = template.render('page', locals); + } + + fs.writeFileSync(`./docs/${page}.${extension}`, output); +}; + +makeCustomPage('feedback'); +makeCustomPage('index'); +makeCustomPage('license'); +makeCustomPage('thankyou'); +makeCustomPage('javascripture', 'js'); + +fs.readdirSync('./static').map(file => { + fs.copyFile(`./static/${file}`, `./docs/${file}`, err => { if (err) { throw err } }); + }); + + + diff --git a/content/Browser/TextDecoder.jsdoc b/content/Browser/TextDecoder.jsdoc new file mode 100644 index 0000000..bae838f --- /dev/null +++ b/content/Browser/TextDecoder.jsdoc @@ -0,0 +1,138 @@ +TextDecoder : Object + +Decodes sequences of bytes into %%/String|Strings%%. + +Spec: +https://encoding.spec.whatwg.org/#interface-textdecoder + +---- +new TextDecoder() : TextDecoder + +Constructs a new TextDecoder that decodes UTF-8 strings. + + +const decoder = new TextDecoder(); +console.log(decoder.decode(new Uint8Array([240,159,152,128,240,159,144,177,226,154,189,239,184,143]))); + + +Spec: +https://encoding.spec.whatwg.org/#dom-textdecoder + +---- +new TextDecoder(label : String, [options : { \ + fatal : Boolean, \ + ignoreBOM : Boolean \ + }]) : TextDecoder + +Constructs a new TextDecoder. See %%https://encoding.spec.whatwg.org/#concept-encoding-get|https://encoding.spec.whatwg.org/#concept-encoding-get%% +for valid **label** values. + + +const decoder = new TextDecoder('utf-16'); + +console.log(decoder.decode(new Uint16Array([0xd83d, 0xde00, 0xd83d, 0xdc31, 0x26bd, 0xfe0f]))); + + +Spec: +https://encoding.spec.whatwg.org/#dom-textdecoder + +---- +instance.encoding : String + +Returns the effective encoding from the **label** specified during construction of **this**. +See %%https://encoding.spec.whatwg.org/#concept-encoding-get|https://encoding.spec.whatwg.org/#concept-encoding-get%% +for the mapping from **label** values to **encoding**s. + + +const decoder = new TextDecoder(); +console.log(decoder.encoding); + +const decoder16 = new TextDecoder('utf-16'); +console.log(decoder16.encoding); + + +ReadOnly: +true + +Spec: +https://encoding.spec.whatwg.org/#dom-textdecoder-encoding + +---- +instance.fatal : Boolean + + +const decoder = new TextDecoder(); +console.log(decoder.fatal); + +const fatalDecoder = new TextDecoder('utf-8', { fatal: true }); +console.log(fatalDecoder.fatal); + + +ReadOnly: +true + +Spec: +https://encoding.spec.whatwg.org/#dom-textdecoder-fatal + +---- +instance.ignoreBOM : Boolean + + +const decoder = new TextDecoder(); +console.log(decoder.fatal); + +const ignoreBOMDecoder = new TextDecoder('utf-8', { ignoreBOM: true }); +console.log(ignoreBOMDecoder.ignoreBOM); + + +ReadOnly: +true + +Spec: +https://encoding.spec.whatwg.org/#dom-textdecoder-ignorebom + +---- +prototype.decode(input : ArrayBufferView, [options : {\ + stream : Boolean \ + }]) : String + +Decodes the bytes from **input** into a new String based on **this.encoding**. If +**options.stream** is **true**, **this** will remember any partially consumed +characters and apply them to the next **decode()** call. + + +const decoder = new TextDecoder(); +const bytes = new Uint8Array([240,159,152,128,240,159,144,177,226,154,189,239,184,143]); +console.log(decoder.decode(bytes)); + +let i = 0; +const chunkSize = 3; +let res = ''; +while (i < bytes.length) { + res += decoder.decode(bytes.subarray(i, i + chunkSize), { stream: true }); + i += chunkSize; +} +res += decoder.decode(bytes.subarray(i)); +console.log(res); + + +Spec: +https://encoding.spec.whatwg.org/#dom-textdecoder-decode + +---- +prototype.decode(input : ArrayBuffer, [options : {\ + stream : Boolean \ + }]) : String + +Decodes the bytes from **input** into a new String based on **this.encoding**. If +**options.stream** is **true**, **this** will remember any partially consumed +characters and apply them to the next **decode()** call. + + +const decoder = new TextDecoder(); +const bytes = new Uint8Array([240,159,152,128,240,159,144,177,226,154,189,239,184,143]); +console.log(decoder.decode(bytes.buffer)); + + +Spec: +https://encoding.spec.whatwg.org/#dom-textdecoder-decode diff --git a/content/Browser/TextEncoder.jsdoc b/content/Browser/TextEncoder.jsdoc new file mode 100644 index 0000000..9842cb8 --- /dev/null +++ b/content/Browser/TextEncoder.jsdoc @@ -0,0 +1,70 @@ +TextEncoder : Object + +Encodes a %%/String|String%% into a UTF-8 stream of bytes. + +Spec: +https://encoding.spec.whatwg.org/#interface-textencoder + +---- +new TextEncoder() : TextEncoder + +Creates an encoder that can convert strings to a sequence of UTF-8 bytes. + + +const encoder = new TextEncoder(); +console.log(encoder.encode('abc')); +console.log(encoder.encode('😀🐱⚽️')); + + +Spec: +https://encoding.spec.whatwg.org/#dom-textencoder + +---- +instance.encoding : String + +Returns the encoding method. Currently only **'utf-8'** is supported. + + +const encoder = new TextEncoder(); +console.log(encoder.encoding); + + +ReadOnly: +true + +Spec: +https://encoding.spec.whatwg.org/#dom-textencoder-encoding + +---- +prototype.encode(value = '' : String) : Uint8Array + +Converts **value** into a sequence of UTF-8 bytes. + + +const encoder = new TextEncoder(); +console.log(encoder.encode('abc')); +console.log(encoder.encode('😀🐱⚽️')); + + +Spec: +https://encoding.spec.whatwg.org/#dom-textencoder-encode + +---- +prototype.encodeInto(value : String, destination : Uint8Array) : { \ + read : Number /* The number of UTF-16 characters read from **value**. */, \ + written : Number /* The number of bytes written to **destination**. */ \ + } + +Writes **value** as a sequence of UTF-8 bytes into **destination**. Returns +information about the number of characters read from **value** and bytes +written to **destination**. + + +const encoder = new TextEncoder(); +const buffer = new Uint8Array(20); +console.dir(encoder.encodeInto('😀🐱⚽️', buffer)); +console.log(buffer); + + +Spec: +https://encoding.spec.whatwg.org/#dom-textencoder-encodeinto diff --git a/content/Browser/applicationcache.jsdoc b/content/Browser/applicationcache.jsdoc index 0fe4a05..2375e76 100644 --- a/content/Browser/applicationcache.jsdoc +++ b/content/Browser/applicationcache.jsdoc @@ -1,6 +1,6 @@ ApplicationCache : EventTarget -The ApplicationCache describes the state of files cached for the current +The ApplicationCache describes the state of files cached for the current page. Pages set the **manifest=""** attribute on the **** @@ -9,28 +9,16 @@ tag to define the set of files to be cached. Obtained through the %%/Window#applicationCache|**window.applicationCache**%% property. -See %%http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html|Offline WebPage Spec%% for +See %%https://html.spec.whatwg.org/multipage/offline.html|Offline WebPage Spec%% for more details. Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#appcache - ----- -instance[index : Number] : String - ----- -instance.length : Number - -ReadOnly: -true - -Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#length6 +https://html.spec.whatwg.org/#applicationcache ---- instance.status : Number -The current status of the cache. Will be one of +The current status of the cache. Will be one of %%#UNCACHED|**UNCACHED**%%, %%#IDLE|**IDLE**%%, %%#CHECKING|**CHECKING**%%, @@ -42,7 +30,7 @@ ReadOnly: true Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#status0 +https://html.spec.whatwg.org/#dom-appcache-status ---- prototype.update() : undefined @@ -51,37 +39,17 @@ Checks to see if there is an updated manifest file on the server. This automatic happens once when the page first loads. Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#update1 +https://html.spec.whatwg.org/#dom-appcache-update ---- prototype.swapCache() : undefined Replaces application cache with the updated list of files from the server. This -does not automatically update the resources of the page. You can use +does not automatically update the resources of the page. You can use %%Location#reload|**location.reload()**%% to update the page. Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#swapcache - ----- -prototype.item(index : Number) : String - -Same as %%#indexer_Number|**this[index]**%%. - -Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#itemindex4 - ----- -prototype.add(uri : String) : undefined - -Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#adduri - ----- -prototype.remove(uri : String) : undefined - -Spec: -http://www.w3.org/TR/2008/WD-html5-20080122/#remove1 +https://html.spec.whatwg.org/#dom-appcache-swapcache ---- event.checking : listener(event : Event) : undefined @@ -110,7 +78,7 @@ event.progress : listener(event : ProgressEvent) : undefined ---- event.updateready : listener(event : Event) : undefined -Event fired when all resources listed in the manifest have been downloaded. +Event fired when all resources listed in the manifest have been downloaded. ---- event.cached : listener(event : Event) : undefined diff --git a/content/Browser/broadcastchannel.jsdoc b/content/Browser/broadcastchannel.jsdoc new file mode 100644 index 0000000..4061452 --- /dev/null +++ b/content/Browser/broadcastchannel.jsdoc @@ -0,0 +1,165 @@ +BroadcastChannel : EventTarget + +BroadcastChannel provides a simple way for different contexts (such as %%/Window|Windows%% +or %%/Worker|Workers%%) in the same %%URL#origin|origin%% to broadcast messages all +other BroadcastChannels created with the same %%#name|name%%. + +See also %%/Window#postMessage|Window.postMessage%% and %%/MessageChannel|MessageChannel%%. + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#broadcastchannel + +---- +new BroadcastChannel(name : String) : BroadcastChannel + +Creates a new BroadcastChannel for the specified **name**. + + + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#dom-broadcastchannel + +---- +instance.name : String + +Returns the name of the channel. + + + + + +ReadOnly: +true + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#dom-broadcastchannel-name + +---- +prototype.close() : undefined + +Causes **this** to stop listening to message. Allows **this** to be garbage collected. + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#dom-broadcastchannel-close + +---- +prototype.postMessage(message : Object) : undefined + +Serializes **message** and sends it to all other BroadcastChannels sharing the same +%%#name|name%% as **this** on the same origin. + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#dom-broadcastchannel-postmessage + +---- +event.message : listener(event : MessageEvent) : undefined + +Fired when %%#postMessage|**postMessage**%% is called on another BroadcastChannel +sharing the same %%#name|name%% as **this**. + + + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#handler-broadcastchannel-onmessage + +---- +event.messageerror : listener(event : MessageEvent) : undefined + +Fired when unable to deserialize a message from another BroadcastChannel in **this**' +context. + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#handler-broadcastchannel-onmessageerror diff --git a/content/Browser/external.jsdoc b/content/Browser/external.jsdoc index 888b694..2ffcfde 100644 --- a/content/Browser/external.jsdoc +++ b/content/Browser/external.jsdoc @@ -1,7 +1,7 @@ External : Object Spec: -http://www.w3.org/html/wg/drafts/html/master/webappapis.html#external +https://html.spec.whatwg.org/#external ---- prototype.AddSearchProvider(url : String) : undefined diff --git a/content/Browser/formdata.jsdoc b/content/Browser/formdata.jsdoc index 4bf84ab..eb18b6c 100644 --- a/content/Browser/formdata.jsdoc +++ b/content/Browser/formdata.jsdoc @@ -4,7 +4,7 @@ Use with %%XMLHttpRequest#send_FormData|**XMLHttpRequest.send()**%% to send %%/HTMLFormElement|form%% results to a server without navigating. Spec: -http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata +https://xhr.spec.whatwg.org/#interface-formdata ---- new FormData() : FormData @@ -17,7 +17,7 @@ Constructs an empty FormData. var send = function() { var request = new XMLHttpRequest(); // POST to httpbin which returns the POST data as JSON - request.open('POST', 'http://httpbin.org/post', /* async = */ false); + request.open('POST', 'https://httpbin.org/post', /* async = */ false); var formData = new FormData(); formData.append('key1', 'value1'); @@ -47,7 +47,7 @@ Constructs a FormData using the values from the specified **form**. var request = new XMLHttpRequest(); // POST to httpbin which returns the POST data as JSON - request.open('POST', 'http://httpbin.org/post', /* async = */ false); + request.open('POST', 'https://httpbin.org/post', /* async = */ false); var formData = new FormData(document.getElementById('test-form')); request.send(formData); @@ -75,7 +75,7 @@ Appends the **name/value** pair to the FormData. var request = new XMLHttpRequest(); // POST to httpbin which returns the POST data as JSON - request.open('POST', 'http://httpbin.org/post', /* async = */ false); + request.open('POST', 'https://httpbin.org/post', /* async = */ false); var formData = new FormData(document.getElementById('test-form')); @@ -106,7 +106,7 @@ Appends the **name/value** as a file with the specified **filename**. var request = new XMLHttpRequest(); // POST to httpbin which returns the POST data as JSON - request.open('POST', 'http://httpbin.org/post', /* async = */ false); + request.open('POST', 'https://httpbin.org/post', /* async = */ false); var formData = new FormData(document.getElementById('test-form')); diff --git a/content/Browser/hashchangeevent.jsdoc b/content/Browser/hashchangeevent.jsdoc index a8f1908..c6f7203 100644 --- a/content/Browser/hashchangeevent.jsdoc +++ b/content/Browser/hashchangeevent.jsdoc @@ -3,7 +3,7 @@ HashChangeEvent : Event See %%/Window#onhashchange|**window.onhashchange**%%. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#hashchangeevent +https://html.spec.whatwg.org/multipage/history.html#hashchangeevent ---- new HashChangeEvent( \ @@ -23,7 +23,7 @@ ReadOnly: true Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-hashchangeevent-oldurl +https://html.spec.whatwg.org/multipage/history.html#dom-hashchangeevent-oldurl ---- instance.newURL : Object @@ -34,4 +34,4 @@ ReadOnly: true Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-hashchangeevent-newurl +https://html.spec.whatwg.org/multipage/history.html#dom-hashchangeevent-newurl diff --git a/content/Browser/history.jsdoc b/content/Browser/history.jsdoc index 1da9343..4c6efe0 100644 --- a/content/Browser/history.jsdoc +++ b/content/Browser/history.jsdoc @@ -11,12 +11,12 @@ back/forward buttons. See also %%/Location|Location%%. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#the-history-interface +https://html.spec.whatwg.org/multipage/browsers.html#the-history-interface ---- instance.length : Number -The number of items in the browser session's history. +The number of items in the browser session's history.
@@ -67,12 +67,12 @@ ReadOnly: true Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-history-length +https://html.spec.whatwg.org/multipage/browsers.html#dom-history-length ---- instance.state : Object -The data passed to %%#pushState|**pushState()**%% or +The data passed to %%#pushState|**pushState()**%% or %%#replaceState|**replaceState()**%% for the current page. @@ -124,13 +124,13 @@ ReadOnly: true Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-history-state +https://html.spec.whatwg.org/multipage/browsers.html#dom-history-state ---- prototype.go([delta : Number]) : undefined Navigates through the session history by the specified amount. If -**delta** is not provided, **go()** acts the same as +**delta** is not provided, **go()** acts the same as %%Location#reload|**location.reload()**%% and reloads the current page. See also %%#back|**back()**%% and %%#forward|**forward()**%%. @@ -180,7 +180,7 @@ See also %%#back|**back()**%% and %%#forward|**forward()**%%. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-history-go +https://html.spec.whatwg.org/multipage/browsers.html#dom-history-go ---- prototype.back() : undefined @@ -234,7 +234,7 @@ Navigates back one page in the session history. Equivalent to
Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-history-back +https://html.spec.whatwg.org/multipage/browsers.html#dom-history-back ---- prototype.forward() : undefined @@ -288,15 +288,15 @@ Navigates forward one page in the session history. Equivalent to Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-history-forward +https://html.spec.whatwg.org/multipage/browsers.html#dom-history-forward ---- prototype.pushState(state : Object, title : String, [url : String]) : undefined -Adds a new entry to the session history. -**state** is available on the %%#state|**history.state**%% property. -**title** is applied to %%Document#title|**document.title**%%. -If **url** is specified, the %%Location#href|**location.href**%% is +Adds a new entry to the session history. +**state** is available on the %%#state|**history.state**%% property. +**title** is applied to %%Document#title|**document.title**%%. +If **url** is specified, the %%Location#href|**location.href**%% is changed to the provided value. @@ -346,15 +346,15 @@ changed to the provided value. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-history-pushstate +https://html.spec.whatwg.org/multipage/browsers.html#dom-history-pushstate ---- prototype.replaceState(state : Object, title : String, [url : String]) : undefined -Replaces the current entry in the session history with the provided values. -**state** is available on the %%#state|**history.state**%% property. -**title** is applied to %%Document#title|**document.title**%%. -If **url** is specified, the %%Location#href|**location.href**%% is +Replaces the current entry in the session history with the provided values. +**state** is available on the %%#state|**history.state**%% property. +**title** is applied to %%Document#title|**document.title**%%. +If **url** is specified, the %%Location#href|**location.href**%% is changed to the provided value. @@ -404,4 +404,4 @@ changed to the provided value. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-history-replacestate +https://html.spec.whatwg.org/multipage/browsers.html#dom-history-replacestate diff --git a/content/Browser/messagechannel.jsdoc b/content/Browser/messagechannel.jsdoc new file mode 100644 index 0000000..eb80165 --- /dev/null +++ b/content/Browser/messagechannel.jsdoc @@ -0,0 +1,66 @@ +MessageChannel : Object + +A message channel allows sending messages between contexts, such as two +%%/Worker|Workers%%, by %%/Window#postMessage|transferring%% the MessageChannel's +%%/MessagePort|MessagePorts%% to the workers. + +See also %%/Window#postMessage|Window.postMessage%% and %%/BroadcastChannel|BroadcastChannel%%. + +Spec: +https://html.spec.whatwg.org/multipage/web-messaging.html#messageport + +---- +new MessageChannel() : MessageChannel + + + + + + + +---- +instance.port1 : MessagePort + +The first port the channel. + +ReadOnly: +true + +---- +instance.port2 : MessagePort + +The second port the channel. + +ReadOnly: +true + diff --git a/content/Browser/messageevent.jsdoc b/content/Browser/messageevent.jsdoc index 0cdf507..0049fe3 100644 --- a/content/Browser/messageevent.jsdoc +++ b/content/Browser/messageevent.jsdoc @@ -1,7 +1,7 @@ MessageEvent : Event Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#messageevent +https://html.spec.whatwg.org/multipage/comms.html#messageevent ---- new MessageEvent( \ diff --git a/content/Browser/messageport.jsdoc b/content/Browser/messageport.jsdoc index ebbd1bc..29a3450 100644 --- a/content/Browser/messageport.jsdoc +++ b/content/Browser/messageport.jsdoc @@ -1,17 +1,65 @@ MessagePort : EventTarget +Represents one side of a %%/MessageChannel|MessageChannel%% that can send +messages to and receive messages from the other MessagePort of the MessageChannel. +MessagePorts can be transferred to other contexts by passing it in the +**transfer** parameter of %%#postMessage|**MessagePort.postMessage()**%% or +%%/Window#postMessage|**Window.postMessage()**%%. + Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#messageport +https://html.spec.whatwg.org/multipage/web-messaging.html#messageport ---- -prototype.postMessage(message : Object, [transfer : Array]) : undefined +prototype.postMessage(message : Object, [transfer : Array]) : undefined + +Serializes **message** and sends it to the other MessagePort. + + + + + + + + ---- instance.start() : undefined +Starts listening to messages. This is automatically called if you set the +%%#message|onmessage%% event listener. + ---- instance.close() : undefined ---- -event.message : listener(event : ProgressEvent) : undefined +event.message : listener(event : MessageEvent) : undefined +Fired when %%#postMessage|**postMessage**%% is called on the other port of the +%%/MessageChannel|MessageChannel%%. Setting **onmessage** will automatically +call %%#start|**start()**%%. When using +%%/EventTarget#addEventListener|**addEventListener('message')**%%, you must +call **start()** to begin receiving **message** events. diff --git a/content/Browser/navigator.jsdoc b/content/Browser/navigator.jsdoc index 93da71a..4cec2d7 100644 --- a/content/Browser/navigator.jsdoc +++ b/content/Browser/navigator.jsdoc @@ -15,6 +15,15 @@ prototype.getUserMedia( \ Spec: http://dev.w3.org/2011/webrtc/editor/getusermedia.html#dom-navigator-getusermedia +---- +instance.clipboard : Clipboard + +ReadOnly: +true + +Spec: +https://w3c.github.io/clipboard-apis/#navigator-interface + ---- instance.maxTouchPoints : Number @@ -23,3 +32,18 @@ true Spec: http://www.w3.org/TR/pointerevents/#widl-Navigator-maxTouchPoints + +---- +prototype.getGamepads() : Iterable + +Spec: +https://w3c.github.io/gamepad/#navigator-interface-extension + +---- +instance.xr : XRSystem + +ReadOnly: +true + +Spec: +https://immersive-web.github.io/webxr/#navigator-xr-attribute diff --git a/content/Browser/popstateevent.jsdoc b/content/Browser/popstateevent.jsdoc index ab2eccb..4815738 100644 --- a/content/Browser/popstateevent.jsdoc +++ b/content/Browser/popstateevent.jsdoc @@ -3,7 +3,7 @@ PopStateEvent : Event See %%/Window#onpopstate|**window.onpopstate**%%. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#the-popstateevent-interface +https://html.spec.whatwg.org/multipage/history.html#the-popstateevent-interface ---- new PopStateEvent( \ @@ -22,4 +22,4 @@ ReadOnly: true Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-popstateevent-state +https://html.spec.whatwg.org/multipage/history.html#dom-popstateevent-state diff --git a/content/Browser/promiserejectionevent.jsdoc b/content/Browser/promiserejectionevent.jsdoc new file mode 100644 index 0000000..1ccbafc --- /dev/null +++ b/content/Browser/promiserejectionevent.jsdoc @@ -0,0 +1,58 @@ +PromiseRejectionEvent : Event + +Event data for when a %%/Promise|Promise%%'s reject handler is called or an exception is +thrown in an Promise executor function or in an async function. See +%%/Window#onunhandledrejection|window.onunhandledrejection%%. + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#promiserejectionevent + +---- +instance.promise : Promise + +The promise that had the unhandled rejection. + + + + + +ReadOnly: +true + +--- +instance.reason : Object + +The object passed to the reject handler or the object thrown in an Promise executor +function or in an async function. + + + + + +ReadOnly: +true diff --git a/content/Browser/response.jsdoc b/content/Browser/response.jsdoc deleted file mode 100644 index 312c74e..0000000 --- a/content/Browser/response.jsdoc +++ /dev/null @@ -1,76 +0,0 @@ -Response : Object - -Represents a response from a web request initiated by %%/Window#fetch|fetch()%%. -fetch(), %%/Request|Request%% and Response are a new, low level replacement for -%%/XMLHttpRequest|XMLHttpRequest%%. - -Spec: -https://fetch.spec.whatwg.org/#response-class - ----- -new Response([body : Object, [init : { \ - status = 200 : Number, \ - statusText = 'OK' : String, \ - headers : Object \ - }]]) : Response - ----- -instance.headers : Headers - -ReadOnly: -true - ----- -instance.status : Number - -ReadOnly: -true - ----- -instance.statusText : String - -ReadOnly: -true - ----- -instance.type : String - -Will be one of: -**'basic'**, -**'cors'**, -**'default'**, -**'error'**, -**'opaque'**. - -ReadOnly: -true - ----- -instance.url : String - -ReadOnly: -true - ----- -prototype.arrayBuffer() : Promise - ----- -prototype.blob() : Promise - ----- -prototype.clone() : Response - ----- -prototype.formData() : Promise - ----- -prototype.json() : Promise - ----- -prototype.text() : Promise - ----- -error() : Response - ----- -redirect(url : String, [status = 302 : Number]) : Response diff --git a/content/Browser/screen.jsdoc b/content/Browser/screen.jsdoc index 8d836e4..a3e3882 100644 --- a/content/Browser/screen.jsdoc +++ b/content/Browser/screen.jsdoc @@ -39,6 +39,20 @@ true Spec: https://drafts.csswg.org/cssom-view/#dom-screen-availwidth +---- +instance.colorDepth : Number + +The number of bits used for color on the screen. + + +console.log(screen.colorDepth); + + +ReadOnly: +true + +https://drafts.csswg.org/cssom-view/#dom-screen-colordepth + ---- instance.height : Number @@ -54,6 +68,11 @@ true Spec: https://drafts.csswg.org/cssom-view/#dom-screen-height +---- +instance.pixelDepth : Number + +Same as %%#colorDepth|colorDepth%%. + ---- instance.width : Number diff --git a/content/Browser/transferable.jsdoc b/content/Browser/transferable.jsdoc new file mode 100644 index 0000000..966e2b3 --- /dev/null +++ b/content/Browser/transferable.jsdoc @@ -0,0 +1,11 @@ +Transferable : Object + +Transferables are objects that can transferred to a different JavaScript contexts +like another %%/Window|Window%% or %%/Worker|Worker%%. After transferring, the +object is no longer available to the original context. Transferring objects may +be less expensive than recreating them in the other context. The following are +Transferables: %%/ArrayBuffer|ArrayBuffer%%, %%/ImageBitmap|ImageBitmap%%, and +%%/MessagePort|MessagePort%%. + +Spec: +https://html.spec.whatwg.org/multipage/structured-data.html#transferable-objects diff --git a/content/Browser/url.jsdoc b/content/Browser/url.jsdoc new file mode 100644 index 0000000..bbbc097 --- /dev/null +++ b/content/Browser/url.jsdoc @@ -0,0 +1,309 @@ +URL : Object + +An object that represents a web address. + +Also provides methods to generate a url for +a %%/Blob|**Blob**%% so locally generated +content can be passed to APIs that accept urls. + +Spec: +https://url.spec.whatwg.org/#url-class + +---- +new URL(url : String) : URL + +Creates a new **URL** object for the provided **url**. + + +const url = new URL('http://user:pass@example.com:8080/resource/path?q=1#hash'); + +console.log('href:', url.href); +console.log('protocol:', url.protocol); +console.log('username:', url.username); +console.log('password:', url.password); +console.log('host:', url.host); +console.log('hostname:', url.hostname); +console.log('port:', url.port); +console.log('pathname:', url.pathname); +console.log('search:', url.search); +console.log('hash:', url.hash); + + +Spec: +https://url.spec.whatwg.org/#dom-url-url + +---- +new URL(relativeUrl : String, base : String) : URL + +Creates a new **URL** for the **relativeUrl** using **base** as the base url. + + +const url = new URL('../other?q=2#hash2', + 'http://user:pass@example.com:8080/res/path/file?q=1#hash'); + +console.log('href:', url.href); +console.log('protocol:', url.protocol); +console.log('username:', url.username); +console.log('password:', url.password); +console.log('host:', url.host); +console.log('hostname:', url.hostname); +console.log('port:', url.port); +console.log('pathname:', url.pathname); +console.log('search:', url.search); +console.log('hash:', url.hash); + + +Spec: +https://url.spec.whatwg.org/#dom-url-url + +---- +instance.hash : String + +The hash portion of the URL. + + +const url = new URL('http://example.com/path#hash'); +console.log(url.hash); + +url.hash = 'newhash'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-hash + +---- +instance.host : String + +The host portion of the URL. + + +const url = new URL('http://example.com:8080/path'); +console.log(url.host); + +url.host = 'javascripture.com'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-host + +---- +instance.hostname : String + +The hostname portion of the URL. + + +const url = new URL('http://example.com:8080/path'); +console.log(url.hostname); + +url.hostname = 'javascripture.com'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-hostname + +---- +instance.href : String + +The effective value of the URL. Set this to replace the entire value. + + +const url = new URL('http://user:pass@example.com:8080/resource/path?q=1#hash'); +console.log(url.href); + +url.href = 'http://www.javascripture.com/URL#href'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-href + +---- +instance.origin : String + +The origin of the URL. + + +const url = new URL('http://user:pass@example.com:8080/resource/path?q=1#hash'); +console.log(url.origin); + + +Spec: +https://url.spec.whatwg.org/#dom-url-origin + +ReadOnly: +true + +---- +instance.password : String + +The password portion of the URL. + + +const url = new URL('http://user:pass@example.com'); +console.log(url.password); + +url.password = 'foo'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-password + +---- +instance.pathname : String + +The path portion of the URL. + + +const url = new URL('http://example.com/resource/path'); +console.log(url.pathname); + +url.pathname = 'foo'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-pathname + +---- +instance.port : String + +The port portion of the URL. + + +const url = new URL('http://example.com:8080/path'); +console.log(url.port); + +url.port = 3000; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-port + +---- +instance.protocol : String + +The protocol portion of the URL. + + +const url = new URL('http://example.com/path'); +console.log(url.protocol); + +url.protocol = 'https'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-protocol + +---- +instance.search : String + +The search query portion of the URL. See also %%#searchParams|**searchParams**%%. + + +const url = new URL('http://example.com/path?q=1'); +console.log(url.search); + +url.search = 'foo=bar'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-search + +---- +instance.searchParams : URLSearchParams + +Helper object to manipulate the %%#search|**search**%% portion of the URL. + + +const url = new URL('http://example.com/path?a=1&b=2'); + +console.log(url.searchParams.get('a')); +console.log(url.searchParams.get('b')); + +for (const [k, v] of url.searchParams) { + console.log(k, v); +} + + +Spec: +https://url.spec.whatwg.org/#dom-url-searchparams + +---- +instance.username : String + +The username portion of the URL. + + +const url = new URL('http://user:pass@example.com'); +console.log(url.username); + +url.username = 'foo'; +console.log(url); + + +Spec: +https://url.spec.whatwg.org/#dom-url-username + +---- +createObjectURL(blob : Blob) : String + +Creates a url for the specified **blob** that can be passed to +methods that expect a url. When done with the returned url, call +%%#revokeObjectURL|**revokeObjectURL()**%% to free the resources +associated with the created url. + + + + + + + +Spec: +http://www.w3.org/TR/FileAPI/#dfn-createObjectURL + + +---- +revokeObjectURL(url : String) : undefined + +Frees the resources associated with the **url** created by +%%#createObjectURL|**createObjectURL()**%%. + + + + + + + +Spec: +http://www.w3.org/TR/FileAPI/#dfn-revokeObjectURL diff --git a/content/Browser/urlsearchparams.jsdoc b/content/Browser/urlsearchparams.jsdoc index 56b96e2..fd60ddc 100644 --- a/content/Browser/urlsearchparams.jsdoc +++ b/content/Browser/urlsearchparams.jsdoc @@ -1,5 +1,9 @@ URLSearchParams : Object +Helper method to manipulate search parameters (such as **?foo=bar**) of a url as a +set of name/value pairs. Note, each name can have multiple values. See +%%/URL#searchParams|**URL.searchParams**%%. + Iterable: true @@ -7,26 +11,178 @@ Spec: https://url.spec.whatwg.org/#urlsearchparams ---- -new URLSearchParams(init = '' : String) : URLSearchParams +new URLSearchParams() : URLSearchParams + +Constructs a new URLSearchParams. + + +const params = new URLSearchParams(); + +params.set('a', 1); +params.set('b', 2); +console.log(params.get('a')); +console.log(params.get('b')); + +params.set('c', 3); + +for (const [k, v] of params) { + console.log(k, v); +} + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-urlsearchparams + +---- +new URLSearchParams(init : String) : URLSearchParams + +Constructs a new URLSearchParams from the specified string. + + +const params = new URLSearchParams('?a=1&b=2'); + +console.log(params.get('a')); +console.log(params.get('b')); + +params.set('c', 3); + +for (const [k, v] of params) { + console.log(k, v); +} + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-urlsearchparams ---- new URLSearchParams(init : URLSearchParams) : URLSearchParams +Constructs a new URLSearchParams that is a copy of **init**. + + +const params = new URLSearchParams('?a=1&b=2'); +const params2 = new URLSearchParams(params); +params2.set('c', 3); + +console.log('params:'); +for (const [k, v] of params) { + console.log(k, v); +} + +console.log('params2:'); +for (const [k, v] of params2) { + console.log(k, v); +} + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-urlsearchparams + ---- prototype.append(name : String, value : String) : undefined +Appends the specified name/value pair to **this**. Note, unlike %%#set|**set()**%%, +this allows multiple values for a given name. + + +const params = new URLSearchParams('?a=1&b=2'); + +// Append keeps existing name/value pairs +params.append('a', 'append value'); +console.log(params); + +// Notice set replaces all name/value pairs +params.set('a', 'set value'); +console.log(params); + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-append + ---- prototype.delete(name : String) : undefined +Removes all name/value pairs with the given name. + + +const params = new URLSearchParams('?a=1&b=2'); + +params.delete('a'); +console.log(params); + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-delete + ---- prototype.get(name : String) : String +Gets the first value for the specified name. + + +const params = new URLSearchParams('?a=1&b=2'); +console.log(params.get('a')); +console.log(params.get('b')); + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-get + ---- prototype.getAll(name : String) : Array +Gets all values for the specified name. + + +const params = new URLSearchParams('?a=1&b=2&a=another+value'); +console.dir(params.getAll('a')); + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-getall + ---- prototype.has(name : String) : Boolean +Returns **true** if **name** is defined in **this**. + + +const params = new URLSearchParams('?a=1&b=2'); +console.log(params.has('a')); +console.log(params.has('c')); + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-has + ---- prototype.set(name : String, value : String) : undefined +Sets the **value** for the specified **name**. Note, if there are multiple values +for **name**, all will be replaced with the new **value**. See also %%#append|**append()**%%. + + +const params = new URLSearchParams('?a=1&b=2&a=another+value'); + +params.set('a', 'set value'); +console.log(params); + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-set + +---- +prototype.sort() : undefined + +Sorts the name/value pairs by the name. Order of values for the same name is preserved. + + +const params = new URLSearchParams('?a=1&b=2&a=another+value'); + +params.sort(); +console.log(params); + + +Spec: +https://url.spec.whatwg.org/#dom-urlsearchparams-sort + diff --git a/content/Browser/window.jsdoc b/content/Browser/window.jsdoc index bce632c..f13006a 100644 --- a/content/Browser/window.jsdoc +++ b/content/Browser/window.jsdoc @@ -2,13 +2,13 @@ Window : Global Window is the global object in the browser that represents the browser window for the page. The window object itself -is available through the %%#window|**window**%% property and all +is available through the %%#window|**window**%% property and all properties on the Window are available directly in scripts. -The Window object is also available as **this** in the root scope of +The Window object is also available as **this** in the root scope of a script (ie, outside of any %%/Function|Function%%). Spec: -http://dev.w3.org/html5/spec/Overview.html#the-window-object +https://html.spec.whatwg.org/#the-window-object ---- instance.frameElement : Element @@ -16,7 +16,6 @@ instance.frameElement : Element ReadOnly: true - ---- instance.frames : Window @@ -32,6 +31,23 @@ true ---- instance.opener : Window +---- +instance.pageXOffset : Number + +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view-1/#dom-window-pagexoffset + +---- +instance.pageYOffset : Number + +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view-1/#dom-window-pageyoffset ---- instance.parent : Window @@ -40,19 +56,69 @@ instance.parent : Window ReadOnly: true +---- +instance.scrollX : Number + +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view-1/#dom-window-scrollx + +---- +instance.scrollY : Number + +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view-1/#dom-window-scrolly + ---- instance.top : Window ReadOnly: true +---- +instance.globalThis : Window + +Returns the global object for the browser. Also available through +the %%#window|**window**%% property, %%#self|**self**%% property, +and **this** in the root scope. + + + + + +ReadOnly: +true + +Version: +ECMAScript 2020 ---- instance.window : Window -Returns the global object for the browser. Also available -through the %%#self|**self**%% property and through **this** -in the root scope. +Returns the global object for the browser. Also available +through the %%#self|**self**%% property, through **this** +in the root scope, and through the %%#globalThis|**globalThis**%% +property (in ECMAScript 2020). + + +ReadOnly: +true + +Spec: +https://html.spec.whatwg.org/multipage/custom-elements.html + ---- instance.document : Document -Returns the document for this window. +Returns the document for this window.
Hello World
@@ -116,19 +224,19 @@ ReadOnly: true Spec: -http://dev.w3.org/html5/spec/Overview.html#dom-document-0 +https://html.spec.whatwg.org/#dom-document-2 ---- instance.name : String Spec: -http://dev.w3.org/html5/spec/Overview.html#dom-name +https://html.spec.whatwg.org/#dom-name ---- instance.location : Location -Describes the url of the current page. See %%/Location|Location%% for +Describes the url of the current page. See %%/Location|Location%% for more details. @@ -146,7 +254,7 @@ ReadOnly: true Spec: -http://dev.w3.org/html5/spec/Overview.html#dom-location +https://html.spec.whatwg.org/#dom-location ---- instance.history : History @@ -204,7 +312,7 @@ ReadOnly: true Spec: -http://dev.w3.org/html5/spec/Overview.html#dom-history +https://html.spec.whatwg.org/#dom-history ---- instance.status : String @@ -243,7 +351,7 @@ instance.sessionStorage : Storage **sessionStorage** allows saving data in the web browser that can be retrieved in future views of the web page. -The data is only saved for the current session, that is until +The data is only saved for the current session, that is until the user closes the web browser. See also %%#localStorage|**localStorage**%% and %%/Storage|Storage%% for more details. @@ -284,6 +392,9 @@ instance.applicationCache : ApplicationCache ReadOnly: true +---- +instance.indexedDB : IDBFactory + ---- instance.innerWidth : Number @@ -363,8 +474,8 @@ https://drafts.csswg.org/cssom-view/#dom-window-screen ---- instance.screenX : Number -X position of the top left corner of the browser in pixels. -See %%/Screen|screen%% for details about the size of the +X position of the top left corner of the browser in pixels. +See %%/Screen|screen%% for details about the size of the screen. @@ -380,8 +491,8 @@ https://drafts.csswg.org/cssom-view/#dom-window-screenx ---- instance.screenY : Number -Y position of the top left corner of the browser in pixels. -See %%/Screen|screen%% for details about the size of the +Y position of the top left corner of the browser in pixels. +See %%/Screen|screen%% for details about the size of the screen. @@ -398,8 +509,8 @@ https://drafts.csswg.org/cssom-view/#dom-window-screeny ---- prototype.btoa(encoded : String) : String -Converts a unicode/binary string into an ascii encoded string -(%%http://en.wikipedia.org/wiki/Base64|base64%%). +Converts a unicode/binary string into an ascii encoded string +(%%http://en.wikipedia.org/wiki/Base64|base64%%). See also %%#atob|**atob()**%%. @@ -414,12 +525,12 @@ See also %%#atob|**atob()**%%. Spec: -http://www.whatwg.org/specs/web-apps/current-work/#dom-windowbase64-btoa +https://html.spec.whatwg.org/#dom-windowbase64-btoa ---- prototype.atob(unencoded : String) : String -Converts an ascii encoded string +Converts an ascii encoded string (%%http://en.wikipedia.org/wiki/Base64|base64%%) into a unicode/binary string. See also %%#btob|**btob()**%%. @@ -437,7 +548,7 @@ See also %%#btob|**btob()**%%. Spec: -http://www.whatwg.org/specs/web-apps/current-work/#dom-windowbase64-atob +https://html.spec.whatwg.org/#dom-windowbase64-atob ---- prototype.setTimeout(callback : Function, [timeout = 0: Number, [...]]) : Number @@ -445,7 +556,7 @@ prototype.setTimeout(callback : Function, [timeout = 0: Number, [...]]) : Number Schedules **callback** to be called once after **timeout** milliseconds. Any extra parameters after **timeout** are passed to **callback**. -Returns a unique handle that can be passed to %%#clearTimeout|**clearTimeout()**%% +Returns a unique handle that can be passed to %%#clearTimeout|**clearTimeout()**%% to stop **callback** from being called. See also %%#setInterval|**setInterval()**%% and %%#requestAnimationFrame|**requestAnimationFrame()**%%. @@ -462,16 +573,16 @@ See also %%#setInterval|**setInterval()**%% and %%#requestAnimationFrame|**reque Spec: -http://www.whatwg.org/specs/web-apps/current-work/#dom-windowtimers-settimeout +https://html.spec.whatwg.org/#dom-windowtimers-settimeout ---- prototype.setTimeout(callback : String, [timeout = 0: Number, [...]]) : Number -Same as %%#setTimeout_Function_Number_dotdotdot|setTimeout()%% where the +Same as %%#setTimeout_Function_Number_dotdotdot|setTimeout()%% where the **callback** string is passed to %%/Global#eval|eval%% when the time has elapsed. Spec: -http://www.whatwg.org/specs/web-apps/current-work/#dom-windowtimers-settimeout +https://html.spec.whatwg.org/#dom-windowtimers-settimeout ---- prototype.clearTimeout(handle : Number) : undefined @@ -492,41 +603,481 @@ Stops a timeout from running. **handle** is the value returned by %%#setTimeout
+---- +prototype.createImageBitmap(source : HTMLImageElement) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : HTMLImageElement, [options : { \ + imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \ + premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \ + colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \ + resizeWidth : Number, \ + resizeHeight : Number, \ + resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \ + }]) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : HTMLImageElement, sx : Number, sy : Number, sw : Number, sh : Number) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : HTMLImageElement, \ + sx : Number, sy : Number, sw : Number, sh : Number, \ + [options : { \ + imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \ + premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \ + colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \ + resizeWidth : Number, \ + resizeHeight : Number, \ + resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \ + }]) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : HTMLVideoElement) : Promise + + +
+ + +
+ +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : HTMLVideoElement, [options : { \ + imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \ + premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \ + colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \ + resizeWidth : Number, \ + resizeHeight : Number, \ + resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \ + }]) : Promise + + +
+ + +
+ +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : HTMLCanvasElement) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : HTMLCanvasElement, [options : { \ + imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \ + premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \ + colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \ + resizeWidth : Number, \ + resizeHeight : Number, \ + resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \ + }]) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : Blob) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : Blob, [options : { \ + imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \ + premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \ + colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \ + resizeWidth : Number, \ + resizeHeight : Number, \ + resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \ + }]) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : ImageData) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : ImageData, [options : { \ + imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \ + premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \ + colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \ + resizeWidth : Number, \ + resizeHeight : Number, \ + resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \ + }]) : Promise + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + +---- +prototype.createImageBitmap(source : ImageBitmap, [options : { \ + imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \ + premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \ + colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \ + resizeWidth : Number, \ + resizeHeight : Number, \ + resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \ + }]) : Promise + + + + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + ---- prototype.requestAnimationFrame(callback(time : Number) : undefined) : Number -Schedules **callback** to be called before the next time the browser renders a -frame to the screen. Must be called each time you'd like to schedule another +Schedules **callback** to be called before the next time the browser renders a +frame to the screen. Must be called each time you'd like to schedule another frame. -The **time** parameter to callback is the number of milliseconds since the +The **time** parameter to callback is the number of milliseconds since the page loaded. -Returns a unique handle that can be passed to %%#cancelAnimationFrame|**cancelAnimationFrame()**%% +Returns a unique handle that can be passed to %%#cancelAnimationFrame|**cancelAnimationFrame()**%% to stop **callback** from being called. + +
---- prototype.cancelAnimationFrame(handle : Number) : undefined -Stops an animation frame callback from running. **handle** is the +Stops an animation frame callback from running. **handle** is the value returned by %%#requestAnimationFrame|**requestAnimationFrame()**%%. @@ -546,10 +1097,10 @@ value returned by %%#requestAnimationFrame|**requestAnimationFrame()**%%. ---- prototype.setInterval(callback : Function, [timeout : Number, [...]]) : Number -Schedules **callback** to be called repeatedly, every **timeout** milliseconds. +Schedules **callback** to be called repeatedly, every **timeout** milliseconds. Any extra parameters after **timeout** are passed to **callback**. -Returns a unique handle that can be passed to %%#clearInterval|**clearInterval()**%% +Returns a unique handle that can be passed to %%#clearInterval|**clearInterval()**%% to stop **callback** from being called. See also %%#setTimeout|**setTimeout()**%% and %%#requestAnimationFrame|**requestAnimationFrame()**%%. @@ -562,9 +1113,9 @@ See also %%#setTimeout|**setTimeout()**%% and %%#requestAnimationFrame|**request console.log('in callback count=' + callCount); console.log(' parameter1=' + parameter1); console.log(' parameter2=' + parameter2); - + callCount++; - if (callCount === 5) { + if (callCount === 3) { clearInterval(handle); } }, 500, 'foo', 'bar'); @@ -575,13 +1126,13 @@ See also %%#setTimeout|**setTimeout()**%% and %%#requestAnimationFrame|**request ---- prototype.setInterval(callback : String, [timeout : Number, [...]]) : Number -Same as %%#setInterval_Function_Number_dotdotdot|setInterval()%% where the +Same as %%#setInterval_Function_Number_dotdotdot|setInterval()%% where the **callback** string is passed to %%/Global#eval|eval%% when the time has elapsed. ---- prototype.clearInterval(handle : Number) : undefined -Stops an %%#setInterval|**setInterval()**%% callback from running. +Stops an %%#setInterval|**setInterval()**%% callback from running. **handle** is the value returned by **setInterval()**. @@ -592,7 +1143,7 @@ Stops an %%#setInterval|**setInterval()**%% callback from running. console.log('in callback count=' + callCount); console.log(' parameter1=' + parameter1); console.log(' parameter2=' + parameter2); - + callCount++; if (callCount === 5) { clearInterval(handle); @@ -613,7 +1164,7 @@ prototype.close() : undefined ---- prototype.fetch(url : String, [requestInit : Object]) : Promise -Fetches the specified url. See alse %%/Request|Request%% and %%/Response|Response%%. +Fetches the specified url. See also %%/Request|Request%% and %%/Response|Response%%. + + Spec: https://fetch.spec.whatwg.org/#dom-global-fetch @@ -646,25 +1211,26 @@ prototype.stop() : undefined ---- prototype.open([url : String, [target = '_blank' : String, [features : String, [replace : Boolean]]]]) : Window -Opens the specified **url**. +Opens a new tab or window for the specified **url**.
**url**
-the url to open. - +the url to open or **''** to open an empty window.
**target**
must be one of: - **'_blank'** (open in new window, the default), - **'_parent'** (open in parent page/frame), - **'_self'** (open in current page/frame), - **'_top'** (open in top page), - **'<name>'** (open in the window with the specified name). +
+
**'_blank'**
open in new window, the default +
**'_parent'**
open in parent page/frame +
**'_self'**
open in current page/frame +
**'_top'**
open in top page +
**'<name>'**
open in the window with the specified name +
**features** @@ -679,7 +1245,23 @@ pass **true** to replace the contents instead of opening a new window.
- + + + + ---- prototype.alert(message : String) : undefined @@ -688,9 +1270,9 @@ Displays a message box to the user with the specified message. Script execution is paused while the message box is displayed. -See also -%%#confirm|**confirm()**%% -and +See also +%%#confirm|**confirm()**%% +and %%#prompt|**prompt()**%%. @@ -701,13 +1283,13 @@ and prototype.confirm(message : String) : Boolean Displays an Ok/Cancel message box to the user with the specified message. -Returns **true** if the user clicked Ok. +Returns **true** if the user clicked Ok. Script execution is paused while the message box is displayed. -See also -%%#alert|**alert()**%% -and +See also +%%#alert|**alert()**%% +and %%#prompt|**prompt()**%%. @@ -733,7 +1315,7 @@ https://drafts.csswg.org/cssom-view/#dom-window-matchmedia ---- prototype.prompt(message : String, [default : String]) : String -Displays a message box containing an input box to the user with +Displays a message box containing an input box to the user with the specified message. The input box will be prepopulated with **default** if it is specified. @@ -742,9 +1324,9 @@ ok and **null** if they click cancel. Script execution is paused while the message box is displayed. -See also -%%#alert|**alert()**%% -and +See also +%%#alert|**alert()**%% +and %%#confirm|**confirm()**%%. @@ -766,11 +1348,143 @@ and ---- prototype.print() : undefined +---- +prototype.showDirectoryPicker([options : { \ + id : String, \ + startIn : Object /* Either a %%/String|String%% or %%/FileSystemHandle|FileSystemHandle%% */, \ + }]) : Promise + +Specifying **options.id** will cause the browser to remember the directory of the chosen file +so another call to **showSaveFilePicker** with the same **id** will start in that directory. + + +startIn:
+ + +
+ +Spec: +https://wicg.github.io/file-system-access/#dom-window-showdirectorypicker + +---- +prototype.showOpenFilePicker([options : { \ + excludeAcceptAllOption : Boolean, \ + id : String, \ + multiple : Boolean, \ + startIn : Object /* Either a %%/String|String%% or %%/FileSystemHandle|FileSystemHandle%% */, \ + types : Array, \ + }]) : Promise> + +Specifying **options.id** will cause the browser to remember the directory of the chosen file +so another call to **showSaveFilePicker** with the same **id** will start in that directory. +See %%https://wicg.github.io/file-system-access/#api-filepickeroptions-starting-directory|spec%% for +complete details. + + +
+
+startIn:
+ +
+ + + +Spec: +https://wicg.github.io/file-system-access/#dom-window-showopenfilepicker + +---- +prototype.showSaveFilePicker([options : { \ + excludeAcceptAllOption : Boolean, \ + id : String, \ + multiple : Boolean, \ + startIn : Object /* Either a %%/String|String%% or %%/FileSystemHandle|FileSystemHandle%% */, \ + suggestedName : String, \ + types : Array, \ + }]) : Promise + + +Specifying **options.id** will cause the browser to remember the directory of the chosen file +so another call to **showSaveFilePicker** with the same **id** will start in that directory. + + + + +Spec: +https://wicg.github.io/file-system-access/#dom-window-showsavefilepicker ---- prototype.showModalDialog(url : String, [arguments : Object]) : Object + ---- prototype.getComputedStyle(element : Element, [pseudoElement : String]) : CSSStyleDeclaration @@ -797,18 +1511,119 @@ apply to **element**. See also %%/HTMLElement#style|**element.style**%%. Spec: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle +---- +prototype.postMessage(message : Object, expectedOrigin : String, [transfer : Array]) : undefined + +

+Sends **message** to **this** (usually something other than the global +%%/Global#window|**window**%%, like the %%#parent|**parent**%%, iframe +%%/HTMLIFrameElement#contentWindow|**contentwindow**%%, or return value of +%%#open|**open()**%%). The **message** will be available in the +%%/MessageEvent#data|**MessageEvent.data**%% property on the event passed to +the %%#message|onmessage%% event listener. To ensure the window's content has +not changed while the message is in flight, **expectedOrigin** must match +%%/Location#origin|**this.origin**%% (or be **'*'** to ignore check and +possibly send the message to another site). The elements of +**objectsToTransfer** will be transferred to the JavaScript context that +owns **this** and no longer available in the context that called +**postMessage()**. +

+

+See also %%/BroadcastChannel|BroadcastChannel%% and %%/MessageChannel|MessageChannel%%. +

+ + + + + + + + +---- +prototype.reportError(error : Object) : undefined + +Fires the %%#onerror|error%% event with the specified **error**. Unlike **throw error**, +this will always cause the error event to fire, even if there is a **catch** handler +around the call. + + + + + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#runtime-script-errors + +---- +prototype.structuredClone(value : Object, [transfer : Array]) : Object + +Creates a deep clone of **value**. Elements of **value** in **transfer** will be +transferred to the new object and will no longer be useable on **value**. + + +const toClone = { a: 1, b: 2 }; +const clone = structuredClone(toClone); + +console.dir(toClone); +console.dir(clone); + +toClone.a = 'changed'; + +console.dir(toClone); +console.dir(clone); + + +Spec: +https://html.spec.whatwg.org/multipage/structured-data.html#structured-cloning ---- event.abort : listener(event : Event) : undefined + ---- event.afterprint : listener(event : Event) : undefined + ---- event.beforeprint : listener(event : Event) : undefined + ---- event.beforeunload : listener(event : BeforeUnloadEvent) : String -Called before the page is navigated away from. Return a non-empty -String from **listener** to display a dialog box that gives the user +Called before the page is navigated away from. Return a non-empty +String from **listener** to display a dialog box that gives the user the option to remain on the current page. @@ -825,44 +1640,87 @@ the option to remain on the current page. ---- event.blur : listener(event : Event) : undefined + ---- event.canplay : listener(event : Event) : undefined + ---- event.canplaythrough : listener(event : Event) : undefined + ---- event.change : listener(event : Event) : undefined + ---- event.click : listener(event : Event) : undefined + ---- event.contextmenu : listener(event : Event) : undefined + ---- event.cuechange : listener(event : Event) : undefined + ---- event.dblclick : listener(event : Event) : undefined + ---- event.drag : listener(event : Event) : undefined + ---- event.dragend : listener(event : Event) : undefined + ---- event.dragenter : listener(event : Event) : undefined + ---- event.dragleave : listener(event : Event) : undefined + ---- event.dragover : listener(event : Event) : undefined + ---- event.dragstart : listener(event : Event) : undefined + ---- event.drop : listener(event : Event) : undefined + ---- event.durationchange : listener(event : Event) : undefined + ---- event.emptied : listener(event : Event) : undefined + ---- event.ended : listener(event : Event) : undefined + ---- -event.error : listener(event : Event, source : String, line : Number, column : Number) : undefined +event.error : listener(message : string, source : String, line : Number, column : Number, error : Object) : undefined + +Fired when an unhandled exception is thrown or an error is passed to %%#reportError|reportError()%%. + + + + + ---- event.focus : listener(event : Event) : undefined + ---- event.hashchange : listener(event : HashChangeEvent) : undefined @@ -879,30 +1737,41 @@ Fired when the **'#'** portion of the url changes. See also console.log('oldURL: ' + event.oldURL); console.log('newURL: ' + event.newURL); }; - ---- event.input : listener(event : Event) : undefined + ---- event.invalid : listener(event : Event) : undefined + ---- event.keydown : listener(event : Event) : undefined + ---- event.keypress : listener(event : Event) : undefined + ---- event.keyup : listener(event : Event) : undefined + ---- event.load : listener(event : Event) : undefined + ---- event.loadeddata : listener(event : Event) : undefined + ---- event.loadedmetadata : listener(event : Event) : undefined + ---- event.loadstart : listener(event : Event) : undefined + ---- event.message : listener(event : Event) : undefined + +Fired when %%#postMessage|**postMessage()**%% is called on **this**. + ---- event.mousedown : listener(event : Event) : undefined ---- @@ -935,40 +1804,151 @@ event.popstate : listener(event : PopStateEvent) : undefined Called when the page navigation changes. See also %%/History|History%%. Spec: -http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate +https://html.spec.whatwg.org/#handler-window-onpopstate ---- event.progress : listener(event : Event) : undefined + ---- event.ratechange : listener(event : Event) : undefined + ---- event.reset : listener(event : Event) : undefined + ---- event.resize : listener(event : Event) : undefined + ---- event.scroll : listener(event : Event) : undefined + ---- event.seeked : listener(event : Event) : undefined + ---- event.seeking : listener(event : Event) : undefined + ---- event.select : listener(event : Event) : undefined + ---- event.show : listener(event : Event) : undefined + ---- event.stalled : listener(event : Event) : undefined ----- -event.storage : listener(event : Event) : undefined + ---- event.submit : listener(event : Event) : undefined + ---- event.suspend : listener(event : Event) : undefined + ---- event.timeupdate : listener(event : Event) : undefined + ---- event.unload : listener(event : Event) : undefined + ---- event.volumechange : listener(event : Event) : undefined + ---- event.storage : listener(event : StorageEvent) : undefined +---- +event.unhandledrejection : listener(event : PromiseRejectionEvent) : undefined + +Fired when a %%/Promise|Promise%%'s reject handler is called or an exception is +thrown in an Promise executor function or in an async function. + + + + + +---- +event.copy : listener(event : ClipboardEvent) : undefined + +Bubbles: +true + +Cancelable: +true + +Spec: +https://w3c.github.io/clipboard-apis/#clipboard-event-copy + +---- +event.cut : listener(event : ClipboardEvent) : undefined + +Bubbles: +true + +Cancelable: +true + +Spec: +https://w3c.github.io/clipboard-apis/#clipboard-event-cut + +---- +event.paste : listener(event : ClipboardEvent) : undefined + +Bubbles: +true + +Cancelable: +true + +Spec: +https://w3c.github.io/clipboard-apis/#clipboard-event-paste + +---- +event.gamepadconnected : listener(event : GamepadEvent) : undefined + + +Press button on controller to connect. + + + +Spec: +https://w3c.github.io/gamepad/#event-gamepadconnected + +---- +event.gamepaddisconnected : listener(event : GamepadEvent) : undefined + + +Press button on controller to connect. + + + +Spec: +https://w3c.github.io/gamepad/#event-gamepaddisconnected diff --git a/content/Browser/xmlhttprequest.jsdoc b/content/Browser/xmlhttprequest.jsdoc index 70ece37..b6eaa58 100644 --- a/content/Browser/xmlhttprequest.jsdoc +++ b/content/Browser/xmlhttprequest.jsdoc @@ -3,29 +3,30 @@ XMLHttpRequest : EventTarget XMLHttpRequest is used to make an http request to a server. It can be used to download data by making a GET request (pass **'GET'** as the method when calling %%#open|**open()**%%) or to send data to the server by making a POST -request (send **'POST'** as the method when calling %%#open|**open()**%%). +request (send **'POST'** as the method when calling %%#open|**open()**%%). See also +%%/Window#fetch|fetch%%. Spec: -http://www.w3.org/TR/XMLHttpRequest/#interface-xmlhttprequest +https://xhr.spec.whatwg.org/#interface-xmlhttprequest ---- new XMLHttpRequest() : XMLHttpRequest -Creates a new **XMLHttpRequest** object. Use %%#open|**open()**%% to +Creates a new **XMLHttpRequest** object. Use %%#open|**open()**%% to specify the url of the resource to request and %%#send|**send()**%% to begin the request. var request = new XMLHttpRequest(); request.open('GET', '/', /* async = */ false); -request.send(); +request.send(); console.log('response head: ' + request.responseText.substring(0, 15) + '...'); ---- instance.readyState : Number -The current state of **this**. Will be one of +The current state of **this**. Will be one of %%#UNSENT|**UNSENT**%%, %%#OPENED|**OPENED**%%, %%#HEADERS_RECEIVED|**HEADERS_RECEIVED**%%, @@ -39,7 +40,7 @@ request.onreadystatechange = function() { }; console.log('Before open: ' + request.readyState); request.open('GET', '/'); -request.send(); +request.send(); console.log('After send: ' + request.readyState); @@ -51,7 +52,7 @@ instance.responseType : String Determines the type returned by %%#response|**response**%%. -Must be set to one of the following: +Must be set to one of the following: @@ -102,7 +103,7 @@ request.onload = function() { console.log(request.response); console.log(request.response.byteLength); }; -request.send(); +request.send(); ---- @@ -119,7 +120,7 @@ request.onload = function() { console.log(request.response); console.log(request.response.byteLength); }; -request.send(); +request.send(); ReadOnly: @@ -128,14 +129,14 @@ true ---- instance.responseText : String -Returns the response from the server as a string. +Returns the response from the server as a string. Only valid after the %%#onload|**load**%% event fires and if %%#responseType|**responseType**%% is set to **''** (the default) or **'text'**. var request = new XMLHttpRequest(); request.open('GET', '/', /* async = */ false); -request.send(); +request.send(); console.log(request.responseText.substring(0, 150)); console.log('...'); @@ -153,19 +154,19 @@ true ---- prototype.open(method : String, url : String, [async = true : Boolean, [user : String, [password : String]]]) : undefined -Specifies the **url** to read from and the http method +Specifies the **url** to read from and the http method (**'GET'**, **'POST'**, **'PUT'**, **'DELETE'**, etc) -to use when reading the url. If **async** is **true**, the request will +to use when reading the url. If **async** is **true**, the request will be asynchronous and you should provide an -%%#onload|**onload**%% callback to be called when the read completes. -In general, it is best to use the asynchronous request so the browser +%%#onload|**onload**%% callback to be called when the read completes. +In general, it is best to use the asynchronous request so the browser remains responsive while the request is in progress. Call %%#send|**send()**%% to begin the request. var syncRequest = new XMLHttpRequest(); syncRequest.open('GET', '/', /* async = */ false); -syncRequest.send(); +syncRequest.send(); console.log('sync status code: ' + syncRequest.status); console.log('sync response length: ' + syncRequest.responseText.length); @@ -196,7 +197,7 @@ instance.withCredentials : Boolean ---- instance.upload : XMLHttpRequestUpload -Returns an %%/XMLHttpRequestUpload|**XMLHttpRequestUpload**%% object +Returns an %%/XMLHttpRequestUpload|**XMLHttpRequestUpload**%% object associated with this XMLHttpRequest that can be used to track the upload status of the %%#send|**send()**%% call. @@ -210,27 +211,27 @@ prototype.send() : undefined ---- prototype.send(data : ArrayBuffer) : undefined -Sends the specified data to the server. +Sends the specified data to the server. ---- prototype.send(data : Blob) : undefined -Sends the specified Blob to the server. +Sends the specified Blob to the server. ---- prototype.send(data : Document) : undefined -Sends the specified document to the server. +Sends the specified document to the server. ---- prototype.send(data : String) : undefined -Sends the specified string to the server. +Sends the specified string to the server. ---- prototype.send(data : FormData) : undefined -Sends the specified FormData to the server. +Sends the specified FormData to the server.
@@ -245,7 +246,7 @@ Sends the specified FormData to the server. var request = new XMLHttpRequest(); // POST to httpbin which returns the POST data as JSON - request.open('POST', 'http://httpbin.org/post', /* async = */ false); + request.open('POST', 'https://httpbin.org/post', /* async = */ false); var formData = new FormData(document.getElementById('test-form')); request.send(formData); @@ -263,18 +264,18 @@ prototype.abort() : undefined ---- instance.status : Number -The http status code for the request. See %%#statusText|**statusText**%% for +The http status code for the request. See %%#statusText|**statusText**%% for a description of the code. var request = new XMLHttpRequest(); request.open('GET', '/', /* async = */ false); -request.send(); +request.send(); console.log('status code: ' + request.status); request = new XMLHttpRequest(); -request.open('GET', 'www.example.com/', /* async = */ false); -request.send(); +request.open('GET', 'NonExistentPage/', /* async = */ false); +request.send(); console.log('status code: ' + request.status); @@ -286,16 +287,15 @@ instance.statusText : String A description of the %%#status|status return code%%. - var request = new XMLHttpRequest(); request.open('GET', '/', /* async = */ false); -request.send(); +request.send(); console.log('status: ' + request.statusText); request = new XMLHttpRequest(); -request.open('GET', 'www.example.com/', /* async = */ false); -request.send(); +request.open('GET', 'NonExistentPage/', /* async = */ false); +request.send(); console.log('status: ' + request.statusText); @@ -311,7 +311,7 @@ Returns the value for the specified **header**. Returns var request = new XMLHttpRequest(); request.open('GET', '/', /* async = */ false); -request.send(); +request.send(); console.log(request.getResponseHeader('content-type')); @@ -324,7 +324,7 @@ the response. var request = new XMLHttpRequest(); request.open('GET', '/', /* async = */ false); -request.send(); +request.send(); console.log(request.getAllResponseHeaders()); diff --git a/content/CSS/cssstyledeclaration.jsdoc b/content/CSS/cssstyledeclaration.jsdoc index e383053..84c5f1d 100644 --- a/content/CSS/cssstyledeclaration.jsdoc +++ b/content/CSS/cssstyledeclaration.jsdoc @@ -955,3 +955,47 @@ instance.textOrientation : String instance.transformBox : String ---- instance.hyphens : String + +---- +prototype.getPropertyValue(name : String) : String + +Gets the value of the specified CSS property/variable. + + + +
div with property
+ +
+ +---- +prototype.setPropertyValue(name : String, value : String, [priority : String]) : String + +Sets the value of the specified CSS property/variable. If specified, **priority** must be one of **'important'** or **''**. + + + +
div with property
+ +
diff --git a/content/Canvas/CanvasCaptureMediaStreamTrack.jsdoc b/content/Canvas/CanvasCaptureMediaStreamTrack.jsdoc new file mode 100644 index 0000000..aed9b82 --- /dev/null +++ b/content/Canvas/CanvasCaptureMediaStreamTrack.jsdoc @@ -0,0 +1,66 @@ +CanvasCaptureMediaStreamTrack : MediaStreamTrack + +Available through +**%%/HTMLCanvasElement#captureStream|canvas.captureStream()%%.%%/MediaStream#getTracks|getTracks()%%[0]**. + +Spec: +https://w3c.github.io/mediacapture-fromelement/#dom-canvascapturemediastreamtrack + +---- +instance.canvas : HTMLCanvasElement + +The canvas the stream is captured from. + + + + + + +ReadOnly: +true + +Spec: +https://w3c.github.io/mediacapture-fromelement/#dom-canvascapturemediastreamtrack-canvas + +---- +prototype.requestFrame() : void + +Forces the video to update with the latest contents of the canvas. Use when providing +a **requestedFrameRate** to %%/HTMLCanvasElement|canvas.captureStream()%% to update the +contents of the video manually. + + + + + + + + +Spec: +https://w3c.github.io/mediacapture-fromelement/#dom-canvascapturemediastreamtrack-requestframe + diff --git a/content/Canvas/ImageBitmap.jsdoc b/content/Canvas/ImageBitmap.jsdoc new file mode 100644 index 0000000..8b64681 --- /dev/null +++ b/content/Canvas/ImageBitmap.jsdoc @@ -0,0 +1,28 @@ +ImageBitmap : Object + +An image that can be passed to most %%/CanvasRenderingContext|CanvasRenderingContext%% +methods in place of %%/HTMLImageElement|HTMLImageElements%%. ImageBitmaps are +more efficient than creating %%/HTMLImageElement|HTMLImageElements%% DOM element +if you don't need to render the element directly in the page. +Created via %%/Window#createImageBitmap|window.createImageBitmap()%%. +See also %%/ImageBitmapRenderingContext|ImageBitmapRenderingContext%%. + +Spec: +https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap + +---- +instance.height : Number + +ReadOnly: +true + +---- +instance.width : Number + +ReadOnly: +true + +---- +prototype.close() : undefined + +Releases the memory holding the bitmap data. diff --git a/content/Canvas/ImageBitmapRenderingContext.jsdoc b/content/Canvas/ImageBitmapRenderingContext.jsdoc new file mode 100644 index 0000000..2cac3f2 --- /dev/null +++ b/content/Canvas/ImageBitmapRenderingContext.jsdoc @@ -0,0 +1,21 @@ +ImageBitmapRenderingContext : Object + +Constructed by passing **'bitmaprenderer'** to %%/HTMLCanvasElement|**canvas.getContext('bitmaprenderer')**%%. + +You can pass an additional options argument: + + +{ + alpha : Boolean /* Default = true */ +} + + + +Spec: +https://html.spec.whatwg.org/multipage/canvas.html#imagebitmaprenderingcontext + +---- +instance.canvas : HTMLCanvasElement + +---- +prototype.transferFromImageBitmap(bitmap : ImageBitmap) : undefined diff --git a/content/Canvas/ImageData.jsdoc b/content/Canvas/ImageData.jsdoc index 85f2902..0dd3b2d 100644 --- a/content/Canvas/ImageData.jsdoc +++ b/content/Canvas/ImageData.jsdoc @@ -1,15 +1,65 @@ ImageData : Object -Contains the pixel data of for a %%/CanvasRenderingContext2D|**CanvasRenderingContext2D**%%. +Contains the pixel data of a %%/CanvasRenderingContext2D|**CanvasRenderingContext2D**%%. -Created through +Can also be created through %%/CanvasRenderingContext2D#createImageData|**CanvasRenderingContext2D.createImageData()**%% or %%/CanvasRenderingContext2D#createImageData|**CanvasRenderingContext2D.getImageData()**%%. - Spec: -http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#imagedata +https://html.spec.whatwg.org/#imagedata + +---- +new ImageData(width : Number, height : Number) : ImageData + +Creates an ImageData of the specified size filled with transparent black. + + + + + + + +---- +new ImageData(data : Uint8ClampedArray, width : Number, height : Number) : ImageData + +Creates an ImageData of the specified size with the specified data. **data[0]** is +the Red component of the first pixel (top left), **data[1]** is the Green component of the first pixel, +**data[2]** is the Blue component of the first pixel, +**data[3]** is the Alpha component of the first pixel, +**data[4]** is the Red component of the second pixel (one right of top left), etc. + + + + + ---- instance.width : Number diff --git a/content/Canvas/canvasgradient.jsdoc b/content/Canvas/canvasgradient.jsdoc index 444bd21..e6b593f 100644 --- a/content/Canvas/canvasgradient.jsdoc +++ b/content/Canvas/canvasgradient.jsdoc @@ -5,11 +5,11 @@ or %%/CanvasRenderingContext2D#strokeStyle|**strokeStyle**%% of a %%/CanvasRenderingContext2D|**CanvasRenderingContext2D**%%. Created through -%%/CanvasRenderingContext2D#createLinearGradient|**createLinearGradient()**%% or +%%/CanvasRenderingContext2D#createLinearGradient|**createLinearGradient()**%% or %%/CanvasRenderingContext2D#createRadialGradient|**createRadialGradient()**%%. Spec: -http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#canvasgradient +https://html.spec.whatwg.org/#canvasgradient ---- prototype.addColorStop(offset : Number, color : String) : undefined diff --git a/content/Canvas/canvaspattern.jsdoc b/content/Canvas/canvaspattern.jsdoc index 1650105..4889842 100644 --- a/content/Canvas/canvaspattern.jsdoc +++ b/content/Canvas/canvaspattern.jsdoc @@ -8,4 +8,4 @@ Created through %%/CanvasRenderingContext2D#createPattern|**createPattern()**%%. Spec: -http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#canvaspattern +https://html.spec.whatwg.org/#canvaspattern diff --git a/content/Canvas/canvasrenderingcontext.jsdoc b/content/Canvas/canvasrenderingcontext.jsdoc index bf0c0e3..a5340cb 100644 --- a/content/Canvas/canvasrenderingcontext.jsdoc +++ b/content/Canvas/canvasrenderingcontext.jsdoc @@ -1,10 +1,11 @@ CanvasRenderingContext : Object The object used to render into a %%/HTMLCanvasElement|Canvas%% element. -There are currently 2 types of contexts, the -%%/CanvasRenderingContext2D|**CanvasRenderingContext2D**%% +There are currently 3 types of contexts, +%%/CanvasRenderingContext2D|**CanvasRenderingContext2D**%%, +%%/ImageBitmapRenderingContext|**ImageBitmapRenderingContext**%%, and %%/WebGLRenderingContext|**WebGLRenderingContext**%%. You can retrieve -these contexts for the canvas by passing in **'2d'** or **'webgl'** +these contexts for the canvas by passing in **'2d'**, **'bitmaprenderer'**, or **'webgl'** into %%/HTMLCanvasElement#getContext|**canvas.getContext()**%%. diff --git a/content/Canvas/canvasrenderingcontext2d.jsdoc b/content/Canvas/canvasrenderingcontext2d.jsdoc index a4b56c4..dd5f049 100644 --- a/content/Canvas/canvasrenderingcontext2d.jsdoc +++ b/content/Canvas/canvasrenderingcontext2d.jsdoc @@ -1,16 +1,13 @@ CanvasRenderingContext2D : CanvasRenderingContext The **CanvasRenderingContext2D** is an object that is used to issue 2D drawing -commands to a %%/HTMLCanvasElement|canvas%%. It is obtained by passing -**'2d'** to the -%%HTMLCanvasElement#getContext|**HTMLCanvasElement.getContext()**%% +commands to a %%/HTMLCanvasElement|canvas%%. It is obtained by passing +**'2d'** to the +%%HTMLCanvasElement#getContext|**HTMLCanvasElement.getContext()**%% method. Spec: -http://www.w3.org/TR/2012/CR-2dcontext-20121217/ - -Spec2: -http://dev.w3.org/html5/2dcontext/ +https://html.spec.whatwg.org/#canvasrenderingcontext2d ---- instance.canvas : HTMLCanvasElement @@ -22,13 +19,13 @@ The canvas that owns this context.
Spec: -http://dev.w3.org/html5/2dcontext/#dom-context-2d-canvas +https://html.spec.whatwg.org/#dom-context-2d-canvas ReadOnly: true @@ -39,21 +36,21 @@ prototype.save() : undefined Saves the current state of the **this** onto the stack. Call %%#restore|**restore()**%% to restore the saved state. -The saved state consists of: %%#setTransform|transformation matrix%%, +The saved state consists of: %%#setTransform|transformation matrix%%, %%#clip|clip region%%, -%%#fillStyle|**fillStyle**%%, -%%#font|**font**%%, -%%#globalAlpha|**globalAlpha**%%, -%%#globalCompositeOperation|**globalCompositeOperation**%%, -%%#lineCap|**lineCap**%%, -%%#lineJoin|**lineJoin**%%, -%%#lineWidth|**lineWidth**%%, -%%#miterLimit|**miterLimit**%%, -%%#shadowBlur|**shadowBlur**%%, -%%#shadowColor|**shadowColor**%%, -%%#shadowOffsetX|**shadowOffsetX**%%, -%%#shadowOffsetY|**shadowOffsetY**%%, -%%#strokeStyle|**strokeStyle**%%, +%%#fillStyle|**fillStyle**%%, +%%#font|**font**%%, +%%#globalAlpha|**globalAlpha**%%, +%%#globalCompositeOperation|**globalCompositeOperation**%%, +%%#lineCap|**lineCap**%%, +%%#lineJoin|**lineJoin**%%, +%%#lineWidth|**lineWidth**%%, +%%#miterLimit|**miterLimit**%%, +%%#shadowBlur|**shadowBlur**%%, +%%#shadowColor|**shadowColor**%%, +%%#shadowOffsetX|**shadowOffsetX**%%, +%%#shadowOffsetY|**shadowOffsetY**%%, +%%#strokeStyle|**strokeStyle**%%, %%#textAlign|**textAlign**%%, and %%#textBaseline|**textBaseline**%%. @@ -78,7 +75,7 @@ The saved state consists of: %%#setTransform|transformation matrix%%, ---- prototype.restore() : undefined -Restores the state from the the previous %%#save|**save()**%% call. +Restores the state from the the previous %%#save|**save()**%% call. @@ -122,7 +119,7 @@ The alpha to use for subsequent paint operations. Must be between instance.globalCompositeOperation : String Determines how subsequent paint operations combine with the back buffer. Must be one of the following -(**source** refers to the current drawing operation and **destination** refers +(**source** refers to the current drawing operation and **destination** refers to the existing contents of the canvas): @@ -168,7 +165,7 @@ opaque in the destination.
- @@ -198,14 +195,14 @@ Defaults to **'source-over'**. @@ -584,30 +582,30 @@ IDL: void beginPath(); ---- -prototype.fill() : undefined +prototype.fill([fillRule = 'nonzero' : String]) : undefined Fills the current path with the current %%#fillStyle|**fillStyle**%%. +**fillRule** must be one of **'nonzero'** or **'evenodd'**. -IDL: - void fill(); - +Spec: +https://html.spec.whatwg.org/#dom-context-2d-fill ---- prototype.stroke() : undefined -Draws a line around the current path with the +Draws a line around the current path with the current %%#strokeStyle|**strokeStyle**%% and %%#lineWidth|**lineWidth**%%. @@ -616,7 +614,7 @@ current %%#strokeStyle|**strokeStyle**%% and @@ -759,8 +757,9 @@ Draws **image** to the canvas at **dx**, **dy** using the natural size of the im **image** can be either an %%/HTMLImageElement|**HTMLImageElement**%%, -%%/HTMLCanvasElement|**HTMLCanvasElement**%%, or -%%/HTMLVideoElement|**HTMLVideoElement**%%. +%%/HTMLCanvasElement|**HTMLCanvasElement**%%, +%%/HTMLVideoElement|**HTMLVideoElement**%%, or +%%/ImageBitmap|**ImageBitmap**%%. @@ -787,8 +786,9 @@ Draws **image** to the canvas at **dx**, **dy** of size **dw** by **dh**. **image** can be either an %%/HTMLImageElement|**HTMLImageElement**%%, -%%/HTMLCanvasElement|**HTMLCanvasElement**%%, or -%%/HTMLVideoElement|**HTMLVideoElement**%%. +%%/HTMLCanvasElement|**HTMLCanvasElement**%%, +%%/HTMLVideoElement|**HTMLVideoElement**%%, or +%%/ImageBitmap|**ImageBitmap**%%. @@ -809,14 +809,15 @@ IDL: ---- prototype.drawImage(image : HTMLImageElement, sx : Number, sy : Number, sw : Number, sh : Number, dx : Number, dy : Number, dw : Number, dh : Number) : undefined -Draws the subregion of **image** starting at **sx**, **sy** of size **sw** by **sh** +Draws the subregion of **image** starting at **sx**, **sy** of size **sw** by **sh** into the subregion of the canvas at **dx**, **dy** of size **dw** by **dh**. The image will be stretched and scaled if **sw**, **sh** does not match **dw** by **dh**. **image** can be either an %%/HTMLImageElement|**HTMLImageElement**%%, -%%/HTMLCanvasElement|**HTMLCanvasElement**%%, or -%%/HTMLVideoElement|**HTMLVideoElement**%%. +%%/HTMLCanvasElement|**HTMLCanvasElement**%%, +%%/HTMLVideoElement|**HTMLVideoElement**%%, or +%%/ImageBitmap|**ImageBitmap**%%. @@ -839,7 +840,7 @@ IDL: ---- prototype.createImageData(sw : Number, sh : Number) : ImageData -Creates a buffer of size **sw** by **sh** that can be filled with pixel +Creates a buffer of size **sw** by **sh** that can be filled with pixel data and later copied into the canvas using %%#putImageData|**putImageData()**%%. The buffer is initialized to transparent. @@ -870,7 +871,7 @@ IDL: ---- prototype.createImageData(imageData : ImageData) : ImageData -Creates a buffer of the same size as **imageData** that can be filled with pixel +Creates a buffer of the same size as **imageData** that can be filled with pixel data and later copied into the canvas using %%#putImageData|**putImageData()**%%. The buffer is initialized to transparent. @@ -897,8 +898,8 @@ IDL: ---- prototype.getImageData(sx : Number, sy : Number, sw : Number, sh : Number) : ImageData -Retrieves the contents of the canvas starting at **sx**, **sy** of -size **sw** by **sh**. +Retrieves the contents of the canvas starting at **sx**, **sy** of +size **sw** by **sh**. See also %%#createImageData|**createImageData()**%% and %%#putImageData|**putImageData()**%%. @@ -931,8 +932,8 @@ IDL: ---- prototype.putImageData(imageData : ImageData, dx : Number, dy : Number, [dirtyX : Number, dirtyY : Number, dirtyWidth : Number, dirtyHeight : Number]) : undefined -Copies the contents of **imageData** into the canvas at **dx**, **dy**. -If the **dirty** parameters are specified, only that region of the +Copies the contents of **imageData** into the canvas at **dx**, **dy**. +If the **dirty** parameters are specified, only that region of the **imageData** is copied. See also %%#createImageData|**createImageData()**%% and @@ -1015,7 +1016,7 @@ IDL: ---- prototype.translate(x : Number, y : Number) : undefined -Applies a translate transform to the current transform so +Applies a translate transform to the current transform so subsequent drawing operations are shifted by **x**, **y**. @@ -1041,7 +1042,7 @@ IDL: ---- prototype.transform(a : Number, b : Number, c : Number, d : Number, e : Number, f : Number) : undefined -Applies the following transform to the current transform. +Applies the following transform to the current transform.
**'destination-atop'**Draw the destination on the source but only keep pixels that were +Draw the destination on the source but only keep pixels that were opaque in the source.
@@ -1064,8 +1065,8 @@ Applies the following transform to the current transform. var translateX = 50; var translateY = 20; - context.transform( scale, 0, - 0, scale, + context.transform( scale, 0, + 0, scale, translateX, translateY); context.fillStyle = 'blue'; @@ -1077,6 +1078,113 @@ Applies the following transform to the current transform. IDL: void transform(double a, double b, double c, double d, double e, double f); +---- +prototype.setLineDash(pattern : Array) : undefined + +Defines how long the dash, gaps of stroke are. Set to an empty array to have +a solid line. See also %%#lineDashOffset|lineDashOffset%%. + + + + + + +---- +prototype.getTransform() : DOMMatrix + +Gets the current transform. +See also %%#setTransform|setTransform()%%. + + + + + + +Spec: +https://html.spec.whatwg.org/#dom-context-2d-gettransform + +---- +prototype.setTransform(matrix : Object) : undefined + +Same as **this.setTransform(%%/DOMMatrix#fromMatrix|DOMMatrix.fromMatrix(matrix)%%)**. + + + + + + +---- +prototype.setTransform(matrix : DOMMatrix) : undefined + +Replaces the current transform with specified **matrix**. +**matrix** can also be an Object that can be passed to +the %%/DOMMatrix|DOMMatrix%% constructor. + +See also %%#getTransform|getTransform()%%. + + + + + + +Spec: +https://html.spec.whatwg.org/#dom-context-2d-settransform-matrix ---- prototype.setTransform(a : Number, b : Number, c : Number, d : Number, e : Number, f : Number) : undefined @@ -1091,6 +1199,8 @@ Replaces the current transform with following matrix:
+See also %%#getTransform|getTransform()%%. + - IDL: interface CanvasLineStyles { // line caps/joins attribute double lineWidth; // (default 1) +---- +instance.lineDashOffset : Number + +Offsets the starting position of the line dash. See also %%#setLineDash|setLineDash()%%. + + + + + + ---- instance.lineCap : String -Determines the shape of line endings. Must be one of +Determines the shape of line endings. Must be one of **'butt'**, **'round'**, @@ -1167,7 +1328,7 @@ Defaults to **'butt'**. select.add(new Option(option, option)); }); - var draw = function() { + var draw = function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); @@ -1181,7 +1342,7 @@ Defaults to **'butt'**. context.lineTo(100,100); context.lineTo(180,20); context.stroke(); - + context.strokeStyle = 'white'; context.lineWidth = 1; context.stroke(); @@ -1196,7 +1357,7 @@ IDL: ---- instance.lineJoin : String -Determines how lines meet. Must be one of +Determines how lines meet. Must be one of **'miter'**, **'round'**, or @@ -1216,7 +1377,7 @@ Defaults to **'miter'**. select.add(new Option(option, option)); }); - var draw = function() { + var draw = function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); @@ -1230,7 +1391,7 @@ Defaults to **'miter'**. context.lineTo(100,100); context.lineTo(180,20); context.stroke(); - + context.strokeStyle = 'white'; context.lineWidth = 1; context.stroke(); @@ -1245,7 +1406,7 @@ IDL: ---- instance.miterLimit : Number -Adjusts the maximum distance the miter point can extend from +Adjusts the maximum distance the miter point can extend from the joint. @@ -1258,12 +1419,12 @@ the joint. context.lineWidth = 20; context.miterLimit = 1; - + // Top left - context.beginPath(); + context.beginPath(); context.moveTo(20,20); context.lineTo(60,60); context.lineTo(100,20); context.stroke(); - + // Top right context.beginPath(); context.moveTo(140,20); context.lineTo(155,60); context.lineTo(170,20); @@ -1272,10 +1433,10 @@ the joint. context.miterLimit = 10; // Bottom left - context.beginPath(); + context.beginPath(); context.moveTo(20,80); context.lineTo(60,120); context.lineTo(100,80); context.stroke(); - + // Bottom right context.beginPath(); context.moveTo(140,80); context.lineTo(155,120); context.lineTo(170,80); @@ -1284,7 +1445,7 @@ the joint. Spec: -http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-linecap +https://html.spec.whatwg.org/#dom-context-2d-linecap IDL: attribute double miterLimit; // (default 10) @@ -1332,7 +1493,7 @@ Defaults to **'start'**. select.add(new Option(option, option)); }); - var draw = function() { + var draw = function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); @@ -1351,7 +1512,7 @@ Defaults to **'start'**. Spec: -http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-textalign +https://html.spec.whatwg.org/#dom-context-2d-textalign IDL: @@ -1363,7 +1524,7 @@ instance.textBaseline : String Determines which edge of the text to place at the **y** coordinate passed to %%#fillText|**fillText**%% or %%#strokeText|**strokeText**%%. -Must be one of **'top'**, **'hanging'**, **'middle'**, **'alphabetic'**, +Must be one of **'top'**, **'hanging'**, **'middle'**, **'alphabetic'**, **'ideographic'**, **'bottom'**. Defaults to **'alphabetic'**. @@ -1372,32 +1533,51 @@ Defaults to **'alphabetic'**. Spec: -http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-textbaseline +https://html.spec.whatwg.org/#dom-context-2d-textbaseline IDL: attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic") @@ -1416,9 +1596,9 @@ Joins the last line segment to the beginning of the path. context.lineWidth = 20; - context.beginPath(); + context.beginPath(); context.moveTo(20,20); - context.lineTo(60,60); + context.lineTo(60,60); context.lineTo(100,20); context.closePath(); context.stroke(); @@ -1435,7 +1615,7 @@ interface CanvasPathMethods { ---- prototype.moveTo(x : Number, y : Number) : undefined -Move current point of the current path to **x**, **y** +Move current point of the current path to **x**, **y** without connecting the stroke. @@ -1444,11 +1624,11 @@ without connecting the stroke. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); - context.beginPath(); - context.moveTo(20,20); - context.lineTo(60,60); + context.beginPath(); + context.moveTo(20,20); + context.lineTo(60,60); - context.moveTo(80,20); + context.moveTo(80,20); context.lineTo(120,60); context.stroke(); @@ -1460,7 +1640,7 @@ IDL: ---- prototype.lineTo(x : Number, y : Number) : undefined -Draw a line from current point of the current path to +Draw a line from current point of the current path to **x**, **y**. @@ -1469,11 +1649,11 @@ Draw a line from current point of the current path to var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); - context.beginPath(); - context.moveTo(20,20); - context.lineTo(60,60); - context.lineTo(100,20); - context.stroke(); + context.beginPath(); + context.moveTo(20,20); + context.lineTo(60,60); + context.lineTo(100,20); + context.stroke(); @@ -1490,8 +1670,8 @@ the control point. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); - context.beginPath(); - context.moveTo(20, 20); + context.beginPath(); + context.moveTo(20, 20); context.quadraticCurveTo(60, 60, 100, 20); context.stroke(); @@ -1515,8 +1695,8 @@ does not pass through the control points. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); - context.beginPath(); - context.moveTo(20, 20); + context.beginPath(); + context.moveTo(20, 20); context.bezierCurveTo(40, 60, 80, 5, 100, 20); context.stroke(); @@ -1534,13 +1714,13 @@ prototype.arcTo(controlX : Number, controlY : Number, endX : Number, endY : Numb Draws 2 imaginary lines between the previous point and the control point -and between the control point and the end point. **arcTo** fits a circle of +and between the control point and the end point. **arcTo** fits a circle of the specified radius between these lines. The drawn figure is a line from the previous point to the place where the circle touches the first imaginary line and an arc along the circle to the point where it touches the second imaginary line. -This method will not draw all the way to the end point (unless the end point +This method will not draw all the way to the end point (unless the end point matches the spot where the circle touches the secondary imaginary line). @@ -1577,7 +1757,7 @@ matches the spot where the circle touches the secondary imaginary line). IDL: - void arcTo(double x1, double y1, double x2, double y2, double radius); + void arcTo(double x1, double y1, double x2, double y2, double radius); @@ -1592,9 +1772,9 @@ Add a closed rectangle to the current path. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); - context.beginPath(); - context.rect(20, 20, 60, 40); - context.rect(100, 20, 60, 40); + context.beginPath(); + context.rect(20, 20, 60, 40); + context.rect(100, 20, 60, 40); context.stroke(); @@ -1610,7 +1790,7 @@ Continues the current path by creating an arc of circle centered at **x**, **y** of radius **radius** from **startAngle** to **endAngle**. The angles are specified in radians where **0** points to the right, **Math.PI / 2** points down, **Math.PI** points to the left, etc. -The **counterclockwise** parameter determines which part of the circle +The **counterclockwise** parameter determines which part of the circle is used for the path. @@ -1626,6 +1806,6 @@ is used for the path. IDL: - void arc(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise); + void arc(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise); }; diff --git a/content/Clipboard/clipboard.jsdoc b/content/Clipboard/clipboard.jsdoc new file mode 100644 index 0000000..e999a94 --- /dev/null +++ b/content/Clipboard/clipboard.jsdoc @@ -0,0 +1,88 @@ +Clipboard : EventTarget + +Provides access to the system cut/copy/paste clipboard. + +Spec: +https://w3c.github.io/clipboard-apis/#clipboard-interface + +---- +prototype.read() : Promise> + + + + + + +Spec: +https://w3c.github.io/clipboard-apis/#dom-clipboard-read + +---- +prototype.readText() : Promise + + + + + + +Spec: +https://w3c.github.io/clipboard-apis/#dom-clipboard-readtext + +---- +prototype.write(items : Iterable) : Promise + + + + + + +Spec: +https://w3c.github.io/clipboard-apis/#dom-clipboard-write + +---- +prototype.writeText(text : String) : Promise + + + + + + + +Spec: +https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext diff --git a/content/Clipboard/clipboardevent.jsdoc b/content/Clipboard/clipboardevent.jsdoc new file mode 100644 index 0000000..574660c --- /dev/null +++ b/content/Clipboard/clipboardevent.jsdoc @@ -0,0 +1,50 @@ +ClipboardEvent : Event + +Spec: +https://w3c.github.io/clipboard-apis/#clipboard-event-interfaces + +---- +new ClipboardEvent(type : String, [eventInit : { \ + clipboardData : DataTransfer \ +}]) : ClipboardEvent + + +---- +instance.clipboardData : DataTransfer + + + + + + + +ReadOnly: +true diff --git a/content/Clipboard/clipboarditem.jsdoc b/content/Clipboard/clipboarditem.jsdoc new file mode 100644 index 0000000..e28a847 --- /dev/null +++ b/content/Clipboard/clipboarditem.jsdoc @@ -0,0 +1,99 @@ +ClipboardItem : Object + +An item to place on the clipboard. Note FireFox does not yet support this API. See +%%https://bugzilla.mozilla.org/show_bug.cgi?id=1619947|Bug 1619947%%. + +Spec: +https://w3c.github.io/clipboard-apis/#clipboarditem + +---- +new ClipboardItem(valuesByType : Object, [options : { \ + presentationStyle : String /* 'attachment', 'inline', or 'unspecified'. Default = 'unspecified'. */ \ +}]) : ClipboardItem + +**valuesByType** is an object where the property names are the mime types and the +property values are the data for that type. The property values must be either +a %%/String|String%% or %%/Blob|Blob%%, or a %%/Promise|Promise%% that returns +a %%/String|String%% or %%/Blob|Blob%%. Note Chrome does not yet support promises. +See %%https://bugs.chromium.org/p/chromium/issues/detail?id=1014310|Bug 1014310%%. + +

Copy Text Example

+ + + + + + + +

Copy Image Example

+ + + + + + +---- +instance.presentationStyle : String + +'attachment', 'inline', or 'unspecified'. + +ReadOnly: +true + +---- +instance.lastModified : Number + +ReadOnly: +true + +---- +instance.delayed : Boolean + +ReadOnly: +true + +---- +instance.types : Array + + +ReadOnly: +true + + +---- +prototype.getType(type : String) : Promise + + +---- +createDelayed(valuesByType : Object, [options : { \ + presentationStyle : String /* 'attachment', 'inline', or 'unspecified'. Default = 'unspecified'. */ \ +}]) : ClipboardItem + diff --git a/content/Components/CustomElementRegistry.jsdoc b/content/Components/CustomElementRegistry.jsdoc new file mode 100644 index 0000000..c9a8774 --- /dev/null +++ b/content/Components/CustomElementRegistry.jsdoc @@ -0,0 +1,102 @@ +CustomElementRegistry : Object + +Provides a way to extend HTML/DOM with your own elements that +have custom logic similar to built in elements. Exposed as +%%/Window#customElements|customElements%%. See also +%%/CustomElementPrototype|CustomElementPrototype%%. + +Spec: +https://html.spec.whatwg.org/multipage/custom-elements.html#customelementregistry + +---- +prototype.define(tagName : String, type : CustomElementPrototype) : undefined + +Registers a new custom element type for the specified **tagName**. **tagName** +must have a **'-'** in it. + + + + +MyElement from HTML + + + + +Spec: +https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-define + +---- +prototype.get(tagName : String) : CustomElementPrototype + +Returns the prototype for the specified **tagName** that was previously registered +with %%#define|**define**%%. + + + + +MyElement + + + + +Spec: +https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-get + +---- +prototype.whenDefined(tagName : String) : Promise + +Returns a Promise that resolves after a custom element is %%#define|**define**d%% +for the specified **tagName**. + + + + +MyElement from HTML + + + + +Spec: +https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-whendefined diff --git a/content/Components/customelementprototype.jsdoc b/content/Components/customelementprototype.jsdoc index b96f4e2..9f8f603 100644 --- a/content/Components/customelementprototype.jsdoc +++ b/content/Components/customelementprototype.jsdoc @@ -1,152 +1,137 @@ CustomElementPrototype : HTMLElement The prototype used for a custom element created with -%%/Document#registerElement|**document.registerElement()**%%. - -Use %%/Object#create|**Object.create(baseType)**%% to create the -custom element prototype. The **baseType** must be -an %%/HTMLElement|HTMLElement%% derived type and must match -the prototype of the element set as the **extends** -option passed to **registerElement()**. - +%%/CustomElementRegistry#define|**customElements.define()**%%. ---- -prototype.attachedCallback() : undefined - -Called when the custom element is inserted into the document or -when the prototype is applied to elements already in the tree at the -time %%/Document#registerElement|**document.registerElement()**%% -is called. +prototype.adoptedCallback(oldDocument : Document, newDocument : Document) : undefined -See also %%/MutationObserver|MutationObserver%%. +Called when %%/Document#adoptNode|adopted%% into a new Document. - -MyElement from HTML - - ---- -prototype.attributeChangedCallback(name : String, oldValue : Object, newValue : Object) : undefined +prototype.attributeChangedCallback(name : String, oldValue : Object, newValue : Object, namespace : String) : undefined Called when an attribute was changed on the element. See also %%/MutationObserver|MutationObserver%%. - -MyElement from HTML - - ---- -prototype.createdCallback() : undefined +prototype.connectedCallback() : undefined -Called when the element is created. +Called when the custom element is inserted into the document or +when the prototype is applied to elements already in the tree at the +time %%/CustomElements#define|**customElements.define()**%% +is called. - - -MyElement from HTML +See also %%/MutationObserver|MutationObserver%%. + +MyElement from HTML + + ---- -prototype.detachedCallback() : undefined +prototype.disconnectedCallback() : undefined Called when the element is removed from the document. See also %%/MutationObserver|MutationObserver%%. - -MyElement from HTML - - @@ -159,73 +144,30 @@ The following example demonstrates how to create a custom element based on

- -MyElement from HTML - - - - -

-The following example demonstrates how to create a custom element based on -a derivation of %%/HTMLElement|HTMLElement%% such as -%%/HTMLButtonElement|HTMLButtonElement%%. -

- - - - - - +MyElement from HTML diff --git a/content/Components/shadowroot.jsdoc b/content/Components/shadowroot.jsdoc index 8944621..5696d5d 100644 --- a/content/Components/shadowroot.jsdoc +++ b/content/Components/shadowroot.jsdoc @@ -1,7 +1,7 @@ ShadowRoot : DocumentFragment Spec: -http://w3c.github.io/webcomponents/spec/shadow/#idl-def-ShadowRoot +https://dom.spec.whatwg.org/#shadowroot ---- instance.activeElement : Element @@ -31,7 +31,7 @@ ReadOnly: true ---- -prototype.getElementsByClassName(className : String) : NodeList +prototype.getElementsByClassName(className : String) : NodeList ---- prototype.getElementsByTagName(tagName : String) : NodeList diff --git a/content/Crypto/crypto.jsdoc b/content/Crypto/crypto.jsdoc index 35b57e2..2b71850 100644 --- a/content/Crypto/crypto.jsdoc +++ b/content/Crypto/crypto.jsdoc @@ -27,7 +27,7 @@ Fills **values** with randomly generated integers. %%Uint16Array|**Uint16Array**%%, %%Uint32Array|**Uint32Array**%%. -Returns **values**. +Returns **values**. See also %%/Math#random|Math.random()%%. diff --git a/content/DOM/AbortController.jsdoc b/content/DOM/AbortController.jsdoc new file mode 100644 index 0000000..e26c4c6 --- /dev/null +++ b/content/DOM/AbortController.jsdoc @@ -0,0 +1,20 @@ +AbortController : Object + +Allows canceling some asynchronous operations. For example, pass +%%#signal|**this.signal**%% to the %%/Request|Request%% constructor to +allow canceling %%/Window#fetch|fetch()%% operations. + +Spec: +https://dom.spec.whatwg.org/#interface-abortcontroller + +---- +new AbortController : AbortController + +---- +instance.signal : AbortSignal + +ReadOnly: +true + +---- +prototype.abort() : undefined diff --git a/content/DOM/AbortSignal.jsdoc b/content/DOM/AbortSignal.jsdoc new file mode 100644 index 0000000..b15f32b --- /dev/null +++ b/content/DOM/AbortSignal.jsdoc @@ -0,0 +1,15 @@ +AbortSignal : EventTarget + +Available on through the %%/AbortController#signal|AbortController.signal%% property. + +Spec: +https://dom.spec.whatwg.org/#interface-AbortSignal + +---- +instance.aborted : Boolean + +ReadOnly: +true + +---- +event.abort : listener(e : Event) : undefined diff --git a/content/DOM/ClientRectList.jsdoc b/content/DOM/ClientRectList.jsdoc deleted file mode 100644 index ed68240..0000000 --- a/content/DOM/ClientRectList.jsdoc +++ /dev/null @@ -1,30 +0,0 @@ -ClientRectList : Object - -Spec: -http://dev.w3.org/csswg/cssom-view/#clientrectlist - ----- -instance[index : Number] : ClientRect - -Returns the ClientRect at the specified **index**. You can also use the -%%#item|**item()**%% method to retrieve the item. - -ReadOnly: -true - ----- -instance.length : Number - -The number of ClientRects in the list. - -Spec: -http://dev.w3.org/csswg/cssom-view/#dom-clientrectlist-length - - ----- -prototype.item(index : Number) : ClientRect - -Same as %%#indexer_Number|**this[index]**%%. - -Spec: -http://dev.w3.org/csswg/cssom-view/#dom-clientrectlist-item diff --git a/content/DOM/InputEvent.jsdoc b/content/DOM/InputEvent.jsdoc new file mode 100644 index 0000000..fc10535 --- /dev/null +++ b/content/DOM/InputEvent.jsdoc @@ -0,0 +1,17 @@ +InputEvent : UIEvent + +Spec: +https://w3c.github.io/uievents/#inputevent + + +---- +instance.data : String + +ReadOnly: +true + +---- +instance.isComposing : Boolean + +ReadOnly: +true diff --git a/content/DOM/MutationObserver.jsdoc b/content/DOM/MutationObserver.jsdoc index d98cf2d..84ae786 100644 --- a/content/DOM/MutationObserver.jsdoc +++ b/content/DOM/MutationObserver.jsdoc @@ -1,23 +1,23 @@ MutationObserver : Object MutationObserver allows you to provide a function that is called -asynchronously when certain parts of the DOM change, such as adding -a child to a node, changing an attribute on a node, or changing +asynchronously when certain parts of the DOM change, such as adding +a child to a node, changing an attribute on a node, or changing the text on a node. As the changes happen, the MutationObserver records them as %%/MutationRecord|MutationRecords%% and then calls a user provided callback at a later time with all the MutationRecords that are pending. Spec: -http://www.w3.org/TR/domcore/#interface-mutationobserver +https://dom.spec.whatwg.org/#interface-mutationobserver ---- new MutationObserver(callback(mutations : Array, observer : MutationObserver) : undefined) : MutationObserver Creates a new MutationObserver that will call **callback** when the behaviors -configured by %%#observer|**observe()**%% change. +configured by %%#observe|**observe()**%% change. -Note that **callback** will be called at some time +Note that **callback** will be called at some time after the current script that is doing the mutation completes. The **observer** passed to **callback** @@ -34,7 +34,7 @@ is the newly created MutationObserver. for (var i = 0; i < mutation.addedNodes.length; i++) { console.log(' "' + mutation.addedNodes[i].textContent + '" added'); } - + for (var i = 0; i < mutation.removedNodes.length; i++) { console.log(' "' +mutation.removedNodes[i].textContent + '" removed'); } @@ -65,7 +65,7 @@ prototype.observe( \ }) : undefined Registers the observer to be called any time the specified **options** on -**target** change. If **observe()** is called more than once, it will +**target** change. If **observe()** is called more than once, it will listen to changes on each **target**. See %%/MutationRecord|MutationRecord%% for the data provided to callback for each mutation type. @@ -81,7 +81,7 @@ each mutation type. for (var i = 0; i < mutation.addedNodes.length; i++) { console.log(' "' + mutation.addedNodes[i].textContent + '" added'); } - + for (var i = 0; i < mutation.removedNodes.length; i++) { console.log(' "' + mutation.removedNodes[i].textContent + '" removed'); } @@ -99,7 +99,7 @@ each mutation type.
Spec: -http://www.w3.org/TR/domcore/#dom-mutationobserver-observe +https://dom.spec.whatwg.org/#dom-mutationobserver-observe ---- @@ -112,7 +112,7 @@ Unhooks this observer from all targets specified in previous prototype.takeRecords() : Array Returns the queued list of MutationRecords for **this** and clears out that list. -The **callback** will not be called unless additional mutations occur +The **callback** will not be called unless additional mutations occur after the call to **takeRecords()**. @@ -122,7 +122,7 @@ after the call to **takeRecords()**. var observer = new MutationObserver(function(mutations) { // Notice this will not be called because takeRecords clears outstanding records - console.log('In MutationObserver callback'); + console.log('In MutationObserver callback'); }); observer.observe(foo, { childList: true }); @@ -136,7 +136,7 @@ after the call to **takeRecords()**. mutations.forEach(function(mutation) { for (var i = 0; i < mutation.addedNodes.length; i++) { - console.log('"' + mutation.addedNodes[i].textContent + '" added'); + console.log('"' + mutation.addedNodes[i].textContent + '" added'); } }); diff --git a/content/DOM/MutationRecord.jsdoc b/content/DOM/MutationRecord.jsdoc index f30a1e5..05d3c0d 100644 --- a/content/DOM/MutationRecord.jsdoc +++ b/content/DOM/MutationRecord.jsdoc @@ -4,7 +4,7 @@ MutationRecord contains information about a mutation that was observed by %%/MutationObserver|MutationObserver%%. Spec: -http://www.w3.org/TR/domcore/#mutationrecord +https://dom.spec.whatwg.org/#mutationrecord ---- instance.type : String @@ -16,38 +16,38 @@ The type of mutation. Will be one of **'attributes'**,

-It will be **'attributes'** if an +It will be **'attributes'** if an %%/Element#attributes|Element.attribute%% changed. -To receive attribute changes, the options passed to +To receive attribute changes, the options passed to %%/MutationObserver#observe|**observe()**%% must have -**attributes** set to **true**, -**attributesOldValue** set to **true**, +**attributes** set to **true**, +**attributesOldValue** set to **true**, or -**attributeFilter** set to an array of attribute names. +**attributeFilter** set to an array of attribute names.

-It will be **'childList'** if the +It will be **'childList'** if the %%/Node#childNodes|Node.childNodes%% changed. -To receive childList changes, the options passed to +To receive childList changes, the options passed to %%/MutationObserver#observe|**observe()**%% must have **childList** set to **true**.

-It will be **'characterData'** if the +It will be **'characterData'** if the %%/CharacterData#data|CharacterData.data%% changed. -To receive characterData changes, the options passed to +To receive characterData changes, the options passed to %%/MutationObserver#observe|**observe()**%% must have -**characterData** set to **true**. +**characterData** set to **true**.

-Set the **subtree** option to **true** in the call to -%%/MutationObserver#observe|**observe()**%% +Set the **subtree** option to **true** in the call to +%%/MutationObserver#observe|**observe()**%% to receive any of these changes on nodes in the subtree.

@@ -62,8 +62,8 @@ to receive any of these changes on nodes in the subtree. console.log(mutation.type); }); }); - observer.observe(foo, { - childList: true, + observer.observe(foo, { + childList: true, attributes: true, characterData: true, subtree: true @@ -88,7 +88,7 @@ true ---- instance.target : Node -The Node that the mutation happened on. +The Node that the mutation happened on. If the **subtree** option was specified when calling %%/MutationObserver#observe|**MutationObserver.observe()**%% @@ -105,7 +105,7 @@ this may be a descendant of the **target** passed to **observe()**. console.log(mutation.target.tagName); }); }); - observer.observe(foo, { + observer.observe(foo, { childList: true, subtree: true }); @@ -175,7 +175,7 @@ Contains the nodes added to %%#target|**target**%%. Only applies when %%#type|**type**%% is **'childList'**. -
bara span +
bara span loose text
+ + +Spec: +https://wicg.github.io/ResizeObserver/#dom-resizeobserver-resizeobserver + +---- +prototype.observe(target : Element) : undefined + +Registers the observer to be called any time the specified **element**'s +size changes. If **observe()** is called more than once, it will +listen to changes on each **target**. + + +
+ +
+ +Spec: +https://wicg.github.io/ResizeObserver/#dom-resizeobserver-observe + +---- +prototype.unobserve(target : Element) : undefined + +Removes **target** from the list of observer elements. + + +
+ +
+ +Spec: +https://wicg.github.io/ResizeObserver/#dom-resizeobserver-unobserve + +---- +prototype.disconnect() : undefined + +Unhooks this observer from all targets specified in previous +%%#observe|**observe()**%% calls. + + +
+ +
+ +Spec: +https://wicg.github.io/ResizeObserver/#dom-resizeobserver-disconnect diff --git a/content/DOM/ResizeObserverEntry.jsdoc b/content/DOM/ResizeObserverEntry.jsdoc new file mode 100644 index 0000000..e2557dd --- /dev/null +++ b/content/DOM/ResizeObserverEntry.jsdoc @@ -0,0 +1,62 @@ +ResizeObserverEntry : Object + +ResizeObserverEntry contains information about an element resize event that +was observed by %%/ResizeObserver|ResizeObserver%%. + +Spec: +https://wicg.github.io/ResizeObserver/#resizeobserverentry + +---- +instance.target : Element + +The element passed to %%/ResizeObserver#observe|**ResizeObserver.observe()**%% +that changed size + + +
+ +
+ +ReadOnly: +true + +Spec: +https://wicg.github.io/ResizeObserver/#dom-resizeobserverentry-target + +---- +instance.contentRect : DOMRectReadOnly + +The size of %%#target|**target**%%. + + +
+ +
+ +ReadOnly: +true + +Spec: +https://wicg.github.io/ResizeObserver/#dom-resizeobserverentry-contentrect diff --git a/content/DOM/attr.jsdoc b/content/DOM/attr.jsdoc index 8c6ce2a..ee6f11f 100644 --- a/content/DOM/attr.jsdoc +++ b/content/DOM/attr.jsdoc @@ -1,10 +1,10 @@ Attr : Object -Represents the name-value pair of an attribute +Represents the name-value pair of an attribute specified on an %%/Element|**Element**%%. Spec: -http://www.w3.org/TR/dom/#interface-attr +https://dom.spec.whatwg.org/#interface-attr ---- instance.localName : String diff --git a/content/DOM/characterdata.jsdoc b/content/DOM/characterdata.jsdoc index 161a74c..5e7beed 100644 --- a/content/DOM/characterdata.jsdoc +++ b/content/DOM/characterdata.jsdoc @@ -4,7 +4,7 @@ The base class for %%/Text|Text%%, %%/Comment|Comment%%, and %%/ProcessingInstruction|ProcessingInstruction%% Node types. Spec: -https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#characterdata +https://dom.spec.whatwg.org/#characterdata ---- instance.data : String @@ -114,7 +114,7 @@ with **data**. ---- prototype.substringData(offset : Number, count : Number) : String -Returns a substring of %%#data|this.data%% starting at **offset** and of +Returns a substring of %%#data|this.data%% starting at **offset** and of the specified **count** of characters. diff --git a/content/DOM/customevent.jsdoc b/content/DOM/customevent.jsdoc new file mode 100644 index 0000000..50fb35a --- /dev/null +++ b/content/DOM/customevent.jsdoc @@ -0,0 +1,20 @@ +CustomEvent : Event + +CustomEvent is an Event subclass that provides a **detail** property to store custom +event data. + +Spec: +https://dom.spec.whatwg.org/#interface-customevent + +---- +new CustomEvent( \ + type : String, \ + [eventInit : { \ + detail : Object \ + }]) : Event + +---- +instance.detail : Object + +ReadOnly: +true diff --git a/content/DOM/document.jsdoc b/content/DOM/document.jsdoc index be18c31..54afe4b 100644 --- a/content/DOM/document.jsdoc +++ b/content/DOM/document.jsdoc @@ -1,10 +1,10 @@ Document : Node Spec: -http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-document +https://dom.spec.whatwg.org/#interface-document AlternateSpec: -http://dev.w3.org/html5/spec/single-page.html#document +https://html.spec.whatwg.org/#document ---- instance.activeElement : Element @@ -12,9 +12,9 @@ instance.activeElement : Element Returns the currently focused element. If there is no focused element, returns %%#body|**this.body**%%. -See also +See also %%/hasFocus|**hasFocus()**%%, -%%/Window#onblur|**window.onblur**%%, and +%%/Window#onblur|**window.onblur**%%, and %%/Window#onfocus|**window.onfocus**%%. @@ -58,11 +58,11 @@ instance.cookie : String Returns the cookies sent to the server when requesting resources. You can add additional cookies by setting **'key=value'** strings -to **cookie**. This will replace any existing value for the specified +to **cookie**. This will replace any existing value for the specified cookie but will not affect other cookies. You may append additional metadata for the cookie by adding **';metadata-key1=metadata-value1;metadata-key2=metadata-value2;...'** to the end of the string when setting the cookie. See -%%http://www.ietf.org/rfc/rfc2965.txt|Set Cookie Syntax (on page 5)%% for more +%%http://www.ietf.org/rfc/rfc2965.txt|Set Cookie Syntax (on page 5)%% for more details on the supported metadata keys and values. @@ -73,16 +73,14 @@ details on the supported metadata keys and values. } // Split on ';' followed by spaces - var pairs = document.cookie.split(/;\s*/g); + var cookies = document.cookie.split(/;\s*/g); - pairs = pairs.map(function(pair) { - return pair.split('='); + // Get the property/value pairs for each cookie + var entries = cookies.map(function(cookie) { + return cookie.split('='); }); - return pairs.reduce(function(object, pair) { - object[pair[0]] = pair[1]; - return object; - }, {}); + return Object.fromEntries(entries); }; var clearCookies = function() { @@ -146,6 +144,9 @@ http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Document3-docu ---- instance.fullscreenEnabled : Boolean +**true** if the %%/Element#requestFullscreen|**element.requestFullscreen()**%% API is +enabled. + ReadOnly: true @@ -155,17 +156,30 @@ https://fullscreen.spec.whatwg.org/#dom-document-fullscreenenabled ---- instance.fullscreenElement : Element +The element that is currently fullscreen from a call to %%/Element#requestFullscreen|**element.requestFullscreen()**%%. + ReadOnly: true Spec: https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement +---- +instance.pointerLockElement : Element + +The element that currently has the pointer locked by a call to %%/Element#requestPointerLock|**element.requestPointerLock()**%%. + +ReadOnly: +true + +Spec: +https://w3c.github.io/pointerlock/#dom-documentorshadowroot-pointerlockelement + ---- instance.implementation : DOMImplementation Spec: -http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-implementation +https://dom.spec.whatwg.org/#dom-document-implementation ReadOnly: true @@ -179,7 +193,7 @@ Sets the title of the window. + + Spec: https://fullscreen.spec.whatwg.org/#dom-document-exitfullscreen +---- +prototype.exitPointerLock() : undefined + +Releases the pointer locked with %%/Element#requestPointerLock|element.requestPointerLock()%%. + + + +
+
+
+
+Spec:
+https://w3c.github.io/pointerlock/#dom-document-exitpointerlock
+
 ----
 prototype.getElementsByTagName(tagName : String) : NodeList
 
-Returns a NodeList containing the %%/Element|Elements%% in the document 
+Returns a NodeList containing the %%/Element|Elements%% in the document
 that have the %%/Element#tagName|**Element.tagName**%% equal to **tagName**
 (case insensitive).
 
@@ -312,7 +384,7 @@ The returned NodeList will update as the document changes.
   }
   console.log();
 
-  // The divs NodeList will update automatically when you add 
+  // The divs NodeList will update automatically when you add
   // another div
   var baz = document.createElement('div');
   baz.textContent = 'baz';
@@ -334,11 +406,11 @@ http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-getElBTNNS
 ----
 prototype.getElementsByClassName(classNames : String) : NodeList
 
-Returns a NodeList containing the %%/Element|Elements%% in the document 
+Returns a NodeList containing the %%/Element|Elements%% in the document
 where the %%/Element#className|**Element.className**%%
 matches the specified **classNames**.
 
-**classNames** can contain multiple classes, separated by spaces, 
+**classNames** can contain multiple classes, separated by spaces,
 and the returned Elements must contain all the classes.
 
 The returned NodeList will update as the document changes.
@@ -363,7 +435,7 @@ The returned NodeList will update as the document changes.
 ----
 prototype.getElementById(elementId : String) : Element
 
-Returns the Element in the document that has %%/Element#id|Element.id%% 
+Returns the Element in the document that has %%/Element#id|Element.id%%
 equal to **elementId**.
 
 
@@ -383,9 +455,9 @@ http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-getElBId
 prototype.hasFocus() : Boolean
 
 Returns **true** if the document has keyboard focus.
-See also 
+See also
 %%/activeElement|**activeElement**%%,
-%%/Window#onblur|**window.onblur**%%, and 
+%%/Window#onblur|**window.onblur**%%, and
 %%/Window#onfocus|**window.onfocus**%%.
 
 
@@ -419,7 +491,7 @@ prototype.prepend(node0 : Node, [node1 : Node, [...]]) : undefined
 ----
 prototype.querySelector(selectors : String) : Element
 
-Returns the first **Element** that matches the CSS selector. 
+Returns the first **Element** that matches the CSS selector.
 
 
 foo1
@@ -446,9 +518,9 @@ http://www.w3.org/TR/selectors-api/#queryselector
 prototype.querySelectorAll(cssSelector : String) : NodeList
 
 Returns a **NodeList** containing the **Element**s in the document that
-match the CSS selector. 
+match the CSS selector.
 
-Note that unlike %%#getElementsByClassName|**getElementsByClassName()**%% 
+Note that unlike %%#getElementsByClassName|**getElementsByClassName()**%%
 or %%#getElementsByTagName|**getElementsByTagName()**%%,
 the returned NodeList does not update as the document changes.
 
@@ -470,79 +542,6 @@ the returned NodeList does not update as the document changes.
 Spec:
 http://www.w3.org/TR/selectors-api/#queryselectorall
 
-----
-prototype.registerElement(tagName : String, [ options : {\
-  prototype : CustomElementPrototype, \
-  extends : String /* The HTML %%/Element#tagName|**tagName**%% of the element to is extending */ \
-} ]) : Function
-
-Registers a new custom element type for the specified **tagName**.
-**tagName** must have a **'-'** in it.
-**options.prototype** allows you to provide a 
-%%/Function#prototype|**prototype**%% for the custom elements.
-
-
-
-MyElement from HTML
-
-
-
-
-
-
-
-
-
 ----
 event.abort : listener(event : Event) : undefined
 
@@ -617,3 +616,57 @@ false
 
 Spec:
 http://www.w3.org/TR/touch-events/#dfn-touchcancel
+
+----
+event.copy : listener(event : ClipboardEvent) : undefined
+
+Bubbles:
+true
+
+Cancelable:
+true
+
+Spec:
+https://w3c.github.io/clipboard-apis/#clipboard-event-copy
+
+----
+event.cut : listener(event : ClipboardEvent) : undefined
+
+Bubbles:
+true
+
+Cancelable:
+true
+
+Spec:
+https://w3c.github.io/clipboard-apis/#clipboard-event-cut
+
+----
+event.paste : listener(event : ClipboardEvent) : undefined
+
+Bubbles:
+true
+
+Cancelable:
+true
+
+Spec:
+https://w3c.github.io/clipboard-apis/#clipboard-event-paste
+
+----
+event.pointerlockchange : listener(event : Event) : undefined
+
+Bubbles:
+false
+
+Spec:
+https://w3c.github.io/pointerlock/#dom-document-onpointerlockchange
+
+----
+event.pointerlockerror : listener(event : Event) : undefined
+
+Bubbles:
+false
+
+Spec:
+https://w3c.github.io/pointerlock/#dom-document-onpointerlockerror
diff --git a/content/DOM/documentfragment.jsdoc b/content/DOM/documentfragment.jsdoc
index 1d27590..958ccde 100644
--- a/content/DOM/documentfragment.jsdoc
+++ b/content/DOM/documentfragment.jsdoc
@@ -1,18 +1,18 @@
 DocumentFragment : Node
 
 A **DocumentFragment** is a container for %%Node|**Node**%%s.  When adding a **DocumentFragment**
-to a **Node**, all the children of the **DocumentFragment** become direct children 
+to a **Node**, all the children of the **DocumentFragment** become direct children
 of the **Node**. Use %%Document#createDocumentFragment|**document.createDocumentFragment()**%%
 to create a **DocumentFragment**.
 
 
 Spec:
-http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-B63ED1A3
+https://dom.spec.whatwg.org/#interface-documentfragment
 
 ----
 prototype.querySelector(cssSelector : String) : Element
 
-Returns the first %%/Element|**Element**%% that matches the CSS selector. 
+Returns the first %%/Element|**Element**%% that matches the CSS selector.
 
 
 foo1
@@ -45,8 +45,8 @@ http://www.w3.org/TR/selectors-api/#queryselector
 ----
 prototype.querySelectorAll(cssSelector : String) : NodeList
 
-Returns a **NodeList** containing the %%/Element|**Element**%%s in the 
-document that match the CSS selector. 
+Returns a **NodeList** containing the %%/Element|**Element**%%s in the
+document that match the CSS selector.
 
 
 
diff --git a/content/DOM/domsettabletokenlist.jsdoc b/content/DOM/domsettabletokenlist.jsdoc
deleted file mode 100644
index 9c0a5c7..0000000
--- a/content/DOM/domsettabletokenlist.jsdoc
+++ /dev/null
@@ -1,10 +0,0 @@
-DOMSettableTokenList : DOMTokenList
-
-Spec:
-https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#domsettabletokenlist
-
-----
-instance.value : String
-
-Spec:
-https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-domsettabletokenlist-value
diff --git a/content/DOM/domtokenlist.jsdoc b/content/DOM/domtokenlist.jsdoc
index b73c0ed..6f27d0c 100644
--- a/content/DOM/domtokenlist.jsdoc
+++ b/content/DOM/domtokenlist.jsdoc
@@ -1,8 +1,11 @@
 DOMTokenList : Object
 
-Spec:
-http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#domtokenlist
+An object containing a list of strings. Used in
+%%/Element#classList|**Element.classList**%% and
+%%/HTMLIFrameElement#sandbox|**HTMLIFrameElement.sandbox**%%.
 
+Spec:
+https://dom.spec.whatwg.org/#domtokenlist
 
 ----
 instance[index : Number] : String
@@ -19,10 +22,11 @@ Retrieves the token at **index**.  You can also use the %%#item|**item()**%% met
 
 
 
-
 ----
 instance.length : Number
 
+The number of tokens in **this**.
+
 
 foo
 
 
 
+Spec:
+https://dom.spec.whatwg.org/#dom-domtokenlist-value
+
+----
+prototype.item(index : Number) : String
+
+Same as %%#indexer_Number|**this[index]**%%.
+
+Spec:
+https://dom.spec.whatwg.org/#dom-domtokenlist-item
+
 ----
 prototype.add(token : String) : undefined
 
+Adds **token** to **this**.
+
 
 
+foo
+
+
+
+Spec:
+https://dom.spec.whatwg.org/#dom-domtokenlist-replace
+
+----
+prototype.toggle(token : String, [value : Boolean]) : Boolean
+
+If **value** is not specified, removes **token** from the list
+if was in **this** or adds **token** to the list if it was not
+in **this**. If **value** is **true**, **token** is added to
+**this** if not already there.  If **value** is **false**,
+**token** is removed from **this**.
 
 
 
+
My Div's very long content.... +that +must +scroll
+ +
+ ReadOnly: true @@ -47,6 +79,37 @@ http://dev.w3.org/csswg/cssom-view/#dom-element-clientwidth ---- instance.clientHeight : Number +The height of **this** in CSS pixels. Does not include **this**'s border or scrollbar. +Will be **0** for %%/CSSStyleDeclaration#display|**display: inline**%% elements; use +%%#getBoundingClientRect|getBoundingClientRect()%% or +%%%#getClientRects|getClientRects()%% instead. +See also +%%/HTMLElement#offsetHeight|HTMLElement.offsetHeight%% and %%#scrollHeight|scrollHeight%%. + + + +
My Div's very long content.... +that +must +scroll
+ +
+ ReadOnly: true @@ -84,8 +147,8 @@ instance.children : HTMLCollection The %%/Element|Element%% children in **this**. Unlike %%/Node#childNodes|Node.childNodes%%, **children** -only returns nodes inside **this** that derive from -%%/Element|Element%% (ie, other node types like %%/Text|Text%% and +only returns nodes inside **this** that derive from +%%/Element|Element%% (ie, other node types like %%/Text|Text%% and %%/Comment|Comment%% will be excluded from **children** but present in **childNodes**). @@ -108,11 +171,13 @@ but present in **childNodes**).
+Spec: +https://dom.spec.whatwg.org/#dom-parentnode-children ---- instance.className : String -Gets or sets the classes of the Element (used for styling via +Gets or sets the classes of the Element (used for styling via CSS). **className** should be a space separated list of classes. **className** corresponds to the HTML **class** attribute. @@ -165,16 +230,23 @@ See also %%#className|**className**%%. ---- instance.firstElementChild : Element +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-firstelementchild + + ---- instance.id : String A unique name for this element in the document. -You can retrieve an element by **id** using +You can retrieve an element by **id** using %%/Document#getElementById|**document.getElementById()**%%. ---- instance.lastElementChild : Element +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-lastelementchild + ---- instance.localName : String @@ -211,6 +283,34 @@ http://dev.w3.org/csswg/cssom-view/#dom-element-scrollleft ---- instance.scrollWidth : Number +The width of the total scrollable region of **this** in CSS pixels. Will be the same as +%%/Element#clientWidth|clientWidth%% if **this** does not scroll horizontally. See also +%%#clientWidth|clientWidth%% and %%/HTMLElement#offsetWidth|HTMLElement.offsetWidth%%. + + + +
My Div's very long content.... +that +must +scroll
+ +
+ ReadOnly: true @@ -220,6 +320,34 @@ http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth ---- instance.scrollHeight : Number +The height of the total scrollable region of **this** in CSS pixels. Will be the same as +%%/Element#clientWidth|clientWidth%% if **this** does not scroll vertically. See also +%%#clientHeight|clientHeight%% and %%/HTMLElement#offsetHeight|HTMLElement.offsetHeight%%. + + + +
My Div's very long content.... +that +must +scroll
+ +
+ ReadOnly: true @@ -236,6 +364,122 @@ true Spec: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-104682815 +---- +prototype.append(item0 : String, [item1 : String, [...]]) : undefined + +Same as **%%#append_Node_Node_dotdotdot|append%%(new %%/Text|Text%%(item0), +new %%/Text|Text%%(item1), ...)**. + + +
foo
+ +
+ +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-append + +---- +prototype.append(item0 : Node, [item1 : Node, [...]]) : undefined + +Inserts the specified nodes at the end of %%Node#childNodes|**this.childNodes**%%. +See also %%#prepend|prepend%%, %%#replaceChildren|replaceChildren%%, and +%%Node#appendChild|Node.appendChild%%. + + +
foo
+ +
+ +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-append + +---- +prototype.prepend(item0 : String, [item1 : String, [...]]) : undefined + +Same as **%%#prepend_Node_Node_dotdotdot|prepend%%(new %%/Text|Text%%(item0), +new %%/Text|Text%%(item1), ...)**. + + +
foo
+ +
+ +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-prepend + +---- +prototype.prepend(item0 : Node, [item1 : Node, [...]]) : undefined + +Inserts the specified nodes at the start of %%Node#childNodes|**this.childNodes**%%. +See also %%#append|append%%, %%#replaceChildren|replaceChildren%%, and +%%Node#insertBefore|Node.insertBefore%%. + + +
foo
+ +
+ +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-prepend + +---- +prototype.replaceChildren(item0 : String, [item1 : String, [...]]) : undefined + +Same as **%%#replaceChildren_Node_Node_dotdotdot|replaceChildren%%(new %%/Text|Text%%(item0), +new %%/Text|Text%%(item1), ...)**. + + +
foo
+ +
+ +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-replacechildren + +---- +prototype.replaceChildren(item0 : Node, [item1 : Node, [...]]) : undefined + +Removes all items from %%Node#childNodes|**this.childNodes**%% and replaces them +with the specified nodes. +See also %%#append|append%%, %%#prepend|prepend%%, +%%Node#insertBefore|Node.insertBefore%%, +%%Node#removeChild|Node.removeChild%%, and +%%Node#replaceChild|Node.replaceChild%%. + + +
foo
+ +
+ +Spec: +https://dom.spec.whatwg.org/#dom-parentnode-replacechildren + ---- prototype.createShadowRoot() : ShadowRoot @@ -260,7 +504,7 @@ prototype.getElementsByTagName(name : String) : NodeList Returns a list of descendants of **this** that match the specified tag name. -See also +See also %%#getElementsByTagNameNS|**getElementsByTagNameNS()**%%, %%#getElementsByClassName|**getElementsByClassName()**%%, %%#querySelector|**querySelector()**%%, @@ -280,7 +524,7 @@ and
Spec: https://fullscreen.spec.whatwg.org/#dom-element-requestfullscreen + +---- +prototype.requestPointerLock() : undefined + +Locks the pointer (mouse cursor) to **this**. If successful, +%%/Document#onpointerlockchange|document.onpointerlockchange%% will fire and +subsequent pointer moves be sent to **this**. If unable to lock the pointer, +%%/Document#onpointerlockerror|document.onpointerlockerror%% will fire. +Use %%/Document#exitPointerLock|document.exitPointerLock%% to release the pointer. +See also %%/Document#pointerLockElement|document.pointerLockElement%%, +%%/MouseEvent#movementX|MouseEvent.movementX%% and +%%/MouseEvent#movementY|MouseEvent.movementY%%. + + + +
+
+
+
+Spec:
+https://w3c.github.io/pointerlock/#dom-element-requestpointerlock
+
 ----
 prototype.scrollIntoView([top = false : Boolean]) : undefined
 
-Scolls the element into view. 
+Scolls the element into view.
 
 
 
@@ -499,7 +811,7 @@ Scolls the element into view.
E
F
G
H
- +
- -Spec: -http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget +---- +prototype.addEventListener( \ + type : String, \ + listener(event : Event) : undefined, \ + options : { \ + capture = false: Boolean /* call listener in the capture phase */, \ + once = false: Boolean /* remove **listener** after firing */, \ + passive = false: Boolean /* set to **true** if you'll never call %%/Event#preventDefault|**event.preventDefault()**%%. Allows browser to provide perf optimizations like smoother scrolling. */ \ + }) : undefined ---- prototype.addEventListener(type : String, listener : EventListener, [useCapture : Boolean]) : undefined +---- +prototype.addEventListener( \ + type : String, \ + listener : EventListener, \ + options : { \ + capture = false: Boolean /* call listener in the capture phase */, \ + once = false: Boolean /* remove **listener** after firing */, \ + passive = false: Boolean /* set to **true** if you'll never call %%/Event#preventDefault|**event.preventDefault()**%%. Allows browser to provide perf optimizations like smoother scrolling. */ \ + }) : undefined + +---- +prototype.dispatchEvent(event : Event) : Boolean + +Raises **event** on **this**. If %%/Event#bubbles|**event.bubbles**%% is **true**, +and **this** is an %%Node|Node%%, the event will propagate through the ancestor +hierarchy. -Spec: -http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget + +
+ Parent +
+ --Child +
+
+ +
---- prototype.removeEventListener(type : String, listener(event : Event) : undefined, [useCapture : Boolean]) : undefined -Spec: -http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget +---- +prototype.removeEventListener( \ + type : String, \ + listener(event : Event) : undefined, \ + options : { \ + capture = false: Boolean /* removes the listener hooked to the capture phase */ \ + }) : undefined ---- prototype.removeEventListener(type : String, listener : EventListener, [useCapture : Boolean]) : undefined -Spec: -http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget +---- +prototype.removeEventListener( \ + type : String, \ + listener : EventListener, \ + options : { \ + capture = false: Boolean /* removes the listener hooked to the capture phase */ \ + }) : undefined ---- -prototype.dispatchEvent(event : Event) : Boolean +Details: -Spec: -http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget +EventTarget can also be used as a base class to provide event handling for user +defined types. + + +class Foo extends EventTarget { +} + +const foo = new Foo(); +foo.addEventListener('myEvent', e => { + console.log('myEvent fired. detail:', e.detail); +}); +foo.dispatchEvent(new CustomEvent('myEvent', { detail: 'extra data' })); + diff --git a/content/DOM/htmlanchorelement.jsdoc b/content/DOM/htmlanchorelement.jsdoc index f7d22f8..b79124d 100644 --- a/content/DOM/htmlanchorelement.jsdoc +++ b/content/DOM/htmlanchorelement.jsdoc @@ -2,7 +2,7 @@ HTMLAnchorElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlanchorelement +https://html.spec.whatwg.org/#htmlanchorelement ---- instance.href : String diff --git a/content/DOM/htmlbaseelement.jsdoc b/content/DOM/htmlbaseelement.jsdoc index 5e7bf3f..2cec329 100644 --- a/content/DOM/htmlbaseelement.jsdoc +++ b/content/DOM/htmlbaseelement.jsdoc @@ -2,7 +2,7 @@ HTMLBaseElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlbaseelement +https://html.spec.whatwg.org/#htmlbaseelement ---- instance.href : String diff --git a/content/DOM/htmlbodyelement.jsdoc b/content/DOM/htmlbodyelement.jsdoc index 746543f..89b19a4 100644 --- a/content/DOM/htmlbodyelement.jsdoc +++ b/content/DOM/htmlbodyelement.jsdoc @@ -2,7 +2,7 @@ HTMLBodyElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlbodyelement +https://html.spec.whatwg.org/#htmlbodyelement ---- event.afterprint : listener(event : Event) : undefined diff --git a/content/DOM/htmlbrelement.jsdoc b/content/DOM/htmlbrelement.jsdoc index 556c826..de9d81b 100644 --- a/content/DOM/htmlbrelement.jsdoc +++ b/content/DOM/htmlbrelement.jsdoc @@ -1,4 +1,4 @@ HTMLBRElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlbrelement +https://html.spec.whatwg.org/#htmlbrelement diff --git a/content/DOM/htmlbuttonelement.jsdoc b/content/DOM/htmlbuttonelement.jsdoc index 1793f84..aaae5e6 100644 --- a/content/DOM/htmlbuttonelement.jsdoc +++ b/content/DOM/htmlbuttonelement.jsdoc @@ -2,7 +2,7 @@ HTMLButtonElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlbuttonelement +https://html.spec.whatwg.org/#htmlbuttonelement ---- instance.autofocus : Boolean @@ -44,6 +44,10 @@ instance.name : String ---- instance.type : String +Must be one of **'button'**, **'reset'**, or **'submit'**. Defaults to **'submit'**. + +Spec: +https://html.spec.whatwg.org/#attr-button-type ---- instance.value : String diff --git a/content/DOM/htmlcanvaselement.jsdoc b/content/DOM/htmlcanvaselement.jsdoc index bf40062..8afbac8 100644 --- a/content/DOM/htmlcanvaselement.jsdoc +++ b/content/DOM/htmlcanvaselement.jsdoc @@ -1,15 +1,51 @@ HTMLCanvasElement : HTMLElement **HTMLCanvasElement** is an element that allows programmatically creating -images in the browser. +images in the browser. It corresponds to the **** tag. +---- +prototype.captureStream([requestedFrameRate : Number]) : MediaStream + +Creates a video stream for the canvas. **requestedFrameRate** can be used to update +the video at a slower frequency than the canvas. If set to **0**, use +%%/CanvasCaptureMediaStreamTrack#requestFrame|CanvasCaptureMediaStreamTrack.requestFrame%% +to update the video. + + + + + + + +Spec: +https://w3c.github.io/mediacapture-fromelement/#dom-htmlcanvaselement-capturestream + ---- prototype.getContext(contextType : String, [contextAttributes : Object]) : CanvasRenderingContext Returns a context that can be used to draw into the canvas. **contextType** can be -either **'2d'** to retrieve a %%CanvasRenderingContext2D|**CanvasRenderingContext2D**%% -or **'webgl'** to retrieve a %%WebGLRenderingContext|**WebGLRenderingContext**%%. When +**'2d'** to retrieve a %%CanvasRenderingContext2D|**CanvasRenderingContext2D**%% +**'bitmaprenderer'** to retrieve an %%ImageBitmapRenderingContext|**ImageBitmapRenderingContext**%% +or **'webgl'** to retrieve a %%WebGLRenderingContext|**WebGLRenderingContext**%%. + +
+ +When specifying **'webgl'**, you can configure how the context is initialized by passing a %%/WebGLContextAttributes|**WebGLContextAttributes**%% as the second parameter. @@ -28,19 +64,58 @@ a %%/WebGLContextAttributes|**WebGLContextAttributes**%% as the second parameter Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-getcontext +https://html.spec.whatwg.org/multipage/the-canvas-element.html#dom-canvas-getcontext + +---- +prototype.toBlob(callback(blob : Blob) : undefined, [type = 'image/png' : String, [quality : Number]]) : undefined + +Calls **callback** with a blob representation of the canvas. **type** can be +**'image/png'** or **'image/jpeg'**. +When using **'image/jgeg'**, you may provide the **quality** parameter (**0.0** +to **1.0**) to change the quality of the saved file and consequently the +size of the file. + +Note, if you are using %%/WebGLRenderingContext|WebGL%%, you must paint to the +canvas immediately before calling **toBlob**, or set +%%WebGLContextAttributes#preserveDrawingBuffer|**preserveDrawingBuffer**%% +to **true** to keep the buffer available after the browser has displayed the +contents. + + + + + + + +Spec: +https://html.spec.whatwg.org/multipage/scripting.html#dom-canvas-toblob ---- -prototype.toDataURL([type = 'image/png': String, [jpegCompressionRatio : Number]]) : String +prototype.toDataURL([type = 'image/png': String, [quality : Number]]) : String -Returns a **'data:'** string representation of the canvas. **type** can be -**'image/png'** or **'image/jpeg'**. -When using **'image/jgeg'**, you may pass an additional value between -**0.0** and **1.0** to change the compression rate. +Returns a **'data:'** string representation of the canvas. **type** can be +**'image/png'** or **'image/jpeg'**. +When using **'image/jgeg'**, you may provide the **quality** parameter (**0.0** +to **1.0**) to change the quality of the saved file and consequently the +size of the file. -Note, if you are using %%/WebGLRenderingContext|WebGL%%, you must paint to the canvas immediately before +Note, if you are using %%/WebGLRenderingContext|WebGL%%, you must paint to the canvas immediately before calling **toDataURL**, or set %%WebGLContextAttributes#preserveDrawingBuffer|**preserveDrawingBuffer**%% -to **true** to keep the buffer available after the browser has displayed the +to **true** to keep the buffer available after the browser has displayed the contents. @@ -64,7 +139,7 @@ contents. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl +https://html.spec.whatwg.org/multipage/the-canvas-element.html#dom-canvas-todataurl ---- instance.width : Number @@ -82,7 +157,7 @@ The width of **this** in pixels. Setting **width** clears the buffer. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-width +https://html.spec.whatwg.org/multipage/the-canvas-element.html#dom-canvas-width ---- instance.height : Number @@ -99,5 +174,5 @@ The height of **this** in pixels. Setting **height** clears the buffer. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-height +https://html.spec.whatwg.org/multipage/the-canvas-element.html#dom-canvas-height diff --git a/content/DOM/htmlcollection.jsdoc b/content/DOM/htmlcollection.jsdoc index c741170..e99a74e 100644 --- a/content/DOM/htmlcollection.jsdoc +++ b/content/DOM/htmlcollection.jsdoc @@ -1,16 +1,16 @@ HTMLCollection : Object -A list of %%/Element|Elements%% similar to an %%/NodeList|NodeList%%. -The %%/Element#children|Element.children%% property returns an +A list of %%/Element|Elements%% similar to an %%/NodeList|NodeList%%. +The %%/Element#children|Element.children%% property returns an HTMLCollection. Spec: -https://w3c.github.io/dom/#htmlcollection +https://dom.spec.whatwg.org/#htmlcollection ---- instance[index : Number] : Element -Returns the item at **index** in the collection. +Returns the item at **index** in the collection.
@@ -56,7 +56,7 @@ ReadOnly: true Spec: -https://w3c.github.io/dom/#dom-htmlcollection-length +https://dom.spec.whatwg.org/#dom-htmlcollection-length ---- prototype.item(index : Number) : Element @@ -64,12 +64,12 @@ prototype.item(index : Number) : Element Same as %%#indexer_Number|**this[index]**%%. Spec: -https://w3c.github.io/dom/#dom-htmlcollection-item +https://dom.spec.whatwg.org/#dom-htmlcollection-item ---- prototype.namedItem(idOrName : String) : Element -Returns the Element in the **this** that has +Returns the Element in the **this** that has %%/Element#id|id%% or %%/HTMLInputElement#name|name%% equal to **idOrName**. @@ -88,4 +88,4 @@ equal to **idOrName**. Spec: -https://w3c.github.io/dom/#dom-htmlcollection-nameditem +https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem diff --git a/content/DOM/htmldivelement.jsdoc b/content/DOM/htmldivelement.jsdoc index 7433916..317c2c6 100644 --- a/content/DOM/htmldivelement.jsdoc +++ b/content/DOM/htmldivelement.jsdoc @@ -1,4 +1,4 @@ HTMLDivElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmldivelement +https://html.spec.whatwg.org/#htmldivelement diff --git a/content/DOM/htmldlistelement.jsdoc b/content/DOM/htmldlistelement.jsdoc index 2aa9af1..09a49c6 100644 --- a/content/DOM/htmldlistelement.jsdoc +++ b/content/DOM/htmldlistelement.jsdoc @@ -1,4 +1,4 @@ HTMLDListElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmldlistelement +https://html.spec.whatwg.org/#htmldlistelement diff --git a/content/DOM/htmlelement.jsdoc b/content/DOM/htmlelement.jsdoc index 1019c52..d0d723f 100644 --- a/content/DOM/htmlelement.jsdoc +++ b/content/DOM/htmlelement.jsdoc @@ -8,12 +8,12 @@ HTMLElement is the base type for and many others. Spec: -http://www.w3.org/TR/html5/dom.html#htmlelement +https://html.spec.whatwg.org/#htmlelement ---- instance.innerHTML : String -Gets or sets the html content inside this element. The element itself +Gets or sets the html content inside this element. The element itself is not modified. Compare to %%#outerHTML|**outerHTML**%%. @@ -27,7 +27,7 @@ is not modified. Compare to %%#outerHTML|**outerHTML**%%. ---- instance.outerHTML : String -Gets or sets the html content inside this element. The element itself +Gets or sets the html content inside this element. The element itself is replaced by the provided HTML. Compare to %%#innerHTML|**innerHTML**%%. @@ -38,8 +38,6 @@ is replaced by the provided HTML. Compare to %%#innerHTML|**innerHTML**%%. - - ---- instance.offsetTop : Number @@ -61,6 +59,33 @@ http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetleft ---- instance.offsetWidth : Number +The width of **this** in CSS pixels. Includes **this**'s border and scrollbar. See also +%%/Element#clientWidth|Element.clientWidth%% and %%/Element#scrollWidth|Element.scrollWidth%%. + + + +
My Div's very long content.... +that +must +scroll
+ +
+ ReadOnly: true @@ -70,6 +95,33 @@ http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetwidth ---- instance.offsetHeight : Number +The height of **this** in CSS pixels. Includes **this**'s border and scrollbar. See also +%%/Element#clientHeight|Element.clientHeight%% and %%/Element#scrollHeight|Element.scrollHeight%%. + + + +
My Div's very long content.... +that +must +scroll
+ +
+ ReadOnly: true @@ -112,19 +164,19 @@ instance.title : String Spec: -http://www.w3.org/TR/html5/dom.html#dom-title +https://html.spec.whatwg.org/#dom-title ---- instance.lang : String Spec: -http://www.w3.org/TR/html5/dom.html#dom-lang +https://html.spec.whatwg.org/#dom-lang ---- instance.dir : String Spec: -http://www.w3.org/TR/html5/dom.html#dom-dir +https://html.spec.whatwg.org/#dom-dir ---- instance.className : String @@ -250,7 +302,7 @@ true ---- -instance.commandChecked : Boolean +instance.commandChecked : Boolean ReadOnly: true @@ -259,7 +311,7 @@ true instance.style : CSSStyleDeclaration Contains CSS styles directly set on **this**. Use -%%/Window#getComputedStyle|**window.getComputedStyle(element)**%% +%%/Window#getComputedStyle|**window.getComputedStyle(element)**%% to get the effective style including styles from CSS rules. @@ -420,7 +472,17 @@ Cancelable: false ---- -event.input : listener(event : Event) : undefined +event.input : listener(event : InputEvent) : undefined + + + + + ---- @@ -480,11 +542,32 @@ true ---- event.mouseenter : listener(event : MouseEvent) : undefined +Called when the mouse enters the element or any of its descendant nodes. +Note, unlike %%#mouseover|**mouseover**%%, **mouseenter** does not bubble and so it will +only fire once as long as the mouse remains within **this**. +See also %%#mouseleave|**mouseleave**%%. + + +
+ foo + bar +
+ +
+ Bubbles: false Cancelable: -false +false Spec: http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter @@ -493,12 +576,31 @@ http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter event.mouseleave : listener(event : MouseEvent) : undefined Called when the mouse leaves the element or any of its descendant nodes. +Note, unlike %%#mouseout|**mouseout**%%, **mouseleave** does not bubble and so it will +not fire while mouse remains within **this**. +See also %%#mouseenter|**mouseenter**%%. + + +
+ foo + bar +
+ +
Bubbles: false Cancelable: -false +false Spec: http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave @@ -517,24 +619,64 @@ true ---- event.mouseout : listener(event : MouseEvent) : undefined -Called when the mouse leaves the element. +Called when the mouse leaves the element by moving out of the bounds of **this** +or by entering the bounds of a child of **this**. +Note, unlike %%#mouseleave|**mouseleave**%%, **mouseout** bubbles and will +fire each time the mouse moves to a different child within **this**. +See also %%#mouseover|**mouseover**%%. + + +
+ foo + bar +
+ +
Bubbles: true Cancelable: -true +true ---- event.mouseover : listener(event : MouseEvent) : undefined -Called when the mouse enters the element. +Called when the mouse is directly over **this**. +Note, unlike %%#mouseenter|**mouseenter**%%, **mouseover** bubbles and will +fire each time the mouse moves to a different child within **this**. +See also %%#mouseout|**mouseout**%%. + + +
+ foo + bar +
+ +
+ Bubbles: true Cancelable: -true +true ---- event.mouseup : listener(event : MouseEvent) : undefined @@ -543,7 +685,7 @@ Bubbles: true Cancelable: -true +true ---- @@ -557,7 +699,7 @@ Bubbles: false Cancelable: -false +false ---- event.scroll : listener(event : UIEvent) : undefined @@ -566,7 +708,7 @@ Async: true Cancelable: -false +false ---- event.select : listener(event : Event) : undefined @@ -575,7 +717,7 @@ Bubbles: true Cancelable: -false +false ---- event.unload : listener(event : Event) : undefined diff --git a/content/DOM/htmlembedelement.jsdoc b/content/DOM/htmlembedelement.jsdoc index bfd91a4..bec57be 100644 --- a/content/DOM/htmlembedelement.jsdoc +++ b/content/DOM/htmlembedelement.jsdoc @@ -2,7 +2,7 @@ HTMLEmbedElement : HTMLElement Spec: -http://www.w3.org/html/wg/drafts/html/master/single-page.html#htmlembedelement +https://html.spec.whatwg.org/#htmlembedelement ---- instance.src : String diff --git a/content/DOM/htmlformcontrolscollection.jsdoc b/content/DOM/htmlformcontrolscollection.jsdoc index 65ced2b..f4c4f3b 100644 --- a/content/DOM/htmlformcontrolscollection.jsdoc +++ b/content/DOM/htmlformcontrolscollection.jsdoc @@ -1,4 +1,4 @@ HTMLFormControlsCollection : HTMLCollection Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#htmlformcontrolscollection-0 +https://html.spec.whatwg.org/#htmlformcontrolscollection diff --git a/content/DOM/htmlformelement.jsdoc b/content/DOM/htmlformelement.jsdoc index f7cacb5..adeec64 100644 --- a/content/DOM/htmlformelement.jsdoc +++ b/content/DOM/htmlformelement.jsdoc @@ -6,7 +6,7 @@ the user input to the server. See also %%/FormData|FormData%%. Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlformelement +https://html.spec.whatwg.org/#htmlformelement ---- instance[index : Number] : Element @@ -117,7 +117,7 @@ prototype.reset() : undefined ---- -prototype.checkValidity() : Boolean +prototype.checkValidity() : Boolean ---- event.submit : listener() : Boolean diff --git a/content/DOM/htmlheadelement.jsdoc b/content/DOM/htmlheadelement.jsdoc index 196e20c..9e496b7 100644 --- a/content/DOM/htmlheadelement.jsdoc +++ b/content/DOM/htmlheadelement.jsdoc @@ -1,4 +1,4 @@ HTMLHeadElement : HTMLElement Spec: -http://www.w3.org/html/wg/drafts/html/master/single-page.html#htmlheadelement +https://html.spec.whatwg.org/#htmlheadelement diff --git a/content/DOM/htmlheadingelement.jsdoc b/content/DOM/htmlheadingelement.jsdoc index 6565ef8..f40d348 100644 --- a/content/DOM/htmlheadingelement.jsdoc +++ b/content/DOM/htmlheadingelement.jsdoc @@ -2,4 +2,4 @@ HTMLHeadingElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlheadingelement +https://html.spec.whatwg.org/#htmlheadingelement diff --git a/content/DOM/htmlhrelement.jsdoc b/content/DOM/htmlhrelement.jsdoc index 9c5e3c9..53051a2 100644 --- a/content/DOM/htmlhrelement.jsdoc +++ b/content/DOM/htmlhrelement.jsdoc @@ -1,4 +1,4 @@ HTMLHRElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlhrelement +https://html.spec.whatwg.org/#htmlhrelement diff --git a/content/DOM/htmlhtmlelement.jsdoc b/content/DOM/htmlhtmlelement.jsdoc index 22a155f..f8e5258 100644 --- a/content/DOM/htmlhtmlelement.jsdoc +++ b/content/DOM/htmlhtmlelement.jsdoc @@ -2,4 +2,4 @@ HTMLHtmlElement : HTMLElement Spec: -http://www.w3.org/html/wg/drafts/html/master/single-page.html#htmlhtmlelement +https://html.spec.whatwg.org/#htmlhtmlelement diff --git a/content/DOM/htmliframeelement.jsdoc b/content/DOM/htmliframeelement.jsdoc index b8a9871..f406ccc 100644 --- a/content/DOM/htmliframeelement.jsdoc +++ b/content/DOM/htmliframeelement.jsdoc @@ -2,7 +2,7 @@ HTMLIFrameElement : HTMLElement Spec: -http://www.w3.org/html/wg/drafts/html/master/single-page.html#htmliframeelement +https://html.spec.whatwg.org/#htmliframeelement ---- @@ -17,7 +17,7 @@ instance.srcdoc : String instance.name : String ---- -instance.sandbox : DOMSettableTokenList +instance.sandbox : DOMTokenList ReadOnly: true diff --git a/content/DOM/htmlimageelement.jsdoc b/content/DOM/htmlimageelement.jsdoc index 0d85d39..9eb72c9 100644 --- a/content/DOM/htmlimageelement.jsdoc +++ b/content/DOM/htmlimageelement.jsdoc @@ -2,9 +2,10 @@ HTMLImageElement : HTMLElement **HTMLImageElement** is an element that displays an image. It corresponds to the **** tag. +See also %%/Image|Image%%. Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlimageelement +https://html.spec.whatwg.org/#htmlimageelement ---- instance.alt : String diff --git a/content/DOM/htmlinputelement.jsdoc b/content/DOM/htmlinputelement.jsdoc index 83b92bb..a633b03 100644 --- a/content/DOM/htmlinputelement.jsdoc +++ b/content/DOM/htmlinputelement.jsdoc @@ -1,19 +1,19 @@ HTMLInputElement : HTMLElement -HTMLInputElement allows the web page to recieve many types of input +HTMLInputElement allows the web page to recieve many types of input from the user. Use the %%#type|**type**%% property to configure what type of input you want to get. Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlinputelement +https://html.spec.whatwg.org/#htmlinputelement ---- instance.accept : String -A comma separated string containing the -types of files to accept. +A comma separated string containing the +types of files to accept. -Applies when **%%#type|type%% = 'file'**. +Applies when **%%#type|type%% = 'file'**. Each item in the list must be one of **'audio/*'**, @@ -28,26 +28,26 @@ or a file extension like **'.png'** or **'.txt'**. Spec: -http://dev.w3.org/html5/spec/single-page.html#attr-input-accept +https://html.spec.whatwg.org/#attr-input-accept ---- instance.alt : String Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-input-alt +https://html.spec.whatwg.org/#dom-input-alt ---- instance.autocomplete : String Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-input-autocomplete +https://html.spec.whatwg.org/#dom-input-autocomplete ---- instance.autofocus : Boolean Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-fe-autofocus +https://html.spec.whatwg.org/#dom-fe-autofocus ---- instance.defaultChecked : Boolean @@ -56,13 +56,13 @@ Applies when **%%#type|type%% = 'checkbox'**. Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-input-defaultchecked +https://html.spec.whatwg.org/#dom-input-defaultchecked ---- instance.checked : Boolean -Applies when **%%#type|type%% = 'checkbox'**. +Applies when **%%#type|type%% = 'checkbox'**. ---- instance.dirName : String @@ -80,8 +80,8 @@ true ---- instance.files : FileList -The %%/File|Files%% the user selected. -Applies when **%%#type|type%% = 'file'**. +The %%/File|Files%% the user selected. +Applies when **%%#type|type%% = 'file'**. If %%#multiple|**multiple**%% is set to **true**, **files** may contain more than one item. @@ -150,7 +150,7 @@ instance.min : String ---- instance.multiple : Boolean -Set to **true** to allow the user to select multiple files. +Set to **true** to allow the user to select multiple files. Applies when **%%#type|type%% = 'file'**. @@ -193,19 +193,19 @@ instance.required : Boolean instance.selectionDirection : String Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-textarea-input-selectiondirection +https://html.spec.whatwg.org/#dom-textarea-input-selectiondirection ---- instance.selectionEnd : Number Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-textarea-input-selectionend +https://html.spec.whatwg.org/#dom-textarea-input-selectionend ---- instance.selectionStart : Number Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-textarea-input-selectionstart +https://html.spec.whatwg.org/#dom-textarea-input-selectionstart ---- instance.size : Number @@ -219,7 +219,7 @@ instance.step : String ---- instance.type : String -Determines the type of input to receive. Must be one of +Determines the type of input to receive. Must be one of **'button'**, **'checkbox'**, **'color'**, @@ -326,12 +326,12 @@ prototype.setCustomValidity(error : String) : undefined prototype.select() : undefined Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-textarea-input-select +https://html.spec.whatwg.org/#dom-textarea-input-select ---- prototype.setSelectionRange(start : Number, end : Number, [direction : String]) : undefined Spec: -http://dev.w3.org/html5/spec/single-page.html#dom-textarea-input-setselectionrange +https://html.spec.whatwg.org/#dom-textarea-input-setselectionrange diff --git a/content/DOM/htmllielement.jsdoc b/content/DOM/htmllielement.jsdoc index e891d55..e2854ce 100644 --- a/content/DOM/htmllielement.jsdoc +++ b/content/DOM/htmllielement.jsdoc @@ -2,7 +2,7 @@ HTMLLIElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmllielement +https://html.spec.whatwg.org/#htmllielement ---- instance.value : Number diff --git a/content/DOM/htmllinkelement.jsdoc b/content/DOM/htmllinkelement.jsdoc index 92b6ab9..0c447c0 100644 --- a/content/DOM/htmllinkelement.jsdoc +++ b/content/DOM/htmllinkelement.jsdoc @@ -2,7 +2,7 @@ HTMLLinkElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmllinkelement +https://html.spec.whatwg.org/#htmllinkelement ---- instance.disabled : Boolean diff --git a/content/DOM/htmlmetaelement.jsdoc b/content/DOM/htmlmetaelement.jsdoc index 6a7c32b..b397043 100644 --- a/content/DOM/htmlmetaelement.jsdoc +++ b/content/DOM/htmlmetaelement.jsdoc @@ -2,7 +2,7 @@ HTMLMetaElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlmetaelement +https://html.spec.whatwg.org/#htmlmetaelement ---- instance.name : String diff --git a/content/DOM/htmlmodelement.jsdoc b/content/DOM/htmlmodelement.jsdoc index 8818a10..a932e73 100644 --- a/content/DOM/htmlmodelement.jsdoc +++ b/content/DOM/htmlmodelement.jsdoc @@ -2,7 +2,7 @@ HTMLModElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlmodelement +https://html.spec.whatwg.org/#htmlmodelement ---- instance.cite : String diff --git a/content/DOM/htmlolistelement.jsdoc b/content/DOM/htmlolistelement.jsdoc index fa1f442..41ac194 100644 --- a/content/DOM/htmlolistelement.jsdoc +++ b/content/DOM/htmlolistelement.jsdoc @@ -2,7 +2,7 @@ HTMLOListElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlolistelement +https://html.spec.whatwg.org/#htmlolistelement ---- instance.reversed : Boolean diff --git a/content/DOM/htmloptgroupelement.jsdoc b/content/DOM/htmloptgroupelement.jsdoc index 6f86dc2..3766ad9 100644 --- a/content/DOM/htmloptgroupelement.jsdoc +++ b/content/DOM/htmloptgroupelement.jsdoc @@ -1,7 +1,7 @@ HTMLOptGroupElement : HTMLElement Spec: -http://www.w3.org/html/wg/drafts/html/master/single-page.html#htmloptgroupelement +https://html.spec.whatwg.org/#htmloptgroupelement ---- instance.disabled : Boolean diff --git a/content/DOM/htmloptionelement.jsdoc b/content/DOM/htmloptionelement.jsdoc index 7980723..22eda2c 100644 --- a/content/DOM/htmloptionelement.jsdoc +++ b/content/DOM/htmloptionelement.jsdoc @@ -1,7 +1,9 @@ HTMLOptionElement : HTMLElement +See also %%/Option|Option%%. + Spec: -//http://www.w3.org/html/wg/drafts/html/master/single-page.html#htmloptionelement +https://html.spec.whatwg.org/#htmloptionelement ---- instance.disabled : Boolean diff --git a/content/DOM/htmloptionscollection.jsdoc b/content/DOM/htmloptionscollection.jsdoc index 65883d3..05db2fc 100644 --- a/content/DOM/htmloptionscollection.jsdoc +++ b/content/DOM/htmloptionscollection.jsdoc @@ -3,7 +3,7 @@ HTMLOptionsCollection : HTMLCollection Spec: -http://dev.w3.org/html5/spec/common-dom-interfaces.html#htmloptionscollection +https://html.spec.whatwg.org/#htmloptionscollection ---- diff --git a/content/DOM/htmlparagraphelement.jsdoc b/content/DOM/htmlparagraphelement.jsdoc index 1300d3a..a4ffbe0 100644 --- a/content/DOM/htmlparagraphelement.jsdoc +++ b/content/DOM/htmlparagraphelement.jsdoc @@ -2,4 +2,4 @@ HTMLParagraphElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlparagraphelement +https://html.spec.whatwg.org/#htmlparagraphelement diff --git a/content/DOM/htmlpreelement.jsdoc b/content/DOM/htmlpreelement.jsdoc index 070977a..8762b84 100644 --- a/content/DOM/htmlpreelement.jsdoc +++ b/content/DOM/htmlpreelement.jsdoc @@ -2,4 +2,4 @@ HTMLPreElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlpreelement +https://html.spec.whatwg.org/#htmlpreelement diff --git a/content/DOM/htmlquoteelement.jsdoc b/content/DOM/htmlquoteelement.jsdoc index 9c57d31..bbd5269 100644 --- a/content/DOM/htmlquoteelement.jsdoc +++ b/content/DOM/htmlquoteelement.jsdoc @@ -2,7 +2,7 @@ HTMLQuoteElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlquoteelement +https://html.spec.whatwg.org/#htmlquoteelement ---- instance.cite : String diff --git a/content/DOM/htmlscriptelement.jsdoc b/content/DOM/htmlscriptelement.jsdoc index dd237ab..aa9944a 100644 --- a/content/DOM/htmlscriptelement.jsdoc +++ b/content/DOM/htmlscriptelement.jsdoc @@ -2,7 +2,7 @@ HTMLScriptElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlscriptelement +https://html.spec.whatwg.org/#htmlscriptelement ---- instance.src : String diff --git a/content/DOM/htmlselectelement.jsdoc b/content/DOM/htmlselectelement.jsdoc index 6eb3552..32d8cb4 100644 --- a/content/DOM/htmlselectelement.jsdoc +++ b/content/DOM/htmlselectelement.jsdoc @@ -1,8 +1,8 @@ -HTMLSelectElement : HTMLElement +HTMLSelectElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlselectelement +https://html.spec.whatwg.org/#htmlselectelement ---- diff --git a/content/DOM/htmlslotelement.jsdoc b/content/DOM/htmlslotelement.jsdoc new file mode 100644 index 0000000..3caedab --- /dev/null +++ b/content/DOM/htmlslotelement.jsdoc @@ -0,0 +1,86 @@ +HTMLSlotElement : HTMLElement + +Spec: +https://html.spec.whatwg.org/multipage/scripting.html#htmlslotelement + +---- +instance.name : String + + +---- +prototype.assignedNodes([options : { flatten : Boolean } ]) : Array + + + + + + 1 + 2 + 3 + 4 + + + + +---- +prototype.assignedElements([options : { flatten : Boolean } ]) : Array + + + + + + + 1 + 2 + 3 + 4 + + + +---- +event.slotchange : listener(event : Event) : undefined + +Fired when a child of the slot is added or removed. + +Spec: +https://html.spec.whatwg.org/multipage/indices.html#event-slotchange diff --git a/content/DOM/htmlspanelement.jsdoc b/content/DOM/htmlspanelement.jsdoc index a2d384b..746d835 100644 --- a/content/DOM/htmlspanelement.jsdoc +++ b/content/DOM/htmlspanelement.jsdoc @@ -1,4 +1,4 @@ HTMLSpanElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlspanelement +https://html.spec.whatwg.org/#htmlspanelement diff --git a/content/DOM/htmlstyleelement.jsdoc b/content/DOM/htmlstyleelement.jsdoc index 0d221ab..8f433e0 100644 --- a/content/DOM/htmlstyleelement.jsdoc +++ b/content/DOM/htmlstyleelement.jsdoc @@ -2,12 +2,12 @@ HTMLStyleElement : HTMLElement Spec: -http://dev.w3.org/html5/spec/single-page.html#htmlstyleelement +https://html.spec.whatwg.org/#htmlstyleelement ---- instance.disabled : Boolean -Set to true to turn off all the rules in the StyleSheet. This property +Set to true to turn off all the rules in the StyleSheet. This property mirrors the %%/StyleSheet#disabled|**StyleSheet.disabled**%% property. @@ -15,7 +15,7 @@ property. foo + + +---- +instance.root : Element + +ReadOnly: +true + +---- +instance.rootMargin : String + +ReadOnly: +true + +---- +instance.thresholds : Array + +ReadOnly: +true + +---- +prototype.disconnect() : undefined + +---- +prototype.observe(target : Element) : undefined + +---- +prototype.takeRecords() : Array + +---- +prototype.unobserve(target : Element) : undefined + diff --git a/content/DOM/intersectionobserverentry.jsdoc b/content/DOM/intersectionobserverentry.jsdoc new file mode 100644 index 0000000..848697a --- /dev/null +++ b/content/DOM/intersectionobserverentry.jsdoc @@ -0,0 +1,47 @@ +IntersectionObserverEntry : Object + +Spec: +https://www.w3.org/TR/intersection-observer/#intersectionobserverentry + +---- +instance.boundingClientRect : DOMRectReadOnly + +ReadOnly: +true + +---- +instance.intersectionRect : DOMRectReadOnly + +ReadOnly: +true + +---- +instance.intersectionRatio : Number + +ReadOnly: +true + +---- +instance.isIntersecting : Boolean + +ReadOnly: +true + +---- +instance.rootBounds : DOMRectReadOnly + +ReadOnly: +true + +---- +instance.target : Element + +ReadOnly: +true + +---- +instance.time : Number + +ReadOnly: +true + diff --git a/content/DOM/keyboardevent.jsdoc b/content/DOM/keyboardevent.jsdoc index 36e65d4..65372be 100644 --- a/content/DOM/keyboardevent.jsdoc +++ b/content/DOM/keyboardevent.jsdoc @@ -1,9 +1,52 @@ KeyboardEvent : UIEvent +Event containing information about key presses. +See %%https://w3c.github.io/uievents/tools/key-event-viewer.html|Keyboard Event Demo%%. + +Spec: +https://w3c.github.io/uievents/#interface-keyboardevent + +---- +new KeyboardEvent( \ + type : String, \ + [eventInit : { \ + key : String, \ + code : String, \ + location : Number, \ + repeat : Boolean, \ + isComposing : Boolean, \ + ctrlKey : Boolean, \ + shiftKey : Boolean, \ + altKey : Boolean, \ + metaKey : Boolean, \ + modifierAltGraph : Boolean, \ + modifierCapsLock : Boolean, \ + modifierFn : Boolean, \ + modifierFnLock : Boolean, \ + modifierHyper : Boolean, \ + modifierNumLock : Boolean, \ + modifierScrollLock : Boolean, \ + modifierSuper : Boolean, \ + modifierSymbol : Boolean, \ + modifierSymbolLock : Boolean, \ + view : Window, \ + detail : Number, \ + bubbles : Boolean, \ + cancelable: Boolean, \ + composed : Boolean, \ + }]) : MouseEvent + +Creates a new KeyboardEvent of the specified **type** and initial properties. + +Spec: +http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-MouseEvent-initializers + + ---- instance.altKey : Boolean Returns **true** if the keyboard's alt (Option on Mac) key is pressed. +See also %%#getModifierState|**getModifierState()**%%. @@ -51,6 +94,7 @@ true instance.ctrlKey : Boolean Returns **true** if the keyboard's control key is pressed. +See also %%#getModifierState|**getModifierState()**%%. @@ -68,6 +112,57 @@ Returns **true** if the keyboard's control key is pressed. ReadOnly: true +---- +instance.code : String + + + +
key:
+
code:
+ +
+ +ReadOnly: +true + +Spec: +https://w3c.github.io/uievents/#dom-keyboardevent-code + +---- +instance.key : String + + + +
key:
+
code:
+ +
+ +ReadOnly: +true + +Spec: +https://w3c.github.io/uievents/#dom-keyboardevent-key ---- instance.keyCode : Number @@ -127,8 +222,9 @@ true ---- instance.metaKey : Boolean -Returns **true** if the keyboard's meta (Command on Mac, not available on Windows) -key is pressed. +Returns **true** if the keyboard's meta (Command on Mac, the Windows logo key in +some PC browsers) key is pressed. +See also %%#getModifierState|**getModifierState()**%%. @@ -171,6 +267,7 @@ true instance.shiftKey : Boolean Returns **true** if the keyboard's shift key is pressed. +See also %%#getModifierState|**getModifierState()**%%. @@ -212,7 +309,25 @@ instance.which : Number ReadOnly: true - +---- +prototype.getModifierState(modifierKey : String) : Boolean + +Returns **true** if the the **modifierKey** is pressed or active. +**modifierKey** must be one of +**'Alt'**, +**'AltGraph'**, +**'CapsLock'**, +**'Control'**, +**'Fn'**, +**'Meta'**, +**'NumLock'**, +**'ScrollLock'**, +**'Shift'**, +or +**'SymbolLock'**. + +Spec: +https://w3c.github.io/uievents/#dom-keyboardevent-getmodifierstate ---- DOM_KEY_LOCATION_STANDARD : Number diff --git a/content/DOM/mouseevent.jsdoc b/content/DOM/mouseevent.jsdoc index c445165..944061b 100644 --- a/content/DOM/mouseevent.jsdoc +++ b/content/DOM/mouseevent.jsdoc @@ -33,115 +33,375 @@ Spec: http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-MouseEvent-initializers ---- -instance.screenX : Number +instance.clientX : Number -The x position of the pointer on the screen at the time the event fired. -See also -%%#screenY|**screenY**%%, -%%#clientX|**clientX**%%, and -%%#clientY|**clientY**%%. +The x position of the pointer relative to the viewport at the time the event fired. +This is the same as %%#x|**x**%%. + +See the corresponding +%%#clientY|**clientY**%% +and alternative coordinates +%%#offsetX|**offsetX**%%, +%%#pageX|**pageX**%%, and +%%#screenX|**screenX**%%. -
+
+
+
 
+ReadOnly: +true + Spec: -http://www.w3.org/TR/DOM-Level-3-Events/#widl-MouseEvent-screenX +https://drafts.csswg.org/cssom-view/#dom-mouseevent-clientx + +---- +instance.clientY : Number + +The y position of the pointer relative to the viewport at the time the event fired. +This is the same as %%#y|**y**%%. + +See the corresponding +%%#clientX|**clientX**%% +and alternative coordinates +%%#offsetY|**offsetY**%%, +%%#pageY|**pageY**%%, and +%%#screenY|**screenY**%%. + + +
+
+
+
+ +
ReadOnly: true +Spec: +https://drafts.csswg.org/cssom-view/#dom-mouseevent-clienty + ---- -instance.screenY : Number +instance.movementX : Number -The y position of the pointer on the screen at the time the event fired. -See also -%%#screenX|**screenX**%%, -%%#clientX|**clientX**%%, and -%%#clientY|**clientY**%%. +The change in x position of the pointer since the last time the mouse move event fired. + +See the corresponding %%#movementY|**movementY**%% and +%%/Element#requestPointerLock|element.requestPointerLock()%%. -
+
+
+
 
+ReadOnly: +true + Spec: -http://www.w3.org/TR/DOM-Level-3-Events/#widl-MouseEvent-screenY +https://w3c.github.io/pointerlock/#dom-mouseevent-movementx + +---- +instance.movementY : Number + +The change in y position of the pointer since the last time the mouse move event fired. + +See the corresponding %%#movementX|**movementX**%% and +%%/Element#requestPointerLock|element.requestPointerLock()%%. + + +
+
+
+
+ +
ReadOnly: true +Spec: +https://w3c.github.io/pointerlock/#dom-mouseevent-movementy ---- -instance.clientX : Number +instance.offsetX : Number -The x position of the pointer relative to the viewport at the time the event fired. -See also +The x position of the pointer relative to **this** the time the event fired. + +See the corresponding +%%#offsetY|**offsetY**%% +and alternative coordinates +%%#x|**x**%%, +%%#clientX|**clientX**%%, +%%#pageX|**pageX**%%, and +%%#screenX|**screenX**%%. + + +
+
+
+
+ +
+ +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view/#dom-mouseevent-offsetx + +---- +instance.offsetY : Number + +The y position of the pointer relative to **this** at the time the event fired. + +See the corresponding +%%#offsetX|**offsetX**%% +and alternative coordinates +%%#y|**y**%%, %%#clientY|**clientY**%%, -%%#screenX|**screenX**%%, and +%%#pageY|**pageY**%%, and %%#screenY|**screenY**%%. -
+
+
+
 
+ReadOnly: +true + Spec: -http://www.w3.org/TR/DOM-Level-3-Events/#widl-MouseEvent-clientX +https://drafts.csswg.org/cssom-view/#dom-mouseevent-offsety + +---- +instance.pageX : Number + +The x position of the pointer relative to the page at the time the event fired. +Same as **%%#clientX|this.clientX%% + %%/Window#scrollX|window.scrollX%%**. + +See the corresponding +%%#pageY|**pageY**%% +and alternative coordinates +%%#x|**x**%%, +%%#clientX|**clientX**%%, +%%#offsetX|**offsetX**%%, and +%%#screenX|**screenX**%%. + + +
+
+
+
+ +
ReadOnly: true +Spec: +https://drafts.csswg.org/cssom-view/#dom-mouseevent-pagex + ---- -instance.clientY : Number +instance.pageY : Number -The y position of the pointer relative to the viewport at the time the event fired. -See also -%%#clientX|**clientX**%%, -%%#screenX|**screenX**%%, and +The y position of the pointer relative to the page at the time the event fired. +Same as **%%#clientY|this.clientY%% + %%/Window#scrollY|window.scrollY%%**. + +See the corresponding +%%#pageX|**pageX**%% +and alternative coordinates +%%#y|**y**%%, +%%#clientY|**clientY**%%, +%%#offsetY|**offsetY**%%, and %%#screenY|**screenY**%%. + +
+
+
+
+ +
+ +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view/#dom-mouseevent-pagey + +---- +instance.screenX : Number + +The x position of the pointer on the screen at the time the event fired. + +See the corresponding +%%#screenY|**screenY**%% +and alternative coordinates +%%#x|**x**%%, +%%#clientX|**clientX**%%, +%%#offsetX|**offsetX**%%, and +%%#pageX|**pageX**%%. -
+
+
+
 
+ + +Spec: +https://drafts.csswg.org/cssom-view-1/#dom-mouseevent-screenx + +ReadOnly: +true + +---- +instance.screenY : Number + +The y position of the pointer on the screen at the time the event fired. + +See the corresponding +%%#screenX|**screenX**%% +and alternative coordinates +%%#y|**y**%%, +%%#clientY|**clientY**%%, +%%#offsetY|**offsetY**%%, and +%%#pageY|**pageY**%%. + + +
+
+
+
+
Spec: -http://www.w3.org/TR/DOM-Level-3-Events/#widl-MouseEvent-clientY +https://drafts.csswg.org/cssom-view-1/#dom-mouseevent-screeny ReadOnly: true @@ -264,7 +524,7 @@ See also %%#buttons|**buttons**%%.
-  button:  
+  button: 
   type: 
 
+
+ +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view/#dom-mouseevent-x + +---- +instance.y : Number + +The y position of the pointer relative to the viewport at the time the event fired. +This is the same as %%#clientY|**clientY**%%. + +See the corresponding +%%#x|**x**%% +and alternative coordinates +%%#offsetY|**offsetY**%%, +%%#pageY|**pageY**%%, and +%%#screenY|**screenY**%%. + + +
+
+
+
+ +
+ + +ReadOnly: +true + +Spec: +https://drafts.csswg.org/cssom-view/#dom-mouseevent-y + ---- prototype.getModifierState(modifierKey : String) : Boolean @@ -346,10 +683,9 @@ Returns **true** if the the **modifierKey** is pressed or active. **'NumLock'**, **'ScrollLock'**, **'Shift'**, -**'SymbolLock'**, or -**'OS'**. +**'SymbolLock'**. Spec: -http://www.w3.org/TR/DOM-Level-3-Events/#widl-MouseEvent-getModifierState +https://w3c.github.io/uievents/#dom-mouseevent-getmodifierstate diff --git a/content/DOM/node.jsdoc b/content/DOM/node.jsdoc index ebdac8a..a90c4d9 100644 --- a/content/DOM/node.jsdoc +++ b/content/DOM/node.jsdoc @@ -1,15 +1,15 @@ Node : EventTarget Node represents a node in a tree (usually the DOM/document tree). Node is the base -type for -%%/Element|Element%%, +type for +%%/Element|Element%%, %%/Text|Text%%, %%/Document|Document%%, %%/Comment|Comment%%, and others. Spec: -http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1950641247 +https://dom.spec.whatwg.org/#interface-node ---- instance.nodeType : Number @@ -51,13 +51,13 @@ true instance.nodeName : String The name of the node. The value of **nodeName** depends on the -type of **this**. +type of **this**. -For %%/Element|**Element**s%%, +For %%/Element|**Element**s%%, the **nodeName** -is the same as %%/Element#tagName|**Element.tagName**%%. +is the same as %%/Element#tagName|**Element.tagName**%%. -For %%/ProcessingInstruction|**ProcessingInstructions**s%%, +For %%/ProcessingInstruction|**ProcessingInstructions**s%%, the **nodeName** is the same as %%/ProcessingInstruction|**ProcessingInstruction.target**%%. @@ -68,7 +68,7 @@ the **nodeName** is the same as console.log(document.nodeName); console.log(document.doctype.nodeName); - // nodeName for Element is same as tagName + // nodeName for Element is same as tagName console.log(document.createElement('div').nodeName); // nodeName for a ProcessingInstruction is the same as the target @@ -107,7 +107,7 @@ true ---- instance.parentNode : Node -The parent of **this**. +The parent of **this**. foo @@ -182,7 +182,7 @@ true ---- instance.firstChild : Node -The first child Node in **this**. If **this** has no children, +The first child Node in **this**. If **this** has no children, **firstChild** will be **null**. @@ -205,7 +205,7 @@ true ---- instance.lastChild : Node -The last child Node in **this**. If **this** has no children, +The last child Node in **this**. If **this** has no children, **lastChild** will be **null**. @@ -228,7 +228,7 @@ true ---- instance.previousSibling : Node -The sibling Node before **this** in %%#parentNode|**this.parentNode**%%'s children. +The sibling Node before **this** in %%#parentNode|**this.parentNode**%%'s children. If **this** is the first child in **parentNode** or **this** has no **parentNode**, **previousSibling** will be **null**. @@ -256,7 +256,7 @@ true ---- instance.nextSibling : Node -The sibling Node after **this** in %%#parentNode|**this.parentNode**%%'s children. +The sibling Node after **this** in %%#parentNode|**this.parentNode**%%'s children. If **this** is the last child in **parentNode** or **this** has no **parentNode**, **nextSibling** will be **null**. @@ -342,7 +342,7 @@ Returns **true** if **other** is a descendant of **this**. instance.nodeValue : String The text content of **this** (not including any descendants). -Note, %%/Element|**Element**%%s do not have text content, +Note, %%/Element|**Element**%%s do not have text content, the text is placed in a %%/Text|**Text**%% Node inside the **Element**. See also %%#textContent|**textContent**%%. @@ -355,7 +355,7 @@ See also %%#textContent|**textContent**%%. var parent = document.getElementById('parent'); // Elements do not have nodeValue - console.log(parent.nodeValue); + console.log(parent.nodeValue); // Text is placed in a Text node var textNode = parent.firstChild; @@ -420,7 +420,7 @@ and ---- prototype.appendChild(newChild : Node) : Node -Inserts **newChild** at the end of the children of **this**. +Inserts **newChild** at the end of the children of **this**. Returns **newChild**. See also %%#insertBefore|**insertBefore()**%%, @@ -446,7 +446,7 @@ prototype.replaceChild(newChild : Node, oldChild : Node) : Node Removes **oldChild** from the children of **this** and replaces it with **newChild** (so **newChild** is in the same position as -**oldChild** was). +**oldChild** was). Returns **oldChild**. See also %%#appendChild|**appendChild()**%%, @@ -528,7 +528,7 @@ prototype.cloneNode(deep : Boolean) : Node Creates a copy of **this**. Only the %%/Element#attributes|**attributes**%% of the element are copied (any other properties set will not be copied). -If **deep** is true, all descendants will be copied and added as children of the +If **deep** is true, all descendants will be copied and added as children of the clone. Otherwise the returned value will not have children. @@ -728,7 +728,7 @@ true ---- DOCUMENT_POSITION_DISCONNECTED : Number -Bitmask value returned by +Bitmask value returned by %%#compareDocumentPosition|**compareDocumentPosition()**%%. ReadOnly: @@ -737,7 +737,7 @@ true ---- DOCUMENT_POSITION_PRECEDING : Number -Bitmask value returned by +Bitmask value returned by %%#compareDocumentPosition|**compareDocumentPosition()**%%. ReadOnly: @@ -746,7 +746,7 @@ true ---- DOCUMENT_POSITION_FOLLOWING : Number -Bitmask value returned by +Bitmask value returned by %%#compareDocumentPosition|**compareDocumentPosition()**%%. ReadOnly: @@ -755,7 +755,7 @@ true ---- DOCUMENT_POSITION_CONTAINS : Number -Bitmask value returned by +Bitmask value returned by %%#compareDocumentPosition|**compareDocumentPosition()**%%. ReadOnly: @@ -764,7 +764,7 @@ true ---- DOCUMENT_POSITION_CONTAINED_BY : Number -Bitmask value returned by +Bitmask value returned by %%#compareDocumentPosition|**compareDocumentPosition()**%%. ReadOnly: @@ -773,7 +773,7 @@ true ---- DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC : Number -Bitmask value returned by +Bitmask value returned by %%#compareDocumentPosition|**compareDocumentPosition()**%%. ReadOnly: diff --git a/content/DOM/nodefilter.jsdoc b/content/DOM/nodefilter.jsdoc index 8c54554..45459df 100644 --- a/content/DOM/nodefilter.jsdoc +++ b/content/DOM/nodefilter.jsdoc @@ -1,7 +1,7 @@ NodeFilter : Object Spec: -http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter +https://dom.spec.whatwg.org/#callbackdef-nodefilter ---- prototype.acceptNode(n : Node) : Number diff --git a/content/DOM/nodelist.jsdoc b/content/DOM/nodelist.jsdoc index 8de9e39..6f98dcc 100644 --- a/content/DOM/nodelist.jsdoc +++ b/content/DOM/nodelist.jsdoc @@ -1,24 +1,24 @@ NodeList : Object A list of %%/Node|Nodes%% similar to an %%/Array|Array%%. NodeLists are -returned from various methods such as +returned from various methods such as %%/Document#getElementsByClassName|**document.getElementsByClassName()**%%, %%/Document#getElementsByTagName|**document.getElementsByTagName()**%%, and -%%/Document#querySelectorAll|**document.querySelectorAll()**%%. +%%/Document#querySelectorAll|**document.querySelectorAll()**%%. -Note, the items in a NodeList may update as the underlying document updates, +Note, the items in a NodeList may update as the underlying document updates, see the documentation for the API that created the NodeList for more details. Spec: -http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177 +https://dom.spec.whatwg.org/#interface-nodelist ---- instance[index : Number] : Node Returns the Node at the specified **index**. You can also use the -%%#item|**item()**%% method to retrieve the item. +%%#item|**item()**%% method to retrieve the item.
foo
@@ -37,7 +37,7 @@ Returns the Node at the specified **index**. You can also use the } console.log(); - // The divsLive NodeList will update automatically when you add + // The divsLive NodeList will update automatically when you add // another div var baz = document.createElement('div'); baz.textContent = 'baz'; @@ -73,7 +73,7 @@ The number of Nodes in the list. } console.log(); - // The divsLive NodeList will update automatically when you add + // The divsLive NodeList will update automatically when you add // another div var baz = document.createElement('div'); baz.textContent = 'baz'; @@ -96,5 +96,5 @@ prototype.item(index : Number) : Node Same as %%#indexer_Number|**this[index]**%%. -Spec: +Spec: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-844377136 diff --git a/content/DOM/option.jsdoc b/content/DOM/option.jsdoc new file mode 100644 index 0000000..a70d444 --- /dev/null +++ b/content/DOM/option.jsdoc @@ -0,0 +1,22 @@ +Option : HTMLOptionElement + +Alternative way to construct an %%/HTMLOptionElement|HTMLOptionElement%% instead of +using %%/Document#createElement|**document.createElement('option')**%%. + +Spec: +https://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html + +---- +new Option() : Option + +---- +new Option(text : String) : Option + +---- +new Option(text : String, value : String) : Option + +---- +new Option(text : String, value : String, defaultSelected : Boolean) : Option + +---- +new Option(text : String, value : String, defaultSelected : Boolean, selected : Boolean) : Option diff --git a/content/DOM/pointerevent.jsdoc b/content/DOM/pointerevent.jsdoc index 340d166..c346812 100644 --- a/content/DOM/pointerevent.jsdoc +++ b/content/DOM/pointerevent.jsdoc @@ -3,6 +3,7 @@ PointerEvent : MouseEvent PointerEvents are a superset of %%/MouseEvent|MouseEvents%% and %%/TouchEvent|TouchEvents%% and also support pen/stylus input. +Spec: http://www.w3.org/TR/pointerevents/ ---- diff --git a/content/DOM/progressevent.jsdoc b/content/DOM/progressevent.jsdoc index d6457c9..28f12cf 100644 --- a/content/DOM/progressevent.jsdoc +++ b/content/DOM/progressevent.jsdoc @@ -1,7 +1,7 @@ ProgressEvent : Event Spec: -http://www.w3.org/TR/progress-events/#interface-progressevent +https://xhr.spec.whatwg.org/#interface-progressevent ---- new ProgressEvent(type : String, [args : Object]) : ProgressEvent diff --git a/content/DOM/range.jsdoc b/content/DOM/range.jsdoc index ca1d10f..e6ad097 100644 --- a/content/DOM/range.jsdoc +++ b/content/DOM/range.jsdoc @@ -1,10 +1,10 @@ Range : Object -A Range is a selection of the content of a document. +A Range is a selection of the content of a document. Create a Range with %%/Document#createRange|**document.createRange()**%%. Spec: -http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Interface +https://dom.spec.whatwg.org/#interface-range ---- instance.startContainer : Node diff --git a/content/DOM/text.jsdoc b/content/DOM/text.jsdoc index 1be7027..8311f1e 100644 --- a/content/DOM/text.jsdoc +++ b/content/DOM/text.jsdoc @@ -1,11 +1,11 @@ Text : CharacterData -Text is a %%/Node|Node%% that represents the text content of the document. -The text content of elements like %%/HTMLSpanElement|Spans%% is stored -in Text nodes. +Text is a %%/Node|Node%% that represents the text content of the document. +The text content of elements like %%/HTMLSpanElement|Spans%% is stored +in Text nodes. Spec: -http://www.w3.org/TR/dom/#interface-text +https://dom.spec.whatwg.org/#interface-text ---- new Text([data = '' : String]) : Text @@ -24,7 +24,7 @@ Can also be created with %%/Document#createTextNode|**document.createTextNode()*
Spec: -http://www.w3.org/TR/dom/#dom-text +https://dom.spec.whatwg.org/#dom-text ---- instance.wholeText : String @@ -53,15 +53,15 @@ ReadOnly: true Spec: -http://www.w3.org/TR/dom/#dom-text-wholetext +https://dom.spec.whatwg.org/#dom-text-wholetext ---- prototype.splitText(offset : Number) : Text Splits **this** into 2 %%/Text|**Text**%% nodes at the specified **offset** into %%/CharacterData#data|**data**%%. The first portion of **data** stays in **this** -and the remainder is placed in a new **Text** that is returned by the call to -**splitText()**. The remainder **Text** is inserted after **this** in +and the remainder is placed in a new **Text** that is returned by the call to +**splitText()**. The remainder **Text** is inserted after **this** in %%/Node#parentNode|**this.parentNode**%%. @@ -76,7 +76,7 @@ and the remainder is placed in a new **Text** that is returned by the call to console.log(' ' + i +': "' + foo.childNodes[i].data + '"'); } console.log(); - + var remainder = initialText.splitText(3); console.log('initialText after split: "' + initialText.data + '"'); console.log('remainder after split: "' + remainder.data + '"'); @@ -91,4 +91,4 @@ and the remainder is placed in a new **Text** that is returned by the call to Spec: -http://www.w3.org/TR/dom/#dom-text-splittext +https://dom.spec.whatwg.org/#dom-text-splittext diff --git a/content/DOM/validitystate.jsdoc b/content/DOM/validitystate.jsdoc index f388fae..d654f83 100644 --- a/content/DOM/validitystate.jsdoc +++ b/content/DOM/validitystate.jsdoc @@ -1,7 +1,7 @@ ValidityState : Object Spec: -http://dev.w3.org/html5/spec/constraints.html#validitystate +https://html.spec.whatwg.org/#validitystate ---- instance.valueMissing : Boolean @@ -55,7 +55,7 @@ ReadOnly: true ---- -instance.valid : Boolean +instance.valid : Boolean ReadOnly: true diff --git a/content/DragDrop/datatransferitem.jsdoc b/content/DragDrop/datatransferitem.jsdoc index bdd99a7..f335a72 100644 --- a/content/DragDrop/datatransferitem.jsdoc +++ b/content/DragDrop/datatransferitem.jsdoc @@ -2,12 +2,12 @@ DataTransferItem : Object DataTransferItem represents an item that can is being dragged. There can be more than one DataTransferItem for a drag and drop operation. -For example, dragging a document may have a +For example, dragging a document may have a DataTransferItem containing the rich text and a DataTransferItem containing the plain text. Spec: -http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#datatransferitem +https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem ---- instance.kind : String @@ -15,29 +15,48 @@ instance.kind : String The kind of the item. Will be one of **'string'** or **'file'**. -Drag Me - - -
Drop Here ('Drag Me' or a text or image file from your computer)
+
+ Drag Me
+ allowedEffect: +
+ +
+ Drop Here ('Drag Me' or a text or image file from your computer)
+ dropEffect: +
diff --git a/content/Browser/headers.jsdoc b/content/Fetch/headers.jsdoc similarity index 100% rename from content/Browser/headers.jsdoc rename to content/Fetch/headers.jsdoc diff --git a/content/Browser/request.jsdoc b/content/Fetch/request.jsdoc similarity index 71% rename from content/Browser/request.jsdoc rename to content/Fetch/request.jsdoc index d930c73..6d3d664 100644 --- a/content/Browser/request.jsdoc +++ b/content/Fetch/request.jsdoc @@ -19,8 +19,19 @@ new Request(url : String, [init : { \ credentials : String /* See the %%#credentials|credentials%% property for the valid values. */, \ headers : Object /* The http headers to send with the request. This will be passed \ to the %%/Headers|Headers%% constructor. */, \ + integrity : String, \ + keepalive : Boolean, \ method : String /* The http method such as **'GET'**, **'POST'**, **'DELETE'**. */, \ - mode : String /* See the %%#mode|mode%% property for the valid values. */ \ + mode : String /* See the %%#mode|mode%% property for the valid values. */, \ + redirect : String /* One of **'follow'**, **'error'**, or **'manual'** */, \ + referrer : String, \ + referrerPolicy : String /* One of **''**, **'no-referrer'**, **'no-referrer-when-downgrade'**, \ + **'same-origin'**, **'origin'**, **'strict-origin'**, \ + **'origin-when-cross-origin'**, **'strict-origin-when-cross-origin'**, \ + or **'unsafe-url'** */, \ + requestMode : String /* One of **'navigate'**, **'same-origin'**, **'no-cors'**, or **'cors'** */, \ + requestCredentials : String /* One of **'omit'**, **'same-origin'**, or **'include'** */, \ + signal : AbortSignal \ }]) : Request @@ -56,56 +67,28 @@ Will be one of: ReadOnly: true + ---- -instance.context : String +instance.credentials : String Will be one of: -**'audio'**, -**'beacon'**, -**'cspreport'**, -**'download'**, -**'embed'**, -**'eventsource'**, -**'favicon'**, -**'fetch'**, -**'font'**, -**'form'**, -**'frame'**, -**'hyperlink'**, -**'iframe'**, -**'image'**, -**'imageset'**, -**'import'**, -**'internal'**, -**'location'**, -**'manifest'**, -**'object'**, -**'ping'**, -**'plugin'**, -**'prefetch'**, -**'script'**, -**'serviceworker'**, -**'sharedworker'**, -**'subresource'**, -**'style'**, -**'track'**, -**'video'**, -**'worker'**, -**'xmlhttprequest'**, -**'xslt'**. +**'include'**, +**'omit'**, +**'same-origin'**. ReadOnly: true ---- -instance.credentials : String +instance.destination : String Will be one of: -**'include'**, -**'omit'**, -**'same-origin'**. +**''**, **'audio'**, **'audioworklet'**, **'document'**, **'embed'**, **'font'**, +**'frame'**, **'iframe'**, **'image'**, '**manifest'**, **'object'**, **'paintworklet'**, +**'report'**, **'script'**, **'sharedworker'**, **'style'**, **'track'**, **'video'**, +**'worker'**, **'xslt'**. ReadOnly: true @@ -116,6 +99,30 @@ instance.headers : Headers ReadOnly: true +---- +instance.integrity : String + +ReadOnly: +true + +---- +instance.keepalive : Boolean + +ReadOnly: +true + +---- +instance.isHistoryNavigation : Boolean + +ReadOnly: +true + +---- +instance.isReloadNavigation : Boolean + +ReadOnly: +true + ---- instance.method : String @@ -134,12 +141,30 @@ Will be one of: ReadOnly: true +---- +instance.redirect : String + +ReadOnly: +true + ---- instance.referrer : String ReadOnly: true +---- +instance.referrerPolicy : String + +ReadOnly: +true + +---- +instance.signal : AbortSignal + +ReadOnly: +true + ---- instance.url : String diff --git a/content/Fetch/response.jsdoc b/content/Fetch/response.jsdoc new file mode 100644 index 0000000..87cc25e --- /dev/null +++ b/content/Fetch/response.jsdoc @@ -0,0 +1,157 @@ +Response : Object + +Represents a response from a web request initiated by %%/Window#fetch|fetch()%%. +fetch(), %%/Request|Request%% and Response are a new, low level replacement for +%%/XMLHttpRequest|XMLHttpRequest%%. + +Spec: +https://fetch.spec.whatwg.org/#response-class + +---- +new Response([body = null : Object, [init : { \ + status = 200 : Number, \ + statusText = '' : String, \ + headers : Object \ + }]]) : Response + +**body** must be one of %%/ArrayBuffer|ArrayBuffer%%, +%%/ArrayBufferView|ArrayBufferView%%, %%/Blob|Blob%%, %%/FormData|FormData%%, +%%/ReadableStream|ReadableStream%%, %%/String|String%%, or +%%%/URLSearchParams|URLSearchParams%%. + +---- +instance.body : ReadableStream + + +const res = await fetch('/fireworks.ogv'); +const reader = res.body.getReader(); + +let result; +while (!(result = await reader.read()).done) { + console.log('chunk size:', result.value.byteLength); +} + + +ReadOnly: +true + +---- +instance.headers : Headers + +ReadOnly: +true + +---- +instance.ok : Boolean + +**true** if the server returned a successful %%#status|**status**%% code (200-299). + + +const res1 = await fetch('https://httpbin.org/status/200'); +console.log(res1.ok); + +const res2 = await fetch('https://httpbin.org/status/404'); +console.log(res2.ok); + + +ReadOnly: +true + +---- +instance.redirected : Boolean + +**true** if the server returned a redirect %%#status|**status**%% code (301, 302, etc). + + +const res1 = await fetch('https://httpbin.org/status/200'); +console.log(res1.redirected); + +const res2 = await fetch('https://httpbin.org/status/301'); +console.log(res2.redirected); + + +ReadOnly: +true + +---- +instance.status : Number + +The http status code for the request. See %%#statusText|**statusText**%% for +a description of the code. + + +const res1 = await fetch('https://httpbin.org/status/200'); +console.log(res1.status); + +const res2 = await fetch('https://httpbin.org/status/404'); +console.log(res2.status); + + +ReadOnly: +true + +---- +instance.statusText : String + +A description of the %%#status|status return code%%. + + +const res1 = await fetch('https://httpbin.org/status/200'); +console.log(res1.statusText); + +const res2 = await fetch('https://httpbin.org/status/404'); +console.log(res2.statusText); + + +ReadOnly: +true + +---- +instance.trailer : Promise + +ReadOnly: +true + +---- +instance.type : String + +Will be one of: +**'basic'**, +**'cors'**, +**'default'**, +**'error'**, +**'opaque'**, +**'opaqueredirect'**. + +ReadOnly: +true + +---- +instance.url : String + +ReadOnly: +true + +---- +prototype.arrayBuffer() : Promise + +---- +prototype.blob() : Promise + +---- +prototype.clone() : Response + +---- +prototype.formData() : Promise + +---- +prototype.json() : Promise + +---- +prototype.text() : Promise + +---- +error() : Response + +---- +redirect(url : String, [status = 302 : Number]) : Response diff --git a/content/FileAPI/FileReaderSync.jsdoc b/content/FileAPI/FileReaderSync.jsdoc new file mode 100644 index 0000000..031877d --- /dev/null +++ b/content/FileAPI/FileReaderSync.jsdoc @@ -0,0 +1,59 @@ +FileReaderSync : Object + +Similar to %%/FileReader|FileReader%% except synchronously reads from %%/Blob|Blob%%s. +Only available inside %%/Worker|Worker%%s. + +Spec: +https://w3c.github.io/FileAPI/#FileReaderSync + +---- +new FileReaderSync() : FileReaderSync + +Constructs a new FileReaderSync. + +---- +prototype.readAsArrayBuffer() : ArrayBuffer + +Reads from **blob** as an ArrayBuffer. +See also %%/Blob#arrayBuffer|Blob.arrayBuffer()%%. + + + + + + +---- +prototype.readAsText(blob : Blob, [encoding : String]) : String + +Reads from **blob** as a string. +For the valid values of **encoding**, see %%http://www.iana.org/assignments/character-sets/character-sets.xhtml|character sets%%. +See also %%/Blob#text|Blob.text()%%. + + + + + diff --git a/content/FileAPI/FileSystemDirectoryHandle.jsdoc b/content/FileAPI/FileSystemDirectoryHandle.jsdoc new file mode 100644 index 0000000..c18e6b7 --- /dev/null +++ b/content/FileAPI/FileSystemDirectoryHandle.jsdoc @@ -0,0 +1,72 @@ +FileSystemDirectoryHandle : FileSystemHandle + +See %%/Window#showDirectoryPicker|window.showDirectoryPicker%%. + +Spec: +https://wicg.github.io/file-system-access/#api-filesystemdirectoryhandle + +AsyncIterable: +true + +---- +instance[Symbol.asyncIterator] : Function> + + +startIn:
+ + +
+ + +---- +prototype.getFileHandle(name : String, [options : { \ + create : Boolean /* Default = **false**. */ \ + }]) : Promise + + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemdirectoryhandle-getfilehandle + +---- +prototype.getDirectoryHandle(name : String, [options : { \ + create : Boolean /* Default = **false**. */ \ + }]) : Promise + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemdirectoryhandle-getdirectoryhandle + +---- +prototype.removeEntry(name : String, [options : { \ + recursive : Boolean /* Default = **false**. */ \ + }]) : Promise + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemdirectoryhandle-removeentry + +---- +prototype.resolve(possibleDescendant : FileSystemHandle) : Promise> + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemdirectoryhandle-resolve diff --git a/content/FileAPI/FileSystemFileHandle.jsdoc b/content/FileAPI/FileSystemFileHandle.jsdoc new file mode 100644 index 0000000..ae5b2e9 --- /dev/null +++ b/content/FileAPI/FileSystemFileHandle.jsdoc @@ -0,0 +1,18 @@ +FileSystemFileHandle : FileSystemHandle + +Spec: +https://wicg.github.io/file-system-access/#api-filesystemfilehandle + +---- +prototype.getFile() : Promise + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemfilehandle-getfile + +---- +prototype.createWritable([options : { \ + keepExistingData : Boolean /* Default = **false**. */, \ + }]) : Promise + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemfilehandle-createwritable diff --git a/content/FileAPI/FileSystemHandle.jsdoc b/content/FileAPI/FileSystemHandle.jsdoc new file mode 100644 index 0000000..cffb574 --- /dev/null +++ b/content/FileAPI/FileSystemHandle.jsdoc @@ -0,0 +1,108 @@ +FileSystemHandle : Object + +Spec: +https://wicg.github.io/file-system-access/#filesystemhandle + +---- +instance.kind : String + +Will be one of **'directory'** or **'file'** + + + + + + +ReadOnly: +true + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemhandle-kind + +---- +instance.name : String + + + + + + +ReadOnly: +true + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemhandle-name + +---- +prototype.isSameEntry(other : FileSystemHandle) : Promise + + + + + + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemhandle-issameentry + +---- +prototype.queryPermission([descriptor : { \ + mode : String /* Must be **'read'** or **'readwrite'**. Default = **'read'**. */ \ +}]) : Promise + +Return value will be one of **'denied'**, **'granted'**, or **'prompt'**. + + + + + + + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemhandle-querypermission + +---- +prototype.requestPermission([descriptor : { \ + mode : String /* Must be **'read'** or **'readwrite'**. Default = **'read'**. */ \ +}]) : Promise + +Return value will be one of **'denied'**, **'granted'**, or **'prompt'**. + + + + + + +Spec: +https://wicg.github.io/file-system-access/#dom-filesystemhandle-requestpermission diff --git a/content/FileAPI/FileSystemWritableFileStream.jsdoc b/content/FileAPI/FileSystemWritableFileStream.jsdoc new file mode 100644 index 0000000..2b67116 --- /dev/null +++ b/content/FileAPI/FileSystemWritableFileStream.jsdoc @@ -0,0 +1,30 @@ +FileSystemWritableFileStream : WritableStream + +Spec: +https://wicg.github.io/file-system-access/#filesystemwritablefilestream + +---- +prototype.seek(position : Number) : Promise + +---- +prototype.truncate(size : Number) : Promise + +---- +prototype.write(arrayBuffer : ArrayBuffer) : Promise + +---- +prototype.write(arrayBufferView : ArrayBufferView) : Promise + +---- +prototype.write(blob : Blob) : Promise + +---- +prototype.write(string : String) : Promise + +---- +prototype.write(writeParams : { \ + data : Object /* Must be of type %%/ArrayBuffer|ArrayBuffer%%, %%/ArrayBufferView|ArrayBufferView%%, %%/Blob|Blob%%, or %%/String|String%%. */, \ + position : Number, \ + size : Number, \ + type : String /* Must be one of **'write'**, **'seek'**, **'truncate'** */, \ + }) : Promise diff --git a/content/FileAPI/blob.jsdoc b/content/FileAPI/blob.jsdoc index cb10026..1394419 100644 --- a/content/FileAPI/blob.jsdoc +++ b/content/FileAPI/blob.jsdoc @@ -57,7 +57,7 @@ console.log('size=' + blob.size); console.log('type=' + blob.type); var testEndings = function(string, endings) { - var blob = new Blob([string], { type: 'plain/text', + var blob = new Blob([string], { type: 'text/plain', endings: endings }); var reader = new FileReader(); reader.onload = function(event){ @@ -79,7 +79,7 @@ instance.size : Number The size of the blob in bytes. -var blob = new Blob(['foo', 'bar'], { type: 'plain/text', +var blob = new Blob(['foo', 'bar'], { type: 'text/plain', endings: 'native' }); console.log(blob.size); @@ -97,7 +97,7 @@ instance.type : String The type of the blob. -var blob = new Blob(['foo', 'bar'], { type: 'plain/text', +var blob = new Blob(['foo', 'bar'], { type: 'text/plain', endings: 'native' }); console.log(blob.type); @@ -109,6 +109,27 @@ http://www.w3.org/TR/FileAPI/#dfn-type ReadOnly: true +---- +prototype.arrayBuffer() : Promise + +Asynchronously returns an ArrayBuffer for the data in **this**. +See also %%/FileReader#readAsArrayBuffer|FileReader.readAsArrayBuffer()%%. + + +const blob = new Blob(['foo']); +const arrayBuffer = await blob.arrayBuffer(); +console.log(arrayBuffer.byteLength); + +const chars = new Uint8Array(arrayBuffer); +console.log(chars); + +// The bytes of the ArrayBuffer match the char codes of the string +console.log([...'foo'].map(c => c.charCodeAt(0))); + + +Spec: +https://w3c.github.io/FileAPI/#dom-blob-arraybuffer + ---- prototype.slice([start = 0: Number, [end : Number, [contentType = '' : String]]]) : Blob @@ -118,9 +139,8 @@ performing the slice. If **end** is not specified, **this.size** is used. The returned blob's %%#type|**type**%% will be **contentType** if specified, otherwise it will be **''**. - -var blob = new Blob(['foo', 'bar'], { type: 'plain/text', +var blob = new Blob(['foo', 'bar'], { type: 'text/plain', endings: 'native' }); console.log('blob size:', blob.size); console.log('blob type:', blob.type); @@ -134,7 +154,40 @@ console.log('slice size:', slice.size); console.log('slice type:', slice.type); +Spec: +https://w3c.github.io/FileAPI/#dom-blob-slice + +---- +prototype.stream() : ReadableStream + +Returns a stream of the data in **this**. The values of the stream will be +%%/Uint8Array|**Uint8Array**%%s. + + +const blob = new Blob(['foo']); +const stream = blob.stream(); +const reader = stream.getReader(); + +let result; +while (!(result = await reader.read()).done) { + console.log(result.value); +} + Spec: -http://www.w3.org/TR/FileAPI/#dfn-slice +https://w3c.github.io/FileAPI/#dom-blob-text + +---- +prototype.text() : Promise +Asynchronously returns a String for the data in **this**. + +See also %%/FileReader#readAsText|FileReader.readAsText()%%. + + +const blob = new Blob(['foo']); +console.log(await blob.text()); + + +Spec: +https://w3c.github.io/FileAPI/#dom-blob-text diff --git a/content/FileAPI/filereader.jsdoc b/content/FileAPI/filereader.jsdoc index 11fbcd5..410467a 100644 --- a/content/FileAPI/filereader.jsdoc +++ b/content/FileAPI/filereader.jsdoc @@ -39,6 +39,7 @@ Begins reading from **blob** as an %%/ArrayBuffer|**ArrayBuffer**%%. The result will be stored on %%#result|**this.result**%% after the %%#onload|**'load'**%% event fires. +See also %%/Blob#arrayBuffer|Blob.arrayBuffer()%%. @@ -67,10 +68,10 @@ Begins reading from **blob** as a string. The result will be stored on %%#result|**this.result**%% after the %%#onload|**'load'**%% event fires. For the valid values of **encoding**, see %%http://www.iana.org/assignments/character-sets/character-sets.xhtml|character sets%%. +See also %%/Blob#text|Blob.text()%%.
- - -
- -Spec: -http://www.w3.org/TR/FileAPI/#dfn-createObjectURL - - ----- -revokeObjectURL(url : String) : undefined - -Frees the resources associated with the **url** created by -%%#createObjectURL|**createObjectURL()**%%. - - - - - - - -Spec: -http://www.w3.org/TR/FileAPI/#dfn-revokeObjectURL diff --git a/content/Gamepad/Gamepad.jsdoc b/content/Gamepad/Gamepad.jsdoc new file mode 100644 index 0000000..22c6f60 --- /dev/null +++ b/content/Gamepad/Gamepad.jsdoc @@ -0,0 +1,175 @@ +Gamepad : Object + +Represents a gamepad/controller. Connected gamepads are available through the +%%/Navigator#getGamepads|**navigator.getGamepads()**%% method. + +Spec: +https://w3c.github.io/gamepad/#dom-gamepad + +---- +instance.id : String + +An id for the controller. + + +Press button on controller to connect. + + + +ReadOnly: +true + +---- +instance.index : Number + + +Press button on controller to connect. + + + +ReadOnly: +true + +---- +instance.connected : Boolean + +**true** when the gamepad is connected. + + +Press button on controller to connect. + + + +ReadOnly: +true + +---- +instance.timestamp : Number + +The last time there was an update from the gamepad. In milliseconds. + + +Press button on controller to connect. +
+ +
+ +ReadOnly: +true + +---- +instance.mapping : String + +Either **''** or **'standard'**. If **'standard'**, the buttons/axes will follow the +layout as seen at %%https://w3c.github.io/gamepad/#fig-visual-representation-of-a-standard-gamepad-layout|https://w3c.github.io/gamepad/#fig-visual-representation-of-a-standard-gamepad-layout%%. + + +Press button on controller to connect. + + + +ReadOnly: +true + +---- +instance.axes : Array + +The joystick positions. May also contain the direction pad (+) pressed direction. + + +Press button on controller to connect. +
+ +
+ +ReadOnly: +true + +---- +instance.buttons : Array + +The state of the buttons on the controller. + + +Press button on controller to connect. +
+ +
+ +ReadOnly: +true + diff --git a/content/Gamepad/GamepadButton.jsdoc b/content/Gamepad/GamepadButton.jsdoc new file mode 100644 index 0000000..7364c65 --- /dev/null +++ b/content/Gamepad/GamepadButton.jsdoc @@ -0,0 +1,125 @@ +GamepadButton : Object + +Represents a button on the %%/Gamepad|Gamepad%%. + +Spec: +https://w3c.github.io/gamepad/#gamepadbutton-interface + +---- +instance.pressed : Boolean + +**true** if the button was pressed. For buttons that support %%#value|**value**%%, +**pressed** will be **true** when **value** passes a platform/browser specified +threshold. + + +Press button on controller to connect. +
+ +
+ +ReadOnly: +true + +Spec: +https://w3c.github.io/gamepad/#dom-gamepadbutton-pressed + +---- +instance.touched : Boolean + +**true** if the user is touching the button but not necessarily pressing the button. +For hardware that cannot detech touches, will be **true** when the user is pressing +the button. + + +Press button on controller to connect. +
+ +
+ +ReadOnly: +true + +Spec: +https://w3c.github.io/gamepad/#dom-gamepadbutton-touched + +---- +instance.value : Number + +The pressure that the button was pressed with between **0** (light press) and **1** (hard press). +If the button doesn't measure pressure, will be **0** when unpressed and **1** when pressed. + + +Press button on controller to connect. +
+ +
+ +ReadOnly: +true + +Spec: +https://w3c.github.io/gamepad/#dom-gamepadbutton-value diff --git a/content/Gamepad/GamepadEvent.jsdoc b/content/Gamepad/GamepadEvent.jsdoc new file mode 100644 index 0000000..9cd9213 --- /dev/null +++ b/content/Gamepad/GamepadEvent.jsdoc @@ -0,0 +1,12 @@ +GamepadEvent : Event + +---- +new GamepadEvent(type : String, eventInit : { \ + gamepad: Gamepad \ + }) : GamepadEvent + +---- +instance.gamepad : Gamepad + +ReadOnly: +true diff --git a/content/Geometry/DOMMatrix.jsdoc b/content/Geometry/DOMMatrix.jsdoc new file mode 100644 index 0000000..fb46e1c --- /dev/null +++ b/content/Geometry/DOMMatrix.jsdoc @@ -0,0 +1,647 @@ +DOMMatrix : DOMMatrixReadOnly + +Spec: +https://drafts.fxtf.org/geometry-1/#dommatrix + +---- +new DOMMatrix() : DOMMatrix + +Constructs new %%DOMMatrixReadOnly#is2D|2D%% %%DOMMatrixReadOnly#isIdentity|identity%% matrix. + + +console.log(new DOMMatrix()); + + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-dommatrix-dommatrix + +---- +new DOMMatrix(cssTransform : String) : DOMMatrix + +Constructs a new matrix using the specified **cssTransform**. The syntax for +this string is the same as for the %%/CSSStyleDeclaration#transform|css transform%% +property. + + +console.log(new DOMMatrix('scale(2)')); +console.log(new DOMMatrix('translate(3px, 4px)')); +console.log(new DOMMatrix('rotate(30deg)')); +console.log(); + +// Can combine multiple. Note order matters. +console.log(new DOMMatrix('scale(5) translate(6px, 7px)')); +console.log(new DOMMatrix('translate(6px, 7px) scale(5)')); +console.log(); + +// '3d' versions +console.log(new DOMMatrix('translate3d(8px, 9px, 10px)')); +console.log(new DOMMatrix('rotate3d(1, 0, 0, 30deg)')); + + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-dommatrix-dommatrix + +---- +new DOMMatrix(values : Iterator) : DOMMatrix + +**values** must have either **6** or **16** elements in it. + +

+If **6** elements are specified (**a**, **b**, ..., **f**), the matrix will be a +%%DOMMatrixReadOnly#is2D|2D%% matrix constructed like: + + + + + + +
**a****c****e**
**b****d****f**
**0****0****1**
+ +

+ + + +// The following are equivalent: +console.log(new DOMMatrix('scale(2)')); +console.log(new DOMMatrix([2, 0, 0, 2, 0, 0])); +console.log(DOMMatrix.fromMatrix({ a: 2, d: 2 })); + + +

+If **16** elements are specified (**m11**, **m12**, **m13**, **m14**, **m21**, **m22**, +..., **m44**), the matrix will be a 3D matrix constructed like: + + + + + +
**m11****m12****m13****m14**
**m21****m22****m23****m24**
**m31****m32****m33****m34**
**m41****m42****m43****m44**
+

+ + +// The following are equivalent: +console.log(new DOMMatrix('scale3d(2, 2, 2)')); +console.log(new DOMMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])); +console.log(DOMMatrix.fromMatrix({ m11: 2, m22: 2, m33: 2 })); + + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-dommatrix-dommatrix + +---- +instance.a : Number + +Returns the **a** element of the matrix. This is the same as the %%#m11|**m11**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.a); +console.log(matrix2D.m11); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.a); +console.log(matrix3D.m11); + + +---- +instance.b : Number + +Returns the **b** element of the matrix. This is the same as the %%#m12|**m12**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.b); +console.log(matrix2D.m12); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.b); +console.log(matrix3D.m12); + + +---- +instance.c : Number + +Returns the **c** element of the matrix. This is the same as the %%#m21|**m21**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.c); +console.log(matrix2D.m21); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.c); +console.log(matrix3D.m21); + + +---- +instance.d : Number + +Returns the **d** element of the matrix. This is the same as the %%#m22|**m22**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.d); +console.log(matrix2D.m22); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.d); +console.log(matrix3D.m22); + + +---- +instance.e : Number + +Returns the **e** element of the matrix. This is the same as the %%#m41|**m41**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.e); +console.log(matrix2D.m41); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.e); +console.log(matrix3D.m41); + + +---- +instance.f : Number + +Returns the **f** element of the matrix. This is the same as the %%#m42|**m42**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.f); +console.log(matrix2D.m42); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.f); +console.log(matrix3D.m42); + + +---- +instance.m11 : Number + +Returns the **m11** element of the matrix. This is the same as the %%#a|**a**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.a); +console.log(matrix2D.m11); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.a); +console.log(matrix3D.m11); + + +---- +instance.m12 : Number + +Returns the **m12** element of the matrix. This is the same as the %%#b|**b**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.b); +console.log(matrix2D.m12); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.b); +console.log(matrix3D.m12); + + +---- +instance.m13 : Number + +Returns the **m13** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m13); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m13); + + +---- +instance.m14 : Number + +Returns the **m14** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m14); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m14); + + + +---- +instance.m21 : Number + +Returns the **m21** element of the matrix. This is the same as the %%#c|**c**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.c); +console.log(matrix2D.m21); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.c); +console.log(matrix3D.m21); + + +---- +instance.m22 : Number + +Returns the **m22** element of the matrix. This is the same as the %%#d|**d**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.d); +console.log(matrix2D.m22); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.d); +console.log(matrix3D.m22); + + +---- +instance.m23 : Number + +Returns the **m23** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m23); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m23); + + +---- +instance.m24 : Number + +Returns the **m24** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m24); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m24); + + +---- +instance.m31 : Number + +Returns the **m31** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m31); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m31); + + +---- +instance.m32 : Number + +Returns the **m32** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m32); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m32); + + +---- +instance.m33 : Number + +Returns the **m33** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m33); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m33); + + +---- +instance.m34 : Number + +Returns the **m14** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m34); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m34); + + +---- +instance.m41 : Number + +Returns the **m41** element of the matrix. This is the same as the %%#e|**e**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.e); +console.log(matrix2D.m41); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.e); +console.log(matrix3D.m41); + + +---- +instance.m42 : Number + +Returns the **m42** element of the matrix. This is the same as the %%#f|**f**%% +element. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.f); +console.log(matrix2D.m42); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.f); +console.log(matrix3D.m42); + + +---- +instance.m43 : Number + +Returns the **m43** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m43); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m43); + + +---- +instance.m44 : Number + +Returns the **m44** element of the matrix. + + +const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m44); +console.log(); + + +const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m44); + + +---- +prototype.multiplySelf([matrix : Object]) : DOMMatrix + +Same as **multiyply(%%DOMMatrixReadOnly#fromMatrix|fromMatrix(matrix)%%)**. + +---- +prototype.multiplySelf([matrix : DOMMatrixReadOnly]) : DOMMatrix + +---- +prototype.preMultiplySelf([matrix : Object]) : DOMMatrix + +Same as **preMultiyply(%%DOMMatrixReadOnly#fromMatrix|fromMatrix(matrix)%%)**. + +---- +prototype.preMultiplySelf([matrix : DOMMatrixReadOnly]) : DOMMatrix + +---- +prototype.translateSelf([x : Number, [y : Number, [z : Number]]]) : DOMMatrix + +Applies the specfied translation to **this**. Returns **this**. + + +const matrix = new DOMMatrix(); + +console.log(matrix.translateSelf(2, 3)); +console.log(matrix); + + +---- +prototype.scaleSelf([scaleX = 1 : Number, [scaleY = scaleX : Number, [scaleZ = 1 : Number, \ + [originX = 0 : Number, [originY = 0 : Number, [originZ = 0 : Number]]]]]]) : DOMMatrix + +Applies the specfied scale to **this**. Returns **this**. + +---- +prototype.scale3DSelf([scale = 1 : Number, [originX = 0 : Number, [originY = 0 : Number, \ + [originZ = 0 : Number]]]]) : DOMMatrix + +Applies the specfied scale to **this**. Returns **this**. + +---- +prototype.rotateSelf(degreesZ = 0 : Number) : DOMMatrix + +Applies the specfied rotation to **this**. Returns **this**. + +---- +prototype.rotateSelf([degreesX = 0 : Number, [degreesY = 0 : Number, [degreesZ = 0 : Number]]]) : DOMMatrix + +Applies the specfied rotation to **this**. Returns **this**. + +---- +prototype.rotateFromVectorSelf([x = 0 : Number, [y = 0 : Number]]) : DOMMatrix + +Rotates **this** by the angle between the x axis and the vector from the origin +to the specified point (**x**, **y**). Same as +**%%#rotateSelf_Number|this.rotateSelf%%(%%Math#atan2|Math.atan2%%(y, x) * 180 / %%Math#PI|Math.PI%%)**. +Return **this**. + + + + + + +---- +prototype.rotateAxisAngleSelf([x = 0 : Number, [y = 0 : Number, [z = 0 : Number, [degrees = 0 : Number]]]]) : DOMMatrix + +---- +prototype.skewXSelf([degrees = 0 : Number]) : DOMMatrix + + + + + + +---- +prototype.skewY([degrees = 0 : Number]) : DOMMatrix + + + + + + + +---- +prototype.invertSelf() : DOMMatrix + +---- +prototype.setValue(cssTransform : String) : DOMMatrix + + +---- +fromMatrix(init : Object) : DOMMatrixReadOnly + +---- +fromMatrix([matrix : DOMMatrixReadOnly]) : DOMMatrix + +---- +fromFloat32Array(values : Float32Array) : DOMMatrix + +---- +fromFloat64Array(values : Float64Array) : DOMMatrix + diff --git a/content/Geometry/DOMMatrixReadOnly.jsdoc b/content/Geometry/DOMMatrixReadOnly.jsdoc new file mode 100644 index 0000000..7d285f8 --- /dev/null +++ b/content/Geometry/DOMMatrixReadOnly.jsdoc @@ -0,0 +1,775 @@ +DOMMatrixReadOnly : Object + +A 4x4 matrix. + +Spec: +https://drafts.fxtf.org/geometry-1/#dommatrixreadonly + +---- +new DOMMatrixReadOnly() : DOMMatrixReadOnly + +Constructs new %%#is2D|2D%% %%#isIdentity|identity%% matrix. + + +console.log(new DOMMatrixReadOnly()); + + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-dommatrixreadonly + +---- +new DOMMatrixReadOnly(cssTransform : String) : DOMMatrixReadOnly + +Constructs a new matrix using the specified **cssTransform**. The syntax for +this string is the same as for the %%/CSSStyleDeclaration#transform|css transform%% +property. + + +console.log(new DOMMatrixReadOnly('scale(2)')); +console.log(new DOMMatrixReadOnly('translate(3px, 4px)')); +console.log(new DOMMatrixReadOnly('rotate(30deg)')); +console.log(); + +// Can combine multiple. Note order matters. +console.log(new DOMMatrixReadOnly('scale(5) translate(6px, 7px)')); +console.log(new DOMMatrixReadOnly('translate(6px, 7px) scale(5)')); +console.log(); + +// '3d' versions +console.log(new DOMMatrixReadOnly('translate3d(8px, 9px, 10px)')); +console.log(new DOMMatrixReadOnly('rotate3d(1, 0, 0, 30deg)')); + + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-dommatrixreadonly + +---- +new DOMMatrixReadOnly(values : Iterator) : DOMMatrixReadOnly + +**values** must have either **6** or **16** elements in it. + +

+If **6** elements are specified (**a**, **b**, ..., **f**), the matrix will be a +%%#is2D|2D%% matrix constructed like: + + + + + + +
**a****c****e**
**b****d****f**
**0****0****1**
+ +

+ + + +// The following are equivalent: +console.log(new DOMMatrixReadOnly('scale(2)')); +console.log(new DOMMatrixReadOnly([2, 0, 0, 2, 0, 0])); +console.log(DOMMatrixReadOnly.fromMatrix({ a: 2, d: 2 })); + + +

+If **16** elements are specified (**m11**, **m12**, **m13**, **m14**, **m21**, **m22**, +..., **m44**), the matrix will be a 3D matrix constructed like: + + + + + +
**m11****m12****m13****m14**
**m21****m22****m23****m24**
**m31****m32****m33****m34**
**m41****m42****m43****m44**
+

+ + +// The following are equivalent: +console.log(new DOMMatrixReadOnly('scale3d(2, 2, 2)')); +console.log(new DOMMatrixReadOnly([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])); +console.log(DOMMatrixReadOnly.fromMatrix({ m11: 2, m22: 2, m33: 2 })); + + +---- +instance.a : Number + +Returns the **a** element of the matrix. This is the same as the %%#m11|**m11**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.a); +console.log(matrix2D.m11); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.a); +console.log(matrix3D.m11); + + +ReadOnly: +true + +---- +instance.b : Number + +Returns the **b** element of the matrix. This is the same as the %%#m12|**m12**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.b); +console.log(matrix2D.m12); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.b); +console.log(matrix3D.m12); + + +ReadOnly: +true + +---- +instance.c : Number + +Returns the **c** element of the matrix. This is the same as the %%#m21|**m21**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.c); +console.log(matrix2D.m21); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.c); +console.log(matrix3D.m21); + + +ReadOnly: +true + +---- +instance.d : Number + +Returns the **d** element of the matrix. This is the same as the %%#m22|**m22**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.d); +console.log(matrix2D.m22); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.d); +console.log(matrix3D.m22); + + +ReadOnly: +true + +---- +instance.e : Number + +Returns the **e** element of the matrix. This is the same as the %%#m41|**m41**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.e); +console.log(matrix2D.m41); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.e); +console.log(matrix3D.m41); + + +ReadOnly: +true + +---- +instance.f : Number + +Returns the **f** element of the matrix. This is the same as the %%#m42|**m42**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.f); +console.log(matrix2D.m42); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.f); +console.log(matrix3D.m42); + + +ReadOnly: +true + +---- +instance.m11 : Number + +Returns the **m11** element of the matrix. This is the same as the %%#a|**a**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.a); +console.log(matrix2D.m11); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.a); +console.log(matrix3D.m11); + + +ReadOnly: +true + +---- +instance.m12 : Number + +Returns the **m12** element of the matrix. This is the same as the %%#b|**b**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.b); +console.log(matrix2D.m12); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.b); +console.log(matrix3D.m12); + + +ReadOnly: +true + +---- +instance.m13 : Number + +Returns the **m13** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m13); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m13); + + +ReadOnly: +true + +---- +instance.m14 : Number + +Returns the **m14** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m14); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m14); + + +ReadOnly: +true + + +---- +instance.m21 : Number + +Returns the **m21** element of the matrix. This is the same as the %%#c|**c**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.c); +console.log(matrix2D.m21); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.c); +console.log(matrix3D.m21); + + +ReadOnly: +true + +---- +instance.m22 : Number + +Returns the **m22** element of the matrix. This is the same as the %%#d|**d**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.d); +console.log(matrix2D.m22); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.d); +console.log(matrix3D.m22); + + +ReadOnly: +true + +---- +instance.m23 : Number + +Returns the **m23** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m23); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m23); + + +ReadOnly: +true + +---- +instance.m24 : Number + +Returns the **m24** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m24); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m24); + + +ReadOnly: +true + +---- +instance.m31 : Number + +Returns the **m31** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m31); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m31); + + +ReadOnly: +true + +---- +instance.m32 : Number + +Returns the **m32** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m32); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m32); + + +ReadOnly: +true + +---- +instance.m33 : Number + +Returns the **m33** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m33); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m33); + + +ReadOnly: +true + +---- +instance.m34 : Number + +Returns the **m14** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m34); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m34); + + +ReadOnly: +true + +---- +instance.m41 : Number + +Returns the **m41** element of the matrix. This is the same as the %%#e|**e**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.e); +console.log(matrix2D.m41); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.e); +console.log(matrix3D.m41); + + +ReadOnly: +true + +---- +instance.m42 : Number + +Returns the **m42** element of the matrix. This is the same as the %%#f|**f**%% +element. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.f); +console.log(matrix2D.m42); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.f); +console.log(matrix3D.m42); + + +ReadOnly: +true + +---- +instance.m43 : Number + +Returns the **m43** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m43); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m43); + + +ReadOnly: +true + +---- +instance.m44 : Number + +Returns the **m44** element of the matrix. + + +const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]); + +console.log(matrix2D.m44); +console.log(); + + +const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); + +console.log(matrix3D.m44); + + +ReadOnly: +true + + +---- +instance.is2D : Boolean + +Indicates **this** was created with one of the 2D constructors. + + +console.log(new DOMMatrixReadOnly().is2D); +console.log(new DOMMatrixReadOnly([1, 0, 0, 1, 0, 0]).is2D); +console.log(new DOMMatrixReadOnly('scale3d(2, 2, 2)').is2D); + + +ReadOnly: +true + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-is2d + +---- +instance.isIdentity : Boolean + +**true** if **this** is an identity matrix (diagonal elements are **1**, rest are **0**). + + +console.log(new DOMMatrixReadOnly().isIdentity); +console.log(new DOMMatrixReadOnly([1, 0, 0, 1, 0, 0]).isIdentity); +console.log(new DOMMatrixReadOnly('scale(2)').isIdentity); + + +ReadOnly: +true + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-isidentity + +---- +prototype.translate([x : Number, [y : Number, [z : Number]]]) : DOMMatrix + +Returns a new DOMMatrix of **this** followed by the specified translation. +If **this** is %%#is2D|2D%% and **z** is specified, the return value will +be a 3D matrix. Otherwise it will be a 2D matrix. + +See also %%DOMMatrix#translateSelf()|DOMMatrix.translateSelf()%%. + + +const matrix = new DOMMatrixReadOnly(); + +console.log(matrix.translate(2, 3)); +console.log(matrix.translate(2, 3, 4)); + + +---- +prototype.scale([scaleX = 1 : Number, [scaleY = scaleX : Number, [scaleZ = 1 : Number, \ + [originX = 0 : Number, [originY = 0 : Number, [originZ = 0 : Number]]]]]]) : DOMMatrix + +See also %%DOMMatrix#scaleSelf()|DOMMatrix.scaleSelf()%%. + +---- +prototype.scaleNonUniform([scaleX = 1 : Number, [scaleY = 1 : Number]]) : DOMMatrix + +---- +prototype.scale3D([scale = 1 : Number, [originX = 0 : Number, [originY = 0 : Number, \ + [originZ = 0 : Number]]]]) : DOMMatrix + +See also %%DOMMatrix#scale3DSelf()|DOMMatrix.scale3DSelf()%%. + +---- +prototype.rotate(degreesZ = 0 : Number) : DOMMatrix + +See also %%DOMMatrix#rotateSelf()|DOMMatrix.rotateSelf()%%. + +---- +prototype.rotate([degreesX = 0 : Number, [degreesY = 0 : Number, [degreesZ = 0 : Number]]]) : DOMMatrix + +See also %%DOMMatrix#rotateSelf()|DOMMatrix.rotateSelf()%%. + +---- +prototype.rotateFromVector([x = 0 : Number, [y = 0 : Number]]) : DOMMatrix + +Rotates **this** by the angle between the x axis and the vector from the origin +to the specified point (**x**, **y**). Same as +%%#rotate_Number|**this.rotate%%(%%Math#atan2|Math.atan2%%(y, x) * 180 / %%Math#PI|Math.PI%%)**. +See also %%DOMMatrix#rotateFromVectorSelf()|DOMMatrix.rotateFromVectorSelf()%%. + + + + + + +---- +prototype.rotateAxisAngle([x = 0 : Number, [y = 0 : Number, [z = 0 : Number, [degrees = 0 : Number]]]]) : DOMMatrix + +See also %%DOMMatrix#rotateAxisAngleSelf()|DOMMatrix.rotateAxisAngleSelf()%%. + +---- +prototype.skewX([degrees = 0 : Number]) : DOMMatrix + +See also %%DOMMatrix#skewXSelf()|DOMMatrix.skewXSelf()%%. + + + + + + +---- +prototype.skewY([degrees = 0 : Number]) : DOMMatrix + +See also %%DOMMatrix#skewYSelf()|DOMMatrix.skewYSelf()%%. + + + + + + + +---- +prototype.multiply([matrix : Object]) : DOMMatrix + +Same as **multiyply(%%#fromMatrix|fromMatrix(matrix)%%)**. + +---- +prototype.multiply([matrix : DOMMatrixReadOnly]) : DOMMatrix + +See also %%DOMMatrix#multiplySelf()|DOMMatrix.multiplySelf()%%. + +---- +prototype.flipX() : DOMMatrix + +---- +prototype.flipY() : DOMMatrix + +---- +prototype.inverse() : DOMMatrix + +See also %%DOMMatrix#invertSelf()|DOMMatrix.invertSelf()%%. + +---- +prototype.transformPoint(point : Object) : DOMPoint + +Same as **transformPoint(%%DOMPointReadOnly#fromPoint|fromPoint(Point)%%)**. + +---- +prototype.transformPoint([point : DOMPointReadOnly]) : DOMPoint + +---- +prototype.toFloat32Array() : Float32Array + +---- +prototype.toFloat64Array() : Float64Array + +---- +fromMatrix(init : Object) : DOMMatrixReadOnly + +---- +fromMatrix([matrix : DOMMatrixReadOnly]) : DOMMatrixReadOnly + +---- +fromFloat32Array(values : Float32Array) : DOMMatrixReadOnly + +---- +fromFloat64Array(values : Float64Array) : DOMMatrixReadOnly + diff --git a/content/Geometry/DOMPoint.jsdoc b/content/Geometry/DOMPoint.jsdoc new file mode 100644 index 0000000..26b015f --- /dev/null +++ b/content/Geometry/DOMPoint.jsdoc @@ -0,0 +1,137 @@ +DOMPoint : DOMPointReadOnly + +Represents a 3D point using %%https://en.wikipedia.org/wiki/Homogeneous_coordinates#Use_in_computer_graphics_and_computer_vision|homogeneous coordinates%%. + +Spec: +https://drafts.fxtf.org/geometry-1/#DOMPoint + +---- +new DOMPoint([x = 0 : Number, [y = 0 : Number, [z = 0 : Number, [w = 1 : Number]]]]) : DOMPoint + + + + + +---- +instance.x : Number + +The x coordinate of the point. + + + + + +---- +instance.y : Number + +The y coordinate of the point. + + + + + +---- +instance.z : Number + +The z coordinate of the point. + + + + + +---- +instance.w : Number + +The w coordinate of the point. Typically set to **1**. +See %%https://en.wikipedia.org/wiki/Homogeneous_coordinates#Use_in_computer_graphics_and_computer_vision|homogeneous coordinates%% for more details. + + + + + +---- +fromPoint(point : { \ + x : Number /* Default = **0** */, \ + y : Number /* Default = **0** */, \ + z : Number /* Default = **0** */, \ + w : Number /* Default = **1** */ \ + }) : DOMPoint + +Returns a new DOMPoint that copies the coordinates from **point**. + + + + + +---- +fromPoint(point : DOMPointReadOnly) : DOMPoint + +Returns a new DOMPoint that copies the coordinates from **point**. + + + + diff --git a/content/Geometry/DOMPointReadOnly.jsdoc b/content/Geometry/DOMPointReadOnly.jsdoc new file mode 100644 index 0000000..357a2d6 --- /dev/null +++ b/content/Geometry/DOMPointReadOnly.jsdoc @@ -0,0 +1,163 @@ +DOMPointReadOnly : Object + +Represents a 3D point using %%https://en.wikipedia.org/wiki/Homogeneous_coordinates#Use_in_computer_graphics_and_computer_vision|homogeneous coordinates%% +(x, y, z, and w). +See also %%/DOMPoint|DOMPoint%%. + +Spec: +https://drafts.fxtf.org/geometry-1/#DOMPoint + +---- +new DOMPointReadOnly([x = 0 : Number, [y = 0 : Number, [z = 0 : Number, [w = 1 : Number]]]]) : DOMPointReadOnly + + + + + +---- +instance.x : Number + +The x coordinate of the point. + + + + + +ReadOnly: +true + +---- +instance.y : Number + +The y coordinate of the point. + + + + + +ReadOnly: +true + +---- +instance.z : Number + +The z coordinate of the point. + + + + + +ReadOnly: +true + +---- +instance.w : Number + +The w coordinate of the point. Typically set to **1**. +See %%https://en.wikipedia.org/wiki/Homogeneous_coordinates#Use_in_computer_graphics_and_computer_vision|homogeneous coordinates%% for more details. + + + + + +ReadOnly: +true + +---- +matrixTransform([matrix : DOMMatrix]) : DOMPoint + + + + + +---- +fromPoint([point : { \ + x : Number /* Default = **0** */, \ + y : Number /* Default = **0** */, \ + z : Number /* Default = **0** */, \ + w : Number /* Default = **1** */ \ + }]) : DOMPointReadOnly + +Returns a new DOMPointReadOnly that copies the coordinates from **point**. + + + + + +---- +fromPoint([point : DOMPointReadOnly]) : DOMPointReadOnly + +Returns a new DOMPointReadOnly that copies the coordinates from **point**. + + + + diff --git a/content/Geometry/DOMQuad.jsdoc b/content/Geometry/DOMQuad.jsdoc new file mode 100644 index 0000000..5dd0e5e --- /dev/null +++ b/content/Geometry/DOMQuad.jsdoc @@ -0,0 +1,52 @@ +DOMQuad : Object + +See %%https://drafts.csswg.org/cssom-view/#the-geometryutils-interface|https://drafts.csswg.org/cssom-view/#the-geometryutils-interface%% +for upcoming methods that use DOMQuad. + +Spec: +https://drafts.fxtf.org/geometry-1/#domquad + +---- +new DOMQuad([p1 : DOMPointReadOnly, [p2 : DOMPointReadOnly, [p3 : DOMPointReadOnly, [p4 : DOMPointReadOnly]]]]) : DOMQuad + +---- +new DOMQuad([p1 : Object, [p2 : Object, [p3 : Object, [p4 : Object]]]]) : DOMQuad + +---- +instance.p1 : DOMPoint + +ReadOnly: +true + +---- +instance.p2 : DOMPoint + +ReadOnly: +true + +---- +instance.p3 : DOMPoint + +ReadOnly: +true + +---- +instance.p4 : DOMPoint + +ReadOnly: +true + +---- +prototype.getBounds() : DOMRect + +---- +fromRect([rect : DOMRectReadOnly]) : DOMQuad + +---- +fromRect([rect : Object]) : DOMQuad + +---- +fromQuad([quad : DOMQuad]) : DOMQuad + +---- +fromQuad([quad : Object]) : DOMQuad diff --git a/content/DOM/ClientRect.jsdoc b/content/Geometry/DOMRect.jsdoc similarity index 51% rename from content/DOM/ClientRect.jsdoc rename to content/Geometry/DOMRect.jsdoc index 73d5d24..f6a6e6f 100644 --- a/content/DOM/ClientRect.jsdoc +++ b/content/Geometry/DOMRect.jsdoc @@ -1,38 +1,31 @@ -ClientRect : Object +DOMRect : DOMRectReadOnly -**ClientRect** describes a rectangular region an element occupies in the +**DOMRect** describes a rectangular region an element occupies in the viewport. The %%/Element#getBoundingClientRect|**Element.getBoundingClientRect()**%% -method returns a **ClientRect** containing the position of the +method returns a **DOMRect** containing the position of the Element. %%/Element#getClientRects|**Element.getClientRects()**%% returns a -%%/ClientRectList|**ClientRectList**%% containing a list of **ClientRect**s +%%/DOMRectList|**DOMRectList**%% containing a list of **DOMRect**s for each portion of the Element (ie, a text Element may have multiple rects if it was split across 2 lines). Spec: -http://dev.w3.org/csswg/cssom-view/#clientrect +https://drafts.fxtf.org/geometry-1/#domrect ---- -instance.top : Number - -The distance of the element to the top of the viewport. - ----- -instance.right : Number - -The distance of the element to the right of the viewport. +new DOMRect([x = 0 : Number, [y = 0 : Number, [width = 0 : Number, [height = 0 : Number]]]]) : DOMRect ---- -instance.bottom : Number +instance.x : Number -The distance of the element to the bottom of the viewport. +The distance of the element to the left of the viewport. ---- -instance.left : Number +instance.y : Number -The distance of the element to the left of the viewport. +The distance of the element to the top of the viewport. ---- instance.width : Number @@ -44,4 +37,5 @@ instance.height : Number The height of the element. - +---- +fromRect(rect : { x = 0 : Number, y = 0: Number, width = 0 : Number, height = 0 : Number }) : DOMRect diff --git a/content/Geometry/DOMRectList.jsdoc b/content/Geometry/DOMRectList.jsdoc new file mode 100644 index 0000000..84cb1ca --- /dev/null +++ b/content/Geometry/DOMRectList.jsdoc @@ -0,0 +1,29 @@ +DOMRectList : Object + +Spec: +https://drafts.fxtf.org/geometry-1/#DOMRectList + +---- +instance[index : Number] : DOMRect + +Returns the DOMRect at the specified **index**. You can also use the +%%#item|**item()**%% method to retrieve the item. + +ReadOnly: +true + +---- +instance.length : Number + +The number of DOMRects in the list. + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-domrectlist-length + +---- +prototype.item(index : Number) : DOMRect + +Same as %%#indexer_Number|**this[index]**%%. + +Spec: +https://drafts.fxtf.org/geometry-1/#dom-domrectlist-item diff --git a/content/Geometry/DOMRectReadOnly.jsdoc b/content/Geometry/DOMRectReadOnly.jsdoc new file mode 100644 index 0000000..c8df105 --- /dev/null +++ b/content/Geometry/DOMRectReadOnly.jsdoc @@ -0,0 +1,60 @@ +DOMRectReadOnly : Object + +See also %%DOMRect|DOMRect%%. + +Spec: +https://drafts.fxtf.org/geometry-1/#domrectreadonly + +---- +new DOMRectReadOnly([x = 0 : Number, [y = 0 : Number, [width = 0 : Number, [height = 0 : Number]]]]) : DOMRectReadOnly + +---- +instance.x : Number + +ReadOnly: +true + +---- +instance.y : Number + +ReadOnly: +true + +---- +instance.width : Number + +ReadOnly: +true + +---- +instance.height : Number + +ReadOnly: +true + +---- +instance.top : Number + +ReadOnly: +true + +---- +instance.right : Number + +ReadOnly: +true + +---- +instance.bottom : Number + +ReadOnly: +true + +---- +instance.left : Number + +ReadOnly: +true + +---- +fromRect(rect : { x = 0 : Number, y = 0: Number, width = 0 : Number, height = 0 : Number }) : DOMRectReadOnly diff --git a/content/IndexedDB/idbfactory.jsdoc b/content/IndexedDB/idbfactory.jsdoc index 0fa4951..3a7f806 100644 --- a/content/IndexedDB/idbfactory.jsdoc +++ b/content/IndexedDB/idbfactory.jsdoc @@ -1,12 +1,12 @@ IDBFactory : Object +Exposed as %%Window#indexedDB|window.indexedDB%%. Spec: https://www.w3.org/TR/IndexedDB/#idl-def-IDBFactory ---- -prototype.open(name : String, [version : Number]) : IDBOpenDBRequest - +prototype.open(name : String, [version = 1 : Number]) : IDBOpenDBRequest ---- prototype.deleteDatabase(name : String) : IDBOpenDBRequest diff --git a/content/JavaScript/AggregateError.jsdoc b/content/JavaScript/AggregateError.jsdoc new file mode 100644 index 0000000..174de0b --- /dev/null +++ b/content/JavaScript/AggregateError.jsdoc @@ -0,0 +1,16 @@ +AggregateError : Error + +Spec: +https://tc39.es/ecma262/#sec-aggregate-error-objects + +Version: +ECMAScript 2021 + +---- +AggregateError(errors : Iterable, message : String) : AggregateError + +---- +new AggregateError(errors : Iterable, message : String) : AggregateError + +---- +instance.errors : Array diff --git a/content/JavaScript/FinalizationRegistry.jsdoc b/content/JavaScript/FinalizationRegistry.jsdoc new file mode 100644 index 0000000..65a8729 --- /dev/null +++ b/content/JavaScript/FinalizationRegistry.jsdoc @@ -0,0 +1,128 @@ +FinalizationRegistry : Object + +FinalizationRegistry provides a way to be notified when an object is garbage +collected. Note, JavaScript makes no guarantees on if or when an object will +be garbage collected. See also %%/WeakRef|WeakRef%%. + +Spec: +https://tc39.es/ecma262/#sec-finalization-registry-objects + +Version: +ECMAScript 2021 + +---- +new FinalizationRegistry(cleanupCallback(heldValue : Object) : undefined) : FinalizationRegistry + +Returns a new FinalizationRegistry that will call **cleanupCallback** when +objects passed to %%#register|**register()**%% are garbage collected. + + +const sleep = (ms) => new Promise(r => setTimeout(r, ms)); + +let waitingForCleanup = true; +const registry = new FinalizationRegistry((heldValue) => { + console.log(`cleanup: ${heldValue}`); + waitingForCleanup = false; +}); + +let foo = {}; +registry.register(foo, 42); +foo = undefined; // Clear strong reference + +const startTime = Date.now(); +console.log('Allocating a lot of objects to try to force garbage collection'); +while (waitingForCleanup) { + for (let i = 0; i < 100; i++) { + const x = new Array(100); + } + await sleep(10); +} +console.log(`foo was reclaimed after ${((Date.now() - startTime) / 1000).toFixed(1)}s`); + + +Spec: +https://tc39.es/ecma262/#sec-finalization-registry-cleanup-callback + +---- +prototype.register(target : Object, heldValue : Object, [unregisterToken : Object]) : undefined + +

+Registers **target** with **this** so the **cleanupCallback** passed to **this**' +%%#new_FinalizationRegistry_Function|constructor%% will be called when **target** +is garbage collected. +

+

+The value passed to **cleanupCallback** at that time will be +**heldValue**. Note **target** and **heldValue** can not be the same object because +**this** will hold a strong reference to **heldValue**, preventing it from being +garbage collected. +

+

+If **unregisterToken** is specified, you can prevent **cleanupCallback** from being called +by calling %%#unregister|**unregister(unregisterToken)**%%. +

+ +const sleep = (ms) => new Promise(r => setTimeout(r, ms)); + +let waitingForCleanup = true; +const registry = new FinalizationRegistry((heldValue) => { + console.log(`cleanup: ${heldValue}`); + waitingForCleanup = false; +}); + +let foo = {}; +registry.register(foo, 42); +foo = undefined; // Clear strong reference + +const startTime = Date.now(); +console.log('Allocating a lot of objects to try to force garbage collection'); +while (waitingForCleanup) { + for (let i = 0; i < 100; i++) { + const x = new Array(100); + } + await sleep(10); +} +console.log(`foo was reclaimed after ${((Date.now() - startTime) / 1000).toFixed(1)}s`); + + +Spec: +https://tc39.es/ecma262/#sec-finalization-registry.prototype.register + +---- +prototype.unregister(unregisterToken : Object) : undefined + +Prevents **cleanupCallback** from being called for an object +previously registered with the specified **unregisterToken**. + + +const sleep = (ms) => new Promise(r => setTimeout(r, ms)); + +let waitingForCleanup = true; +const registry = new FinalizationRegistry((heldValue) => { + console.log(`cleanup: ${heldValue}`); + waitingForCleanup = false; +}); + +let foo = {}; +const token1 = {}; +const token2 = {}; +registry.register(foo, 'registered with token1', token1); +registry.register(foo, 'registered with token2', token2); +foo = undefined; // Clear strong reference + +registry.unregister(token1); + +const startTime = Date.now(); +console.log('Allocating a lot of objects to try to force garbage collection'); +while (waitingForCleanup) { + for (let i = 0; i < 100; i++) { + const x = new Array(100); + } + await sleep(10); +} +console.log(`foo was reclaimed after ${((Date.now() - startTime) / 1000).toFixed(1)}s`); + + + +Spec: +https://tc39.es/ecma262/#sec-finalization-registry.prototype.unregister diff --git a/content/JavaScript/WeakRef.jsdoc b/content/JavaScript/WeakRef.jsdoc new file mode 100644 index 0000000..83c0d1b --- /dev/null +++ b/content/JavaScript/WeakRef.jsdoc @@ -0,0 +1,50 @@ +WeakRef : Object + +A WeakRef allows holding on to another object, while still allowing that object +to be garbage collected if there are no other strong references to it. Note, +JavaScript makes no guarantees on if or when an object will be garbage collected. +See also %%/FinalizationRegistry|FinalizationRegistry%%. + +Spec: +https://tc39.es/ecma262/#sec-weak-ref-objects + +Version: +ECMAScript 2021 + +---- +new WeakRef(target : Object) : WeakRef + +Creates a new WeakRef that tracks **target**. + +Spec: +https://tc39.es/ecma262/#sec-weak-ref-target + +---- +prototype.deref() : Object + +Returns the target of **this** if it has not been garbage collected yet, otherwise +returns **undefined**. If **deref()** returns a valid object, that object +will not be garbage collected until control returns to the event loop, such as +when returning from a callback or **await**ing a %%/Promise|Promise%%. + + +const sleep = (ms) => new Promise(r => setTimeout(r, ms)); + +let foo = {}; +const weakRef = new WeakRef(foo); +foo = undefined; // Clear strong reference + +const startTime = Date.now(); +console.log('Allocating a lot of objects to force garbage collection'); +while (weakRef.deref()) { + for (let i = 0; i < 100; i++) { + const x = new Array(100); + } + await sleep(10); +} +console.log(`foo was reclaimed after ${((Date.now() - startTime) / 1000).toFixed(1)}s`); + + +Spec: +https://tc39.es/ecma262/#sec-weak-ref.prototype.deref + diff --git a/content/JavaScript/array.jsdoc b/content/JavaScript/array.jsdoc index 06f7756..97f94a1 100644 --- a/content/JavaScript/array.jsdoc +++ b/content/JavaScript/array.jsdoc @@ -107,16 +107,22 @@ console.log(x.length); ---- instance.length : Number -The number of items in **this**. It is 1 greater -than the index of the last item. +The number of items in **this**. It is 1 greater than the index of the last item. +Setting **length** to a smaller number than the current **length** will remove +elements from the end of the list. console.log([].length); console.log(['a', 'b', 'c'].length); console.log(Array(100).length); + var x = []; +// Assigning to an index automatically adjusts length x[50] = 'foo'; console.log(x.length); + +// Set length to 0 to clear the list. +x.length = 0; Spec: @@ -131,13 +137,19 @@ Returns a new Array composed of the items of **this** followed by If any of the parameters are Arrays themselves, the values of that Array will be concatenated into the new Array. +See also %%#push|push%%. + var x = [1, 2, 3]; var concatenated = x.concat(4, 5, [6, 7]); -console.log(concatenated); +console.dir(concatenated); console.log(concatenated.length); -console.log(x); // x is unchanged +console.dir(x); // x is unchanged + +// The spread operator (...) also allows concatenating. +var spread = [...x, 4, 5, ...[6, 7]]; +console.dir(spread); Spec: @@ -186,7 +198,7 @@ http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.copywithin prototype.entries() : Iterator Returns an iterator of the index and items in **this** where the -%%Iterator#next|**values**s%% of the iterator are of the form +%%Iterator#next|**value**s%% of the iterator are of the form **[index : %%/Number|Number%%, item : %%/Object|Object%%]**. See also %%#values|**values()**%% and %%#keys|**keys()**%%. @@ -247,11 +259,33 @@ console.log(numbers.filter(isEven)); Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.20 +---- +prototype.fill(value : Object, [start = 0 : Number, [end : Number]]) : Array + +Fills **this[start]**, **this[start + 1]**, ... **this[end - 1]** with +**value**. +If **end** is not specified, **this.length** is used. +Returns **this**. + + +var x = Array(5); + +console.log(x.fill('a')); +console.log(x.fill('b', 3)); +console.log(x.fill('c', 0, 2)); + + +Version: +ECMAScript 2015 + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.fill + ---- prototype.find(callback(item:Object, index:Number, array:Array):Boolean, [thisArg : Object]) : Object Returns the first item in **this** where **callback** returns -**true**. +**true** for that item. The **Array** passed to **callback** is the **this** of the call to **find**. @@ -272,12 +306,12 @@ Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.find ---- -prototype.findIndex(callback(item:Object, index:Number, array:Array):Boolean, [thisArg : Object]) : Object +prototype.findIndex(callback(item:Object, index:Number, array:Array):Boolean, [thisArg : Object]) : Number Returns the index of the first item in **this** where **callback** returns -**true**. +**true** for that item. -See also %%#find|**find()**%%. +See also %%#find|**find()**%% and %%#indexOf|**indexOf()**%%. var x = ['a', 'b', 'foo', 'd', 'e']; @@ -294,26 +328,48 @@ Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.findIndex ---- -prototype.fill(value : Object, [start = 0 : Number, [end : Number]]) : Array +prototype.flat([depth = 1 : Number]):Array -Fills **this[start]**, **this[start + 1]**, ... **this[end - 1]** with -**value**. -If **end** is not specified, **this.length** is used. -Returns **this**. +Returns a new Array by flattening sub arrays into the array up to the specified +**depth**. -var x = Array(5); +var x = [1, [2, 3], 4, [5, 6, [7, 8], 9]]; +console.dir(x); +console.dir(x.flat()); +console.dir(x.flat(2)); + -console.log(x.fill('a')); -console.log(x.fill('b', 3)); -console.log(x.fill('c', 0, 2)); +Version: +ECMAScript 2019 + +Spec: +https://tc39.es/ecma262/#sec-array.prototype.flat + +---- +prototype.flatMap(callback(item:Object, index:Number, array:Array):Object, [thisArg:Object]):Array + +Returns a new **Array** with where each item is the result of calling +**callback** on each item in **this**. If the return of **callback** is an Array, +that Array will be flattened into the Array returned by **flatMap**. +See also %%#map|**map()**%%. + + +var x = [1, 2, 3]; +var callback = (i, index) => [i, i * index]; +var y = x.flatMap(callback); +console.dir(y); + +// flatMap is essentially equivalent to: +var z = x.map(callback).flat(); +console.dir(z); Version: -ECMAScript 2015 +ECMAScript 2019 Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.fill +https://tc39.es/ecma262/#sec-array.prototype.flatmap ---- prototype.forEach(callback(item:Object, index:Number, array:Array):undefined, [thisArg:Object]):undefined @@ -333,13 +389,14 @@ Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.18 ---- -prototype.indexOf(item:Object, [start = 0 : Number]):Number +prototype.indexOf(item:Object, [startingIndex = 0 : Number]):Number Returns the first location of **item** in **this** starting the search from **start**. -If **start** +If **startingIndex** is negative, **this.length** is added to it before starting the search. Returns **-1** if **item** is not found. +See also %%#findIndex|**findIndex()**%% and %%#lastIndexOf|**lastIndexOf()**%%. var x = ['a', 'b', 'c', 'd', 'b', 'c', 'a']; @@ -371,7 +428,7 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.5 prototype.keys() : Iterator Returns an iterator of the indicies in **this**. -See also %%#entries|**entries()**%% and %%#keys|**keys()**%%. +See also %%#entries|**entries()**%% and %%#values|**values()**%%. var x = ['a', 'b']; @@ -397,15 +454,16 @@ http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.keys ---- -prototype.lastIndexOf(item:Object, [start:Number]):Number +prototype.lastIndexOf(item:Object, [startingIndex:Number]):Number -Returns the location of **item** in **this** starting the search from -**start** by searching backwards through the array. +Returns the location of **item** by searchig backwards through +**this**, starting the search from **startingIndex**. If **startingIndex** is not specified, the search starts from the end of the array. -If **start** -is negative, **this.length** is added to it before starting the search. +If **startingIndex** is negative, **this.length** is added to it +before starting the search. Returns **-1** if **item** is not found. +See also %%#indexOf|**indexOf()**%%. var x = ['a', 'b', 'c', 'd', 'b', 'c', 'a']; @@ -426,11 +484,12 @@ Returns a new **Array** with where each item is the result of calling The **Array** passed to **callback** is the **this** of the call to **map**. +See also %%#flatMap|**flatMap()**%%. + var numbers = [1, 2, 3, 4]; var squares = numbers.map(function(x) { return x * x; }); console.log(squares); -console.log(numbers); Spec: @@ -461,9 +520,14 @@ value of **this.length**. Use with %%#pop|**pop**%% to treat an **Array** as a stack. -var x = ['a', 'b', 'c']; +var x = ['a', 'b', 'c']; console.log(x.push('d', 'e')); console.log(x); + +// Use with the spread operator (...) to push all elements of an array +var y = ['x', 'y', 'z']; +x.push(...y); +console.log(x); Spec: @@ -684,7 +748,28 @@ Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.values ---- -from(arrayLike : Object, [mapFunction(item : Object, index : Number) : Object, [thisArg : Object]]) : Boolean +prototype.includes(item : Object, [startingIndex = 0 : Number]) : Boolean + +Returns **true** if **item** is an element of **this** starting the search from +**startingIndex**. If **startingIndex** is negative, **this.length** is added to it before +starting the search. + + +var x = ['a', 'b', 'c', 'd']; +console.log(x.includes('b')); +console.log(x.includes('b', 2)); +console.log(x.includes('a', -2)); +console.log(x.includes('e')); + + +Version: +ECMAScript 2016 + +Spec: +http://www.ecma-international.org/ecma-262/7.0/#sec-array.prototype.includes + +---- +from(arrayLike : Object, [mapFunction(item : Object, index : Number) : Object, [thisArg : Object]]) : Array Returns a new **Array** with the elements of **arrayLike**. @@ -711,14 +796,14 @@ Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-array.from ---- -from(iterator : Iterator, [mapFunction(item : Object, index : Number) : Object, [thisArg : Object]]) : Boolean +from(iterator : Iterator, [mapFunction(item : Object, index : Number) : Object, [thisArg : Object]]) : Array -Returns a new **Array** with the elements of **iterator** containing the -items returned by the iterator. +Returns a new **Array** containing the items returned by **iterator**. var generator = function*() { - yield* ['a', 'b', 'c']; + yield "foo"; + yield* ["bar", "baz"]; }; console.log(Array.from(generator())); @@ -758,10 +843,11 @@ of(item0 : Object, [item1 : Object, [...]]) : Array Creates an **Array** with the specified parameters as the 0th, 1st, ... items of the **Array**. Can also be constructed as **[item0, item1, ...]**. -Note that **of(x)** will always create an array of length **1** +Note that **Array.of(x)** will always create an array of length **1** containing **x**, -while %%#new_Array_Number|**new Array(x)**%% which will create -an array of length **x** if **x** is an integer. +while %%#new_Array_Number|**new Array(x)**%% will create +an array of length **x** if **x** is an integer (and throw an exception +if **x** is a non-integer %%/Number|Number%%). // The following are equivalent @@ -776,3 +862,4 @@ ECMAScript 2015 Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-array.of + diff --git a/content/JavaScript/asynciterable.jsdoc b/content/JavaScript/asynciterable.jsdoc new file mode 100644 index 0000000..f8ce7ee --- /dev/null +++ b/content/JavaScript/asynciterable.jsdoc @@ -0,0 +1,52 @@ +AsyncIterable : Object + +

+An async iterable object is any object that has a +%%/Symbol#asyncIterator|**Symbol.asyncIterator**%% property whose value is +a function that returns an %%/AsyncIterator|AsyncIterator%%. +

+ +

+You can loop over all values in an async iterable object by using a +**for await (const value of asyncIterable) { }** loop. +

+ +

+You may create your own async iterable object by assigning the +%%/Symbol#asyncIterator|**Symbol.asyncIterator**%% property to an +async generator function (**async function* () {}**) or an object with a +%%/AsyncIterator#next|**next()**%% method. +

+ +

+See %%/AsyncIterator|AsyncIterator%% for more details. +

+ +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-asynciterable-interface + +---- +instance[Symbol.asyncIterator] : Function + +Returns a function that produces an AsyncIterator for this object. + + +class UriFetcher { + constructor(uris) { + this._uris = uris; + } + + async *[Symbol.asyncIterator]() { + for (const uri of this._uris) { + const response = await fetch(uri); + yield await response.text(); + } + } +} + +const fetcher = new UriFetcher(['/', '/Array']); + +for await (const page of fetcher) { + console.log(page.substring(0, 100)); +} + diff --git a/content/JavaScript/asynciterator.jsdoc b/content/JavaScript/asynciterator.jsdoc new file mode 100644 index 0000000..9cf43a8 --- /dev/null +++ b/content/JavaScript/asynciterator.jsdoc @@ -0,0 +1,89 @@ +AsyncIterator : AsyncIterable + +

+An AsyncIterator is an Object that returns a sequence of Promises. +

+ +

+Since AsyncIterators are AsyncIterables, you can use **for await (const value of iterable) {}** +to easily loop over the values in an AsyncIterator. +

+ +

+Calling an async generator function (**async function* () {}**) returns +an AsyncIterator. +

+ +

+See %%/AsyncIterable|AsyncIterable%% for more details. +

+ + +const sleep = t => new Promise(r => setTimeout(r, t)); + +const stream = async function*() { + for (let i = 0; i < 3; i++) { + await sleep(300 * i); + yield i; + } +}; + +const iterator = stream(); +console.dir(await iterator.next()); +console.dir(await iterator.next()); +console.dir(await iterator.next()); +console.dir(await iterator.next()); + +// for-await-of loops make it easy to loop over async iterables +for await (const i of stream()) { + console.log(i); +} + + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-asynciterator-interface + +---- +instance.next([yieldValue : Object]) : Promise + +Promise return type: +{ value : Object, done : Boolean } + +---- +instance.return([yieldValue : Object]) : Promise + +---- +instance.throw([rejectReason : Object]) : Promise + +---- +instance[Symbol.asyncIterator] : Function + +Returns a method that returns **this**. + + +const sleep = t => new Promise(r => setTimeout(r, t)); + +const stream = async function*() { + for (let i = 0; i < 3; i++) { + await sleep(300 * i); + yield i; + } +}; + +const iterator = stream(); + +var iteratorIterator = iterator[Symbol.asyncIterator](); + +console.log(iterator === iteratorIterator); +console.log(); + +for await (const x of stream()) { + console.log(x); +} +console.log(); + +// Since AsyncIterators are also AsyncIterables, you can use for-await-of loops with them. +for await (const x of iterator) { + console.log(x); +} + diff --git a/content/JavaScript/bigint.jsdoc b/content/JavaScript/bigint.jsdoc new file mode 100644 index 0000000..2c9f36b --- /dev/null +++ b/content/JavaScript/bigint.jsdoc @@ -0,0 +1,90 @@ +BigInt : Object + +An arbitrarily large integer value. Allows storing integers larger than what +%%/Number|Number%% allows. Use %%Number#Number_BigInt|Number(bigInt)%% to +convert a BigInt to a Number. + +Primitive: +true + +Spec: +https://tc39.es/ecma262/#sec-bigint-objects + +Version: +ECMAScript 2020 + +---- +BigInt(int : Number) : BigInt + +Creates a BigInt for the specified number. **int** should be between +%%/Number#MIN_SAFE_INTEGER|Number.MIN_SAFE_INTEGER%% and +%%/Number#MIN_SAFE_INTEGER|Number.MAX_SAFE_INTEGER%%. + + +// The following are equivalent +const w = BigInt(15); +const x = 15n; // Decimal +const y = 0xFn; // Hex +const z = 0b1111n; // Binary + +console.log(w + x); + + +Spec: +https://tc39.es/ecma262/#sec-bigint-constructor-number-value + +---- +BigInt(int : String) : BigInt + +Converts the specified string to a BigInt. Allows constructing BigInts +larger than %%/Number|Number%%s. + + +// The following are equivalent +const x = BigInt('15'); +const y = BigInt('0xF'); // Hex +const z = BigInt('0b1111'); // Binary + +// The String constructor allows creating BigInts larger than Number allows +const a = BigInt('9999999999999999'); +const b = BigInt(9999999999999999); // Exceeds Number.MAX_SAFE_INTEGER +const c = 9999999999999999n; +console.log(a); +console.log(b); +console.log(c); + + +Spec: +https://tc39.es/ecma262/#sec-bigint-constructor-number-value + +---- +prototype.asIntN(n : Number, bigInt : BigInt) : BigInt + +Truncates **bigInt** to an **n**-bit signed integer. + + +console.log(BigInt.asIntN(16, 0x0001n)); +console.log(BigInt.asIntN(16, 0x7FFFn)); +console.log(BigInt.asIntN(16, 0x8000n)); +console.log(BigInt.asIntN(16, 0xFFFFn)); +console.log(BigInt.asIntN(16, 0x10000n)); + + +Spec: +https://tc39.es/ecma262/#sec-bigint.asintn + +---- +prototype.asUintN(n : Number, bigInt : BigInt) : BigInt + +Truncates **bigInt** to an **n**-bit unsigned integer. + + +console.log(BigInt.asUintN(16, 0x0001n)); +console.log(BigInt.asUintN(16, 0x7FFFn)); +console.log(BigInt.asUintN(16, 0x8000n)); +console.log(BigInt.asUintN(16, 0xFFFFn)); +console.log(BigInt.asUintN(16, 0x10000n)); + + +Spec: +https://tc39.es/ecma262/#sec-bigint.asuintn diff --git a/content/JavaScript/boolean.jsdoc b/content/JavaScript/boolean.jsdoc index fccde00..c45407e 100644 --- a/content/JavaScript/boolean.jsdoc +++ b/content/JavaScript/boolean.jsdoc @@ -12,7 +12,8 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.6 Boolean(value : Object) : Boolean Coerces **value** into a boolean value. You can also use **!!value** to -do the coercion. +do the coercion. Note **'false'** coerces to **true** since it is a non-empty +string. Use **value === 'true'** to convert a string to a Boolean. console.log(Boolean('')); @@ -22,6 +23,13 @@ console.log(Boolean(1)); console.log(Boolean([])); console.log(Boolean(undefined)); console.log(!!undefined); +console.log(); + +var stringToBoolean = function(value) { + return value === 'true'; +}; +console.log(Boolean('false')); +console.log(stringToBoolean('false')); Spec: diff --git a/content/JavaScript/collator.jsdoc b/content/JavaScript/collator.jsdoc index 8e74af8..0fc284c 100644 --- a/content/JavaScript/collator.jsdoc +++ b/content/JavaScript/collator.jsdoc @@ -2,7 +2,7 @@ Collator : Object Collator provides language aware comparison of %%/String|Strings%% for sorting and searching. -Available through %%/Intl#Collator%%. +Available through %%/Intl#Collator|Intl.Collator%%. Spec: http://www.ecma-international.org/ecma-402/1.0/#sec-10 diff --git a/content/JavaScript/error.jsdoc b/content/JavaScript/error.jsdoc index eebd8d7..b03fc7c 100644 --- a/content/JavaScript/error.jsdoc +++ b/content/JavaScript/error.jsdoc @@ -23,6 +23,14 @@ Same as %%#new_Error_String|**new Error(message)**%%. Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.1.1 +---- +Error(message : String, options : Object) : Error + +Same as %%#new_Error_String_Object|**new Error(message, options)**%%. + +Spec: +https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-error-constructor + ---- new Error(message : String) : Error @@ -37,7 +45,7 @@ var divide = function(x, y) { }; try { - console.log(divide(10, 0)); + console.log(divide(10, 0)); } catch (error) { console.log(error.name); @@ -49,21 +57,42 @@ Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.2.1 ---- -prototype.name : String +new Error(message : String, options : { cause : Error }) : Error -The type of error. +Creates a new **Error** with the specified **message** that describes the error and +original **cause** of the error. +var validateNumber = function(x) { + if (typeof x !== 'number') { + throw Error(x + ' is not a number'); + } + return x; +}; + +var multiply = function(x, y) { + try { + return validateNumber(x) * validateNumber(y); + } + catch(e) { + throw Error('Unable to multiply', { cause: e }); + } +}; + try { - foo; + console.log(multiply(3, 'abc')); } catch (error) { - console.log(error.name); + console.log(error); + console.log('Cause:', error.cause); } Spec: -http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.4.2 +https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-error-constructor + +Version: +ECMAScript 2022 ---- prototype.message : String @@ -72,7 +101,7 @@ A human readable message that describes the error. try { - foo; + foo; } catch (error) { console.log(error.message); @@ -82,3 +111,19 @@ catch (error) { Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.4.3 +---- +prototype.name : String + +The type of error. + + +try { + foo; +} +catch (error) { + console.log(error.name); +} + + +Spec: +http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.4.2 diff --git a/content/JavaScript/function.jsdoc b/content/JavaScript/function.jsdoc index 0942fe9..4caaddd 100644 --- a/content/JavaScript/function.jsdoc +++ b/content/JavaScript/function.jsdoc @@ -17,19 +17,44 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.3.1.1 ---- new Function([param1 : String, [param2 : String, [...]]], body : String) : Function -Creates a new **Function** that has the supplied parameter names and body. +

Creates a new normal **Function** that has the supplied parameter names and body. If any parameter name contains a **','**, it will be split on the **','** and each component will be added as a parameter. Unless the **body** needs to be modified at run time, **Function**s are typically created with the -**function** keyword. +**function** keyword.

+ +

See example below on how to construct generator (**function*()**) and async +functions (**async function()**).

// The following result in equivalent behavior, but the first // should be used unless the body changes at run time. -var x = function(x, y) { return x + y; }; -var y = Function('x', 'y','return x + y;'); -var z = Function('x, y', 'return x + y;'); -var w = new Function('x', 'y', 'return x + y;'); +var f1 = function(x, y) { return x + y; }; +var f2 = Function('x', 'y','return x + y;'); +var f3 = Function('x, y', 'return x + y;'); +var f4 = new Function('x', 'y', 'return x + y;'); + +// The following demonstrate creating generator and async functions +var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor; + +// The following are equivalent: +var g1 = function*(x, y) { yield x; yield y; } +var g2 = GeneratorFunction('x', 'y', 'yield x; yield y;'); +var g3 = new GeneratorFunction('x, y', 'yield x; yield y;'); + +var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor; + +// The following are equivalent: +var a1 = async function(url) { return (await fetch(url)).status; } +var a2 = AsyncFunction('url', 'return (await fetch(url)).status;'); +var a3 = new AsyncFunction('url', 'return (await fetch(url)).status;'); + +var AsyncGeneratorFunction = Object.getPrototypeOf(async function*(){}).constructor; + +// The following are equivalent: +var ag1 = async function*(x, y) { yield await x; yield await y; } +var ag2 = AsyncGeneratorFunction('x', 'y', 'yield await x; yield await y;'); +var ag3 = new AsyncGeneratorFunction('x, y', 'yield await x; yield await y;'); Spec: @@ -40,7 +65,7 @@ prototype.apply([thisArg : Object, [parameters : Array]]) : Object Call **this** with the **this** value inside the function bound to **thisArg** and the parameters to the function from **parameters**. Returns the result -of the function call. +of the function call. See %%/Reflect.apply|Reflect.apply()%%. var whatsThis = function() { console.log(this); } diff --git a/content/JavaScript/global.jsdoc b/content/JavaScript/global.jsdoc index c264f42..9d91ba3 100644 --- a/content/JavaScript/global.jsdoc +++ b/content/JavaScript/global.jsdoc @@ -6,6 +6,19 @@ anywhere without additional qualifiers. Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.1 +---- +globalThis : Window + +The global **this** value. See also %%Window#globalThis|Window.globalThis%% and +%%WorkerGlobalScope#globalThis|WorkerGlobalScope.globalThis%%. + + +console.log(globalThis === this); +console.log(globalThis === globalThis.globalThis); + + +Version: +ECMAScript 2020 ---- NaN : Number @@ -26,7 +39,7 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.1.1 ---- Infinity : Number -Positive infinity. +Positive infinity. See also %%Number#POSITIVE_INFINITY|Number.POSITIVE_INFINITY%%. console.log(Infinity); @@ -68,35 +81,48 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.2.1 ---- parseInt(str : String, [base : Number]) : Number -Converts **str** into an integral number. If **base** is not specified, **parseInt** -will attempt to determine the base to use depending on the input. **parseInt** is -more forgiving than **Number(str)** (or equivalently **+str**) in that it will ignore -extra characters after the numeric portion of the string. If the first character -is not a valid number in the specified **base**, **parseInt** will return %%#NaN|**NaN**%%. +Converts **str** into an integral number. If **base** is not specified, **parseInt** +will attempt to determine the base to use depending on the input (**'0x'** prefix is base 16). +**parseInt** is less scrict than using **Number(str)** (or **+str**) to convert to a Number +because it ignores extra characters after the numeric portion of the string. +If the first character is not a valid number in the specified **base**, **parseInt** will +return %%#NaN|**NaN**%%. +See also %%#parseFloat|parseFloat%% and %%Number#parseInt|Number.parseInt%%. console.log(parseInt('12')); -console.log(parseInt('0x12')); // Detected hex -console.log(parseInt('012')); // Detected octal -console.log(parseInt('012', 10)); // Force decimal +console.log(parseInt('12.34')); // Ignores non digits +console.log(parseInt('0x12')); // Autodetects base 16 +console.log(parseInt('12', 16)); // Force base 16 +console.log(parseInt('12e5')); // Doesn't support scientific notation +console.log(parseInt('Infinity')); // Doesn't support infinity +console.log(parseInt == Number.parseInt); // Also available on the Number object Spec: -http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.2.2 - +https://www.ecma-international.org/ecma-262/#sec-parseint-string-radix ---- parseFloat(str : String) : Number Converts **str** into a floating point number. +**parseFloat** is less scrict than using **Number(str)** (or **+str**) to convert to a Number +because it ignores extra characters after the numeric portion of the string. +If the first character is not a valid number, **parseFloat** will return %%#NaN|**NaN**%%. +See also %%#parseInt|parseInt%% and %%Number#parseFloat|Number.parseFloat%%. -console.log(parseFloat('3.14') * 2); +console.log(parseFloat('12')); +console.log(parseFloat('12.34')); +console.log(parseFloat('0x12')); // Does not detect hex +console.log(parseFloat('12e5')); // Supports scientific notation +console.log(parseFloat('Infinity')); // Supports Infinity +console.log(parseFloat === Number.parseFloat); // Also available on the Number object Spec: -http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.2.3 +https://www.ecma-international.org/ecma-262/#sec-parsefloat-string ---- isNaN(x : Number) : Boolean @@ -109,6 +135,8 @@ If **x** is not a %%/Number|Number%%, it is first converted to a Number before checking if it is NaN. Use %%/Number#isNaN|**Number.isNaN(x)**%% to prevent any conversion from happening. +See also %%/Object#is|Object.is()%%. + var x = 0/0; console.log(x === NaN); @@ -187,7 +215,7 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.3.3 encodeURIComponent(component : String) : String Returns an encoded version of **component** that is suitable as a uri -parameter. +parameter, such as a query string. console.log(encodeURIComponent('http://foo/bar baz')); diff --git a/content/JavaScript/iterable.jsdoc b/content/JavaScript/iterable.jsdoc index de07d02..cfb4743 100644 --- a/content/JavaScript/iterable.jsdoc +++ b/content/JavaScript/iterable.jsdoc @@ -1,34 +1,69 @@ Iterable : Object -An iterable object is any object that returns a function that produces -an %%/Iterator|Iterator%% for its %%/Symbol#iterator|**Symbol.iterator**%% -property. +

+An iterable object is any object that has a +%%/Symbol#iterator|**Symbol.iterator**%% property whose value is a +function that returns an %%/Iterator|**Iterator**%%. +

+

You can loop over all values in an iterable object by using a -**for (var value of iterable) { }** loop. +**for (const value of iterable) { }** loop. +

+

+You may create your own iterable object by assigning the +%%/Symbol#iterator|**Symbol.iterator**%% property to a +generator function (**function* () {}**) or an object with a +%%/Iterator#next|**next()**%% method. +

+ +

See %%/Iterator|Iterator%% for more details. +

+ +Version: +ECMAScript 2015 + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-iterable-interface + +---- +instance[Symbol.iterator] : Function + +Returns a function that produces an Iterator for this object. // Arrays are a built in Iterable object -var arr = ['a', 'b', 'c']; +const arr = ['a', 'b', 'c']; // Use for (... of ...) loop to get the values of an iterable -for (var x of arr) { +for (const x of arr) { console.log(x); } +// Create an iterable class with a generator function +class MyIterable { + constructor(maxValue) { + this._maxValue = maxValue; + } + + *[Symbol.iterator]() { + for (let i = 0; i < this._maxValue; i++) { + yield i; + } + } +} + +for (const x of new MyIterable(3)) { + console.log(x); +} + // Under the covers, for (... of ...) does the following: -var iterator = arr[Symbol.iterator](); -var current = iterator.next(); +const iterator = arr[Symbol.iterator](); +let current = iterator.next(); while (!current.done) { console.log(current.value); current = iterator.next(); } - -Version: -ECMAScript 2015 - -Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-iterable-interface diff --git a/content/JavaScript/iterator.jsdoc b/content/JavaScript/iterator.jsdoc index 4452cbe..41bd475 100644 --- a/content/JavaScript/iterator.jsdoc +++ b/content/JavaScript/iterator.jsdoc @@ -1,16 +1,22 @@ -Iterator : Object +Iterator : Iterable +

An Iterator is an Object that returns a sequence of values. +

-You can use the **for(var value of iterator) {}** to easily loop -over the values in an iterator. +

+Since Iterators are Iterables, you can use **for (var value of iterator) {}** to +easily loop over the values in an iterator. +

-Calling an ECMAScript 2015 generator function (**function*() {}**) return +

+Calling an ECMAScript 2015 generator function (**function*() {}**) returns an Iterator. +

-You may create your own %%/Iterable|Iterable%% object by assigning the -%%/Symbol#iterator|**Symbol.iterator**%% property to an -object with a **next()** method. +

+See %%/Iterable|Iterable%% for more details. +

Version: ECMAScript 2015 @@ -73,3 +79,29 @@ console.dir(iterator.next()); console.dir(iterator.next()); console.dir(iterator.next());
+ +---- +instance[Symbol.iterator] : Function + +Returns a method that returns **this**. + + +// Arrays are a built in Iterable object +var iterable = ['a', 'b', 'c']; + +var iterator = iterable[Symbol.iterator](); +var iteratorIterator = iterator[Symbol.iterator](); + +console.log(iterator === iteratorIterator); +console.log(); + +for (var x of iterable) { + console.log(x); +} +console.log(); + +// Since Iterators are also Iterables, you can use for-of loops with them. +for (var x of iterator) { + console.log(x); +} + diff --git a/content/JavaScript/json.jsdoc b/content/JavaScript/json.jsdoc index a67abc1..016f753 100644 --- a/content/JavaScript/json.jsdoc +++ b/content/JavaScript/json.jsdoc @@ -14,6 +14,15 @@ Parses the specified string of JSON and converts it to an **Object**. var x = JSON.parse('{"foo": 1, "bar": 2}'); console.log(x.foo); console.log(x.bar); +console.log(); + +// Consider using String.raw when embedding JSON directly in +// Javascript to handle escaped characters (such as \n). +var person = JSON.parse(String.raw`{ + "name": "John Doe", + "address": "1234 Maple St\nChicago, IL" +}`); +console.log(person.address);
Spec: @@ -73,11 +82,24 @@ be on a new line with the **indent** string before the key. var x = { foo: 1, bar: 2 }; var replacer = function(key, value) { - console.log('replacer called with key="' + key + '", value=' + value); + console.log('replacer called with key="' + key + '", value=' + value, ', this=' + this); if (key === 'foo') return value * 10; return value; } console.log(JSON.stringify(x, replacer, ' ')); + +// If the object has a toJSON method, that will be called +// before calling the replacer. The original object is +// available as 'this[key]' inside replacer. +// Note, the replacer must be a 'function() {}' instead of +// '=>' function to get the correct 'this'. +x = { foo: 1, bar: 2, toJSON() { return 'my toJSON'; } }; + +replacer = function(key, value) { + console.log('replacer called with key="' + key + '", value=' + value, ', (this[key]===x)=' + (this[key]=== x)); + return value; +} +console.log(JSON.stringify(x, replacer, ' '));
Spec: @@ -93,6 +115,8 @@ be on a new line with the **indent** string before the key. var x = { foo: 1, bar: 2 }; console.log(JSON.stringify(x, ['foo'])); + +console.log(JSON.stringify(x, null, ' ')); Spec: diff --git a/content/JavaScript/math.jsdoc b/content/JavaScript/math.jsdoc index d1fe743..e0d400d 100644 --- a/content/JavaScript/math.jsdoc +++ b/content/JavaScript/math.jsdoc @@ -678,6 +678,7 @@ Returns **x** raised to the **y** power. console.log(Math.pow(2, 3)); +console.log(2 ** 3); // Equivalent to above (ECMAScript 2016) Spec: @@ -688,28 +689,45 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.8.2.13 random() : Number Returns a random number between **0** (inclusive) and **1** (exclusive). +See also %%/Crypto#getRandomValues|crypto.getRandomValues()%%. console.log(Math.random()); console.log(Math.random()); console.log(Math.random()); +console.log(); // Random integer between min (inclusive) and max (exclusive) -var randomInt = function(min, max) { +const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min)) + min; }; console.log(randomInt(0, 100)); console.log(randomInt(0, 100)); console.log(randomInt(0, 100)); +console.log(); + +// Shuffle an array +const shuffle = (array) => { + for (let i = 0; i < array.length; i++) { + const swapIndex = randomInt(i, array.length); + [array[i], array[swapIndex]] = [array[swapIndex], array[i]]; + } + return array; +}; +console.dir(shuffle(['a', 'b', 'c', 'd', 'e'])); +console.dir(shuffle(['a', 'b', 'c', 'd', 'e'])); +console.dir(shuffle(['a', 'b', 'c', 'd', 'e'])); +console.log(); + // Produce a normally distributed random number using the Box-Muller transform -var randn = function() { +const randn = () => { if (randn.hasValues) { randn.hasValues = false; return randn.distance * Math.sin(randn.angle); } - var random = Math.max(Math.random(), 1e-100); + const random = Math.max(Math.random(), 1e-100); randn.distance = Math.sqrt(-2 * Math.log(random)); randn.angle = Math.random() * Math.PI * 2; randn.hasValues = true; @@ -717,9 +735,18 @@ var randn = function() { return randn.distance * Math.cos(randn.angle); } -console.log(randn()); -console.log(randn()); -console.log(randn()); +var minIndex = -4, maxIndex = 5; +var buckets = []; +for (let i = 0; i < 100; i++) { + var index = Math.round(2 * randn()); + minIndex = Math.min(minIndex, index); + maxIndex = Math.max(maxIndex, index); + buckets[index] = (buckets[index] ?? 0) + 1; +} + +for (let i = minIndex; i <= maxIndex; i++) { + console.log(`${i / 2}`.padStart(4), ''.padStart(buckets[i], '*')); +} Spec: diff --git a/content/JavaScript/number.jsdoc b/content/JavaScript/number.jsdoc index 5b7ad28..bb44083 100644 --- a/content/JavaScript/number.jsdoc +++ b/content/JavaScript/number.jsdoc @@ -1,7 +1,8 @@ Number : Object A numerical value. JavaScript stores numbers as 64 bit (8 byte) double -precision floats. See %%/Math|Math%% for helpful math related functions. +precision floats. See %%/Math|Math%% for helpful math related functions. +See also %%/BigInt|BigInt%%. Primitive: true @@ -9,10 +10,29 @@ true Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.7 +---- +Number(value : BigInt) : Number + +Converts the specified BigInt to a Number. For **value**s outside the range +%%#MIN_SAFE_INTEGER|MIN_SAFE_INTEGER%% to +%%#MAX_SAFE_INTEGER|MAX_SAFE_INTEGER%%, the returned Number may be an +approximation of **value**. + + +var x = Number(100n); +console.log(x); + + +Spec: +https://tc39.es/ecma262/#sec-bigint.asintn + +Version: +ECMAScript 2020 + ---- Number(value : Object) : Number -Coerces **value** to a number. Usually this method is not necessary since +Coerces **value** to a number. Usually this method is not necessary since JavaScript will automatically coerce a value to a number when it is used in a number context. **+value** is another way to coerce a value to a number. This coercion is very strict and will return %%#NaN|**NaN**%% @@ -259,6 +279,7 @@ Floating point Not a Number. Signifies an error in a calculation. To check if something is **NaN**, use %%Global#isNaN|isNan()%% or %%#isNaN|Number.isNan()%%. + Also exists as %%Global#NaN|**NaN**%% in the global namespace. @@ -380,7 +401,8 @@ Returns **true** if **x** is %%/Number#NaN|**NaN**%%. **NaN** is never equal to another **Number**, even if it is **NaN**, so you must use **isNaN** to check for **NaN**. -See also the global %%/Global#isNaN|**isNaN(x)**%% method. +See also the global %%/Global#isNaN|**isNaN(x)**%% method and +%%/Object#is|Object.is()%%. var x = 0/0; @@ -395,3 +417,53 @@ ECMAScript 2015 Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-number.isNaN +---- +parseInt(str : String, [base : Number]) : Number + +Converts **str** into an integral number. If **base** is not specified, **parseInt** +will attempt to determine the base to use depending on the input (**'0x'** prefix is base 16). +**parseInt** is less scrict than using **Number(str)** (or **+str**) to convert to a Number +because it ignores extra characters after the numeric portion of the string. +If the first character is not a valid number in the specified **base**, **parseInt** will +return %%#NaN|**NaN**%%. +Also exists as %%Global#parseInt|**parseInt**%% in the global namespace. + + +console.log(Number.parseInt('12')); +console.log(Number.parseInt('12.34')); // Ignores non digits +console.log(Number.parseInt('0x12')); // Autodetects base 16 +console.log(Number.parseInt('12', 16)); // Force base 16 +console.log(Number.parseInt('12e5')); // Doesn't support scientific notation +console.log(Number.parseInt('Infinity')); // Doesn't support infinity +console.log(Number.parseInt == parseInt); // Also available in the global namespace + + +Version: +ECMAScript 2015 + +Spec: +https://www.ecma-international.org/ecma-262/#sec-number-parsefloat-string + +---- +parseFloat(str : String) : Number + +Converts **str** into a floating point number. +**parseFloat** is less scrict than using **Number(str)** (or **+str**) to convert to a Number +because it ignores extra characters after the numeric portion of the string. +If the first character is not a valid number, **parseFloat** will return %%#NaN|**NaN**%%. +Also exists as %%Global#parseFloat|**parseFloat**%% in the global namespace. + + +console.log(Number.parseFloat('12')); +console.log(Number.parseFloat('12.34')); +console.log(Number.parseFloat('0x12')); // Does not detect hex +console.log(Number.parseFloat('12e5')); // Supports scientific notation +console.log(Number.parseFloat('Infinity')); // Supports Infinity +console.log(Number.parseFloat === parseFloat); // Also available in the global namespace + + +Version: +ECMAScript 2015 + +Spec: +https://www.ecma-international.org/ecma-262/#sec-number-parsefloat-string diff --git a/content/JavaScript/object.jsdoc b/content/JavaScript/object.jsdoc index 3dabb02..42b9700 100644 --- a/content/JavaScript/object.jsdoc +++ b/content/JavaScript/object.jsdoc @@ -86,14 +86,44 @@ instance[symbol : Symbol] : Object Returns the value stored in this at the specified **symbol**. -var x = { foo: 'bar'}; +var myObject = { foo: 'bar' }; +var mySymbol = Symbol('MySymbol'); +myObject[mySymbol] = 'baz'; + +console.log(myObject[mySymbol]); + +// The property cannot be accessed using a string +console.log(myObject['MySymbol']); Version: ECMAScript 2015 +---- +assign(target : Object, source1 : Object, [source2 : Object, [...]]) : Object + +Copies properties from each **source** to **target**. Any properties already +set on **target** are overwritten. Returns **target**. + + + +const source1 = { a: 1, b: 2, c: 3 }; +const source2 = { b: 'foo', d: 4 }; + +// Often target is a new object to combine sources without modifying either source +const combined = Object.assign({}, source1, source2); +console.dir(combined); + +// The new spread operator can achieve the same result: +const spreadCombined = { ...source1, ...source2 }; +console.dir(spreadCombined); + + +Spec: +https://262.ecma-international.org/12.0/#sec-object.assign + ---- getPrototypeOf(obj : Object) : Object @@ -116,7 +146,7 @@ var x = { foo: 1, get bar() { return 'a'; } }; -Object.defineProperty(x, 'baz', { value: 2, +Object.defineProperty(x, 'baz', { value: 2, writable: true, enumerable: false, configurable: true } ); @@ -128,6 +158,35 @@ console.dir(Object.getOwnPropertyDescriptor(x, 'baz')); Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.3 +---- +getOwnPropertyDescriptors(obj : Object) : PropertyDescriptor + +Returns an object key-value pairs of the property name and **PropertyDescriptor**s +that describes **obj**. + +See also %%#getOwnPropertyDescriptor|**getOwnPropertyDescriptor**%% and +%%#create|**create()**%% and %%#defineProperties|**defineProperties()**%%. + + +var x = { foo: 1, + get bar() { + return 'a'; + } }; +Object.defineProperty(x, 'baz', { value: 2, + writable: true, + enumerable: false, + configurable: true } ); +var descriptors = Object.getOwnPropertyDescriptors(x); +for (var p in descriptors) { + console.log(p + ':'); + console.dir(descriptors[p]); + console.log(); +} + + +Spec: +https://tc39.es/ecma262/#sec-object.getownpropertydescriptors + ---- getOwnPropertyNames(obj : Object) : Array @@ -205,7 +264,7 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.5 defineProperty(obj : Object, propertyName : String, propertyDescriptor : PropertyDescriptor) : Object Defines a new property with name equal to **propertyName** on **obj** with the -supplied descriptor. Returns **obj**. +supplied descriptor. Returns **obj**. See %%/Reflect#defineProperty|Reflect.defineProperty()%%. var x = { foo: 1 }; @@ -227,7 +286,7 @@ defineProperties(obj : Object, propertyDescriptors : Object) : Object For each property on **propertyDescriptors**, defines a new property on **obj** with the same name and supplied %%/PropertyDescriptor|**PropertyDescriptor**%%. -Returns **obj**. +Returns **obj**. See also %%#getOwnPropertyDescriptors|**getOwnPropertyDescriptors()**%%. var x = {}; @@ -249,23 +308,21 @@ Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.7 ---- -seal(obj : Object) : Object +entries(obj : Object) : Array -Same as %%#preventExtensions|**preventExtensions**%% except it also -sets each property as not -%%/PropertyDescriptor#configurable|**configurable**%%. Returns **obj**. +Returns an Array of key/value pairs for the properies of **obj**. See also +%%#fromEntries|fromEntries()%%, %%#keys|keys()%%, and %%#values|values()%%. -var x = { foo: 1 }; -Object.seal(x); -x.foo = 3; -console.log(x.foo); -x.bar = 1; -console.log(x.bar); +var x = { foo: 1, bar: 2 }; +console.dir(Object.entries(x)); +Version: +ECMAScript 2017 + Spec: -http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.8 +https://tc39.es/ecma262/#sec-object.entries ---- freeze(obj : Object) : Object @@ -290,11 +347,28 @@ console.log(x.bar); Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.9 +---- +fromEntries(keyValuePairs : Iterator) : Object + +Constructs a new Object from the specified key-value pairs. See also +%%#entries|entries()%%. + + +var x = [['foo', 1], ['bar', 2]]; +console.dir(Object.fromEntries(x)); + + +Version: +ECMAScript 2019 + +Spec: +https://tc39.es/ecma262/#sec-object.fromentries + ---- preventExtensions(obj : Object) : Object -Prevents new properties from being added to **obj**. Unlike %%#freeze|**freeze**%%, existing -properties can be modified. Returns **obj**. +Prevents new properties from being added to **obj**. Unlike %%#freeze|**freeze**%%, +existing properties can be modified. Returns **obj**. var x = { foo: 1 }; @@ -308,6 +382,24 @@ console.log(x.bar); Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.10 +---- +is(obj1 : Object, obj2 : Object) : Boolean + +Returns **true** if **obj1** is identical to **obj2**. This is mostly the same as +**obj1 === obj2** except for some %%/Number|Number%% comparisons involving +%%/Global#NaN|NaN%%, **0**, and **-0**. + + +console.log(0 === -0); +console.log(Object.is(0, -0)); +console.log(); + +console.log(NaN === NaN); +console.log(Object.is(NaN, NaN)); + + +Spec: +https://www.ecma-international.org/ecma-262/#sec-object.is ---- isSealed(obj : Object) : Boolean @@ -326,7 +418,6 @@ console.log(Object.isFrozen(x)); Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.11 - ---- isFrozen(obj : Object) : Boolean @@ -366,7 +457,8 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.13 keys(obj : Object) : Array Returns an **Array** containing the enumerable properties on **obj**. -See also %%#getOwnPropertyNames|**getOwnPropertyNames()**%%. +See also %%#getOwnPropertyNames|**getOwnPropertyNames()**%%, +%%#entries|**entries()**%% and %%#values|**values()**%%. var x = { foo: 1, bar: 2 }; @@ -494,3 +586,59 @@ for (var propertyName in x) { Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.4.7 +---- +seal(obj : Object) : Object + +Same as %%#preventExtensions|**preventExtensions**%% except it also +sets each property as not +%%/PropertyDescriptor#configurable|**configurable**%%. Returns **obj**. + + +var x = { foo: 1 }; +Object.seal(x); +x.foo = 3; +console.log(x.foo); +x.bar = 1; +console.log(x.bar); + + +Spec: +http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.8 + +---- +setPrototypeOf(obj : Object, prototype : Object) : Object + +Changes the prototype of **obj** to **prototype**. Returns **obj**. + + +const base = { a: 1, b: 2 }; +const obj = { c: 3 }; + +console.dir(obj); +console.log(Object.getPrototypeOf(obj) === Object.prototype); + +Object.setPrototypeOf(obj, base); + +console.dir(obj); +console.log(Object.getPrototypeOf(obj) === base); + + +Spec: +https://262.ecma-international.org/12.0/#sec-object.setprototypeof + +---- +values(obj : Object) : Array + +Returns an **Array** containing the enumerable property values on **obj**. +See also %%#entries|**entries()**%% and %%#keys|**keys()**%%. + + +var x = { foo: 1, bar: 2 }; +console.log(Object.values(x)); + + +Version: +ECMAScript 2017 + +Spec: +http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.14 diff --git a/content/JavaScript/promise.jsdoc b/content/JavaScript/promise.jsdoc index a307fcb..0ca5ed9 100644 --- a/content/JavaScript/promise.jsdoc +++ b/content/JavaScript/promise.jsdoc @@ -4,6 +4,9 @@ A Promise is an object that represents an asynchronous operation that will eventually produce a value. Use the %%#then|**then()**%% method to hook up a callback that will be called when the result of the asynchronous operation is ready. +ECMAScript 2017 introduced **async function()**s which +return Promises and the **await** keyword which can simplify +Promise based code. Version: ECMAScript 2015 @@ -44,10 +47,11 @@ http://www.ecma-international.org/ecma-262/6.0/#sec-promise-executor prototype.catch(onReject(error : Error) : undefined) : Promise Schedules **onReject** to be called if the promise had an error (ie, -the %%/#new_Promise|**executer function**%% called **reject()** +the %%#new_Promise_Function|**executer function**%% called **reject()** or a method in the promise chain threw an error). **error** is the value passed to **reject**. This is a shorthand -for calling %%#then|**then(undefined, onReject)**%%. +for calling %%#then|**then(undefined, onReject)**%%. See also the +%%/Window#unhandledrejection|window unhandledrejecton event%%. var throwPromise = new Promise(function(resolve, reject) { @@ -72,6 +76,36 @@ rejectPromise.catch(function(result) { Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-promise.prototype.catch +---- +prototype.finally(onFinally() : undefined) : Promise + +Also schedules **onFinally** to be called when the promise has been either resolved +or rejected. + + +var promise = new Promise((resolve, reject) => { + let x = Math.random(); + if (x < 0.5) { + resolve(x); + } + else { + reject(x); + } +}).then(x => { + console.log('resolved:', x); +}).catch(e => { + console.log('rejected:', e); +}).finally(() => { + console.log('in finally'); +}); + + +Version: +ECMAScript 2018 + +Spec: +https://tc39.es/ecma262/#sec-promise.prototype.finally + ---- prototype.then(onResolve(value : Object) : Object, [onReject(error : Error) : Object]) : Promise @@ -158,12 +192,12 @@ Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-promise.prototype.then ---- -all(promises : Iterable) : Promise +all(promises : Iterable) : Promise Creates a new Promise that will be resolved when all of **promises** are resolved. If any of the promises are rejected, the returned Promise -will be rejected immediately and will provide the value of the -Promise that was rejected. +will be rejected immediately and will provide the value of the +Promise that was rejected. See also %%#allSettled|allSettled()%%. var promises = []; @@ -178,7 +212,7 @@ for (var i = 0; i < 10; i++) { } Promise.all(promises).then(function(results) { - console.log('all results:') + console.log('all results:'); for (var result of results) { console.log(' ' + result); } @@ -188,13 +222,97 @@ Promise.all(promises).then(function(results) { Spec: http://www.ecma-international.org/ecma-262/6.0/#sec-promise.all +---- +allSettled(promises : Iterable) : Promise + +Creates a new Promise that will be resolved when all of **promises** +are resolved or rejected. The result of the promise is an Array +containing objects with a **status** property (containing either **'fulfilled'** +or **'rejected'**) and either a **value** property (for fulfilled promises) or +**reason** property (for rejected promises). See also %%#all|all()%%. + + +var promises = []; + +for (let i = 0; i < 10; i++) { + promises.push(new Promise(function(resolve, reject) { + var timeout = i * 10; + setTimeout(function() { + if (i % 3 === 0) { + reject('rejecting after ' + timeout + ' milliseconds'); + } + else { + resolve('resolving after ' + timeout + ' milliseconds'); + } + }, timeout); + })); +} + +Promise.allSettled(promises).then(function(results) { + console.log('all results:'); + for (var result of results) { + console.dir(result); + } +}); + + +Spec: +https://tc39.es/ecma262/#sec-promise.allsettled + +Version: +ECMAScript 2020 + +---- +any(promises : Iterable) : Promise + +Creates a new Promise that will be resolved when the first Promise it **promises** +resolves. If all of **promises** are rejected, the returned promise will +be rejected with an %%/AggregateError|AggregateError%% containing all the +rejected values. See also %%#race|**race()**%%. + + +const promises = []; + +// Queue several promises that randomly resolve/reject +for (let i = 0; i < 3; i++) { + promises.push(new Promise((resolve, reject) => { + const random = Math.random() * 200; + setTimeout(function() { + if (Math.random() < 0.2) { + resolve('resolving after ' + random + ' milliseconds'); + } + else { + reject('rejecting after ' + random + ' milliseconds'); + } + }, random); + })); +} + +try { + const firstResult = await Promise.any(promises); + console.log('first result: ' + firstResult); +} +catch (e) { + console.log('all rejected:'); + for (const error of e.errors) { + console.log(` ${error}`); + } +} + + +Spec: +https://tc39.es/ecma262/#sec-promise.any + +Version: +ECMAScript 2021 + ---- race(promises : Iterable) : Promise Creates a new Promise that will be resolved when the first of **promises** -is resolved. If a promises is rejected before any resolve, the returned +is resolved. If a promise is rejected before any resolve, the returned Promise will be rejected immediately and will provide the value of the -Promise that was rejected. +Promise that was rejected. See also %%#any|**any()**%%. var promises = []; @@ -209,7 +327,7 @@ for (var i = 0; i < 10; i++) { } Promise.race(promises).then(function(result) { - console.log('first result: ' + result) + console.log('first result: ' + result); }); @@ -224,10 +342,12 @@ the rejected error. Useful for passing values to APIs that expect promises. // The following are equivalent -var x = Promise.reject('foo'); -var y = new Promise(function(resolve, reject) { +var w = Promise.reject('foo'); +var x = new Promise(function(resolve, reject) { reject('foo'); }); +var y = (async function() { throw 'foo' })(); +var z = (async () => { throw 'foo' })(); Spec: @@ -241,10 +361,12 @@ the resolved value. Useful for passing values to APIs that expect promises. // The following are equivalent -var x = Promise.resolve('foo'); -var y = new Promise(function(resolve) { +var w = Promise.resolve('foo'); +var x = new Promise(function(resolve) { resolve('foo'); }); +var y = (async function() { return 'foo' })(); +var z = (async () => 'foo')(); Spec: diff --git a/content/JavaScript/proxy.jsdoc b/content/JavaScript/proxy.jsdoc index 8486d71..69a367d 100644 --- a/content/JavaScript/proxy.jsdoc +++ b/content/JavaScript/proxy.jsdoc @@ -34,8 +34,18 @@ var evenMap = new Proxy(new Map(), { }; } else { + var value = target[name]; + + // If the value is a function, return a function that + // is bound to the original target. Otherwise the function + // would be called with the Proxy as 'this' and Map + // functions do not work unless the 'this' is the Map. + if (value instanceof Function) { + return value.bind(target); + } + // Return the normal property value for everything else - return target[name]; + return value; } } }); diff --git a/content/JavaScript/reflect.jsdoc b/content/JavaScript/reflect.jsdoc new file mode 100644 index 0000000..39050b0 --- /dev/null +++ b/content/JavaScript/reflect.jsdoc @@ -0,0 +1,363 @@ +Reflect : Object + +Provides methods to inspect and interact with objects programmatically. Similar +to pre-ECMAScript 2015 methods on %%/Object|Object%% and %%/Function|Function%%. + +Version: +ECMAScript 2015 + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect-object + +---- +apply(target : Object, thisArg : Object, parameters : Array) : Object + +See %%/Function#apply|Function.apply()%%. + + +var whatsThis = function() { console.log(this); } +Reflect.apply(whatsThis, 'hello', []); + +// Call a function that takes a variable number of args +var numbers = [3, 20, 1, 45]; +console.log(Reflect.apply(Math.max, undefined, numbers)); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.apply + +---- +construct(constructor : Function, parameters : Array, [newTarget : Function]) : Object + +Essentially the same as **new constructor(...parameters)**. **newTarget** allows +you to change what the **new.target** value is inside the constructor. + + +class MyClass { + constructor(...args) { + console.log('constructing MyClass', ...args); + } +} + +// The following are equivalent: +var a = new MyClass(1, 2, 3); +var b = Reflect.construct(MyClass, [1, 2, 3]); +console.log(); + +class WithTarget { + constructor() { + console.log('constructing WithTarget. new.target=' + new.target.name); + } +} + +var c = new WithTarget(); +var d = Reflect.construct(WithTarget, []); +var e = Reflect.construct(WithTarget, [], MyClass); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.construct + +---- +defineProperty(obj : Object, propertyName : String, propertyDescriptor : PropertyDescriptor) : Boolean + +The same as %%/Object#defineProperty|Object.defineProperty()%% except returns +**false** on failure instead of throwing an exception. + + +var x = { }; + +var fooDescriptor = { value: 1, + writable: true, + enumerable: false, + configurable: true } ; + +var barDescriptor = { value: 2, + writable: true, + enumerable: false, + configurable: true } ; + +console.log(Reflect.defineProperty(x, 'foo', fooDescriptor)); +Object.defineProperty(x, 'bar', barDescriptor); + +console.log(x.foo); +console.log(x.bar); +console.log(); + +var y = { foo: 1 }; +Object.seal(y); + +console.log(Reflect.defineProperty(y, 'foo', fooDescriptor)); + +try { + Object.defineProperty(y, 'bar', barDescriptor); +} +catch(e) { + console.log(e); +} + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.defineProperty + +---- +deleteProperty(obj : Object, propertyName : String) : Boolean + +The same as **delete object[propertyName]**. Returns **true** if the value +was deleted (ie, the property was configurable). + + +var x = { foo: 1, bar: 2 }; + +// The following are equivalent: +console.log(delete x.foo); +console.log(delete x['foo']); +console.log(Reflect.deleteProperty(x, 'foo')); +console.log('x.foo=' + x.foo); +console.log(); + +Object.seal(x); +console.log(delete x.bar); +console.log(delete x['bar']); +console.log(Reflect.deleteProperty(x, 'bar')); +console.log('x.bar=' + x.bar); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.defineProperty + +---- +get(target : Object, propertyName : String, [getterThis : Object]) : Object + +The same as **target[propertyName]**. If **propertyName** is a get function, +**target** is used as its **this** if **getterThis** is not specified. + + +var x = { foo: 1 }; + +// The following are equivalent: +console.log(x.foo); +console.log(x['foo']); +console.log(Reflect.get(x, 'foo')); +console.log(); + +// Example of getter functions: +x = { bar: 2, get baz() { return this.bar; } }; +console.log(x.baz); +console.log(x['baz']); +console.log(Reflect.get(x, 'baz')); +console.log(Reflect.get(x, 'baz', { bar: 3 })); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.get + +---- +getOwnPropertyDescriptor(obj : Object, propertyName : String) : PropertyDescriptor + +The same as %%/Object#getOwnPropertyDescriptor|Object.getOwnPropertyDescriptor()%% +except throws an exception if **obj** is not an Object. + + +var x = { foo: 1 }; + +// The following are equivalent: +console.dir(Reflect.getOwnPropertyDescriptor(x, 'foo')); +console.dir(Object.getOwnPropertyDescriptor(x, 'foo')); + +// Reflect throws an exception if the parameter is not an Object +try { + console.log(Reflect.getPrototypeOf(1, 'foo')); +} +catch(e) { + console.log(e); +} +console.log(Object.getOwnPropertyDescriptor(1, 'foo')); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.getownpropertydescriptor + +---- +getPrototypeOf(obj : Object) : Object + +The same as %%/Object#getPrototypeOf|Object.getPrototypeOf()%% except throws +an exception if **obj** is not an Object. + + +console.log(Reflect.getPrototypeOf([]) === Array.prototype); +console.log(Object.getPrototypeOf([]) === Array.prototype); + +// Reflect throws an exception if the parameter is not an Object +try { + console.log(Reflect.getPrototypeOf(1)); +} +catch(e) { + console.log(e); +} +console.log(Object.getPrototypeOf(1)); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.getprototypeof + +---- +has(obj : Object, propertyName : String) : Boolean + +Returns **true** if **obj** has a property named **propertyName**. The **in** +operator provides the same result. + + +var x = { foo: 1 }; + +console.log(Reflect.has(x, 'foo')); +console.log('foo' in x); +console.log(Reflect.has(x, 'bar')); +console.log('bar' in x); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.has + +---- +isExtensible(obj : Object) : Boolean + +The same as %%/Object#isExtensible|Object.isExtensible()%% except throws +an exception if **obj** is not an Object. + + +var x = { foo: 1 }; +console.log(Reflect.isExtensible(x)); +Reflect.preventExtensions(x); +console.log(Reflect.isExtensible(x)); + +// Reflect throws an exception if the parameter is not an Object +try { + console.log(Reflect.isExtensible(1)); +} +catch (e) { + console.log(e); +} +console.log(Object.isExtensible(1)); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.isextensible + +---- +ownKeys(obj : Object) : Array + +The same as %%/Object#getOwnPropertyNames|Object.getOwnPropertyNames()%% except +throws an exception if **obj** is not an Object. + + +var x = { foo: 1, bar: 2 }; +console.log(Reflect.ownKeys(x)); +console.log(Object.getOwnPropertyNames(x)); + +// Reflect throws an exception if the parameter is not an Object +try { + console.log(Reflect.ownKeys(1)); +} +catch (e) { + console.log(e); +} +console.log(Object.getOwnPropertyNames(1)); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.ownkeys + +---- +preventExtensions(obj : Object) : Boolean + +The same as %%/Object#preventExtensions|Object.preventExtensions()%% except +returns **false** on failure and throws an exception if **obj** is not an Object. + + +var x = { foo: 1 }; + +// The following are equivalent +console.log(Reflect.preventExtensions(x)); +console.log(Object.preventExtensions(x)); + +x.bar = 2; + +console.log(x); + +// Reflect throws an exception if the parameter is not an Object +try { + console.log(Reflect.preventExtensions(1)); +} +catch (e) { + console.log(e); +} +console.log(Object.preventExtensions(1)); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.preventextensions + +---- +set(target : Object, propertyName : String, value : Object, [setterThis : Object]) : Boolean + +The same as **target[propertyName] = value**. Returns **true** if the set was +successful and **false** otherwise (if the object was %%Object#freeze|frozen%% for +example). If **propertyName** is a set +function, **target** is used as its **this** if **setterThis** is not specified. + + +var x = { foo: 1 }; + +// The following are equivalent: +x.bar = 2; +x['bar'] = 2; +console.log(Reflect.set(x, 'bar', 2)); + +// set returns false if the object is frozen +Object.freeze(x); +console.log(Reflect.set(x, 'bar', 2)); + +// Example of setter functions and setterThis arg: +x = { bar: 2, + set baz(value) { + console.log(`baz=${value} where this.bar = ${this.bar}; `); + } + }; +x.baz = 42; +x['baz'] = 42; +Reflect.set(x, 'baz', 42); +Reflect.set(x, 'baz', 42, { bar: 3 }); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.set + +---- +setPrototypeOf(obj : Object, proto : Object) : Boolean + +Changes the %%/Function#prototype|prototype%% of **obj** to **proto**. + + +var Button = function(content) { + this.content = content; +}; +Button.prototype.click = function() { + console.log(this.content + ' clicked'); +} + +// Instead of 'new Button()', the following changes +// the prototype of a regular object to be Button's +// prototype after the object has been created. + +var myButton = { content: 'promoted' }; +console.log(Reflect.getPrototypeOf(myButton) === Object.prototype); + +Reflect.setPrototypeOf(myButton, Button.prototype); +console.log(Reflect.getPrototypeOf(myButton) === Button.prototype); + +myButton.click(); + + +Spec: +http://www.ecma-international.org/ecma-262/6.0/#sec-reflect.setprototypeof diff --git a/content/JavaScript/regexp.jsdoc b/content/JavaScript/regexp.jsdoc index 59912ad..ebc91ad 100644 --- a/content/JavaScript/regexp.jsdoc +++ b/content/JavaScript/regexp.jsdoc @@ -19,9 +19,7 @@ new RegExp(pattern : String, [flags : String]) : RegExp Constructs a new **RegExp** for the specified **pattern**. -If **flags** contains **'g'**, %%#global|**this.global**%% will be set to **true**. -If **flags** contains **'i'**, %%#ignoreCase|**this.ignoreCase**%% will be set to **true**. -If **flags** contains **'m'**, %%#multiline|**this.multiline**%% will be set to **true**. +See %%#flags|**flags**%% for acceptable flag values. **RegExp**s can also be constructed using **/pattern/flags** syntax. @@ -39,9 +37,10 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.4.1 prototype.exec(str : String) : Array If **this** matches **str**, returns a new **Array** with item **0** equal to the -portion of **str** that matched the regular expression, item **1** equal to the first -capturing group in **this**, item **2** equal to the second capturing group in **this**, -and so on. If **this** doesn't match **str**, returns **null**. +portion of **str** that matched the regular expression, item **1** equal to the +first capturing group in **this**, item **2** equal to the second capturing group in +**this**, and so on. If **this** doesn't match **str**, returns **null**. See also +%%/String#match|String.match()%%. var regexp = /(\d\d\d)-(\d\d\d\d)/; @@ -52,11 +51,38 @@ if (result) { console.log(result[2]); } +

+You can name capture groups by placing **?<name>** at the start of the group. +The captured values are available on a **groups** property on the returned array. Note, +this is new with ECMAScript 2018. +

+ +var regexp = /(?\d\d\d)-(?\d\d\d-\d\d\d\d)/; +var result = regexp.exec('call me: 333-555-4385'); +if (result) { + console.dir(result.groups.areacode); + console.dir(result[1]); + console.dir(result.groups.number); + console.dir(result[2]); +} + +

+If **this** is a %%#global|**global**%% RegExp, **exec** can be called repeatedly +to get all matches. Each time it is called, it updates +%%#lastIndex|**this.lastIndex**%% and begins the search from there. When there are +no more matches, returns **null**. See also %%/String#matchAll|String.matchAll()%%. +

+ +var regexp = /(\w+): (\d+)/g; +var res; +while (res = regexp.exec('a: 12, b: 5, d: 6')) { + console.log(res[1], res[2]); +} + Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.6.2 - ---- prototype.test(str : String) : Boolean @@ -88,13 +114,68 @@ true Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.7.1 +---- +instance.dotAll : Boolean + +**true** if the **RegExp** was created with the **'s'** flag. + +DotAll **RegExp**s will match any character for **'.'** including new lines (**'\r'** or **'\n'**) +which do not match **'.'** by default. + +Another option is to replace **'.'** with an empty inverted character class +match **'[^]'** for systems that do not support ECMAScript 2018. + +See also %%#multiline|**multiline**%%. + + +var str = '"a quote\nover multiple lines"'; + +// The following fails because . does not match \n without the s suffix +console.log(/".*"/.test(str)); + +// The s suffix allows . to match \n +console.log(/".*"/s.test(str)); + +// Alternatively, use the empty inverted character class +console.log(/"[^]*"/.test(str)); + + +ReadOnly: +true + +Version: +ECMAScript 2018 + +Spec: +http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.7.2 + +---- +instance.flags : String + +Returns the flags specified when constructing **this**. +Each character in **flags** represents a different option of the RegExp. +**'g'** is for %%#global|**global**%%. +**'i'** is for %%#ignoreCase|**ignoreCase**%%. +**'m'** is for %%#multiline|**multiline**%%. +**'s'** is for %%#dotAll|**dotAll**%%. +**'y'** is for %%#sticky|**sticky**%%. + + +console.log(/./gim.flags); + + +ReadOnly: +true + +Spec: +http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.7.2 ---- instance.global : Boolean -**true** if the **RegExp** was created with the **'g'** flag. Global -**RegExp**s will match each place %%#source|**this.source**%% occurs in the string, not -just the first match. +**true** if the **RegExp** was created with the **'g'** flag. Global **RegExp**s +will match each place %%#source|**this.source**%% occurs in the string, not just the +first match. See also %%/String#matchAll|String.matchAll()%%. console.log('abcba'.replace(/b/, 'X')); @@ -130,7 +211,8 @@ instance.multiline : Boolean **true** if the **RegExp** was created with the **'m'** flag. Multiline **RegExp**s will match **'^'** to the beginning of lines as well as the beginning of the string and match **'$'** to the end of lines as well as -the end of the string. +the end of the string. Note that **multiline** does not affect the **'.'** +character class. See %%#dotAll|**dotAll**%% for more details. var str = 'hello\nworld'; @@ -147,8 +229,11 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.7.4 ---- instance.lastIndex : Number -The starting index into the string for the next search. Is automatically set to the -index after a successful match. This property only applies if the **RegExp** is %%#global|**global**%%. +The starting index into the string for the next search. If **this** is +%%#sticky|**sticky**%%, the match must be found starting exactly at **lastIndex**. +**lastIndex** is automatically set to the found index after a successful match. +This property only applies if the **RegExp** is %%#global|**global**%% or +%%#sticky|**sticky**. var regexp = /foo|bar|baz/g; @@ -158,7 +243,30 @@ regexp.lastIndex = 5; console.log(regexp.exec('foo bar baz')[0]); - Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.7.5 +---- +instance.sticky : Boolean + +**true** if the **RegExp** was created with the **'y'** flag. Sticky +**RegExp**s will only look for matches that start exactly at +%%#lastIndex|**lastIndex**%%. Non-sticky **RegExp**s will try finding +a match at all subsequent positions in the string if there's no match +at **lastIndex**. + + +var nonSticky = /bar/; +console.log(nonSticky.test('foo bar baz')); + +var sticky = /bar/y; +console.log(sticky.test('foo bar baz')); +sticky.lastIndex = 4; +console.log(sticky.test('foo bar baz')); + + +ReadOnly: +true + +Spec: +https://tc39.es/ecma262/#sec-get-regexp.prototype.sticky diff --git a/content/JavaScript/string.jsdoc b/content/JavaScript/string.jsdoc index a4312b7..a002f30 100644 --- a/content/JavaScript/string.jsdoc +++ b/content/JavaScript/string.jsdoc @@ -1,6 +1,6 @@ String : Object -Strings contain text. They are represented as a sequence of characters. +Strings contain text. They are represented as a sequence of UTF-16 characters. JavaScript strings are immutable. Primitive: @@ -64,6 +64,9 @@ console.log('abc'.length); Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.5.1 +ReadOnly: +true + ---- prototype.charAt(pos : Number) : String @@ -85,6 +88,8 @@ prototype.charCodeAt(pos : Number) : Number Returns the unicode value of the character at position **pos**. Use %%#fromCharCode|**String.fromCharCode()**%% to generate a string from character code values. +See also %%/TextEncoder|TextEncoder%%. + console.log('abc'.charCodeAt(2)); @@ -92,6 +97,26 @@ console.log('abc'.charCodeAt(2)); Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.5 +---- +prototype.codePointAt(pos : Number) : Number + +Returns the UTF-32 code point of starting at **pos**. If the UTF-16 value at +**pos** does not start a surrogate pair, the returned value will be the UTF-16 +value at **pos**. +Use +%%#fromCodePoint|**String.fromCodePoint()**%% to generate a string from +code points. + +See also %%/TextEncoder|TextEncoder%%. + + +console.log('abc'.codePointAt(2)); +console.log('😀🐱⚽️'.codePointAt(2).toString(16)); + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.codepointat + ---- prototype.concat(string0 : String, [string1 : String, [...]]) : String @@ -106,6 +131,43 @@ console.log(x); // x is unchanged Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.6 +---- +prototype.endsWith(searchString : String, [endIndex : Number]) : Boolean + +Returns **true** if **searchString** is at the end of **this**. + +If **endIndex** is specified, the last character of **searchString** must +be at **endIndex - 1** in **this**. + + +var a = 'abcxyz'; +console.log(a.endsWith('xyz')); +console.log(a.endsWith('xy', 5)); + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.endswith + +---- +prototype.includes(searchString : String, [startingIndex = 0 : Number]) : Boolean + +Returns **true** if **searchString** is somewhere in **this** starting the search from +**startingIndex**. If **startingIndex** is negative, **this.length** is added to it before +starting the search. + + +var x = ['a', 'b', 'c', 'd']; +console.log(x.includes('b')); +console.log(x.includes('b', 2)); +console.log(x.includes('a', -2)); +console.log(x.includes('e')); + + +Version: +ECMAScript 2016 + +Spec: +http://www.ecma-international.org/ecma-262/7.0/#sec-array.prototype.includes ---- prototype.indexOf(searchString : String, [startingIndex = 0 : Number]) : Number @@ -142,12 +204,12 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.8 ---- prototype.localeCompare(that : String, [locales : Array, [options : { \ - caseFirst : Boolean, /* */ \ - ignorePunctuation : Boolean, /* */ \ - localeMatcher : String, /* */ \ - numeric : Boolean, /* */ \ - sensitivity : String, /* */ \ - usage : String /* */ \ + caseFirst : String /* Must be one of **'lower'**, **'upper'**, or **'false'**. */, \ + ignorePunctuation : Boolean /* */, \ + localeMatcher : String /* Must be one of **'best fit'** or **'lookup'**. */, \ + numeric : Boolean /* */, \ + sensitivity : String /* Must be one of **'accent'**, **'base'**, **'case'**, or **'variant'**. */, \ + usage : String /* Must be one of **'search'** or **'sort'**. */ \ }]]) : Number Compares **this** to **that**. Returns a negative number if **this** would sort @@ -176,7 +238,8 @@ portion of **this** that matched the regular expression, item **1** equal to the capturing group in **regexp**, item **2** equal to the second capturing group in **regexp**, and so on. The returned **Array** will also have an **index** property set to the starting index of the match and an **input** property set to **this**. -If **regexp** doesn't match **this**, returns **null**. +If **regexp** doesn't match **this**, returns **null**. See also +%%#matchAll|String.matchAll()%% and %%/RegExp#exec|RegExp.exec()%%. var regexp = /(\d\d\d)-(\d\d\d\d)/; @@ -190,10 +253,166 @@ if (result) { console.log('input: ' + result.input); } +

+You can name capture groups by placing **?<name>** at the start of the group. +The captured values are available on a **groups** property on the returned array. Note, +this is new with ECMAScript 2018. +

+ +var regexp = /(?\d\d\d)-(?\d\d\d-\d\d\d\d)/; +var result = 'call me: 333-555-4385'.match(regexp); +if (result) { + console.dir(result.groups.areacode); + console.dir(result[1]); + console.dir(result.groups.number); + console.dir(result[2]); +} + Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.10 +---- +prototype.matchAll(regexp : RegExp) : Iterator> + +Returns an iterator of all places regexp matches **this**. **regexp** must be a +%%/RegExp#global|global%% RegExp. + + + +const string = 'a: 12, b: 5, d: 6'; + +// Find all numbers in the string +let regexp = /\d+/g; +for (const match of string.matchAll(regexp)) { + console.log(match[0]); +} +console.log(); + +// Capture groups are available in the 1, 2, ... elements of the array +regexp = /(\w+): (\d+)/g; +for (const match of string.matchAll(regexp)) { + console.log(match[1], match[2]); +} +console.log(); + +// Capture groups can also be named +regexp = /(?\w+): (?\d+)/g; +for (const match of string.matchAll(regexp)) { + console.log(match.groups.key, match.groups.value); +} + + +Version: +ECMAScript 2020 + +---- +prototype.normalize(form : String) : String + +Returns a normalized form of **this** according to **form**. **form** must be one +of **'NFC'**, **'NFD'**, **'NFKC'**, or **'NFKD'**. See +%%https://unicode.org/reports/tr15/|https://unicode.org/reports/tr15/%%. + + +// See Figure 3 in https://unicode.org/reports/tr15/ +var a = String.fromCharCode(0x212B); + +var printString = function(form, s) { + var charCodes = [...s].map(c => ` ${c} 0x${c.charCodeAt(0).toString(16)} `); + console.log(form, ' ', s, ' ', s.length, charCodes.join(' ')); +}; + +console.log(); +console.log(' len char/code0 char/code1'); +printString(' ', a); +printString('NFD', a.normalize('NFD')); +printString('NFC', a.normalize('NFC')); + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.normalize + +---- +prototype.padEnd(minLength : Number, [fill = ' ' : String]) : String + +Returns a new string with **fill** added to the end of **this** +until %%#length|**length**%% is equal to **minLength**. If **length** +is already greater than or equal to **minLength**, returns **this** +unchanged. + + +console.log('x'.padEnd(6) + '.'); +console.log('long'.padEnd(6) + '.'); +console.log('really long'.padEnd(6) + '.'); +console.log(); + +console.log('x'.padEnd(10, '.')); +console.log('y'.padEnd(10, '-_')); +console.log(); + +for (let i = -4; i <= 4; i++) { + var cols = [i, i * i, i / 4]; + var colLengths = [5, 5, 7]; + var colStrings = cols.map(function(x, index) { + return x.toString().padEnd(colLengths[index]); + }) + console.log(colStrings.join(' | ')); +} + + +Version: +ECMAScript 2017 + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.padend + +---- +prototype.padStart(minLength : Number, [fill = ' ' : String]) : String + +Returns a new string with **fill** added to the start of **this** +until %%#length|**length**%% is equal to **minLength**. If **length** +is already greater than or equal to **minLength**, returns **this** +unchanged. + + +console.log('x'.padStart(6)); +console.log('long'.padStart(6)); +console.log('really long'.padStart(6)); +console.log(); + +console.log('x'.padStart(10, '.')); +console.log('y'.padStart(10, '-_')); +console.log(); + +for (let i = -4; i <= 4; i++) { + var cols = [i, i * i, i / 4]; + var colLengths = [5, 5, 7]; + var colStrings = cols.map(function(x, index) { + return x.toString().padStart(colLengths[index]); + }) + console.log(colStrings.join(' | ')); +} + + +Version: +ECMAScript 2017 + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.padstart + +---- +prototype.repeat(count : Number) : String + +Returns a new **String** formed by repeating **this** **count** times. + + +console.log('.'.repeat(5)); +console.log('-_'.repeat(5)); + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.repeat + ---- prototype.replace(searchValue : String, replaceValue : String) : String @@ -214,8 +433,8 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.11 prototype.replace(searchValue : String, replaceFunction(match : String, offset : Number, string : String) : String) : String

-Returns a new **String** where the first occurrence of **searchValue** in **this** is -replaced with the value returned from calling **replaceFunction**. +Returns a new **String** where the first occurrence of **searchValue** in **this** is +replaced with the value returned from calling **replaceFunction**.

@@ -244,7 +463,7 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.11 ---- prototype.replace(searchValue : RegExp, replaceValue : String) : String -Returns a new **String** where **searchValue** is replaced with **replaceValue**. +Returns a new **String** where **searchValue** is replaced with **replaceValue**. If **searchValue** is a %%/RegExp#global|global **RegExp**%%, each match in **this** will be replaced. Otherwise, just the first match will @@ -264,13 +483,119 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.11 prototype.replace(searchValue : RegExp, replaceFunction(match : String, capture1 : String, capture2 : String, ..., offset : Number, string : String) : String) : String

-Returns a new **String** where **searchValue** matches in **this** is -replaced with the value returned from calling **replaceFunction**. If +Returns a new **String** where **searchValue** matches in **this** is +replaced with the value returned from calling **replaceFunction**. If **searchValue** is a %%/RegExp#global|global **RegExp**%%, each match in **this** will be replaced. Otherwise, just the first match will be replaced.

+

+The **match** parameter to +**replaceFunction** is the same as **searchValue**, +the **capture** parameters are the values of the capture groups in **searchValue** (if any), +**offset** is the index in **this** where **searchValue** was found, +and **string** is **this**. +

+ + +var x = 'abcba'; +var replaced = 'abcba'.replace(/b/g, function(match, offset, string) { + console.log('found match of "' + match + '"'); + console.log(' at offset ' + offset); + console.log(' of string "' + string + '"'); + + return match.toUpperCase(); +}); + +console.log('replaced=' + replaced); +console.log('x=' + x); // x is unchanged + + +Spec: +http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.11 + +---- +prototype.replaceAll(searchValue : String, replaceValue : String) : String + +Returns a new **String** where all occurrences of **searchValue** in **this** are +replaced with **replaceValue**. + + +var x = 'abcba' +console.log(x.replaceAll('b', 'Z')); +console.log(x); // x is unchanged + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.replaceall + +Version: +ECMAScript 2021 + +---- +prototype.replaceAll(searchValue : String, replaceFunction(match : String, offset : Number, string : String) : String) : String + +

+Returns a new **String** where all occurrences of **searchValue** in **this** are +replaced with the value returned from calling **replaceFunction**. +

+ +

+The **match** parameter to +**replaceFunction** is the same as **searchValue**, **offset** is the index in **this** +where **searchValue** was found, and **string** is **this**. +

+ + +var x = 'abcba'; +var replaced = 'abcba'.replaceAll('b', function(match, offset, string) { + console.log('found match of "' + match + '"'); + console.log(' at offset ' + offset); + console.log(' of string "' + string + '"'); + + return match.toUpperCase(); +}); + +console.log('replaced=' + replaced); +console.log('x=' + x); // x is unchanged + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.replaceall + +Version: +ECMAScript 2021 + +---- +prototype.replaceAll(searchValue : RegExp, replaceValue : String) : String + +Returns a new **String** where all matches of **searchValue** are replaced +with **replaceValue**. + +**searchValue** must be a %%/RegExp#global|global **RegExp**%%. + + +var x = 'abcba'; +console.log(x.replaceAll(/b/g, 'Z')); +console.log(x); // x is unchanged + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.replaceall + +Version: +ECMAScript 2021 + +---- +prototype.replaceAll(searchValue : RegExp, replaceFunction(match : String, capture1 : String, capture2 : String, ..., offset : Number, string : String) : String) : String + +

+Returns a new **String** where all matches of **searchValue** in **this** are +replaced with the value returned from calling **replaceFunction**. +**searchValue** must be a %%/RegExp#global|global **RegExp**%%. +

+

The **match** parameter to **replaceFunction** is the same as **searchValue**, @@ -281,7 +606,7 @@ and **string** is **this**. var x = 'abcba'; -var replaced = 'abcba'.replace(/b/g, function(match, offset, string) { +var replaced = 'abcba'.replaceAll(/b/g, function(match, offset, string) { console.log('found match of "' + match + '"'); console.log(' at offset ' + offset); console.log(' of string "' + string + '"'); @@ -294,7 +619,10 @@ console.log('x=' + x); // x is unchanged Spec: -http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.11 +https://tc39.es/ecma262/#sec-string.prototype.replaceall + +Version: +ECMAScript 2021 ---- prototype.search(regexp : RegExp) : Number @@ -315,16 +643,16 @@ prototype.slice(startIndex : Number, [endIndex : Number]) : String Returns a new string composed of the section of **this** between **start** and **end-1**. -If **endIndex** is not specified, **this.length** is used instead. If -**startIndex** or **endIndex** is negative, **this.length** is added to it before performing -the substring. Similar to %%#substring|**substring()**%%. +If **endIndex** is not specified, **this.length** is used instead. If +**startIndex** or **endIndex** is negative, **this.length** is added to it before +performing the substring. See also %%#substring|**substring()**%%. var x = 'abcde'; console.log(x.slice(2)); -console.log(x.slice(-2)); +console.log(x.slice(-2)); // start becomes 0 console.log(x.slice(2, 4)); -console.log(x.slice(2, -1)); +console.log(x.slice(2, -1)); // end becomes 0, start/end swap console.log(x); // x is unchanged @@ -365,6 +693,23 @@ console.log(x); // x is unchanged Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.14 +---- +prototype.startsWith(searchString : String, [startingIndex = 0: Number]) : Boolean + +Returns **true** if **searchString** is at the beginning of **this**. + +If **startingIndex** is specified, **searchString** must be at **startingIndex** +in **this**. + + +var a = 'abcxyz'; +console.log(a.startsWith('abc')); +console.log(a.startsWith('bc', 1)); + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.endswith + ---- prototype.substring(start : Number, [end : Number]) : String @@ -373,11 +718,9 @@ Returns a new string composed of the section of **this** between **start** and Before performing the operation, **substring** may modifiy the effective values of **start** and **end** as follows. If both **start** and **end** are specified, and **end** is less than **start**, the values are swapped. -If **start** is less than **0**, it is replaced with **0**. -If **end** is negative, **this.length** is added to it before performing -the substring. +If either **start** or **end** is less than **0**, it is replaced with **0**. If **end** is not specified, **this.length** is used instead. - Similar to %%#slice|**slice()**%%. +See also %%#slice|**slice()**%%. var x = 'abcde'; @@ -452,6 +795,7 @@ http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.19 prototype.trim() : String Returns a copy of **this** with leading and trailing whitespace removed. +See also %%#trimStart|**trimStart()**%% and %%#trimEnd|**trimEnd()**%%. var x = ' \t ab c '; @@ -463,11 +807,48 @@ Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.20 ---- -fromCharCode(char0 : Number, [char1 : Number, [...]]) : String +prototype.trimEnd() : String + +Returns a copy of **this** with trailing whitespace removed. +See also %%#trim|**trim()**%% and %%#trimStart|**trimStart()**%%. + + +var x = ' \t ab c '; +console.log("'" + x.trimEnd() + "'"); + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.trimend + +Version: +ECMAScript 2019 + +---- +prototype.trimStart() : String + +Returns a copy of **this** with leading whitespace removed. +See also %%#trim|**trim()**%% and %%#trimEnd|**trimEnd()**%%. + + +var x = ' \t ab c '; +console.log("'" + x.trimStart() + "'"); + + +Spec: +https://tc39.es/ecma262/#sec-string.prototype.trimstart + +Version: +ECMAScript 2019 + +---- +fromCharCode(char0 : Number, [char1 : Number, [...]]) : String -Returns a new string composed of characters from the specified unicode values. +Returns a new string composed of characters from the specified UTF-16 values. +Each code should be between 0 and 0xFFFF inclusive. Use %%#charCodeAt|**charCodeAt()**%% to retrieve character codes from strings. +See also %%#fromCodePoint|**fromCodePoint()**%% and %%/TextDecoder|TextDecoder%%. + console.log(String.fromCharCode(97, 98, 99)); @@ -476,3 +857,39 @@ Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.3.2 +---- +fromCodePoint(codePoint0 : Number, [codePoint1 : Number, [...]]) : String + +Returns a new string composed of characters from the specified UTF-32 code points. +Each code point should be between 0 and 0x10FFFF inclusive. + +Use %%#codePointAt|**codePointAt()**%% to retrievecodes from strings. + +See also %%#fromCharCode|**fromCharCode()**%% and %%/TextDecoder|TextDecoder%%. + + +console.log(String.fromCharCode(0xD83D, 0xDE00)); +console.log(String.fromCodePoint(0xD83D, 0xDE00)); +console.log(String.fromCodePoint(0x1F600)); + + +Spec: +https://tc39.es/ecma262/#sec-string.fromcodepoint + +---- +raw(template : StringTemplateArray, [sub1 : String, [sub2 : String, [...]]]) : String + +**String.raw** is intended to be used as a tagged templated string. It returns the +string as typed in JavaScript, without applying character escaping. For example, +**raw`foo\nbar`** returns **foo\nbar**, with no new line in the string. + + +console.log('a\tb'); +console.log(String.raw`a\tb`); + + +Spec: +https://tc39.es/ecma262/#sec-string.raw + +Version: +ECMAScript 2015 diff --git a/content/JavaScript/stringtemplatearray.jsdoc b/content/JavaScript/stringtemplatearray.jsdoc new file mode 100644 index 0000000..4b7c86c --- /dev/null +++ b/content/JavaScript/stringtemplatearray.jsdoc @@ -0,0 +1,47 @@ +StringTemplateArray : Array + +A StringTemplateArray is the parameter passed to tagged template functions. In addition +to being an array of Strings, it contains the "raw" strings before escaping is +applied. + +See %%/String#raw|String.raw%% for a built in tagged template function. + + +Spec: +https://tc39.es/ecma262/#sec-gettemplateobject + +---- +instance.raw : Array + +Returns the template parts in **this** as written in the source code. For +example, if the template string is **`\n`**, **this[0]** will be a string of +length **1** containing the new line character whereas **this.raw[0]** will +be a string of length **2** containing **'\'** followed by **'n'**. + + +const join = (strings) => "['" + strings.join("', '") + "']"; + +// The following mimics the normal template string behavior with logging +const myTemplate = (stringTemplateArray, ...parts) => { + console.log('raw: ', join(stringTemplateArray.raw)); + console.log('cooked:', join(stringTemplateArray)); + console.log('parts: ', join(parts)); + let result = stringTemplateArray[0]; + for (let i = 1; i < stringTemplateArray.length; i++) { + result += parts[i - 1] + stringTemplateArray[i]; + } + return result; +}; + +console.log('result:', myTemplate`\n`); +console.log(); +console.log('result:', myTemplate` +`); +console.log(); +console.log('result:', myTemplate`a\tb`); +console.log(); +console.log('result:', myTemplate`A string\twith ${2}\tparts${'!'}`); + + +ReadOnly: +true diff --git a/content/JavaScript/symbol.jsdoc b/content/JavaScript/symbol.jsdoc index 035ca35..3974cdb 100644 --- a/content/JavaScript/symbol.jsdoc +++ b/content/JavaScript/symbol.jsdoc @@ -14,7 +14,7 @@ Primitive: true Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol-objects +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol-objects ---- Symbol([description : String]) : Symbol @@ -35,25 +35,41 @@ console.log(myObject['MySymbol']); Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol-description +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol-description ---- -hasInstance : Symbol +instance.description : String + +Returns the description passed to the Symbol during construction. + + +var mySymbol = Symbol('MySymbol'); +console.log(mySymbol.description); + Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol.hasinstance +https://tc39.es/ecma262/#sec-symbol.prototype.description + +Version: +ECMAScript 2019 ---- -isConcatSpreadable : Symbol +asyncIterator : Symbol + +Spec: +https://tc39.es/ecma262/#sec-symbol.asynciterator + +---- +hasInstance : Symbol Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol.isconcatspreadable +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.hasinstance ---- -isRegExp : Symbol +isConcatSpreadable : Symbol Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol.isregexp +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.isconcatspreadable ---- iterator : Symbol @@ -85,22 +101,70 @@ for (var item of x.values()) { Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol.iterator +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.iterator + +---- +match : Symbol + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.match + +---- +matchAll : Symbol + +Spec: +https://tc39.es/ecma262/#sec-symbol.matchall + +---- +replace : Symbol + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.replace + +---- +search : Symbol + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.search + +---- +species : Symbol + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.species + +---- +split : Symbol + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.split ---- toPrimitive : Symbol Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol.toprimitive +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.toprimitive ---- toStringTag : Symbol Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol.tostringtag +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.tostringtag ---- unscopables : Symbol Spec: -http://www.ecma-international.org/ecma-262/6.0/#sec-symbol.unscopables +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.unscopables + +---- +for(key : String) : Symbol + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.for + +---- +keyFor(key : String) : Symbol + +Spec: +http://www.ecma-international.org/ecma-262/10.0/#sec-symbol.for diff --git a/content/Media/audiotrack.jsdoc b/content/Media/audiotrack.jsdoc index 1cdd8f9..1123fa2 100644 --- a/content/Media/audiotrack.jsdoc +++ b/content/Media/audiotrack.jsdoc @@ -1,7 +1,7 @@ AudioTrack : Object Spec: -http://www.w3.org/html/wg/drafts/html/master/single-page.html#audiotrack +https://html.spec.whatwg.org/#audiotrack ---- instance.id : String diff --git a/content/Media/audiotracklist.jsdoc b/content/Media/audiotracklist.jsdoc index 227afe1..ef5b2f2 100644 --- a/content/Media/audiotracklist.jsdoc +++ b/content/Media/audiotracklist.jsdoc @@ -1,12 +1,12 @@ AudioTrackList : EventTarget Spec: -http://www.w3.org/html/wg/drafts/html/master/single-page.html#audiotracklist +https://html.spec.whatwg.org/#audiotracklist ---- instance[index : Number] : AudioTrack -Returns the AudioTrack at the specified **index**. +Returns the AudioTrack at the specified **index**. ---- instance.length : Number diff --git a/content/Media/htmlaudioelement.jsdoc b/content/Media/htmlaudioelement.jsdoc index b813d93..d623f5e 100644 --- a/content/Media/htmlaudioelement.jsdoc +++ b/content/Media/htmlaudioelement.jsdoc @@ -3,9 +3,9 @@ HTMLAudioElement : HTMLMediaElement **HTMLAudioElement** is an element that plays audio. It corresponds to the **

+Although WebRTC is a peer to peer protocol, the peers need some information about +each other before they can communicate. Typically this is done with a Signaling +Server, but any mechanism to transfer data can be used. The following +demonstrates setting up the peer connection using the clipboard (via copy/paste) +to transfer the connection data. +

+

Offerer

+This example demonstrates the peer that creates the offer. + +
+ + +
+ +

Answerer

+This example demonstrates the peer that receives the offer and creates the answer. + +
+
+ +
+ +Spec: +https://w3c.github.io/webrtc-pc/#webidl-1970659251 + +---- +instance.label : String + +ReadOnly: +true + +---- +instance.ordered : Boolean + +ReadOnly: +true + +---- +instance.maxPacketLifeTime : Number + +ReadOnly: +true + +---- +instance.maxRetransmits : Number + +ReadOnly: +true + +---- +instance.protocol : String + +ReadOnly: +true + +---- +instance.negotiated : Boolean + +ReadOnly: +true + +---- +instance.id : Number + +ReadOnly: +true + +---- +instance.readyState : String + +One of **'connecting'**, **'open'**, **'closing'**, or **'closed'**. + +ReadOnly: +true + +---- +instance.bufferedAmount : Number + +ReadOnly: +true + +---- +instance.bufferedAmountLowThreshold : Number + +---- +instance.binaryType : String + +---- +prototype.close() : undefined + +---- +prototype.send(data : String) : undefined + +---- +prototype.send(data : Blob) : undefined + +---- +prototype.send(data : ArrayBuffer) : undefined + +---- +prototype.send(data : ArrayBufferView) : undefined + +---- +event.open : listener(event : Event) : undefined + +---- +event.bufferedamountlow : listener(event : Event) : undefined + +---- +event.error : listener(event : RTCErrorEvent) : undefined + +---- +event.closing : listener(event : Event) : undefined + +---- +event.close : listener(event : Event) : undefined + +---- +event.message : listener(event : MessageEvent) : undefined + diff --git a/content/WebRTC/RTCDataChannelEvent.jsdoc b/content/WebRTC/RTCDataChannelEvent.jsdoc new file mode 100644 index 0000000..70b2cc0 --- /dev/null +++ b/content/WebRTC/RTCDataChannelEvent.jsdoc @@ -0,0 +1,15 @@ +RTCDataChannelEvent : Event + +Spec: +https://w3c.github.io/webrtc-pc/#dom-rtcdatachannelevent + +---- +new RTCDataChannelEvent(type : String, eventInit : { \ + channel : RTCDataChannel \ + }) : RTCDataChannelEvent + +---- +instance.channel : RTCDataChannel + +ReadOnly: +true diff --git a/content/WebRTC/RTCLocalSessionDescription.jsdoc b/content/WebRTC/RTCLocalSessionDescription.jsdoc new file mode 100644 index 0000000..56a50fb --- /dev/null +++ b/content/WebRTC/RTCLocalSessionDescription.jsdoc @@ -0,0 +1,4 @@ +RTCLocalSessionDescription : Object + +---- + diff --git a/content/WebRTC/RTCPeerConnection.jsdoc b/content/WebRTC/RTCPeerConnection.jsdoc new file mode 100644 index 0000000..f73e109 --- /dev/null +++ b/content/WebRTC/RTCPeerConnection.jsdoc @@ -0,0 +1,397 @@ +RTCPeerConnection : EventTarget + +

+Enables Real Time Communication of audio, video, and data to another browser/computer +using the WebRTC peer to peer protocol. +

+ +

+Although WebRTC is a peer to peer protocol, the peers need some information about +each other before they can communicate. Typically this is done with a Signaling +Server, but any mechanism to transfer data can be used. The following +demonstrates setting up the peer connection using the clipboard (via copy/paste) +to transfer the connection data. +

+

Offerer

+This example demonstrates the peer that creates the offer. + +
+ + + + + + + +
localremote
+ + + + +
+ +

Answerer

+This example demonstrates the peer that receives the offer and creates the answer. + +
+
+ + + + + + +
localremote
+ + + + +
+ +Spec: +https://w3c.github.io/webrtc-pc/#interface-definition + +---- +new RTCPeerConnection([configuration : { \ + iceServers : Iterable, \ + iceTransportPolicy : String /* Either **'relay'** or **'all'**. */, \ + bundlePolicy : String /* One of **'balanced'**, **'max-compat'**, or **'max-bundle'**. */, \ + rtcpMuxPolicy : String /* Must be **'require'** */, \ + certificates : Iterable, \ + iceCandidatePoolSize : Number \ + }]) : RTCPeerConnection + + +The elements of the **iceServers** property in the **configuration** argument should be of type: + +{ + url : (String or Iterable), + username : String, + credential : String, + credentialType : String +} + +---- +instance.localDescription : RTCSessionDescription + +ReadOnly: +true + +---- +instance.currentLocalDescription : RTCSessionDescription + +ReadOnly: +true + +---- +instance.pendingLocalDescription : RTCSessionDescription + +ReadOnly: +true + +---- +instance.remoteDescription : RTCSessionDescription + +ReadOnly: +true + +---- +instance.currentRemoteDescription : RTCSessionDescription + +ReadOnly: +true + +---- +instance.pendingRemoteDescription : RTCSessionDescription + +ReadOnly: +true + +---- +instance.signalingState : String + +One of **'stable'**, **'have-local-offer'**, **'have-remote-offer'**, +**'have-local-pranswer'**, **'have-remote-pranswer'**, or **'closed'** + +ReadOnly: +true + +---- +instance.iceGatheringState : String + +One of **'new'**, **'gathering'**, or **'complete'**. + +ReadOnly: +true + +---- +instance.iceConnectionState : String + +One of **'closed'**, **'failed'**, **'disconnected'**, **'new'**, **'checking'**, +**'completed'**, or **'connected'**. + +ReadOnly: +true + +---- +instance.connectionState : String + +One of **'closed'**, **'failed'**, **'disconnected'**, **'new'**, **'connecting'**, +or **'connected'**. + +ReadOnly: +true + +---- +instance.canTrickleIceCandidates : Boolean + +Returns **true** if the remote peer accepts trickled ice candidates. Only valid after +calling %%#setRemoteDescription|**setRemoteDescription()**%%. + +ReadOnly: +true + +---- +instance.sctp : RTCSctpTransport + +ReadOnly: +true + +---- +prototype.addIceCandidate([candidate = { \ + candidate : String, \ + sdpMid : String, \ + sdpMLineIndex : Number, \ + usernameFragment : String \ + }]) : Promise + +---- +prototype.createOffer([options : { \ + iceRestart : Boolean \ + }]) : Promise + +---- +prototype.createAnswer([options : { \ + }]) : Promise + +---- +prototype.setLocalDescription([description : RTCSessionDescriptionInit]) : Promise + +---- +prototype.setRemoteDescription(description : RTCSessionDescriptionInit) : Promise + +---- +prototype.restartIce() : undefined + +---- +prototype.getConfiguration() : RTCConfiguration + +---- +prototype.setConfiguration([configuration : RTCConfiguration]) : undefined + +---- +prototype.close() : undefined + +---- +prototype.createDataChannel(label : String, [options : { \ + ordered : Boolean /* Defaults to **true** */, \ + maxPacketLifeTime : Number, \ + maxRetransmits : Number, \ + protocl : String, \ + negotiated : String, \ + id: Number \ + }]) : RTCDataChannel + +---- +prototype.getStats([selector : MediaStreamTrack]) : Promise + +---- +prototype.getSenders() : Array + +---- +prototype.getReceivers() : Array + +---- +prototype.getTransceivers() : Array + +---- +prototype.addTrack(track : MediaStreamTrack, [stream1 : MediaStream, [stream2 : MediaStream, [...]]]) : RTCRtpSender + +---- +prototype.removeTrack(sender : RTCRtpSender) : undefined + +---- +prototype.addTransceiver(kind : String, configuration : { \ + direction : String /* One of **'sendrecv'**, **'sendonly'**, **'recvonly'**, **'inactive'**, or **'stopped'**. Defaults to **'sendrecv'**. */, \ + streams : Iterable, \ + sendEncodings : Iterable \ + }) : RTCRtpTransceiver + +The elements of the **sendEncodings** property in the **configuration** argument should be of type: + +{ + rid : String, + active : Boolean /* Default = **true** */, + maxBitrate : Number, + scalingResolutionDownBy : Number +} + +---- +event.negotiationneeded : listener(event : Event) : undefined + +---- +event.icecandidate : listener(event : RTCPeerConnectionIceEvent) : undefined + +---- +event.icecandidateerror : listener(event : RTCPeerConnectionIceErrorEvent) : undefined + +---- +event.signalingstatechange : listener(event : Event) : undefined + +---- +event.iceconnectionstatechange : listener(event : Event) : undefined + +---- +event.icegatheringstatechange : listener(event : Event) : undefined + +---- +event.connectionstatechange : listener(event : Event) : undefined + +---- +event.datachannel : listener(event : RTCDataChannelEvent) : undefined + +---- +event.track : listener(event : RTCTrackEvent) : undefined diff --git a/content/WebRTC/RTCStatsReport.jsdoc b/content/WebRTC/RTCStatsReport.jsdoc new file mode 100644 index 0000000..9ec4a2d --- /dev/null +++ b/content/WebRTC/RTCStatsReport.jsdoc @@ -0,0 +1,184 @@ +RTCStatsReport : Iterable + +Contains statistics about various aspects of the WebRTC connection. Obtained through +the %%RTCPeerConnection#getStats|RTCPeerConnection.getStats()%% method. + +

Offerer

+This example demonstrates the peer that creates the offer. + +
+
+ + + + + + + +
localremote
+ + + + +
+ +

Answerer

+This example demonstrates the peer that receives the offer and creates the answer. + +
+
+ + + + + + +
localremote
+ + + + +
diff --git a/content/WebSockets/CloseEvent.jsdoc b/content/WebSockets/CloseEvent.jsdoc new file mode 100644 index 0000000..882d698 --- /dev/null +++ b/content/WebSockets/CloseEvent.jsdoc @@ -0,0 +1,31 @@ +CloseEvent : Event + +Spec: +https://html.spec.whatwg.org/multipage/web-sockets.html#the-closeevent-interface + +---- +new CloseEvent(type : String, [{ \ + wasClean : Boolean, \ + code : Number, \ + reason : String \ + }]) : CloseEvent + + +---- +instance.wasClean : Boolean + +ReadOnly: +true + +---- +instance.code : Number + +ReadOnly: +true + +---- +instance.reason : String + +ReadOnly: +true + diff --git a/content/WebSockets/WebSocket.jsdoc b/content/WebSockets/WebSocket.jsdoc new file mode 100644 index 0000000..0b07165 --- /dev/null +++ b/content/WebSockets/WebSocket.jsdoc @@ -0,0 +1,219 @@ +WebSocket : EventTarget + +WebSockets are a persistent connection to a server that allows sending and receiving data. +See also %%/EventSource|EventSource%%. + +Spec: +https://html.spec.whatwg.org/multipage/web-sockets.html#the-websocket-interface + +---- +new WebSocket(url : String) : WebSocket + +Constructs a new WebSocket connection to **url**. + + + + + +---- +new WebSocket(url : String, protocol : String) : WebSocket + +Same as %%#new_WebSocket_String_Iterable|**new WebSocket(url, [protocol])**%%. + +---- +new WebSocket(url : String, protocols : Iterable) : WebSocket + + +---- +instance.url : String + +The url passed to the WebSocket constructor. + + + + + +ReadOnly: +true + +---- +instance.readyState : Number + +One of %%#CONNECTING|**WebSocket.CONNECTING**%%, +%%#OPEN|**WebSocket.OPEN**%%, +%%#CLOSING|**WebSocket.CLOSING**%%, or +%%#CLOSED|**WebSocket.CLOSED**%%. + + + + + + +ReadOnly: +true + +---- +instance.bufferedAmount : Number + +ReadOnly: +true + +---- +instance.extensions : String + +ReadOnly: +true + +---- +instance.protocol : String + +ReadOnly: +true + +---- +instance.binaryType : String + +Set to either **'arraybuffer'** or **'blob'** to choose if the %%MessageEvent#data|MessageEvent.data%% +property will be an %%/ArrayBuffer|ArrayBuffer%% or a %%/Blob|Blob%% for binary +data received by the WebSocket. + + + + + +---- +prototype.close([code : Number, [reason : String]]) : undefined + +Closes the WebSocket connection. + +---- +prototype.send(data : ArrayBuffer) : undefined + +Sends **data** to the server. + +---- +prototype.send(data : ArrayBufferView) : undefined + +Sends **data** to the server. + +---- +prototype.send(data : Blob) : undefined + +Sends **data** to the server. + +---- +prototype.send(data : String) : undefined + +Sends **data** to the server. + +---- +CONNECTING : Number + +The value of %%#readyState|readyState%% after constructing the WebSocket and before +%%#onopen|onopen%% fires. + +ReadOnly: +true + +Value: +0 + +---- +OPEN : Number + +The value of %%#readyState|readyState%% after %%#onopen|onopen%% fires. + +ReadOnly: +true + +Value: +1 + +---- +CLOSING : Number + +The value of %%#readyState|readyState%% after calling %%#close|**close()**%% and before +%%#onclose|onclose%% fires. + +ReadOnly: +true + +Value: +2 + +---- +CLOSED : Number + +The value of %%#readyState|readyState%% after %%#onclose|onclose%% fires. + +ReadOnly: +true + +Value: +3 + +---- +event.open : listener(event : Event) : undefined + +---- +event.error : listener(event : ErrorEvent) : undefined + +---- +event.close : listener(event : CloseEvent) : undefined + +---- +event.message : listener(event : MessageEvent) : undefined diff --git a/content/WebXR/XRBoundedReferenceSpace.jsdoc b/content/WebXR/XRBoundedReferenceSpace.jsdoc new file mode 100644 index 0000000..c1ef877 --- /dev/null +++ b/content/WebXR/XRBoundedReferenceSpace.jsdoc @@ -0,0 +1,10 @@ +XRBoundedReferenceSpace : XRReferenceSpace + +Spec: +https://immersive-web.github.io/webxr/#xrboundedreferencespace-interface + +---- +instance.boundsGeometry : Array + +ReadOnly: +true diff --git a/content/WebXR/XRFrame.jsdoc b/content/WebXR/XRFrame.jsdoc new file mode 100644 index 0000000..d5c1d29 --- /dev/null +++ b/content/WebXR/XRFrame.jsdoc @@ -0,0 +1,16 @@ +XRFrame : Object + +Spec: +https://immersive-web.github.io/webxr/#xrframe-interface + +---- +instance.session : XRSession + +ReadOnly: +true + +---- +prototype.getViewerPose(referenceSpace : XRReferenceSpace) : XRViewerPose + +---- +prototype.getPose(space : XRSpace, baseSpace : XRSpace) : XRPose diff --git a/content/WebXR/XRInputSource.jsdoc b/content/WebXR/XRInputSource.jsdoc new file mode 100644 index 0000000..ab0cfa5 --- /dev/null +++ b/content/WebXR/XRInputSource.jsdoc @@ -0,0 +1,44 @@ +XRInputSource : Object + +Spec: +https://immersive-web.github.io/webxr/#xrinputsource-interface + +---- +instance.handedness : String + +One of **'none'**, **'left'**, or **'right'**. + +ReadOnly: +true + +---- +instance.targetRayMode : String + +One of **'gaze'**, **'tracked-pointer'**, or **'screen'**. + +ReadOnly: +true + +---- +instance.targetRaySpace : XRSpace + +ReadOnly: +true + +---- +instance.gripSpace : XRSpace + +ReadOnly: +true + +---- +instance.profiles : Array + +ReadOnly: +true + +---- +instance.gamepad : Gamepad + +Spec: +https://immersive-web.github.io/webxr-gamepads-module/#dom-xrinputsource-gamepad diff --git a/content/WebXR/XRInputSourceEvent.jsdoc b/content/WebXR/XRInputSourceEvent.jsdoc new file mode 100644 index 0000000..d9bb9d4 --- /dev/null +++ b/content/WebXR/XRInputSourceEvent.jsdoc @@ -0,0 +1,23 @@ +XRInputSourceEvent : Event + +Spec: +https://immersive-web.github.io/webxr/#xrinputsourceevent-interface + +---- +new XRInputSourceEvent(type : String, eventInit : { \ + frame : XRFrame, \ + inputSource : XRInputSource \ + }) : XRInputSourceEvent + + +---- +instance.frame : XRFrame + +ReadOnly: +true + +---- +instance.inputSource : XRInputSource + +ReadOnly: +true diff --git a/content/WebXR/XRInputSourcesChangeEvent.jsdoc b/content/WebXR/XRInputSourcesChangeEvent.jsdoc new file mode 100644 index 0000000..eae479b --- /dev/null +++ b/content/WebXR/XRInputSourcesChangeEvent.jsdoc @@ -0,0 +1,30 @@ +XRInputSourcesChangeEvent : Event + +Spec: +https://immersive-web.github.io/webxr/#xrinputsourceschangeevent-interface + +---- +new XRInputSourcesChangeEvent(type : String, eventInit : { \ + session : XRSession, \ + added : Array, \ + removed : Array \ + }) : XRReferenceSpaceEvent + + +---- +instance.session : XRSession + +ReadOnly: +true + +---- +instance.added : Array + +ReadOnly: +true + +---- +instance.removed : Array + +ReadOnly: +true diff --git a/content/WebXR/XRLayer.jsdoc b/content/WebXR/XRLayer.jsdoc new file mode 100644 index 0000000..6577e9c --- /dev/null +++ b/content/WebXR/XRLayer.jsdoc @@ -0,0 +1,4 @@ +XRLayer : EventTarget + +Spec: +https://immersive-web.github.io/webxr/#xrlayer-interface diff --git a/content/WebXR/XRReferenceSpace.jsdoc b/content/WebXR/XRReferenceSpace.jsdoc new file mode 100644 index 0000000..b389a26 --- /dev/null +++ b/content/WebXR/XRReferenceSpace.jsdoc @@ -0,0 +1,11 @@ +XRReferenceSpace : XRSpace + +Spec: +https://immersive-web.github.io/webxr/#xrreferencespace-interface + +---- +prototype.getOffsetReferenceSpace(originOffset : XRRigidTransform) : XRReferenceSpace + +---- +event.reset : listener(event : XRReferenceSpaceEvent) : undefined + diff --git a/content/WebXR/XRReferenceSpaceEvent.jsdoc b/content/WebXR/XRReferenceSpaceEvent.jsdoc new file mode 100644 index 0000000..254263a --- /dev/null +++ b/content/WebXR/XRReferenceSpaceEvent.jsdoc @@ -0,0 +1,23 @@ +XRReferenceSpaceEvent : Event + +Spec: +https://immersive-web.github.io/webxr/#xrreferencespaceevent-interface + +---- +new XRReferenceSpaceEvent(type : String, eventInit : { \ + referenceSpace : XRReferenceSpace, \ + transform : XRRigidTransform \ + }) : XRReferenceSpaceEvent + + +---- +instance.referenceSpace : XRReferenceSpace + +ReadOnly: +true + +---- +instance.transform : XRRigidTransform + +ReadOnly: +true diff --git a/content/WebXR/XRRenderState.jsdoc b/content/WebXR/XRRenderState.jsdoc new file mode 100644 index 0000000..0566a31 --- /dev/null +++ b/content/WebXR/XRRenderState.jsdoc @@ -0,0 +1,29 @@ +XRRenderState : Object + +Spec: +https://immersive-web.github.io/webxr/#xrrenderstate-interface + +---- +instance.depthNear : Number + +ReadOnly: +true + +---- +instance.depthFar : Number + +ReadOnly: +true + +---- +instance.inlineVerticalFieldOfView : Number + +ReadOnly: +true + +---- +instance.baseLayer : XRWebGLLayer + +ReadOnly: +true + diff --git a/content/WebXR/XRRigidTransform.jsdoc b/content/WebXR/XRRigidTransform.jsdoc new file mode 100644 index 0000000..85d6a63 --- /dev/null +++ b/content/WebXR/XRRigidTransform.jsdoc @@ -0,0 +1,38 @@ +XRRigidTransform : Object + +Spec: +https://immersive-web.github.io/webxr/#xrrigidtransform-interface + +---- +new XRRigidTransform([position : DOMPointReadOnly, [orientationQuaternion : DOMPointReadOnly]]) : XRRigidTransform + +---- +new XRRigidTransform([position : Object, [orientationQuaternion : Object]]) : XRRigidTransform + +Same as **%%#new_XRRigidTransform_DOMPointReadOnly_DOMPointReadOnly|new XRRigidTransform%%(%%/DOMPointReadOnly#fromPoint|DOMPointReadOnly.fromPoint%%(position), +%%/DOMPointReadOnly#fromPoint|DOMPointReadOnly.fromPoint%%(orientation))**. + +---- +instance.position : DOMPointReadOnly + +ReadOnly: +true + +---- +instance.orientation : DOMPointReadOnly + +ReadOnly: +true + +---- +instance.matrix : Float32Array + +ReadOnly: +true + +---- +instance.inverse : XRRigidTransform + +ReadOnly: +true + diff --git a/content/WebXR/XRSession.jsdoc b/content/WebXR/XRSession.jsdoc new file mode 100644 index 0000000..9b9150d --- /dev/null +++ b/content/WebXR/XRSession.jsdoc @@ -0,0 +1,164 @@ +XRSession : EventTarget + +Provides state for a current Augmented Reality (AR) or Virtual Reality (VR) session. +Created through %%/XRSystem#requestSession|**navigator.xr.requestSession()**%%. + +Spec: +https://immersive-web.github.io/webxr/#xrsession-interface + +---- +instance.visibiltyState : String + +Will be one of **'visible'**, **'visible-blurred'**, or **'hidden'**. + +ReadOnly: +true + +---- +instance.renderState : XRRenderState + +ReadOnly: +true + +---- +instance.inputSources : Array + +ReadOnly: +true + +---- +prototype.updateRenderState([state : { \ + depthNear : Number, \ + depthFar : Number, \ + inlineVerticalFieldOfView : Number /* Only valid for **'inline'** sessions. */, \ + baseLayer : XRWebGLLayer, \ + layers : Iterable \ + }]) : undefined + +---- +prototype.requestReferenceSpace(type : String) : Promise + +**type** must be one of **'viewer'**, **'local'**, **'local-floor'**, +**'bounded-floor'**, or **'unbounded'**. + +---- +prototype.requestAnimationFrame(callback(time : Number, frame : XRFrame) : undefined) : Number + +Schedules **callback** to be called before the next time the browser renders a +frame to the screen. + +The **time** parameter to callback is the number of milliseconds since the +page loaded. + +Returns a unique handle that can be passed to %%#cancelAnimationFrame|**cancelAnimationFrame()**%% +to stop **callback** from being called. + + + + + + + +---- +prototype.cancelAnimationFrame(handle : Number) : undefined + +---- +prototype.end() : Promise + +---- +event.end : listener(event : XRSessionEvent) : undefined + +---- +event.inputsourceschange : listener(event : XRInputSourcesChangeEvent) : undefined + +---- +event.select : listener(event : XRInputSourceEvent) : undefined + +---- +event.selectstart : listener(event : XRInputSourceEvent) : undefined + +---- +event.selectend : listener(event : XRInputSourceEvent) : undefined + +---- +event.squeeze : listener(event : XRInputSourceEvent) : undefined + +---- +event.squeezeStart : listener(event : XRInputSourceEvent) : undefined + +---- +event.squeezeEnd : listener(event : XRInputSourceEvent) : undefined + +---- +event.visibilitychange : listener(event : XRSessionEvent) : undefined + diff --git a/content/WebXR/XRSessionEvent.jsdoc b/content/WebXR/XRSessionEvent.jsdoc new file mode 100644 index 0000000..cb91a7d --- /dev/null +++ b/content/WebXR/XRSessionEvent.jsdoc @@ -0,0 +1,17 @@ +XRSessionEvent : Event + +Spec: +https://immersive-web.github.io/webxr/#xrsessionevent-interface + +---- +new XRSessionEvent(type : String, eventInit : { \ + session : XRSession \ + }) : XRSessionEvent + + +---- +instance.session : XRSession + +ReadOnly: +true + diff --git a/content/WebXR/XRSpace.jsdoc b/content/WebXR/XRSpace.jsdoc new file mode 100644 index 0000000..a443b63 --- /dev/null +++ b/content/WebXR/XRSpace.jsdoc @@ -0,0 +1,4 @@ +XRSpace : EventTarget + +Spec: +https://immersive-web.github.io/webxr/#xrspace-interface diff --git a/content/WebXR/XRSystem.jsdoc b/content/WebXR/XRSystem.jsdoc new file mode 100644 index 0000000..3feb1a5 --- /dev/null +++ b/content/WebXR/XRSystem.jsdoc @@ -0,0 +1,118 @@ +XRSystem : EventTarget + +The entry point for using Augmented Reality (AR) or Virtual Reality (VR) in the +browser. Used to create an %%/XRSession|XRSession%%. + +Available through %%/Navigator#xr|navigator.xr%%. + +Spec: +https://immersive-web.github.io/webxr/#xrsystem + +---- +prototype.isSessionSupported(mode : String) : Promise + +**mode** must be one of **'inline'**, **'immersive-vr'**, or **'immersive-ar'**. + + + + + +---- +prototype.requestSession(mode : String, [options : { \ + requiredFeatures : Iterator, \ + optionalFeatures : Iterator \ + }]) : Promise + +**mode** must be one of **'inline'**, **'immersive-vr'**, or **'immersive-ar'**. + + + + + + + +---- +event.devicechange : listener(event : Event) : undefined + + + + diff --git a/content/WebXR/XRView.jsdoc b/content/WebXR/XRView.jsdoc new file mode 100644 index 0000000..46223cc --- /dev/null +++ b/content/WebXR/XRView.jsdoc @@ -0,0 +1,26 @@ +XRView : Object + +Spec: +https://immersive-web.github.io/webxr/#xrview-interface + +---- +instance.eye : String + +One of **'left'**, **'right'**, or **'none'**. + +ReadOnly: +true + +---- +instance.projectionMatrix : Float32Array + +4x4 (16 element) matrix. + +ReadOnly: +true + +---- +instance.transform : XRRigidTransform + +ReadOnly: +true diff --git a/content/WebXR/XRViewerPose.jsdoc b/content/WebXR/XRViewerPose.jsdoc new file mode 100644 index 0000000..8e7ba92 --- /dev/null +++ b/content/WebXR/XRViewerPose.jsdoc @@ -0,0 +1,10 @@ +XRViewerPose : XRPose + +spec: +https://immersive-web.github.io/webxr/#xrviewerpose-interface + +---- +instance.views : Array + +ReadOnly: +true diff --git a/content/WebXR/XRViewport.jsdoc b/content/WebXR/XRViewport.jsdoc new file mode 100644 index 0000000..532a9f1 --- /dev/null +++ b/content/WebXR/XRViewport.jsdoc @@ -0,0 +1,25 @@ +XRViewport : Object + +---- +instance.x : Number + +ReadOnly: +true + +---- +instance.y : Number + +ReadOnly: +true + +---- +instance.width : Number + +ReadOnly: +true + +---- +instance.height : Number + +ReadOnly: +true diff --git a/content/WebXR/XRWebGLLayer.jsdoc b/content/WebXR/XRWebGLLayer.jsdoc new file mode 100644 index 0000000..bf2042a --- /dev/null +++ b/content/WebXR/XRWebGLLayer.jsdoc @@ -0,0 +1,59 @@ +XRWebGLLayer : XRLayer + +Spec: +https://immersive-web.github.io/webxr/#xrwebgllayer-interface + +---- +new XRWebGLLayer(session : XRSession, gl : WebGLRenderingContext, [layerInit : { \ + antialias : Boolean /* Default = **true** */, \ + depth : Boolean /* Default = **true** */, \ + stencil : Boolean /* Default = **false** */, \ + alpha : Boolean /* Default = **true** */, \ + ignoreDepthValues : Boolean /* Default = **false** */, \ + framebufferScaleFactor : Number /* Default = **1.0** */ \ + }]) : XRWebGLLayer + +---- +instance.antialias : Boolean + +ReadOnly: +true + +---- +instance.ignoreDepthValues : Boolean + +ReadOnly: +true + +---- +instance.framebuffer : WebGLFramebuffer + +ReadOnly: +true + +---- +instance.framebufferWidth : Number + +ReadOnly: +true + +---- +instance.framebufferHeight : Number + +ReadOnly: +true + +---- +prototype.getViewport(view : XRView) : XRViewport + +---- +getNativeFramebufferScaleFactor(session : XRSession) : Number + + + + diff --git a/content/Worker/ErrorEvent.jsdoc b/content/Worker/ErrorEvent.jsdoc new file mode 100644 index 0000000..e6aecec --- /dev/null +++ b/content/Worker/ErrorEvent.jsdoc @@ -0,0 +1,63 @@ +ErrorEvent : Event + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#errorevent + + +---- +new ErrorEvent(type : String, [options : { \ + message : String, \ + filename : String, \ + lineno : Number, \ + colno : Number, \ + error : Object \ + }]) : ErrorEvent + +Spec: +https://dom.spec.whatwg.org/#concept-event-constructor + +---- +instance.message : String + +ReadOnly: +true + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#dom-errorevent-message + +---- +instance.filename : String + +ReadOnly: +true + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#dom-errorevent-filename + +---- +instance.lineno : Number + +ReadOnly: +true + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#dom-errorevent-lineno + +---- +instance.colno : Number + +ReadOnly: +true + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#dom-errorevent-colno + +---- +instance.error : Object + +ReadOnly: +true + +Spec: +https://html.spec.whatwg.org/multipage/webappapis.html#dom-errorevent-error + diff --git a/content/Worker/worker.jsdoc b/content/Worker/worker.jsdoc index cfd23ad..ec56293 100644 --- a/content/Worker/worker.jsdoc +++ b/content/Worker/worker.jsdoc @@ -1,24 +1,24 @@ Worker : EventTarget -Worker allows a page to run Javascript on a background thread so +Worker allows a page to run Javascript on a background thread so the main UI thread can remain responsive. Workers do not have access to the DOM or any global variables in the main UI thread and must use -the +the %%WorkerGlobalScope#postMessage|**postMessage()**%% method to communicate with the main thread. -See +See %%/WorkerGlobalScope|WorkerGlobalScope%% for the global properties and methods available inside the worker. Spec: -http://dev.w3.org/html5/workers/#worker +https://html.spec.whatwg.org/#worker ---- new Worker(scriptURL : String) : Worker -Creates and starts a background thread that runs the +Creates and starts a background thread that runs the code pointed at by **scriptURL**. @@ -123,7 +123,7 @@ The message passed to **postMessage** is in **event.data**. ---- -event.error : listener(event : Event) : undefined +event.error : listener(event : ErrorEvent) : undefined Fires when an error occurs in the worker. diff --git a/content/Worker/workerglobalscope.jsdoc b/content/Worker/workerglobalscope.jsdoc index 54cf42b..2e7d954 100644 --- a/content/Worker/workerglobalscope.jsdoc +++ b/content/Worker/workerglobalscope.jsdoc @@ -5,12 +5,40 @@ a %%/Worker|Worker%% background process. They can be accessed from anywhere without additional qualifiers. Spec: -http://dev.w3.org/html5/workers/#the-workerglobalscope-common-interface +https://html.spec.whatwg.org/#the-workerglobalscope-common-interface + +---- +instance.globalThis : WorkerGlobalScope + +Returns the global object itself. This is the same as %%#self|self%% +(in a %%/Worker|Worker%% context). + + + + + + +ReadOnly: +true + +Version: +ECMAScript 2020 ---- instance.self : WorkerGlobalScope -Returns the global object itself. +Returns the global object itself. This is the same as %%#globalThis|globalThis%% +(in a %%/Worker|Worker%% context). +---- +prototype.reportError(error : Object) : undefined + +Fires the %%#onerror|error%% event with the specified **error**. Unlike **throw error**, +this will always cause the error event to fire, even if there is a **catch** handler +around the call. + + + + + + ---- event.message : listener(event : Event) : undefined Called when %%/Worker#postMessage|**Worker.postMessage()**%% is called. -**event.data** contains the message passed to **postMessage()**. +**event.data** contains the message passed to **postMessage()**.